/*
 * Polish visuel transversal — réseau APAJH (2026-08-19).
 *
 * Contexte : passage de finition demandé sur l'ensemble du réseau ("coup de
 * pimp design global"), en gardant le RGAA en tête à chaque ajout — donc
 * uniquement des micro-interactions au survol/focus, jamais du contenu
 * porté par la seule couleur, et systématiquement doublées d'un état focus
 * identique à l'état hover (un clavier doit voir ce qu'une souris voit).
 * Toutes les transitions sont protégées par `prefers-reduced-motion`, comme
 * déjà pratiqué dans les blocs du réseau (carte-formations, etc.).
 *
 * Fichier volontairement distinct de rgaa.css (qui reste dédié aux règles
 * strictement correctives RGAA : focus, skip-link, étapes de formulaire) —
 * ici, c'est de la finition visuelle, pas de la conformité.
 */

/*
 * Boutons — transition douce + légère élévation au survol/focus. Corrige au
 * passage une incohérence relevée sur le réseau : certains boutons sans
 * style explicite (ex. accueil établissements) restaient carrés (rayon par
 * défaut du thème parent Ollie, 5px) alors que tous les autres boutons du
 * réseau sont en pilule (999px, fixé désormais dans theme.json). Cette
 * règle ajoute juste le mouvement, la forme pilule vient de theme.json.
 */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-element-button,
	.wp-block-button__link {
		transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-element-button:focus-visible,
	.wp-block-button__link:focus-visible {
		transform: translateY(-2px);
		box-shadow: var(--wp--preset--shadow--small-dark);
	}

	/* Boutons en style "outline" (fond transparent) : pas d'ombre portée,
	   qui trancherait mal sur un fond clair — l'élévation suffit. */
	.is-style-outline .wp-block-button__link:hover,
	.is-style-outline .wp-block-button__link:focus-visible {
		box-shadow: none;
	}
}

/*
 * Étapes (indicateur d'étapes / "stepper") — réseau APAJH (2026-09-02).
 *
 * Inspiré du composant "Indicateur d'étapes" du DSFR (Système de Design de
 * l'État) — repris uniquement pour sa logique structurelle (numéros reliés,
 * séquence lisible), jamais sa charte graphique (pas de bleu-blanc-rouge, pas
 * de Marianne : le DSFR est réservé aux sites .gouv.fr, cf. ses modalités
 * d'utilisation — on en récupère l'idée, pas l'habillage).
 *
 * Usage : une liste ordonnée `<ol class="apajh-etapes">` de `<li
 * class="apajh-etapes__etape">`, chacune avec un `<span
 * class="apajh-etapes__numero">` (numéro visible, PAS aria-hidden : annoncé
 * aux lecteurs d'écran, en plus de la position native "élément 2 sur 3" déjà
 * portée par <ol>/<li>) puis un titre et un texte. Semelle native <ol> :
 * aucun rôle ARIA à ajouter.
 *
 * Voir patterns/etapes.php pour le pattern prêt à insérer depuis
 * l'inserteur de blocs (disponible sur tous les sous-sites du réseau,
 * puisque ce thème est partagé). Première utilisation concrète : accordéon
 * "Faire appel à la PCO" du sous-site pco-52.
 *
 * Ligne de liaison en desktop uniquement (::before sur le conteneur,
 * position constante quel que soit le nombre d'étapes — pas de calcul par
 * étape, donc pas de risque de décalage si on ajoute/retire une étape).
 * Repliée en colonne sous 768px, comme le reste des patterns responsive du
 * réseau (cf. bandes Actualités) — la ligne horizontale n'a alors plus de
 * sens et disparaît, le numéro seul suffit à porter la séquence.
 */
.apajh-etapes {
	position: relative;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--wp--preset--spacing--large);
}

.apajh-etapes::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	height: 2px;
	background: var(--wp--preset--color--border-light);
	z-index: 0;
}

.apajh-etapes__etape {
	position: relative;
	z-index: 1;
	flex: 1;
	text-align: center;
}

.apajh-etapes__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto var(--wp--preset--spacing--small);
	border-radius: var(--wp--preset--border-radius--full, 999px);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.apajh-etapes__titre {
	margin: 0 0 0.25em;
	font-weight: 700;
	color: var(--wp--preset--color--main);
}

.apajh-etapes__texte {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
}

@media (max-width: 768px) {
	.apajh-etapes {
		flex-direction: column;
		gap: var(--wp--preset--spacing--medium);
	}

	.apajh-etapes::before {
		display: none;
	}

	.apajh-etapes__etape {
		display: grid;
		grid-template-columns: 40px 1fr;
		column-gap: var(--wp--preset--spacing--small);
		text-align: left;
	}

	.apajh-etapes__numero {
		grid-column: 1;
		grid-row: 1 / 3;
		margin: 0;
	}

	.apajh-etapes__titre {
		grid-column: 2;
		grid-row: 1;
	}

	.apajh-etapes__texte {
		grid-column: 2;
		grid-row: 2;
	}
}

/*
 * Étapes dans un accordéon (2026-09-02) — la mise en colonnes de
 * .apajh-etapes suppose une largeur pleine page ; un `<details>` n'a jamais
 * cette largeur (il est lui-même dans une colonne, une carte, etc.), les
 * colonnes y paraissent toujours tassées. Toujours empilées à la verticale
 * dans ce contexte, quelle que soit la taille d'écran — mêmes règles que le
 * repli mobile ci-dessus, appliquées cette fois sans media query. Portée
 * volontairement générique (`details .apajh-etapes`, pas
 * `.apajh-pco-accordeon`) : vaut pour tout accordéon du réseau, pas
 * seulement celui de la PCO.
 */
details .apajh-etapes {
	flex-direction: column;
	gap: var(--wp--preset--spacing--medium);
}

details .apajh-etapes::before {
	display: none;
}

/*
 * Grille plutôt que flex ici : `.apajh-etapes__etape` a 3 enfants au même
 * niveau (numéro, titre, texte — pas de conteneur autour de titre+texte).
 * En flex simple, les 3 se répartissent en ligne à largeur égale et le
 * titre, très court, se retrouvait écrasé sur quelques caractères de large
 * (retour à la ligne un mot par ligne). La grille fixe la colonne du numéro
 * à 40px et place titre/texte l'un sous l'autre dans la seconde colonne,
 * sans avoir à ajouter de balise supplémentaire au balisage existant.
 */
details .apajh-etapes .apajh-etapes__etape {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: var(--wp--preset--spacing--small);
	text-align: left;
}

details .apajh-etapes .apajh-etapes__numero {
	grid-column: 1;
	grid-row: 1 / 3;
	margin: 0;
}

details .apajh-etapes .apajh-etapes__titre {
	grid-column: 2;
	grid-row: 1;
}

details .apajh-etapes .apajh-etapes__texte {
	grid-column: 2;
	grid-row: 2;
}

/*
 * `<details>`/`<summary>` — indicateur focus explicite. Le sélecteur
 * générique de rgaa.css (a/button/input/select/textarea/[tabindex]) ne
 * couvre pas la balise `<summary>` : bien que focusable nativement par le
 * navigateur, elle n'y correspond à aucun des sélecteurs listés. Sans cette
 * règle, un utilisateur au clavier qui tabule jusqu'à un accordéon
 * (catégories de formations, filtres établissements/séjours, accordéon
 * "Faire appel à la PCO"…) ne voit aucun indicateur de focus — violation
 * RGAA 10.7. Complète (ne remplace pas) les styles de focus déjà écrits
 * localement dans certains blocs.
 */
summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}