/* DM Sans (Google Fonts via next/font) : geometrique, a/e/o nettement ronds.
   Tranche visiblement avec Cabinet Grotesk / Inter / Manrope qui sont des
   sans-serif neutres tous proches les uns des autres. */
@import "tailwindcss";

/* ============================================================================
 * DESIGN SYSTEM NOVELIA · 3 couches
 * --------------------------------------------------------------------------
 * LAYER 1 (PRIMITIVES) · palette brute (stone-50→950, amber-50→900, paper).
 *   → Usage RESERVE a globals.css : ne jamais reutiliser dans le feature code.
 * LAYER 2 (SEMANTIC) · alias metiers (background, surface, text, accent…).
 *   → Couche normale de consommation cote features.
 * LAYER 3 (COMPONENT) · tokens specifiques composants (shadows CTA, navbar…).
 *   → Consommes via Tailwind arbitrary values `bg-[var(--shadow-cta)]`.
 *
 * Regle d'or : si tu vois `bg-stone-900/[0.04]` ou `text-[10px]` dans une
 * page ou un composant feature, c'est un escape hatch. Il existe un token,
 * ajoute-le ou utilise-le.
 * ============================================================================ */

@theme {
  /* =========================================================================
   * LAYER 1 · PRIMITIVES (palette brute, jamais consommee en feature code)
   * ========================================================================= */

  /* Stone (warm neutres) · echelle 50 → 950 */
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #6b6560;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;

  /* Amber (accent signature) · echelle 50 → 900 */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;

  /* Creme papier d'atelier : fond global legerement chaud, cards en blanc
     pur pour un contraste subtil qui structure la hierarchie sans bordures
     lourdes. */
  --color-paper: #faf7f2;
  --color-paper-2: #f3ede2;
  --color-paper-3: #e8e0d1;


  /* =========================================================================
   * LAYER 2 · SEMANTIC (alias metiers consommables partout)
   * ========================================================================= */

  /* Polices */
  --font-sans: var(--font-sans-base), "DM Sans", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-fraunces), "Source Serif Pro", Georgia, serif;

  /* Surfaces (palette claire, fond creme + cards blanches) */
  --color-background: var(--color-paper);
  --color-surface: #ffffff;
  --color-surface-2: var(--color-paper-2);
  --color-surface-3: var(--color-paper-3);

  /* Textes */
  --color-text: var(--color-stone-900);
  --color-text-muted: var(--color-stone-700);
  --color-text-dim: var(--color-stone-500);
  /* faint releve a #8d847e pour creer un vrai stop visible vs dim (audit
     minimalist-skill : delta < 12 unites lab entre les 2 anciennes valeurs). */
  --color-text-faint: #8d847e;

  /* Bordures hairline en stone-900 transparent (warm, jamais gris froid).
     border-strong releve a 0.18 pour contraste AA borderline sur surfaces
     papier creme (audit ui-ux-pro-max). */
  --color-border: rgba(28, 25, 23, 0.08);
  --color-border-strong: rgba(28, 25, 23, 0.18);

  /* Accent bronze profond : version dense de l'amber, lisible sur fond creme
     (contraste AA sur les CTA), conserve la continuite avec l'identite doree. */
  --color-accent: var(--color-amber-800);
  --color-accent-hi: var(--color-amber-700);
  --color-accent-lo: var(--color-amber-900);
  --color-accent-fg: #ffffff;
  --color-accent-soft: rgba(146, 64, 14, 0.08);
  /* Bordure accent visible mais sobre sur creme (vs accent/25 borderline). */
  --color-accent-border: rgba(146, 64, 14, 0.40);

  /* Etats semantiques, ajustes pour contraste sur fond clair. */
  --color-success: #15803d;
  --color-success-soft: rgba(21, 128, 61, 0.10);
  --color-warning: #b45309;
  --color-warning-soft: rgba(180, 83, 9, 0.10);
  --color-danger: #b91c1c;
  --color-danger-soft: rgba(185, 28, 28, 0.10);
  --color-info: #1d4ed8;
  --color-info-soft: rgba(29, 78, 216, 0.10);

  /* Charts (warm-friendly), densifies pour lisibilite sur fond clair. */
  --color-chart-1: var(--color-amber-800);
  --color-chart-2: #c2410c;
  --color-chart-3: #92400e;
  --color-chart-4: #4d7c5f;
  --color-chart-5: #9f1239;

  /* Typographie : echelle stricte. text-micro ajoute pour eviter `text-[10px]`
     hors echelle dispersé dans 14+ fichiers (audit design-system). */
  --text-micro: 0.625rem;   /* 10px : meta, dot-labels, status-bar mockups */
  --text-xxs: 0.6875rem;    /* 11px : eyebrow uppercase, deltas */
  --text-xs: 0.75rem;       /* 12px : labels, mentions legales */
  --text-sm: 0.875rem;      /* 14px : body sm, captions */
  --text-base: 1rem;        /* 16px : body */
  --text-lg: 1.125rem;      /* 18px : body lg */
  --text-xl: 1.25rem;       /* 20px : sub-h */
  --text-2xl: 1.5rem;       /* 24px : h3 */
  --text-3xl: 1.875rem;     /* 30px : h2 minor */
  --text-4xl: 2.25rem;      /* 36px : h2 */
  --text-5xl: 3rem;         /* 48px : h1 minor / display sm */
  --text-6xl: 3.75rem;      /* 60px : display md */
  --text-7xl: 4.5rem;       /* 72px : display lg */
  --text-8xl: 6rem;         /* 96px : hero display (accueil reserve) */

  --tracking-tight: -0.02em;

  /* Radii */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-pill: 9999px;
  --radius-full: 9999px;
  --radius-card: 0.75rem;

  /* Shadows stratifiees, teintees warm tres allegees pour fond clair. Le clair
     ne pardonne pas les ombres lourdes : diffusions douces qui suggerent
     l'epaisseur sans crier. */
  --shadow-xs: 0 1px 2px 0 rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(28, 25, 23, 0.06), 0 1px 2px -1px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 12px -4px rgba(28, 25, 23, 0.08), 0 2px 4px -2px rgba(28, 25, 23, 0.05);
  --shadow-lg: 0 12px 28px -8px rgba(28, 25, 23, 0.12), 0 4px 12px -4px rgba(28, 25, 23, 0.07);
  --shadow-xl: 0 24px 48px -16px rgba(28, 25, 23, 0.16), 0 8px 16px -4px rgba(28, 25, 23, 0.08);

  /* Touch target minimum (mobile, WCAG) */
  --touch-min: 2.75rem;


  /* =========================================================================
   * LAYER 3 · COMPONENT (tokens specifiques composants recurrents)
   * Consommes via `shadow-[var(--shadow-cta)]` ou equivalent.
   * Ajoutes pour purger les `shadow-[0_X_Y_rgba()]` inline (audit design-system).
   * ========================================================================= */

  /* CTA primary : 2-state stack (soft = idle, hi = hover). Consomme par Button. */
  --shadow-accent-soft: 0 0 0 1px rgba(146, 64, 14, 0.25), 0 4px 16px -8px rgba(146, 64, 14, 0.35);
  --shadow-accent-hi: 0 0 0 1px rgba(146, 64, 14, 0.40), 0 12px 28px -8px rgba(146, 64, 14, 0.45);

  /* Navbar pill flottante (marketing) : signature visuelle sticky. */
  --shadow-navbar-float: 0 8px 24px -8px rgba(28, 25, 23, 0.12), 0 2px 6px -2px rgba(28, 25, 23, 0.06);

  /* Mockup smartphone (pages expertises) : ombre legere pour detacher l'objet
     du fond papier sans creer de halo dark-SaaS. */
  --shadow-phone-mockup: 0 20px 40px -12px rgba(28, 25, 23, 0.16);

  /* Card hover : leger soulevement sur les cards interactives. */
  --shadow-card-hover: 0 8px 20px -6px rgba(28, 25, 23, 0.10);
}

@layer base {
  html {
    color-scheme: light;
    /* Smooth scroll natif pour les ancres internes (respecte prefers-reduced-motion). */
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "ss02", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Évite les tremblements de layout liés aux orphelins typographiques sur les paragraphes. */
    text-wrap: pretty;
  }
  /* Display headings : équilibre les coupures de ligne pour casser les orphelins. */
  h1, h2, h3, h4 {
    text-wrap: balance;
  }
  /* Chiffres en tabular figures par défaut, plus propre pour les KPI et tables. */
  .tabular-nums,
  [data-tabular],
  table td,
  table th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
  /* Focus visible uniforme. */
  *:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  ::selection {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
  }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(28, 25, 23, 0.12);
    border-radius: 8px;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(28, 25, 23, 0.22); }
}

@layer components {
  /* Grain texture papier d'atelier, posé en overlay fixe sur le marketing pour
     casser la planéité numérique et porter la signature « papier scanné ».
     Bumped à 0.12 (était 0.05, invisible sur crème) avec une seconde octave
     pour densifier la texture. Si trop visible, baisser à 0.09. */
  .grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.12;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.27 0 0 0 0 0.20 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 300px 300px;
  }
  /* Variante locale : texture papier appliquée à un container (card, panel
     éditorial). Mix-blend overlay pour respecter la couleur de fond du parent. */
  .paper-card {
    position: relative;
    isolation: isolate;
  }
  .paper-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    border-radius: inherit;
    z-index: 0;
  }
  .paper-card > * {
    position: relative;
    z-index: 1;
  }
  .panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .panel-elev {
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .hairline-x { border-top: 1px solid var(--color-border); }
  .accent-glow {
    box-shadow:
      0 0 0 1px rgba(146, 64, 14, 0.20),
      0 12px 40px -12px rgba(146, 64, 14, 0.30);
  }
  .font-editorial {
    font-family: var(--font-display);
    font-feature-settings: "ss01", "ss02";
    letter-spacing: -0.015em;
  }
  .input-ring:focus-visible {
    outline: none;
    border-color: rgba(146, 64, 14, 0.55);
    box-shadow: 0 0 0 3px rgba(146, 64, 14, 0.15);
  }
  /* Skip to content : caché par défaut, visible au focus clavier. Accessibilité. */
  .skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.625rem 1rem;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    transform: translateY(-150%);
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms ease;
  }
  .skip-link:focus-visible {
    transform: translateY(0);
    box-shadow: 0 8px 24px -8px rgba(146, 64, 14, 0.45);
    outline: none;
  }
}