/**
 * CSS complémentaire du thème — Triathlon Club Genève.
 *
 * Ce fichier est volontairement quasi vide. En FSE, privilégie theme.json
 * (presets, layout, styles d'éléments/blocs) AVANT d'écrire du CSS ici.
 *
 * N'écris ici que ce que theme.json ne permet PAS de faire proprement :
 *  - styles de blocs personnalisés (.is-style-tcg-*)
 *  - micro-ajustements ponctuels
 *
 * Il est chargé conditionnellement (uniquement s'il est non vide) sur le front
 * ET dans l'éditeur (add_editor_style), pour un rendu cohérent.
 *
 * Utilise les variables CSS générées par theme.json plutôt que des valeurs en dur :
 *   var(--wp--preset--color--primary)
 *   var(--wp--preset--spacing--30)
 *   var(--wp--preset--font-size--large)
 *   var(--wp--custom--line-height--body)
 */

/* -------------------------------------------------------------------------
 * Défilement fluide vers les ancres (#id).
 *
 * scroll-padding-top compense l'en-tête collant (.tcg-header / header.wp-block-
 * template-part, top:0) pour que la cible ne soit pas masquée dessous.
 * Désactivé si l'utilisateur a réduit les animations.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
html {
	scroll-padding-top: 5rem;
}

/* -------------------------------------------------------------------------
 * Utilitaire : .mix-blend-multiply
 *
 * À saisir dans Gutenberg → Avancé → « Classe(s) CSS additionnelle(s) » d'un
 * bloc Image (ou directement sur une <img>). Applique le mode de fusion
 * « multiply » : sur un fond coloré, le BLANC de l'image disparaît (blanc ×
 * couleur = couleur), tandis que les zones sombres restent. Idéal pour des
 * visuels/logos sur fond blanc posés sur un aplat de couleur.
 *
 * On cible l'IMG (pas le wrapper) pour un rendu prévisible, que la classe soit
 * posée sur le bloc Image (figure) ou directement sur la balise img.
 *
 * Limites : multiply assombrit aussi les couleurs de l'image (elles se teintent
 * du fond) ; l'effet n'est propre que sur un fond uni/clair, pas sur une photo.
 * Pour un détourage parfait, préférer une image à fond réellement transparent
 * (PNG/WebP/SVG). Nécessite que l'image ne soit pas isolée par un contexte
 * d'empilement parent (opacity/filter/transform), sinon elle fusionne avec ce
 * conteneur et non avec le fond voulu.
 * ------------------------------------------------------------------------- */
.mix-blend-multiply img,
img.mix-blend-multiply {
	mix-blend-mode: multiply;
}

/* -------------------------------------------------------------------------
 * Exemple : rendu du style de bloc « Encadré » (registre dans inc/block-styles.php).
 * Décommente pour l'activer.
 * ------------------------------------------------------------------------- */

/*
.wp-block-group.is-style-tcg-bordered {
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--20);
}
*/

/* -------------------------------------------------------------------------
 * Bouton « Négatif » (registre dans inc/block-styles.php).
 *
 * Au repos : bordure primaire, fond blanc pur, texte primaire.
 * Au survol/focus : bordure blanche, fond primaire, texte blanc.
 * Le rayon (pilule) est hérité de theme.json (elements.button).
 * ------------------------------------------------------------------------- */
.wp-block-button.is-style-tcg-negatif .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-tcg-negatif .wp-block-button__link:hover,
.wp-block-button.is-style-tcg-negatif .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Animation au survol — boutons au style par défaut (hors « Négatif »).
 *
 * Transition douce de l'assombrissement du fond géré par theme.json
 * (instantané jusque-là). Pas d'ombre ni de transform.
 * ------------------------------------------------------------------------- */
.wp-block-button:not(.is-style-tcg-negatif) > .wp-element-button {
	transition: background-color 0.2s ease;
}

/* -------------------------------------------------------------------------
 * En-tête collant (sticky) — composition « Header Site ».
 *
 * L'en-tête (.tcg-header) reste en haut au défilement, sur toutes les pages.
 * Fond blanc déjà défini sur le bloc (backgroundColor "base"). Légère ombre
 * pour le détacher du contenu qui passe dessous.
 * ------------------------------------------------------------------------- */
.tcg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Cas « en-tête via partie de modèle » (toutes les pages sauf l'accueil) :
 * .tcg-header est alors enveloppé dans <header class="wp-block-template-part">,
 * dont la hauteur = celle de l'en-tête → le sticky interne n'a aucune marge pour
 * coller. On rend donc le wrapper lui-même collant (son parent = .wp-site-blocks,
 * pleine hauteur). « header. » ne vise QUE l'en-tête (le pied de page est
 * footer.wp-block-template-part). Sur l'accueil, ce wrapper n'existe pas (en-tête
 * dans le contenu) → c'est .tcg-header ci-dessus qui opère. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* -------------------------------------------------------------------------
 * Accordéon natif (core/accordion) — habillage « FAQ TCG » (global).
 *
 * Reproduit le design FAQ : séparateurs fins, titre rose + gras à l'ouverture,
 * icône « + » → « × » dans une pastille ronde (rose → orange), ouverture en
 * douceur (hauteur animée). Couleurs 100 % palette theme.json.
 *
 * Le cœur gère déjà : la bascule (.is-open), la rotation 45° de l'icône, et
 * l'exclusivité « un seul ouvert » via l'option « Autoclose » (à activer sur
 * chaque bloc). Il déclare la transition de hauteur mais PAS la grille ni le
 * maintien du panneau : on complète ci-dessous.
 * ------------------------------------------------------------------------- */

/* Séparateurs : trait haut du groupe, trait bas par item, items au ras. */
.wp-block-accordion {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}
.wp-block-accordion-item {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	margin-block: 0;
}

/* Animation d'ouverture : grille auto / 0fr → 1fr (le panneau est la 2e rangée
 * qui se déplie). La transition est fournie par le cœur (respect de
 * prefers-reduced-motion). */
.wp-block-accordion-item {
	display: grid;
	grid-template-rows: auto 0fr;
}
.wp-block-accordion-item.is-open {
	grid-template-rows: auto 1fr;
}

/* En-tête / bouton bascule. CSS autonome (le style natif du bloc
 * accordion-heading n'est pas toujours chargé) : reset complet du <button>,
 * paddings du design, hover gris clair, pas de soulignement. */
.wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 0.5em 1.2em;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.wp-block-accordion-heading__toggle:hover {
	background-color: var(--wp--preset--color--accent);
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* Titre : toujours en gras ; gris foncé au repos → rose à l'ouverture, avec une
 * transition de couleur douce. */
.wp-block-accordion-heading__toggle-title {
	flex: 1;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	transition: color 0.35s ease;
}
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-title {
	color: var(--wp--preset--color--primary);
}

/* Icône « + » : pastille ronde 40px, glyphe blanc centré. Rose fermé → orange
 * ouvert (la rotation 45° vers « × » est gérée par le cœur). */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 0; /* masque le « + » texte natif au profit du SVG ci-dessous */
	transition: background-color 0.3s ease, transform 0.2s ease-in-out;
}
/* Glyphe « + » net et centré (icône lucide « plus ») dessiné en SVG masqué
 * (blanc). À l'ouverture, le cœur fait pivoter la pastille de 45° → « × ». */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	background-color: var(--wp--preset--color--tertiary);
}

/* Panneau : neutralise le display:none natif pour permettre l'animation ;
 * overflow caché pendant le pli. L'attribut inert conserve l'inaccessibilité
 * au clavier / lecteurs d'écran quand c'est fermé. */
.wp-block-accordion-item .wp-block-accordion-panel[inert],
.wp-block-accordion-item .wp-block-accordion-panel[aria-hidden="true"] {
	display: block;
}
.wp-block-accordion-panel {
	overflow: hidden;
	min-height: 0;
	padding-inline: 1.5rem;
	font-size: 1.125rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, var(--wp--preset--color--base));
}
/* Espacement interne du panneau sans casser le pli (les marges des enfants
 * sont rognées par overflow:hidden quand la rangée vaut 0fr). */
.wp-block-accordion-panel > :first-child {
	margin-block-start: 0;
}
.wp-block-accordion-panel > :last-child {
	margin-block-end: 1rem;
}