/**
 * pascalcaille.fr — feuille de style projet
 *
 * Dérivée de « Piste 1 — Le livre ouvert » (maquette validée).
 * Toutes les couleurs passent par la palette Blocksy : var(--theme-palette-color-N).
 * Breakpoints alignés sur Blocksy : mobile ≤ 689.98px, tablette ≤ 999.98px.
 *
 * Sommaire
 *   1. Variables projet
 *   2. Polices auto-hébergées
 *   3. Base
 *   4. Section à filet (le motif maître)
 *   5. Composants de type
 *   6. Pastilles et listes
 *   7. Figures et photographies
 */

/* -------------------------------------------------------------------------
   1. Variables projet
   Seules les valeurs qui n'existent pas dans la palette Blocksy : les filets
   sont semi-transparents, donc impossibles à loger dans un slot de palette.
   ------------------------------------------------------------------------- */

:root {
	/* Terre cuite foncée : survol du bouton principal. Hors palette Blocksy,
	   dont les 8 slots sont pris et dont le slot 8 sert de surface de base —
	   y loger cette couleur peignait les cartes en terre cuite. */
	--pc-accent-dark: #96482F;

	--pc-rule: rgba(28, 26, 23, .16);
	--pc-rule-soft: rgba(28, 26, 23, .11);
	--pc-rule-foot: rgba(250, 249, 246, .18);

	--pc-section-y: 120px;
	--pc-split-aside: 380px;
	--pc-split-gap: 80px;

	--pc-sans: "Instrument Sans", system-ui, sans-serif;
}

@media (max-width: 999.98px) {
	:root {
		--pc-split-gap: 40px;
	}
}

@media (max-width: 689.98px) {
	:root {
		--pc-section-y: 72px;
	}
}

/* -------------------------------------------------------------------------
   2. Polices auto-hébergées
   Les deux familles sont servies depuis ce serveur, aucun appel à Google.
   L'extension Blocksy « Local Google Fonts » reste active en garde-fou : elle
   empêche un appel à fonts.gstatic.com de réapparaître si quelqu'un touche la
   typographie dans le Customizer, mais c'est bien ce fichier qui fournit les
   polices.

   EB Garamond est une police variable : un seul fichier couvre 400 et 500,
   plus un second pour les italiques. Sous-ensemble latin.
   ------------------------------------------------------------------------- */

@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("../fonts/eb-garamond-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "EB Garamond";
	font-style: italic;
	font-weight: 400 500;
	font-display: swap;
	src: url("../fonts/eb-garamond-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 500;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/instrument-sans-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   3. Base
   Blocksy porte déjà la famille, les tailles, les interlignes et les couleurs.
   On ne reprend ici que ce qu'il ne couvre pas.
   ------------------------------------------------------------------------- */

p {
	text-wrap: pretty;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

/* Le mot accentué des titres : italique + terre cuite.
   Posé par le format inline « Accent » dans l'éditeur, jamais à la main. */
h1 em,
h2 em,
h3 em,
.pc-accent {
	font-style: italic;
	color: var(--theme-palette-color-2);
}

/* Focus : terre cuite, conformément au brief §5 (la maquette le dessinait en
   vert, le brief technique tranche pour la terre cuite, plus contrastée). */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--theme-palette-color-2);
	outline-offset: 3px;
}

/* Bouton secondaire : contour encre, comme .btn dans la maquette.
   Le style « contour » de Blocksy reprend la couleur du bouton principal, ce
   qui mettait de la terre cuite sur « Qui je suis » et « Commander » — deux
   aplats de plus à l'écran, contre la règle client. Le sélecteur reprend
   exactement celui de Blocksy ; notre feuille passe après, donc elle gagne. */
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--theme-palette-color-3);
	color: var(--theme-palette-color-3);
	background-color: transparent;
}

.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(31, 27, 23, .06);
	color: var(--theme-palette-color-3);
}

/* -------------------------------------------------------------------------
   4. Section à filet — le motif maître
   Répété une vingtaine de fois sur les huit pages : titre de section à gauche,
   contenu à droite, filet de séparation en haut.
   Le padding horizontal vient du conteneur Blocksy, pas d'ici.
   ------------------------------------------------------------------------- */

.pc-section {
	padding-block: var(--pc-section-y);
}

.pc-section--tight {
	padding-block-start: 0;
}

/* Bande colorée : style de bloc « Bande » appliqué à un Groupe. */
.pc-section--band {
	background-color: var(--theme-palette-color-6);
}

/* .wp-block-columns de Gutenberg est en flex et sa feuille peut être injectée
   après la nôtre : on reprend sa classe pour passer devant à coup sûr. */
.wp-block-columns.pc-split,
.pc-split {
	display: grid;
	grid-template-columns: var(--pc-split-aside) 1fr;
	gap: var(--pc-split-gap);
}

/* Variante : contenu à gauche, titre à droite. */
.wp-block-columns.pc-split--reverse,
.pc-split--reverse {
	grid-template-columns: 1fr var(--pc-split-aside);
}

.pc-rule-top {
	border-block-start: 1px solid var(--pc-rule);
	padding-block-start: 56px;
}

@media (max-width: 999.98px) {
	.wp-block-columns.pc-split,
	.wp-block-columns.pc-split--reverse,
	.pc-split,
	.pc-split--reverse {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   5. Composants de type
   ------------------------------------------------------------------------- */

/* Surtitre : vert, capitales espacées. */
.pc-kicker {
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1);
}

/* Chapô : italique, colonne courte. */
.pc-lede {
	font-size: 26px;
	line-height: 1.4;
	font-style: italic;
	color: var(--theme-palette-color-4);
	max-width: 26em;
}

/* Corps long : la colonne de lecture d'environ 65 caractères. */
.pc-body-l {
	font-size: 20px;
	line-height: 1.6;
	max-width: 33em;
}

/* Titre du hero : seul endroit où l'on dépasse l'échelle des h1. */
.pc-hero h1 {
	font-size: 96px;
	line-height: .98;
	letter-spacing: -.015em;
}

@media (max-width: 999.98px) {
	.pc-hero h1 {
		font-size: 72px;
	}
}

@media (max-width: 689.98px) {
	.pc-lede {
		font-size: 21px;
	}

	.pc-hero h1 {
		font-size: 52px;
	}
}

/* -------------------------------------------------------------------------
   6. Pastilles et listes
   ------------------------------------------------------------------------- */

/* Pastille de catégorie : contour vert, jamais remplie. */
.pc-tag {
	display: inline-block;
	font-family: var(--pc-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 9px;
	border: 1px solid var(--theme-palette-color-1);
	border-radius: 999px;
	color: var(--theme-palette-color-1);
	white-space: nowrap;
}

/* Point terre cuite : uniquement sur le premier rendez-vous à venir.
   La classe est posée par le template, pas par le client. */
.pc-dot::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--theme-palette-color-2);
	margin-inline-end: 10px;
	vertical-align: middle;
}

/* Ligne de liste : agenda et revue de presse. */
.pc-row {
	display: grid;
	grid-template-columns: 170px 1fr auto;
	gap: 24px;
	padding-block: 16px;
	border-block-end: 1px solid var(--pc-rule-soft);
	font-size: 19px;
}

.pc-row__when {
	color: var(--theme-palette-color-1);
}

.pc-row__what {
	font-style: italic;
	color: var(--theme-palette-color-4);
}

/* Ligne de billet du carnet. */
.pc-post {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: baseline;
	padding-block: 20px;
	border-block-end: 1px solid var(--pc-rule-soft);
}

.pc-post__title {
	font-size: 26px;
	line-height: 1.2;
}

.pc-post__meta {
	font-size: 15px;
	color: var(--theme-palette-color-1);
	letter-spacing: .02em;
	white-space: nowrap;
}

@media (max-width: 689.98px) {
	.pc-row,
	.pc-post {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* -------------------------------------------------------------------------
   7. Figures et photographies
   Le noir et blanc est appliqué côté client uniquement : les fichiers
   déposés par Pascal restent en couleur (brief §5).
   ------------------------------------------------------------------------- */

.pc-bw img,
img.pc-bw {
	filter: grayscale(1) contrast(1.04);
}

/* Image pleine largeur légendée. */
.pc-full img {
	width: 100%;
	height: 560px;
	object-fit: cover;
}

/* Le groupe est en alignement pleine largeur : l'image touche les bords, mais
   la légende reprend la gouttière du conteneur, comme dans la maquette. */
.pc-full figcaption {
	padding-block-start: 14px;
	padding-inline: 5vw;
	font-size: 15px;
	font-style: italic;
	color: var(--theme-palette-color-1);
	text-align: start;
}

.pc-full .wp-block-image,
.pc-full figure {
	margin: 0;
}

@media (max-width: 689.98px) {
	.pc-full img {
		height: 360px;
	}
}

/* Couverture du livre : jamais recadrée, ombre portée de la maquette. */
.pc-cover img {
	box-shadow:
		18px 22px 48px rgba(31, 27, 23, .32),
		0 1px 0 rgba(255, 255, 255, .35) inset;
}

/* Les photographies de Pascal ne sont jamais recadrées en carré : on borne
   la hauteur et on laisse le ratio d'origine (brief §4, Photographies). */
.pc-serie__image img {
	width: 100%;
	height: auto;
	max-height: 820px;
	object-fit: contain;
}

.pc-serie__image--portrait img {
	max-height: 720px;
	margin-inline: auto;
	width: auto;
}

/* -------------------------------------------------------------------------
   8. Footer
   Le fond encre, les couleurs et le copyright sont réglés dans Blocksy.
   ------------------------------------------------------------------------- */

/* Le fond encre du conteneur est réglé dans Blocksy (option « footerBackground »
   du panneau), pas ici : aucune surcharge n'est nécessaire. */

/* Le sélecteur de colonnes de Blocksy ne propose que quatre préréglages
   (1-1-1, 1-2-1, 2-1-1, 1-1-2). La maquette demande 1,3fr : on garde 2fr 1fr 1fr
   dans le Customizer, qui reste cohérent pour le client, et on affine ici.
   Surcharge limitée au desktop : sous 1000px Blocksy empile déjà. */
@media (min-width: 1000px) {
	[data-footer] .ct-footer [data-row*="middle"] > div {
		--grid-template-columns: 1.3fr 1fr 1fr;
	}
}

/* Colonne 1 — la phrase : grande, italique, le dernier mot en terre cuite. */
.pc-footer-claim {
	font-size: 40px;
	line-height: 1.15;
	font-style: italic;
	margin: 0 0 28px;
	max-width: 14em;
}

.pc-footer-claim em {
	font-style: italic;
	color: var(--theme-palette-color-2);
}

/* Le bouton secondaire du footer est sur fond encre : contour et texte papier,
   là où le style « contour » de Blocksy reprend la couleur du bouton principal.
   Le sélecteur reprend celui de Blocksy
   (.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link)
   avec la classe du projet en plus : c'est ce qu'il faut pour passer devant,
   sans !important. */
.wp-block-buttons.pc-footer-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--theme-palette-color-7);
	color: var(--theme-palette-color-7);
	background-color: transparent;
}

.wp-block-buttons.pc-footer-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(250, 249, 246, .1);
	color: var(--theme-palette-color-7);
}

/* Colonnes 2 et 3 — l'intitulé : petites capitales espacées, papier atténué. */
.pc-footer-k {
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(250, 249, 246, .55);
	margin: 0 0 18px;
}

/* Colonne 2 — la navigation : une liste sans puce ni retrait. */
.pc-footer-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pc-footer-nav li {
	font-size: 19px;
	line-height: 1.7;
}

/* Colonne 3 — les coordonnées. */
.pc-footer-social {
	margin-block-start: 18px;
}

@media (max-width: 689.98px) {
	.pc-footer-claim {
		font-size: 30px;
	}
}

/* -------------------------------------------------------------------------
   9. Accueil
   Les blocs Colonnes de Gutenberg sont en flex ; .pc-split les repasse en
   grille pour tenir la colonne de titre à 380px comme la maquette.
   ------------------------------------------------------------------------- */

/* Titres de section : la maquette descend sous l'échelle des h2 globaux. */
.pc-h3 {
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: 0;
	margin-block-end: 20px;
}

.pc-h4 {
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: 0;
	margin-block-end: 24px;
}

@media (max-width: 689.98px) {
	.pc-h3 { font-size: 32px; }
	.pc-h4 { font-size: 28px; }
}

.pc-muted {
	color: var(--theme-palette-color-4);
	margin-block-end: 28px;
}

/* Lien fléché : vert souligné, terre cuite au survol. */
.pc-link-wrap {
	margin-block-end: 0;
}

.pc-link {
	font-size: 17px;
	color: var(--theme-palette-color-1);
	border-block-end: 1px solid var(--theme-palette-color-1);
	text-decoration: none;
}

.pc-link:hover {
	color: var(--theme-palette-color-2);
	border-color: var(--theme-palette-color-2);
}

/* La distinction du livre : filet au-dessus, largeur du texte seulement. */
.pc-award {
	display: inline-block;
	font-size: 17px;
	color: var(--theme-palette-color-4);
	border-block-start: 1px solid var(--pc-rule);
	padding-block-start: 14px;
	margin-block-end: 36px;
}

/* Chapô court de la section Instantanés. */
.pc-lede--small {
	font-size: 20px;
}

/* Hero : la maquette resserre le haut et aère le bas. */
.pc-hero {
	padding-block: 104px 112px;
}

/* Écart élargi de la section du livre. */
.pc-split--wide {
	--pc-split-gap: 96px;
}

/* Légende d'une photographie pleine largeur. */
.pc-figcaption {
	padding-block-start: 14px;
	font-size: 15px;
	font-style: italic;
	color: var(--theme-palette-color-1);
	margin-block-end: 0;
}

/* Citations de presse, deux par deux. */
.wp-block-columns.pc-duo {
	gap: 48px;
}

.pc-quote {
	font-size: 22px;
	line-height: 1.4;
	font-style: italic;
	color: var(--theme-palette-color-5);
	margin: 0;
	padding: 0;
	border: 0;
}

.pc-quote cite {
	display: block;
	font-size: 15px;
	font-style: normal;
	margin-block-start: 14px;
}

/* Portrait du hero : cadrage 4/5, légèrement remonté comme la maquette. */
.pc-hero__portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
}

/* Couverture du livre : largeur fixe, centrée dans sa colonne. */
.pc-cover figure {
	display: flex;
	justify-content: center;
	margin: 0;
}

.pc-cover img {
	width: 300px;
	height: auto;
}

/* Les deux photographies en vis-à-vis, la seconde décalée vers le bas. */
.pc-duo-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

.pc-duo-photos img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.pc-duo-photos__offset {
	margin-block-start: 64px;
}

/* Emplacement d'image en attente d'un média (note §11).
   Volontairement visible : un trou silencieux passerait inaperçu en recette. */
.pc-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: 24px;
	border: 1px dashed var(--pc-rule);
	border-radius: 2px;
	font-size: 15px;
	font-style: italic;
	color: var(--theme-palette-color-5);
	text-align: center;
	margin: 0;
}

@media (max-width: 689.98px) {
	.pc-hero {
		padding-block: 56px 72px;
	}

	.pc-duo-photos {
		gap: 12px;
	}

	.pc-duo-photos__offset {
		margin-block-start: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}