/*
Theme Name:  Souffle du Népal
Theme URI:   TODO: à fournir
Description: Thème enfant de Twenty Twenty-Five pour « Souffle du Népal » — programme pilote de méditation guidée et de philosophie pratique. Bilingue FR/EN, thème de blocs (FSE), sans page builder ni JavaScript externe.
Author:      TODO: à fournir
Author URI:  TODO: à fournir
Template:    twentytwentyfive
Version:     0.1.0
Requires at least: 6.7
Tested up to: 6.8
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: souffle-du-nepal
Tags:        blog, one-column, block-patterns, full-site-editing, accessibility-ready, translation-ready
*/

/*
 * ---------------------------------------------------------------------------
 * RÈGLE DU PROJET : aucun jeton de design en dur ici.
 * Toutes les couleurs, tailles, espacements et rayons viennent de theme.json
 * et sont consommés via les propriétés personnalisées --wp--preset--*
 * et --wp--custom--*.
 *
 * Ce fichier ne contient que ce que theme.json ne sait pas exprimer :
 *   1. les états d'interaction (:focus-visible)
 *   2. le comportement typographique long (français 15–20 % plus long)
 *   3. les préférences système (mouvement réduit, contraste forcé)
 * ---------------------------------------------------------------------------
 */

/* --- 1. Focus visible (WCAG 2.1 AA — 2.4.7) ------------------------------ */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brass-deep);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: var(--wp--custom--radius--sm);
}

/* Sur fond sage, le laiton foncé ne contraste pas : on bascule sur le blanc. */
.has-sage-background-color
	:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Le lien d'évitement de Twenty Twenty-Five doit rester lisible une fois révélé. */
.skip-link:focus {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brass-deep);
	outline-offset: var(--wp--custom--focus--offset);
}

/* --- 2. Typographie longue : jamais de largeur fixe ---------------------- */

/*
 * Les titres et libellés français dépassent leurs équivalents anglais de
 * 15 à 20 %. Rien ne doit avoir de largeur ou de hauteur figée : tout
 * s'agrandit vers le bas.
 */

:where(h1, h2, h3, h4, h5, h6),
:where(.wp-block-post-title, .wp-block-site-title) {
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: manual;
	max-width: 100%;
}

:where(p, li, dd, dt, figcaption) {
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* Les boutons s'étirent en hauteur plutôt que de tronquer ou déborder. */
:where(.wp-block-button__link, .wp-element-button, button, input[type="submit"]) {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	min-height: 0;
	white-space: normal;
	text-align: center;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* La navigation passe à la ligne au lieu de déborder horizontalement. */
:where(.wp-block-navigation) {
	flex-wrap: wrap;
}

/*
 * Un élément flex garde par défaut min-width:auto et refuse donc de descendre
 * sous la largeur de son contenu — un max-width posé plus bas dans l'arbre ne
 * s'applique jamais. Dans l'en-tête, la signature mesure 340 px : à 320 px de
 * viewport elle poussait toute la page en défilement horizontal. Autoriser la
 * réduction règle le cas sans figer aucune largeur.
 */
:where(header.wp-block-template-part .wp-block-group) > * {
	min-width: 0;
}

/* --- 3. Préférences système --------------------------------------------- */

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

@media (forced-colors: active) {
	:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
		outline-color: Highlight;
	}

	:where(.wp-block-button__link, .wp-element-button) {
		border: 1px solid ButtonBorder;
	}
}