/**
 * Gi — CSS complémentaire au thème de blocs.
 * Les couleurs/polices/espacements globaux vivent dans theme.json (réglables
 * visuellement dans Apparence > Éditeur > Styles) : ce fichier ne couvre que
 * ce que le Site Editor ne fait pas nativement — l'en-tête qui devient
 * opaque au scroll, l'accordéon, le style de bloc "Cadre blueprint", et la
 * mise en forme du formulaire Fluent Forms.
 */

/* --hb (couleur bordures/carrés de l'en-tête) enregistrée en <color> pour
   que les transitions de border-color qui en dépendent s'animent en douceur
   — sans @property, un changement de valeur d'une custom property ne
   s'anime pas, même avec `transition` déclarée sur la propriété consommatrice. */
@property --hb {
	syntax: '<color>';
	inherits: true;
	initial-value: #FFFEF8;
}

/* ---------- Section (espacement générique) ---------- */
.section { padding-block: clamp(2rem, 6vw, 4rem); padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* ---------- Utilitaire de largeur (gabarits classiques single-project.php / archive-project.php) ---------- */
.section__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: 1.5rem;
}
.main { padding: clamp(2rem, 6vw, 4rem) 0; }
.main .section__inner + .section__inner { padding-block-start: 0; }

/* ---------- Cadre "blueprint" (style de bloc, activable dans le panneau Styles) ---------- */
.is-style-blueprint-frame {
	border: 1px dashed var(--wp--preset--color--line);
	position: relative;
}
.is-style-blueprint-frame::before,
.is-style-blueprint-frame::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: var(--wp--preset--color--text);
}
.is-style-blueprint-frame::before { top: -3px; left: -3px; }
.is-style-blueprint-frame::after { bottom: -3px; right: -3px; }

/* Cadre pointillé simple (sans les carrés d'angle), utilisé par quelques gabarits classiques */
.dashed-frame { border: 1px dashed var(--wp--preset--color--line); }

.eyebrow {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 0.5rem;
}

.empty-notice { opacity: 0.6; font-style: italic; }

.content-block--center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

.media-placeholder {
	width: 100%; height: 100%; min-height: 16rem;
	display: flex; align-items: center; justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(122, 78, 30, 0.06),
		rgba(122, 78, 30, 0.06) 10px,
		transparent 10px,
		transparent 20px
	);
	border: 1px dashed var(--wp--preset--color--line);
	font-size: 0.8rem;
	opacity: 0.7;
	text-align: center;
	padding: 1rem;
}

/* ---------- En-tête (barre flottante, façon tekt.com.au) ----------
   position: fixed, détachée du flux normal : le hero commence à y=0 (aucun
   padding-top sur body, aucun margin négatif à synchroniser — l'ancienne
   version avait un bug de spécificité CSS : `.hero.wp-block-cover{margin:0}`
   (2 classes) écrasait `.hero{margin-top:...}` (1 classe) et annulait la
   compensation). Sur une page SANS hero, .main est directement précédé du
   wrapper d'en-tête (aucun .hero/.page-hero-media entre les deux) : on lui
   donne alors une marge haute fixe pour ne pas passer sous la barre.

   Structure : PAS de cadre global sur .site-header — chaque case (logo,
   chaque lien) porte SA PROPRE bordure 1px complète, les cases se touchent
   (margin-left:-1px pour fusionner les traits partagés). Deux hauteurs
   différentes, alignées en haut (align-items:flex-start) : la case logo
   (~73px) dépasse sous les cases liens (~47px), comme chez Tekt. */
.site-header {
	--hb: rgba(255, 254, 248, 0.85);
	position: fixed;
	top: 20px;
	left: 40px;
	right: 40px;
	z-index: 100;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	color: var(--hb);
	background-color: transparent;
	transition: background-color 0.5s ease, color 0.5s ease;
}
/* Page sans hero, ou une fois scrollé, ou au survol du header : état "plein" */
.wp-block-template-part:not(:has(+ .hero)):not(:has(+ .page-hero-media)) .site-header,
.site-header.is-scrolled,
.site-header:hover,
.site-header:focus-within {
	--hb: #000000;
	background-color: #FFFEF8;
	color: #785426;
}
.wp-block-template-part + .main {
	margin-top: 5.5rem !important;
}

.site-header,
.site-header * {
	box-sizing: border-box;
}

/* WordPress ajoute automatiquement un espacement (blockGap) entre les
   enfants directs d'un Group (is-layout-flow) et entre les éléments d'une
   Navigation (is-layout-flex), même sans "layout" déclaré explicitement
   dans le bloc. Neutralisé ici pour que logo et liens restent collés. */
.site-header > * {
	margin-block-start: 0 !important;
}
.site-nav,
.site-nav .wp-block-navigation__responsive-container,
.site-nav .wp-block-navigation__responsive-container-content,
.site-nav .wp-block-navigation__container {
	gap: 0 !important;
}
/* Le bord gauche de la nav recouvre le bord droit de la case logo : un seul
   trait à la jonction (sinon 1px + 1px), carrés d'angle des deux cases
   superposés au même endroit. */
.site-nav {
	margin-left: -1px;
}

.site-header__logo {
	position: relative;
	display: flex;
	flex: 1 1 50%;
	height: 73px;
	align-items: center;
	justify-content: flex-start;
	padding: 15px;
	border: 1px solid var(--hb);
	transition: flex 0.5s ease, border-color 0.5s ease;
}
.site-header__logo-text {
	margin: 0;
	font-weight: 400;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 42px;
	line-height: 1;
}
.site-header__logo a { text-decoration: none; color: inherit; }

.site-nav {
	position: relative;
	display: flex;
	flex: 1 1 50%;
	transition: flex 0.5s ease;
}
.site-nav .wp-block-navigation__container {
	display: flex;
	width: 100%;
	align-items: flex-start;
	gap: 0 !important;
}
.site-nav .wp-block-navigation-item {
	position: relative;
	display: flex;
	flex: 1 1 0;
	height: 47px;
	border: 1px solid var(--hb);
	transition: flex 0.5s ease, border-color 0.5s ease;
}
.site-nav .wp-block-navigation-item + .wp-block-navigation-item {
	margin-left: -1px;
}
.site-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	padding: 12.5px;
	color: inherit;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
}

/* Au survol/focus d'un lien précis : la zone liens prend toute la largeur,
   la case "gi" se réduit, et ce lien double sa part par rapport aux autres. */
.site-header:has(.wp-block-navigation-item:hover) .site-header__logo,
.site-header:has(.wp-block-navigation-item__content:focus-visible) .site-header__logo {
	flex: 0 1 0%;
}
.site-header:has(.wp-block-navigation-item:hover) .site-nav,
.site-header:has(.wp-block-navigation-item__content:focus-visible) .site-nav {
	flex: 1 1 100%;
}
.site-nav .wp-block-navigation-item:hover,
.site-nav .wp-block-navigation-item:has(.wp-block-navigation-item__content:focus-visible) {
	flex: 2 1 0;
}

/* Carrés 6x6px centrés sur les 4 coins de CHAQUE case (logo inclus) : un
   seul pseudo-élément par bord (haut / bas), 6px pleins à chaque extrémité
   via un dégradé à paliers nets, le reste transparent — équivaut à 2 carrés
   par bord (donc 4 par case) sans consommer plus que les 2 pseudo-éléments
   disponibles. Posés sur la bordure propre de chaque case (cf. ci-dessus) :
   sans cette bordure individuelle, les carrés semblaient "flotter" sans
   ligne — c'était le bug précédent. */
.site-header__logo::before,
.site-header__logo::after,
.site-nav .wp-block-navigation-item::before,
.site-nav .wp-block-navigation-item::after,
.site-nav button.wp-block-navigation__responsive-container-open::before,
.site-nav button.wp-block-navigation__responsive-container-open::after {
	content: '';
	position: absolute;
	left: -3px;
	right: -3px;
	height: 6px;
	background: linear-gradient(to right, var(--hb) 0 6px, transparent 6px calc(100% - 6px), var(--hb) calc(100% - 6px) 100%);
	pointer-events: none;
	transition: background-color 0.5s ease;
}
.site-header__logo::before,
.site-nav .wp-block-navigation-item::before,
.site-nav button.wp-block-navigation__responsive-container-open::before { top: -3px; }
.site-header__logo::after,
.site-nav .wp-block-navigation-item::after,
.site-nav button.wp-block-navigation__responsive-container-open::after { bottom: -3px; }

/* ---------- Mobile (< 768px) : case "gi" + case "Menu" ---------- */
@media (max-width: 767px) {
	.site-header { left: 20px; right: 20px; }
	.site-nav .wp-block-navigation__container { display: none; }
	.site-nav button.wp-block-navigation__responsive-container-open {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 47px;
		margin-left: -1px;
		background: none;
		border: 1px solid var(--hb);
		color: inherit;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 15px;
		box-sizing: border-box;
	}
	.site-nav button.wp-block-navigation__responsive-container-open svg { display: none; }
	.site-nav button.wp-block-navigation__responsive-container-open .gi-menu-label {
		position: relative;
		z-index: 1;
	}
}

@media (min-width: 768px) {
	.site-nav button.wp-block-navigation__responsive-container-open,
	.site-nav button.wp-block-navigation__responsive-container-close { display: none; }
}

/* Menu mobile ouvert : liste de cases empilées, fond plein, carrés d'angle */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	z-index: 200;
	background-color: #FFFEF8;
	color: #785426;
	overflow-y: auto;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	flex: none;
	border-inline-start: none;
	border-block-start: 1px solid #000000;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::before,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::after {
	background: linear-gradient(to right, #000000 0 6px, transparent 6px calc(100% - 6px), #000000 calc(100% - 6px) 100%);
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 19px;
	padding: 1.1rem 1.5rem;
	justify-content: flex-start;
}
.site-nav button.wp-block-navigation__responsive-container-close {
	color: inherit;
	padding: 0.85rem 1.5rem;
	position: relative;
	z-index: 201;
}

/* ---------- Hero (page d'accueil) ----------
   dimRatio du bloc Cover réglé à 20 (voile noir léger, cf. patterns/hero.php)
   pour que le menu reste lisible une fois la vraie photo en place — mais
   tant qu'aucune image/vidéo n'est réglée, ce voile à 20% seul est presque
   invisible sur fond clair. Fond de secours à pleine opacité pour cet
   état "vide" uniquement (:has() détecte l'absence d'<img>/<video>). */
.hero.wp-block-cover {
	margin: 0;
}
.hero.wp-block-cover:not(:has(img)):not(:has(video)) {
	background-color: var(--wp--preset--color--text);
}
.hero .wp-block-cover__inner-container {
	width: 100%;
	padding: 2rem;
}
.hero__link a {
	color: #FFFFFF;
	font-size: 1.1rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Voile du hero forcé en CSS : la page d'accueil enregistrée en base garde
   l'ancien réglage (#7A4E1E à 50%) que le pattern du thème ne met pas à jour. */
.hero .wp-block-cover__background,
.page-hero-media.wp-block-cover .wp-block-cover__background {
	background-color: #000 !important;
	opacity: 0.2 !important;
}

/* Hero de page issu du bloc Cover (About) */
.page-hero-media.wp-block-cover { margin: 0; }
.page-hero-media.wp-block-cover:not(:has(img)):not(:has(video)) {
	background-color: var(--wp--preset--color--text);
}
.page-hero-media.wp-block-cover .wp-block-cover__inner-container { width: 100%; padding: 2rem; }

/* Hero de page issu du gabarit classique single-project.php / archive-project.php
   (image mise en avant du projet) : fond de secours uni tant qu'aucune image
   n'est réglée, voile noir à 20% sinon (cohérent avec le bloc Cover ci-dessus),
   pour que l'en-tête reste toujours lisible. */
.page-hero-media:not(.wp-block-cover) {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: flex-end;
	padding: 2rem;
	background-color: var(--wp--preset--color--text);
	background-image: var(--hero-image, none);
	background-size: cover;
	background-position: center;
}
.page-hero-media:not(.wp-block-cover) .hero__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.20);
}

.page-hero-media__title {
	position: relative;
	z-index: 1;
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	margin: 0;
}

.page-hero {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: clamp(2rem, 6vw, 4rem) 1.5rem 1rem;
}

/* Contenu (page-content Gutenberg dynamique + gabarit classique single-project.php) */
.wp-block-post-content,
.entry-content {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
	padding-inline: 1.5rem;
}
.wp-block-post-content > * + *,
.entry-content > * + * { margin-top: 1.75rem; }
.entry-content img { border: 1px dashed var(--wp--preset--color--line); }

/* ---------- Espacements de la page ----------
   WordPress ajoute un blockGap (28px) entre les blocs de premier niveau :
   neutralisé, les espacements sont posés explicitement section par section. */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

/* ---------- Intro : 40px sous le hero, 64px avant l'accordéon ---------- */
.section.intro {
	padding-block: 40px 64px;
}
.intro__text {
	max-width: 44rem;
	margin: 0;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 700;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
}

/* ---------- Accordéon value / materials / services ----------
   Un seul cadre 1px (#C9AE84) autour de la liste ET de l'image, carrés 6x6
   aux 4 coins ; 2 colonnes collées (liste 44% / image 56%). Chaque trait de
   séparation de la liste va de bord à bord de la colonne, avec un carré à
   chaque extrémité. */
.accordion-group.section {
	padding-block: 0 clamp(2rem, 6vw, 4rem);
}
.accordion__frame {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	border: 1px solid var(--wp--preset--color--line);
}

/* Balisage historique (déjà enregistré en base sur la page d'accueil) :
   <section class="accordion-group"> > .accordion__list + .accordion__media,
   SANS wrapper .accordion__frame. La section elle-même devient alors la
   grille encadrée, centrée (largeur max 1220px, mêmes gouttières latérales
   que .section) — le cadre n'occupe donc pas toute la largeur de l'écran. */
.accordion-group.section:not(:has(> .accordion__frame)) {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	width: calc(100% - 2 * clamp(1rem, 4vw, 2.5rem));
	max-width: 1220px;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 6vw, 4rem);
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
}
@media (min-width: 768px) {
	.accordion__frame,
	.accordion-group.section:not(:has(> .accordion__frame)) {
		grid-template-columns: 44fr 56fr;
		min-height: 430px;
	}
}
.accordion-group > *,
.accordion__frame > *,
.accordion__list > * {
	margin-block-start: 0 !important;
}

.accordion__frame::before,
.accordion__frame::after,
.accordion-group.section:not(:has(> .accordion__frame))::before,
.accordion-group.section:not(:has(> .accordion__frame))::after,
.accordion__list .wp-block-details + .wp-block-details > summary::before {
	content: '';
	position: absolute;
	left: -3px;
	right: -3px;
	height: 6px;
	background: linear-gradient(to right, var(--wp--preset--color--line) 0 6px, transparent 6px calc(100% - 6px), var(--wp--preset--color--line) calc(100% - 6px) 100%);
	pointer-events: none;
}
.accordion__frame::before,
.accordion-group.section:not(:has(> .accordion__frame))::before { top: -3px; }
.accordion__frame::after,
.accordion-group.section:not(:has(> .accordion__frame))::after { bottom: -3px; }
.accordion__list .wp-block-details + .wp-block-details > summary { position: relative; }
.accordion__list .wp-block-details + .wp-block-details > summary::before { top: -3.5px; }

.accordion__list {
	min-width: 0;
}
.accordion__list .wp-block-details {
	position: relative;
	margin: 0;
	padding: 0;
}
.accordion__list .wp-block-details + .wp-block-details {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.accordion__list .wp-block-details summary {
	display: block;
	padding: 10px 20px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.2;
	color: #6B4A22;
	cursor: pointer;
	list-style: none;
}
.accordion__list .wp-block-details summary::-webkit-details-marker { display: none; }
.accordion__list .wp-block-details summary::marker { content: ''; }

.accordion__list .wp-block-details > p {
	margin: 0;
	padding: 0 20px 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	line-height: 1.5;
}

/* Image "source" de chaque volet : cachée, sert uniquement de données pour le JS */
.accordion-swap-image { display: none; }

.accordion__media {
	margin: 0 !important;
	border: 0;
	overflow: hidden;
	min-height: 260px;
}
.accordion__media .accordion-shared-image,
.accordion__media .accordion-shared-image img {
	width: 100%;
	height: 100%;
	margin: 0;
}
.accordion__media .accordion-shared-image img { object-fit: cover; display: block; }
.accordion__media .accordion-shared-image { position: relative; overflow: hidden; }
/* Fondu enchaîné (assets/js/main.js) : la nouvelle image se superpose à l'ancienne. */
.accordion__media .accordion-shared-image .gi-accordion-next {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.accordion__media .accordion-shared-image .gi-accordion-next.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.accordion__media .accordion-shared-image .gi-accordion-next { transition: none; }
}

/* Mobile : pas de colonne image à droite — l'image de l'onglet ouvert
   s'affiche sous son texte (c'est la même figure .accordion-swap-image
   qui reste cachée sur desktop). */
@media (max-width: 767px) {
	.accordion__media { display: none; }
	.accordion__list .wp-block-details[open] > .accordion-swap-image {
		display: block;
		margin: 0;
		padding: 0 20px 20px;
	}
	.accordion__list .wp-block-details[open] > .accordion-swap-image img {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* ---------- Grille projets (pattern gi/projects-grid) ----------
   4 images en 2x2 (1 colonne sous 768px), gap 20px, ratio 19:10 identique,
   sans bordure. Un lien posé sur une image (Image > Lien) lui donne l'effet
   de survol : opacité 0.85 + curseur pointeur, transition 0.3s. */
.section.projects-grid {
	padding-block: 64px;
	margin-block-start: 0 !important;
}
.projects-grid__inner {
	max-width: 1220px;
	margin-inline: auto;
}
.projects-grid__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 768px) {
	.projects-grid__grid { grid-template-columns: 1fr 1fr; }
}
.projects-grid__grid > * {
	margin: 0 !important;
}
.projects-grid__item {
	margin: 0;
}
.projects-grid__item a {
	display: block;
	cursor: pointer;
}
.projects-grid__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 19 / 10;
	object-fit: cover;
	border: 0;
	transition: opacity 0.3s ease;
}
.projects-grid__item a:hover img,
.projects-grid__item a:focus-visible img {
	opacity: 0.85;
}
.projects-grid__inner > .projects-grid__more {
	margin: 24px 0 0 !important;
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
}
.projects-grid__more a {
	color: #6B4A22;
	text-decoration: underline;
}

/* ---------- Bande image plein cadre ---------- */
.media-band.wp-block-cover { margin: 0; }

/* ---------- Contact ---------- */
.contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	border-block-start: 1px dashed var(--wp--preset--color--line);
	padding-block: clamp(2.5rem, 6vw, 5rem);
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}
@media (min-width: 900px) {
	.contact { grid-template-columns: 0.85fr 1.5fr; }
}
.contact__heading { font-size: 1.15rem; font-weight: 700; }

/* Formulaire Fluent Forms : approche des listes "cliquables" (option
   sélectionnée en gras/foncé, les autres en gris) plutôt que des puces
   radio classiques. Sélecteurs volontairement génériques + noms de classes
   Fluent Forms usuels : à ajuster une fois le vrai formulaire construit
   (cf. GUIDE.md) si Fluent Forms a changé sa structure HTML. */
.contact__form,
.contact__form .fluentform,
.contact__form form {
	font-family: var(--wp--preset--font-family--body);
}
.contact__form .ff-el-form-control,
.contact__form input[type="text"],
.contact__form input[type="tel"],
.contact__form textarea {
	border: none;
	border-block-end: 1px dashed var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
	padding: 0.4rem 0;
	font-family: inherit;
	color: var(--wp--preset--color--text);
}
.contact__form .ff-el-input--label,
.contact__form label {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}
.contact__form .ff-el-form-check,
.contact__form .ff-el-radio-item,
.contact__form .ff-el-checkbox-item {
	display: block;
	margin-block-end: 0.35rem;
}
.contact__form .ff-el-form-check label,
.contact__form .ff-el-radio-item label,
.contact__form .ff-el-checkbox-item label {
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--wp--preset--color--text) 45%, transparent);
	cursor: pointer;
}
.contact__form .ff-el-form-check:has(input:checked) label,
.contact__form .ff-el-radio-item:has(input:checked) label,
.contact__form .ff-el-checkbox-item:has(input:checked) label {
	color: var(--wp--preset--color--text);
	font-weight: 700;
}
.contact__form button[type="submit"],
.contact__form .ff-btn-submit {
	background-color: var(--wp--preset--color--accent);
	color: #FFFFFF;
	border: none;
	border-radius: 0;
	padding: 0.65em 1.4em;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
}
.contact__form button[type="submit"]:hover,
.contact__form .ff-btn-submit:hover { opacity: 0.85; }

/* ---------- Footer ---------- */
.site-footer {
	border-block-start: 1px dashed var(--wp--preset--color--line);
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding-block: clamp(2rem, 5vw, 3rem);
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}
@media (min-width: 768px) {
	.site-footer { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}
.site-footer__logo { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; font-weight: 700; margin: 0; }
.site-footer__tagline { opacity: 0.75; max-width: 20rem; font-size: 0.85rem; margin: 0.5rem 0 0; }
.site-footer__row { display: flex; flex-wrap: wrap; gap: 2rem; font-size: 0.85rem; }
.site-footer__col p { margin: 0 0 0.25em; }

/* ---------- Project card (archive-project.php / single-project.php, cf. GUIDE.md) ---------- */
.project-block {
	display: grid;
	grid-template-columns: 1fr;
	border-block-start: 1px dashed var(--wp--preset--color--line);
}
.project-block:last-child { border-block-end: 1px dashed var(--wp--preset--color--line); }
.project-block__body { padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.project-block__title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--wp--preset--color--accent); margin-bottom: 0.15em; font-family: var(--wp--preset--font-family--heading); }
.project-block__title a { text-decoration: none; color: inherit; }
.project-block__meta { display: block; font-size: 0.85rem; opacity: 0.7; margin-bottom: 1.5rem; }
.project-block__excerpt p { font-size: 0.85rem; opacity: 0.85; }
.project-block__media { aspect-ratio: 4 / 3; overflow: hidden; }
.project-block__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
	.project-block { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.project-block__body { display: flex; flex-direction: column; justify-content: center; }
}

.entry-meta { padding-block-start: clamp(1.5rem, 4vw, 2.5rem); }