/*
Theme Name: test-wp
Description: Thème du site testwp, enfant de Twenty Twenty-Five (thème officiel de WordPress, installé par Composer). Les styles, gabarits et réglages propres au site vont ici ; le thème parent ne se modifie jamais.
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 7.1
Requires PHP: 8.4
Text Domain: testwp
*/

/*
 * Styles du site, chargés après ceux du thème parent (functions.php) et
 * repris dans l'éditeur (add_editor_style). Couleurs, polices, tailles et
 * styles des blocs : dans theme.json et styles/*.json, que l'éditeur de site
 * reprend. Ici, seulement ce que theme.json ne sait pas exprimer : mise en
 * page des sections de l'accueil et focus visible.
 *
 * Couleurs : toujours par les variables de la palette
 * (var(--wp--preset--color--<slug>)), pour suivre la variation de style
 * choisie. Rayon des angles : var(--wp--custom--rayon).
 */

/* En-tête collé en haut de la fenêtre ; ancres de l'accueil visibles sous lui. */
html {
	scroll-padding-top: 96px;
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
}

@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Accueil : sections bord à bord, sans marge entre elles ni avec le pied. */
.wp-site-blocks > .testwp-accueil + footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Focus visible sur tout fond : anneau clair puis anneau foncé. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--wp--preset--color--contrast);
}

/* En-tête : le bouton « Nous contacter » laisse la place au menu sur mobile. */
@media (max-width: 599px) {
	.wp-block-buttons.testwp-entete-bouton {
		display: none;
	}
}

.testwp-entete .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

/* Bannière : boutons l'un sous l'autre, pleine largeur, sur mobile. */
@media (max-width: 599px) {
	.wp-block-buttons.testwp-boutons {
		flex-direction: column;
		align-items: stretch;
	}

	.testwp-boutons .wp-block-button__link {
		width: 100%;
	}
}

/* Bannière : composition décorative de blocs colorés. */
.testwp-visuel {
	position: relative;
	min-height: 340px;
}

.testwp-visuel > * {
	position: absolute;
	margin: 0;
	border-radius: calc(var(--wp--custom--rayon) * 2.5);
}

.testwp-visuel > :nth-child(1) {
	inset: 0 60px 60px 0;
}

.testwp-visuel > :nth-child(2) {
	right: 0;
	bottom: 0;
	width: 58%;
	height: 58%;
	opacity: 0.92;
}

.testwp-visuel > :nth-child(3) {
	left: 28px;
	bottom: 24px;
	width: 34%;
	height: 30%;
}

@media (max-width: 781px) {
	.testwp-visuel {
		min-height: 200px;
	}
}

/* Cartes des services : même hauteur sur une ligne. */
.wp-block-column > .is-style-carte {
	height: 100%;
}

.testwp-icone {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 0.5rem;
	border-radius: var(--wp--custom--rayon);
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-3);
	line-height: 1;
}

/* À propos : emplacement d'image (à remplacer par un bloc Image). */
.testwp-photo {
	min-height: 360px;
	border-radius: calc(var(--wp--custom--rayon) * 2.5);
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-2));
}

@media (max-width: 781px) {
	.testwp-photo {
		min-height: 220px;
	}
}

/* Derniers articles : image mise en avant, ou aplat si l'article n'en a pas. */
.testwp-actualites .wp-block-post-featured-image,
.testwp-actualites .wp-block-post-featured-image img {
	border-radius: calc(var(--wp--custom--rayon) * 1.5);
}

.testwp-actualites .wp-block-post-template > li:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: calc(var(--wp--custom--rayon) * 1.5);
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-2));
}

/* Pied de page : liens sans soulignement, sauf au survol. */
.testwp-pied a {
	text-decoration: none;
}

.testwp-pied a:hover {
	text-decoration: underline;
}

.testwp-pied-legal {
	border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}