/* meme gouttiere que les autres pages publiques : sans elle, header.css retombait sur 32 px et
   le logo de l'en-tete demarrait 40 px plus a gauche que sur index, annuaire ou la fiche. */
:root { --edge: clamp(20px, 5vw, 72px); }
/* BeandBus — centre de support (phase 59). Feuille de page : charge AVANT
   header/blocks/mobile. Deux états : la porte (sans session) et l'espace
   (liste des demandes | fil du ticket), empilé sous 900 px. Couleurs d'état
   locales, comme sur /statut : la palette marine + ambre n'a ni vert ni rouge. */

:root {
  --sp-vert: oklch(0.58 0.13 152);
  --sp-vert-bg: oklch(0.95 0.035 152);
  --sp-rouge: oklch(0.55 0.19 27);
  --sp-rouge-bg: oklch(0.95 0.035 27);
  --sp-ambre: var(--flash-deep, oklch(0.52 0.13 75));
  --sp-ambre-bg: oklch(0.96 0.045 88);
  --sp-gris: var(--ink-55, rgba(41, 43, 49, 0.55));
  --sp-gris-bg: oklch(0.945 0.008 252);
  --sp-bleu: var(--color-section, #262a60);
  --sp-bleu-bg: oklch(0.95 0.02 275);
  --sp-card: 0 2px 10px rgba(20, 30, 60, 0.05), inset 0 0 0 1px rgba(60, 90, 180, 0.12);
}

/* Le bundle du design system pose un texte clair (thème sombre) : chaque feuille
   de page remet l'encre. */
body { color: var(--ink, #22262e); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--edge, 20px) calc(2 * var(--leading, 26px)); }
.head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: calc(1.5 * var(--leading, 26px)) 0 var(--leading, 26px); }
.head h1 { margin: 0; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; }
.head .sub { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--ink-64, #555); }
.head .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumb { font-size: 13px; line-height: 20px; margin: 0 0 var(--space-3, 12px); color: var(--ink-55, #666); }
.crumb a { color: inherit; }

/* --- boutons de la page --- */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit;
  font-size: 14px; font-weight: 500; line-height: 20px; padding: 10px 16px; border-radius: 999px;
  cursor: pointer; text-decoration: none; color: var(--ink, #22262e); background: var(--color-neutral-100, #fff);
  border: 0; box-shadow: inset 0 0 0 1px rgba(60, 90, 180, 0.22); white-space: nowrap; min-height: 42px; }
.sp-btn:hover { box-shadow: inset 0 0 0 1.5px var(--sp-bleu); }
.sp-btn.pri { background: var(--sp-bleu); color: var(--color-neutral-100, #fff); box-shadow: none; }
.sp-btn.pri:hover { background: color-mix(in srgb, var(--sp-bleu) 88%, black); }
.sp-btn.amb { background: var(--flash, #f2c14e); color: var(--flash-ink, #3a2a00); box-shadow: none; }
.sp-btn.amb:hover { background: color-mix(in srgb, var(--flash, #f2c14e) 90%, black); }
.sp-btn.lite { background: transparent; box-shadow: none; color: var(--ink-64, #555); padding-inline: 10px; }
.sp-btn.lite:hover { color: var(--ink, #22262e); box-shadow: none; text-decoration: underline; }
.sp-btn[disabled] { opacity: .6; cursor: default; }

/* --- la porte : sans session --- */
.sp-gate { max-width: 640px; margin: 0 auto; padding: 28px 26px 26px; border-radius: 18px;
  background: var(--color-neutral-100, #fff); box-shadow: var(--sp-card); }
.sp-gate h2 { margin: 0 0 8px; font-size: 22px; line-height: 28px; letter-spacing: -0.014em; }
.sp-gate p { margin: 0 0 14px; font-size: 14.5px; line-height: 22px; color: var(--ink-64, #555); }
.sp-gate-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.sp-gate-btns .sp-btn { flex: 1 1 200px; min-height: 46px; }
.sp-gate-more { font-size: 13.5px !important; margin-bottom: 0 !important; }
.sp-gate-note { padding: 10px 12px; border-radius: 10px; background: var(--sp-ambre-bg); color: var(--flash-ink, #3a2a00);
  font-size: 13.5px; line-height: 20px; margin: 0 0 14px; }

/* --- la grille liste | fil --- */
.sp-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.sp-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp-detail { min-width: 0; }
.sp-back { display: none; }

/* --- carte d'un ticket dans la liste --- */
.tk { display: block; padding: 12px 14px 12px; border-radius: 14px; color: inherit; text-decoration: none;
  background: var(--color-neutral-100, #fff); box-shadow: var(--sp-card); transition: box-shadow .15s; }
.tk:hover { box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05), inset 0 0 0 1.5px var(--sp-bleu); }
.tk.on { box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05), inset 0 0 0 2px var(--sp-bleu); }
.tk.is-ferme { opacity: .72; }
.tk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-ref { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-55, #666); font-feature-settings: "tnum" 1; }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-ambre); flex: none; }
.tk-sub { display: block; margin: 5px 0 3px; font-weight: 600; font-size: 14.5px; line-height: 20px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-meta { display: block; font-size: 12px; line-height: 17px; color: var(--ink-55, #666); }
.tk-meta b { font-weight: 600; color: var(--ink-64, #555); }

/* --- badges d'état --- */
.bdg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; line-height: 18px; font-weight: 600;
  letter-spacing: 0.02em; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.bdg-ouvert { background: var(--sp-bleu-bg); color: var(--sp-bleu); }
.bdg-en_cours { background: var(--sp-bleu); color: var(--color-neutral-100, #fff); }
.bdg-attente { background: var(--sp-ambre-bg); color: var(--sp-ambre); }
.bdg-resolu { background: var(--sp-vert-bg); color: var(--sp-vert); }
.bdg-ferme { background: var(--sp-gris-bg); color: var(--sp-gris); }
.bdg-haute, .bdg-urgente { background: var(--sp-rouge-bg); color: var(--sp-rouge); }

/* --- le fil --- */
.sp-card { border-radius: 16px; background: var(--color-neutral-100, #fff); box-shadow: var(--sp-card); }
.th-head { padding: 16px 18px 12px; border-bottom: 1px solid rgba(60, 90, 180, 0.09); }
.th-head .tk-top { margin-bottom: 4px; }
.th-head h2 { margin: 0; font-size: 19px; line-height: 26px; letter-spacing: -0.012em; }
.th-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 12.5px; line-height: 18px; color: var(--ink-55, #666); }
.th-meta b { font-weight: 600; color: var(--ink-64, #555); }
.th-meta a { color: var(--sp-bleu); font-weight: 600; }
.th-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.cb { max-width: 84%; }
.cb p { margin: 0; padding: 9px 13px; font-size: 13.5px; line-height: 21px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cb span { display: block; margin-top: 4px; font-size: 11px; line-height: 16px; color: var(--ink-55, #666); font-feature-settings: "tnum" 1; }
.cb.them { align-self: flex-start; }
.cb.them p { background: color-mix(in srgb, var(--color-neutral-900, #111) 6%, transparent); border-bottom-left-radius: 4px; }
.cb.me { align-self: flex-end; }
.cb.me p { background: var(--sp-bleu); color: var(--color-neutral-100, #fff); border-bottom-right-radius: 4px; }
.cb.me span { text-align: right; }
.cb.sys { align-self: center; max-width: 100%; }
.cb.sys p { background: transparent; padding: 2px 10px; font-size: 12px; line-height: 17px; color: var(--ink-55, #666); text-align: center; font-style: italic; }
.cb[data-retry] { cursor: pointer; opacity: .55; }
.th-empty { font-size: 13.5px; line-height: 20px; color: var(--ink-55, #666); text-align: center; margin: 8px 0; }
.th-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px 18px 16px; border-top: 1px solid rgba(60, 90, 180, 0.09); }
.th-form textarea { flex: 1; min-width: 0; font: inherit; font-size: 14px; line-height: 21px; resize: vertical; min-height: 44px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(60, 90, 180, 0.28); background: var(--color-neutral-100, #fff); color: inherit; }
.th-form textarea:focus { outline: none; border-color: var(--sp-bleu); }
.th-foot { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 0 18px 14px; font-size: 12.5px; line-height: 18px; color: var(--ink-55, #666); }
.th-foot .sp-btn { margin-left: auto; }
.th-closed { margin: 0; padding: 12px 18px 16px; font-size: 13.5px; line-height: 20px; color: var(--ink-64, #555); border-top: 1px solid rgba(60, 90, 180, 0.09); }
.th-closed a { font-weight: 600; color: var(--sp-bleu); }

/* --- nouvelle demande --- */
.nf { padding: 18px 18px 16px; display: grid; gap: 14px; }
.nf h2 { margin: 0; font-size: 19px; line-height: 26px; letter-spacing: -0.012em; }
.nf .f { display: grid; gap: 5px; }
.nf .f > span { font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--ink-64, #555); }
.nf .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.nf .input, .nf select, .nf textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 21px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(60, 90, 180, 0.28); background: var(--color-neutral-100, #fff); color: inherit; }
.nf textarea { min-height: 140px; resize: vertical; }
.nf .input:focus, .nf select:focus, .nf textarea:focus { outline: none; border-color: var(--sp-bleu); }
.nf .hint { font-size: 12px; line-height: 17px; color: var(--ink-55, #666); }
.nf .chk { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 20px; cursor: pointer; }
.nf .chk input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--sp-bleu); }
.nf .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nf .err { font-size: 13px; line-height: 19px; color: var(--sp-rouge); margin: 0; min-height: 0; }

/* --- états vides --- */
.sp-empty { padding: 28px 22px; text-align: center; border-radius: 16px; background: var(--color-neutral-100, #fff); box-shadow: var(--sp-card); }
.sp-empty h3 { margin: 0 0 6px; font-size: 17px; line-height: 24px; }
.sp-empty p { margin: 0 0 14px; font-size: 14px; line-height: 21px; color: var(--ink-64, #555); }
.sp-hint { padding: 22px; text-align: center; font-size: 14px; line-height: 21px; color: var(--ink-55, #666);
  border-radius: 16px; border: 1.5px dashed rgba(60, 90, 180, 0.2); }

/* --- toast --- */
#bb-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; margin: 0;
  padding: 10px 18px; border-radius: 12px; background: oklch(0.28 0.06 27); color: #fff; font-size: 13.5px; line-height: 20px;
  box-shadow: 0 8px 24px rgba(20, 20, 40, .28); max-width: min(92vw, 480px); }
#bb-toast[hidden] { display: none; }

/* --- téléphone et tablette : la liste et le fil s'empilent --- */
@media (max-width: 899px) {
  .sp-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-grid.has-detail .sp-list, .sp-grid.has-detail .sp-hint { display: none; }
  .sp-grid:not(.has-detail) .sp-detail { display: none; }
  .sp-back { display: inline-flex; margin-bottom: 10px; }
  .head h1 { font-size: 26px; line-height: 32px; }
  .head .acts { margin-left: 0; width: 100%; }
  .head .acts .sp-btn { flex: 1 1 auto; }
  .nf .row2 { grid-template-columns: minmax(0, 1fr); }
  .cb { max-width: 92%; }
  .th-form { padding-inline: 14px; }
  .th-head, .th-body, .nf { padding-inline: 14px; }
  .th-foot { padding-inline: 14px; }
}

/* — pied de page : même gabarit que /statut et l'annuaire (le markup vient de là) — */
footer { --leading: 28px; } /* le jeton vit dans les feuilles de page ; sans lui les calc() du pied tombaient à 0 */
footer { padding: calc(2 * var(--leading)) 0 var(--leading);
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-900) 8%, transparent); }
.f-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--leading) var(--space-6); }
.f-b { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; letter-spacing: -0.01em; }
.f-brand p { font-size: 13px; line-height: 20px; color: var(--ink-55); margin: 10px 0 0; max-width: 34ch; }
.f-col h4 { font-size: 11.5px; line-height: 18px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-55); margin: 0 0 12px; font-weight: 500; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.f-col a { font-size: 13.5px; line-height: 20px; color: var(--color-neutral-700); }
.f-col a:hover { color: var(--color-accent-700); }
.f-base { margin: calc(1.5 * var(--leading)) 0 0; padding-top: var(--leading);
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
  font-size: 12.5px; line-height: 19px; color: var(--ink-55); }
@media (max-width: 720px) { .f-cols { grid-template-columns: 1fr 1fr; } }

/* 1.88.0 — le guide d'utilisation (guide.html), en tête du Support */
.sp-guide { margin: 10px 0 0; }
.sp-guide a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px;
  background: #EEF3FF; color: #1D4ED8; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: inset 0 0 0 1px #D6E4FF; }
.sp-guide a::before { content: "📘"; }
.sp-guide a:hover { background: #E0EAFF; color: #143EB7; }