/* Design system Swissroc (https://claude.ai/artifact/2Di3UnJAniHMbvMJdvQr85), appliqué comme dans le projet Dashboard (DashboardLayout) :
   bandeau noir avec le logo blanc et couleurs, titre en haut à gauche avec un trait vertical de 1 px, étiquette en capitales dans une pastille en
   contour ; dessous, des cartes blanches arrondies à 24 px sur le dégradé noir → rouge à 135° ; Geomanist (titres en Medium) ; rouge en accent
   seulement ; aucune ombre ; icônes Tabler en contour. Même fichier dans Swissroc Map et Swissroc Documents. */

@font-face { font-family: Geomanist; src: url('fonts/geomanist-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Geomanist; src: url('fonts/geomanist-medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Geomanist; src: url('fonts/geomanist-bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root { --noir: #000000; --gris-fonce: #343e48; --gris-clair: #c6c6c6; --rouge: #e20613; --rouge-fonce: #b70f16; --blanc: #ffffff;
  --gris-fond: #f2f2f2; --filet: #e3e3e3; --ok: #43ba57; --attention: #eac641; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--noir); font-family: Geomanist, Arial, sans-serif; font-size: 15px; line-height: 1.45;
  background: #000000 linear-gradient(135deg, #000000 0%, #000000 12%, var(--rouge) 100%) fixed; }
a { color: var(--noir); }

/* Bandeau : logo (zone de sécurité = côté de la griffe, 36 px), titre avec trait vertical, étiquette de l'application en pastille à droite */
header { background: var(--noir); color: var(--blanc); padding: 36px 0; }
header .inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "logo session" "title kicker"; align-items: center; gap: 36px 24px; }
header .logo { grid-area: logo; display: block; height: 36px; width: auto; }
header .session { grid-area: session; justify-self: end; margin: 0; font-size: 12px; color: var(--gris-clair); }
header .session a { color: var(--blanc); }
header .kicker { grid-area: kicker; justify-self: end; margin: 0; padding: 5px 14px; border: 1px solid var(--blanc); border-radius: 999px; font-size: 11px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blanc); white-space: nowrap; }
header h1 { grid-area: title; margin: 0; padding-left: 16px; border-left: 1px solid var(--blanc); font-size: 28px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.15; }

main { max-width: 1080px; margin: 0 auto; padding: 40px; display: flex; flex-direction: column; gap: 32px; }

/* Cartes */
.card { background: var(--blanc); border-radius: 24px; padding: 28px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
h2 { margin: 0 0 20px; padding-left: 14px; border-left: 1px solid var(--noir); font-size: 18px; font-weight: 500; letter-spacing: 0.01em; color: var(--noir); }
.meta { margin: 0; font-size: 13px; color: var(--gris-fonce); }
.note { margin: 0; font-size: 13px; color: rgba(255,255,255,0.85); }
.note a { color: var(--blanc); }

/* Page de message (accès refusé, erreur, attente) : une carte centrée, icône en accent */
.message { width: 100%; max-width: 640px; margin: 0 auto; background: var(--blanc); border-radius: 24px; padding: 36px 40px 32px; }
.message .icon { display: block; color: var(--rouge); margin-bottom: 16px; }
.message h2 { margin: 6px 0 14px; font-size: 24px; }
.message p { margin: 0 0 16px; color: var(--gris-fonce); }
.message p:last-child { margin-bottom: 0; }
.message strong { color: var(--noir); font-weight: 500; }
.message code { font-size: 13px; background: var(--gris-fond); border-radius: 8px; padding: 2px 6px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.button { display: inline-block; background: var(--rouge); color: var(--blanc); text-decoration: none; border-radius: 999px; padding: 11px 24px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; font-family: inherit; }
.button:hover, .button:focus-visible { background: var(--rouge-fonce); }
.secondary { color: var(--noir); font-size: 14px; }

/* Attente pendant une génération : l'icône tourne, puis devient une coche ou une alerte */
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.message.done .icon { color: var(--noir); }

/* Tableaux sobres : en-têtes en gris foncé sur un filet noir */
table { width: 100%; border-collapse: collapse; }
th { font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: var(--gris-fonce); padding: 10px 14px; border-bottom: 1px solid var(--noir); }
td { padding: 11px 14px; border-bottom: 1px solid var(--filet); vertical-align: top; }
tbody tr:hover td { background: var(--gris-fond); }

/* Pastilles : arrondi complet, en contour, jamais remplies ; un point coloré dit l'état */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--noir); border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--noir); white-space: nowrap; }
.state { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.ok .dot { background: var(--ok); }
.error .dot { background: var(--rouge); }
.info .dot { background: var(--gris-clair); }
.error.state, .pill.error { color: var(--rouge); }
.pill.error { border-color: var(--rouge); }

/* /status : une carte de synthèse, puis une carte par groupe de contrôles */
.status { display: contents; }
.status h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status h2 .pill { margin-left: auto; }
.status table { table-layout: fixed; }
.status td:first-child { width: 16rem; }
.status .state { white-space: normal; }
.status td:nth-child(2) { overflow-wrap: anywhere; }
.status td code { font-size: 12px; color: var(--gris-fonce); }

/* Liste de liens (page de test) */
.links td:first-child { width: 60%; }
.links td a { text-decoration: none; }
.links td a:hover { text-decoration: underline; }
.links .debug a { color: var(--gris-fonce); font-size: 13px; margin-right: 16px; }

@media (max-width: 720px) {
  header { padding: 28px 0; } header .inner, main { padding-left: 16px; padding-right: 16px; } header h1 { font-size: 22px; }
  header .inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "kicker" "title" "session"; gap: 20px; }
  header .logo { height: 28px; } header .kicker, header .session { justify-self: start; }
  main { padding-top: 16px; padding-bottom: 16px; gap: 16px; }
  .card { padding: 20px; border-radius: 16px; }
  .message { padding: 28px 20px 24px; border-radius: 16px; } .message h2 { font-size: 20px; }
  table { display: block; overflow-x: auto; }
  .status td:first-child { width: 10rem; }
}