/* ==========================================================================
   Label Info TV — design system (Tailwind CSS v4)
   Compilation : npm run build:css  →  static/css/app.css
   Règle : bleu foncé dominant ; rouge et jaune réservés aux accents.
   ========================================================================== */
@import "tailwindcss";
@plugin "@tailwindcss/forms" { strategy: "class"; }
@plugin "@tailwindcss/typography";

@source "../../templates";
@source "../../apps";
@source "../js";

@theme {
  --font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  /* Bleu foncé — couleur dominante */
  --color-brand-50: #eef3fa;
  --color-brand-100: #d6e1f2;
  --color-brand-200: #adc3e4;
  --color-brand-300: #7c9ed1;
  --color-brand-400: #4b77b8;
  --color-brand-500: #2b5a9e;
  --color-brand-600: #1d4e89;
  --color-brand-700: #163e6e;
  --color-brand-800: #12305a;
  --color-brand-900: #0b1f3a;
  --color-brand-950: #07142a;

  /* Rouge — accent (direct, flash, suppression, erreurs) */
  --color-signal-50: #fdecef;
  --color-signal-100: #f9d0d7;
  --color-signal-500: #c8102e;
  --color-signal-600: #a50d26;
  --color-signal-700: #7f0a1d;

  /* Jaune — accent (à la une, mise en avant, avertissements) */
  --color-gold-50: #fef8e6;
  --color-gold-100: #fdedb5;
  --color-gold-300: #f7ce4a;
  --color-gold-400: #f2b705;
  --color-gold-600: #c69403;
  --color-gold-700: #8a6702;

  --radius-card: 0.875rem;
  --shadow-card: 0 1px 2px rgb(11 31 58 / 0.06), 0 1px 3px rgb(11 31 58 / 0.08);
  --shadow-raised: 0 10px 30px -12px rgb(11 31 58 / 0.25);
}

@layer base {
  html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
  body { @apply bg-slate-50 font-sans text-slate-800; }
  h1, h2, h3, h4 { @apply font-bold tracking-tight text-brand-900; }
  [x-cloak] { display: none !important; }
  :focus-visible { @apply outline-2 outline-offset-2 outline-brand-500; }
}

@layer components {
  /* ---- Boutons ------------------------------------------------------- */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold
      whitespace-nowrap transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-50
      focus-visible:outline-2 focus-visible:outline-offset-2;
  }
  .btn svg { @apply size-4 shrink-0; }
  .btn-sm { @apply px-3 py-1.5 text-xs; }
  .btn-lg { @apply px-6 py-3 text-base; }
  .btn-icon { @apply p-2; }
  .btn-primary { @apply bg-brand-800 text-white hover:bg-brand-900 focus-visible:outline-brand-600; }
  .btn-secondary { @apply border border-slate-300 bg-white text-brand-900 hover:border-brand-300 hover:bg-brand-50; }
  .btn-ghost { @apply text-slate-600 hover:bg-slate-100 hover:text-brand-900; }
  .btn-danger { @apply bg-signal-500 text-white hover:bg-signal-600 focus-visible:outline-signal-500; }
  .btn-danger-ghost { @apply text-signal-600 hover:bg-signal-50; }
  .btn-accent { @apply bg-gold-400 text-brand-950 hover:bg-gold-300 focus-visible:outline-gold-600; }
  .btn-success { @apply bg-brand-600 text-white hover:bg-brand-700; }

  /* ---- Formulaires --------------------------------------------------- */
  .form-label { @apply mb-1.5 block text-sm font-semibold text-brand-900; }
  .form-label .req { @apply text-signal-500; }
  .form-input, .form-select, .form-textarea {
    @apply block w-full rounded-lg border-slate-300 bg-white text-sm text-slate-900 shadow-xs
      placeholder:text-slate-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20;
  }
  .form-textarea { @apply leading-relaxed; }
  .form-checkbox { @apply size-4 rounded border-slate-300 text-brand-700 focus:ring-brand-500/30; }
  .form-file {
    @apply block w-full text-sm text-slate-600 file:mr-3 file:rounded-lg file:border-0 file:bg-brand-50
      file:px-4 file:py-2 file:text-sm file:font-semibold file:text-brand-800 hover:file:bg-brand-100;
  }
  .form-help { @apply mt-1.5 text-xs text-slate-500; }
  .form-error { @apply mt-1.5 text-xs font-medium text-signal-600; }
  .has-error .form-input, .has-error .form-select, .has-error .form-textarea {
    @apply border-signal-500 focus:border-signal-500 focus:ring-signal-500/20;
  }

  /* ---- Cartes -------------------------------------------------------- */
  .card { @apply rounded-(--radius-card) border border-slate-200/80 bg-white shadow-(--shadow-card); }
  .card-header { @apply flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-4; }
  .card-title { @apply text-base font-bold text-brand-900; }
  .card-body { @apply p-5; }

  /* ---- Badges -------------------------------------------------------- */
  .badge { @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold whitespace-nowrap; }
  .badge::before { content: ""; @apply size-1.5 rounded-full bg-current opacity-70; }
  .badge-plain::before { display: none; }
  .badge-neutral { @apply bg-slate-100 text-slate-600; }
  .badge-slate { @apply bg-slate-200 text-slate-700; }
  .badge-blue { @apply bg-brand-100 text-brand-800; }
  .badge-sky { @apply bg-sky-100 text-sky-800; }
  .badge-yellow { @apply bg-gold-100 text-gold-700; }
  .badge-red { @apply bg-signal-100 text-signal-700; }
  .badge-solid-red { @apply bg-signal-500 text-white; }
  .badge-solid-gold { @apply bg-gold-400 text-brand-950; }

  /* ---- Tableaux ------------------------------------------------------ */
  .table-wrap { @apply overflow-x-auto; }
  .table { @apply min-w-full text-sm; }
  .table thead th {
    @apply bg-slate-50 px-4 py-3 text-left text-xs font-bold tracking-wide text-slate-500 uppercase whitespace-nowrap;
  }
  .table tbody td { @apply border-t border-slate-100 px-4 py-3 align-middle; }
  .table tbody tr { @apply transition-colors hover:bg-brand-50/40; }

  /* ---- Alertes ------------------------------------------------------- */
  .alert { @apply flex items-start gap-3 rounded-lg border px-4 py-3 text-sm; }
  .alert svg { @apply mt-0.5 size-5 shrink-0; }
  .alert-success { @apply border-brand-200 bg-brand-50 text-brand-900; }
  .alert-info { @apply border-sky-200 bg-sky-50 text-sky-900; }
  .alert-warning { @apply border-gold-300 bg-gold-50 text-gold-700; }
  .alert-error { @apply border-signal-100 bg-signal-50 text-signal-700; }

  /* ---- Navigation back-office --------------------------------------- */
  .side-link {
    @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-brand-100/80
      transition-colors hover:bg-white/5 hover:text-white;
  }
  .side-link svg { @apply size-5 shrink-0 opacity-70; }
  .side-link.is-active { @apply bg-white/10 text-white shadow-[inset_3px_0_0_var(--color-gold-400)]; }
  .side-link.is-active svg { @apply opacity-100 text-gold-400; }
  .side-section { @apply mt-6 mb-2 px-3 text-[11px] font-bold tracking-widest text-brand-300/70 uppercase; }

  /* ---- Pagination ---------------------------------------------------- */
  .page-link {
    @apply inline-flex min-w-9 items-center justify-center rounded-lg border border-slate-200 bg-white px-3 py-2
      text-sm font-medium text-slate-600 hover:border-brand-300 hover:text-brand-800;
  }
  .page-link.is-current { @apply border-brand-800 bg-brand-800 text-white; }
  .page-link.is-disabled { @apply pointer-events-none opacity-40; }

  /* ---- Divers -------------------------------------------------------- */
  .img-placeholder {
    @apply bg-gradient-to-br from-brand-800 to-brand-950;
    background-image: url("/static/img/logo-sidebar.svg"), linear-gradient(135deg, var(--color-brand-800), var(--color-brand-950));
    background-repeat: no-repeat; background-position: center; background-size: 30%, cover;
  }
  .kicker { @apply text-xs font-bold tracking-widest text-signal-500 uppercase; }
  .section-title { @apply flex items-center gap-3 text-xl font-extrabold text-brand-900 md:text-2xl; }
  .section-title::before { content: ""; @apply h-6 w-1.5 rounded-full bg-signal-500; }
  .line-clamp-2 { @apply overflow-hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .line-clamp-3 { @apply overflow-hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

  /* Contenu d'article (HTML de l'éditeur) */
  .article-body {
    @apply prose prose-lg max-w-none text-justify prose-slate prose-headings:text-brand-900 prose-a:text-brand-700
      prose-a:decoration-gold-400 prose-a:decoration-2 prose-a:underline-offset-4 hover:prose-a:text-brand-900
      prose-blockquote:border-l-signal-500 prose-blockquote:text-brand-900 prose-img:rounded-xl prose-figcaption:text-center
      prose-figcaption:text-sm;
  }
  .article-body iframe { @apply aspect-video h-auto w-full rounded-xl; }

  .ticker { animation: ticker 60s linear infinite; }
  .ticker:hover { animation-play-state: paused; }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker { animation: none; }
}

/* htmx : indicateur de chargement */
.htmx-indicator { opacity: 0; transition: opacity 150ms; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request.htmx-dim { opacity: .55; transition: opacity 150ms; }