/* ========================================================================
   pigeon-css — mini design system mxfund (Phase 1 : admin GUI)
   ========================================================================

   Stack CSS partagée à terme entre l'admin web et le site v2 public
   (= Phase 2). Identité pigeon (teal/violet/cream), écrite à la main,
   pas de framework, pas de build pipeline.

   Stratifié en 4 couches :

     1. TOKENS    — CSS variables (palette, espacements, typo, ombres)
     2. BASE      — reset léger + styles par défaut des balises HTML
     3. COMPOSANTS — .btn, .card, .badge, .alert, .table-pigeon, .nav-pigeon...
     4. UTILITIES — quelques classes ciblées (mono, truncate, mt-md...)

   Convention :
     - Noms en kebab-case avec préfixe BEM si besoin (.btn, .btn-primary)
     - Pas de !important
     - Pas d'@media imbriqué hors des breakpoints layout
     - 1 CSS variable = 1 décision design (= si tu veux changer le bleu
       primary, tu touches --pigeon-teal, pas N classes)

   Ajout d'un nouveau composant :
     - L'ajouter ici avec une docstring CSS (= bloc de commentaire) au-dessus
     - Réutiliser les variables (ne pas hardcoder de couleur/spacing)
     - Tester sur les 9 templates admin (Phase 1) + (Phase 2) site v2

   ====================================================================== */


/* ========================================================================
   1. TOKENS
   ====================================================================== */
:root {
  /* Palette pigeon (identité) */
  --pigeon-teal:         #0d9488;
  --pigeon-teal-dark:    #0f766e;
  --pigeon-teal-light:   #5eead4;
  --pigeon-violet:       #7c3aed;
  --pigeon-violet-dark:  #6d28d9;
  --pigeon-cream:        #fdf8f0;

  /* Slate scale (neutrals) */
  --slate-50:   #f8fafc;
  --slate-100:  #f1f5f9;
  --slate-200:  #e2e8f0;
  --slate-300:  #cbd5e1;
  --slate-400:  #94a3b8;
  --slate-500:  #64748b;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-900:  #0f172a;

  /* Couleurs sémantiques (= états : success/info/warning/error) */
  --color-success-bg:  #f0fdf4;
  --color-success-fg:  #166534;
  --color-success-br:  #bbf7d0;
  --color-info-bg:     #eff6ff;
  --color-info-fg:     #1e40af;
  --color-info-br:     #bfdbfe;
  --color-warning-bg:  #fef9c3;
  --color-warning-fg:  #854d0e;
  --color-warning-br:  #fef08a;
  --color-error-bg:    #fef2f2;
  --color-error-fg:    #991b1b;
  --color-error-br:    #fecaca;
  --color-error-text:  #dc2626;
  --color-orange:      #ea580c;

  /* Espacements (= scale 0.25rem) */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* Typographie */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Radius / shadow / transition */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --transition: all 0.15s ease;

  /* Layout */
  --container-max: 72rem;
}


/* ========================================================================
   2. BASE — reset léger + styles par défaut HTML
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: var(--slate-900);
  background-color: var(--pigeon-cream);
  min-height: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover { text-decoration: underline; }
button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}
code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: var(--leading-tight); }
p { margin: 0; }


/* ========================================================================
   3. COMPOSANTS
   ====================================================================== */

/* Layout container : centre + max-width + padding horizontal */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Nav pigeon (header global) */
.nav-pigeon {
  background-color: var(--pigeon-teal);
  color: white;
  box-shadow: var(--shadow-md);
}
.nav-pigeon-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.75rem var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-pigeon-brand {
  font-weight: 700;
  font-size: var(--text-lg);
}
.nav-pigeon-brand .muted { opacity: 0.7; }
.nav-pigeon-links {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-sm);
}

/* Nav dropdown groupé (admin GUI seulement, classes additives - ne pas */
/* reutiliser cote site ; nav teal donc panel teal = pas de souci dark) */
.nav-dd { position: relative; }
.nav-dd > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after { content: " \25BE"; opacity: 0.7; }
.nav-dd[open] > summary { text-decoration: underline; }
.nav-dd-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 11rem;
  padding: 0.5rem;
  background-color: var(--pigeon-teal);
  box-shadow: var(--shadow-md);
  border-radius: 6px;
}
.nav-dd-menu a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
}
.nav-dd-menu a:hover { background-color: rgba(255, 255, 255, 0.15); }

/* Main content area (= sous la nav) */
.main-pigeon {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

/* Page header (titre + actions inline) */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-md);
}
.page-title  { font-size: var(--text-2xl); }
.page-meta   { font-size: var(--text-sm); color: var(--slate-500); }

/* Card : conteneur blanc arrondi (= boîte de contenu) */
.card {
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
}

/* Dashboard card (= les 4 tuiles cliquables du home) */
.dashboard-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dashboard-grid { grid-template-columns: repeat(4, 1fr); } }

.dashboard-card {
  display: block;
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  transition: var(--transition);
  color: inherit;
}
.dashboard-card:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.dashboard-card.disabled { opacity: 0.6; cursor: default; pointer-events: none; }
.dashboard-card-label  { font-size: var(--text-sm); color: var(--slate-500); }
.dashboard-card-value  { font-size: var(--text-3xl); font-weight: 700; }
.dashboard-card-value.is-error { color: var(--color-error-text); }
.dashboard-card-value.is-warn  { color: var(--color-orange); }
.dashboard-card-value .total   { font-size: var(--text-base); color: var(--slate-400); }
.dashboard-card-meta   { font-size: var(--text-xs); color: var(--slate-400); margin-top: var(--space-xs); }

/* Boutons */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  line-height: var(--leading-normal);
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background-color: var(--pigeon-teal);
  color: white;
}
.btn-primary:hover { background-color: var(--pigeon-teal-dark); }
.btn-sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
}

/* Badge (= status pill, plus petit qu'un bouton) */
.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}
.badge-success { background-color: var(--color-success-bg); color: var(--color-success-fg); }
.badge-info    { background-color: var(--color-info-bg);    color: var(--color-info-fg); }
.badge-warning { background-color: var(--color-warning-bg); color: var(--color-warning-fg); }
.badge-error   { background-color: var(--color-error-bg);   color: var(--color-error-fg); }
.badge-neutral { background-color: var(--slate-100);        color: var(--slate-600); }

/* Alert (= notification inline, large) */
.alert {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid;
  margin-bottom: var(--space-md);
}
.alert-success { background-color: var(--color-success-bg); border-color: var(--color-success-br); color: var(--color-success-fg); }
.alert-info    { background-color: var(--color-info-bg);    border-color: var(--color-info-br);    color: var(--color-info-fg); }
.alert-warning { background-color: var(--color-warning-bg); border-color: var(--color-warning-br); color: var(--color-warning-fg); }
.alert-error   { background-color: var(--color-error-bg);   border-color: var(--color-error-br);   color: var(--color-error-fg); }

/* Table pigeon (= tableau standard, bordures grisées, hover) */
.table-pigeon {
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  width: 100%;
}
.table-pigeon thead { background-color: var(--slate-100); }
.table-pigeon th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--slate-600);
  text-transform: uppercase;
}
.table-pigeon td {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  border-top: 1px solid var(--slate-200);
}
.table-pigeon tbody tr { transition: background-color 0.1s ease; }
.table-pigeon tbody tr:hover { background-color: var(--slate-50); }

/* Tabs (= boutons filtre horizontaux, 1 active à la fois) */
.tabs {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.tab {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background-color: white;
  border: 1px solid var(--slate-200);
  transition: var(--transition);
}
.tab:hover { background-color: var(--slate-50); text-decoration: none; }
.tab.active {
  background-color: var(--pigeon-teal);
  color: white;
  border-color: var(--pigeon-teal);
}

/* Empty state (= vue vide "rien à afficher") */
.empty-state {
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl);
  text-align: center;
  color: var(--slate-500);
}

/* Code blocks (= context JSON, last_error) */
.code-block {
  background-color: var(--slate-50);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}
.code-block.is-error {
  background-color: var(--color-error-bg);
  color: var(--color-error-fg);
}

/* Definition list (= dl/dt/dd à 2 colonnes) */
.dl-pigeon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
}
.dl-pigeon dt { font-size: var(--text-sm); color: var(--slate-500); }
.dl-pigeon dd { margin: 0; font-size: var(--text-sm); }
.dl-pigeon dd.mono { font-family: var(--font-mono); font-size: var(--text-xs); }

/* Back link (= "← retour à la liste") */
.back-link {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--pigeon-violet);
  margin-bottom: var(--space-md);
}
.back-link:hover { text-decoration: underline; }

/* Section footer (= note légale ou contextuelle sous une table) */
.section-footnote {
  font-size: var(--text-xs);
  color: var(--slate-400);
  margin-top: var(--space-lg);
}

/* Toast (= notification position-fixed bottom-right, fade-out auto) */
.toast {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  max-width: 24rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--pigeon-teal);
  color: white;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 50;
}
.toast.show { opacity: 1; }


/* ========================================================================
   4. UTILITIES (= classes ciblées, < 30 total)
   ======================================================================
   Règle d'admission : si utilisé dans ≥ 3 templates et qu'il n'y a pas
   de composant naturel pour l'incarner. Sinon, créer un composant.
   ====================================================================== */

/* Typographie utilities */
.mono            { font-family: var(--font-mono); }
.text-xs         { font-size: var(--text-xs); }
.text-sm         { font-size: var(--text-sm); }
.text-muted      { color: var(--slate-500); }
.text-error      { color: var(--color-error-text); }
.text-violet     { color: var(--pigeon-violet); }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 24rem;
}
.truncate-sm { max-width: 18rem; }

/* Layout utilities (flex/grid quick) */
.row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.row-start { display: flex; align-items: flex-start; gap: var(--space-md); }

/* Marges utilities (limités à md/lg, pas de scale complet) */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Form utilities — composables, réutilisables au-delà de mint_manual */
.form-section {
  margin-bottom: var(--space-lg);
}
.form-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--slate-200);
}
.form-row {
  margin-bottom: var(--space-md);
}
.form-row > label,
.form-row > .form-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--slate-500);
  margin-bottom: 4px;
}
.form-input,
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="url"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  box-sizing: border-box;
  background-color: white;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--pigeon-teal);
  box-shadow: 0 0 0 2px var(--pigeon-teal-bg, rgba(20, 184, 166, 0.15));
}
.form-row textarea {
  font-family: var(--font-sans);
  resize: vertical;
  min-height: 4rem;
}
.form-help {
  display: block;
  font-size: var(--text-xs);
  color: var(--slate-400);
  margin-top: 4px;
}
.form-error {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-error-fg);
  margin-top: 4px;
}
/* Grid 2-col responsive : pour aligner des paires d'inputs côte à côte */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}
/* Radio/checkbox group inline */
.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: 4px;
}
.form-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
}
.form-radio-group input[type="radio"],
.form-radio-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}
/* Preview calculette (= petit panneau bleuté à côté ou sous un input) */
.form-preview {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);            /* sinon texte hérité = invisible (blanc/blanc) */
  border-left: 3px solid var(--color-info-fg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-top: 4px;
}
.form-preview .form-preview-value {
  font-family: var(--font-mono);
  font-weight: 600;
}


/* ========================================================================
   DARK MODE — toggle via html.dark (cf theme.js dans le site)
   ========================================================================

   theme.js (servi par le site) ajoute html.dark selon localStorage +
   prefers-color-scheme. Pour activer le dark mode sur l'admin, suffit
   d'inclure theme.js dans son base.html et d'ajouter un bouton
   .theme-toggle dans la nav (Phase 2 admin).

   On override seulement les tokens neutres ; les couleurs sémantiques
   (success/info/warning/error) gardent leurs teintes pastel claires
   (lisibles sur fond sombre).
   ====================================================================== */
html.dark {
  --pigeon-cream:        #0f172a;
  --slate-50:            #1e293b;
  --slate-100:           #334155;
  --slate-200:           #475569;
  --slate-300:           #64748b;
  --slate-400:           #94a3b8;
  --slate-500:           #cbd5e1;
  --slate-600:           #e2e8f0;
  --slate-700:           #f1f5f9;
  --slate-900:           #f8fafc;

  --pigeon-teal:         #5eead4;
  --pigeon-teal-dark:    #2dd4bf;
  --pigeon-teal-light:   #99f6e4;
  --pigeon-violet:       #c084fc;
  --pigeon-violet-dark:  #a78bfa;
}

/* En dark, les surfaces qui sont blanc dur en light deviennent slate-50
   (= #1e293b en dark, override via le bloc html.dark ci-dessus).
   Couvre toutes les surfaces "élevées" (cards, table, inputs, tabs actifs,
   empty-state). Le texte hérite du body (slate-900 = quasi blanc en dark)
   donc le contraste est OK ; on force juste les borders à slate-200
   (= #475569 en dark) pour qu'elles restent visibles. */
html.dark .card,
html.dark .dashboard-card,
html.dark .table-pigeon,
html.dark .tab.active,
html.dark .empty-state,
html.dark .form-row input,
html.dark .form-row select,
html.dark .form-row textarea {
  background-color: var(--slate-50);
  color: var(--slate-900);
}
html.dark .form-row input,
html.dark .form-row select,
html.dark .form-row textarea {
  border-color: var(--slate-200);
}
/* Tabs : le tab non-actif et le hover s'éclaircissent légèrement en dark
   pour rester distinguables du bg page (slate-50 = #1e293b, bg page =
   pigeon-cream = #0f172a). */
html.dark .tab:hover { background-color: var(--slate-100); }


/* ========================================================================
   ARTICLE-PIGEON — rendu Markdown→HTML du sitemaker
   ======================================================================

   Pour les rapports daily/weekly produits par le sitemaker (= contenu
   Markdown converti en HTML par la lib markdown). Style auto les
   éléments standards d'un article (titres, paragraphes, listes, images,
   blockquotes, code) sans avoir à classer chaque balise dans le HTML
   généré. Équivalent du .prose de Tailwind Typography.
   ====================================================================== */
.article-pigeon h1 {
  font-size: var(--text-3xl);
  margin: var(--space-xl) 0 var(--space-md);
}
.article-pigeon h2 {
  font-size: var(--text-2xl);
  margin: var(--space-lg) 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--slate-100);
}
.article-pigeon h3 {
  font-size: var(--text-xl);
  margin: var(--space-md) 0 var(--space-sm);
}
.article-pigeon p { margin: var(--space-sm) 0; }
.article-pigeon ul,
.article-pigeon ol {
  margin: var(--space-sm) 0;
  padding-left: var(--space-lg);
}
.article-pigeon li { margin: var(--space-xs) 0; }
.article-pigeon a {
  color: var(--pigeon-teal);
  text-decoration: underline;
}
.article-pigeon a:hover { color: var(--pigeon-teal-dark); }
.article-pigeon img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-md) auto;
  border-radius: var(--radius-sm);
}
.article-pigeon blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--pigeon-teal);
  color: var(--slate-500);
  font-style: italic;
}
.article-pigeon code {
  background-color: var(--slate-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}
.article-pigeon pre {
  background-color: var(--slate-100);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.article-pigeon strong { font-weight: 700; color: var(--slate-900); }
.article-pigeon figure { margin: var(--space-md) 0; }


/* ========================================================================
   COMPOSANTS SITE — utilisés par mxfund/sitemaker/templates.py
   ====================================================================== */

/* Theme toggle (= bouton sun/moon dans la nav). Affiche moon en light
   mode, sun en dark mode. */
.theme-toggle {
  background: transparent;
  border: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  color: inherit;
  display: inline-flex;
  align-items: center;
  transition: var(--transition);
}
.theme-toggle:hover { background-color: rgba(255, 255, 255, 0.12); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline; }
html.dark .theme-toggle .icon-sun  { display: inline; }
html.dark .theme-toggle .icon-moon { display: none; }

/* Brand avec logo dans la nav (= image inline + texte) */
.nav-pigeon-brand img {
  height: 1.5rem;
  vertical-align: middle;
  margin-right: var(--space-sm);
}

/* Hero pigeon (= encart d'accueil index avec mascotte) */
.hero-pigeon {
  position: relative;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.10), rgba(124, 58, 237, 0.10));
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-2xl);
  overflow: hidden;
}
html.dark .hero-pigeon {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.10), rgba(192, 132, 252, 0.10));
}
.hero-pigeon h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
}
.hero-pigeon p {
  color: var(--slate-500);
  max-width: 28rem;
}
.hero-pigeon-mascotte {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  height: 8rem;
  opacity: 0.6;
  pointer-events: none;
}

/* Pagination centrée (hier/accueil/demain du PAGE_TEMPLATE). */
.site-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-2xl) 0 var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--slate-100);
}
.site-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background-color: var(--slate-50);
  color: inherit;
  transition: var(--transition);
}
.site-pagination a:hover {
  background-color: var(--slate-100);
  text-decoration: none;
}

/* Footer site (= en bas des rapports + index). */
.site-footer {
  background-color: var(--slate-50);
  margin-top: var(--space-2xl);
  padding: var(--space-xl) 0;
  font-size: var(--text-sm);
  color: var(--slate-600);
}
.site-footer p { margin: var(--space-xs) 0; }
.site-footer .mono { color: var(--pigeon-teal); }
.site-footer-decoration {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.site-footer-decoration img {
  height: 1.5rem;
  opacity: 0.7;
}

/* Latest cards (= cards index 'dernier daily' / 'dernier weekly'). */
.latest-cards {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-2xl);
}
@media (min-width: 640px) {
  .latest-cards { grid-template-columns: repeat(2, 1fr); }
}
.latest-card {
  display: block;
  padding: var(--space-lg);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background-color: white;
  color: inherit;
  transition: var(--transition);
}
html.dark .latest-card { background-color: var(--slate-50); }
.latest-card:hover {
  border-color: var(--pigeon-teal);
  text-decoration: none;
}
.latest-card-kind {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-500);
  margin-bottom: var(--space-xs);
}
.latest-card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.latest-card-date {
  font-size: var(--text-sm);
  color: var(--slate-500);
}

/* Archive (= rapports précédents groupés par mois, collapsable). */
.archive-month {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  background-color: white;
}
html.dark .archive-month { background-color: var(--slate-50); }
.archive-month summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: var(--transition);
}
.archive-month summary:hover { background-color: var(--slate-50); }
html.dark .archive-month summary:hover { background-color: var(--slate-100); }
.archive-month-count {
  font-size: var(--text-xs);
  color: var(--slate-500);
  margin-left: var(--space-sm);
}
.archive-month ul {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-md) var(--space-md);
}
.archive-month li { margin: var(--space-xs) 0; }
.archive-month a {
  color: var(--pigeon-teal);
}
.archive-month a:hover { color: var(--pigeon-teal-dark); }

/* NFT mints grid (= section weekly Mints PigeONShare). Auto-fill grid
   responsive ; chaque card = thumbnail carré + numéro + date. */
.nft-mints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0;
}
.nft-mint-card {
  background-color: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
  transition: var(--transition);
}
html.dark .nft-mint-card {
  background-color: var(--slate-50);
  border-color: var(--slate-200);
}
.nft-mint-card:hover {
  border-color: var(--pigeon-teal);
  box-shadow: var(--shadow-md);
}
.nft-mint-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  display: block;
}
.nft-mint-id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}
.nft-mint-id a { color: var(--pigeon-teal); }
.nft-mint-id a:hover { color: var(--pigeon-teal-dark); text-decoration: underline; }
.nft-mint-date { margin-top: var(--space-xs); }

/* Chips d'adresses + bouton copier (page user, réutilisable ailleurs). */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.addr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--slate-100);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}
.addr-chip code { font-size: var(--text-xs); }
.btn-copy {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1;
  border-radius: var(--radius-sm);
}
.btn-copy:hover { background-color: var(--slate-200); }