/*
 * ACGM – base de la direction artistique.
 *
 * Chargée sur le site public et dans l'éditeur (voir functions.php).
 * Les couleurs, typographies, espacements et styles des blocs sont dans
 * theme.json : ici, uniquement ce que theme.json ne sait pas exprimer.
 * Toutes les classes du thème sont préfixées « acgm- ».
 *
 * Sommaire
 * 1. Alias des couleurs
 * 2. Défilement, ancres et mouvements réduits
 * 3. Focus clavier
 * 4. Liens et boutons
 * 5. Contextes sombres
 * 6. Styles de blocs (surtitre, trait, lien fléché, carte)
 * 7. Grilles responsives
 * 8. Gabarits (sections collées, pages internes, articles)
 */

/* ---------- 1. Alias des couleurs ----------
 * Les slugs de theme.json reprennent ceux de Twenty Twenty-Five pour que les
 * styles du parent restent cohérents ; ces alias donnent des noms lisibles. */

:root {
	--acgm-blanc: var(--wp--preset--color--base);
	--acgm-marine-fonce: var(--wp--preset--color--contrast);
	--acgm-marine: var(--wp--preset--color--accent-1);
	--acgm-sable: var(--wp--preset--color--accent-2);
	--acgm-ivoire: var(--wp--preset--color--accent-3);
	--acgm-gris: var(--wp--preset--color--accent-4);
	--acgm-surface: var(--wp--preset--color--accent-5);
	--acgm-bordure: var(--wp--preset--color--accent-6);
	--acgm-rayon: var(--wp--custom--rayon--moyen, 12px);
	--acgm-rayon-petit: var(--wp--custom--rayon--petit, 6px);
	--acgm-transition: var(--wp--custom--transition, 180ms ease);
	--acgm-entete-hauteur: var(--wp--custom--entete--hauteur, 5rem);
}

/* ---------- 2. Défilement, ancres et mouvements réduits ---------- */

html {
	scroll-padding-top: calc(var(--acgm-entete-hauteur) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 3. Focus clavier ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--acgm-marine);
	outline-offset: 3px;
	border-radius: 2px;
}

:where(.has-contrast-background-color, .has-accent-1-background-color, .wp-block-cover:not(.is-light), .acgm-site-header)
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--acgm-sable);
}

/* ---------- 4. Liens et boutons ---------- */

a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--acgm-transition), text-decoration-color var(--acgm-transition);
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: background-color var(--acgm-transition), border-color var(--acgm-transition), color var(--acgm-transition);
}

/* Bouton « Contour » : survol lisible sur fond clair comme sur fond sombre. */
.wp-block-button.is-style-outline > .wp-element-button:hover,
.wp-block-button.is-style-outline > .wp-element-button:focus-visible {
	color: inherit;
	border-color: currentColor;
	background-color: color-mix(in srgb, currentColor 14%, transparent);
}

/* ---------- 5. Contextes sombres ----------
 * Sur fond marine, les liens de texte prennent la couleur du texte (blanc). */

:where(.has-contrast-background-color, .has-accent-1-background-color) a:where(:not(.wp-element-button)),
.wp-block-cover:not(.is-light) .wp-block-cover__inner-container a:where(:not(.wp-element-button)) {
	color: inherit;
}

:where(.has-contrast-background-color, .has-accent-1-background-color) a:where(:not(.wp-element-button)):hover {
	color: var(--acgm-sable);
}

/* ---------- 6. Styles de blocs ---------- */

/* Surtitre (paragraphe) : petite ligne en capitales au-dessus d'un titre. */
.is-style-acgm-surtitre {
	margin-bottom: 0;
	color: var(--acgm-marine);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.is-style-acgm-surtitre + * {
	margin-block-start: 0.4rem;
}

:where(.has-contrast-background-color, .has-accent-1-background-color, .wp-block-cover:not(.is-light)) .is-style-acgm-surtitre {
	color: var(--acgm-sable);
}

/* Titre avec trait sable (décoratif). */
.is-style-acgm-trait::after {
	content: "";
	display: inline-block;
	width: 2.5rem;
	height: 3px;
	margin-inline-start: 0.75rem;
	vertical-align: middle;
	background: var(--acgm-sable);
	border-radius: 2px;
}

/* Lien avec flèche (paragraphe contenant un lien). */
.is-style-acgm-lien-fleche {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.is-style-acgm-lien-fleche a::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.4em;
	transition: transform var(--acgm-transition);
}

.is-style-acgm-lien-fleche a:hover::after {
	transform: translateX(3px);
}

/* Carte (groupe) : fond blanc, bordure douce, coins arrondis. */
.wp-block-group.is-style-acgm-carte {
	overflow: hidden;
	background-color: var(--acgm-blanc);
	border: 1px solid var(--acgm-bordure);
	border-radius: var(--acgm-rayon);
	box-shadow: var(--wp--preset--shadow--acgm-douce);
}

/* Icône (bloc Image avec la classe acgm-icone). */
.acgm-icone img {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
}

/* ---------- 7. Grilles responsives ----------
 * Les groupes « Grille » de Gutenberg fixent un nombre de colonnes ; ces
 * règles l'adaptent à la largeur d'écran (desktop / tablette / mobile). */

.wp-block-group.acgm-grille,
.wp-block-post-template.acgm-grille {
	align-items: stretch;
}

@media (max-width: 1099.98px) {
	.acgm-grille.acgm-grille--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.acgm-grille.acgm-grille--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781.98px) {
	.acgm-grille.acgm-grille--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599.98px) {
	.acgm-grille.acgm-grille--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.acgm-grille.acgm-grille--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 8. Gabarits ---------- */

/* En-tête, contenu et pied de page se touchent : les sections gèrent leurs marges. */
.wp-site-blocks > .acgm-site-footer,
.wp-site-blocks > .acgm-main {
	margin-block-start: 0;
}

/* Images mises en avant et images de contenu : coins adoucis. */
.wp-block-post-featured-image img {
	border-radius: var(--acgm-rayon-petit);
}

.acgm-bandeau-titre .wp-block-post-title {
	margin: 0;
}