/**
 * Jetons de design — direction artistique V5 (blanc / noir / CMJN), calibrée
 * sur la maquette de référence Claude Design (references/Netcreation Accueil
 * v5.dc.html), qui pilote elle-même son texte courant, ses CTA et sa
 * navigation de façon fluide (unités cqw) et pas seulement ses titres.
 *
 * Système typographique responsive :
 * - Les titres (nc-heading, nombres et libellés décoratifs) restent fluides
 *   avec clamp(), bornes exprimées en rem, et croissent fortement entre 390
 *   et 2560 px : c'est ce contraste avec le texte courant qui porte la
 *   hiérarchie éditoriale.
 * - Le texte courant (paragraphes, CTA, navigation) suit une échelle fluide
 *   contrôlée — `clamp(plancherRem, baseRem + Xvw, plafondRem)` — qui reste
 *   lisible dès 390px (planchers ≥ 14px) et regagne, sur grand écran, la
 *   présence de la référence, sans jamais redescendre en dessous de son
 *   plancher ni dépendre du vw comme seul moteur. Le responsive réorganise
 *   la mise en page (réordonnancement, retour à la ligne, hauteur de bloc
 *   variable) ; il ne miniaturise pas les caractères, et il ne doit pas non
 *   plus aplatir la puissance visuelle du grand écran.
 * - Les tailles proches de 12–13 px restent réservées aux véritables
 *   métadonnées (libellés mono, index) et n'ont pas vocation à grandir.
 */
:root {
  /* Couleurs */
  --nc-noir: #0A0A0A;
  --nc-blanc: #ffffff;
  --nc-cyan: #00AEEF;
  --nc-magenta: #E5007D;
  --nc-jaune: #FFE500;
  --nc-jaune-texte: #B39C00;
  --nc-cyan-texte-fonce: #083c4f;

  /* Violet flash — repère de la navigation générale du menu mobile
     (Réalisations, Blog, À propos). Volontairement distinct des trois
     couleurs de pôle (cyan, jaune, magenta) et lisible sur fond noir. */
  --nc-violet: #9B7CFF;

  /* Violet des « pages violettes » (AGENTS.md) — couleur dominante d'une
     famille de page distincte, foncée/intense/lumineuse. Sans rapport avec
     --nc-violet ci-dessus (usage différent, ne jamais fusionner). Première
     proposition, ajustable après contrôle visuel. */
  --nc-violet-page: #5A20D6;

  --nc-gris-900: #131313;
  --nc-gris-850: #181818;
  --nc-gris-800: #262626;
  --nc-gris-750: #2a2a2a;
  --nc-gris-700: #333333;
  --nc-gris-600: #4a4a4a;
  --nc-gris-550: #5a5a5a;
  --nc-gris-500: #6a6a6a;
  --nc-gris-450: #8a8a8a;
  --nc-gris-400: #b0b0b0;
  --nc-gris-300: #dcdcdc;
  --nc-gris-250: #e0e0e0;
  --nc-gris-200: #e6e6e6;

  /* Typographies */
  --nc-police-texte: Archivo, system-ui, sans-serif;
  --nc-police-titre: 'Archivo Black', var(--nc-police-texte);
  --nc-police-italique: 'Instrument Serif', Georgia, serif;
  --nc-police-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Rythme / bordures */
  --nc-bordure: 1px solid var(--nc-noir);
  --nc-transition-rapide: .22s ease;
  --nc-transition-douce: .5s cubic-bezier(.2,.7,.2,1);

  /* Espacements de section (fluides) */
  --nc-pad-inline: clamp(14px, 2vw, 56px);
  --nc-pad-section-sm: clamp(18px, 1.9vw, 44px);
  --nc-pad-section-md: clamp(24px, 2.4vw, 60px);
  --nc-pad-section-lg: clamp(32px, 3.4vw, 84px);
  --nc-pad-section-xl: clamp(38px, 4vw, 104px);

  /* Échelle typographique du texte courant. Métadonnées : fixes, en rem.
     Tout le reste : fluide et contrôlé (rem de base + incrément vw modeste,
     borné en rem), pour regagner ~16px→20px selon la largeur au lieu de
     rester plat. */
  --nc-text-meta: 0.8125rem;      /* ≈13px, fixe — métadonnées, libellés mono */
  --nc-text-xs: 0.875rem;         /* ≈14px, fixe — légendes courtes, connecteurs */

  --nc-text-secondary: clamp(0.9375rem, 0.88rem + 0.22vw, 1.125rem); /* 15→18px — texte secondaire atténué */
  --nc-text-body:      clamp(1rem,      0.93rem + 0.26vw, 1.25rem);  /* 16→20px — paragraphe courant, description */
  --nc-text-nav:        clamp(0.875rem, 0.8rem  + 0.5vw,  1.125rem); /* 14→18px — liens de navigation */
  --nc-text-chip:       clamp(0.875rem, 0.8rem  + 0.4vw,  1.0625rem);/* 14→17px — puces/étiquettes sur visuel */
  --nc-text-cta:        clamp(1rem,     0.9rem  + 0.55vw, 1.375rem); /* 16→22px — CTA et liens d'action principaux */
  --nc-text-lead:       clamp(1.125rem, 0.95rem + 0.9vw,  1.875rem); /* 18→30px — accroche courte (hero) */

  /* Largeur de lecture confortable pour un paragraphe de texte courant */
  --nc-mesure: 70ch;

  /* Titres d'articles (accordéon du teaser Blog) : la hiérarchie éditoriale
     leur donne davantage de présence que les autres liens de la page.
     ~15px en mobile, ~19px à 1366px, ~23px à 1920px, plafond 26px. */
  --nc-text-blog-title: clamp(0.9375rem, 0.571rem + 0.722vw, 1.625rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nc-transition-rapide: 0s;
    --nc-transition-douce: 0s;
  }
}