/* Preload by Agence Web Performance : feuille de style applicative.
   Tokens d'espacement, palette AWP posée sur les variables FrankenUI (HSL), surcharges obligatoires. */

:root {
  /* Échelle d'espacement stricte : multiples de 4 px uniquement */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px;

  --radius: 8px;
  --font-size-base: 1rem;
  --font-size-sm: 0.9375rem;
  --font-size-xs: 0.875rem;   /* minimum absolu */
  --content-width: 1100px;
  --reading-width: 680px;

  /* Charte AWP : #2E69E8 bleu, #224EAE bleu foncé, #092652 marine, #425770 ardoise, #EBF2FF fond clair */
  --awp-blue: 221 80% 55%;
  --awp-blue-dark: 221 67% 41%;
  --awp-navy: 216 80% 18%;
  --awp-slate: 213 26% 35%;
  --awp-light: 219 100% 96%;

  --background: 0 0% 100%;
  --foreground: var(--awp-navy);
  --card: 0 0% 100%;
  --card-foreground: var(--awp-navy);
  --popover: 0 0% 100%;
  --popover-foreground: var(--awp-navy);
  --primary: var(--awp-blue);
  --primary-foreground: 0 0% 100%;
  --secondary: var(--awp-light);
  --secondary-foreground: var(--awp-navy);
  --muted: var(--awp-light);
  --muted-foreground: var(--awp-slate);
  --accent: var(--awp-light);
  --accent-foreground: var(--awp-navy);
  --destructive: 0 72% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 219 40% 90%;
  --input: 219 40% 86%;
  --ring: var(--awp-blue);
  --border-strong: 219 30% 82%;
}

html.dark {
  --background: 216 60% 8%;
  --foreground: 219 60% 94%;
  --card: 216 55% 11%;
  --card-foreground: 219 60% 94%;
  --popover: 216 55% 11%;
  --popover-foreground: 219 60% 94%;
  --primary: 221 85% 62%;
  --primary-foreground: 216 80% 10%;
  --secondary: 216 45% 16%;
  --secondary-foreground: 219 60% 94%;
  --muted: 216 45% 16%;
  --muted-foreground: 216 25% 70%;
  --accent: 216 45% 18%;
  --accent-foreground: 219 60% 94%;
  --border: 216 30% 16%;
  --input: 216 30% 22%;
  --ring: 221 85% 62%;
  --border-strong: 216 30% 22%;
}

/* --- Reset des marges natives ; le rythme vertical vient de .flow --- */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, table, pre, blockquote, figure, hr { margin: 0; }
img, svg { max-width: 100%; }
[x-cloak] { display: none !important; }

.flow > * + *    { margin-top: var(--space-4); }
.flow-sm > * + * { margin-top: var(--space-2); }
.flow-lg > * + * { margin-top: var(--space-6); }
.flow-xl > * + * { margin-top: var(--space-8); }

/* --- Surfaces (obligatoire pour le thème sombre FrankenUI) --- */
html, body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* --- Typographie --- */
body {
  font-family: 'Manrope', 'Manrope-fallback', system-ui, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin: 0;
}
h1, h2, h3, h4, h5, h6, .brand-name {
  font-family: 'Poppins', 'Poppins-fallback', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
a { color: hsl(var(--primary)); }
.num, .stat-value, .uk-badge {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.muted { color: hsl(var(--muted-foreground)); }
.small { font-size: var(--font-size-sm); }

/* --- Grilles (FrankenUI 2.x ne livre pas uk-grid), mobile d'abord --- */
.grid    { display: grid; gap: var(--space-6); }
.grid-sm { display: grid; gap: var(--space-4); }
.grid > *, .grid-sm > * { min-width: 0; }
.cols-2, .cols-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Accessibilité --- */
.skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus {
  position: static; width: auto; height: auto; display: inline-block;
  padding: var(--space-2) var(--space-3); margin: var(--space-2);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 4px;
}
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* --- Marque --- */
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-name { font-size: 1.25rem; }
.brand-by { font-size: var(--font-size-xs); color: hsl(var(--muted-foreground)); font-weight: 500; }

/* --- Conteneurs --- */
.container { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--space-4); box-sizing: border-box; }
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }

/* --- En-tête de gestion --- */
.topbar { border-bottom: 1px solid hsl(var(--border-strong)); background: hsl(var(--card)); }
.topbar-inner { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; flex-wrap: wrap; }
.topbar-nav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.topbar-nav a {
  padding: var(--space-2) var(--space-3); border-radius: 6px;
  color: hsl(var(--muted-foreground)); text-decoration: none; font-weight: 600; font-size: var(--font-size-sm);
}
.topbar-nav a:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.topbar-nav a[aria-current="page"] { color: hsl(var(--primary)); background: hsl(var(--accent)); }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.env-badge {
  font-family: 'JetBrains Mono', monospace; font-size: var(--font-size-xs);
  padding: 2px var(--space-2); border-radius: 4px; background: hsl(38 92% 50%); color: hsl(216 80% 10%);
}

.theme-toggle {
  background: transparent; border: 0; color: hsl(var(--muted-foreground)); cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font-size: 1.25rem; line-height: 1; display: inline-flex; align-items: center;
}
.theme-toggle:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }

.page { padding-block: var(--space-6) var(--space-9); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* --- Cartes et surcharges FrankenUI --- */
.uk-card { border: 1px solid hsl(var(--border-strong)); border-radius: var(--radius); }
.uk-input, .uk-textarea, .uk-select { border: 1px solid hsl(var(--border-strong)); }
.uk-card-header {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid hsl(var(--border-strong));
  min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.uk-modal-dialog { position: relative; }
.uk-modal-close-default {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  background: transparent; border: 0; border-radius: 6px; color: hsl(var(--muted-foreground));
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.uk-modal-close-default:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.uk-btn-danger { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border: 1px solid hsl(var(--destructive)); }
.uk-btn-danger:hover { background: hsl(var(--destructive) / 0.88); }

.stat-label { font-size: var(--font-size-xs); color: hsl(var(--muted-foreground)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-size: 1.5rem; font-weight: 600; }
.empty-state { color: hsl(var(--muted-foreground)); }

.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid; }
.alert-error { border-color: hsl(var(--destructive) / 0.4); background: hsl(var(--destructive) / 0.08); color: hsl(var(--destructive)); }

/* --- Connexion --- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); box-sizing: border-box; background: hsl(var(--muted)); }
.login-card { width: 100%; max-width: 400px; }
.field label { display: block; font-weight: 600; font-size: var(--font-size-sm); margin-bottom: var(--space-1); }
.field .uk-input { width: 100%; box-sizing: border-box; }

/* --- Partie publique --- */
.site-header { border-bottom: 1px solid hsl(var(--border)); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; }
.lang-switch a { font-weight: 600; text-decoration: none; font-size: var(--font-size-sm); }
.hero { padding-block: var(--space-9); }
.hero-inner { max-width: var(--reading-width); }
.hero .tagline { font-size: 1.25rem; color: hsl(var(--muted-foreground)); }
.site-footer { border-top: 1px solid hsl(var(--border)); padding-block: var(--space-6); font-size: var(--font-size-sm); color: hsl(var(--muted-foreground)); }
.site-footer a { color: inherit; }

/* --- Direction visuelle publique (inspiration « component library » de newsletter) ---
   Cartes blanches sur fond bleuté, surtitres capitales espacées en bleu, titres marine,
   liens d'action « — LIRE ▸ », boutons pilule. */
.site-body { background: hsl(222 60% 97%); }
html.dark .site-body { background: hsl(var(--background)); }
.site-body .site-header { background: transparent; border-bottom: 0; }
.panel {
  background: hsl(var(--card)); border-radius: 4px;
  box-shadow: 0 1px 2px hsl(216 80% 18% / 0.06), 0 8px 24px hsl(216 80% 18% / 0.06);
  padding: var(--space-6) var(--space-5);
}
@media (min-width: 768px) { .panel { padding: var(--space-8) var(--space-8); } }
html.dark .panel { box-shadow: none; border: 1px solid hsl(var(--border-strong)); }
.eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: hsl(var(--primary));
}
.lead { font-size: 1.125rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: hsl(var(--primary)); text-decoration: none;
}
.link-arrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.link-arrow::after { content: "▸"; font-size: 0.875rem; }
.btn-pill {
  display: inline-block; border-radius: 999px; padding: 14px 32px;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border: 0;
}
.btn-pill:hover { background: hsl(var(--awp-blue-dark)); color: #fff; }
.item-list > li { list-style: none; padding-block: var(--space-4); border-top: 1px solid hsl(var(--border)); }
.item-list { padding: 0; }
.item-list > li:first-child { border-top: 0; }
.item-title { font-weight: 700; color: hsl(var(--foreground)); }