/* ==========================================================================
   vigie — Charte Groupe Perrin (kit graphique du 25 septembre 2026).
   Écrans : connexion, portail des applications, administration du catalogue.
   Une seule famille, Qanelas (400 → 800), servie depuis static/fonts/.
   Les jetons portent les noms de la charte ; le code d'écran emploie les
   rôles (fond, surface, encre…) plutôt que les rampes.
   ========================================================================== */
@font-face { font-family: 'Qanelas'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Qanelas-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Qanelas'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Qanelas-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Qanelas'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Qanelas-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Qanelas'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Qanelas-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Qanelas'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Qanelas-ExtraBold.woff2') format('woff2'); }

:root {
  /* Couleurs de marque */
  --bleu: #1b2a44;          /* Bleu de Prusse */
  --orange: #c45727;        /* Orange épicée — aplats à texte blanc */
  --cuivre: #b67f3e;        /* décor uniquement, jamais en texte */
  --lin: #f1eadd;

  /* Rampes de travail */
  --bleu-900: #101b2e;
  --bleu-800: #1b2a44;
  --bleu-700: #2a3d5c;
  --bleu-600: #3d5477;
  --bleu-300: #8695ac;      /* pas de texte courant */
  --bleu-100: #d6dce5;
  --bleu-50: #edf0f4;
  --orange-700: #8f3d1b;
  --orange-600: #a3461d;    /* le seul orange autorisé en texte */
  --orange-100: #f7e2d6;
  --cuivre-100: #f0e3d0;
  --lin-100: #faf7f2;
  --lin-200: #f1eadd;
  --lin-300: #e2d7c4;
  --succes: #2e7d5b;
  --succes-100: #e6f1ec;
  --succes-700: #1f5d43;
  --alerte: #c9931f;
  --alerte-100: #faf0da;
  --alerte-700: #7a5a0e;
  --erreur: #b3332b;
  --erreur-100: #f7e4e2;
  --erreur-700: #8c2822;
  --info-100: #e3ebf3;
  --info-700: #224c72;

  /* Rôles */
  --fond: var(--lin-200);
  --surface: #ffffff;
  --surface-calme: var(--lin-100);
  --encre: var(--bleu);
  --encre-douce: var(--bleu-600);
  --encre-inverse: #ffffff;
  --bordure: var(--bleu-100);
  --bordure-lin: var(--lin-300);
  --filet: var(--bleu-50);
  --lien: var(--orange-600);
  --lien-survol: var(--orange-700);

  /* Rayons : rien n'est en gélule */
  --radius-dense: 4px;
  --radius-controle: 6px;
  --radius-carte: 8px;

  /* Ombres teintées bleu, jamais noires */
  --shadow-1: 0 1px 2px rgba(27, 42, 68, .06);
  --shadow-2: 0 1px 3px rgba(27, 42, 68, .08), 0 3px 10px rgba(27, 42, 68, .05);
  --shadow-3: 0 10px 28px rgba(27, 42, 68, .14);
  --shadow-focus: 0 0 0 3px rgba(196, 87, 39, .35);
  --shadow-rail: 0 1px 3px rgba(16, 27, 46, .3);

  --spacing-controle: 40px;
}
@media (pointer: coarse) { :root { --spacing-controle: 44px; } }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Qanelas', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 19px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lien); text-decoration: none; }
a:hover { color: var(--lien-survol); text-decoration: underline; }
input, textarea, select, button { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* ── Bandeau (le rail replié) ────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  min-height: 64px; padding: 0 32px;
  background: var(--bleu-900); color: var(--bleu-100);
  box-shadow: var(--shadow-rail);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-logo { height: 38px; width: auto; display: block; }
.wordmark {
  display: flex; align-items: center; gap: 8px;
  border-left: 1px solid var(--bleu-700); padding-left: 12px;
}
.wordmark-mark { height: 24px; width: auto; display: block; }
.wordmark-text { display: flex; flex-direction: column; gap: 2px; }
.wordmark-name {
  font-size: 16px; line-height: 20px; font-weight: 800;
  letter-spacing: -.015em; color: var(--encre-inverse);
}
.wordmark-sub {
  font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lin-300);
}
.topbar-right {
  display: flex; align-items: center; gap: 16px; min-width: 0; margin-left: auto;
}
/* Pastille d'environnement : succès en prod, alerte en dev. */
.env {
  display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px;
  border-radius: var(--radius-controle);
  background: var(--succes-100); color: var(--succes-700);
  font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.env-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--succes); }
.env.is-dev { background: var(--alerte-100); color: var(--alerte-700); }
.env.is-dev .env-dot { background: var(--alerte); }
.who {
  font-size: 12px; font-weight: 500; color: var(--bleu-100);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .btn-quiet { background: transparent; border-color: var(--bleu-700); color: var(--bleu-100); }
.topbar .btn-quiet:hover { background: var(--bleu); border-color: var(--bleu); color: var(--encre-inverse); }

/* ── Onglets (dans le bandeau) ───────────────────────────────────────── */
.tabs { display: flex; gap: 4px; }
.tab {
  display: inline-flex; align-items: center; height: 44px; padding: 0 16px;
  border-radius: var(--radius-controle);
  font-size: 13px; font-weight: 500; color: var(--bleu-100); text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.tab:hover { background: var(--bleu); color: var(--encre-inverse); text-decoration: none; }
/* L'entrée active s'inverse : aplat lin sur bleu nuit, pas un simple gras. */
.tab.is-active, .tab.is-active:hover {
  background: var(--lin-200); color: var(--bleu-900); font-weight: 600;
}

/* ── Conteneur & en-tête de page ─────────────────────────────────────── */
.page { max-width: 1320px; margin: 0 auto; padding: 32px 32px 48px; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-douce);
}
/* Filet cuivre du surtitre de page : le cuivre se regarde, il ne se lit pas. */
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--cuivre); }
.page-head h1 {
  font-size: clamp(24px, 3vw, 34px); line-height: 1.1; font-weight: 800;
  letter-spacing: -.028em; color: var(--encre); margin: 8px 0 4px;
}
.page-sub { font-size: 13px; font-weight: 400; color: var(--encre-douce); margin: 0; }
.head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Recherche : l'icône est dans le champ ───────────────────────────── */
.search-wrap { position: relative; }
.search-hint {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 700; color: var(--bleu-300); pointer-events: none;
}
.search {
  width: 300px; max-width: 100%; height: var(--spacing-controle);
  border: 1px solid var(--bordure); border-radius: var(--radius-controle);
  padding: 0 12px 0 32px;
  font-size: 13px; font-weight: 400; color: var(--encre);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search::placeholder { color: var(--bleu-600); }
.search:hover { border-color: var(--bleu-300); }
.search:focus { outline: none; border-color: var(--orange); box-shadow: var(--shadow-focus); }

/* ── Boutons : primaire (bleu), accent (orange, un seul par écran), discret ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--spacing-controle); padding: 0 16px;
  font-size: 13px; line-height: 19px; font-weight: 600;
  border-radius: var(--radius-controle);
  border: 1px solid var(--bordure); background: var(--surface); color: var(--encre);
  cursor: pointer; text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.btn:hover { border-color: var(--bleu-300); background: var(--bleu-50); color: var(--encre); text-decoration: none; }
.btn:disabled { background: var(--bleu-50); border-color: var(--bleu-100); color: var(--bleu-300); cursor: not-allowed; }

.btn-dark { background: var(--bleu); border-color: var(--bleu); color: var(--encre-inverse); }
.btn-dark:hover { background: var(--bleu-700); border-color: var(--bleu-700); color: var(--encre-inverse); }
.btn-orange { background: var(--orange); border-color: var(--orange); color: var(--encre-inverse); }
.btn-orange:hover { background: var(--orange-600); border-color: var(--orange-600); color: var(--encre-inverse); }
.btn-orange:active { background: var(--orange-700); border-color: var(--orange-700); }
.btn-quiet, .btn-plain, .btn-remove { min-height: 32px; padding: 0 12px; font-size: 12px; }
.btn-plain { border-color: transparent; background: transparent; color: var(--encre-douce); }
.btn-plain:hover { color: var(--erreur-700); background: var(--erreur-100); border-color: transparent; }
.btn-icon {
  min-height: 32px; min-width: 32px; padding: 0 8px;
  border-radius: var(--radius-dense); font-size: 12px; font-weight: 700; color: var(--encre-douce);
}
/* Danger : bordure erreur qui se remplit au survol — l'écran ne crie pas avant le geste. */
.btn-remove { border-color: var(--erreur); background: var(--surface); color: var(--erreur-700); }
.btn-remove:hover { background: var(--erreur); border-color: var(--erreur); color: var(--encre-inverse); }

/* ── Panneau de filtres ──────────────────────────────────────────────── */
.filters {
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); box-shadow: var(--shadow-1);
  padding: 12px 16px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.filters-label {
  font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase; color: var(--encre-douce);
}
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
/* Puce : se clique, porte aria-pressed. Neutre = bordure, active = bleu plein. */
.chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border: 1px solid var(--bordure); border-radius: var(--radius-controle);
  background: var(--surface); cursor: pointer;
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--encre);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover { border-color: var(--bleu-300); }
.chip-count {
  margin-left: 8px; padding: 0 4px; border-radius: var(--radius-dense);
  background: var(--bleu-50); color: var(--encre-douce);
  font-size: 11px; font-weight: 700;
}
.chip.is-active { background: var(--bleu); border-color: var(--bleu); color: var(--encre-inverse); }
.chip.is-active .chip-count { background: rgba(255, 255, 255, .2); color: var(--encre-inverse); }
.filters-count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--encre-douce); }

/* ── Grille de tuiles (cartes) ───────────────────────────────────────── */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tile {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); padding: 20px;
  color: inherit; text-decoration: none; box-shadow: var(--shadow-1);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tile:hover { border-color: var(--bleu-300); box-shadow: var(--shadow-2); color: inherit; text-decoration: none; }
.tile:focus-visible { box-shadow: var(--shadow-focus); }
.tile-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mono {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-carte);
  font-size: 16px; font-weight: 800; letter-spacing: -.015em;
}
.tile-name { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--encre); }
.tile-cat {
  font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase; color: var(--encre-douce); margin-top: 2px;
}
.tile-desc {
  font-size: 13px; line-height: 19px; font-weight: 400; color: var(--encre-douce);
  text-wrap: pretty; margin: 0;
}
.tile-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--filet);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tile-host {
  font-size: 12px; font-weight: 400; color: var(--encre-douce);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile-open { font-size: 12px; font-weight: 600; color: var(--lien); white-space: nowrap; }
.tile:hover .tile-open { color: var(--lien-survol); text-decoration: underline; }

/* Teintes de catégorie : couples 100/700 de la charte, tous lisibles. */
.cat-exploitation { background: var(--info-100);    color: var(--info-700); }
.cat-commerce     { background: var(--orange-100);  color: var(--orange-700); }
.cat-gestion      { background: var(--cuivre-100);  color: var(--encre); }
.cat-support-si   { background: var(--succes-100);  color: var(--succes-700); }
.cat-rh           { background: var(--alerte-100);  color: var(--alerte-700); }
.cat-default      { background: var(--bleu-50);     color: var(--bleu-600); }

/* ── État vide ───────────────────────────────────────────────────────── */
.empty {
  padding: 48px; text-align: center;
  font-size: 14px; line-height: 21px; font-weight: 500; color: var(--encre-douce);
}

/* ── Pied de page ────────────────────────────────────────────────────── */
.foot {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--bordure-lin);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 12px; font-weight: 400; color: var(--encre-douce);
}

/* ── Tableau d'administration ────────────────────────────────────────── */
.tbl-wrap {
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); box-shadow: var(--shadow-1); overflow: clip;
}
/* ordre · site · url · catégorie · visible · actions */
.tbl-head, .tbl-row {
  display: grid; grid-template-columns: 64px 1fr 232px 140px 96px 176px;
  gap: 16px; align-items: center;
}
.tbl-head {
  background: var(--lin-200); padding: 12px 16px;
  font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--bleu-700);
}
.tbl-row {
  min-height: 40px; padding: 12px 16px; border-bottom: 1px solid var(--filet);
  transition: background-color .14s ease;
}
.tbl-row:last-child { border-bottom: none; }
.tbl-row:hover { background: var(--lin-100); }
.tbl-row.is-hidden { opacity: .55; }
.cell-r { text-align: right; }
.cell-site { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mono-sm {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-controle);
  font-size: 12px; font-weight: 800;
}
.cell-name { font-size: 13px; font-weight: 600; color: var(--encre); }
.cell-desc {
  font-size: 12px; line-height: 16px; font-weight: 400; color: var(--encre-douce);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-url {
  font-size: 12px; font-weight: 400; color: var(--encre-douce);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge {
  display: inline-block; border-radius: var(--radius-controle); padding: 2px 8px;
  font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.tbl-note {
  margin-top: 16px; background: var(--info-100); border-radius: var(--radius-carte);
  padding: 12px 16px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--info-700);
}
.order-cell { display: flex; align-items: center; }
.drag-handle {
  cursor: grab; user-select: none; color: var(--bleu-300);
  font-size: 16px; line-height: 1; letter-spacing: -3px; padding: 4px 2px;
}
.drag-handle:active { cursor: grabbing; }
.tbl-row { cursor: default; }
.tbl-row.dragging { opacity: .4; }
/* Liseré indiquant où la ligne va s'insérer. */
.tbl-row.drop-before { box-shadow: inset 0 2px 0 var(--orange); }
.tbl-row.drop-after { box-shadow: inset 0 -2px 0 var(--orange); }

/* ── Modale ──────────────────────────────────────────────────────────── */
.overlay-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 27, 46, .5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px; overflow-y: auto;
}
.modal {
  width: min(560px, 100%); background: var(--surface);
  border-radius: var(--radius-carte); box-shadow: var(--shadow-3); overflow: clip;
}
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--filet);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.modal-eyebrow {
  font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase; color: var(--encre-douce);
}
.modal-title { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--encre); margin: 4px 0 2px; }
.modal-meta { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--encre-douce); }
.modal-close {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-controle);
  border: 1px solid transparent; background: transparent; color: var(--encre-douce);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.modal-close:hover { background: var(--bleu-50); color: var(--encre); }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--encre); }
.field em { color: var(--lien); font-style: normal; }
.input, .textarea, .select {
  min-height: var(--spacing-controle);
  border: 1px solid var(--bordure); border-radius: var(--radius-controle); padding: 0 12px;
  background: var(--surface); color: var(--encre);
  font-size: 13px; line-height: 19px; font-weight: 400;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { padding: 8px 12px; font-size: 14px; line-height: 21px; resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--bleu-300); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--orange); box-shadow: var(--shadow-focus);
}
.field-row { display: grid; grid-template-columns: 1fr 120px; gap: 16px; }
.input-mono { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.field-check { flex-direction: row; align-items: center; gap: 8px; }
.field-check input { accent-color: var(--orange); width: 16px; height: 16px; margin: 0; }
.field-check > span { font-weight: 400; }
.modal-foot {
  padding: 12px 20px; background: var(--surface-calme);
  border-top: 1px solid var(--filet);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.modal-foot-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ── Chargement & erreurs ────────────────────────────────────────────── */
#overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(241, 234, 221, .72);
  display: flex; align-items: center; justify-content: center;
}
.loader {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--bleu-100); border-top-color: var(--orange);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.alert {
  background: var(--erreur-100); border-radius: var(--radius-carte);
  padding: 12px 16px; margin-bottom: 16px;
  font-size: 13px; font-weight: 500; color: var(--erreur-700);
}
.notice {
  background: var(--succes-100); border-radius: var(--radius-carte);
  padding: 12px 16px; margin-bottom: 16px;
  font-size: 13px; font-weight: 500; color: var(--succes-700);
}

/* ── Page de connexion ───────────────────────────────────────────────── */
.login-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px;
}
.login-card {
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); box-shadow: var(--shadow-2);
  padding: 48px 32px 32px; width: 100%; max-width: 420px; text-align: center;
}
.login-brand {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin-bottom: 32px;
}
.login-perrin { height: 48px; width: auto; }
.login-vigie { display: flex; align-items: center; gap: 8px; text-align: left; }
.login-vigie .wordmark-mark { height: 32px; }
.login-vigie .wordmark-name { color: var(--encre); font-size: 20px; line-height: 24px; }
.brand-sub {
  font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-douce);
}
.login-title {
  font-size: 24px; line-height: 30px; font-weight: 700;
  letter-spacing: -.015em; color: var(--encre); margin: 0 0 4px;
}
.login-subtitle { font-size: 13px; font-weight: 400; color: var(--encre-douce); margin: 0 0 24px; }
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--bleu); border-radius: var(--radius-controle);
  background: var(--bleu); color: var(--encre-inverse);
  font-size: 13px; font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease;
}
.ms-btn:hover { background: var(--bleu-700); border-color: var(--bleu-700); color: var(--encre-inverse); text-decoration: none; }
.ms-btn svg { background: #fff; padding: 2px; border-radius: 2px; }
.sso-error {
  background: var(--erreur-100); border-radius: var(--radius-controle);
  padding: 12px; margin-bottom: 16px;
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--erreur-700); text-align: left;
}
code {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  background: var(--lin-100); border: 1px solid var(--bordure); border-radius: var(--radius-dense);
  padding: .08em .35em; font-size: .9em; color: var(--encre);
}

/* ── Accès refusé ────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--bordure-lin);
  border-radius: var(--radius-carte); box-shadow: var(--shadow-1); padding: 32px;
}
.card h1 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 8px; }
.card p { font-size: 14px; line-height: 21px; color: var(--encre-douce); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 16px; }
  .topbar-logo { height: 32px; }
  .tabs { order: 3; flex-basis: 100%; overflow-x: auto; }
  .tab { height: 40px; }
  .topbar-right { gap: 12px; }
  .who { display: none; }
  .page { padding: 24px 16px 48px; }
  .page-head { align-items: stretch; }
  .head-actions { width: 100%; }
  .search-wrap { flex: 1 1 auto; }
  .search { width: 100%; }
  .filters-count { margin-left: 0; }

  /* Le tableau d'admin passe en cartes empilées. */
  .tbl-head { display: none; }
  .tbl-row {
    grid-template-columns: 1fr; gap: 8px;
    padding: 16px; border-bottom: 1px solid var(--bordure-lin);
  }
  .cell-r { text-align: left; }
  .cell-url { white-space: normal; word-break: break-all; }
  .cell-desc { white-space: normal; }
  .field-row { grid-template-columns: 1fr; }
  .modal-foot { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .topbar, .filters, #overlay { display: none; }
  body { background: #fff; }
}