/**
 * Bloc oniti-alivio/timeline — étapes reliées, accordéon sous le seuil.
 *
 * Front et éditeur.
 *
 *   --oniti-alivio-timeline-ecart             écart entre deux étapes (padding, voir plus bas)
 *   --oniti-alivio-timeline-colonne-ecart     écart colonne d'icône ↔ contenu
 *   --oniti-alivio-timeline-panneau-ecart     écart entre les blocs d'un panneau
 *   --oniti-alivio-timeline-icone-couleur     trait du SVG
 *   --oniti-alivio-timeline-icone-fond        fond du cartouche
 *   --oniti-alivio-timeline-trait-couleur     trait vertical
 *   --oniti-alivio-timeline-trait-epaisseur   épaisseur du trait vertical
 *   --oniti-alivio-timeline-filet             filet horizontal entre étapes, sous le seuil
 *   --oniti-alivio-timeline-chevron-taille    côté du « + », et gouttière réservée par le titre
 *
 * Le cartouche autour du SVG n'est pas dessiné ici : les classes `.oniti-icon` et
 * `.oniti-icon--has-background` viennent d'oniti-core/icon, dont la feuille est déclarée
 * en dépendance dans block.json, et le thème enfant y pose padding et rayon.
 *
 * Deux règles d'or avant d'y toucher :
 *
 * - l'écart entre étapes est un `padding-block-end`, JAMAIS un `gap` : le trait vertical
 *   doit le traverser pour relier deux icônes.
 * - tout le mode replié est qualifié par `.oniti-alivio-timeline--pliable`, classe posée
 *   par render.php et absente dans l'éditeur. Le canevas est fréquemment plus étroit que
 *   le seuil, et un accordéon y serait impossible à ouvrir : l'interactivité n'y tourne pas.
 */

/* ==========================================================================
   1. Enveloppe et grille d'une étape
   ========================================================================== */

.oniti-alivio-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oniti-alivio-timeline__item {
	display: grid;
	/* `minmax(0, 1fr)` et non `1fr` : une image large se contraint au lieu de déborder. */
	grid-template-columns: auto minmax( 0, 1fr );
	column-gap: var( --oniti-alivio-timeline-colonne-ecart, 1rem );
}

.oniti-alivio-timeline__colonne {
	grid-column: 1;
	grid-row: 1 / span 2;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.oniti-alivio-timeline__titre {
	grid-column: 2;
	grid-row: 1;
	margin: 0;

	/*
	 * Centré sur la ligne d'en-tête, dont la hauteur est donnée par le cartouche tant que
	 * le titre est plus court que lui : titre et icône se retrouvent alors sur le même axe.
	 * Passé cette hauteur, c'est le titre qui impose la ligne et le cartouche reste en haut —
	 * la colonne enjambe les deux lignes pour porter le trait, elle ne peut pas se centrer
	 * sur la première seule.
	 */
	align-self: center;
}

.oniti-alivio-timeline__panneau {
	grid-column: 2;
	grid-row: 2;
}

/*
 * `blockGap` vaut 0rem globalement et le panneau n'est pas un conteneur de layout du cœur :
 * sans cette règle, paragraphe et pastille se colleraient.
 */
.oniti-alivio-timeline__panneau > * + * {
	margin-block-start: var( --oniti-alivio-timeline-panneau-ecart, 1rem );
}

/*
 * L'écart entre étapes, en padding pour que le trait le traverse. Le dernier n'en a pas :
 * il n'a personne à relier.
 */
.oniti-alivio-timeline__item:not( :last-of-type ) {
	padding-block-end: var( --oniti-alivio-timeline-ecart, 2rem );
}

/* ==========================================================================
   2. Icône et trait vertical
   ========================================================================== */

.oniti-alivio-timeline__icone {
	/* `color` et non `fill` : les icônes du site sont tracées en `stroke="currentColor"`. */
	color: var( --oniti-alivio-timeline-icone-couleur, var( --wp--preset--color--primary ) );
	background-color: var( --oniti-alivio-timeline-icone-fond, var( --wp--preset--color--primary-lighter ) );
}

/*
 * Le trait est le second enfant flex de la colonne : il démarre au bas RÉEL du cartouche
 * et prend toute la place restante. Sa demi-hauteur n'est donc jamais calculée, et le trait
 * ne dépend ni de la taille de l'icône ni du padding que le thème lui applique — celui-ci
 * est déclaré sur l'icône elle-même et resterait invisible depuis un ancêtre.
 *
 * Pas de `z-index` non plus : le trait est SOUS le cartouche dans la colonne, pas derrière.
 */
.oniti-alivio-timeline__item:not( :last-of-type ) > .oniti-alivio-timeline__colonne::after {
	content: "";
	flex: 1 1 auto;

	/*
	 * La colonne est un élément de grille : elle s'arrête à la content-box de l'étape, donc
	 * AVANT le `padding-block-end` qui la sépare de la suivante. Sans cette marge négative,
	 * le trait s'arrêterait court au lieu de rejoindre le cartouche du dessous.
	 *
	 * En flex, une marge négative en fin ajoute d'autant à l'espace libre : `flex-grow`
	 * l'absorbe, et le trait déborde exactement de l'écart.
	 */
	margin-block-end: calc( -1 * var( --oniti-alivio-timeline-ecart, 2rem ) );

	inline-size: var( --oniti-alivio-timeline-trait-epaisseur, 1px );
	background-color: var( --oniti-alivio-timeline-trait-couleur, var( --wp--preset--color--light-darker ) );
}

/* ==========================================================================
   3. Bouton de repli
   ==========================================================================
   Masqué par défaut : au-dessus du seuil la timeline n'a aucun élément interactif, et
   `display: none` le retire RÉELLEMENT de l'arbre d'accessibilité — il ne reste qu'un
   titre et son panneau, sans `aria-expanded` qui mentirait sur un panneau ouvert.
   -------------------------------------------------------------------------- */

.oniti-alivio-timeline__bascule {
	display: none;
}

.oniti-alivio-timeline__chevron {
	position: relative;
	flex: none;
	inline-size: var( --oniti-alivio-timeline-chevron-taille, 1rem );
	block-size: var( --oniti-alivio-timeline-chevron-taille, 1rem );
}

/* Deux barres croisées : le « + » devient un « − » quand l'étape est ouverte. */
.oniti-alivio-timeline__chevron::before,
.oniti-alivio-timeline__chevron::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	block-size: 2px;
	translate: 0 -50%;
	background-color: currentColor;
}

.oniti-alivio-timeline__chevron::after {
	rotate: 90deg;
}

.est-ouvert > .oniti-alivio-timeline__bascule .oniti-alivio-timeline__chevron::after {
	rotate: 0deg;
}

/* Convention du projet : la transition est POSÉE sous `no-preference`, pas annulée après. */
@media ( prefers-reduced-motion: no-preference ) {
	.oniti-alivio-timeline__chevron::after {
		transition: rotate 0.2s ease-in-out;
	}
}

/* ==========================================================================
   4. Sous le seuil — accordéon
   ==========================================================================
   1025px : le seuil « tablette » du projet (settings.viewport.tablet).
   -------------------------------------------------------------------------- */

@media ( width < 1025px ) {
	/* Replié, l'ensemble se resserre : les étapes fermées ne sont plus que des lignes. */
	.oniti-alivio-timeline--pliable {
		--oniti-alivio-timeline-ecart: 1.5rem;
	}

	.oniti-alivio-timeline--pliable .oniti-alivio-timeline__item:not( .est-ouvert )
		> .oniti-alivio-timeline__panneau {
		display: none;
	}

	/* Le trait ne relie plus rien : les icônes ne sont plus sur un axe continu. */
	.oniti-alivio-timeline--pliable .oniti-alivio-timeline__item > .oniti-alivio-timeline__colonne::after {
		content: none;
	}

	.oniti-alivio-timeline--pliable .oniti-alivio-timeline__item:not( :last-of-type ) {
		border-block-end: 1px solid var( --oniti-alivio-timeline-filet, var( --wp--preset--color--light-darker ) );
	}

	/*
	 * L'écart de part et d'autre du filet, et non au-dessus seulement : `padding-block-end`
	 * dégage le contenu de l'étape courante, celui-ci dégage l'icône et le titre de la
	 * suivante — sans quoi le filet leur reste collé.
	 *
	 * Réservé au mode replié : au-dessus du seuil, un dégagement en haut d'étape ne serait
	 * pas couvert par la colonne d'icônes, et le trait vertical s'y arrêterait avant le
	 * cartouche suivant.
	 */
	.oniti-alivio-timeline--pliable .oniti-alivio-timeline__item + .oniti-alivio-timeline__item {
		padding-block-start: var( --oniti-alivio-timeline-ecart, 1.5rem );
	}

	/*
	 * Le titre réserve la gouttière du chevron. Le bouton étant un OVERLAY, il ne pousse
	 * rien : sans ce dégagement, un titre long passerait sous le chevron. Les deux lisent
	 * la même taille, ils ne peuvent donc pas se désaccorder.
	 */
	.oniti-alivio-timeline--pliable .oniti-alivio-timeline__titre {
		padding-inline-end: calc(
			var( --oniti-alivio-timeline-chevron-taille, 1rem )
			+ var( --oniti-alivio-timeline-colonne-ecart, 1rem )
		);
	}

	/*
	 * Élément de grille enjambant la première ligne sur les deux colonnes : toute la ligne
	 * d'en-tête devient cliquable, sans position absolue ni hauteur à connaître. Il suit le
	 * titre dans le DOM, donc il peint au-dessus.
	 *
	 * Son nom accessible vient d'`aria-labelledby` sur le titre ; le chevron est décoratif.
	 * Contrepartie assumée, celle de tout accordéon : le titre n'est plus sélectionnable.
	 */
	.oniti-alivio-timeline--pliable .oniti-alivio-timeline__bascule {
		display: flex;
		grid-column: 1 / -1;
		grid-row: 1;
		z-index: 1;

		/* Même axe que le titre, qui est centré sur la ligne d'en-tête. */
		align-items: center;
		justify-content: flex-end;
		/* Cible tactile confortable, indépendante de la hauteur du titre (RGAA 13.11). */
		min-block-size: 2.75rem;

		appearance: none;
		border: 0;
		padding: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	/*
	 * `theme.json` ne stylise le focus que des boutons du cœur (`.wp-element-button`) : sur
	 * un bouton transparent et sans bordure, il faut le dessiner. Pas d'`overflow: hidden`
	 * sur l'étape, l'anneau serait rogné.
	 */
	.oniti-alivio-timeline--pliable .oniti-alivio-timeline__bascule:focus-visible {
		outline: 2px solid var( --wp--custom--couleur--focus );
		outline-offset: 2px;
	}
}