/*
 * Studio Vivant 2026 : impression.
 *
 * Chargée après theme.css, seulement à l'impression (media="print", functions.php).
 * Principe : un document de traitement de texte sobre, dans l'identité du site
 * (Manrope, gris de la palette, titre composé, filets fins), sans effets ni grilles :
 * logo, titre, sous-titre, puis les contenus les uns sous les autres.
 *
 * 1. Les tokens de theme.json sont redéfinis à l'échelle du papier (pt, sans clamp ni vw) :
 *    toutes les règles du site qui s'en servent suivent sans être réécrites.
 * 2. Les mises en page (colonnes, flottants, grilles de cartes) sont remises à plat.
 * 3. Ce qui ne sert qu'à l'écran (menus, pied de page, appels à l'action) est masqué.
 */

/* ---------- Tokens papier ---------- */

:root {
	/*
	 * Tailles et espacements : ceux du mobile (minimums des clamp() de theme.json),
	 * mis à l'échelle du papier. --impression--rem remplace le rem : le texte, à
	 * 1.2rem sur mobile, fait ainsi 10.5pt, et tout le reste garde ses proportions.
	 * Les écarts « texte », « titre », « blocs » et « colonnes » de theme.json suivent
	 * seuls, puisqu'ils sont définis à partir de ces espacements.
	 */
	--impression--rem: calc(10.5pt / 1.2);

	--wp--preset--font-size--mention: calc(0.875 * var(--impression--rem));
	--wp--preset--font-size--petit: calc(1 * var(--impression--rem));
	--wp--preset--font-size--legende: calc(1.125 * var(--impression--rem));
	--wp--preset--font-size--texte: calc(1.2 * var(--impression--rem));
	--wp--preset--font-size--moyen: calc(1.4 * var(--impression--rem));
	--wp--preset--font-size--grand: calc(1.6 * var(--impression--rem));
	--wp--preset--font-size--tres-grand: calc(2.4 * var(--impression--rem));
	--wp--preset--font-size--accroche: calc(2.8 * var(--impression--rem));

	--wp--preset--spacing--10: calc(0.625 * var(--impression--rem));
	--wp--preset--spacing--20: calc(1.25 * var(--impression--rem));
	--wp--preset--spacing--30: calc(1.25 * var(--impression--rem));
	--wp--preset--spacing--40: calc(2 * var(--impression--rem));
	--wp--preset--spacing--50: calc(2.5 * var(--impression--rem));
	--wp--preset--spacing--60: calc(3 * var(--impression--rem));
	--wp--preset--spacing--70: calc(4 * var(--impression--rem));
	--wp--preset--spacing--80: calc(5 * var(--impression--rem));

	/* Plus de gouttière ni de colonnes : la marge de la page (@page) suffit. */
	--wp--custom--gouttiere: 0px;
	--wp--style--root--padding-left: 0px;
	--wp--style--root--padding-right: 0px;
	--wp--custom--colonne-texte: 100%;
	--wp--custom--colonne-marge: 100%;
	--wp--custom--colonne-titre: 100%;

	/* Tailles fixes réduites. */
	--wp--custom--logo: 28pt;
	--wp--custom--portrait: 36pt;
	--wp--custom--avatar: 24pt;
	--wp--custom--hauteur-entete: auto;
	--wp--custom--hauteur-intro: auto;

	/* Propres à l'impression. */
	--impression--image-max: 9cm;
	--impression--visuel-appoint: 5cm;
	--impression--filet: var(--wp--custom--trait) solid var(--wp--preset--color--retrait);
}

/*
 * Marges de la page. Les variables ne sont pas lues dans @page (contexte à part) :
 * valeurs écrites ici, à régler à cet endroit seulement.
 */
@page {
	size: A4;
	margin: 2cm 2.2cm;
}

/* ---------- Base ---------- */

html,
body {
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--texte);
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}

/* Paragraphes : pas de ligne seule en haut ou en bas de page. */
p,
li,
blockquote {
	orphans: 3;
	widows: 3;
}

/* Un titre ne reste jamais seul en bas de page. */
h1,
h2,
h3,
h4,
h5,
h6,
.is-style-etiquette {
	break-after: avoid;
	break-inside: avoid;
}

figure,
img,
.wp-block-quote,
.temoignage,
.ligne-auteur,
.credits,
.reseau__personne {
	break-inside: avoid;
}

/* ---------- Ce qui ne sert qu'à l'écran ---------- */

.site-header .menu-principal,
.site-header .wp-block-social-links,
.site-header__actions,
.site-footer,
.fil-ariane,
.ecran-seulement,
.autres-travaux,
.lire-la-suite a::before,
.wp-block-query-pagination,
.wp-block-search,
.wp-block-buttons,
video,
iframe,
.wp-block-embed {
	display: none !important; /* l'emporte sur les display posés par le cœur */
}

/* ---------- En-tête : le logo seul, en tête de document ---------- */

.site-header {
	min-height: 0;
	margin-block-end: var(--wp--preset--spacing--60);
	padding: 0;
}

/* ---------- Liens ---------- */

/* Sur papier, un lien n'est que du texte. */
a,
a:hover {
	color: inherit;
	text-decoration: none;
}

.lire-la-suite a {
	padding-inline-end: 0;
}

/* Liens externes dans le contenu : l'adresse suit, en petit et en gris. */
.wp-block-post-content a[href^="http"]:not([href*="studiovivant"])::after {
	content: " (" attr(href) ")";
	color: var(--wp--preset--color--secondaire);
	font-size: var(--wp--preset--font-size--mention);
	word-break: break-all;
}

/* ---------- Titres ---------- */

.titre-page,
.travail-entete .titre-page {
	width: auto;
	margin-block: 0 var(--wp--preset--spacing--40);
	margin-inline-start: 0;
}

/* Titre composé de la page : titre puis sous-titre en dessous, comme dans un document.
   Sur les cartes, il reste sur une ligne (« Titre : sous-titre »). */
.titre-page.titre-compose .wp-block-post-title,
.titre-page.titre-compose .sous-titre,
.titre-page.titre-compose .wp-block-post-excerpt__excerpt {
	display: block;
}

.titre-page.titre-compose:has(.sous-titre) .wp-block-post-title::after {
	content: none;
}

.titre-page.titre-compose .sous-titre {
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--secondaire);
}

.titre-colonne {
	margin-inline-start: 0 !important; /* annule le !important de theme.css */
}

/* Titre de section (pages en sections titrées) : à gauche. Le filet au-dessus est le
   séparateur placé dans le contenu (separateur-section). */
.section-titree h2,
.section-titree h2.has-text-align-right {
	text-align: start;
}

/* Le titre de section reste avec son contenu (le « pas de saut après un titre »
   ne franchit pas la frontière entre les deux colonnes). */
.section-titree > .wp-block-column:first-child {
	break-after: avoid;
}

/*
 * Colonne de contenu en bloc, pas en flex : un conteneur flex est souvent poussé
 * en entier à la page suivante. Les écarts du gap passent en marges.
 */
.section-titree > .wp-block-column:last-child {
	display: block;
}

.section-titree > .wp-block-column:last-child > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.section-titree > .wp-block-column:last-child > h3:not(:first-child) {
	margin-block-start: calc(var(--wp--preset--spacing--20) + var(--wp--preset--spacing--30));
}

/* ---------- Mise à plat ---------- */

/* Colonnes empilées, quelle que soit leur largeur réglée dans l'éditeur. */
.wp-block-columns {
	display: block !important; /* annule le flex et le align-items !important */
}

.wp-block-column {
	flex-basis: auto !important; /* annule la largeur en ligne */
	width: auto;
}

.wp-block-column + .wp-block-column {
	margin-block-start: var(--wp--custom--espace--texte);
}

/* Exception : les trois étapes de l'accueil (Comprendre, Réaliser, Faire évoluer)
   restent côte à côte, en colonnes égales. */
.wp-block-columns.accueil-expertise__domaines {
	display: flex !important; /* l'emporte sur la mise à plat ci-dessus */
	gap: var(--wp--custom--espace--colonnes);
	break-inside: avoid;
}

.accueil-expertise__domaines > .wp-block-column {
	flex: 1 1 0 !important; /* annule la largeur en ligne */
}

.accueil-expertise__domaines > .wp-block-column + .wp-block-column {
	margin-block-start: 0;
}

.chapeau {
	padding-inline-end: 0;
	margin-block-start: var(--wp--preset--spacing--40);
}

.accueil-intro {
	min-height: 0;
}

.accueil-presentation__texte {
	margin-inline-end: 0;
}

/* Métadonnées d'un projet : sur deux colonnes (règle dans theme.css, partagée avec
   le mobile), d'un seul tenant, avec les filets de l'impression. */
.travail-metadonnees {
	--filet-metadonnees: var(--impression--filet);
	break-inside: avoid;
}

/* Petits visuels d'appoint : plus dans la marge, à leur place dans le texte. */
.travail-contenu > .wp-block-image.is-resized:not(.alignwide, .alignfull) {
	float: none;
	width: var(--impression--visuel-appoint);
}

/*
 * Cartes (projets, actualités, toute boucle) : les grilles de l'écran large sont
 * gardées. La largeur imprimable (environ 630px) déclencherait les règles mobiles de
 * theme.css (une ou deux colonnes) : elles sont rétablies ici.
 */
.grille-travaux .wp-block-post-template {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grille-autres .wp-block-post-template,
.grille-actualites .wp-block-post-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grille-travaux .wp-block-post-template,
.grille-actualites .wp-block-post-template,
.travaux-accueil .wp-block-post-template {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

/* Accueil : tailles Grand / Moyen / Petit, comme sur grand écran. */
.travaux-accueil .wp-block-post-template {
	grid-template-columns: repeat(var(--wp--custom--carte--colonnes), minmax(0, 1fr));
	grid-auto-flow: row dense;
	align-items: start;
}

.travaux-accueil .wp-block-post {
	grid-column: auto / span var(--wp--custom--carte--moyen);
}

.travaux-accueil .affichage-grand {
	grid-column: auto / span var(--wp--custom--carte--grand);
}

.travaux-accueil .affichage-petit {
	grid-column: auto / span var(--wp--custom--carte--petit);
}

.wp-block-post-template > .wp-block-post {
	break-inside: avoid;
}

/*
 * Images des cartes : pleine largeur de la carte. Sur l'accueil, ratio d'origine
 * comme sur grand écran, recadré si l'image dépasse la hauteur maximale.
 */
.wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.travaux-accueil .wp-block-post-featured-image img {
	aspect-ratio: auto;
}

/* ---------- Images ---------- */

/* Pleine largeur au plus, hauteur limitée, sans coins arrondis ni zoom. */
img {
	max-width: 100%;
	max-height: var(--impression--image-max);
	width: auto;
	height: auto;
	border-radius: 0;
	transform: none !important; /* au cas où le survol serait figé à l'impression */
	transition: none;
}

/* Couverture du projet : recadrée en bandeau plutôt que réduite. */
.travail-couverture img {
	width: 100%;
	object-fit: cover;
}

.travail-couverture figcaption {
	width: auto;
	margin-inline-start: 0;
}

/* Portraits et avatars : leur taille fixe, réduite par les tokens. */
.temoignage__portrait img,
.ligne-auteur__portrait img,
.reseau__personne .wp-block-image img {
	width: var(--wp--custom--portrait);
	height: var(--wp--custom--portrait);
}

/* Style « Cadre » : sans l'aplat coloré. */
.wp-block-image.is-style-cadre img {
	padding: 0;
	background: none;
}

.wp-block-gallery.has-nested-images.is-style-cadre::before,
.wp-block-gallery.has-nested-images.is-style-cadre figure.wp-block-image::before {
	content: none;
}

.wp-block-gallery.has-nested-images.is-style-cadre figure.wp-block-image:not(#individual-image) > :not(figcaption) {
	margin-block: 0;
}

/* Galeries : deux images par ligne au plus, pour garder le document court. */
.wp-block-gallery.has-nested-images,
.wp-block-gallery.has-nested-images.is-style-cadre {
	--galerie-colonnes: 2;
	--galerie-piste: minmax(0, 1fr);
	--galerie-ecart-colonnes: var(--wp--preset--spacing--20);
	row-gap: var(--wp--preset--spacing--20);
}

.wp-block-gallery.has-nested-images.columns-1,
.wp-block-gallery.has-nested-images:has(> figure:only-of-type) {
	--galerie-colonnes: 1;
}

/* ---------- Citations et témoignage ---------- */

/* Portrait à gauche du texte, comme sur grand écran (la largeur imprimable
   déclencherait la règle mobile qui le passe au-dessus). Idem pour la ligne sur moi. */
.temoignage,
.ligne-auteur__corps {
	flex-direction: row;
}

.wp-block-quote:not(.temoignage__citation) {
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: var(--impression--filet);
}

/* ---------- Questions dépliables : toutes ouvertes ---------- */

.wp-block-details::details-content {
	content-visibility: visible;
	display: block;
}

.wp-block-details > summary {
	font-weight: 600;
}

.wp-block-details > summary::before {
	content: none;
}

.wp-block-details + .wp-block-details {
	border-top: var(--impression--filet);
}