/*
Theme Name: Oniti Base
Description: Thème parent des sites Gutenberg Oniti : gabarits, styles de blocs, outils et méthode. Ne pas modifier dans un site : surcharger dans le thème enfant.
Author: Oniti
Version: 0.1.0
Requires at least: 6.8
Requires PHP: 8.1
Text Domain: oniti-base
*/

/*
 * Paliers (docs/adrs/2026-10-28-grilles-et-paliers.md) :
 *   mobile    < 600 px    (seuil natif du menu burger)
 *   tablette  600–1023 px
 *   portable  1024–1439 px
 *   PC        ≥ 1440 px   (contenu figé à wideSize, theme.json)
 * Classes du thème parent : préfixe oniti-. Classes propres au site : préfixe du site.
 * Couleurs : uniquement les rôles var(--wp--custom--couleur--…) de theme.json, jamais la palette
 * (propre à chaque site). Rayon : var(--wp--custom--rayon).
 */

/*
 * Espacements xs → xxl (theme.json) : une valeur par palier, réglée dans custom.espace de
 * theme.json (le site ne déclare que ce qui change). Sans valeur tablette ou mobile, une
 * taille garde celle du palier au-dessus.
 */
:root {
	--oniti-espace-xs: var(--wp--custom--espace--xs--bureau);
	--oniti-espace-s: var(--wp--custom--espace--s--bureau);
	--oniti-espace-m: var(--wp--custom--espace--m--bureau);
	--oniti-espace-l: var(--wp--custom--espace--l--bureau);
	--oniti-espace-xl: var(--wp--custom--espace--xl--bureau);
	--oniti-espace-xxl: var(--wp--custom--espace--xxl--bureau);
}
@media (width < 1024px) {
	:root {
		--oniti-espace-xs: var(--wp--custom--espace--xs--tablette, var(--wp--custom--espace--xs--bureau));
		--oniti-espace-s: var(--wp--custom--espace--s--tablette, var(--wp--custom--espace--s--bureau));
		--oniti-espace-m: var(--wp--custom--espace--m--tablette, var(--wp--custom--espace--m--bureau));
		--oniti-espace-l: var(--wp--custom--espace--l--tablette, var(--wp--custom--espace--l--bureau));
		--oniti-espace-xl: var(--wp--custom--espace--xl--tablette, var(--wp--custom--espace--xl--bureau));
		--oniti-espace-xxl: var(--wp--custom--espace--xxl--tablette, var(--wp--custom--espace--xxl--bureau));
	}
}
@media (width < 600px) {
	:root {
		--oniti-espace-xs: var(--wp--custom--espace--xs--mobile, var(--wp--custom--espace--xs--tablette, var(--wp--custom--espace--xs--bureau)));
		--oniti-espace-s: var(--wp--custom--espace--s--mobile, var(--wp--custom--espace--s--tablette, var(--wp--custom--espace--s--bureau)));
		--oniti-espace-m: var(--wp--custom--espace--m--mobile, var(--wp--custom--espace--m--tablette, var(--wp--custom--espace--m--bureau)));
		--oniti-espace-l: var(--wp--custom--espace--l--mobile, var(--wp--custom--espace--l--tablette, var(--wp--custom--espace--l--bureau)));
		--oniti-espace-xl: var(--wp--custom--espace--xl--mobile, var(--wp--custom--espace--xl--tablette, var(--wp--custom--espace--xl--bureau)));
		--oniti-espace-xxl: var(--wp--custom--espace--xxl--mobile, var(--wp--custom--espace--xxl--tablette, var(--wp--custom--espace--xxl--bureau)));
	}
}

/* Pas d'espace entre en-tête, contenu et pied : chaque section porte ses marges. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Étiquette : petit libellé au-dessus d'un titre. */
.is-style-etiquette {
	display: inline-block;
	padding: 0.35em 0.6em;
	border-radius: var(--wp--custom--rayon);
	background: var(--wp--custom--couleur--fond-alterne);
	font-size: var(--wp--preset--font-size--p-xs);
	font-weight: 500;
	line-height: 1;
}
.is-style-etiquette.has-text-align-center { display: table; margin-inline: auto; }

/* Carte : bordure fine, coins arrondis. */
.is-style-carte {
	border: 1px solid var(--wp--custom--couleur--bordure);
	border-radius: var(--wp--custom--rayon);
	overflow: hidden;
}
/* overflow: hidden rognerait le contour de focus d'un lien posé au bord de la carte. */
.is-style-carte :focus-visible { outline-offset: -3px; }

/*
 * Carte cliquable (style d'oniti-core, présent dans chaque site) : oniti-core fournit le lien
 * étendu à la carte, le curseur et le contour de focus ; le parent fournit l'apparence de
 * carte et l'effet de survol, pour que toute carte cliquable en ait un
 * (docs/adrs/2026-10-29-cartes-cliquables.md). Un site règle l'effet par les variables, sur
 * :root : une carte simple qui reçoit l'effet par une classe du site s'en sert aussi.
 */
:root {
	--oniti-carte-survol-ombre: 0 6px 18px var(--wp--custom--couleur--ombre);
	--oniti-carte-survol-decalage: -2px;
}
.is-style-carte-cliquable {
	--oniti-carte-focus-color: var(--wp--custom--couleur--focus);
	border: 1px solid var(--wp--custom--couleur--bordure);
	border-radius: var(--wp--custom--rayon);
}
/* Seulement sur une carte qui a un lien : une carte sans lien ne promet pas de clic. */
.is-style-carte-cliquable:has(:is(.wp-block-post-title, .oniti-carte-lien) a):is(:hover, :focus-within) {
	box-shadow: var(--oniti-carte-survol-ombre);
	transform: translateY(var(--oniti-carte-survol-decalage));
}
@media (prefers-reduced-motion: no-preference) {
	.is-style-carte-cliquable { transition: box-shadow 0.2s ease, transform 0.2s ease; }
}
/* WCAG 2.3.3 : l'ombre reste, la carte ne bouge pas. */
@media (prefers-reduced-motion: reduce) {
	.is-style-carte-cliquable:has(:is(.wp-block-post-title, .oniti-carte-lien) a):is(:hover, :focus-within) { transform: none; }
}
/* Titre relié : couleur des titres, c'est la carte entière qui fait le lien. */
.is-style-carte-cliquable :is(.wp-block-post-title, :is(h1, h2, h3, h4, h5, h6).oniti-carte-lien) a { color: inherit; }

/* Bouton contour (le bouton plein est défini dans theme.json). */
.wp-block-button.is-style-contour .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
}
.wp-block-button.is-style-contour .wp-block-button__link:hover {
	background: var(--wp--custom--couleur--action-survol);
	color: var(--wp--custom--couleur--action-texte);
	border-color: var(--wp--custom--couleur--action-survol);
}

/*
 * Bouton « Lien » : apparence d'un lien de texte, pour un lien relié à un champ (Block
 * Bindings sur l'URL) qu'un paragraphe ne peut pas porter. Le sélecteur à deux classes
 * passe devant le style des boutons de theme.json.
 */
.wp-block-button.is-style-lien .wp-block-button__link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.wp-block-button.is-style-lien .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--custom--couleur--lien);
}
.wp-block-button.is-style-lien .wp-block-button__link:hover { text-decoration: none; }

/* Bouton relié à un champ resté vide : le cœur écrit href="", le bouton ne mène nulle part. */
.wp-block-button:has(> .wp-block-button__link[href=""]) { display: none; }

/*
 * Encart : fond de section presque bord à bord, contenu aligné sur la colonne.
 * S'applique à un groupe « pleine largeur » : on réduit son débord de la marge, et on
 * retire cette même marge de son rembourrage pour que le contenu ne bouge pas.
 */
:root { --oniti-encart-marge: clamp(0.75rem, 2vw, 1.875rem); }
.is-style-encart.alignfull {
	margin-left: calc(var(--wp--style--root--padding-left) * -1 + var(--oniti-encart-marge)) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1 + var(--oniti-encart-marge)) !important;
	padding-left: calc(var(--wp--style--root--padding-left) - var(--oniti-encart-marge)) !important;
	padding-right: calc(var(--wp--style--root--padding-right) - var(--oniti-encart-marge)) !important;
	border-radius: var(--wp--custom--rayon);
}

/* Focus toujours visible (RGAA 10.7). Pas de :where() : la règle doit passer devant celles du cœur. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--wp--custom--couleur--focus);
	outline-offset: 2px;
	/* Liseré couleur du fond entre l'élément et le contour : le focus reste visible sur une
	   section dont le fond a la couleur du contour (bandeau couleur action…). */
	box-shadow: 0 0 0 2px var(--wp--custom--couleur--fond);
}