/* Portail SAV B&B — feuille de l'application.
   Couleurs, polices, rayons et ombres viennent de tokens.css (socle commun aux
   applications Access'Hôtel), chargé AVANT ce fichier. Aucune couleur ne
   s'écrit en dur ici.

   Les variables courtes ci-dessous sont des alias de confort vers les jetons :
   elles ne définissent aucune valeur propre. Changer une couleur se fait dans
   tokens.css, jamais ici.

   Deux nuances de la version précédente ont disparu et ne doivent pas revenir :
   l'aubergine foncée #511D49 et le cyan foncé #1684A8, qui n'existent pas dans
   la charte. Un aplat de marque s'assombrit au survol par filtre de luminosité
   (--ah-presse), pas en déclarant une seconde teinte. */
:root {
  --aubergine: var(--ah-aubergine);
  --cyan:      var(--ah-cyan);
  --ink:       var(--ah-ink);
  --muted:     var(--ah-ink-mute);
  --line:      var(--ah-line);
  --bg:        var(--ah-surface);
  --ok:        var(--ah-ok);
  --warn:      var(--ah-warn);
  --danger:    var(--ah-danger);
  --radius:    var(--ah-radius);
  --shadow:    var(--ah-shadow-sm);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--ah-font);
  font-size: var(--ah-fs-body);
  line-height: var(--ah-lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Titrage de la marque : Bebas Neue, capitales, jamais en texte courant.
   Les chiffres restent dans la police de texte, Bebas rend mal les montants. */
h1, h2, .titre {
  font-family: var(--ah-font-titre);
  font-weight: 400;
  letter-spacing: var(--ah-titre-tracking);
  text-transform: uppercase;
  line-height: var(--ah-lh-tight);
  color: var(--aubergine);
}
h1 { font-size: var(--ah-fs-h1); }
h2 { font-size: var(--ah-fs-h2); }
h3 { font-size: var(--ah-fs-h3); line-height: 1.3; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); font-size: .9rem; margin: .4rem 0 0; }

/* ---- Boutons ----
   Un seul bouton principal par écran. Le survol d'un aplat de marque assombrit
   par filtre, il ne change pas de couleur. */
.btn {
  font: inherit;
  border: 1px solid transparent; border-radius: var(--ah-radius-sm);
  padding: .55rem 1.05rem;
  font-size: var(--ah-fs-sm); font-weight: 600; line-height: 1.2; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  transition: background .15s, filter .15s, border-color .15s;
}
.btn:hover { filter: var(--ah-presse); }
.btn:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }
.btn-primary { background: var(--aubergine); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.12); filter: none; }
.btn-sm { padding: .35rem .75rem; font-size: .8125rem; }
.btn-outline { background: #fff; color: var(--aubergine); border-color: var(--aubergine); }
.btn-outline:hover { background: var(--ah-aubergine-fond); filter: none; }
/* Bouton discret : la plupart des actions secondaires d'un écran dense. */
.btn-neutre { background: #fff; color: var(--ink); border-color: var(--ah-line-strong); }
.btn-neutre:hover { background: var(--ah-surface); filter: none; }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--ah-danger-fond); filter: none; }
/* Rouge plein réservé à la confirmation d'une suppression. */
.btn-danger-plein { background: var(--danger); color: #fff; }

/* .btn-cyan : le cyan ne porte pas de texte (3,0:1 sur blanc, sous le minimum
   AA). Les boutons qui l'utilisaient passent en secondaire. La règle est
   conservée le temps que tous les appels aient migré, et rend un bouton
   secondaire : rien ne casse si un écran l'emploie encore. */
.btn-cyan { background: #fff; color: var(--aubergine); border-color: var(--aubergine); }
.btn-cyan:hover { background: var(--ah-aubergine-fond); filter: none; }

/* ---- Connexion ---- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--aubergine), var(--cyan));
  padding: 1rem;
}
.login-card {
  background: #fff; padding: 2.2rem; border-radius: var(--radius);
  width: 100%; max-width: 380px; box-shadow: var(--ah-shadow-lg);
  display: flex; flex-direction: column; gap: .35rem;
}
.login-logo { display: block; width: 64px; height: 64px; margin-bottom: .6rem; }
.brand { margin: 0; font-size: var(--ah-fs-h1); }
/* Le sous-titre était en cyan sur blanc : 3,0:1, sous le minimum lisible, et
   un emploi que la charte interdit. Il passe en encre douce. */
.brand-sub {
  margin: .15rem 0 .4rem; font-size: .8125rem; font-weight: 600;
  color: var(--ah-ink-soft); letter-spacing: .01em;
}
.btn-bloc { justify-content: center; width: 100%; }
.login-card label, .form label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .85rem; font-weight: 600; color: var(--ink); margin-top: .5rem;
}
input, select, textarea {
  font: inherit; font-size: var(--ah-fs-sm);
  padding: .55rem .7rem; border: 1px solid var(--ah-line-strong);
  border-radius: var(--ah-radius-sm); background: #fff; color: var(--ink); width: 100%;
}
/* Focus en aubergine et non en cyan : le cyan est trop clair pour signaler
   le champ actif, et la charte le réserve aux aplats sans texte. */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--aubergine);
  box-shadow: 0 0 0 3px rgb(var(--ah-aubergine-rgb) / .15);
}
.login-card .btn { margin-top: 1rem; }

/* ---- Barre du haut ----
   Elle porte la marque et la navigation. Les accès aux autres écrans ont quitté
   la barre d'action de la liste, qui alignait huit à neuf contrôles au même
   niveau visuel. */
.topbar {
  background: var(--aubergine); color: #fff;
  min-height: var(--ah-header-h);
  display: flex; align-items: stretch; flex-wrap: wrap;
}
.topbar-brand { display: flex; align-items: center; gap: .9rem; padding: 0 1.1rem; }
/* Réserve blanche : le logo ne se recolore jamais, il se pose sur du blanc. */
.topbar-logo {
  background: #fff; border-radius: 8px; padding: 5px;
  display: flex; align-items: center; flex: 0 0 auto;
}
.topbar-logo img { display: block; height: 34px; width: auto; }
.topbar-titre {
  font-family: var(--ah-font-titre); font-size: 1.1875rem;
  letter-spacing: var(--ah-titre-tracking); text-transform: uppercase;
  color: rgba(255,255,255,.88); line-height: 1;
  padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.26);
}
.topnav { display: flex; align-items: stretch; gap: 2px; flex: 1 1 auto; }
.topnav-item {
  font: inherit; font-size: var(--ah-fs-sm); font-weight: 600;
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: rgba(255,255,255,.74); padding: 0 1rem; cursor: pointer; white-space: nowrap;
}
.topnav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.topnav-item.on { color: #fff; border-bottom-color: var(--cyan); }
.topnav-item:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.topbar-user {
  display: flex; align-items: center; gap: .7rem;
  padding: 0 1.1rem; font-size: .8125rem; color: rgba(255,255,255,.92);
}
.topbar-ic {
  width: 32px; height: 32px; flex: 0 0 auto;
  background: none; border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
  color: #fff; display: grid; place-items: center; cursor: pointer;
}
.topbar-ic:hover { background: rgba(255,255,255,.12); }
.topbar-ic:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ava {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,.18); display: grid; place-items: center;
  font-family: var(--ah-font-titre); font-size: .875rem; letter-spacing: .04em;
}
.ic { flex: 0 0 auto; }

.container { max-width: var(--ah-content-max); margin: 1.4rem auto; padding: 0 1.2rem; }

/* ---- Liste ---- */
.list-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem;
}
.list-head h2 { margin: 0; }
.list-sub { margin: .2rem 0 0; font-size: .8125rem; color: var(--muted); }
.list-actions { display: flex; gap: .6rem; align-items: center; }

/* ---- Indicateurs de tête ---- */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem; margin-bottom: 1rem;
}
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.kpi-l {
  font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.kpi-v {
  font-size: 1.625rem; font-weight: 700; line-height: 1.1;
  color: var(--aubergine); font-variant-numeric: tabular-nums;
}
.kpi-v.attention { color: var(--warn); }
.kpi-v.alerte { color: var(--danger); }
.kpi-d { font-size: .75rem; color: var(--muted); }
.kpi-d .mauvais { color: var(--danger); font-weight: 700; }

/* ---- Barre de filtres ---- */
.barre-filtres {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .6rem .7rem; margin-bottom: .9rem;
}
.champ-recherche {
  flex: 1 1 260px; display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--ah-line-strong); border-radius: var(--ah-radius-sm);
  padding: 0 .7rem; background: #fff; min-width: 0;
}
.champ-recherche:focus-within {
  border-color: var(--aubergine); box-shadow: 0 0 0 3px rgb(var(--ah-aubergine-rgb) / .15);
}
.champ-recherche-ic { color: var(--muted); display: flex; flex: 0 0 auto; }
.champ-recherche input {
  border: 0; padding: .5rem 0; background: none; flex: 1 1 auto; min-width: 0;
}
.champ-recherche input:focus { outline: none; box-shadow: none; border: 0; }
.raccourci {
  font-family: var(--ah-font); font-size: .6875rem; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 0 .35rem;
  background: var(--ah-surface); flex: 0 0 auto;
}

/* Groupe de boutons segmentés : filtre de famille, et bascule de vue. */
.seg {
  display: inline-flex; border: 1px solid var(--ah-line-strong);
  border-radius: var(--ah-radius-sm); overflow: hidden; flex: 0 0 auto;
}
.seg button {
  font: inherit; font-size: .8125rem; font-weight: 600;
  background: #fff; color: var(--ah-ink-soft); border: 0; padding: .45rem .8rem;
  cursor: pointer; display: flex; align-items: center; gap: .45rem; white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover:not(.seg-on) { background: var(--ah-surface); }
.seg button.seg-on { background: var(--aubergine); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--aubergine); outline-offset: -2px; }
.seg-n {
  font-size: .6875rem; font-weight: 700; border-radius: 999px; padding: .05rem .4rem;
  background: var(--ah-aubergine-fond); color: var(--aubergine);
  font-variant-numeric: tabular-nums;
}
.seg button.seg-on .seg-n { background: rgba(255,255,255,.22); color: #fff; }
.seg-vue button { padding: .45rem .6rem; }

table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); font-size: var(--ah-fs-sm); }
/* En-tête aubergine en Bebas Neue, comme le prévoit la charte. */
th {
  background: var(--aubergine); color: #fff;
  font-family: var(--ah-font-titre); font-weight: 400;
  font-size: .9375rem; letter-spacing: var(--ah-titre-tracking);
  text-transform: uppercase; border-bottom: 0; white-space: nowrap;
}
.tickets-table tbody tr:nth-child(even) { background: var(--ah-surface-2); }
.tickets-table td.num, .tickets-table th:last-child { text-align: right; white-space: nowrap; }
.tickets-table .col-ref { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-fort { font-weight: 600; margin-bottom: .2rem; }
.cell-sec { color: var(--muted); font-size: .8125rem; margin-top: .1rem; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: rgb(var(--ah-aubergine-rgb) / .82); }
th.sortable:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--ah-aubergine-survol); }
.empty {
  text-align: center; color: var(--ah-ink-soft); padding: 2.5rem 1.5rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); max-width: 60ch; margin: 0 auto;
}

/* ---- Repère de stagnation ----
   Une date seule ne dit rien à qui la lit vite : la pastille se voit.
   Seuils inchangés (3 jours, puis 7), ils viennent du Kanban existant. */
.age {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8125rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.age::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.age.age-fresh { color: var(--ah-ink-soft); }
.age.age-fresh::before { background: var(--ah-line-strong); }
.age.age-warn { color: var(--warn); font-weight: 600; }
.age.age-old { color: var(--danger); font-weight: 600; }

/* Priorité : pastille et libellé, la couleur vient de .pr-* */
.prio { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.ech {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums;
}

/* ---- Pastilles de statut ----
   Principe : la couleur signale l'urgence, jamais l'étape. Le statut n'est pas
   une gravité, il ne porte donc aucune couleur d'alerte. Ce qu'un agent doit
   lire d'un coup d'œil, c'est de quel côté se trouve la balle, d'où trois
   familles de FORME et non sept couleurs :
     · plein teinté  = une action est attendue d'Access'Hôtel
     · contour tireté = en attente d'un tiers, rien n'est attendu de nous
     · gris plat      = clos
   Le libellé exact reste écrit dans la pastille. */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: var(--ah-radius-xs);
  font-size: var(--ah-fs-xs); font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
/* Chez nous */
.st-ouverture, .st-en_cours_ah, .st-reparation_atelier,
.st-ouvert, .st-en_cours {
  background: var(--ah-aubergine-fond); color: var(--aubergine);
  border-color: var(--ah-aubergine-ligne);
}
/* En attente d'un tiers */
.st-attente_hotel, .st-attente_os, .st-attente_bnb_lean {
  background: #fff; color: var(--ah-ink-soft);
  border: 1px dashed var(--ah-line-strong);
}
.st-attente_hotel::before, .st-attente_os::before, .st-attente_bnb_lean::before {
  background: none; border: 1.5px solid currentColor; width: 7px; height: 7px;
}
/* Clos */
.st-ferme, .st-resolu { background: var(--ah-neutral-fond); color: var(--ah-neutral); }

.badge.cat {
  background: var(--ah-cyan-fond); color: var(--ah-ink-soft);
  border-color: var(--ah-cyan-ligne); text-transform: uppercase;
  letter-spacing: .03em; font-size: .6875rem;
}
.badge.cat::before { display: none; }

/* ---- Priorités ----
   Avec le repère de stagnation, la seule chose de la liste qui porte une
   couleur d'alerte. Les quatre valeurs sortent des jetons d'état : aucune
   couleur n'est inventée pour l'occasion. */
/* Basse et normale ne portent pas de couleur d'alerte, il a donc fallu les
   distinguer autrement : c'est la FORME de la pastille qui les sépare, creuse
   pour basse et pleine pour normale (voir .pr-bg-* plus bas), comme les trois
   familles de statut. Deux gris voisins ne se distinguaient pas, retour du
   support du 12/08. */
.pr-basse { color: var(--ah-ink-mute); }
.pr-normale { color: var(--ink); font-weight: 600; }
.pr-haute { color: var(--warn); font-weight: 700; }
.pr-urgente { color: var(--danger); font-weight: 700; }

/* ---- Cartes / formulaires ---- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }
.form { display: flex; flex-direction: column; gap: .3rem; max-width: 940px; }

/* Formulaire sur deux colonnes : il tient dans un écran sans défilement.
   Les champs longs (description, actions, pièces jointes) gardent la largeur. */
#create-fields, #edit-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.3rem; align-items: start;
}
#create-fields > .champ, #edit-fields > .champ { margin-top: 0; }
.champ-large { grid-column: 1 / -1; }
@media (max-width: 760px) {
  #create-fields, #edit-fields { grid-template-columns: 1fr; }
}
.req-star { color: var(--danger); }
.chk { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.chk input { width: auto; }
.attach-box { margin: 1rem 0; }
.attach-box h3 { color: var(--aubergine); font-size: 1rem; margin: 0 0 .5rem; }
/* Sélecteur d'établissement avec recherche */
.picker { position: relative; }
.picker-input { width: 100%; }
/* Un choix retenu se distingue d'une saisie en cours. */
.picker-chosen .picker-input { border-color: var(--cyan); background: var(--ah-surface-2); font-weight: 600; }
.picker-err .picker-input { border-color: var(--ah-danger); background: var(--ah-danger-fond); }
.picker-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(42, 35, 48, .16); max-height: 300px; overflow-y: auto;
}
.picker-opt {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: .55rem .8rem; cursor: pointer; font-size: .93rem; color: var(--ink);
  font-family: inherit; border-bottom: 1px solid var(--ah-line);
}
.picker-opt:last-child { border-bottom: 0; }
.picker-opt:hover, .picker-opt.active { background: var(--ah-aubergine-fond); color: var(--aubergine); }
.picker-empty, .picker-more { padding: .6rem .8rem; font-size: .85rem; color: var(--muted); }
.picker-more { border-top: 1px solid var(--ah-line); font-style: italic; }

/* Multi-sélection (rattachement d'établissements à un compte) */
.picker-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .4rem; }
.picker-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 400;
  background: var(--ah-aubergine-fond); border: 1px solid var(--ah-aubergine-ligne); color: var(--aubergine);
  border-radius: 999px; padding: .2rem .35rem .2rem .6rem;
}
.picker-chip-x {
  background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 .15rem;
}
.picker-chip-x:hover { color: var(--ah-danger); }
.picker-clear { font-size: .8rem; margin-left: .3rem; }
.picker-all {
  display: block; width: 100%; text-align: left; background: var(--ah-cyan-fond); border: 0;
  border-bottom: 1px solid var(--ah-cyan-ligne); padding: .55rem .8rem; cursor: pointer;
  font-size: .88rem; font-weight: 600; color: var(--aubergine); font-family: inherit;
}
.picker-all:hover { background: var(--ah-cyan-fond); }

/* Bannette des fichiers choisis avant envoi (sélections cumulatives) */
.file-input-hidden { display: none; }
/* Dans le formulaire, les champs occupent toute la largeur : le bouton, lui, garde sa taille. */
.file-add { margin: .2rem 0; width: auto; align-self: flex-start; }
.file-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem; }
.file-chip {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 400;
  background: var(--ah-surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .5rem .25rem .7rem;
  max-width: 100%;
}
.file-chip-ko { background: var(--ah-warn-fond); border-color: var(--ah-warn-ligne); }
.file-chip-warn { color: var(--warn); font-size: .78rem; }
.file-chip-x {
  background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.05rem;
  line-height: 1; padding: 0 .15rem;
}
.file-chip-x:hover { color: var(--ah-danger); }

/* Le cyan ne porte pas de texte : ces liens passent en aubergine. */
.attach-link {
  display: inline-flex; align-items: center; gap: .4rem; margin: .2rem .6rem .2rem 0;
  color: var(--aubergine); text-decoration: none; font-weight: 600; font-size: .8125rem;
}
.attach-link:hover { text-decoration: underline; }
.ff-actions { white-space: nowrap; display: flex; gap: .3rem; flex-wrap: wrap; }
.ff-label { padding: .35rem .5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { margin-top: 1rem; }
.link-back { background: none; border: 0; color: var(--aubergine); cursor: pointer; font-size: .875rem; font-weight: 600; padding: 0; margin-bottom: 1rem; font-family: inherit; }
.link-back:hover { text-decoration: underline; }

/* ---- Détail ticket ----
   Deux colonnes : l'échange se lit à gauche de haut en bas, le suivi et les
   actions restent à droite sans avoir à faire défiler tout le fil. */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.detail-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.detail-aside { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.detail-aside .card { padding: 1rem 1.1rem; }
.detail-aside h3 { margin: 0 0 .7rem; color: var(--aubergine); font-size: 1rem; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.detail-head h2 { margin: 0 0 .2rem; color: var(--aubergine); }
.detail-ref {
  font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem;
}
/* Le titre du ticket est du texte saisi par un utilisateur : il reste dans la
   police de lecture, Bebas Neue le passerait en capitales. */
.detail-titre {
  font-family: var(--ah-font); font-size: 1.375rem; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--ink);
  line-height: 1.25; margin: 0 0 .55rem;
}
.detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.status-bar { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.status-bar .btn { justify-content: center; }

@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
}
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem 1.4rem; margin: 1rem 0; }
.meta-grid div span { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.meta-grid div b { font-weight: 600; }
.desc-box { background: var(--ah-surface-2); border-left: 3px solid var(--cyan); padding: .8rem 1rem; border-radius: 6px; white-space: pre-wrap; margin: 1rem 0; }

/* ---- Fil de commentaires ---- */
/* Le fil est une carte à part entière : l'espacement vient du conteneur. */
.thread { display: flex; flex-direction: column; gap: .9rem; }
.thread h3 { color: var(--aubergine); margin: 0 0 .2rem; }
.comment { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; }
.comment.access { border-left: 4px solid var(--aubergine); }
.comment.bnb { border-left: 4px solid var(--cyan); }
.comment.imported { border-left: 4px solid var(--ah-neutral); background: var(--ah-surface-2); }
.tag-import { background: var(--ah-neutral); color: #fff; }
.comment-head { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-bottom: .35rem; }
.comment-author { font-weight: 700; color: var(--ink); }
.tag { font-size: .65rem; padding: .1rem .4rem; border-radius: 4px; margin-left: .4rem; vertical-align: middle; }
.tag-access { background: var(--aubergine); color: #fff; }
.tag-bnb { background: var(--cyan); color: #fff; }
.comment-body { white-space: pre-wrap; font-size: .92rem; }
.reply-box { margin-top: 1rem; }
.reply-box textarea { width: 100%; }
.reply-row { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; gap: 1rem; flex-wrap: wrap; }
.notify-lbl { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); font-weight: 500; }
.notify-lbl input { width: auto; }

/* ---- Statistiques ---- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.stat-card { background: #fff; border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow); border-left: 4px solid var(--cyan); }
.stat-card span { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.stat-card b { font-size: 1.7rem; color: var(--aubergine); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.stat-block h3 { margin: 0 0 .8rem; color: var(--aubergine); font-size: 1rem; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 38px; align-items: center; gap: .6rem; margin: .35rem 0; font-size: .85rem; }
.bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.bar-track { background: var(--ah-line); border-radius: 6px; height: 14px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--aubergine), var(--cyan)); border-radius: 6px; }
.bar-val { text-align: right; font-weight: 700; color: var(--muted); }

/* ---- Administration ---- */
.admin-tabs { display: flex; gap: .3rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.admin-tab { background: none; border: 0; padding: .6rem 1.1rem; cursor: pointer; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; font-size: .95rem; }
.admin-tab:hover { color: var(--aubergine); }
.admin-tab.active { color: var(--aubergine); border-bottom-color: var(--aubergine); }
.admin-bar { display: flex; gap: .6rem; margin-bottom: .8rem; align-items: center; flex-wrap: wrap; }
.admin-bar input { max-width: 300px; }
/* Portée de l'obligation d'un champ, par catégorie de demande (onglet Formulaire).
   Les cellules s'alignent en haut : la colonne des catégories fait grandir la ligne,
   et un alignement centré ferait flotter les autres colonnes. */
#admin-content td { vertical-align: top; }
.ff-cats { margin-top: .35rem; font-size: .82rem; }
.ff-cats .chk { display: block; margin: .1rem 0; font-weight: 400; }
.ff-cat-list {
  margin: .25rem 0 0 .9rem; padding-left: .6rem; border-left: 2px solid var(--line);
}

/* Fenêtre de correction d'un ticket : les champs occupent toute la largeur */
#edit-fields { max-width: none; margin-bottom: .8rem; }
#edit-fields .picker-list { max-height: 220px; }

/* Avertissement d'administration (divergence de données avec Axonaut) */
.admin-warn {
  background: var(--ah-warn-fond); border: 1px solid var(--ah-warn-ligne); color: var(--ah-warn);
  border-radius: 8px; padding: .8rem 1rem; margin-bottom: .9rem; font-size: .92rem; line-height: 1.5;
}
.badge-warn { background: var(--ah-warn-fond); color: var(--warn); border: 1px solid var(--ah-warn-ligne); }
#u-hotels { min-height: 120px; }
.admin-block { margin-bottom: 1.4rem; }
.admin-block h3 { margin: 0 0 1rem; color: var(--aubergine); }
.opt-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.opt-row { display: grid; grid-template-columns: 1fr 90px auto auto auto; gap: .5rem; align-items: center; }
.opt-row.opt-off { opacity: .55; }
.opt-label { padding: .4rem .6rem; }
.opt-state { font-size: .78rem; color: var(--muted); text-align: center; }
.opt-add { display: flex; gap: .5rem; align-items: center; border-top: 1px dashed var(--line); padding-top: 1rem; }
.opt-add input { max-width: 320px; }

/* ---- Rapport Qualité de Service ---- */
.stats-toolbar { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.2rem; }
.period-group { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.period-group label { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; }
.period-group label div { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; font-weight: 400; text-transform: none; color: var(--ink); }
.period-group input[type=date] { width: auto; padding: .35rem .5rem; }
.period-presets { display: flex; gap: .4rem; flex-wrap: wrap; }
.home-notice { background: var(--ah-aubergine-fond); border: 1px solid var(--ah-aubergine-ligne); border-left: 4px solid var(--ah-aubergine); border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; }
.home-notice-title { font-weight: 700; color: var(--ah-aubergine); margin-bottom: .3rem; }
.home-notice-body { color: var(--ah-ink-soft); font-size: .92rem; line-height: 1.45; }
.home-notice-body ul { margin: .25rem 0 .25rem 1.1rem; padding: 0; }
.home-notice-body li { margin: .1rem 0; }
.home-notice-body a { color: var(--aubergine); text-decoration: underline; }
.home-notice-body strong { color: var(--ah-ink); }
.home-notice-body br { line-height: 1.9; }
.chk-inline { display: flex; align-items: center; gap: .5rem; flex-direction: row !important; }
.chk-inline input { width: auto; }
.export-box { margin-bottom: 1.2rem; }
.export-box summary { cursor: pointer; font-weight: 700; color: var(--brand, var(--ah-aubergine)); }
.export-grid { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin: .9rem 0; }
.export-grid label { display: flex; flex-direction: column; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; gap: .25rem; }
.export-grid input, .export-grid select { font-weight: 400; text-transform: none; color: var(--ink); padding: .35rem .5rem; }

.report-head { margin-bottom: 1.2rem; }
.report-head h2 { color: var(--aubergine); margin: 0 0 .2rem; }
.report-foot { margin-top: 1.4rem; font-size: .8rem; }

.stat-card { position: relative; }
.delta { display: inline-block; font-size: .85rem; font-weight: 700; margin-top: .3rem; }
.delta.good { color: var(--ok); }
.delta.bad { color: var(--danger); }
.delta.flat { color: var(--muted); font-weight: 600; }
.delta-ref { display: block; font-size: .68rem; color: var(--muted); }

.donut-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; align-items: stretch; }
.donut { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut svg { width: 150px; height: 150px; }
.donut-val { font-size: 26px; font-weight: 800; fill: var(--aubergine); }
.donut-label { margin-top: .5rem; font-weight: 700; color: var(--ink); }
.donut-side { text-align: left; }

table.mini { width: 100%; border-collapse: collapse; }
table.mini td { padding: .35rem .2rem; border-bottom: 1px solid var(--line); font-size: .88rem; }
table.mini td.num { text-align: right; font-weight: 700; color: var(--aubergine); width: 60px; }
table.mini thead th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); font-weight: 700; padding: .3rem .2rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
table.mini thead th.num { text-align: right; }
.table-scroll { overflow-x: auto; }

/* Titres de section du rapport statistique */
.stat-section { color: var(--aubergine); font-size: 1.15rem; margin: 1.9rem 0 .8rem; padding-bottom: .3rem; border-bottom: 2px solid var(--line); }
.stat-section:first-of-type { margin-top: 1rem; }

.trend { display: flex; gap: .4rem; align-items: flex-end; overflow-x: auto; padding-top: .5rem; }
.trend-col { display: flex; flex-direction: column; align-items: center; min-width: 46px; flex: 1; }
.trend-qs { font-size: .7rem; font-weight: 700; color: var(--ok); margin-bottom: .2rem; }
.trend-qs.below { color: var(--danger); }
.trend-barwrap { height: 120px; display: flex; align-items: flex-end; }
.trend-bar { width: 24px; background: linear-gradient(180deg, var(--aubergine), var(--cyan)); border-radius: 4px 4px 0 0; min-height: 2px; }
.trend-vol { font-size: .72rem; color: var(--muted); margin-top: .2rem; }
.trend-m { font-size: .68rem; color: var(--muted); }

/* ---- Écrans réduits ----
   L'outil se travaille sur un poste, mais il doit rester consultable sur une
   tablette ou un téléphone : un superviseur qui jette un œil, un technicien en
   déplacement. */
@media (max-width: 1000px) {
  /* La navigation défile plutôt que de déborder hors de l'écran. */
  .topnav { overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topbar-user #user-label { display: none; }
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .topbar-brand { flex: 1 1 auto; }
  .topnav { order: 3; flex-basis: 100%; border-top: 1px solid rgba(255,255,255,.18); }
  .topnav-item { padding: .6rem .8rem; }
  .container { margin: 1rem auto; padding: 0 .8rem; }
  .list-head { align-items: stretch; }
  .list-head .btn { width: 100%; justify-content: center; }
  .barre-filtres { padding: .5rem; }
  .champ-recherche { flex-basis: 100%; }
  .seg { flex: 1 1 auto; }
  .seg button { flex: 1 1 auto; justify-content: center; }
  .seg-vue { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  .opt-row { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .kpi { padding: .6rem .7rem; }
  .kpi-v { font-size: 1.375rem; }
  .topbar-titre { font-size: 1rem; }

  /* Le tableau devient une liste de fiches : neuf colonnes sur 390 px ne se
     lisent pas, et un défilement horizontal fait perdre la colonne de gauche. */
  .tickets-table, .tickets-table tbody, .tickets-table tr, .tickets-table td { display: block; width: auto; }
  .tickets-table thead { display: none; }
  .tickets-table { border: 0; box-shadow: none; background: none; }
  .tickets-table tr {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .7rem .8rem; margin-bottom: .6rem;
  }
  .tickets-table tbody tr:nth-child(even) { background: #fff; }
  .tickets-table td { border: 0; padding: .15rem 0; }
  .tickets-table td.num { text-align: left; }
  .tickets-table .col-ref { font-size: .75rem; color: var(--muted); }
}

/* ---- Impression / PDF ---- */
@media print {
  body { background: #fff; }
  .topbar, .stats-toolbar, .link-back, .no-print { display: none !important; }
  .container { max-width: none; margin: 0; padding: 0; }
  .card, .stat-card, .donut, .stat-block { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .stat-grid, .donut-row { gap: .6rem; }
  .report-head h2 { font-size: 18px; }
  .stat-section { font-size: 14px; break-after: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .drillable { border: 0 !important; background: none !important; color: inherit !important; }
  .drill-overlay { display: none !important; }
  @page { margin: 12mm; }
}

/* ---- Pièces jointes de commentaire + champ fichier de réponse ---- */
.comment-notified { margin-top: .4rem; font-size: .74rem; color: var(--ah-ink-mute); word-break: break-word; }
.comment-att { display: flex; flex-direction: column; gap: .2rem; margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--ah-line); }
.comment-att .attach-link { font-size: .85rem; }
.reply-box .file-lbl { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--aubergine); margin: .4rem 0; }
.notify-box { margin: .5rem 0; border: 1px solid var(--ah-line); border-radius: 8px; padding: .4rem .6rem; }
.notify-box summary { cursor: pointer; font-size: .85rem; color: var(--aubergine); font-weight: 600; }
.rcpt-list { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; }
.rcpt-list .chk { font-size: .85rem; font-weight: 400; }

/* ---- Suivi des durées (détail ticket) ---- */
.durations-box { margin: 1rem 0; }
.durations-box h3 { color: var(--aubergine); font-size: 1rem; margin: 0 0 .5rem; }
.dur-total { margin-bottom: .6rem; }
.durations-box table.mini { max-width: 420px; }

/* ---- Couleurs de priorité (pastilles / bordures) ---- */
/* Basse : pastille creuse. Normale : pastille pleine. La progression se lit
   d'un coup d'œil, creux → plein → orange → rouge, sans ajouter de couleur aux
   deux niveaux qui ne sont pas des alertes. */
.pr-bg-basse { background: #fff; border: 2px solid var(--ah-line-strong); }
.pr-bg-normale { background: var(--ah-ink-soft); }
.pr-bg-haute { background: var(--ah-warn); }
.pr-bg-urgente { background: var(--ah-danger); }
.pr-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
/* Liseré des cartes Kanban : même écart de valeur que les pastilles, un gris
   très clair contre l'encre douce, et non deux gris moyens. */
.pr-border-basse { border-left: 4px solid var(--ah-line-strong); }
.pr-border-normale { border-left: 4px solid var(--ah-ink-soft); }
.pr-border-haute { border-left: 4px solid var(--ah-warn); }
.pr-border-urgente { border-left: 4px solid var(--ah-danger); }

/* ---- Bascule de vue ---- */
.view-toggle { display: inline-flex; border: 1px solid var(--line, var(--ah-line)); border-radius: 8px; overflow: hidden; }
.view-toggle .btn { border: 0; border-radius: 0; background: #fff; color: var(--aubergine); }
.view-toggle .btn.active { background: var(--aubergine); color: #fff; }

/* ---- Pleine largeur (liste Kanban) ---- */
.container.full { max-width: none; margin: 1.2rem 0; padding: 0 1rem; }

/* ---- Kanban ---- */
.kanban { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.kb-col { flex: 1 1 210px; min-width: 210px; background: var(--ah-surface-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 260px); }
/* Une colonne d'attente est en retrait : rien n'y est attendu de nous. */
.kb-col-tiers { opacity: .84; }
.kb-col-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .7rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ah-surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.kb-col-titre { font-family: var(--ah-font-titre); font-size: .9375rem; letter-spacing: var(--ah-titre-tracking); text-transform: uppercase; color: var(--ink); line-height: 1.1; }
.kb-count { font-size: .8rem; color: var(--ah-ink-mute); font-weight: 700; }
.kb-col-body { flex: 1 1 auto; padding: 0 .5rem .5rem; overflow-y: auto; min-height: 120px; }
.kb-col-body.kb-over { background: var(--ah-aubergine-fond); outline: 2px dashed var(--cyan, var(--ah-cyan)); outline-offset: -4px; border-radius: 8px; }
.kb-card { background: #fff; border-radius: 8px; padding: .55rem .6rem; margin-bottom: .5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: grab; }
.kb-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.kb-card.dragging { opacity: .5; }
.kb-card-top { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; }
.kb-card-title { font-weight: 600; margin: .2rem 0; font-size: .9rem; }
.kb-card-meta { color: var(--ah-ink-mute); font-size: .8rem; }
.kb-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .45rem; padding-top: .4rem; border-top: 1px solid var(--line); font-size: .75rem;
}
.kb-card-foot .age { font-size: .75rem; }
/* .kb-card-age : ancien pied de carte, remplacé par le repère .age du pied.
   Conservé pour ne rien casser si un rendu l'emploie encore. */
.kb-card-age { margin-top: .4rem; font-size: .72rem; font-weight: 600; }
.kb-card-age.age-fresh { color: var(--ah-ink-mute); }
.kb-card-age.age-warn { color: var(--ah-warn); }
.kb-card-age.age-old { color: var(--ah-danger); }
.kb-empty {
  color: var(--ah-ink-mute); text-align: center; padding: .9rem .6rem; font-size: .8125rem;
  border: 1px dashed var(--ah-line-strong); border-radius: var(--ah-radius-sm);
}
.kb-hint { margin-top: .6rem; font-size: .82rem; }

/* ---- Détail : champs dynamiques ---- */
.dfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem 1.2rem; margin: 1rem 0; }
.dfield-full { grid-column: 1 / -1; }
.dfield-label { display: block; color: var(--ah-ink-mute); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.dfield-val { font-weight: 600; margin-top: .15rem; }
.desc-inline { font-weight: 400; background: var(--ah-surface-2); border-radius: 8px; padding: .6rem .7rem; white-space: pre-wrap; }
.attach-inline { display: flex; flex-direction: column; gap: .25rem; font-weight: 400; }
.prio-edit .pr-select { font-weight: 700; padding: .25rem .4rem; border-radius: 6px; }

/* ---- Légende des priorités ---- */
.prio-legend { margin: .5rem 0 1rem; }
.prio-legend summary { cursor: pointer; color: var(--aubergine); font-weight: 600; }
.prio-legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; margin-top: .6rem; }
.prio-legend-item { display: flex; gap: .5rem; align-items: flex-start; background: var(--ah-surface-2); border-radius: 8px; padding: .5rem .6rem; }
.prio-legend-item .pr-dot { margin-top: .25rem; }

/* ---- Compte rendu de clôture ---- */
.closure-box { border: 1px solid var(--ah-aubergine-ligne); background: var(--ah-surface-2); border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0; }
.closure-box h3 { color: var(--aubergine); font-size: 1rem; margin: 0 0 .4rem; }
.closure-box h4 { margin: .8rem 0 .3rem; font-size: .85rem; color: var(--ah-ink-mute); }
.closure-tag { margin-bottom: .5rem; }

/* ---- Modales ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(30,20,35,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.modal-card { background: #fff; border-radius: 12px; padding: 1.2rem 1.3rem; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal-card h3 { color: var(--aubergine); margin: 0 0 .3rem; }
.modal-card label { display: block; margin: .7rem 0 .2rem; font-weight: 600; }
.modal-card textarea, .modal-card select, .modal-card input[type=text], .modal-card input[type=number] { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
/* Message des fenêtres d'information et de confirmation, qui remplacent les
   boîtes du navigateur. */
.modal-texte { color: var(--ah-ink-soft); font-size: var(--ah-fs-sm); margin: .6rem 0 0; }
.modal-card h3 { display: flex; align-items: center; gap: .5rem; }
.fb-type { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0 1rem; }
.fb-radio { display: flex; align-items: center; gap: .5rem; font-weight: 500; cursor: pointer;
  border: 1px solid var(--ah-line); border-radius: 8px; padding: .55rem .7rem; }
.fb-radio input { width: auto; }
.fb-radio:has(input:checked) { border-color: var(--aubergine); background: var(--ah-aubergine-fond); }
.parts-block { margin: .8rem 0; }
.parts-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: .4rem; }
.part-row { display: grid; grid-template-columns: 1fr 90px 60px 32px; gap: .35rem; margin-bottom: .35rem; }
.part-row input { width: 100%; }
.part-del { padding: .2rem .4rem; }

/* ---- Clôture : types de résolution + éléments remplacés ---- */
.tags-block, .items-block { border: 1px solid var(--ah-line); border-radius: 8px; padding: .5rem .7rem; margin: .7rem 0; }
.items-head { font-weight: 600; margin-bottom: .4rem; font-size: .9rem; }
/* flex-direction explicite : ces cases sont des <label> imbriqués, et dans un
   formulaire ils héritent sinon de la colonne de « .form label », ce qui pose la
   case au-dessus de son libellé. */
.tags-block .chk, .items-block .chk { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; font-weight: 400; margin: .1rem .8rem .1rem 0; }
.item-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.item-row .chk { flex: 1 1 auto; margin: 0; }
.item-row .item-other-label { flex: 1 1 auto; }
.item-row .item-qty { width: 64px; flex: 0 0 auto; }

/* ---- Assistant de dépannage guidé ---- */
#assistant-content { max-width: 720px; margin: 0 auto; }
/* Sur fond clair, le .btn-ghost (pensé pour la topbar) doit rester lisible. */
#assistant-content .btn-ghost { color: var(--muted); border: 1px solid var(--line); }
#assistant-content .btn-ghost:hover { background: var(--ah-aubergine-fond); color: var(--ink); }

/* Mention d'information (le guide s'étoffe), et non d'avertissement : ton neutre,
   couleurs de la marque, pour ne pas signaler un doute sur le contenu existant. */
.assist-draft {
  background: var(--ah-cyan-fond); border: 1px solid var(--ah-cyan-ligne); color: var(--ah-ink-soft);
  border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; margin-bottom: 1rem;
  line-height: 1.45;
}
.assist-intro { color: var(--muted); margin: 0 0 1.2rem; line-height: 1.5; }
.assist-q { color: var(--aubergine); margin: 0 0 1rem; font-size: 1.15rem; }
.assist-crumb {
  color: var(--ah-ink-soft); font-weight: 600; font-size: .9rem; margin-bottom: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}

/* Grille des équipements */
.assist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.assist-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  text-align: left; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem; cursor: pointer;
  box-shadow: var(--shadow); transition: border-color .15s, transform .1s;
}
.assist-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.assist-ic { font-size: 1.8rem; line-height: 1; }
.assist-card-t { font-weight: 700; color: var(--ink); }
.assist-card-d { font-size: .85rem; color: var(--muted); }

/* Carte mise en avant de l'aiguillage (la panne, qui passe par le guide) :
   pleine largeur pour qu'elle prime visuellement sur les autres demandes. */
.assist-card-hl { border-color: var(--cyan); border-width: 2px; grid-column: 1 / -1; }
.assist-card-hl .assist-ic { font-size: 2.2rem; }
.assist-card-hl .assist-card-t { font-size: 1.1rem; }
#choose-content .assist-q { margin: 2rem 0 1rem; font-size: 1rem; }

/* Sortie de secours du guide : visible sans concurrencer les choix de l'arbre */
.assist-exit { margin-top: 1.4rem; padding-top: .9rem; border-top: 1px dashed var(--line); text-align: center; }
.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer; font-size: .9rem;
  color: var(--muted); text-decoration: underline; font-family: inherit;
}
.btn-link:hover { color: var(--aubergine); }

/* Rappel du parcours au-dessus du formulaire de création (aligné sur .form) */
#choose-content { max-width: 720px; margin: 0 auto; }
.assist-recap {
  max-width: 680px; margin: 0 0 1rem; background: var(--ah-ok-fond); border: 1px solid var(--ah-ok-ligne);
  border-radius: 8px; padding: .7rem .9rem; font-size: .92rem; color: var(--ink);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.assist-recap-exit { background: var(--ah-warn-fond); border-color: var(--ah-warn-ligne); }
/* Le .btn-ghost est pensé pour la topbar (texte blanc) : illisible sur ce fond clair. */
.assist-recap .btn-ghost { color: var(--muted); border: 1px solid var(--line); background: #fff; }
.assist-recap .btn-ghost:hover { background: var(--ah-aubergine-fond); color: var(--ink); }

/* Issue du parcours, affichée dans l'en-tête du ticket */
.assist-badge {
  display: inline-block; margin-top: .5rem; font-size: .85rem; font-weight: 600;
  background: var(--ah-ok-fond); border: 1px solid var(--ah-ok-ligne); color: var(--ah-ok);
  border-radius: 999px; padding: .25rem .7rem;
}
.assist-badge-exit { background: var(--ah-warn-fond); border-color: var(--ah-warn-ligne); color: var(--warn); }

/* Liste de choix (symptômes, réponses) */
.assist-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.assist-choice {
  text-align: left; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: .85rem 1rem; cursor: pointer; font-size: .98rem;
  font-weight: 500; color: var(--ink); transition: border-color .15s, background .15s;
}
.assist-choice:hover { border-color: var(--aubergine); background: var(--ah-surface-2); }

/* Encart d'une étape (question / action) */
.assist-node {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow);
}
.assist-node h3 { margin: 0 0 .5rem; color: var(--aubergine); }
.assist-node p { margin: 0; line-height: 1.55; }
.assist-action { border-left: 4px solid var(--cyan); }
.assist-tag {
  display: inline-block; background: var(--cyan); color: #fff; font-size: .72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .18rem .55rem; border-radius: 20px; margin-bottom: .7rem;
}

/* Issues : résolution ou escalade ticket */
.assist-issue { text-align: center; padding: 2rem 1.4rem; }
.assist-issue-ic { font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; }
.assist-issue h3 { justify-content: center; }
.assist-ok { border-left: 4px solid var(--ok); }
.assist-esc { border-left: 4px solid var(--aubergine); }
.assist-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.3rem; }

.assist-nav { margin-top: 1.1rem; }

/* Liens vers les fiches support */
.assist-fiches { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 .2rem; }
.assist-fiche {
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  font-size: .9rem; font-weight: 600; color: var(--aubergine);
  background: var(--ah-aubergine-fond); border: 1px solid var(--ah-aubergine-ligne);
  border-radius: var(--ah-radius-sm); padding: .35rem .75rem;
}
.assist-fiche:hover { background: var(--ah-aubergine-ligne); text-decoration: underline; }
/* Sur les encarts d'issue (centrés), on centre aussi les liens de fiche */
.assist-issue .assist-fiches { justify-content: center; }

/* ---- Drill-down : chiffres cliquables + fenêtre de tickets ---- */
.drillable {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; font-weight: inherit;
  border-bottom: 1px dashed var(--ah-aubergine-ligne);
  transition: color .12s, background .12s;
}
.drillable:hover { color: var(--aubergine); background: var(--ah-aubergine-fond); border-bottom-color: var(--aubergine); }
.drillable:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 1px; border-radius: 3px; }
.bar-val .drillable { padding: 0 .15rem; }

.drill-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(42, 35, 48, .48);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 1rem; overflow: auto;
}
.drill-overlay[hidden] { display: none; }
.drill-card {
  background: #fff; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(80, 30, 73, .28);
  width: min(920px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.drill-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--ah-surface-2);
}
.drill-head .drill-title { margin: 0; color: var(--aubergine); font-size: 1.05rem; }
.drill-close {
  background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 0 .2rem;
}
.drill-close:hover { color: var(--danger); }
.drill-body { padding: 1rem 1.2rem; overflow: auto; }
.drill-body .table-scroll { overflow-x: auto; }
.drill-table { box-shadow: none; }
.drill-table tbody tr { cursor: pointer; }
.drill-table tbody tr:hover { background: var(--ah-cyan-fond); }
.drill-table td.nowrap, .drill-table th { white-space: nowrap; }