/* Echo, back-office (interface § 3). Feuille autonome : elle suffit sans Bootstrap et le complète quand
   public/assets/vendor/bootstrap/bootstrap.min.css (5.3.3, IC12) est présent, chargé AVANT elle. Aucun style en ligne
   (CSP style-src 'self'). Les règles marquées « Bootstrap » neutralisent ce que sa feuille changerait (largeurs des champs
   dans les lignes de formulaires, couleur des badges et du code, marges des listes de détails).

   Visuel (passe UI du 04/11) : une seule couleur de signal, l'ambre, pour « ce qui demande un humain » : bandeau de
   simulation, lien actif du menu, brouillon sélectionné dans la file, focus clavier. Le reste est neutre ; chaque état a
   une couleur qui a un sens (vert : parti, ambre : à valider, bleu : en file, rouge : annulé ou refusé).

   Seconde passe (v1.6, KB6) : outil interne pour des AM pressés, sobre et dense. En-tête d'écran uniforme (titre, une phrase
   d'usage, action principale à droite), indicateurs en tuiles colorées selon l'objectif (vert : atteint, rouge : non atteint,
   gris : sans donnée), états vides qui disent quoi faire, formulaires alignés sur une grille, focus visible partout, pied
   de pagination commun, menu repliable (collapse de Bootstrap) sous 760 px. Contrastes AA sur fond blanc et gris. */
:root {
  --ink: #1b2434; --muted: #556072; --line: #dde2ea; --line-soft: #edf0f5; --bg: #f2f4f8; --card: #fff; --head: #f6f8fb;
  --nav: #12213a; --nav-ink: #c9d4e6;
  --accent: #1f5fbf; --accent-dark: #174a96; --accent-soft: #e8f0fc;
  --signal: #f2c94c; --signal-soft: #fff4d1; --signal-ink: #6e4b00;
  --ok: #1e7b45; --ok-dark: #17613a; --ok-soft: #e6f4ec;
  --warn: #8a5d00; --danger: #b42318; --danger-dark: #8f1c13; --danger-soft: #fdecea;
  --focus: #f2c94c; --radius: 8px;
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-dark); }
h1 { font-size: 1.4rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .9rem; }
h2 { font-size: 1.06rem; font-weight: 650; margin: 0 0 .55rem; }
h3 { font-size: .96rem; font-weight: 650; margin: 1rem 0 .4rem; }
.skip-link { position: absolute; left: -999px; top: .4rem; z-index: 10; background: #fff; color: var(--ink); padding: .4rem .7rem; border-radius: 6px; }
.skip-link:focus { left: .6rem; }

/* Barre du haut : la marque, le menu groupé par usage, la personne connectée. */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: 0 1rem; min-height: 3.1rem; background: var(--nav); color: #fff; }
.topbar a { color: var(--nav-ink); text-decoration: none; }
.topbar a:hover { color: #fff; }
.brand { font-weight: 750; font-size: 1.2rem; letter-spacing: .01em; color: #fff !important; }
.nav-collapse { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; }
/* Bootstrap : `.collapse:not(.show)` masque le menu ; au-delà de 760 px, il reste toujours affiché (replié en dessous seulement). */
@media (min-width: 761px) { .nav-collapse.collapse:not(.show) { display: flex; } }
.nav-links { display: flex; flex-wrap: wrap; align-items: stretch; flex: 1; gap: 0; }
.nav-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; padding: 0 .4rem; margin: .55rem 0; border-left: 1px solid rgba(201, 212, 230, .2); }
.nav-group:first-child { border-left: 0; padding-left: 0; }
.nav-links a { display: flex; align-items: center; padding: .3rem .38rem .2rem; border-bottom: 3px solid transparent; font-size: .9rem; white-space: nowrap; }
.nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--signal); font-weight: 600; }
.nav-toggle { display: none; }
.logout { display: flex; align-items: center; gap: .6rem; margin: 0; }
.who { color: var(--nav-ink); font-size: .85rem; white-space: nowrap; }
.topbar .btn-outline-secondary, .nav-toggle { background: transparent; color: #fff; border: 1px solid rgba(201, 212, 230, .45); }
.topbar .btn-outline-secondary:hover, .nav-toggle:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.page { padding: 1rem 1.25rem 2rem; max-width: 1500px; margin: 0 auto; }
/* Bandeau de simulation : rayé ambre, court, toujours visible. */
.sim-banner { margin: 0 0 .9rem; padding: .28rem .7rem; border-radius: 6px; color: var(--signal-ink); font-size: .86rem; font-weight: 600;
  background: repeating-linear-gradient(135deg, var(--signal-soft) 0 12px, #ffefb8 12px 24px); border: 1px solid #f0d27a; }

/* KB6 : en-tête d'écran uniforme : titre, phrase d'usage, action principale (et filtres) à droite. */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .6rem 1.2rem; margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.page-head h1 { margin: 0; }
.page-title { min-width: 0; flex: 1 1 22rem; }
.page-title .lead { margin: .2rem 0 0; color: var(--muted); font-size: .93rem; max-width: 62rem; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.page-actions form { margin: 0; }
.filters { margin: 0; color: var(--muted); font-size: .92rem; }
.filters strong { color: var(--ink); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; margin: 1.2rem 0 .5rem; }
.section-head h2 { margin: 0; }

.narrow { max-width: 26rem; margin: 3.5rem auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1rem; }

/* Formulaires : libellé au-dessus, champs alignés ; dans une carte, une grille libellé–champ sur deux colonnes. */
.form-card { display: grid; gap: .45rem; max-width: 40rem; }
.form-grid { display: grid; grid-template-columns: max-content minmax(0, 26rem); gap: .5rem .9rem; align-items: center; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid button { grid-column: 2; justify-self: start; }
.form-label { font-weight: 600; font-size: .88rem; margin: 0; }
.form-hint { color: var(--muted); font-size: .84rem; margin: 0; }
.form-control, .form-select { font: inherit; padding: .38rem .55rem; border: 1px solid #a9b2c1; border-radius: 6px; background-color: #fff; min-width: 0; color: var(--ink); }
.form-control:hover, .form-select:hover { border-color: #7d8899; }
.form-control-sm, .form-select-sm { padding: .22rem .45rem; font-size: .9rem; }
textarea.form-control { line-height: 1.5; }
/* Bootstrap : la flèche des listes (image en data:) garde sa place à droite. */
.form-select { padding-right: 2rem; background-position: right .5rem center; }
.form-select-sm { padding-right: 1.8rem; }
.btn { font: inherit; font-weight: 550; cursor: pointer; padding: .38rem .85rem; border-radius: 6px; border: 1px solid transparent; background: #e6eaf1; color: var(--ink); line-height: 1.4; text-decoration: none; }
.btn:hover { background: #dce1ea; color: var(--ink); }
.btn-sm { padding: .22rem .6rem; font-size: .88rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-success { background: var(--ok); color: #fff; }
.btn-success:hover { background: var(--ok-dark); color: #fff; }
.btn-warning { background: var(--signal); color: #2b2000; }
.btn-warning:hover { background: #e6b93a; color: #2b2000; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-dark); color: #fff; }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); background: #fff; }
.btn-outline-danger:hover { background: var(--danger-soft); color: var(--danger-dark); }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-success { border-color: #a9b2c1; background: #fff; color: var(--ink); }
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-success:hover { background: var(--line-soft); color: var(--ink); }
.btn-outline-primary { border-color: var(--accent); color: var(--accent-dark); }
.btn-link { background: none; color: var(--accent); text-decoration: underline; }
.btn-link:hover { background: none; }
/* Focus clavier visible partout (anneau ambre, jamais retiré). */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, a:focus-visible, .draft:focus-visible, .nav-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; box-shadow: none; }
.alert { padding: .6rem .85rem; border-radius: 6px; margin: 0 0 .7rem; border: 1px solid var(--line); border-left-width: 4px; background: #fff; }
.alert-success { border-color: #9fd3b4; border-left-color: var(--ok); background: var(--ok-soft); }
.alert-danger { border-color: #f0a8a0; border-left-color: var(--danger); background: var(--danger-soft); }
.alert-warning { border-color: #ecc56b; border-left-color: var(--signal); background: var(--signal-soft); }
.badge { display: inline-block; padding: .06rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.45; white-space: normal; color: var(--ink); background: #e5e9f0; }
.text-bg-warning { background: var(--signal-soft); color: var(--signal-ink); }
.text-bg-secondary { background: #e5e9f0; color: #3c4658; }
.text-bg-success { background: var(--ok-soft); color: var(--ok-dark); }
.text-bg-danger { background: var(--danger-soft); color: var(--danger-dark); }
/* KB7 : « a cliqué sans répondre » (signal, sans alarme). */
.badge.silent { background: var(--accent-soft); color: var(--accent-dark); }
/* États d'un message : le même code, la même couleur (badge de l'écran Messages, cellule de la fin de mois). Seuls le badge et
   la cellule sont colorés : une carte qui porte data-status garde son texte neutre. */
.badge[data-status="sent"], .badge[data-status="simulated"], .table td[data-status="sent"], .table td[data-status="simulated"] { color: var(--ok-dark); }
.badge[data-status="awaiting_validation"], .badge[data-status="draft"], .table td[data-status="awaiting_validation"], .table td[data-status="draft"] { color: var(--signal-ink); }
.badge[data-status="queued"], .badge[data-status="approved"], .badge[data-status="dispatching"], .table td[data-status="queued"], .table td[data-status="approved"], .table td[data-status="dispatching"] { color: var(--accent-dark); }
.badge[data-status="cancelled"], .badge[data-status="rejected"], .badge[data-status="failed"], .table td[data-status="cancelled"], .table td[data-status="rejected"], .table td[data-status="failed"] { color: var(--danger-dark); }
.badge[data-status="sent"], .badge[data-status="simulated"] { background: var(--ok-soft); }
.badge[data-status="awaiting_validation"], .badge[data-status="draft"] { background: var(--signal-soft); }
.badge[data-status="queued"], .badge[data-status="approved"], .badge[data-status="dispatching"] { background: var(--accent-soft); }
.badge[data-status="cancelled"], .badge[data-status="rejected"], .badge[data-status="failed"] { background: var(--danger-soft); }
.table td[data-status] { font-weight: 600; }
.muted, .meta { color: var(--muted); font-size: .9rem; margin: .1rem 0; }
/* KB6 : état vide qui dit quoi faire (phrase, puis l'action ou le lien utile). */
.empty { color: var(--muted); }
.empty-state { background: var(--card); border: 1px dashed #c3cad6; border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1rem; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); margin-bottom: .15rem; }
.empty-state p { margin: 0; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .3rem 0; }
/* Bootstrap : .form-control et .form-select prennent 100 % de la largeur ; dans une ligne de formulaire, leur largeur propre. */
.inline .form-control, .inline .form-select, .actions .form-control, .pager-size .form-select { width: auto; display: inline-block; }
.inline .amount { width: 8rem; }
code { color: inherit; }
.details dd, .details dt { margin-bottom: 0; }
.table > :not(caption) > * > * { box-shadow: none; }
/* IE6 : la couleur du texte est fixée (le style kbd de Bootstrap met un texte clair sur fond sombre). */
.keys kbd { border: 1px solid #b9c1cf; border-bottom-width: 2px; border-radius: 4px; padding: 0 .35rem; background: #fff; color: #1f2937; font-size: .82rem; box-shadow: none; }
.keys { margin-left: .6rem; }
.table-wrap { overflow-x: auto; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.card .table-wrap { border: 0; border-radius: 0; }
.table { width: 100%; border-collapse: collapse; background: var(--card); font-size: .91rem; margin: 0; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; vertical-align: top; padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); }
.table th { background: var(--head); color: #3c4658; font-weight: 600; font-size: .84rem; white-space: nowrap; border-bottom: 1px solid var(--line); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #f8fafd; }
.table-sm th, .table-sm td { padding: .3rem .45rem; }
.table .num { text-align: right; }
.table td.zero { color: var(--muted); }
.table .inline { margin: 0; }
.table tfoot td { font-weight: 650; background: var(--head); border-top: 1px solid var(--line); }
tr.lifted { color: var(--muted); }
.details { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: 0; font-variant-numeric: tabular-nums; }
.details dt { font-weight: 600; color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }

/* KC15 : indicateurs en liste, définition au survol. */
.kpis dt { cursor: help; text-decoration: underline dotted; text-underline-offset: .2em; }
.kpis dd { font-weight: 600; }
/* KC15 : actions d'une ligne d'utilisateur, espacées (lien de mot de passe, remise à zéro du second facteur). */
.user-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.user-actions form { margin: 0; }

/* File de validation : le brouillon sélectionné porte le rail ambre. */
.drafts { display: grid; gap: 1rem; }
.draft { outline: none; border-left: 4px solid transparent; }
.draft.is-active { border-color: var(--line); border-left-color: var(--signal); box-shadow: 0 0 0 3px rgba(242, 201, 76, .35); }
.draft-head h2 { font-size: 1.1rem; margin-bottom: .25rem; }
.draft .body, .message .body, .template-preview .body { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: .7rem .8rem; max-height: 32rem; overflow: auto; font-size: .88rem; line-height: 1.55; margin: 0; }
.subjects { margin: .3rem 0 .6rem; padding-left: 1.2rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .7rem; }
.actions form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.edit { margin-top: .6rem; }
.edit summary { cursor: pointer; color: var(--accent); width: max-content; }
.edit form { display: grid; gap: .4rem; margin-top: .4rem; }
.edit textarea, .template-form textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .88rem; }
.message header { margin-bottom: .3rem; }
.secret code { display: block; font-size: 1.2rem; letter-spacing: .08em; padding: .5rem; background: #fff; border: 1px dashed #8d97a8; border-radius: 6px; margin-top: .3rem; }
.code { font-size: 1.3rem; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
/* IE6 : données du journal en liste clé–valeur. */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 .5rem; margin: 0; font-size: .8rem; }
.kv dt { font-weight: 600; color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.amount { width: 8rem; }
/* interface § 13 : règles (IF1), tableau de bord (IF3), calendrier (IF2). */
.notes { background: var(--accent-soft); border-color: #c9dbf6; }
.notes p { margin: 0 0 .4rem; }
.notes p:last-child { margin-bottom: 0; }
.rules, .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 0 1rem; align-items: start; }
.rule-form { display: grid; grid-template-columns: max-content minmax(0, 22rem); gap: .4rem .8rem; align-items: center; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.rule-form .form-select, .rule-form .form-control { width: 100%; }
.rule-form button { grid-column: 2; justify-self: start; }
.forecast { font-size: 1.6rem; font-weight: 650; margin: .2rem 0; font-variant-numeric: tabular-nums; }
/* KB2 : gabarits (liste à gauche, éditeur et aperçu à droite). */
.templates { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.template-list { list-style: none; margin: 0; padding: 0; }
.template-list li a { display: block; padding: .4rem .6rem; border-radius: 6px; text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.template-list li a:hover { background: var(--line-soft); }
.template-list li a[aria-current="true"] { background: var(--accent-soft); border-color: #c9dbf6; font-weight: 600; }
.template-list .meta { display: block; font-size: .8rem; }
.template-form { display: grid; gap: .45rem; }
.template-form .form-control { width: 100%; }
.template-form .buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.placeholders { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .4rem; padding: 0; list-style: none; }
.placeholders code { background: var(--line-soft); border-radius: 4px; padding: .05rem .35rem; font-size: .8rem; }
/* KB3 : rapports. */
.view-switch { display: inline-flex; border: 1px solid #a9b2c1; border-radius: 6px; overflow: hidden; background: #fff; }
.view-switch a, .view-switch strong { padding: .3rem .7rem; font-size: .9rem; text-decoration: none; border-left: 1px solid #a9b2c1; }
.view-switch :first-child { border-left: 0; }
.view-switch strong { background: var(--accent); color: #fff; }
/* KB5 : délivrabilité. */
.dns-ok { color: var(--ok-dark); font-weight: 600; }
.dns-bad { color: var(--danger-dark); font-weight: 600; }
.dns-unknown { color: var(--muted); font-weight: 600; }

/* KB6 : pied de pagination commun (_pager.twig). */
.pager-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin: -.4rem 0 1rem; font-size: .88rem; }
.pager-count { margin: 0; color: var(--muted); }
.pager-list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.pager-link { display: inline-block; min-width: 2rem; text-align: center; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-decoration: none; color: var(--ink); }
a.pager-link:hover { background: var(--line-soft); color: var(--ink); }
.pager-link[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650; }
.pager-link[aria-disabled="true"] { color: #6b7485; background: var(--head); cursor: default; }
.pager-gap span { padding: 0 .2rem; color: var(--muted); }
.pager-where { display: none; color: var(--muted); padding: 0 .3rem; }
.pager-size { display: flex; align-items: center; gap: .4rem; margin: 0; }

/* Connexion et pages publiques du back-office (KC15 : design d'avant la v1.6, retour de l'utilisateur ; focus visible et
   prefers-reduced-motion restent ceux de tout le back-office). */
.auth { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.6rem 1.6rem 1.2rem; }
.auth form { display: grid; gap: .55rem; margin: 1rem 0; }

@media (max-width: 760px) {
  .rules, .dashboard, .templates { grid-template-columns: minmax(0, 1fr); }
  .rule-form, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .rule-form button, .form-grid button { grid-column: auto; }
  html { font-size: 15px; }
  .page { padding: .7rem .6rem 1.5rem; }
  .page-head { align-items: stretch; }
  .topbar { padding: .5rem .8rem; }
  .nav-toggle { display: inline-block; margin-left: auto; padding: .25rem .7rem; border-radius: 6px; cursor: pointer; font: inherit; font-size: .9rem; }
  .nav-collapse { flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .nav-collapse.collapse:not(.show) { display: none; }
  .nav-links { flex-direction: column; padding-bottom: .4rem; }
  .nav-group { flex-direction: column; align-items: stretch; margin: 0; border-left: 0; border-top: 1px solid rgba(201, 212, 230, .18); padding: .3rem 0; }
  .nav-group:first-child { border-top: 0; }
  .nav-links a { padding: .45rem .2rem; border-bottom: 0; border-left: 3px solid transparent; }
  .nav-links a[aria-current="page"] { border-left-color: var(--signal); padding-left: .5rem; }
  .logout { justify-content: space-between; padding-bottom: .3rem; }
  .keys { display: none; }
  .table th, .table td { padding: .38rem; }
  /* IC15 : tables sans action (journal, synchronisations…) : elles défilent DANS leur cadre, jamais la page. */
  .table-wrap { max-width: 100%; }
  .table-wrap .table { min-width: 600px; }
  /* IC15 : tables à actions (campagnes, fin de mois, écritures DMP, gels, exclusions, utilisateurs, réglages…) : une
     fiche par ligne, l'étiquette de chaque cellule devant sa valeur ; les actions restent à l'écran. */
  .table-wrap:has(.table-stack) { border: 0; background: transparent; }
  .table-wrap .table-stack { min-width: 0; background: transparent; }
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tfoot, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 .6rem; background: var(--card); }
  .table-stack tbody tr:hover td { background: transparent; }
  .table-stack td { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .5rem; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; text-align: left; }
  .table-stack td:last-child { border-bottom: 0; }
  .table-stack td::before { content: attr(data-label); font-weight: 600; color: var(--muted); font-size: .85rem; }
  .table-stack td > form, .table-stack td > p { margin: 0 0 .3rem; }
  .table-stack td.empty { display: block; }
  .table-stack td.empty::before { content: none; }
  /* IC15 : le corps d'un brouillon ou d'un message se lit en entier, sans cadre à hauteur bornée. */
  .draft .body, .message .body { max-height: none; overflow: visible; }
  .details { grid-template-columns: 1fr; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dd { margin-bottom: .25rem; }
  .narrow { margin: 1.5rem auto; }
  /* KB6 : à 390 px, seuls « Précédente », « page n / m » et « Suivante » restent. */
  .pager-bar { justify-content: center; margin-top: 0; }
  .pager-edge, .pager-num, .pager-size, .pager-count { display: none; }
  .pager-where { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}