/*
Theme Name: CHW44
Template: oniti-base
Description: Thème enfant du site du Centre Henri Wallon, sur le thème parent Oniti Base.
Author: Oniti
Version: 0.1.0
Text Domain: chw44
*/

/*
 * CSS propre au site. Classes préfixées chw44-.
 * Avant d'écrire ici : un token de theme.json ou un style de bloc suffit-il ?
 */

:root {
	/* Texte secondaire (chapô, légendes) : calculé depuis les rôles, contraste ≥ 7:1 sur les deux fonds. */
	--chw44-texte-doux: color-mix(in srgb, var(--wp--custom--couleur--texte) 80%, var(--wp--custom--couleur--fond));
	/* Vert du logo : accent décoratif sans rôle, jamais pour du texte (docs/adrs/2026-10-29-accent-vert-hors-roles.md). */
	--chw44-accent: var(--wp--preset--color--vert);
}

/* Ancres du sommaire : la cible ne passe pas sous l'en-tête collant. */
html { scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

a { text-underline-offset: 0.18em; }

/* Sections pleine largeur bord à bord : pas d'écart entre deux bandes de fonds différents. */
.wp-block-post-content > .alignfull { margin-block: 0; }

/* ── En-tête ── */

/*
 * Collant : la règle vise l'élément <header> de la partie, seul parent assez haut pour que
 * position: sticky agisse (le réglage du Groupe resterait prisonnier de son <header>).
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
	background: var(--wp--custom--couleur--fond);
	border-bottom: 1px solid var(--wp--custom--couleur--bordure);
}
/* Sous 600 px, la barre d'administration défile avec la page. */
@media (width < 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
}

.chw44-menu a {
	font-weight: 600;
	text-decoration: none;
	padding-block: 0.4rem;
	border-bottom: 2px solid transparent;
}
.chw44-menu a:hover { border-bottom-color: var(--chw44-accent); }
.chw44-menu a[aria-current="page"] {
	color: var(--wp--custom--couleur--texte-titre);
	border-bottom-color: var(--wp--custom--couleur--action);
}

/* ── Pied de page ── */

.chw44-pied-bas { border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.chw44-pied-bas a { text-decoration: underline; }

/* ── Boutons ── */

/* Contour de la maquette : filet de 1,5 px, couleur des titres, sans remplissage au survol. */
.wp-block-button.is-style-contour .wp-block-button__link {
	color: var(--wp--custom--couleur--texte-titre);
	border: 0;
	box-shadow: inset 0 0 0 1.5px currentColor;
}
.wp-block-button.is-style-contour .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--custom--couleur--action);
	border: 0;
}

/* ── Textes ── */

.is-style-chapo {
	font-size: var(--wp--preset--font-size--p-xl);
	color: var(--chw44-texte-doux);
	max-width: 62ch;
}

/* Étiquette en pastille verte (le parent la pose sur le fond alterné, invisible ici). */
.is-style-etiquette {
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--chw44-accent) 22%, var(--wp--custom--couleur--fond));
	color: var(--wp--custom--couleur--texte);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.65;
}

.is-style-chiffre {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--p-chiffre);
	font-weight: 800;
	line-height: 1.3;
	color: var(--wp--custom--couleur--texte-titre);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Téléphone ou courriel en grand chiffre : couleur des titres, soulignés au survol seulement. */
.is-style-chiffre a { color: inherit; text-decoration: none; }
.is-style-chiffre a:hover { text-decoration: underline; }

/* Chiffre clé : grand chiffre et légende, filet vert à gauche. */
.is-style-chiffre-cle {
	border-left: 3px solid var(--chw44-accent);
	padding-left: 1rem;
}
.is-style-chiffre-cle > * + * { margin-block-start: 0.25rem; }

.wp-block-quote { color: var(--chw44-texte-doux); }

/* Puces des listes dans la couleur d'action. */
.wp-block-list { padding-left: 1.2em; }
.wp-block-list li + li { margin-top: 0.4rem; }
.wp-block-list li::marker { color: var(--wp--custom--couleur--action); }

/* Sommaire : liens vers les sections de la page, en pastilles. */
.wp-block-list.is-style-sommaire {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.is-style-sommaire li + li { margin-top: 0; }
.is-style-sommaire a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--wp--custom--couleur--bordure);
	border-radius: 999px;
	background: var(--wp--custom--couleur--fond);
	color: var(--wp--custom--couleur--texte-titre);
	font-size: var(--wp--preset--font-size--p-xs);
	font-weight: 600;
	text-decoration: none;
}
.is-style-sommaire a:hover { border-color: var(--wp--custom--couleur--action); }

/* ── Cartes ── */

.is-style-carte,
.is-style-carte-cliquable,
.is-style-carte-filet {
	padding: var(--wp--preset--spacing--m);
	background: var(--wp--custom--couleur--fond);
	min-width: 0;
}
.is-style-carte-filet {
	border: 1px solid var(--wp--custom--couleur--bordure);
	border-radius: var(--wp--custom--rayon);
}
.is-style-carte-filet { border-top: 4px solid var(--wp--custom--couleur--action); }

/*
 * Document à télécharger (carte cliquable, lien vers le PDF sur le titre) : pastille « PDF »
 * devant le titre (texte décoratif, masqué aux lecteurs d'écran).
 */
.chw44-document::before {
	content: "PDF" / "";
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3.5rem;
	border: 1px solid var(--wp--custom--couleur--bordure);
	border-radius: 6px;
	background: var(--wp--custom--couleur--fond-alterne);
	color: var(--wp--custom--couleur--action);
	font-size: 0.75rem;
	font-weight: 700;
}

/* Carte partenaire : logo ou monogramme sur une hauteur fixe, lien poussé en bas. */
.chw44-logo-partenaire {
	height: 76px;
	display: flex;
	align-items: center;
	margin: 0;
}
.chw44-logo-partenaire img {
	max-height: 72px;
	max-width: 160px;
	width: auto;
	object-fit: contain;
}
.is-style-monogramme {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	padding: 0.25rem;
	border: 1px solid var(--wp--custom--couleur--bordure);
	border-radius: 50%;
	background: var(--wp--custom--couleur--fond-alterne);
	color: var(--wp--custom--couleur--texte-titre);
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--p-xs);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
}
.chw44-lien-sortant {
	margin-top: auto !important; /* passe devant l'écart du Groupe en pile */
	font-size: var(--wp--preset--font-size--p-xs);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/*
 * Cartes cliquables : apparence, survol et focus fournis par oniti-base. Même effet, avec ses
 * variables, sur une carte simple de classe chw44-survol (cartes des 3 sites, page Contact) :
 * elle a plusieurs liens, donc elle n'est pas cliquable en entier.
 */
.chw44-survol:is(:hover, :focus-within) {
	box-shadow: var(--oniti-carte-survol-ombre);
	transform: translateY(var(--oniti-carte-survol-decalage));
}
@media (prefers-reduced-motion: no-preference) {
	.chw44-survol { transition: box-shadow 0.2s ease, transform 0.2s ease; }
}
@media (prefers-reduced-motion: reduce) {
	.chw44-survol:is(:hover, :focus-within) { transform: none; }
}

/* ── Images ── */

.wp-block-post-content .wp-block-image img { border-radius: var(--wp--custom--rayon); }
.chw44-logo-partenaire img { border-radius: 6px; }

/* ── Accordéon (core/accordion, WordPress 6.9) ── */

/*
 * Classes internes du bloc (__toggle, __toggle-icon) : seul moyen de dessiner l'icône ronde
 * de la maquette. À vérifier après une mise à jour majeure de WordPress.
 */
.wp-block-accordion { border-top: 1px solid var(--wp--custom--couleur--bordure); }
.wp-block-accordion-item { border-bottom: 1px solid var(--wp--custom--couleur--bordure); }
.wp-block-accordion-heading { margin: 0; }
.wp-block-accordion-heading__toggle {
	gap: 1rem;
	padding-block: 1.1rem;
}
.wp-block-accordion-heading__toggle:hover { color: var(--wp--custom--couleur--action); }
.wp-block-accordion-heading__toggle-icon {
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--custom--couleur--fond);
	color: var(--wp--custom--couleur--action);
	box-shadow: inset 0 0 0 1.5px var(--wp--custom--couleur--bordure);
	font-size: 1.4rem;
	line-height: 1;
}
.wp-block-accordion-panel { padding-bottom: var(--wp--preset--spacing--m); }