/*
Theme Name: Webhar
Theme URI: https://webhar.agency
Author: Webhar
Author URI: https://webhar.agency
Description: La Gazette Webhar — le site de l'agence composé comme un journal d'expédition maritime : papier, typographie serif, colonnes filetées et gravures. Conçu pour la performance, l'accessibilité et le référencement.
Version: 2.17.2
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webhar
*/

/* =========================================================
   1. Encres & papier — design tokens
   ========================================================= */

:root {
	--wh-paper:    #F2EDE2;
	--wh-paper-2:  #EAE3D2;
	--wh-ink:      #26314B;
	--wh-ink-soft: #4E5871;
	--wh-gold:     #BE9440;
	--wh-gold-deep:#8F6D1F;
	--wh-rust:     #B84A28;
	--wh-sepia:    #8B6F47;
	--wh-teal:     #2F5D66;
	--wh-line:     rgba(38, 49, 75, .3);
	--wh-line-strong: #26314B;

	--wh-font-display: 'Anton', 'Arial Narrow', sans-serif;
	--wh-font-script: 'Yellowtail', cursive;
	--wh-font-text: 'Lora', 'Georgia', serif;
	--wh-font-mono: 'Space Mono', 'Courier New', monospace;

	--wh-radius: 0px;
	--wh-radius-lg: 0px;
	--wh-container: 1180px;
	--wh-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--wh-section-pad: clamp(3.5rem, 7vw, 6rem);
	--wh-ease: cubic-bezier(.25, .46, .45, .94);
	--wh-header-h: 64px;
}

/* =========================================================
   2. Base — la page comme feuille de journal
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--wh-header-h) + 1rem); }

body {
	margin: 0;
	font-family: var(--wh-font-text);
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--wh-ink);
	background-color: var(--wh-paper);
	/* Grain de papier très discret (l'allure journal, sans taches). */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

[hidden] { display: none !important; }

h1, h2, h3, h4 {
	font-family: var(--wh-font-display);
	font-weight: 400;
	line-height: 1.08;
	color: var(--wh-ink);
	margin: 0 0 1rem;
	overflow-wrap: break-word;
	letter-spacing: .015em;
	text-transform: uppercase;
}

h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.25rem; letter-spacing: .03em; }
h4 { font-size: 1.02rem; letter-spacing: .04em; }

/* Accent calligraphié — le pinceau du peintre en lettres. */
.accent { font-family: var(--wh-font-script); color: var(--wh-gold); text-transform: none; font-style: normal; font-size: 1.12em; letter-spacing: 0; }

p, ul, ol, dl { margin: 0 0 1.25rem; }
ul, ol { padding-left: 1.25rem; }

a { color: var(--wh-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--wh-rust); transition: color .25s var(--wh-ease); }
a:hover { color: var(--wh-rust); }

::selection { background: var(--wh-ink); color: var(--wh-paper); }

:focus-visible { outline: 2px solid var(--wh-rust); outline-offset: 2px; }

button { font: inherit; cursor: pointer; }

.screen-reader-text,
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

.skip-link {
	position: absolute; left: 1rem; top: -4rem; z-index: 200;
	padding: .6rem 1.2rem;
	background: var(--wh-ink); color: var(--wh-paper); font-family: var(--wh-font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; text-decoration: none;
	transition: top .3s var(--wh-ease);
}
.skip-link:focus { top: 0; color: var(--wh-paper); }

/* =========================================================
   3. Gabarit — colonnes, sections-articles, filets
   ========================================================= */

.wh-container { max-width: var(--wh-container); margin-inline: auto; padding-inline: var(--wh-gutter); }

/* La feuille : tout le contenu vit dans une page bordée, comme une planche de journal. */
#contenu {
	max-width: min(100%, calc(var(--wh-container) + 2 * var(--wh-gutter)));
	margin-inline: auto;
	border: 1px solid var(--wh-line);
}

/* Chaque section est un module encadré et autonome — une planche de journal,
   séparée de ses voisines par sa bordure et sa marge, comme les blocs d'une une. */
.wh-section {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
	margin: clamp(.85rem, 2.2vw, 1.5rem);
	border: 1px solid var(--wh-line-strong);
	background: var(--wh-paper);
}

/* Étiquette verticale collée au bord gauche du module : la rubrique, comme dans un journal. */
.wh-section[data-label] { padding-left: clamp(2.5rem, 3vw, 3.25rem); }
.wh-section[data-label]::before {
	content: attr(data-label);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: clamp(2.5rem, 3vw, 3.25rem);
	display: grid;
	place-items: center;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--wh-font-mono);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--wh-ink-soft);
	background: var(--wh-paper-2);
	border-right: 1px solid var(--wh-line-strong);
	white-space: nowrap;
	overflow: hidden;
	z-index: 2;
}

/* Les anciennes sections sombres deviennent des encarts encadrés pleine encre. */
.wh-section--dark, .wh-section--gradient { background: var(--wh-ink); color: var(--wh-paper); }
.wh-section--dark h1, .wh-section--dark h2, .wh-section--dark h3, .wh-section--dark h4,
.wh-section--gradient h1, .wh-section--gradient h2, .wh-section--gradient h3, .wh-section--gradient h4 { color: var(--wh-paper); }
.wh-section--dark p, .wh-section--gradient p { color: rgba(242, 237, 226, .85); }
.wh-section--dark a:not(.btn), .wh-section--gradient a:not(.btn) { color: var(--wh-paper); text-decoration-color: var(--wh-rust); }
.wh-section--dark[data-label]::before, .wh-section--gradient[data-label]::before {
	background: rgba(0, 0, 0, .22);
	color: rgba(242, 237, 226, .82);
	border-right-color: rgba(242, 237, 226, .3);
}

.wh-section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); position: relative; z-index: 1; }
.wh-section-head h2 { margin-bottom: .75rem; }

/* Kicker façon rubrique de journal : petites capitales machine, filets de part et d'autre. */
.wh-kicker {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-family: var(--wh-font-mono);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wh-ink-soft);
	margin-bottom: 1rem;
}
.wh-section-head .wh-kicker::before, .hero .wh-kicker::before { content: ''; width: 34px; height: 1px; background: var(--wh-line-strong); }
.wh-section--dark .wh-kicker, .wh-section--gradient .wh-kicker { color: rgba(242, 237, 226, .7); }
.wh-section--dark .wh-kicker::before { background: rgba(242, 237, 226, .5); }

.wh-lead { font-size: clamp(1.05rem, 1.9vw, 1.2rem); line-height: 1.75; color: var(--wh-ink-soft); font-style: italic; }
.wh-section--dark .wh-lead, .wh-section--gradient .wh-lead { color: rgba(242, 237, 226, .8); }

.wh-section-actions { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-wrap: wrap; gap: 1rem; }

.wh-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.wh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wh-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Colonnes filetées : un filet vertical sépare les deux colonnes, comme deux articles voisins. */
@media (min-width: 900px) {
	.wh-grid--ruled { column-gap: 0; }
	.wh-grid--ruled > :nth-child(2n + 1) { padding-right: clamp(1.5rem, 4vw, 3rem); }
	.wh-grid--ruled > :nth-child(2n) { border-left: 1px solid var(--wh-line); padding-left: clamp(1.5rem, 4vw, 3rem); }
}

/* Tête éditoriale scindée : titre à gauche, chapô à droite, séparés d'un filet. */
.wh-section-head--split {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-areas: 'kicker kicker' 'title lead';
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
}
.wh-section-head--split .wh-kicker { grid-area: kicker; }
.wh-section-head--split h2 { grid-area: title; margin-bottom: 0; }
.wh-section-head--split .wh-lead { grid-area: lead; margin-bottom: .3rem; padding-left: clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--wh-line); }

/* Numéro fantôme : folio de page géant. */
.wh-section-num {
	position: absolute;
	top: clamp(1rem, 3vw, 2rem);
	right: var(--wh-gutter);
	font-family: var(--wh-font-display);
	font-weight: 900;
	font-size: clamp(4.5rem, 10vw, 8rem);
	line-height: 1;
	color: rgba(30, 27, 22, .07);
	pointer-events: none;
	user-select: none;
}
.wh-section--dark .wh-section-num { color: rgba(242, 237, 226, .1); }

/* =========================================================
   4. Boutons — cachets d'imprimerie
   ========================================================= */

.btn {
	display: inline-block;
	padding: .8rem 1.8rem;
	border: 1.5px solid var(--wh-ink);
	border-radius: 0;
	font-family: var(--wh-font-mono);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	background: transparent;
	color: var(--wh-ink);
	box-shadow: 3px 3px 0 rgba(30, 27, 22, .18);
	transition: background-color .25s var(--wh-ease), color .25s var(--wh-ease), box-shadow .25s var(--wh-ease), transform .25s var(--wh-ease), border-color .25s var(--wh-ease);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(30, 27, 22, .28); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(30, 27, 22, .28); }

.btn--sun { background: var(--wh-gold); border-color: var(--wh-ink); color: var(--wh-ink); box-shadow: 3px 3px 0 var(--wh-ink); }
.btn--sun:hover { background: var(--wh-ink); border-color: var(--wh-ink); color: var(--wh-paper); }

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--wh-ink); color: var(--wh-paper); }
.wh-section--dark .btn--ghost, .wh-section--gradient .btn--ghost { border-color: var(--wh-paper); color: var(--wh-paper); box-shadow: 3px 3px 0 rgba(0, 0, 0, .4); }
.wh-section--dark .btn--ghost:hover { background: var(--wh-paper); color: var(--wh-ink); }

.btn--light { background: var(--wh-paper); border-color: var(--wh-paper); color: var(--wh-ink); }
.btn--light:hover { background: var(--wh-paper-2); border-color: var(--wh-paper-2); color: var(--wh-ink); }

/* =========================================================
   5. La manchette — en-tête façon une de journal
   ========================================================= */

.site-header { background: transparent; }

/* La manchette est une planche encadrée, en tête de journal — même largeur et mêmes
   bords que le cadre du contenu (#contenu) et les modules de section. */
.masthead {
	max-width: min(100%, calc(var(--wh-container) + 2 * var(--wh-gutter)));
	margin: clamp(.85rem, 2.2vw, 1.5rem) auto;
	border: 1px solid var(--wh-line-strong);
	background: var(--wh-paper);
	text-align: center;
	padding: clamp(1rem, 2.5vw, 1.6rem) var(--wh-gutter) clamp(.75rem, 2vw, 1.1rem);
}
.masthead-top {
	max-width: var(--wh-container);
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--wh-font-mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wh-ink-soft);
	border-bottom: 1px solid var(--wh-line-strong);
	padding-bottom: .5rem;
}

/* Le cartouche-titre : le nom du journal, encadré de filets comme une plaque. */
.site-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.6rem, 1.5vw, 1.1rem);
	max-width: var(--wh-container);
	margin-block: clamp(.75rem, 2vw, 1.25rem);
	margin-inline: auto;
	padding-block: clamp(.4rem, 1vw, .75rem);
	border-block: 2px solid var(--wh-line-strong);
	text-decoration: none;
	color: var(--wh-ink);
	font-family: var(--wh-font-display);
	font-weight: 400;
	font-size: clamp(2.6rem, 8vw, 5.5rem);
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
}
.site-logo img { width: clamp(38px, 5vw, 60px); height: auto; filter: grayscale(.35) sepia(.25); }
.site-logo:hover { color: var(--wh-rust); }

/* Sur-titre encadré de deux filets épais — l'annonce de la une (façon Crumb). */
.masthead-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.75rem, 2vw, 1.5rem);
	margin: .5rem 0 .1rem;
	font-family: var(--wh-font-mono);
	font-size: .66rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--wh-ink);
}
.masthead-eyebrow::before, .masthead-eyebrow::after {
	content: '';
	flex: 1;
	max-width: 200px;
	height: 6px;
	border-top: 2px solid var(--wh-line-strong);
	border-bottom: 2px solid var(--wh-line-strong);
}

/* Sous-rangée à trois colonnes : accroche · blason gravé · accroche. */
.masthead-sub {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin-top: .85rem;
}
.masthead-sub-col { display: flex; flex-direction: column; gap: .3rem; }
.masthead-sub-col:first-child { text-align: right; align-items: flex-end; }
.masthead-sub-col:last-child { text-align: left; align-items: flex-start; }
.masthead-sub-col p { margin: 0; font-style: italic; color: var(--wh-ink-soft); font-size: .82rem; line-height: 1.35; max-width: 24ch; }
.masthead-sub-label { font-family: var(--wh-font-script); font-size: 1.2rem; color: var(--wh-gold-deep); text-decoration: none; }
a.masthead-sub-label:hover { color: var(--wh-rust); }
.masthead-crest { display: block; width: clamp(58px, 9vw, 86px); color: var(--wh-ink); }
.masthead-crest svg, .masthead-crest img, .masthead-crest .wh-engraving { width: 100%; height: auto; display: block; }

@media (max-width: 640px) {
	.masthead-eyebrow::before, .masthead-eyebrow::after { max-width: 46px; }
	.masthead-sub { grid-template-columns: 1fr; gap: .55rem; justify-items: center; }
	.masthead-sub-col, .masthead-sub-col:first-child, .masthead-sub-col:last-child { text-align: center; align-items: center; }
	.masthead-sub-col p { max-width: 30ch; }
	.masthead-crest { order: -1; }
}

/* Barre de navigation filetée, collante. */
/* La barre est collante pleine largeur (pour rester en haut), mais son fond et ses
   filets sont portés par .header-inner → alignés sur la largeur de la page. */
.masthead-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	margin-bottom: clamp(.85rem, 2.2vw, 1.5rem);
}
.header-inner {
	max-width: min(100%, calc(var(--wh-container) + 2 * var(--wh-gutter)));
	margin-inline: auto;
	padding-inline: var(--wh-gutter);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	min-height: var(--wh-header-h);
	background: var(--wh-paper);
	border: 1px solid var(--wh-line-strong);
	box-shadow: 0 3px 0 rgba(30, 27, 22, .06);
}
.wh-scrolled .header-inner { box-shadow: 0 4px 14px rgba(30, 27, 22, .12); }

/* Logotype compact : caché tant que la manchette est visible, il apparaît
   dans la barre collante dès qu'on défile — la marque reste toujours là. */
.header-brand {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	color: var(--wh-ink);
	font-family: var(--wh-font-display);
	font-size: 1.35rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-8px);
	transition: opacity .3s var(--wh-ease), transform .3s var(--wh-ease), visibility 0s .3s;
}
.header-brand img { width: 28px; height: auto; filter: grayscale(.35) sepia(.25); }
.wh-scrolled .header-inner { justify-content: space-between; }
.wh-scrolled .header-brand { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.primary-nav ul { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); list-style: none; margin: 0; padding: 0; }
.primary-nav a {
	font-family: var(--wh-font-mono);
	font-weight: 700;
	font-size: .74rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wh-ink);
	text-decoration: none;
	padding-block: .4rem;
	border-bottom: 2px solid transparent;
	transition: color .25s var(--wh-ease), border-color .25s var(--wh-ease);
}
.primary-nav a:hover { color: var(--wh-rust); border-bottom-color: var(--wh-rust); }
.primary-nav .current-menu-item > a, .primary-nav .current_page_item > a { color: var(--wh-rust); border-bottom-color: var(--wh-rust); }

.menu-trigger {
	display: none;
	position: relative;
	z-index: 130;
	width: 44px; height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wh-ink);
}
.menu-trigger span {
	display: block;
	width: 24px; height: 2px;
	margin: 5px auto;
	background: currentColor;
	transition: transform .3s var(--wh-ease), opacity .3s var(--wh-ease);
}
.menu-trigger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-trigger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	background: var(--wh-paper);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--wh-ease), visibility 0s .35s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; text-align: center; display: grid; gap: 1.3rem; }
.mobile-menu a {
	color: var(--wh-ink);
	text-decoration: none;
	font-family: var(--wh-font-display);
	font-weight: 700;
	font-size: 1.7rem;
}
.mobile-menu a:hover { color: var(--wh-rust); }

/* =========================================================
   6. La une — héros éditorial + gravure vivante
   ========================================================= */

.hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }

/* La une illustrée : la planche domine, le titre est posé sur la gravure,
   le rail droit est le sommaire de l'édition. */
.hero-journal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}

.hero-plate { margin: 0; }
.hero-figure-frame {
	position: relative;
	border: 1px solid var(--wh-line-strong);
	padding: 8px;
	background: var(--wh-paper-2);
	box-shadow: 4px 4px 0 rgba(30, 27, 22, .14);
}
.hero-canvas { position: relative; height: clamp(380px, 55vh, 540px); background: linear-gradient(180deg, #EDF6F8 0%, #D6EAEF 55%, #C2DFE8 100%); overflow: hidden; }
.hero-canvas canvas { display: block; width: 100% !important; height: 100% !important; filter: sepia(.16) saturate(.92) contrast(1.03); opacity: 0; transition: opacity 1.2s var(--wh-ease); }
.hero-canvas.is-ready canvas { opacity: 1; }
.hero-canvas::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(52, 64, 72, 0) 48%, rgba(52, 64, 72, .22) 100%); }
/* Une illustrée par une image du client : elle remplit le cadre à la place de l'océan animé. */
.hero-canvas--image img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.16) saturate(.92) contrast(1.03); }

.hero-plate-title {
	position: absolute;
	inset: 8px;
	z-index: 2;
	display: grid;
	place-content: center;
	justify-items: center;
	text-align: center;
	padding: clamp(1.25rem, 4vw, 2.5rem);
	pointer-events: none;
}
.hero-plate-title .wh-kicker { color: rgba(38, 49, 75, .8); justify-content: center; }
.hero-plate-title .wh-kicker::before { background: rgba(38, 49, 75, .55); }
.hero-plate-title .hero-title { color: var(--wh-ink); font-size: clamp(2rem, 3.8vw, 3.2rem); max-width: 24ch; margin-bottom: .9rem; text-shadow: 0 1px 18px rgba(246, 232, 203, .7); }
.hero-plate-title .hero-sub { color: rgba(38, 49, 75, .9); font-style: italic; font-size: clamp(.98rem, 1.6vw, 1.1rem); max-width: 36rem; margin: 0; text-shadow: 0 1px 12px rgba(246, 232, 203, .7); }
.hero-plate-title .accent { color: var(--wh-gold-deep); }

.hero-plate figcaption {
	font-family: var(--wh-font-mono);
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wh-ink-soft);
	text-align: center;
	padding-top: .7rem;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.1rem; }

/* Rail « Dans cette édition » : de vrais sommaires d'articles. */
.hero-edition {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wh-line-strong);
	background: var(--wh-paper-2);
	padding: 1.1rem 1.2rem;
}
.hero-cards-title {
	font-family: var(--wh-font-mono);
	font-weight: 700;
	font-size: .68rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wh-ink);
	margin: 0 0 .4rem;
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--wh-ink);
}
.edition-item { padding-block: .95rem; border-bottom: 1px dotted var(--wh-line); }
.edition-rubrique { font-family: var(--wh-font-mono); font-weight: 700; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wh-gold-deep); margin: 0 0 .3rem; }
.edition-title { font-size: 1.28rem; line-height: 1.12; margin: 0 0 .35rem; }
.edition-title a { color: var(--wh-ink); text-decoration: none; }
.edition-title a:hover { color: var(--wh-rust); }
.edition-item > p:last-child { font-size: .88rem; color: var(--wh-ink-soft); margin: 0; }
.edition-badge { margin-top: auto; padding-top: 1.1rem; text-align: center; }

/* =========================================================
   7. Ornements — filets, culs-de-lampe, arcs, badge d'enseigne
   ========================================================= */

/* Badge étoilé façon enseigne peinte. */
.wh-badge {
	display: inline-grid;
	place-items: center;
	width: 118px;
	height: 118px;
	background: var(--wh-gold);
	color: var(--wh-ink);
	font-family: var(--wh-font-mono);
	font-weight: 700;
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1.35;
	padding: 1rem;
	transform: rotate(-8deg);
	clip-path: polygon(50% 0%, 57.8% 8.9%, 69.1% 4.9%, 72.7% 16.2%, 84.5% 15.5%, 83.8% 27.3%, 95.1% 30.9%, 91.1% 42.2%, 100% 50%, 91.1% 57.8%, 95.1% 69.1%, 83.8% 72.7%, 84.5% 84.5%, 72.7% 83.8%, 69.1% 95.1%, 57.8% 91.1%, 50% 100%, 42.2% 91.1%, 30.9% 95.1%, 27.3% 83.8%, 15.5% 84.5%, 16.2% 72.7%, 4.9% 69.1%, 8.9% 57.8%, 0% 50%, 8.9% 42.2%, 4.9% 30.9%, 16.2% 27.3%, 15.5% 15.5%, 27.3% 16.2%, 30.9% 4.9%, 42.2% 8.9%);
	transition: transform .3s var(--wh-ease);
}
.wh-badge:hover { transform: rotate(-4deg) scale(1.04); color: var(--wh-ink); }

/* Planche gravée : un cliché « imprimé » — encre unifiée + trame de demi-teinte,
   double filet et légende de planche. Photos couleur et gravures anciennes se
   ressemblent alors toutes, comme tirées sur la même presse. */
.gravure { margin: 0; }
.gravure-frame {
	position: relative;
	border: 1px solid var(--wh-line-strong);
	outline: 1px solid var(--wh-line-strong);
	outline-offset: 4px;
	padding: 7px;
	background: var(--wh-paper);
	box-shadow: 5px 5px 0 rgba(30, 27, 22, .16);
}
/* Image nette, couleur préservée avec un simple ton chaud d'impression. */
.gravure-frame img { display: block; width: 100%; height: auto; filter: sepia(.12) saturate(.96) contrast(1.02); }
.gravure figcaption {
	font-family: var(--wh-font-mono);
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wh-ink-soft);
	text-align: center;
	margin-top: 1rem;
	padding-top: .55rem;
	border-top: 1px solid var(--wh-line);
}

/* Bande gravure pleine largeur — un cliché d'ouverture entre deux articles. */
.gravure-band { border-block: 1px solid var(--wh-line-strong); background: var(--wh-paper-2); }
.gravure-band .wh-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 4vw, 3rem); }
.gravure-band-media .gravure-frame { background: var(--wh-paper); }
.gravure-band-text h2 { margin-bottom: .6rem; }
.gravure-band-text p { margin: 0; color: var(--wh-ink-soft); font-style: italic; }
@media (max-width: 780px) { .gravure-band .wh-container { grid-template-columns: 1fr; } }

/* Gravures marines animées — chaque groupe eng-* reçoit son mouvement d'estampe. */
.wh-engraving { display: block; color: var(--wh-ink); }
.wh-media-illus .wh-engraving { max-width: 340px; margin-inline: auto; }
.footer-seal { max-width: 110px; margin-block: .6rem 0; opacity: .9; }
.wh-engraving svg { display: block; width: 100%; height: auto; }
.eng-spiral, .eng-shell-spiral, .eng-sun-badge { transform-box: fill-box; transform-origin: center; animation: eng-rotate 120s linear infinite; }
.eng-core { transform-box: fill-box; transform-origin: center; animation: eng-rotate 90s linear infinite reverse; }
.eng-ship { transform-box: fill-box; transform-origin: 50% 100%; animation: eng-pitch 9s ease-in-out infinite alternate; }
.eng-sea { transform-box: fill-box; animation: eng-drift 11s ease-in-out infinite alternate; }
.eng-foam { transform-box: fill-box; animation: eng-drift 8s ease-in-out infinite alternate-reverse; }
.eng-rays { transform-box: fill-box; transform-origin: center; animation: eng-pulse 8s ease-in-out infinite alternate; }
.eng-tentacle-1, .eng-tentacle-2, .eng-tentacle-3, .eng-tentacle-4 { transform-box: fill-box; transform-origin: bottom left; animation: eng-sway 10s ease-in-out infinite alternate; }
.eng-tentacle-2 { animation-delay: -2.5s; }
.eng-tentacle-3 { animation-delay: -5s; }
.eng-tentacle-4 { animation-delay: -7.5s; }
.eng-flippers-front { transform-box: fill-box; transform-origin: center; animation: eng-sway 7s ease-in-out infinite alternate; }
@keyframes eng-rotate { to { transform: rotate(360deg); } }
@keyframes eng-pitch { from { transform: rotate(-1.6deg); } to { transform: rotate(1.4deg); } }
@keyframes eng-drift { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes eng-pulse { from { transform: rotate(-1.5deg) scale(.995); } to { transform: rotate(1.5deg) scale(1.005); } }
@keyframes eng-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }

.wave-divider { overflow: hidden; text-align: center; padding-block: clamp(1.25rem, 3vw, 2rem); }
.wave-divider svg { display: none; }
.wave-divider::before { content: '⁂'; font-family: var(--wh-font-display); font-size: 1.3rem; color: var(--wh-ink-soft); letter-spacing: .5em; }

.wh-decor-arcs {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(140px, 22vw, 260px);
	height: auto;
	color: currentColor;
	opacity: .07;
	pointer-events: none;
}
.wh-section .wh-decor-arcs { top: auto; bottom: 0; transform: scaleY(-1); }

/* =========================================================
   8. Cartes — coupures de presse
   ========================================================= */

.service-card {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: clamp(1.4rem, 2.8vw, 2rem);
	background: var(--wh-paper);
	border: 1px solid var(--wh-line-strong);
	text-decoration: none;
	color: var(--wh-ink);
	transition: box-shadow .3s var(--wh-ease), transform .3s var(--wh-ease);
}
.service-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(30, 27, 22, .16); color: var(--wh-ink); }
.service-card h3 { margin-bottom: 0; }
.service-card p { margin-bottom: 0; color: var(--wh-ink-soft); font-size: .96rem; }

/* Cercle conteneur d'icône (services + index). */
.service-card-icon,
.wh-index-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	flex: none;
	border: 1px solid var(--wh-line);
	border-radius: 50%;
	color: var(--wh-ink);
	transition: background-color .3s var(--wh-ease), color .3s var(--wh-ease), border-color .3s var(--wh-ease);
}
.service-card:hover .service-card-icon { background: var(--wh-ink); color: var(--wh-paper); border-color: var(--wh-ink); }
.wh-index-item:hover .wh-index-icon { background: var(--wh-ink); color: var(--wh-paper); border-color: var(--wh-ink); }
/* L'icône elle-même : simple trait, taille fixe, hérite la couleur du parent. */
.wh-icon { display: block; width: 24px; height: 24px; flex: none; }

/* Mosaïque de une : cases mitoyennes séparées par des filets, sans espaces. */
.wh-grid--bento { grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--wh-line-strong); background: var(--wh-paper); }
.wh-grid--bento > * { border-right: 1px solid var(--wh-line); border-bottom: 1px solid var(--wh-line); }
.wh-grid--bento > :nth-child(3n), .wh-grid--bento > :last-child { border-right: 0; }
.wh-grid--bento .service-card { border: 0; height: 100%; }
.wh-grid--bento .service-card:hover { transform: none; box-shadow: none; background: var(--wh-paper-2); }
.wh-grid--bento > :first-child { grid-column: span 2; }
.wh-grid--bento > :first-child .service-card { padding: clamp(1.8rem, 3.2vw, 2.6rem); }
.wh-grid--bento > :first-child .service-card h3 { font-size: 1.7rem; }
.wh-grid--bento > :first-child .service-card p { max-width: 44rem; }
.wh-grid--bento > :last-child { grid-column: 1 / -1; }
.wh-grid--bento > :last-child .service-card { flex-direction: row; align-items: center; gap: 1.5rem; background: var(--wh-ink); border-color: var(--wh-ink); }
.wh-grid--bento > :last-child .service-card h3 { color: var(--wh-paper); margin: 0; flex: none; }
.wh-grid--bento > :last-child .service-card p { color: rgba(242, 237, 226, .8); flex: 1; margin: 0; }
.wh-grid--bento > :last-child .service-card .service-card-icon { border-color: rgba(242, 237, 226, .4); color: var(--wh-paper); flex: none; }
.wh-grid--bento > :last-child .service-card:hover .service-card-icon { background: var(--wh-paper); color: var(--wh-ink); border-color: var(--wh-paper); }
.wh-grid--bento > :last-child .service-card .card-arrow { color: var(--wh-rust); margin: 0 0 0 auto; }

@media (min-width: 1025px) {
	.wh-grid--stagger { padding-bottom: 2rem; }
	.wh-grid--stagger > :nth-child(3n-1) { margin-top: 2rem; }
}

.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wh-paper);
	border: 1px solid var(--wh-line-strong);
	overflow: hidden;
	transition: box-shadow .3s var(--wh-ease), transform .3s var(--wh-ease);
}
.project-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(30, 27, 22, .16); }

/* Bandeau-titre : le nom du projet, filet dessous — la coiffe de la coupure. */
.project-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; border-bottom: 1px solid var(--wh-line-strong); }
.project-card-head h3 { margin: 0; font-size: 1.08rem; line-height: 1.12; }
.project-card-head h3 a { color: var(--wh-ink); text-decoration: none; }
.project-card-head h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.project-card-year { flex: none; font-family: var(--wh-font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--wh-sepia); }

.project-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wh-paper-2); }
.project-card-media img, .project-card-placeholder { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(.7) contrast(1.04); transition: transform .5s var(--wh-ease); }
.project-card:hover .project-card-media img { transform: scale(1.03); }
.project-card-placeholder { display: grid; place-items: center; color: var(--wh-ink); font-family: var(--wh-font-display); font-weight: 900; font-size: 2rem; }

/* Bandeau-méta : les secteurs en puces + l'année — le pied de la coupure. */
.project-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .6rem .9rem; border-top: 1px solid var(--wh-line-strong); }
.project-card-tag { font-family: var(--wh-font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wh-ink); border: 1px solid var(--wh-line); padding: .12rem .5rem; }

.wh-section--dark .project-card { background: var(--wh-paper); }

.testimonial-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.4rem, 2.8vw, 2rem);
	background: var(--wh-paper);
	border: 1px solid var(--wh-line-strong);
	font-size: .98rem;
	color: var(--wh-ink);
}
.testimonial-card blockquote { margin: 0; font-style: italic; }
.testimonial-card blockquote::before { content: '« '; color: var(--wh-rust); font-family: var(--wh-font-display); }
.testimonial-card p { margin: 0; color: var(--wh-ink); }
.testimonial-card footer, .testimonial-card cite { font-style: normal; font-family: var(--wh-font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wh-ink-soft); }

.card-arrow {
	display: inline-flex;
	margin-top: auto;
	color: var(--wh-rust);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .3s var(--wh-ease), transform .3s var(--wh-ease);
}
.service-card:hover .card-arrow { opacity: 1; transform: none; }
@media (hover: none) { .card-arrow { opacity: 1; transform: none; } }

/* =========================================================
   9. Filtres, méthode, marquee, carrousel
   ========================================================= */

.filter-bar { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.filter-btn {
	padding: .5rem 1.1rem;
	border: 1px solid var(--wh-line-strong);
	border-radius: 0;
	background: transparent;
	color: var(--wh-ink);
	font-family: var(--wh-font-mono);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color .25s var(--wh-ease), color .25s var(--wh-ease);
}
.wh-section--dark .filter-btn { border-color: rgba(242, 237, 226, .5); color: var(--wh-paper); }
.filter-btn:hover { background: rgba(30, 27, 22, .08); }
.filter-btn.is-active { background: var(--wh-ink); border-color: var(--wh-ink); color: var(--wh-paper); }
.wh-section--dark .filter-btn.is-active { background: var(--wh-paper); border-color: var(--wh-paper); color: var(--wh-ink); }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--wh-line-strong); background: var(--wh-paper); }
.process-step { padding: clamp(1.4rem, 2.6vw, 2rem); border-right: 1px solid var(--wh-line); }
.process-step:last-child { border-right: 0; }
.process-step .wh-kicker { margin-bottom: .6rem; font-size: .85rem; color: var(--wh-rust); }
.process-step h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.process-step p { margin-bottom: 0; font-size: .93rem; color: var(--wh-ink-soft); }
.process-illus { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border: 1px solid var(--wh-line); border-radius: 50%; color: var(--wh-ink); margin-bottom: 1rem; }
.process-illus img { width: 46px; height: auto; }

.wh-marquee { overflow: hidden; padding-block: .9rem; border-block: 1px solid var(--wh-line-strong); background: var(--wh-paper-2); }
.wh-marquee-track { display: flex; width: max-content; animation: wh-marquee 38s linear infinite; }
.wh-marquee-track span { flex: none; white-space: pre; font-family: var(--wh-font-mono); font-weight: 700; font-size: clamp(.85rem, 1.6vw, 1.05rem); letter-spacing: .18em; text-transform: uppercase; color: var(--wh-ink); }
@keyframes wh-marquee { to { transform: translateX(-50%); } }

/* =========================================================
   Bloc « manifeste » : bande-slogan + intro
   ========================================================= */

.wh-statement-band { border: 1px solid var(--wh-line-strong); padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.5rem); text-align: center; }
.wh-statement-band h2 { margin: 0; font-size: clamp(2rem, 7.5vw, 5.75rem); line-height: .92; letter-spacing: .01em; }

.wh-statement-head { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.wh-statement-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--wh-line); font-family: var(--wh-font-mono); font-weight: 700; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wh-ink-soft); }
.wh-statement-eyebrow a { color: var(--wh-ink); text-decoration: none; white-space: nowrap; }
.wh-statement-eyebrow a:hover { color: var(--wh-rust); }
.wh-statement-head h2 { margin: clamp(1.1rem, 2.5vw, 1.75rem) 0 .75rem; font-size: clamp(1.8rem, 4.5vw, 3.25rem); max-width: 20ch; }
.wh-statement-head .wh-lead { max-width: 46rem; }

.wh-carousel { position: relative; }
.wh-carousel-track { display: flex; gap: clamp(1rem, 2.5vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; }
.wh-carousel-track::-webkit-scrollbar { display: none; }
.wh-carousel-item { flex: 0 0 min(78vw, 340px); scroll-snap-align: start; }
/* Flèches du carrousel : disque clair qui ressort sur la section sombre. */
.wh-carousel { position: relative; padding-inline: 8px; }
.wh-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px; height: 46px;
	border: 1px solid var(--wh-ink);
	border-radius: 50%;
	background: var(--wh-paper);
	color: var(--wh-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
	transition: background-color .25s var(--wh-ease), color .25s var(--wh-ease), transform .2s var(--wh-ease);
}
.wh-carousel-btn:hover { background: var(--wh-gold); border-color: var(--wh-ink); color: var(--wh-ink); }
.wh-carousel-btn:active { transform: translateY(-50%) scale(.92); }
.wh-carousel-btn .wh-icon { width: 20px; height: 20px; }
.wh-carousel-btn--prev { left: -14px; }
.wh-carousel-btn--prev .wh-icon { transform: rotate(180deg); }
.wh-carousel-btn--next { right: -14px; }
@media (max-width: 640px) { .wh-carousel-btn { display: none; } }

/* =========================================================
   10. Bandeau final, pied de page — colophon
   ========================================================= */

.cta-band { background: var(--wh-ink); color: var(--wh-paper); text-align: center; }
section.cta-band { padding-block: clamp(4rem, 8vw, 6.5rem); }
.cta-band h2 { color: var(--wh-paper); margin-bottom: 1.1rem; }
.cta-band p { color: rgba(242, 237, 226, .8); max-width: 36rem; margin-inline: auto; margin-bottom: 0; font-style: italic; }
.cta-band .btn { margin-top: 2.5rem; }

/* Pied de page « rubrique sombre » — grand titre, deux colonnes filetées, CTA, ourlet. */
.site-footer { background: var(--wh-ink); color: var(--wh-paper); font-size: .95rem; }
.site-footer a { color: var(--wh-paper); text-decoration: none; }
.site-footer a:hover { color: var(--wh-gold); }
.footer-inner { padding-top: clamp(3rem, 6vw, 5rem); }
.site-footer .footer-line { border: 0; border-top: 1px solid rgba(242, 237, 226, .2); }

.footer-masthead { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.footer-title { font-family: var(--wh-font-display); color: var(--wh-paper); font-size: clamp(2.6rem, 7vw, 5rem); line-height: .95; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.footer-subhead { font-family: var(--wh-font-text); font-style: italic; color: rgba(242, 237, 226, .6); margin: .6rem 0 0; }

.footer-cols { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(242, 237, 226, .2); }
.footer-cols > .footer-col { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.footer-cols > .footer-col:first-child { padding-right: clamp(2rem, 4vw, 3.5rem); border-right: 1px solid rgba(242, 237, 226, .2); }
.footer-cols > .footer-col:last-child { padding-left: clamp(2rem, 4vw, 3.5rem); }
.footer-label { font-family: var(--wh-font-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(242, 237, 226, .5); margin: 0 0 1rem; }
.footer-block + .footer-block { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid rgba(242, 237, 226, .2); }
.footer-address, .footer-hours { color: var(--wh-paper); margin: 0; line-height: 1.7; }
.footer-arrow { display: inline-block; margin-top: 1rem; font-family: var(--wh-font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.footer-contact { display: grid; gap: 1.1rem; }
.footer-tagline { font-family: var(--wh-font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 237, 226, .4); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; }

.footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding-block: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid rgba(242, 237, 226, .2); }
.footer-cta-text p:last-child { color: var(--wh-paper); font-size: clamp(1.05rem, 2vw, 1.25rem); margin: .35rem 0 0; max-width: 40ch; }
.footer-cta .btn { flex: none; margin: 0; }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1.2rem; border-top: 1px solid rgba(242, 237, 226, .2); font-family: var(--wh-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 237, 226, .6); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.footer-legal { margin: 0; }

/* Coordonnées & réseaux sur fond sombre. */
.site-footer .contact-strip a { color: var(--wh-paper); }
.site-footer .contact-strip .wh-icon { color: rgba(242, 237, 226, .6); }
.site-footer .contact-strip a:hover .wh-icon { color: var(--wh-gold); }
.site-footer .social-links a { color: var(--wh-paper); border-color: rgba(242, 237, 226, .35); }
.site-footer .social-links a:hover { background: var(--wh-paper); color: var(--wh-ink); border-color: var(--wh-paper); }

.contact-strip { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.contact-strip a { display: inline-flex; align-items: center; gap: .65rem; color: var(--wh-ink); overflow-wrap: anywhere; }
.contact-strip .wh-icon { width: 20px; height: 20px; color: var(--wh-ink-soft); }
.contact-strip a:hover .wh-icon { color: var(--wh-rust); }

/* Couverture de fiche projet : les SVG livrés par la médiathèque portent des
   dimensions 1×1 — on force la largeur pour qu'elles s'affichent à pleine taille. */
.project-plate { display: block; }
.project-plate img { width: 100%; height: auto; display: block; }
.social-links { display: flex; gap: .7rem; margin-top: 1rem; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--wh-line-strong); border-radius: 50%; transition: background-color .25s var(--wh-ease), color .25s var(--wh-ease); }
.social-links a:hover { background: var(--wh-ink); color: var(--wh-paper); }

/* =========================================================
   11. Formulaires — fiches à remplir
   ========================================================= */

.wh-form { display: grid; gap: 1.1rem; }
.form-field { display: grid; gap: .4rem; }
.form-field label { font-family: var(--wh-font-mono); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wh-ink); }
.form-field input, .form-field textarea, .form-field select {
	width: 100%;
	padding: .8rem 1rem;
	border: 1px solid var(--wh-line-strong);
	border-radius: 0;
	background: var(--wh-paper);
	font: inherit;
	color: var(--wh-ink);
	transition: box-shadow .25s var(--wh-ease);
}
.form-field textarea { min-height: 160px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: none; box-shadow: 3px 3px 0 rgba(184, 74, 40, .35); border-color: var(--wh-rust); }
.form-actions { margin-top: .3rem; }
.form-notice { padding: 1rem 1.25rem; border: 1px solid var(--wh-line-strong); font-family: var(--wh-font-mono); font-size: .85rem; margin-bottom: 1.5rem; background: var(--wh-paper-2); }
.form-notice--ok { border-color: var(--wh-teal); color: var(--wh-teal); }
.form-notice--error { border-color: var(--wh-rust); color: var(--wh-rust); }

/* =========================================================
   12. FAQ, fiches service & projet
   ========================================================= */

.service-faq { max-width: 46rem; }
.faq-item { border-bottom: 1px solid var(--wh-line); }
.faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.1rem 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--wh-font-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--wh-ink);
}
.faq-q::after { content: '+'; flex: none; font-family: var(--wh-font-mono); font-size: 1.3rem; color: var(--wh-rust); transition: transform .3s var(--wh-ease); }
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 0 1.2rem; color: var(--wh-ink-soft); }
.faq-item.is-open .faq-a { display: block; }

/* Ouverture d'article sur papier : grand titre, filet de clôture — pas un bloc sombre. */
.service-hero, .project-hero { background: var(--wh-paper); color: var(--wh-ink); padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 3px double var(--wh-line-strong); position: relative; overflow: hidden; }
.service-hero > .wh-container, .project-hero > .wh-container { position: relative; z-index: 1; }
.service-hero h1, .project-hero h1 { color: var(--wh-ink); max-width: 22ch; }
.service-hero .wh-lead, .project-hero .wh-lead { color: var(--wh-ink-soft); max-width: 42rem; }
.service-hero .btn { margin-top: 1.5rem; }
.service-hero .wh-kicker, .project-hero .wh-kicker { color: var(--wh-ink-soft); }

.service-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--wh-line-strong); background: var(--wh-paper); }
.service-features > .feature-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.service-features .feature-item { padding: clamp(1.3rem, 2.5vw, 1.8rem); border-right: 1px solid var(--wh-line); border-bottom: 1px solid var(--wh-line); background: transparent; }
.service-features > .feature-item:nth-child(even), .service-features > .feature-item:last-child { border-right: 0; }
.feature-item h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.feature-item p { margin-bottom: 0; font-size: .93rem; color: var(--wh-ink-soft); }

.project-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.1rem 1.8rem; margin: 0; padding: clamp(1.4rem, 2.8vw, 2rem); border: 1px solid var(--wh-line-strong); background: var(--wh-paper-2); }
.project-meta dt { font-family: var(--wh-font-mono); font-weight: 700; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wh-sepia); margin-bottom: .25rem; }
.project-meta dd { margin: 0 0 .5rem; font-weight: 600; }

.project-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
.project-gallery img { width: 100%; border: 1px solid var(--wh-line-strong); filter: sepia(.25) saturate(.8); }

/* =========================================================
   12b. Pages rubriques — sommaire, une de section, article-infobox
   ========================================================= */

/* Ligne de service : entrée de sommaire filetée, numérotée. */
.wh-index { border-top: 2px solid var(--wh-line-strong); }
.wh-index-item {
	display: grid;
	grid-template-columns: 5rem 3.4rem minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.5rem);
	padding: clamp(1.1rem, 2.2vw, 1.6rem) .25rem;
	border-bottom: 1px solid var(--wh-line);
	text-decoration: none;
	color: var(--wh-ink);
	transition: background-color .25s var(--wh-ease), padding-left .25s var(--wh-ease);
}
.wh-index-item:hover { background: var(--wh-paper-2); padding-left: 1rem; color: var(--wh-ink); }
.wh-index-num { font-family: var(--wh-font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: var(--wh-gold-deep); }
.wh-index-body h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 0 0 .25rem; }
.wh-index-body p { margin: 0; font-size: .95rem; color: var(--wh-ink-soft); }
/* Cluster de droite : le repère (« prix » façon carte de menu) + la flèche. */
.wh-index-end { justify-self: end; display: flex; align-items: center; gap: clamp(.6rem, 1.5vw, 1.1rem); }
.wh-index-value { flex: none; font-family: var(--wh-font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wh-ink); border: 1px solid var(--wh-line-strong); padding: .22rem .6rem; white-space: nowrap; }
.wh-index-arrow { flex: none; color: var(--wh-rust); opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--wh-ease), transform .25s var(--wh-ease); }
.wh-index-item:hover .wh-index-arrow { opacity: 1; transform: none; }
@media (hover: none) { .wh-index-arrow { opacity: 1; transform: none; } }

/* Bandeau de dateline : rubrique, édition, lieu — au-dessus des articles. */
.article-dateline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding: .55rem 0;
	border-block: 1px solid var(--wh-line-strong);
	font-family: var(--wh-font-mono);
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wh-ink-soft);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.wh-section--dark .article-dateline { border-color: rgba(242, 237, 226, .45); color: rgba(242, 237, 226, .75); }

/* Une de section : le premier projet en article d'ouverture. */
.lead-story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--wh-line-strong); background: var(--wh-paper); margin-bottom: clamp(2rem, 4vw, 3rem); }
.lead-story-media { position: relative; overflow: hidden; border-right: 1px solid var(--wh-line-strong); }
.lead-story-media img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(.7) contrast(1.04); transition: transform .6s var(--wh-ease); }
.lead-story:hover .lead-story-media img { transform: scale(1.03); }
.lead-story-body { padding: clamp(1.5rem, 3.2vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.lead-story-body h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: 0; }
.lead-story-body h2 a { text-decoration: none; color: var(--wh-ink); }
.lead-story-body p { margin: 0; color: var(--wh-ink-soft); }
.lead-story-badge { font-family: var(--wh-font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wh-rust); }

/* Article + encadré technique (fiche projet). */
.project-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
.project-aside { position: sticky; top: calc(var(--wh-header-h) + 1.25rem); display: grid; gap: 1.25rem; }
.project-aside .project-meta { display: block; }
.project-aside .project-meta > div { padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px dotted var(--wh-line); }
.project-aside .project-meta > div:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.project-aside-title { font-family: var(--wh-font-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; text-align: center; padding-bottom: .6rem; margin: 0 0 1rem; border-bottom: 2px solid var(--wh-ink); }

/* Planches numérotées de la galerie. */
.project-gallery figure { margin: 0; }
.project-gallery figcaption { font-family: var(--wh-font-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wh-ink-soft); padding-top: .5rem; }

/* À lire aussi — navigation entre réalisations. */
.read-also { border-top: 2px solid var(--wh-line-strong); padding-top: 1.25rem; }
.read-also .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); }
.read-also .nav-next { text-align: right; }
.read-also a { display: block; text-decoration: none; font-family: var(--wh-font-display); font-size: clamp(1rem, 2vw, 1.3rem); text-transform: uppercase; color: var(--wh-ink); }
.read-also a:hover { color: var(--wh-rust); }

@media (max-width: 900px) {
	.wh-index-item { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: 'num body' 'num end'; }
	.wh-index-icon, .wh-index-arrow { display: none; }
	.wh-index-num { grid-area: num; }
	.wh-index-body { grid-area: body; }
	.wh-index-end { grid-area: end; justify-self: start; margin-top: .35rem; }
	.lead-story { grid-template-columns: 1fr; }
	.lead-story-media { border-right: 0; border-bottom: 1px solid var(--wh-line-strong); aspect-ratio: 16 / 9; }
	.project-layout { grid-template-columns: 1fr; }
	.project-aside { position: static; }
}

/* =========================================================
   13. Contenu de page — article, lettrine
   ========================================================= */

.entry-content { max-width: 46rem; }

/* Le corps des articles se compose en deux colonnes filetées, comme un vrai journal. */
@media (min-width: 900px) {
	.entry-content { max-width: none; columns: 2; column-gap: clamp(2.5rem, 4.5vw, 4rem); column-rule: 1px solid var(--wh-line); }
	.entry-content h2, .entry-content h3 { column-span: all; }
	.entry-content h2:not(:first-child) { padding-top: 1rem; border-top: 1px solid var(--wh-line); }
	.entry-content ul, .entry-content ol, .entry-content blockquote, .entry-content img { break-inside: avoid; }
}
.entry-content > p:first-of-type::first-letter {
	font-family: var(--wh-font-display);
	font-size: 3.2em;
	float: left;
	line-height: .82;
	padding: .06em .14em 0 0;
	color: var(--wh-gold-deep);
}
.entry-content h2 { margin-top: 2.4rem; }
.entry-content h3 { margin-top: 2rem; }
.entry-content img { border: 1px solid var(--wh-line-strong); }
.entry-content li { margin-bottom: .4rem; }
.entry-content blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 3px solid var(--wh-rust); background: var(--wh-paper-2); font-style: italic; }

/* Page de mentions : lecture de document, sans lettrine ni colonnes. */
.entry-content--legal { max-width: 44rem; columns: auto; }
.entry-content--legal > p:first-of-type::first-letter { font-family: inherit; font-size: inherit; float: none; line-height: inherit; padding: 0; color: inherit; }
.entry-content--legal h2 { font-size: 1.15rem; letter-spacing: .04em; padding-bottom: .4rem; border-bottom: 1px solid var(--wh-line); margin-top: 2.5rem; }
.entry-content--legal ul { list-style: none; padding-left: 0; }
.entry-content--legal ul li { padding: .35rem 0; border-bottom: 1px dotted var(--wh-line); }

.alignwide { max-width: min(100%, 1280px); margin-inline: auto; }
.alignfull { width: 100%; max-width: none; }
.wp-block-image { margin: 1.5rem 0; }

/* Illustrations au trait sur papier. */
.wh-media-illus { display: grid; place-items: center; color: var(--wh-ink); padding: clamp(.5rem, 2vw, 1.5rem); }
.wh-media-illus img { width: min(100%, 340px); height: auto; }
.wh-media-illus--panel { background: var(--wh-paper-2); border: 1px solid var(--wh-line-strong); outline: 1px solid var(--wh-line-strong); outline-offset: 5px; padding: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; box-shadow: 5px 5px 0 rgba(30, 27, 22, .12); }
.wh-media-illus--panel img, .wh-media-illus--panel .wh-engraving { width: min(100%, 360px); position: relative; z-index: 1; }
.contact-illus { margin-top: 2rem; color: var(--wh-ink); max-width: 200px; opacity: .85; }

/* =========================================================
   14. Apparitions — l'encre qui se pose
   ========================================================= */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--wh-ease), transform .55s var(--wh-ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.wh-grid > .reveal:nth-child(2), .process-grid > .reveal:nth-child(2) { transition-delay: .07s; }
.wh-grid > .reveal:nth-child(3), .process-grid > .reveal:nth-child(3) { transition-delay: .14s; }
.wh-grid > .reveal:nth-child(4), .process-grid > .reveal:nth-child(4) { transition-delay: .21s; }
.wh-grid > .reveal:nth-child(5) { transition-delay: .28s; }
.wh-grid > .reveal:nth-child(6) { transition-delay: .35s; }

/* =========================================================
   15. Responsive
   ========================================================= */

@media (max-width: 1100px) {
	.hero-journal { grid-template-columns: 1fr; }
	.hero-edition { max-width: 520px; margin-inline: auto; width: 100%; }
}
@media (max-width: 1024px) {
	.wh-grid--3, .wh-grid--bento { grid-template-columns: repeat(2, 1fr); }
	.process-grid { grid-template-columns: repeat(2, 1fr); }
	.process-step:nth-child(2n) { border-right: 0; }
	.process-step:nth-child(-n+2) { border-bottom: 1px solid var(--wh-line); }
	.wh-grid--bento > :first-child .service-card h3 { font-size: 1.4rem; }
}
@media (max-width: 900px) {
	.primary-nav { display: none; }
	.menu-trigger { display: block; }
	.header-inner { justify-content: flex-end; }
	.wh-section-num { display: none; }
	.wh-section[data-label] { padding-left: 0; }
	.wh-section[data-label]::before { display: none; }
	.wh-section-head--split { display: block; }
	.wh-section-head--split h2 { margin-bottom: .75rem; }
	.wh-section-head--split .wh-lead { padding-left: 0; border-left: 0; }
	.masthead-top { flex-direction: column; gap: .2rem; align-items: center; }
}
@media (max-width: 640px) {
	.wh-grid--2, .wh-grid--3, .wh-grid--bento { grid-template-columns: 1fr; }
	.wh-grid--bento > :first-child, .wh-grid--bento > :last-child { grid-column: auto; }
	.wh-grid--bento > :last-child .service-card { flex-direction: column; align-items: flex-start; }
	.wh-grid--bento > :last-child .service-card .card-arrow { margin: auto 0 0; }
	.process-grid { grid-template-columns: 1fr; }
	.process-step { border-right: 0; border-bottom: 1px solid var(--wh-line); }
	.process-step:last-child { border-bottom: 0; }
	.service-features { grid-template-columns: 1fr; }
	.service-features .feature-item { border-right: 0; }
	.footer-cols { grid-template-columns: 1fr; }
	.footer-cols > .footer-col:first-child { padding-right: 0; border-right: 0; border-bottom: 1px solid rgba(242, 237, 226, .2); }
	.footer-cols > .footer-col:last-child { padding-left: 0; }
	.project-gallery { grid-template-columns: 1fr; }
	.hero-actions .btn { width: 100%; }
	.footer-cta { justify-content: center; text-align: center; }
	.footer-nav ul { justify-content: center; }
	.footer-bottom { justify-content: center; text-align: center; }
	.wh-media-illus { order: -1; }
	.wh-media-illus img { width: min(70%, 240px); }
}

/* =========================================================
   16. Mouvement réduit
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.reveal { opacity: 1; transform: none; }
	html { scroll-behavior: auto; }
}