@import "tailwindcss" source(none);
@plugin "@tailwindcss/typography";
@source "../app";
@source "../components";
@source "../content";
@source "../data";

/* ═══════════════════════════════════════════════════════════════════════════
   Orange de marque — source unique de vérité
   ═══════════════════════════════════════════════════════════════════════════

   Le site utilisait sept oranges differents : ff6b2b (54x), ea580c (37x),
   f97316 (9x), c2410c (4x), fb923c (2x), e55a1f (1x) et rgba(255,167,86)
   (12x), en plus de toute l'echelle Tailwind. Chaque composant reinventait sa
   nuance. (Codes ecrits sans # : ce commentaire ne doit pas etre attrape par
   un futur sweep de couleurs.)

   Tout ce qui est « orange de marque » vaut désormais #ea580c, la valeur déjà
   utilisée par cookieconsent (--cc-btn-primary-bg).

   Le levier est le token Tailwind lui-même : on redéfinit orange-600 et
   orange-700 sur #ea580c. Les 117 `text-orange-700`, les `bg-orange-700` et
   les `bg-orange-600` du site basculent sans toucher une seule classe.

   orange-600 valait DÉJÀ #ea580c — mais exprimé en `oklch()`. Le redéclarer en
   hexadécimal n'est pas cosmétique : sur un écran large gamut (P3), la version
   oklch rend plus saturée que l'hex, donc `bg-orange-600` et `text-orange-700`
   ne tombaient pas exactement sur la même couleur. Les deux sont désormais
   littéralement la même valeur, dans le même espace colorimétrique.

   PÉRIMÈTRE — orange-500 et en dessous ne sont PAS touchés : ils servent de
   nuances (anneaux de focus, bordures, extrémité claire des dégradés). Les
   aplatir viderait de leur sens les 11 dégradés `from-orange-500 to-orange-600`.

   ⚠️ Contraste : #ea580c donne 3,56:1, sous le seuil WCAG AA de 4,5:1 — aussi
   bien en texte sur blanc qu'en texte blanc sur fond orange. Choix produit
   assumé (arbitrage du 2026-07-30). Les états de survol descendent à
   orange-800 (#9a3412, 7,31:1) : ils restent visibles ET accessibles.        */

@theme {
  --color-orange-600: #ea580c;
  --color-orange-700: #ea580c;

  /* ─────────────────────────────────────────────────────────────────────────
     Tokens shadcn/ui — ils n'avaient JAMAIS été définis.
     Les composants de `components/ui/` les référencent (bg-background,
     text-muted-foreground, ring-ring, border-input…), mais en Tailwind v4 la
     classe `bg-background` résout `--color-background`, pas la variable
     `--background` déclarée plus bas dans `:root`. Résultat : ces utilitaires
     ne produisaient aucune couleur — le panneau de la modale s'affichait
     transparent. Le défaut était latent, aucun de ces composants n'ayant servi
     jusqu'ici.
     Valeurs alignées sur la charte réelle du site : blanc, slate, orange.
     ───────────────────────────────────────────────────────────────────────── */
  --color-background: #ffffff;
  --color-foreground: #171717;
  --color-border: #e2e8f0; /* slate-200 */
  --color-input: #cbd5e1; /* slate-300 */
  --color-ring: #ea580c; /* orange de marque, pour les anneaux de focus */
  --color-muted: #f1f5f9; /* slate-100 */
  --color-muted-foreground: #64748b; /* slate-500 */
  --color-accent: #f1f5f9;
  --color-accent-foreground: #0f172a; /* slate-900 */
  --color-popover: #ffffff;
  --color-popover-foreground: #171717;
}

:root {
  --background: #ffffff;
  --foreground: #171717;

  /* Alias explicite pour les usages hors utilitaires Tailwind (styles inline,
     SVG, composants tiers). Même valeur, un seul endroit à changer. */
  --acieb-orange: #ea580c;
  --acieb-orange-hover: #9a3412;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #ffffff;
    --foreground: #171717;
  }
}

/* scroll-behavior: smooth removed - breaks Next.js navigation scroll-to-top */

/* Réserve la gouttière de scrollbar → pas de saut horizontal entre pages
   qui débordent verticalement et pages qui ne débordent pas (perf/CLS). */
html {
  scrollbar-gutter: stable;
}

/* Transitions de navigation natives (progressive enhancement, ignoré si non
   supporté ; respecte prefers-reduced-motion via le bloc plus bas). */
@view-transition {
  navigation: auto;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Accessibilité — focus clavier visible + prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* Indicateur de focus clavier global (WCAG 2.4.7) — absent jusqu'ici */
:focus-visible {
  outline: 2px solid var(--acieb-orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect du réglage système (WCAG 2.3.3) : coupe animations/transitions */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* État de validation natif des formulaires via CSS state selectors (sans JS) :
   feedback instantané après interaction utilisateur. */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  outline: 2px solid #dc2626;
  outline-offset: 1px;
}

/* Visibility-aware rendering : le footer (toujours hors écran au chargement)
   ne consomme ni layout ni paint tant qu'on n'a pas scrollé jusqu'à lui. */
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CookieConsent - Thème Acieb Orange
   ═══════════════════════════════════════════════════════════════════════════ */
#cc-main {
  --cc-font-family: inherit;
  --cc-btn-primary-bg: var(--acieb-orange);
  --cc-btn-primary-border-color: var(--acieb-orange);
  --cc-btn-primary-hover-bg: var(--acieb-orange-hover);
  --cc-btn-primary-hover-border-color: var(--acieb-orange-hover);
  --cc-toggle-on-bg: var(--acieb-orange);
  --cc-btn-border-radius: 0.375rem;
  --cc-modal-border-radius: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tailwind Typography - Configuration optimisée 2025
   @see https://tailwindcss.com/docs/typography-plugin
   ═══════════════════════════════════════════════════════════════════════════ */

@layer components {
  /* ─────────────────────────────────────────────────────────────────────────
     Variables de couleur prose - Design System Acieb
     ───────────────────────────────────────────────────────────────────────── */
  .prose {
    /* Corps de texte */
    --tw-prose-body: theme(colors.gray.700);
    --tw-prose-headings: theme(colors.gray.900);
    --tw-prose-bold: theme(colors.gray.900);

    /* Liens - orange-800 pour contraste WCAG AA (ratio 4.5:1+) */
    --tw-prose-links: theme(colors.orange.800);

    /* Citations et listes */
    --tw-prose-quotes: theme(colors.gray.700);
    --tw-prose-quote-borders: theme(colors.orange.500);
    --tw-prose-counters: theme(colors.gray.600);
    --tw-prose-bullets: theme(colors.orange.500);

    /* Éléments structurels */
    --tw-prose-hr: theme(colors.gray.200);
    --tw-prose-th-borders: theme(colors.gray.300);
    --tw-prose-td-borders: theme(colors.gray.200);
    --tw-prose-captions: theme(colors.gray.500);

    /* Code inline */
    --tw-prose-code: theme(colors.gray.800);
    --tw-prose-pre-bg: theme(colors.gray.900);
    --tw-prose-pre-code: theme(colors.gray.100);
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Liens - Accessibilité WCAG 2.1 (underline par défaut + focus visible)
     ───────────────────────────────────────────────────────────────────────── */
  .prose a {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: theme(colors.orange.300);
    transition: all 0.15s ease;
  }

  .prose a:hover {
    color: theme(colors.orange.600);
    text-decoration-color: theme(colors.orange.600);
  }

  .prose a:focus {
    outline: 2px solid theme(colors.orange.500);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Headings - scroll-margin pour navigation TOC avec header fixe
     ───────────────────────────────────────────────────────────────────────── */
  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    scroll-margin-top: 7rem;
    letter-spacing: -0.025em;
  }

  .prose h2 {
    margin-top: 2.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid theme(colors.gray.100);
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Paragraphes et listes - Lisibilité optimale
     ───────────────────────────────────────────────────────────────────────── */
  .prose p {
    line-height: 1.75;
  }

  .prose li {
    line-height: 1.75;
  }

  .prose ul > li::marker {
    color: theme(colors.orange.500);
  }

  .prose ol > li::marker {
    color: theme(colors.gray.600);
    font-weight: 600;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Blockquotes - Style distinctif
     ───────────────────────────────────────────────────────────────────────── */
  .prose blockquote {
    border-left-width: 4px;
    border-left-color: theme(colors.orange.500);
    background-color: theme(colors.orange.50);
    padding: 1rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: normal;
  }

  .prose blockquote p {
    margin: 0;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Code inline - Style amélioré
     ───────────────────────────────────────────────────────────────────────── */
  .prose code:not(pre code) {
    background-color: theme(colors.gray.100);
    padding: 0.2em 0.4em;
    border-radius: 0.375rem;
    font-size: 0.875em;
    font-weight: 500;
  }

  .prose code::before,
  .prose code::after {
    content: none;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Images - Coins arrondis et espacement
     ───────────────────────────────────────────────────────────────────────── */
  .prose img {
    border-radius: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .prose figure {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .prose figcaption {
    text-align: center;
    font-style: italic;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Tables - Style amélioré
     ───────────────────────────────────────────────────────────────────────── */
  .prose table {
    width: 100%;
    border-collapse: collapse;
  }

  .prose thead th {
    background-color: theme(colors.gray.50);
    font-weight: 600;
  }

  .prose tbody tr:nth-child(even) {
    background-color: theme(colors.gray.50);
  }
}