/* Polices auto-hébergées (Fontsource 5.3.0, sous-ensemble latin, licences OFL dans fonts/) */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/fraunces-latin-wght-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/fraunces-latin-wght-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
}

/* Système « Flat Eco » : docs/design-spec.md */
:root {
  --paper: #f6f3ea;
  --paper-soft: #efeadd;

  --sage-100: #e4ecdc;
  --sage-200: #d3e0c8;
  --sage-300: #b7cda9;
  --sage-400: #93b17f;
  --sage-500: #7c9a6d;
  --sage-600: #5f7d52;
  --sage-700: #3e5a3c;

  --brown-100: #eee4d2;
  --brown-200: #ddc9ab;
  --brown-300: #c8ab84;
  --brown-700: #5c4632;

  --ink: #2c3327;
  --ink-soft: #5a6152;

  --background: var(--paper);
  --foreground: var(--ink);
  --muted: var(--ink-soft);
  --border: #d8d2c0;
  --primary: var(--sage-700);
  --primary-foreground: var(--paper);
  --accent-bg: var(--sage-100);
  --accent-bg-warm: var(--brown-100);

  /* Écart à la spec : alertes (marge sous le seuil, échéances, erreurs) */
  --alert: #9a4a2e;
  --alert-bg: #f2dfd3;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Space Grotesk", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --container: 1140px;
  --nav-h: 72px;
  --hairline: 1.5px solid var(--border);
  --dashed-on-ink: 1px dashed color-mix(in srgb, var(--paper) 20%, transparent);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: var(--sage-300); color: var(--ink); }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 1rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

.eyebrow, .sous-titre-zone, .etape-titre, legend, .total .etiquette, .fiche-grille h3, th {
  font: 500 0.72rem/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sage-600);
}

/* En-tête */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: var(--nav-h);
  padding: 10px 24px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--hairline);
}
.marque { display: flex; align-items: center; gap: 12px; }
.marque-point { width: 12px; height: 12px; border-radius: 50%; background: var(--sage-500); flex: none; }
.marque h1 { font-size: 1.3rem; line-height: 1.1; }
.marque-outil { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); }
.meta { font: 400 0.72rem var(--font-mono); color: var(--muted); margin-left: 8px; }

.onglets { display: flex; gap: 22px; align-self: stretch; }
.onglets button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: 500 0.95rem var(--font-body);
  padding: 0 2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.onglets button:hover { color: var(--sage-700); }
.onglets button[aria-selected="true"] { color: var(--sage-700); border-bottom-color: var(--sage-500); }

.actions-entete { margin-left: auto; display: flex; gap: 8px; }
.bascule {
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  font: 500 0.85rem var(--font-body);
  padding: 7px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.bascule:hover { background: var(--accent-bg); }
.bascule[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }

button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--sage-500);
  outline-offset: 2px;
}

/* Notifications */
.notifications {
  position: sticky;
  top: var(--nav-h);
  z-index: 10;
  display: grid;
  gap: 6px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.notification {
  margin-top: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  border: var(--hairline);
  background: var(--paper);
}
.notification.ok { border-color: var(--sage-400); background: var(--sage-100); color: var(--sage-700); }
.notification.err { border-color: var(--alert); background: var(--alert-bg); color: var(--alert); }
.notification button { border: 0; background: none; color: inherit; font: 500 0.82rem var(--font-body); cursor: pointer; padding: 0; }

/* Vues */
.vue { max-width: var(--container); margin: 0 auto; padding: 28px 24px 56px; }
.configurateur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.colonne-formulaire { display: grid; gap: 20px; }
.colonne-synthese { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 16px; }

.panneau, .zone {
  background: var(--paper);
  border: var(--hairline);
  border-radius: var(--radius);
}
.zone > h2, .panneau.suite > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  font-size: 1.2rem;
  border-bottom: var(--hairline);
}
.numero-zone {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font: 500 0.8rem var(--font-mono);
  letter-spacing: 0;
}
.zone-corps { padding: 20px 22px 22px; display: grid; gap: 18px; }
.sous-zone { display: grid; gap: 8px; }
.sous-titre-zone.petit { margin-top: 6px; }
.aide { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.aide.alerte-texte { color: var(--alert); }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 16px;
}
label.champ { display: block; }
label.champ.large { grid-column: 1 / -1; }
label.champ > span { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
.details-client { margin-top: 12px; }
.details-client summary { cursor: pointer; font-size: 0.88rem; font-weight: 500; color: var(--sage-700); }
.details-client .aide { margin: 8px 0 10px; }
.chrono-saisie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.chrono-saisie input[type="date"] { width: auto; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select {
  width: 100%;
  padding: 8px 11px;
  border: var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: 400 0.92rem var(--font-body);
  color: var(--ink);
  transition: border-color 0.15s ease;
}
input:hover, select:hover { border-color: var(--sage-400); }
input[type="number"] { font-family: var(--font-mono); }
input:disabled, select:disabled { background: var(--paper-soft); color: var(--muted); border-color: var(--border); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label {
  position: relative;
  border: var(--hairline);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  background: var(--paper);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choix label:hover { border-color: var(--sage-400); }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label:has(input:checked) {
  border-color: var(--primary);
  background: var(--accent-bg);
  color: var(--sage-700);
  font-weight: 500;
}
.choix label:has(input:focus-visible) { outline: 2px solid var(--sage-500); outline-offset: 2px; }
.choix label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.cases { display: grid; gap: 9px; }
.cases label { display: flex; align-items: baseline; gap: 9px; font-size: 0.9rem; }
.cases input { margin: 0; }
.cases input.quantite { width: 68px; }
.cases label.inactive { opacity: 0.5; }
.cases .note { color: var(--muted); font-size: 0.8rem; }

.disques {
  display: grid;
  grid-template-columns: 1fr 84px;
  gap: 8px 14px;
  align-items: center;
  max-width: 440px;
}
.disques span { font-size: 0.9rem; }

/* Cartes de serveurs */
.cartes-postes { display: grid; gap: 10px; }
.carte-poste {
  border: var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--paper);
  transition: border-color 0.15s ease;
}
.carte-poste:hover { border-color: var(--sage-400); }
.carte-poste.ouverte { border-color: var(--primary); }
.carte-poste.ouverte .carte-tete { background: var(--accent-bg); border-radius: 7.5px 7.5px 0 0; }
.carte-tete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
}
.carte-tete .rang {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: var(--hairline);
  font: 500 0.75rem var(--font-mono);
  color: var(--sage-700);
  flex: none;
}
.carte-tete .resume { flex: 1; min-width: 0; }
.carte-tete .resume strong { display: block; font-size: 0.95rem; font-weight: 600; }
.carte-tete .resume span { display: block; font-size: 0.8rem; color: var(--muted); }
.carte-tete .prix { font: 500 0.95rem var(--font-mono); white-space: nowrap; text-align: right; }
.carte-tete .prix small { display: block; font: 400 0.72rem var(--font-body); color: var(--muted); }
.carte-actions { display: flex; gap: 4px; }
.carte-corps { border-top: var(--hairline); padding: 18px 16px; }
.editeur-poste { display: grid; gap: 20px; }
.ligne-editeur { display: grid; gap: 8px; }
.quantite-poste { max-width: 220px; }
button.ajouter { justify-self: start; }

.contexte {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--accent-bg);
  border: 1.5px solid var(--sage-400);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.contexte strong { color: var(--sage-700); }
.contexte-detail { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.contexte button { white-space: nowrap; }

/* Synthèse */
.total { padding: 20px 22px 18px; }
.total .valeur {
  font: 600 2.6rem/1.05 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--sage-700);
  margin: 8px 0 4px;
  transition: color 0.2s ease;
}
.total .valeur.change { color: var(--sage-500); }
.total .mes { font-size: 0.82rem; color: var(--muted); }

.lignes { border-top: var(--hairline); padding: 14px 22px; display: grid; gap: 6px; font-size: 0.86rem; }
.ligne { display: flex; gap: 12px; align-items: baseline; }
.ligne .lib { flex: 1; min-width: 0; }
.ligne .mt { font-family: var(--font-mono); white-space: nowrap; }
.ligne.remise .mt { color: var(--sage-600); }
.ligne.devis .mt { color: var(--alert); font-family: var(--font-body); font-style: italic; }
.ligne.poste { font: 500 0.7rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage-600); margin-top: 8px; }
.ligne.poste:first-child { margin-top: 0; }

.avertissements {
  border-top: var(--hairline);
  padding: 12px 22px;
  font-size: 0.82rem;
  color: var(--brown-700);
  background: var(--accent-bg-warm);
  display: grid;
  gap: 6px;
}

.bloc-interne {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px 18px;
  border-radius: 0 0 12.5px 12.5px;
}
.bloc-interne .titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 0.68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage-300);
  margin-bottom: 8px;
}
.points { display: inline-flex; gap: 5px; }
.points i { width: 11px; height: 11px; border-radius: 50%; background: var(--sage-500); }
.points i:nth-child(2) { background: var(--brown-300); }
.points i:nth-child(3) { background: var(--sage-300); }
.bloc-interne dl { margin: 0; display: grid; grid-template-columns: 1fr auto; font-size: 0.86rem; }
.bloc-interne dt, .bloc-interne dd { padding: 6px 0; border-bottom: var(--dashed-on-ink); }
.bloc-interne dt { color: var(--sage-300); }
.bloc-interne dd { margin: 0; font-family: var(--font-mono); text-align: right; color: var(--paper); }
.marge { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; }
.marge .mot { font-size: 0.82rem; color: var(--sage-300); }
.marge .chiffre { font: 600 2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.marge .chiffre.bas { color: var(--alert-bg); }
.marge .chiffre.bon { color: var(--sage-300); }
.marge-contrat { margin-top: 8px; font-size: 0.8rem; color: var(--sage-300); }

.suite .zone-corps { gap: 12px; }
.suite .enregistre { font-size: 0.9rem; }
.suite .enregistre strong { font-family: var(--font-mono); }
.suite .etape { display: grid; gap: 8px; }
.suite .etape-titre { margin-top: 4px; }

button.principal, button.secondaire {
  border-radius: 999px;
  padding: 11px 24px;
  font: 500 0.92rem var(--font-body);
  cursor: pointer;
  border: 2px solid var(--primary);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
button.principal { background: var(--primary); color: var(--primary-foreground); }
button.principal:hover:not(:disabled) { background: var(--sage-600); border-color: var(--sage-600); }
button.secondaire { background: transparent; color: var(--primary); }
button.secondaire:hover:not(:disabled) { background: var(--accent-bg); }
button.principal:active:not(:disabled), button.secondaire:active:not(:disabled), .bascule:active { transform: translateY(1px); }
button.discret { border: 0; background: none; color: var(--muted); font: 500 0.82rem var(--font-body); padding: 4px 10px; cursor: pointer; border-radius: 999px; }
button.discret:hover { background: var(--accent-bg); color: var(--sage-700); }
button.lien { border: 0; background: none; color: var(--sage-700); font: 500 0.86rem var(--font-body); padding: 2px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duo button { padding-left: 12px; padding-right: 12px; }

body.mode-client .bloc-interne,
body.mode-client .avertissements,
body.mode-client .client-seul,
body:not(.mode-client) .pour-client { display: none !important; }
.fiche-client { padding: 18px 22px; display: grid; gap: 8px; }
.fiche-client strong { font: 600 1.05rem var(--font-display); }

/* Accès */
body.sans-acces .vue:not(.acces),
body.sans-acces .onglets,
body.sans-acces #metaCatalogue,
body.sans-acces .actions-entete { display: none !important; }
.acces { max-width: 480px; padding-top: 72px; }
.acces .panneau { padding: 30px 30px 26px; display: grid; gap: 14px; }
.acces .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; }
.acces .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sage-500); }
.acces h2 { font-size: 1.9rem; line-height: 1.12; }
.acces h2 em { color: var(--sage-600); }
.erreur-acces { margin: 0; min-height: 1.5em; font-size: 0.86rem; color: var(--alert); }
.boutons-acces { display: flex; gap: 8px; }

/* Liste des devis */
.filtres {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(130px, 1fr)) auto;
  gap: 12px 16px;
  align-items: end;
  padding: 18px 22px;
}
.boutons-filtres { display: flex; gap: 8px; }
.boutons-filtres button { padding: 8px 18px; }
.resume-liste { font-size: 0.82rem; color: var(--muted); margin: 14px 6px 8px; }
.resume-liste .alerte { color: var(--alert); font-weight: 600; }

.tableau { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--paper-soft); color: var(--muted); letter-spacing: 0.1em; }
th:first-child { border-top-left-radius: 12.5px; }
th:last-child { border-top-right-radius: 12.5px; }
tbody tr:last-child td { border-bottom: 0; }
th.nombre { text-align: right; }
td.nombre { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: var(--accent-bg); }
.numero { font-family: var(--font-mono); white-space: nowrap; }
.sous-ligne { font-size: 0.76rem; color: var(--muted); }
td.alertes { font-size: 0.8rem; color: var(--alert); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font: 500 0.68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--paper-soft);
  white-space: nowrap;
}
.badge.envoye { color: var(--sage-700); border-color: var(--sage-300); background: var(--sage-100); }
.badge.signe { color: var(--primary-foreground); border-color: var(--primary); background: var(--primary); }
.badge.perdu { color: var(--brown-700); border-color: var(--brown-200); background: var(--brown-100); }

/* Fiche d'un devis */
.fiche-devis { display: grid; gap: 16px; }
.fiche-tete { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding: 18px 22px; }
.fiche-tete h2 { font-size: 1.5rem; }
.fiche-tete h2 small { font: 400 0.9rem var(--font-body); color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.fiche-tete .montant { margin-left: auto; text-align: right; }
.fiche-tete .montant strong { font: 600 1.6rem var(--font-display); font-variant-numeric: tabular-nums; color: var(--sage-700); display: block; }
.fiche-tete .montant span { font-size: 0.8rem; color: var(--muted); }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.fiche-grille .panneau { padding: 0; }
.fiche-grille h3 { padding: 14px 22px; border-bottom: var(--hairline); }
.fiche-section { padding: 16px 22px; display: grid; gap: 10px; }
.chrono { list-style: none; margin: 0; padding: 16px 22px 18px; display: grid; gap: 12px; }
.chrono li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 0.9rem; }
.chrono .point { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--sage-400); margin-top: 6px; background: var(--paper); }
.chrono li.fait .point { background: var(--primary); border-color: var(--primary); }
.chrono li.alerte .point { background: var(--alert); border-color: var(--alert); }
.chrono .quand { font-size: 0.8rem; color: var(--muted); }
.chrono li.alerte .quand { color: var(--alert); font-weight: 600; }
.chrono input[type="date"] { width: auto; margin-top: 4px; }
.actions-fiche { display: grid; gap: 8px; }
.actions-fiche .etape-titre { margin-top: 6px; }
.actions-fiche button.principal, .actions-fiche button.secondaire, .suite .etape button.secondaire, .chrono-saisie button.secondaire { padding: 8px 16px; font-size: 0.86rem; line-height: 1.3; }
.liste-modifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.86rem; }
.liste-modifs li { display: flex; gap: 12px; align-items: baseline; }
.liste-modifs .numero { color: var(--sage-700); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.indemnite-calcul { display: grid; gap: 8px; }
.indemnite-calcul .champ { max-width: 220px; }
.indemnite-resultat { font-size: 0.9rem; }
.indemnite-resultat.err { color: var(--alert); }
.retour { display: inline-flex; margin-bottom: 4px; }

/* Catalogue */
.catalogue { display: grid; gap: 20px; }
.edition { margin: 0; font-size: 0.9rem; }
.edition strong { font-family: var(--font-mono); font-weight: 500; }
.documents-catalogue { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.document {
  border: var(--hairline);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: grid;
  gap: 8px;
  align-content: start;
  transition: border-color 0.15s ease;
}
.document:hover { border-color: var(--sage-400); }
.document strong { font: 600 1.05rem var(--font-display); }
.boutons-doc { display: flex; gap: 8px; }
.boutons-doc button { padding: 7px 16px; }
.etat-identite { font-size: 0.86rem; }
.etat-identite.err { color: var(--alert); }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
legend { padding: 0; margin-bottom: 4px; }
#formPrestataire { display: grid; gap: 20px; }
.pied-formulaire { display: flex; gap: 12px; align-items: center; }
.historique summary { cursor: pointer; font-size: 0.86rem; color: var(--sage-700); }
.historique ol { margin: 8px 0 0; padding-left: 18px; font-size: 0.82rem; display: grid; gap: 4px; }

@media (max-width: 980px) {
  .configurateur, .fiche-grille { grid-template-columns: minmax(0, 1fr); }
  .colonne-synthese { position: static; }
  .filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entete { position: static; flex-wrap: wrap; gap: 12px 24px; }
  .onglets { align-self: auto; }
  .onglets button { padding: 8px 2px; }
  .notifications { top: 0; }
}

@media (max-width: 620px) {
  .vue { padding: 20px 16px 40px; }
  .entete { padding: 10px 16px; }
  .filtres, .duo { grid-template-columns: minmax(0, 1fr); }
  .zone-corps, .zone > h2, .panneau.suite > h2 { padding-left: 16px; padding-right: 16px; }
  .fiche-tete .montant { margin-left: 0; text-align: left; }
  .acces { padding-top: 32px; }
  .meta { display: block; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}