/*
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, sans lien avec la
	   taille du texte (donc pas en rem), mais délibérément en vw plutôt qu'en px :
	   garde un ratio constant par rapport à la largeur d'écran à toute taille,
	   plutôt qu'un plafond fixe qui ne s'applique qu'au-delà d'un certain seuil
	   (voir CLAUDE.md §6.1). Personnalisable via la page d'options ACF « Réglages
	   du design » → champ max_width (même unité, vw). */
	--component-max-width: 80vw;

	/* 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: 16px;
	--component-radius-lg: 32px;

	/* Couleurs — replis par défaut, personnalisables via Réglages du design (ACF). */
	--component-color-bg: #ffffff;
	--component-color-bg2: #f7f7f8;
	--component-color-primary: #46aae1;
	--component-color-primary-dark: #327aa2;
	--component-color-secondary: #e63946;
	--component-color-dark: #46484d;
	/* 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: #56585f;
	--component-color-text-invert: #ffffff;
	--component-color-meta: #8a8d95;
	--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;
	/* Police des titres (Réglages du design → Typographie des titres, propre à
	   ce site — inc/nawakine/acf-options.php) : reprend la police du texte par
	   défaut tant qu'aucune police de titres dédiée n'est configurée. */
	--component-font-family-heading: var(--component-font-family);
	--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);
}

/* Police des titres, distincte du texte courant (voir --component-font-family-heading
   ci-dessus) : scopée à .component-main plutôt qu'un sélecteur h1..h6 nu au niveau
   racine, pour rester cohérente avec le contrat "aucun sélecteur d'élément nu" des
   fichiers de composants — celui-ci reste le seul endroit du thème qui définit ce
   comportement, une fois pour tous les titres, plutôt que de le dupliquer dans
   chaque composant. */
.component-main h1,
.component-main h2,
.component-main h3,
.component-main h4,
.component-main h5,
.component-main h6 {
	font-family: var(--component-font-family-heading);
}

/* Demande client (2026-08-31) : les h3 du site gardent leur propre taille
   par composant, mais un interlignage resserré à 100% (jamais 1.1/1.2 comme
   les autres niveaux de titre) — évite un espacement vertical excessif sur
   les h3 courts (ex. .component-menu__category-title) qui n'ont pas besoin
   de la même respiration qu'un h1/h2 multi-lignes. */
.component-main h3 {
	line-height: 1;
}

/* 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). Défini une seule fois ici : source unique pour ce nom de
   classe, réutilisée par tous les composants (voir inc/helpers.php du plugin,
   theme_render_link()). */
.component-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 1.5em;
	border: 2px solid transparent;
	border-radius: var(--component-radius);
	background: var(--component-color-primary);
	color: var(--component-color-button-font);
	font-family: var(--component-font-family);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background var(--component-transition), color var(--component-transition), border-color var(--component-transition);
}

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

.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: var(--component-color-bg);
	border-color: var(--component-color-primary);
	color: var(--component-color-primary);
	box-shadow: none;
}

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);
	box-shadow: none;
}

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;
}