/**
 * Techmonster — Accessibilité WCAG 2.1 / RGAA niveau AA
 * Grille 8pt, focus visible, lien d'évitement, contrastes, reduced motion
 * Palette stricte : blanc, vert pâle, gris pâle (+ transparence / verts plus clairs)
 */

/* ========== Palette couleurs autorisées (texte / premier plan uniquement, fonds inchangés) ========== */
:root {
  --color-blanc: #ffffff;
  --color-vert-pale: rgb(187 247 208);
  --color-gris-pale: rgb(210 210 220); /* gris pâle, lisible sur fond sombre */
}

/* ========== Design tokens — Grille 8pt ========== */
:root {
  --space-8pt-1: 8px;   /* 1 unité */
  --space-8pt-2: 16px;
  --space-8pt-3: 24px;
  --space-8pt-4: 32px;
  --space-8pt-5: 40px;
  --space-8pt-6: 48px;
  --space-8pt-8: 64px;
  --space-8pt-10: 80px;
  --space-8pt-12: 96px;
  --touch-target-min: 44px; /* RGAA / WCAG 2.5.5 */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-color: rgb(187 247 208); /* vert pâle, contraste sur fond sombre */
  --focus-color-bg-light: #16a34a; /* vert sur fond clair (bouton menu) */
}

/* Classes de la palette (texte, fond, bordure) */
.text-palette-blanc { color: var(--color-blanc); }
.text-palette-vert-pale { color: var(--color-vert-pale); }
.text-palette-gris-pale { color: var(--color-gris-pale); }
.hover\:text-palette-blanc:hover { color: var(--color-blanc); }
.hover\:text-palette-gris-pale:hover { color: var(--color-gris-pale); }
.hover\:text-palette-vert-pale:hover { color: var(--color-vert-pale); }
.bg-palette-vert-pale { background-color: var(--color-vert-pale); }
.border-palette-vert-pale { border-color: var(--color-vert-pale); }
.after\:bg-palette-vert-pale::after { background-color: var(--color-vert-pale); }

/* Fond discret vert pâle (cartes, icônes) — palette uniquement */
.bg-palette-vert-pale-subtle { background-color: rgb(187 247 208 / 0.2); }

/* ========== Lien d'évitement (RGAA 12.1) ========== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: var(--space-8pt-2) var(--space-8pt-4);
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.skip-link:focus {
  left: var(--space-8pt-2);
  top: var(--space-8pt-2);
  outline: var(--focus-outline-width) solid var(--focus-color-bg-light);
  outline-offset: var(--focus-outline-offset);
}

/* ========== Focus visible — tous les éléments focusables (WCAG 2.4.7) ========== */
:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
  outline: none;
}

:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-color);
  outline-offset: var(--focus-outline-offset);
}

/* Contraste suffisant sur fond clair (ex: bouton menu) */
.bg-white:focus-visible,
[class*="bg-white"]:focus-visible {
  outline-color: var(--focus-color-bg-light);
}

/* Liens et boutons en mode clavier : contraste visible */
.header-nav-link:focus-visible,
.pas-cta:focus-visible,
.article-card:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-color);
  outline-offset: var(--focus-outline-offset);
}

/* Champs de formulaire */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-color);
  outline-offset: 0;
  box-shadow: 0 0 0 var(--focus-outline-offset) var(--focus-color);
}

/* ========== Zones tactiles minimales 44×44px (RGAA 12.6 / WCAG 2.5.5) ========== */
@media (pointer: coarse) {
  .header-nav-link,
  .article-card,
  .pas-cta,
  a.rounded-lg,
  button:not([class*="min-h-"]) {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .article-card {
    min-height: auto;
    padding: var(--space-8pt-3) var(--space-8pt-4);
  }
}

/* Liens dans le header : zone cliquable suffisante */
.header-nav-link {
  padding: var(--space-8pt-2) var(--space-8pt-2);
}

/* ========== Reduced motion (WCAG 2.3.3) ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .skip-link:focus {
    transition: none;
  }
}

/* ========== Cohérence palette — tout le site n'utilise que les couleurs définies ci-dessus ========== */

/* Texte : blanc → palette */
.text-white {
  color: var(--color-blanc);
}

/* Texte avec opacité : blanc */
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }

/* Texte : verts et rose → vert pâle */
.text-green-200,
.text-green-300,
.text-green-400,
.text-pink-300 {
  color: var(--color-vert-pale);
}

/* Hover texte vert */
.hover\:text-green-300:hover,
.group:hover .group-hover\:text-green-200 {
  color: var(--color-vert-pale);
}

/* Gris de texte → gris pâle */
.text-gray-400,
.text-gray-500 {
  color: var(--color-gris-pale);
}

/* Fill (SVG, logo) → vert pâle */
.fill-green-200 {
  fill: var(--color-vert-pale);
}

/* Bordures : vert pâle (avec opacité si besoin) */
.border-green-200 {
  border-color: var(--color-vert-pale);
}
.border-green-400\/30 { border-color: rgb(187 247 208 / 0.3); }
.border-green-400\/40 { border-color: rgb(187 247 208 / 0.4); }
.hover\:border-green-400\/50:hover { border-color: rgb(187 247 208 / 0.5); }

/* Placeholder : gris pâle */
::placeholder {
  color: var(--color-gris-pale);
  opacity: 0.85;
}

/* Bouton menu mobile (fond clair) : palette */
.dark\:text-gray-400 { color: var(--color-gris-pale); }
.dark\:hover\:text-white:hover { color: var(--color-blanc); }

/* Liens dans le contenu article (corps de texte) */
.content-article a {
  color: var(--color-vert-pale);
  text-decoration: underline;
}
.content-article a:hover,
.content-article a:focus {
  color: var(--color-blanc);
  text-decoration: none;
}

/* ========== Contenu principal : repère de navigation ========== */
#main-content:focus {
  outline: none;
}

#main-content[tabindex="-1"]:focus {
  outline: none;
}

/* ========== Grille 8pt — espacements cohérents (multiples de 8px) ========== */
/* Les sections utilisent déjà px-4 / sm:px-6 / lg:px-8 (16/24/32px = 8pt). */

/* Cartes article : padding en multiples de 8pt */
.article-card {
  padding: var(--space-8pt-3) var(--space-8pt-4);
}

.article-card .article-meta {
  margin-top: var(--space-8pt-2);
}

/* Boutons CTA : zone tactile minimale et padding 8pt */
.pas-cta {
  padding: var(--space-8pt-2) var(--space-8pt-4);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* CTA principal : fond vert pâle, texte sombre (contraste WCAG) */
.pas-cta-primary {
  background-color: var(--color-vert-pale);
  color: #111827;
}
.pas-cta-primary:hover {
  background-color: rgb(167 237 188);
  color: #111827;
}

/* Bloc icône Communauté : fond discret palette */
.pas-icon-box {
  background-color: rgb(187 247 208 / 0.2);
}

/* Pagination : page active (vert pâle palette) */
.pagination-page-active {
  background-color: var(--color-vert-pale);
  color: #111827;
}

/* Catégorie et source dans l’en-tête de l’article : cliquables, palette */
.article-header-meta-link {
  color: var(--color-gris-pale);
  text-decoration: none;
}
.article-header-meta-link:hover,
.article-header-meta-link:focus {
  color: var(--color-vert-pale);
  text-decoration: underline;
}

/* Lien « Source » fiche article : palette uniquement */
.article-source-link {
  background-color: rgb(187 247 208 / 0.2);
  border: 1px solid var(--color-vert-pale);
  color: var(--color-vert-pale);
}
.article-source-link:hover {
  background-color: var(--color-vert-pale);
  color: #111827;
}