/*
Theme Name:   Nawakine
Theme URI:    https://n.nawakine.ch/
Description:  Thème sur-mesure — architecture de composants ACF Flexible Content (ACF PRO + plugin Nawakine Component Engine requis).
Author:       Agence
Version:      1.0.0
Requires PHP: 7.4
Requires at least: 6.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  theme
*/

/* --------------------------------------------------------------------------
   Design tokens partagés par tous les composants.
   Toujours préfixés --component-* pour éviter toute collision de classes.

   IMPORTANT : ces tokens ne définissent JAMAIS de couleur ou de police en dur
   dans un composant (voir CLAUDE.md §6.1). Les valeurs ci-dessous sont les
   replis par défaut ; elles sont personnalisables sans toucher au code via la
   page d'options ACF « Réglages du design » (inc/nawakine/acf-options.php), dont
   les valeurs sont injectées dans un <style id="theme-design-tokens"> en
   wp_head qui surcharge ce bloc :root.
   -------------------------------------------------------------------------- */
html {
	/* Base explicite pour les unités rem (1rem = 16px par défaut). "100%" reprend
	   la taille définie par le navigateur/l'OS de l'utilisateur, donc respecte ses
	   réglages d'accessibilité — ne jamais fixer une valeur en dur ici (ex. 62.5%). */
	font-size: 100%;
}

:root {
	/* Largeur maximale du conteneur de contenu — géométrie fixe, sans lien avec la
	   taille du texte, volontairement en px (voir CLAUDE.md §6.1). */
	--component-max-width: 1560px;

	/* Espacements au contact du texte : en rem pour suivre la taille de police du
	   visiteur (accessibilité — reflow/zoom texte), contrairement au radius ci-dessous
	   qui est une géométrie décorative indépendante du texte. */
	--component-gutter: 1.5rem;
	--component-space-compact: 2rem;
	--component-space-normal: 4rem;
	--component-space-large: 7rem;

	--component-radius: 8px;
	--component-radius-lg: 16px;

	/* Couleurs — replis par défaut, personnalisables via Réglages du design (ACF). */
	--component-color-bg: #ffffff;
	--component-color-bg2: #f7f7f8;
	--component-color-primary: #2563eb;
	--component-color-primary-dark: #1d4ed8;
	--component-color-secondary: #64748b;
	--component-color-dark: #111827;
	/* Fond des variantes "--theme-dark" d'un composant (hero, bandeau CTA, chiffres
	   clés, slider) : sciemment distinct de --component-color-dark (couleur des
	   titres). En mode sombre automatique, --component-color-dark est éclairci
	   pour rester lisible sur fond sombre — s'il servait aussi de fond à ces
	   variantes "toujours sombres", ce même éclaircissement les rendrait illisibles
	   (fond clair, texte clair). Volontairement JAMAIS surchargé par le mode
	   sombre : un bloc réglé en thème sombre par son auteur reste sombre, que le
	   site soit en mode clair ou sombre. */
	--component-color-surface-dark: #111827;
	--component-color-light: #ffffff;
	--component-color-text: #374151;
	--component-color-text-invert: #ffffff;
	--component-color-meta: #6b7280;
	--component-color-muted: #f3f4f6;
	--component-color-border: #e5e7eb;
	--component-color-button-font: #ffffff;

	/* Typographie — replis par défaut, personnalisables via Réglages du design (ACF).
	   Tailles en rem (base 1rem = 16px, taille par défaut du navigateur) plutôt qu'en
	   px : contrairement au px, le rem respecte les réglages d'accessibilité du visiteur
	   (taille de police système, zoom texte navigateur) — voir CLAUDE.md §6.1. */
	--component-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--component-font-size-text: 1rem;
	--component-font-size-h1: 2.5rem;
	--component-font-size-h2: 2rem;
	--component-font-size-h3: 1.5rem;
	--component-font-size-h4: 1.25rem;
	--component-font-size-h5: 1.125rem;
	--component-font-size-h6: 1rem;

	--component-transition: 0.25s ease;
	--component-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* Conteneur interne commun. */
.component-inner {
	width: 100%;
	max-width: var(--component-max-width);
	margin: 0 auto;
	padding-left: var(--component-gutter);
	padding-right: var(--component-gutter);
	box-sizing: border-box;
}

/* Wrapper principal du template flexible. */
.component-main {
	display: block;
	width: 100%;
	font-family: var(--component-font-family);
}

/* Boutons génériques des composants (jamais .button, trop générique).
   Couleur de texte : --component-color-button-font (réglage « Texte des
   boutons » des Réglages du design) — jamais --component-color-light, qui
   est un token de surface indépendant, pas la couleur de texte des boutons
   (voir CLAUDE.md/OVERRIDES.md). */
.component-button {
	display: inline-block;
	padding: 14px 28px;
	border: 2px solid transparent;
	border-radius: var(--component-radius);
	background: var(--component-color-primary);
	color: var(--component-color-button-font);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background var(--component-transition), color var(--component-transition), border-color var(--component-transition), transform var(--component-transition);
}

.component-button:hover,
.component-button:focus {
	background: var(--component-color-primary-dark);
	color: var(--component-color-button-font);
	transform: translateY(-1px);
}

.component-button:focus-visible {
	outline: 3px solid var(--component-color-primary);
	outline-offset: 3px;
}

/* Style des boutons (réglage « Style des boutons » des Réglages du design,
   voir plugin inc/design-tokens.php) : classe posée sur <body>, consommée
   ici pour que TOUT bouton du site (présent ou futur) en hérite sans
   qu'aucun composant n'ait à connaître ce réglage. */
body.nk-buttons-outline .component-button {
	background: transparent;
	border-color: var(--component-color-primary);
	color: var(--component-color-primary);
}

body.nk-buttons-outline .component-button:hover,
body.nk-buttons-outline .component-button:focus {
	background: var(--component-color-primary);
	border-color: var(--component-color-primary);
	color: var(--component-color-button-font);
}

body.nk-buttons-ghost .component-button {
	background: transparent;
	padding-left: 4px;
	padding-right: 4px;
	color: var(--component-color-primary);
}

body.nk-buttons-ghost .component-button:hover,
body.nk-buttons-ghost .component-button:focus {
	background: transparent;
	color: var(--component-color-primary-dark);
	text-decoration: underline;
	transform: none;
}

/* Réduction des animations (réglage des Réglages du design) : --component-transition
   est déjà forcé à 0s côté injection wp_head, cette règle coupe en plus les
   animations au défilement (Scroll-Driven Animations, voir plugin
   assets/css/animations.css) que la variable seule ne couvre pas. */
body.nk-no-animations,
body.nk-no-animations * {
	animation: none !important;
	scroll-timeline: none !important;
}

.component-image {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Utilitaire d'accessibilité (texte réservé aux lecteurs d'écran). */
.component-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}