/*
Theme Name: SenTur
Theme URI: https://sentur.net
Author: ITSkillsCenter
Author URI: https://itskillscenter.io/
Description: Thème WordPress éditorial premium dédié au blog tech francophone — direction artistique « Encre & Térra » (éditorial sombre sahélien × précision technique). Performant (Core Web Vitals), accessible (WCAG 2.2 AA), sécurisé (2FA email, en-têtes, anti-bruteforce), entièrement pilotable via le Customizer. Conçu pour les développeurs d'Afrique de l'Ouest francophone.
Version: 1.0.1
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sentur
Tags: blog, news, two-columns, right-sidebar, custom-menu, featured-images, translation-ready, dark, editorial, sticky-post, threaded-comments, custom-colors, custom-logo
*/

/* ════════════════════════════════════════════════════════════════════════
   SenTur — FONDATION : couches, tokens (système de design), reset, base.
   Les composants vivent dans assets/css/theme.css.
   Les couleurs --color-* sont surchargées dynamiquement par le Customizer
   (inc/customizer.php → sentur_output_dynamic_css(), wp_head priorité 99).
   ════════════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, layout, components, utilities;

/* ── TOKENS ──────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Palette « Encre & Térra » — mode SOMBRE par défaut (pilotable Customizer) */
    --color-bg:         #14110c; /* encre chaude */
    --color-surface:    #1e1a13;
    --color-surface-2:  #272118;
    --color-text:       #f3ede1; /* ivoire chaud — ≈15:1 sur bg */
    --color-text-muted: #a99f8c; /* ≈7:1 sur bg */
    --accent-base:      #e8743b; /* terracotta brute (Customizer) */
    --accent2-base:     #3ad1c4; /* sarcelle brute (Customizer) */
    --color-accent:     var(--accent-base); /* dérivé — s'assombrit en mode clair */
    --color-accent-2:   var(--accent2-base);
    --color-border:     #322a1e;
    --on-accent:        var(--color-bg); /* texte lisible posé SUR l'accent */

    /* Dérivés perceptuels (color-mix accepte le hex) */
    --accent-strong: color-mix(in oklab, var(--color-accent) 82%, #000);
    --accent-soft:   color-mix(in srgb, var(--color-accent) 14%, transparent);
    --accent2-soft:  color-mix(in srgb, var(--color-accent-2) 14%, transparent);
    --surface-hover: color-mix(in srgb, var(--color-surface) 80%, var(--color-text) 6%);
    --hairline:      color-mix(in srgb, var(--color-text) 11%, transparent);
    --shadow-color:  220 30% 2%;

    /* Familles (surchargées par le Customizer) */
    --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
    --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

    /* Échelle typographique fluide (ratio ≈ 1.28, plus dramatique) — 0 saut au breakpoint */
    --step--2: clamp(0.69rem, 0.66rem + 0.14vw, 0.78rem);
    --step--1: clamp(0.83rem, 0.78rem + 0.24vw, 0.96rem);
    --step-0:  clamp(1.00rem, 0.93rem + 0.34vw, 1.20rem);
    --step-1:  clamp(1.22rem, 1.10rem + 0.58vw, 1.58rem);
    --step-2:  clamp(1.50rem, 1.30rem + 0.95vw, 2.10rem);
    --step-3:  clamp(1.85rem, 1.54rem + 1.45vw, 2.85rem);
    --step-4:  clamp(2.28rem, 1.80rem + 2.30vw, 3.85rem);
    --step-5:  clamp(2.80rem, 2.08rem + 3.45vw, 5.20rem);
    --step-6:  clamp(3.30rem, 2.20rem + 5.20vw, 7.20rem);
    --step-7:  clamp(3.80rem, 1.90rem + 8.60vw, 10.5rem);  /* wordmark / hero brut */

    --leading-tight: 0.98;
    --leading-snug:  1.22;
    --leading-body:  1.72;
    --tracking-tight: -0.025em;
    --tracking-tighter: -0.045em;  /* gros titres éditoriaux */
    --tracking-wide:  0.24em;

    /* Texture & lumière (signature « premium ») */
    --glow: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%);
    --mesh-1: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --mesh-2: color-mix(in srgb, var(--color-accent-2) 10%, transparent);

    /* Espacement (échelle cohérente) */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2.5rem;
    --space-xl:  clamp(3rem, 6vw, 4.5rem);
    --space-2xl: clamp(4.5rem, 9vw, 7rem);
    --space-3xl: clamp(6rem, 12vw, 10rem);

    /* Mouvement (jamais linéaire) */
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 180ms;
    --dur-base: 320ms;
    --dur-slow: 620ms;

    /* Formes & élévation */
    --radius-xs: 6px;
    --radius:    12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px hsl(var(--shadow-color) / 0.3), 0 6px 20px hsl(var(--shadow-color) / 0.22);
    --shadow-2: 0 12px 48px hsl(var(--shadow-color) / 0.4);

    /* Grille & mesures */
    --measure: 70ch;
    --container: 1240px;
    --container-wide: 1400px;
    --gutter: clamp(1.15rem, 5vw, 4rem);
    --nav-height: 68px;

    color-scheme: dark;
    accent-color: var(--color-accent);
  }

  /* ── MODE CLAIR — « Térra clair » (papier chaud) ─────────────────────── */
  :root[data-theme="light"] {
    color-scheme: light;
    --color-bg:         #f6f1e8; /* papier ivoire chaud */
    --color-surface:    #fffdf8; /* cartes, blanc chaud */
    --color-surface-2:  #efe7d8; /* code, surface élevée */
    --color-text:       #1b1712; /* encre chaude — ≈14:1 sur bg */
    --color-text-muted: #6b6051; /* ≈4.8:1 sur bg */
    --color-border:     #e4d9c6;
    /* Accents assombris pour garder le contraste AA sur fond clair (vérifié WCAG) */
    --color-accent:     color-mix(in oklab, var(--accent-base) 72%, #1a0900);
    --color-accent-2:   color-mix(in oklab, var(--accent2-base) 42%, #00302b);
    --on-accent:        #fffaf3; /* texte clair posé sur l'accent */
    --shadow-color:     32 22% 38%;
    --shadow-1: 0 1px 2px hsl(var(--shadow-color) / 0.10), 0 8px 22px hsl(var(--shadow-color) / 0.12);
    --shadow-2: 0 14px 50px hsl(var(--shadow-color) / 0.16);
  }

  @media (min-width: 1024px) {
    :root { --nav-height: 80px; }
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  }
}

/* ── RESET ───────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  body {
    min-height: 100dvh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }
  img, video { height: auto; }
  /* Médias intégrés (YouTube, cartes, tweets…) : jamais plus larges que leur conteneur. */
  iframe, embed, object { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  :where(h1, h2, h3, h4, h5, h6) { font-weight: inherit; }
  p, li, figcaption { text-wrap: pretty; overflow-wrap: break-word; }
  :where(h1, h2, h3, h4) { text-wrap: balance; }
  table { border-collapse: collapse; }
}

/* ── BASE ────────────────────────────────────────────────────────────── */
@layer base {
  /* Garde-fou anti-débordement horizontal au niveau du viewport (mobile).
     `clip` sur <html> est fiable et ne crée pas de conteneur de défilement
     (donc ne casse pas position: sticky), contrairement à overflow:hidden sur <body> seul. */
  html { overflow-x: clip; }
  body {
    position: relative;
    background-color: var(--on-accent);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 400;
    line-height: var(--leading-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* Halo de lumière chaude (mesh) — profondeur, fixe, derrière le contenu */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(120% 80% at 88% -10%, var(--mesh-1), transparent 55%),
      radial-gradient(90% 70% at 0% 8%, var(--mesh-2), transparent 50%),
      radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 60%);
  }

  /* Grain argentique — texture tactile « film », très subtile */
  body::after {
    content: "";
    position: fixed;
    inset: -50%;
    z-index: 2147483646;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    will-change: transform;
  }
  @media (prefers-reduced-motion: no-preference) {
    body::after { animation: grain 6s steps(6) infinite; }
  }
  @keyframes grain {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-4%, 3%); }
    40% { transform: translate(3%, -5%); }
    60% { transform: translate(-3%, 2%); }
    80% { transform: translate(4%, 4%); }
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 580;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-optical-sizing: auto;
  }
  h1 { font-size: var(--step-5); letter-spacing: var(--tracking-tighter); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }

  a {
    color: var(--color-text);
    transition: color var(--dur-fast) var(--ease-out);
  }
  a:hover { color: var(--color-accent); }

  strong, b { font-weight: 650; }
  small { font-size: var(--step--1); }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
    font-feature-settings: "liga" 0;
  }

  ::selection {
    background: var(--color-accent);
    color: var(--on-accent);
  }

  /* Focus visible soigné — jamais d'outline:none nu */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 3px;
  }
  :focus:not(:focus-visible) { outline: none; }

  /* Lien d'évitement — accessibilité clavier */
  .skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 10000;
    background: var(--color-accent);
    color: var(--on-accent);
    padding: 0.7rem 1.25rem;
    font-weight: 600;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .skip-link:focus { transform: translate(-50%, 0); color: var(--on-accent); }

  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--color-bg); }
  ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-pill);
    border: 3px solid var(--color-bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }
}

/* ── UTILITAIRES ─────────────────────────────────────────────────────── */
@layer utilities {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--wide { max-width: var(--container-wide); }

  .flow > * + * { margin-block-start: var(--flow-space, 1em); }

  .screen-reader-text,
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .screen-reader-text:focus {
    position: fixed !important;
    top: 8px; left: 8px;
    width: auto; height: auto;
    clip: auto;
    padding: 0.6rem 1rem;
    background: var(--color-accent);
    color: var(--on-accent);
    z-index: 100000;
    border-radius: var(--radius);
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
  }
}