/* ==========================================================================
   KAGERER ANHÄNGER — DESIGN SYSTEM (tokens + base)
   ==========================================================================

   ⚠️  PALETTE DÉRIVÉE DU LOGO CLIENT (Phase 16G) — PAS DE CHARTE OFFICIELLE ⚠️
   ---------------------------------------------------------------------
   Le client a fourni un logo réel (« logohang.png », médiathèque WordPress,
   attachment assigné en custom_logo — voir header.php). Primaire et
   accent ci-dessous sont dérivés d'une analyse pixel réelle de ce fichier
   (navy dominant ≈ #012041, orange dominant ≈ #FF6E05), légèrement
   ajustés pour garantir un contraste WCAG AA sur texte/fond et sur le
   focus ring, sans dénaturer la teinte. Secondaire (graphite) reste
   inchangé (choix de design développeur, pas issu du logo).

   Aucune charte graphique complète (typographie de marque, variantes,
   règles d'usage) n'a été fournie par le client au-delà du fichier logo
   lui-même — CLIENT-BRIEF.md n'a pas encore été mis à jour formellement
   avec ces valeurs. Si une charte officielle distincte est fournie plus
   tard, la faire prévaloir sur ces valeurs dérivées.
   ---------------------------------------------------------------------

   Ce fichier est chargé EN PREMIER (avant tout autre CSS du thème).
   Il ne contient que des tokens (custom properties) + un reset de base
   + les règles d'accessibilité (focus visible). Les composants
   (boutons, cards, badges, formulaires, grilles) vivent dans
   assets/css/components.css, chargé juste après.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     Couleurs — PLACEHOLDER (voir avertissement ci-dessus)
     -------------------------------------------------------------------- */

  /* Primaire : bleu navy dérivé du logo officiel (Phase 16G — analyse
     pixel réelle du fichier logohang.png, navy dominant #012041) */
  --color-primary: #0F2A47;
  --color-primary-dark: #071A2F;
  --color-primary-light: #2C5578;
  --color-primary-tint: #E9F0F5; /* fond très clair teinté primaire, pour surfaces subtiles */

  /* Secondaire : graphite (texte fort, boutons secondaires) — inchangé */
  --color-secondary: #303740;
  --color-secondary-dark: #171B21;
  --color-secondary-light: #59636E;

  /* Accent : orange dérivé du logo officiel (Phase 16G — orange dominant
     #FF6E05), usage parcimonieux (badges, mises en avant) */
  --color-accent: #F06A0A;
  /* #C6540A brut donnait un contraste ~4.49:1 avec du texte blanc
     (.btn--accent:hover, account.css) — juste sous le seuil AA 4.5:1.
     Légèrement assombri (même teinte) pour repasser à ~5.3:1. */
  --color-accent-dark: #B24C09;
  --color-accent-tint: #FDECDD;

  /* Neutres / fonds / bordures */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4F6F8;
  --color-surface: #FFFFFF;
  --color-border: #D5DBE1;
  --color-border-strong: #B8C1CA;

  /* Texte */
  --color-text: #1B2026;
  --color-text-muted: #59636E;
  --color-text-subtle: #7C8792;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-muted: #C3CBD3;
  --color-text-inverse-subtle: #AEB8C2;

  /* États sémantiques génériques (pas de contenu commercial associé) */
  --color-success: #2E7D46;
  --color-success-tint: #E7F4EA;
  --color-danger: #C0342C;
  --color-danger-tint: #FBEAE9;
  --color-warning: #9A6400;
  --color-warning-tint: #FBF1DE;
  --color-info: #2563A6;
  --color-info-tint: #E8F0F8;

  /* Focus (accessibilité clavier) — aligné sur --color-primary-light */
  --color-focus-ring: #2C5578;

  /* --------------------------------------------------------------------
     Typographie — polices système uniquement, aucun appel externe
     -------------------------------------------------------------------- */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Échelle typographique modulaire (base 16px, ratio ~1.2) */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.125rem;   /* 18px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 1.875rem;  /* 30px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 2.75rem;   /* 44px */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --------------------------------------------------------------------
     Spacing — échelle compacte (site dense/premium, pas de vides géants)
     -------------------------------------------------------------------- */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px — maximum recommandé pour un padding de section */

  /* Espacement vertical entre sections — Phase 16C : rythme plus premium */
  --section-padding-y: 4.5rem;      /* 72px desktop */
  --section-padding-y-sm: 2.75rem;  /* 44px mobile */

  /* --------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------- */

  --container-max: 1320px;
  --container-padding: var(--space-4);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23, 27, 33, 0.07), 0 1px 1px rgba(23, 27, 33, 0.04);
  --shadow-md: 0 8px 22px rgba(23, 27, 33, 0.09), 0 2px 5px rgba(23, 27, 33, 0.05);
  --shadow-lg: 0 18px 42px rgba(23, 27, 33, 0.14), 0 5px 12px rgba(23, 27, 33, 0.07);

  --border-width: 1px;
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* Breakpoints — documentés ici pour référence (utilisés en dur dans les
     media queries, les custom properties ne pouvant pas être interpolées
     dans une media query CSS native). */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1320px;
}

/* ==========================================================================
   Reset de base minimal
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
  height: auto;
}

figure {
  margin: 0;
}

ul,
ol {
  padding-left: var(--space-6);
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-secondary-dark);
}

h1 { font-size: clamp(2rem, 4vw, var(--text-4xl)); }
h2 { font-size: clamp(1.65rem, 3vw, var(--text-3xl)); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-8) 0;
}

/* ==========================================================================
   Accessibilité — états de focus visibles (jamais outline:none sans
   remplacement) sur tous les éléments interactifs
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Fallback pour navigateurs sans :focus-visible */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  clip: auto !important;
  clip-path: none;
  color: var(--color-text);
  display: block;
  font-size: var(--text-sm);
  height: auto;
  left: var(--space-4);
  line-height: normal;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  top: var(--space-4);
  width: auto;
  z-index: 100000;
}