/*
 * Styles additionnels minimaux — voir CLAUDE.md : le design vient d'abord
 * de theme.json, ceci ne couvre que ce qu'aucun preset/support natif ne
 * permet d'exprimer (l'habillage propre au header/footer, l'effet de
 * survol de la navigation). Partagé à l'identique avec codejuice-starter-theme
 * (voir son propre assets/css/site.css) — les deux thèmes gardent le même
 * habillage de base, seules les fonctionnalités catalogue/configurateur
 * divergent entre les deux.
 */

/* Polices du style "Vitaminé" (voir inc/global-styles.php), auto-hébergées :
   aucune requête vers un CDN tiers. Fichiers variables, sous-ensemble latin
   uniquement. Un @font-face ne télécharge son fichier que si une règle
   l'utilise réellement sur la page — aucun coût pour les démos qui
   n'utilisent pas ce style. */
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin-var.woff2") format("woff2");
}

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("../fonts/sora-latin-var.woff2") format("woff2");
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2");
}

/* Collision réelle de WordPress : le slug de palette "border" génère
   ".has-border-color { color: var(--wp--preset--color--border) !important }",
   alors que ".has-border-color" est AUSSI la classe que le support de
   bordure natif ajoute à tout bloc ayant une couleur de bordure. Résultat :
   le texte de n'importe quel bloc avec bordure passait en couleur de bordure
   (quasi invisible). Un vrai "textColor: border" porte toujours aussi
   ".has-text-color" — on ne neutralise donc que le cas "bordure seule". */
.has-border-color:not(.has-text-color) {
	color: inherit !important;
}

/* En-tête : WordPress enveloppe une partie de template déclarée "area":
   "header" dans un vrai <header>, donc pas besoin de retoucher header.html
   pour l'habiller. */
header {
	background-color: var(--wp--preset--color--surface-alt);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--base);
}

/* Effet de survol des liens du menu principal : un trait qui s'étend
   depuis le centre plutôt qu'un fond plein — la couleur du texte et celle
   du trait changent ensemble, même transition de 0.3s pour les deux. */
header .wp-block-navigation-item__content {
	position: relative;
	transition: color 0.3s ease;
}

header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.25rem;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	transition: width 0.3s ease, left 0.3s ease;
}

/* Le double sélecteur de classe n'est pas une coquille : WordPress core
   applique lui-même "color: inherit" via une astuce de spécificité
   identique (".wp-block-navigation-item__content.wp-block-navigation-item__content"),
   plus fort qu'un simple ":hover" — vérifié directement (la couleur ne
   changeait pas du tout au survol tant que celui-ci restait à 2 classes)
   plutôt que supposé. */
header .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
header .wp-block-navigation-item__content.wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
}

header .wp-block-navigation-item__content:hover::after,
header .wp-block-navigation-item__content:focus::after {
	left: 0;
	width: 100%;
}

/* Pied de page : même habillage que l'en-tête (fond + padding), pour le
   même effet "bookend" visuel des deux extrémités du site. */
footer {
	background-color: var(--wp--preset--color--surface-alt);
	padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
}

/* La colonne "Navigation" du pied de page utilisait l'espacement par
   défaut du bloc Navigation (pensé pour un menu horizontal), beaucoup
   trop généreux une fois empilé verticalement en colonne — légèrement
   réduit par rapport au preset "xs" lui-même, encore un peu trop large
   ici. */
footer .wp-block-navigation .wp-block-navigation__container {
	gap: calc( var(--wp--preset--spacing--xs) / 2 );
	align-items: center;
}

/* Le centrage ci-dessus ne suffit pas à lui seul : le <ul> est enveloppé
   dans .wp-block-navigation__responsive-container-content, un conteneur
   flex (colonne) dont le "align-items: flex-start" par défaut de
   WordPress core laisse le <ul> — même correctement centré en interne —
   collé à gauche à l'intérieur de CE parent. Encore une bataille de
   spécificité comme celle du "color: inherit" plus haut : core cible ce
   même conteneur via ".wp-block-navigation__responsive-container
   .wp-block-navigation__responsive-container-content" (2 classes), plus
   fort qu'un simple sélecteur "footer .maclasse" — repris ici à
   l'identique pour gagner. Vérifié directement (liste des règles
   correspondantes) avant d'ajouter ce correctif plutôt que supposé. */
footer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
	align-items: center;
}

/* Colonnes centrées, titres et texte réduits — les tailles par défaut de
   theme.json (pensées pour le corps de page) lisaient trop grand une fois
   dans un pied de page. */
footer .wp-block-column {
	text-align: center;
}

footer h3.wp-block-heading {
	font-size: var(--wp--preset--font-size--base);
}

footer p,
footer .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
}

/* Le copyright hérite du même blockGap que tout le reste (theme.json,
   "spacing--s") — trop d'air entre lui et la ligne "Adresse, téléphone,
   e-mail" juste au-dessus, vu sa nature de simple mention secondaire. */
footer .cj-footer-copyright {
	margin-top: var(--wp--preset--spacing--xs);
}

/* Repli natif de WordPress quand le "ref" du bloc Navigation ne pointe
   vers aucun menu réel (ex. ce site n'a jamais eu de menu importé/assigné
   pour cet emplacement) : core/navigation affiche alors une liste de
   pages à la place, avec un balisage différent (pas de classe
   "wp-block-navigation__container") — les règles ci-dessus ne s'y
   appliquent donc pas, il faut les dupliquer pour ce cas précis. Trouvé
   en inspectant directement demo.codejuice.fr : son pied de page utilise
   encore ce repli, jamais câblé à un vrai menu. */
footer .wp-block-page-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc( var(--wp--preset--spacing--xs) / 2 );
}

footer .wp-block-pages-list__item__link {
	font-size: var(--wp--preset--font-size--small);
}

/* Bug WordCore réel, pas propre à ce thème : dès qu'un theme.json déclare
   un "styles.color.text" racine (celui-ci le fait — voir plus haut dans
   theme.json), WordPress génère AUSSI une règle ".has-text-color { color:
   var(--wp--preset--color--text) !important }" à partir de cette valeur
   racine — en plus des règles ".has-{slug}-color" propres à chaque
   couleur de la palette, elles aussi en "!important". Un bloc avec
   "textColor: accent" (ou toute autre couleur que "text") rend TOUJOURS
   les deux classes ensemble ("has-accent-color has-text-color" — balisage
   standard de Gutenberg, pas une erreur de pattern), et comme les deux
   règles ont la même spécificité ET "!important", c'est l'ORDRE SOURCE qui
   tranche — ".has-text-color" arrive après les règles de palette dans la
   feuille de styles générée par WordPress, donc GAGNE, et la couleur
   spécifique demandée (accent, primary...) ne s'applique jamais tant que
   "has-text-color" est aussi présent. Repéré en construisant la page
   d'accueil de l'agence (voir templates/front-page.html) — "AGENCE WEB &
   MOBILE" restait gris/texte au lieu de jaune malgré "textColor: accent"
   correctement posé — puis confirmé comme préexistant et théâtre-large en
   le retrouvant AUSSI sur une démo client déjà en prod (les étoiles ⭐ de
   cj-avis-google.php, "textColor: accent", rendues dans la couleur de
   texte par défaut depuis le début, jamais remarqué jusqu'ici). Ce fichier
   (cj-site-css) est le DERNIER <style>/<link> du <head> — vérifié en
   direct — donc réaffirmer chaque couleur de palette ici gagne le même
   bras de fer par ordre source, dans l'autre sens cette fois. */
.has-primary-color {
	color: var(--wp--preset--color--primary) !important;
}

.has-primary-dark-color {
	color: var(--wp--preset--color--primary-dark) !important;
}

.has-secondary-color {
	color: var(--wp--preset--color--secondary) !important;
}

.has-accent-color {
	color: var(--wp--preset--color--accent) !important;
}

.has-surface-color {
	color: var(--wp--preset--color--surface) !important;
}

.has-surface-alt-color {
	color: var(--wp--preset--color--surface-alt) !important;
}

.has-surface-dark-color {
	color: var(--wp--preset--color--surface-dark) !important;
}

.has-text-light-color {
	color: var(--wp--preset--color--text-light) !important;
}

.has-text-invert-color {
	color: var(--wp--preset--color--text-invert) !important;
}

.has-danger-color {
	color: var(--wp--preset--color--danger) !important;
}

/* Liste à tirets (voir patterns/cja-services-detail.php) : deux colonnes,
   tiret de couleur primaire en guise de puce. */
.cj-list-dash {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(var(--wp--preset--spacing--xs) * 1.5) var(--wp--preset--spacing--s);
	margin: var(--wp--preset--spacing--s) 0 0;
	padding: 0;
	list-style: none;
}

.cj-list-dash li {
	display: flex;
	gap: calc(var(--wp--preset--spacing--xs) * 1.25);
	margin: 0;
}

.cj-list-dash li::before {
	content: "—";
	color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.cj-list-dash {
		grid-template-columns: 1fr;
	}
}

/* Liens "→" des patterns de l'agence : sans soulignement au repos. */
.cj-link-plain a {
	text-decoration: none;
}

.cj-link-plain a:hover,
.cj-link-plain a:focus-visible {
	text-decoration: underline;
}

/* Texte d'accompagnement légèrement estompé sur fond coloré (la maquette
   utilise une teinte claire du fond, pas du blanc plein). */
.cj-text-soft {
	opacity: 0.8;
}

/* Style de bloc "Flottant" de core/image : léger va-et-vient vertical
   (maquette d'accueil : 12px sur 6s). Coupé pour qui demande moins de
   mouvement. */
@keyframes cj-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-12px);
	}
}

.wp-block-image.is-style-float img {
	animation: cj-float 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-image.is-style-float img {
		animation: none;
	}
}

/* Fil d'Ariane : lien discret, page courante en texte plein. */
.cja-breadcrumb a {
	color: inherit;
}

.cja-breadcrumb__current {
	color: var(--wp--preset--color--text);
}

/* ==========================================================================
   Fiche d'un article de blog (modèle single:post, patterns cja-article-*)
   ========================================================================== */

/* Trois colonnes : sommaire | article | partage et appel à l'action. */
.cja-article-layout {
	display: grid;
	grid-template-columns: 13.75rem minmax(0, 1fr) 12.5rem;
	gap: var(--wp--preset--spacing--l);
	align-items: start;
}

.cja-article-layout > * {
	margin-block: 0;
}

.cja-article-side {
	position: sticky;
	top: 7rem;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
}

.cja-article-side > * {
	margin-block: 0;
}

@media (max-width: 1100px) {
	.cja-article-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.cja-article-side {
		position: static;
	}

	.cja-article-side--start {
		display: none;
	}
}

/* Corps de l'article : le contenu de l'éditeur, mis en page comme la maquette. */
.cja-prose {
	color: var(--wp--preset--color--text);
	font-size: calc(var(--wp--preset--font-size--base) * 1.0625);
	line-height: 1.85;
}

.cja-prose p {
	margin: 0 0 1.25rem;
}

.cja-prose h2,
.cja-prose h3 {
	color: var(--wp--preset--color--text);
}

.cja-prose h2 {
	margin: var(--wp--preset--spacing--l) 0 1.125rem;
	scroll-margin-top: 7rem;
	font-size: var(--wp--preset--font-size--title);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.cja-prose h3 {
	margin: var(--wp--preset--spacing--m) 0 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.cja-prose a {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

.cja-prose ul,
.cja-prose ol {
	margin: 0 0 1.5rem;
	padding-left: 1.375rem;
}

.cja-prose li + li {
	margin-top: 0.5rem;
}

.cja-prose p code,
.cja-prose li code {
	padding: 0.1em 0.4em;
	border-radius: 4px;
	background-color: var(--wp--preset--color--surface-alt);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
}

.cja-prose pre.wp-block-code {
	position: relative;
	margin: 0 0 1.5rem;
	padding: 2.75rem 1.5rem 1.25rem;
	overflow-x: auto;
	white-space: pre;
	border: 0;
	border-radius: var(--wp--custom--radius--m);
	background-color: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--text-invert);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

.cja-prose pre.wp-block-code code {
	background: none;
	color: inherit;
	font-size: inherit;
}

.cja-code-copy {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	padding: 0.3rem 0.65rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--text-invert) 25%, transparent);
	border-radius: 5px;
	background: transparent;
	color: var(--wp--preset--color--text-invert);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	cursor: pointer;
}

/* Documents légaux générés par Complianz (politique de cookies…) : ils arrivent en HTML brut dans le
   contenu de la page, sans groupe ni titre. On les cadre comme les autres pages légales. */
.wp-block-post-content > .cmplz-document {
	box-sizing: border-box;
	max-width: 48rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m);
	line-height: 1.7;
}

/* Logo de la carte « réseau » : s'adapte à l'écran (de 10 à 16 rem), sans largeur à régler à la main. */
.cja-network-logo {
	margin: 0 0 var(--wp--preset--spacing--s);
	text-align: center;
}

.cja-network-logo img {
	width: clamp(10rem, 28vw, 16rem);
	max-width: 100%;
	height: auto;
}

/* Complianz fixe `#cmplz-document { max-width: 800px }` : un identifiant l'emporte sur la classe ci-dessus. */
.wp-block-post-content > #cmplz-document {
	max-width: 48rem;
}

/* Titre ajouté dans l'éditeur au-dessus du document : même colonne que le texte. */
.wp-block-post-content > h1:has(+ .cmplz-document) {
	box-sizing: border-box;
	max-width: 48rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m) 0;
}

.wp-block-post-content > h1:has(+ .cmplz-document) + .cmplz-document {
	padding-top: var(--wp--preset--spacing--m);
}

.wp-block-post-content > .cmplz-document h2 {
	margin: var(--wp--preset--spacing--l) 0 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-post-content > .cmplz-document h3 {
	margin: var(--wp--preset--spacing--m) 0 0.5rem;
}

.wp-block-post-content > .cmplz-document a {
	color: var(--wp--preset--color--primary);
}

.cja-prose .wp-block-table {
	margin: 0 0 1.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--m);
}

.cja-prose .wp-block-table table {
	min-width: 30rem;
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.cja-prose .wp-block-table th,
.cja-prose .wp-block-table td {
	padding: 0.75rem 1.125rem;
	border: 0;
	text-align: left;
}

.cja-prose .wp-block-table th {
	background-color: var(--wp--preset--color--surface-alt);
	font-weight: 600;
}

.cja-prose .wp-block-table td {
	border-top: 1px solid var(--wp--preset--color--border);
}

.cja-prose .wp-block-table td:first-child {
	font-family: var(--wp--preset--font-family--mono);
}

/* Encadrés : styles du block Groupe « En bref » et « À noter ». */
.cja-prose .is-style-cja-summary {
	margin: 0 0 var(--wp--preset--spacing--m);
	padding: calc(var(--wp--preset--spacing--s) * 1.75) calc(var(--wp--preset--spacing--s) * 2);
	border-radius: var(--wp--custom--radius--m);
	background-color: var(--wp--preset--color--surface-alt);
	line-height: 1.7;
}

.cja-prose .is-style-cja-summary::before {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--primary);
	content: "En bref";
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cja-prose .is-style-cja-summary ul {
	margin: 0;
}

.cja-prose .is-style-cja-summary li code {
	background-color: var(--wp--preset--color--surface);
}

.cja-prose .is-style-cja-note {
	display: flex;
	gap: var(--wp--preset--spacing--s);
	margin: 0 0 1.5rem;
	padding: calc(var(--wp--preset--spacing--s) * 1.25) calc(var(--wp--preset--spacing--s) * 1.5);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--s);
}

.cja-prose .is-style-cja-note::before {
	flex: none;
	align-self: flex-start;
	padding: 0.375rem 0.5rem 0.25rem;
	border-radius: 5px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text);
	content: "À noter";
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	text-transform: uppercase;
}

/* Pastille de texte en capitales (mono) : interligne serré, et un peu plus d'air
   au-dessus qu'en dessous pour que les capitales accentuées (À, Ô, É) paraissent
   centrées. */
.cja-badge {
	display: inline-block;
	width: fit-content;
	padding-top: 0.375rem;
	padding-bottom: 0.25rem;
	line-height: 1 !important;
}

.cja-prose .is-style-cja-note > * {
	margin: 0;
	color: var(--wp--preset--color--text-light);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

/* Questions fréquentes : le block Détails en accordéon. */
.cja-prose .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cja-prose :not(.wp-block-details) + .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--border);
}

.cja-prose .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	padding: 1.25rem 0;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.cja-prose .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.cja-prose .wp-block-details summary::after {
	flex: none;
	color: var(--wp--preset--color--primary);
	content: "+";
}

.cja-prose .wp-block-details[open] summary::after {
	content: "−";
}

.cja-prose .wp-block-details > :not(summary) {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--text-light);
	line-height: 1.75;
}

/* Carte d'appel à l'action du bandeau latéral (marge intérieure de la maquette : 24px). */
.cja-article-cta {
	padding: calc(var(--wp--preset--spacing--s) * 1.5);
	border-radius: var(--wp--custom--radius--m);
}

.cja-article-cta > * {
	margin-block: 0;
}

.cja-article-cta > * + * {
	margin-top: var(--wp--preset--spacing--xs);
}

.cja-article-cta .wp-block-button__link {
	padding: 0.625rem;
}

/* ==========================================================================
   Fiche d'un projet (modèle single:projets, patterns cja-projet-*)
   ========================================================================== */

.cja-projet-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr);
	gap: var(--wp--preset--spacing--l);
	align-items: start;
}

.cja-projet-layout > * {
	margin-block: 0;
}

.cja-projet-card {
	position: sticky;
	top: 7rem;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--m);
	border-radius: var(--wp--custom--radius--m);
}

.cja-projet-card > * {
	margin-block: 0;
}

@media (max-width: 899px) {
	.cja-projet-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.cja-projet-card {
		position: static;
	}
}

/* Texte du projet : sobre, comme la maquette (titres Client / Mission / Résultat). */
.cja-prose--projet {
	color: var(--wp--preset--color--text-light);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.8;
}

.cja-prose--projet > .wp-block-post-content > :first-child {
	margin-top: 0;
}

.cja-prose--projet h2 {
	margin: var(--wp--preset--spacing--m) 0 1rem;
	font-size: var(--wp--preset--font-size--title);
	letter-spacing: 0;
	line-height: 1.3;
}

.cja-prose--projet p {
	margin: 0 0 var(--wp--preset--spacing--s);
}

/* Style de groupe « Axes » : chaque sous-groupe reçoit un liseré gauche coloré. */
.cja-prose .is-style-cja-axes {
	display: flex;
	flex-direction: column;
	gap: calc(var(--wp--preset--spacing--s) * 1.25);
	margin: var(--wp--preset--spacing--s) 0 var(--wp--preset--spacing--m);
}

.cja-prose .is-style-cja-axes > .wp-block-group {
	margin: 0;
	padding-left: calc(var(--wp--preset--spacing--s) * 1.25);
	border-left: 3px solid var(--wp--preset--color--primary);
}

.cja-prose .is-style-cja-axes > .wp-block-group:nth-child(3n + 2) {
	border-left-color: var(--wp--preset--color--accent-3);
}

.cja-prose .is-style-cja-axes > .wp-block-group:nth-child(3n + 3) {
	border-left-color: var(--wp--preset--color--accent);
}

.cja-prose .is-style-cja-axes h3 {
	margin: 0 0 0.5rem;
}

.cja-prose .is-style-cja-axes p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

/* ==========================================================================
   Responsive : ajustements communs aux patterns de l'agence (< 782px)
   ========================================================================== */
@media (max-width: 781px) {
	/* Un groupe ou des boutons alignés à droite sur grand écran n'ont plus de
	   raison de l'être une fois empilés sous le texte. */
	.is-layout-flex.is-content-justification-right {
		justify-content: flex-start;
	}

	/* Portraits de l'équipe (accueil) : empilés, chacun dans un cercle de taille
	   raisonnable et centré. */
	.cja-team-strip {
		gap: var(--wp--preset--spacing--m);
	}

	.cja-team-strip > .wp-block-column {
		width: 100%;
		max-width: 13rem;
		margin-inline: auto;
	}
}

/* Tablette (600–781px) : les séries de trois cartes restent côte à côte et les
   séries de quatre passent en deux par ligne, au lieu de s'empiler chacune sur
   toute la largeur. */
@media (min-width: 600px) and (max-width: 781px) {
	/* Tuiles de chiffres (Agence) : deux par ligne, empilées seulement sur mobile. */
	.wp-block-columns.cja-stat-row {
		flex-wrap: nowrap !important;
	}

	.wp-block-columns.cja-stat-row > .wp-block-column {
		box-sizing: border-box;
		min-width: 0;
		flex-basis: 0 !important;
	}

	.wp-block-columns:has(> .wp-block-column:nth-child(3):last-child) {
		flex-wrap: nowrap !important;
	}

	.wp-block-columns:has(> .wp-block-column:nth-child(3):last-child) > .wp-block-column {
		box-sizing: border-box;
		min-width: 0;
		flex-basis: 0 !important;
	}

	.wp-block-columns:has(> .wp-block-column:nth-child(4):last-child) > .wp-block-column {
		box-sizing: border-box;
		flex-basis: calc((100% - var(--wp--style--block-gap, 1rem)) / 2) !important;
	}
}

/* Héros (accueil) : centré sur tablette et mobile, une fois les colonnes empilées. */
@media (max-width: 781px) {
	.cja-hero .wp-block-column {
		text-align: center;
	}

	.cja-hero .wp-block-buttons {
		justify-content: center;
	}

	/* L'illustration passe sous le texte : plus petite, sinon elle prend tout l'écran. */
	.cja-hero .wp-block-image img {
		width: clamp(8rem, 34vw, 11rem);
		max-width: 100%;
		height: auto;
	}
}

/* Mobile (< 600px) : titres, textes et boutons centrés dans le contenu des pages,
   sauf l'étiquette « Dernier projet », les listes, le texte des articles (.cja-prose)
   et les blocs dynamiques (cartes, formulaires, filtres) qui gardent leur
   alignement. */
@media (max-width: 599px) {
	:is(.wp-block-post-content, .cj-configurateur-content) :is(h1, h2, h3, h4, p, .wp-block-buttons, .wp-block-image):not(.has-text-align-left, .has-text-align-right):not(.cja-featured-label, .cja-prose *, [class*="wp-block-cja-"] *) {
		text-align: center;
	}

	:is(.wp-block-post-content, .cj-configurateur-content) .wp-block-buttons:not(.cja-prose *) {
		justify-content: center;
	}

	:is(.wp-block-post-content, .cj-configurateur-content) .wp-block-image:not(.cja-prose *) img {
		margin-inline: auto;
	}
}

/* Rangées de logos ou d'éléments (flex) : centrées sur mobile. */
@media (max-width: 599px) {
	:is(.wp-block-post-content, .cj-configurateur-content) .wp-block-group.is-layout-flex:not(.cja-prose *) {
		justify-content: center;
	}
}

/* Bandeau d'appel final : titre, texte et bouton à intervalles réguliers une fois empilés. */
@media (max-width: 781px) {
	.cja-cta-final .wp-block-columns {
		gap: var(--wp--preset--spacing--s);
	}

	.cja-cta-final .wp-block-heading {
		margin-bottom: var(--wp--preset--spacing--xs);
	}

	.cja-cta-final .wp-block-column > p {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* Mobile : échelle typographique resserrée pour que les titres tiennent
   sur moins de lignes (les presets fluides gardent leur plancher sinon). */
@media (max-width: 599px) {
	html body {
		--wp--preset--font-size--display: clamp(1.75rem, 8vw, 2rem);
		--wp--preset--font-size--xx-large: 1.75rem;
		--wp--preset--font-size--x-large: 1.5rem;
		--wp--preset--font-size--title: 1.375rem;
		--wp--preset--font-size--large: 1.1875rem;
		--wp--preset--font-size--medium: 1.0625rem;
		--wp--preset--font-size--base: 1rem;
	}
}

/* Mobile : échelle du héros d'accueil (pastille et texte au même rythme que le titre),
   encadré « À noter » et formulaire de contact. */
@media (max-width: 599px) {
	.cja-hero p.has-mono-font-family {
		font-size: 0.75rem !important;
	}

	.cja-hero p.has-medium-font-size {
		font-size: 0.9375rem !important;
		line-height: 1.65 !important;
	}

	.cja-hero .wp-block-button__link {
		font-size: 0.9375rem;
	}

	.cja-prose .is-style-cja-note {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.cja-prose .is-style-cja-note::before {
		align-self: center;
	}

	/* Section contact : moins de marge de chaque côté pour laisser respirer le formulaire. */
	.wp-block-group.alignfull:has(.wp-block-cja-contact-form) {
		padding-right: 0.75rem !important;
		padding-left: 0.75rem !important;
	}
}

/* Photos d'équipe : largeur et ombre décalée en CSS plutôt qu'en style en ligne, pour que
   le balisage reste celui que génère l'éditeur de blocs (sinon le bloc est signalé invalide). */
.cja-team-photo img {
	width: 100%;
}

.cja-team-photo--a img {
	box-shadow: -4px 4px 0 var(--wp--preset--color--primary);
}

.cja-team-photo--b img {
	box-shadow: 3px 3px 0 var(--wp--preset--color--primary);
}

.cja-team-photo--c img {
	box-shadow: -3px -2px 0 var(--wp--preset--color--primary);
}

/* Bouton « outline » sur fond de couleur (hero) : sa bordure suit la couleur du texte. Avant,
   un style en ligne le faisait ; il rendait le bloc invalide dans l'éditeur. */
.wp-block-button.is-style-outline > .wp-block-button__link.has-text-invert-color {
	border-color: currentColor;
}

/* ==========================================================================
   Contenu repris d'un ancien site : intertitres h4-h6, listes imbriquées, mises en page sans
   sommaire ni informations (les projets et articles importés n'ont pas toujours tout).
   ========================================================================== */

/* Les anciens contenus s'en servent comme intertitres de section ; sans règle, le navigateur les
   affichait en petit, collés au paragraphe précédent. */
.cja-prose h3,
.cja-prose h4,
.cja-prose h5,
.cja-prose h6 {
	scroll-margin-top: 7rem;
}

.cja-prose h4,
.cja-prose h5,
.cja-prose h6 {
	color: var(--wp--preset--color--text);
	line-height: 1.35;
}

.cja-prose h4 {
	margin: var(--wp--preset--spacing--m) 0 0.625rem;
	font-size: var(--wp--preset--font-size--large);
}

.cja-prose h5 {
	margin: var(--wp--preset--spacing--s) 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

.cja-prose h6 {
	margin: var(--wp--preset--spacing--s) 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cja-prose > .wp-block-post-content > :first-child {
	margin-top: 0;
}

/* Liste dans une liste : serrée contre son élément, pas une liste de plus dans le fil du texte. */
.cja-prose li > ul,
.cja-prose li > ol {
	margin: 0.5rem 0 0;
}

.cja-prose--projet h4 {
	font-size: var(--wp--preset--font-size--large);
}

.cja-prose--projet h2.cja-projet-section:first-child {
	margin-top: 0;
}

/* Article sans sommaire (moins de deux intertitres) : plus de colonne vide à gauche. */
@media (min-width: 1101px) {
	.cja-article-layout:not(:has(.cja-article-toc)) {
		grid-template-columns: minmax(0, 1fr) 12.5rem;
	}

	.cja-article-layout:not(:has(.cja-article-toc)) > .cja-article-side--start {
		display: none;
	}
}

/* Projet sans client, secteur ni prestations : le bouton seul, sans carte vide autour. */
.cja-projet-card:not(:has(.cja-projet-infos)) {
	padding: 0 !important;
	background: transparent !important;
}

/* Sommaire d'article : le clic sur un intertitre fait défiler en douceur au lieu de sauter
   (désactivé pour qui demande moins d'animations). */
@media (prefers-reduced-motion: no-preference) {
	html:has(.cja-article-toc) {
		scroll-behavior: smooth;
	}
}

/* Texte des boutons, pastilles et étiquettes : centré optiquement. La police place la ligne de base
   trop bas dans sa boîte de ligne (les capitales ressortent ~0,1em trop haut, quel que soit
   l'interligne) ; une cale avant le texte le descend de cet écart, une cale négative après lui rend
   sa hauteur à la boîte — le rembourrage, d'où qu'il vienne, n'est pas touché. */
:is(
	.wp-block-button__link,
	.wp-element-button,
	.cja-article-cta__button,
	.cja-article-share__button,
	.cja-projets-filter__chip,
	.cja-contact-form__chip span,
	.cja-contact-form__submit,
	.cja-newsletter-form__button,
	.cja-newsletter-unsub__button,
	.cja-projet-hero__tag,
	.cja-projet-recent__tag,
	.cja-projets-grid__tag,
	.cj-site-header__cta,
	.cj-configurateur-header-cta
)::before {
	display: block;
	height: 0.106em;
	content: "";
}

:is(
	.wp-block-button__link,
	.wp-element-button,
	.cja-article-cta__button,
	.cja-article-share__button,
	.cja-projets-filter__chip,
	.cja-contact-form__chip span,
	.cja-contact-form__submit,
	.cja-newsletter-form__button,
	.cja-newsletter-unsub__button,
	.cja-projet-hero__tag,
	.cja-projet-recent__tag,
	.cja-projets-grid__tag,
	.cj-site-header__cta,
	.cj-configurateur-header-cta
)::after {
	display: block;
	height: 0;
	margin-top: -0.106em;
	content: "";
}

/* Bandeau « Ils nous font confiance » : tous les logos ont la même hauteur et gardent leur propre
   largeur — aucun cadre vide autour. Ils passent à la ligne, alignés à droite (centrés sur petit
   écran), si la colonne est trop étroite ; un logo très large est borné à 10rem, entier. L'écart est
   fixe : il ne dépend pas de l'échelle d'espacement de la démo. */
.cja-trust-logos {
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.cja-trust-logo {
	flex: 0 0 auto;
	margin: 0;
}

.cja-trust-logo img {
	display: block;
	width: auto;
	max-width: 10rem;
	height: 2.25rem;
	object-fit: contain;
}

@media (max-width: 781px) {
	.cja-trust-logos {
		justify-content: center;
	}
}

/* Hauteur d'un logo précis (classe sur son bloc image) : sert à rendre visuellement équivalents des
   logos de proportions très différentes (un mot long et fin plus bas qu'un logo rond). */
.cja-trust-logo--h24 img {
	height: 24px;
}

.cja-trust-logo--h28 img {
	height: 28px;
}

.cja-trust-logo--h32 img {
	height: 32px;
}

.cja-trust-logo--h36 img {
	height: 36px;
}

.cja-trust-logo--h40 img {
	height: 40px;
}

.cja-trust-logo--h42 img {
	height: 42px;
}

.cja-trust-logo--h44 img {
	height: 44px;
}

.cja-trust-logo--h48 img {
	height: 48px;
}

.cja-trust-logo--h52 img {
	height: 52px;
}