/* Design tokens repris du design system "Nocturne" (Claude Design). Ne pas retoucher les tokens
   à la main : ils viennent du projet de design, voir le lien dans le README du projet. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-warn: #e0a458;
  --color-warn-text: #e8bd84;
  --color-warn-border: #7a5a2e;
  --color-ok: #6fbf8f;
  --color-ok-text: #8fd0aa;
  --color-ok-border: #35624c;
  --color-info: #7aa7e0;
  --color-info-text: #9cc2ea;
  --color-info-border: #2f5480;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px var(--color-neutral-800);
  --shadow-md: 0 0 0 1px var(--color-neutral-700), 0 6px 18px rgba(0,0,0,0.55);
}

*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden ne vaut que "display:none" en style navigateur : n'importe quelle classe
   posant un display (.btn, .feed, .pending-badge…) le bat en spécificité et l'élément reste
   visible. Sans cette règle, les boutons masqués côté JS s'affichaient quand même. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); margin: 0; }
a { color: var(--color-accent-400); text-decoration: none; }
a:hover { color: var(--color-accent-300); }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* — boutons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12.5px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 7px 14px; border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent-400); border-color: var(--color-accent-500); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent-500) 12%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color: var(--color-neutral-500); }
.btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* — statuts — */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; font-size: 11px; border: 1px solid var(--color-neutral-800); color: var(--color-neutral-400);
}
.status-pill--brouillon { border-color: var(--color-neutral-700); color: var(--color-neutral-400); }
.status-pill--en_attente_validation { border-color: var(--color-warn-border); background: rgba(224,164,88,.12); color: var(--color-warn-text); }
.status-pill--valide { border-color: var(--color-ok-border); background: rgba(111,191,143,.12); color: var(--color-ok-text); }
.status-pill--publie { border-color: var(--color-info-border); background: rgba(122,167,224,.12); color: var(--color-info-text); }
.status-pill--rejete { border-color: var(--color-neutral-700); background: rgba(154,58,58,.12); color: #d99a9a; }
/* Raccourci "publié + rejeté", pas un statut réel : volontairement neutre pour ne pas se faire
   passer pour une des pastilles de couleur ci-dessus. */
.status-pill--traitees { border-color: var(--color-neutral-700); color: var(--color-neutral-400); }

/* ══════════════ layout partagé ══════════════ */
.page { padding: 40px; min-height: 100vh; }
.panel { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.data-banner {
  padding: 10px 22.4px; font-size: 12px; color: var(--color-warn-text);
  background: rgba(224,164,88,.10); border-bottom: 1px solid var(--color-warn-border);
}
.empty-state { padding: 48px 22.4px; text-align: center; color: var(--color-neutral-500); font-size: 13.5px; }

/* ══════════════ dashboard (écran 1) ══════════════ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16.8px 22.4px; border-bottom: 1px solid var(--color-divider);
}
.topbar-left { display: flex; align-items: center; gap: 16.8px; }
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-brand img { height: 26px; width: auto; }
.topbar-sep { width: 1px; height: 18px; background: var(--color-neutral-800); }
.topbar-title { font-family: var(--font-heading); font-weight: 500; font-size: 15px; }
.topbar-date { font-size: 12px; color: var(--color-neutral-500); }
/* Bloc d'actions de l'en-tête. Nommé plutôt que stylé en ligne dans le HTML : un style en
   ligne l'emporte sur la feuille, et la version mobile ne pourrait pas le reprendre sans
   `!important`. */
.topbar-actions { display: flex; align-items: center; gap: 11.2px; }
.pending-badge {
  display: flex; align-items: center; gap: 8.4px; padding: 5.6px 11.2px; border-radius: 999px;
  border: 1px solid var(--color-warn-border); background: rgba(224,164,88,.10); font-size: 12px; color: var(--color-warn-text);
}
.pending-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-warn); }

.filter-bar {
  display: flex; align-items: center; gap: 22.4px; padding: 11.2px 22.4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--color-divider); background: rgba(35,37,50,.4);
}
.filter-group { display: flex; align-items: center; gap: 8.4px; }
.filter-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }
.seg { display: flex; border: 1px solid var(--color-neutral-800); border-radius: 7px; overflow: hidden; }
.seg button {
  padding: 5.6px 12px; font-size: 12px; color: var(--color-neutral-400); background: transparent;
  border: 0; border-right: 1px solid var(--color-neutral-800); cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button.active { background: var(--color-accent-900); color: var(--color-accent-200); }
.status-filters { display: flex; align-items: center; gap: 5.6px; flex-wrap: wrap; }
.filter-sep { width: 1px; align-self: stretch; margin: 0 4px; background: var(--color-divider); }
.status-filters button {
  padding: 5.6px 11.2px; font-size: 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-neutral-800); background: transparent; color: var(--color-neutral-400);
}
.status-filters button.active.status-pill--en_attente_validation,
.status-filters button.active { border-color: var(--color-accent-500); color: var(--color-accent-200); }

.dashboard-body { padding: 22.4px; display: flex; flex-direction: column; gap: 22.4px; }
.competition-group { display: flex; flex-direction: column; gap: 11.2px; }
.competition-heading { display: flex; align-items: center; gap: 11.2px; }
.competition-name {
  font-family: var(--font-heading); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-neutral-300); white-space: nowrap;
}
.competition-count { font-size: 11px; color: var(--color-neutral-600); white-space: nowrap; }
.competition-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-neutral-800), transparent); }

.match-card {
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  border-left: 2px solid var(--color-neutral-700); padding: 16.8px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.match-card--en_attente_validation { border-left-color: var(--color-warn); }
.match-card--valide { border-left-color: var(--color-ok); }
.match-card--publie { border-left-color: var(--color-info); }
.match-card--rejete { border-left-color: var(--color-neutral-800); opacity: .7; }

.match-head { display: flex; align-items: flex-start; gap: 22.4px; flex-wrap: wrap; }
.match-meta { min-width: 200px; }
.match-time-line { display: flex; align-items: center; gap: 8.4px; margin-bottom: 5.6px; font-size: 12px; color: var(--color-neutral-400); }
.match-teams { font-family: var(--font-heading); font-size: 18px; font-weight: 500; line-height: 1.3; }
.match-teams .vs { color: var(--color-neutral-600); }

.odds-grid { display: flex; gap: 8.4px; flex-wrap: wrap; }
.odds-box { min-width: 82px; padding: 8.4px 10px; border: 1px solid var(--color-neutral-800); border-radius: 7px; text-align: center; }
.odds-outcome { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 4px; }
.odds-price { font-size: 16px; font-family: var(--font-heading); color: var(--color-neutral-300); }
.odds-prob { font-size: 10px; color: var(--color-neutral-500); margin-top: 3px; }

.match-status { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.match-status-note { font-size: 10.5px; color: var(--color-neutral-600); }

.match-analysis {
  margin: 0; font-size: 13px; line-height: 1.65; color: var(--color-neutral-300); max-width: 760px;
  padding-top: 11.2px; border-top: 1px solid var(--color-divider);
}
.match-analysis .lead { color: var(--color-accent-300); }

/* ── Débat des agents (Contradicteur puis Juge) ──
   Replié par défaut : la salle de validation doit rester lisible d'un coup d'œil, le débat n'est
   ouvert que sur les matchs qui posent question. */
.debat { margin-top: 11.2px; font-size: 12px; }
.debat summary {
  cursor: pointer; color: var(--color-neutral-500); padding: 5.6px 0;
  list-style: none; user-select: none;
}
.debat summary::-webkit-details-marker { display: none; }
/* Le chevron est dessiné plutôt que laissé au marqueur natif, dont l'apparence varie trop d'un
   navigateur à l'autre pour rester cohérente avec le reste de l'interface. */
.debat summary::before { content: "▸ "; color: var(--color-neutral-600); }
.debat[open] summary::before { content: "▾ "; }
.debat summary:hover { color: var(--color-neutral-300); }
.debat summary strong { color: var(--color-accent-300); font-weight: 500; }

.debat-corps {
  padding: 11.2px 14px; margin-top: 5.6px;
  background: var(--color-neutral-900); border-left: 2px solid var(--color-accent-700);
  border-radius: 0 6px 6px 0;
  display: flex; flex-direction: column; gap: 8.4px;
}
.debat-corps p { margin: 0; line-height: 1.6; color: var(--color-neutral-300); }
.debat-label { display: block; color: var(--color-neutral-500); font-size: 11px; margin-bottom: 2.8px; }

.debat-liste { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5.6px; }
.debat-liste li { line-height: 1.6; color: var(--color-neutral-300); }
.debat-liste em { display: block; color: var(--color-neutral-500); font-style: normal; font-size: 11px; }

.debat-tag {
  display: inline-block; padding: 1px 6px; margin-right: 5.6px; border-radius: 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--color-neutral-800); color: var(--color-neutral-400);
}
/* Seules les qualités qui pèsent sur la décision sont colorées : tout colorer ferait perdre au
   repérage visuel son intérêt. Le vert marque ce qui tient, l'orange ce qui manque, et une
   réponse inventée est signalée en rouge parce qu'elle est éliminatoire à elle seule. */
.debat-tag--precise { background: var(--color-ok-border); color: var(--color-ok-text); }
.debat-tag--vague { background: var(--color-warn-border); color: var(--color-warn-text); }
.debat-tag--non_repondue { background: var(--color-warn-border); color: var(--color-warn-text); }
.debat-tag--inventee { background: #6d2f2f; color: #f0a6a6; }

.match-actions { display: flex; align-items: center; gap: 8.4px; flex-wrap: wrap; }
.match-actions .market { margin-left: auto; font-size: 11px; color: var(--color-neutral-600); }
.match-actions .market strong { color: var(--color-neutral-300); font-weight: 500; }

/* ══════════════ interface publique (écran 2) ══════════════ */
.subscriber-panel { width: min(720px, 100%); margin: 0 auto; }
.disclaimer-banner {
  display: flex; align-items: flex-start; gap: 11.2px; padding: 11.2px 22.4px;
  background: var(--color-accent-900); border-bottom: 1px solid var(--color-accent-800);
}
.disclaimer-icon {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--color-accent-600);
  color: var(--color-accent-300); font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.disclaimer-text { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--color-accent-200); }

.subscriber-header {
  padding: 22.4px 22.4px 16.8px; display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; gap: 12px;
}
.subscriber-header img { height: 55px; margin-bottom: 11.2px; }
.subscriber-actions { display: flex; align-items: center; gap: 8.4px; }
.subscriber-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 6px; }
.subscriber-title { font-family: var(--font-heading); font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.subscriber-sub { font-size: 12.5px; color: var(--color-neutral-500); margin-top: 5.6px; }

.feed { padding: 22.4px; display: flex; flex-direction: column; gap: 16.8px; }

/* Intertitres de date du fil abonné. Même vocabulaire visuel que les intertitres de
   compétition du dashboard (.competition-heading), pour que les deux écrans se lisent
   de la même façon. */
.feed-day { display: flex; flex-direction: column; gap: 16.8px; }
.feed-day-heading { display: flex; align-items: center; gap: 11.2px; }
.feed-day-title {
  font-family: var(--font-heading); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-neutral-300); white-space: nowrap;
}
.feed-day-count { font-size: 11px; color: var(--color-neutral-600); white-space: nowrap; }
.feed-day-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-neutral-800), transparent); }
/* Bouton d'archivage admin : discret par défaut, il ne doit pas concurrencer l'analyse. */
.btn-small { padding: 4px 10px; font-size: 11px; }
.feed-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.feed-meta { display: flex; align-items: center; gap: 8.4px; font-size: 11px; color: var(--color-neutral-500); flex-wrap: wrap; }
.feed-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-neutral-700); }
.feed-meta .published-at { margin-left: auto; font-size: 10.5px; color: var(--color-neutral-600); }
.feed-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16.8px; flex-wrap: wrap; }
.feed-teams { font-family: var(--font-heading); font-size: 20px; font-weight: 500; }
/* Icône du sport devant le nom des équipes.
   `display: inline-block` est indispensable : la règle globale `img { display: block }` plus
   haut dans cette feuille pousserait sinon la balle sur sa propre ligne, au-dessus du titre.
   `vertical-align` la cale ensuite sur la ligne de base du texte. */
.feed-sport-icon {
  display: inline-block; width: 20px; height: 20px;
  vertical-align: -3px; margin-right: 8px;
}
.feed-text { margin: 0; font-size: 13px; line-height: 1.7; color: var(--color-neutral-300); }
.feed-position {
  border: 1px solid var(--color-accent-800); background: rgba(43,39,65,.55); border-radius: 8px;
  padding: 12px 14px; display: flex; align-items: center; gap: 14px;
}
.feed-position-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-400); margin-bottom: 4px; }
.feed-position-value { font-family: var(--font-heading); font-size: 15px; }
.feed-no-position {
  border: 1px dashed var(--color-neutral-800); border-radius: 8px; padding: 12px 14px;
  font-size: 12.5px; color: var(--color-neutral-500); line-height: 1.6;
}
.subscriber-footer {
  padding: 16.8px 22.4px; border-top: 1px solid var(--color-divider); display: flex; align-items: center;
  gap: 16.8px; background: rgba(35,37,50,.4); font-size: 11.5px; color: var(--color-neutral-500); flex-wrap: wrap;
}
.subscriber-footer .help { margin-left: auto; color: var(--color-neutral-600); }

/* ══════════════ écran verrouillé (visiteur non connecté) ══════════════ */
.locked { position: relative; }
/* Aperçu fictif : flouté, non sélectionnable et hors du flux d'interaction et de lecture. */
.locked-preview {
  padding: 22.4px; display: flex; flex-direction: column; gap: 16.8px;
  filter: blur(7px); opacity: .55; user-select: none; pointer-events: none;
}
.locked-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 12px; padding: 22.4px;
  background: linear-gradient(180deg, rgba(22,24,38,.72), rgba(22,24,38,.94));
}
.locked-badge {
  padding: 4px 12px; border-radius: 999px; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid var(--color-accent-600);
  background: var(--color-accent-900); color: var(--color-accent-300);
}
.locked-title {
  font-family: var(--font-heading); font-size: 21px; font-weight: 500;
  letter-spacing: -.01em; max-width: 26ch;
}
.locked-text { margin: 0; font-size: 13px; line-height: 1.65; color: var(--color-neutral-400); max-width: 46ch; }
.locked-actions { display: flex; gap: 8.4px; flex-wrap: wrap; justify-content: center; margin-top: 5.6px; }
.locked-actions .btn { text-decoration: none; }

/* ══════════════ champs de formulaire ══════════════ */
/* Repris à l'identique du bloc <style> de login.html, remontés ici pour être réutilisables
   par la modale "Mon compte" (account.js) sur le dashboard et la page abonné. */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--color-neutral-500); }
.field input {
  background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: 9px 11px; color: var(--color-text); font: inherit; font-size: 14px;
}
.field input:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 0; }

/* ══════════════ modale "Mon compte" ══════════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; padding: 22.4px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,13,22,.72);
}
.modal {
  width: min(420px, 100%); background: var(--color-bg); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden; max-height: 100%; overflow-y: auto;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16.8px;
  padding: 16.8px 22.4px; border-bottom: 1px solid var(--color-divider);
}
.modal-title { font-size: 16px; }
.modal-body { padding: 22.4px; display: flex; flex-direction: column; gap: 16.8px; }

.account-identity {
  display: flex; flex-direction: column; gap: 4px; padding: 11.2px 14px;
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
}
.account-identity-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }
.account-identity-value { font-size: 13.5px; color: var(--color-neutral-300); word-break: break-all; }
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-hint { margin: 0; font-size: 11.5px; color: var(--color-neutral-600); }
.account-message { margin: 0; font-size: 12.5px; line-height: 1.5; }
.account-message--ok { color: var(--color-ok-text); }
.account-message--error { color: var(--color-warn-text); }
.account-note {
  margin: 0; padding-top: 16.8px; border-top: 1px solid var(--color-divider);
  font-size: 11.5px; line-height: 1.6; color: var(--color-neutral-500);
}
.account-note strong { color: var(--color-neutral-300); font-weight: 500; }

/* ══════════════ mobile (≤ 720px) ══════════════
   La feuille n'avait aucune media query : tout était calibré pour un écran large, et sur
   téléphone l'en-tête du dashboard se chevauchait. Quatre causes distinctes, traitées ici :
   1. `.page` imposait 40px de marge de chaque côté, soit 80px mangés sur ~390px d'écran ;
   2. `.topbar` était un flex sans `flex-wrap` : ses deux blocs se compressaient l'un sur l'autre
      au lieu de passer à la ligne, et les derniers boutons sortaient de l'écran ;
   3. `.pending-badge` a un `border-radius: 999px` : dès que son texte passe sur plusieurs
      lignes, la pilule devient une grosse ellipse par-dessus le titre ;
   4. les paddings de 22.4px étaient trop larges une fois la marge extérieure supprimée. */
@media (max-width: 720px) {
  /* Bord à bord : plus de marge extérieure ni de coins arrondis, l'écran est trop étroit
     pour se payer un cadre. */
  .page { padding: 0; }
  .panel { border-radius: 0; box-shadow: none; }

  /* Exception : la connexion reste une carte centrée. Le bord à bord sert les écrans de
     contenu, pas un formulaire de deux champs qui collerait aux bords de l'écran. */
  .login-page { padding: 16px; }
  .login-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 24px; }

  /* En-tête du dashboard : chaque bloc prend toute la largeur et se range verticalement. */
  .topbar { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .topbar-left { flex-wrap: wrap; gap: 8px 12px; width: 100%; }
  .topbar-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .topbar-actions .btn { flex: 1 1 auto; }

  /* Le compteur d'attente redevient un bloc lisible sur plusieurs lignes plutôt qu'une
     ellipse : rayon modéré et largeur pleine. */
  .pending-badge { width: 100%; border-radius: 10px; align-items: flex-start; }
  .pending-dot { margin-top: 5px; flex-shrink: 0; }

  .filter-bar { gap: 12px; padding: 12px 16px; }
  .filter-group { flex-wrap: wrap; }
  .seg { flex: 1 1 auto; }
  .seg button { flex: 1 1 auto; }

  .dashboard-body { padding: 16px; gap: 16px; }
  .match-card { padding: 14px; }
  .match-head { gap: 12px; }
  .match-meta { min-width: 0; }
  .match-actions .btn { flex: 1 1 auto; justify-content: center; }
  /* `margin-left: auto` collait le marché contre le bord droit sous les boutons : sur une
     colonne, il vaut mieux le laisser passer à la ligne normalement. */
  .match-actions .market { margin-left: 0; width: 100%; }

  /* Page abonné */
  .subscriber-header { padding: 16px; gap: 12px; }
  .subscriber-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .subscriber-actions .btn { flex: 1 1 auto; }
  .subscriber-title { font-size: 20px; }
  .feed { padding: 16px; gap: 14px; }
  .feed-card { padding: 14px; }
  .feed-teams { font-size: 17px; }
  .feed-day-heading { flex-wrap: wrap; gap: 8px; }
  /* Le trait de séparation n'a plus de place utile une fois les éléments repliés. */
  .feed-day-rule { display: none; }

  .subscriber-footer { flex-wrap: wrap; gap: 6px; padding: 16px; }
  .subscriber-footer .help { margin-left: 0; width: 100%; }

  .locked-overlay { padding: 24px 16px; }
  .locked-title { font-size: 19px; }
}