/*
Theme Name:        Armacoop
Author:            Armadiyo
Author URI:        https://armadiyo.com
Description:       Thème WordPress sur-mesure pour les coopératives du réseau Energie Partagée PACA. Base légère, accessible et personnalisable via le Customizer (couleurs, logo, favicon).
Version:           1.0.0
Requires at least: 6.0
Tested up to:       6.6
Requires PHP:       7.4
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       armacoop
Tags:              custom-background, custom-logo, custom-menu, featured-images, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ==========================================================================
   Tokens de design (pilotés par le Customizer via functions.php)
   ========================================================================== */

:root {
	--accent: #56a804;
	--on-accent: #ffffff;
	--paper: #faf8f4;
	--paper-2: #ffffff;
	--ink: #26241f;
	--ink-2: #6c685e;
	--ink-3: #9a958a;
	--line: rgba(38, 36, 31, .12);
	--line-2: rgba(38, 36, 31, .07);
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--maxw: 1180px;
	--font-head: "Archivo", system-ui, sans-serif;
	--font-body: "Public Sans", system-ui, sans-serif;
	--btn-radius: 999px;
	--card-radius: 18px;
	/*--section-pad: 108px;*/
	--section-pad : 40px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* Réserve toujours la place de la barre de défilement verticale, pour
	   que les blocs en pleine largeur (ex. Hero, via 100vw) mesurent la
	   même largeur que la fenêtre visible, sans provoquer de défilement
	   horizontal indésirable selon les pages. */
	overflow-y: scroll;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	color: inherit;
}

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

h1, h2, h3, h4 {
	font-family: var(--font-head);
	margin: 0;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-weight: 700;
}

p {
	margin: 0;
}

strong {
	font-weight: 700;
}

::selection {
	background: color-mix(in oklab, var(--accent) 28%, transparent);
}

.container {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 32px;
}

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

.skip-link.screen-reader-text:focus {
	background: var(--ink);
	border-radius: 0 0 6px 0;
	clip: auto !important;
	clip-path: none;
	color: #fff;
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 0;
	line-height: normal;
	padding: 12px 18px;
	top: 0;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Boutons / liens
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 22px;
	border-radius: var(--btn-radius);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	transition: transform .15s ease, filter .15s ease, background .15s, color .15s, border-color .15s;
}

.btn .arr {
	transition: transform .2s ease;
}

.btn:hover .arr {
	transform: translateX(3px);
}

.btn-primary {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
}

.btn-primary:hover {
	filter: brightness(.92);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}

.btn-ghost:hover {
	border-color: var(--ink);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 2px solid color-mix(in oklab, var(--accent) 45%, transparent);
	padding-bottom: 2px;
	transition: border-color .15s, color .15s;
	white-space: nowrap;
}

.link-arrow .arr {
	transition: transform .2s ease;
	color: var(--accent);
}

.link-arrow:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.link-arrow:hover .arr {
	transform: translateX(3px);
}

.eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.dot-net {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

.h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	letter-spacing: -.025em;
}

.lead {
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.65;
	max-width: 54ch;
}

.lead strong,
.hero-sub strong {
	color: var(--ink);
}

.meta-line {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink-3);
	letter-spacing: .02em;
	margin: 10px 0 18px;
}

/* ==========================================================================
   Placeholder (visuel manquant)
   ========================================================================== */

.ph {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 16px;
	min-height: 220px;
	background:
		repeating-linear-gradient(135deg,
			color-mix(in oklab, var(--accent) 16%, var(--paper)) 0 11px,
			transparent 11px 22px),
		color-mix(in oklab, var(--accent) 8%, var(--paper-2));
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	overflow: hidden;
}

.ph-tag {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ink-2);
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 6px 10px;
	border-radius: 5px;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.nav-top {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 105px;
	flex-wrap: wrap;
}

.nav-top-right {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

/* Bouton hamburger : masqué sur desktop, affiché uniquement sous le point
   de rupture mobile (voir media query plus bas). */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	margin-left: auto;
	background: transparent;
	border: 0;
	cursor: pointer;
	flex: none;
}

.nav-toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.nav.is-open .nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav.is-open .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.nav.is-open .nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.partner {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-right: 18px;
	border-right: 1px solid var(--line);
}

.partner-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.partner-logo {
	height: 52px;
	width: auto;
	object-fit: contain;
}

.nav-bar {
	background: var(--accent);
}

.nav-bar .container {
	display: flex;
}

.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -.02em;
	color: var(--ink);
}

.brand-mark {
	width: 22px;
	height: 22px;
	background: var(--accent);
	border-radius: 50%;
	flex: none;
}

.custom-logo {
	max-height: 85px;
	width: auto;
}

.site-nav {
	display: flex;
	align-items: stretch;
	gap: 34px;
	flex: 1;
	flex-wrap: wrap;
	min-height: 54px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav-link {
	position: relative;
	font-size: 16px;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	padding: 8px 2px;
	display: flex;
	align-items: center;
	transition: color .15s;
	white-space: nowrap;
}

.site-nav-link:hover {
	color: #fff;
}

.site-nav-link.active {
	color: #fff;
	font-weight: 700;
}

.site-nav-link.active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 4px;
	background: #fff;
}

/* Classe CSS personnalisée ajoutée depuis Apparence > Menus, pour pousser
   ce lien (et ceux qui le suivent, s'il y en a) à droite de la barre. */
.btn-action {
	margin-left: auto;
	padding: 14px 22px;
	background: rgba(15, 18, 22, .34);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	/* Casse la largeur du conteneur parent (ex. .article-wrap dans le
	   contenu d'une page) pour occuper toute la largeur de la fenêtre,
	   quel que soit l'endroit où le bloc est inséré. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	position: relative;
	min-height: clamp(560px, 78vh, 520px);
	display: grid;
	place-items: center;
	padding: 96px 0 140px;
	overflow: hidden;
}

.hero-media {
	position: absolute;
	inset: 0;
}

.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--accent);
	opacity: .32;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}

.hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ph-hero {
	height: 100%;
	border-radius: 0;
	border: 0;
}

.hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 18, 14, .34), rgba(20, 18, 14, .62));
}

.hero-copy {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #fff;
	max-width: 820px;
}

.hero-copy .eyebrow {
	color: #fff;
	justify-content: center;
	font-size: 16px;
}

/* Sélecteurs à deux classes (.hero-copy .hero-*) plutôt qu'une seule :
   assets/css/editor-style.css impose color: var(--ink) sur h1/p à
   l'intérieur de .editor-styles-wrapper (aperçu éditeur), avec une
   spécificité (1 classe + 1 balise) supérieure à .hero-h1/.hero-sub seuls
   (1 classe) — même piège que .article-body h2 rencontré sur le bloc
   Newsletter, corrigé de la même façon. */
.hero-copy .hero-h1 {
	font-size: clamp(40px, 7vw, 60px);
	letter-spacing: -.035em;
	line-height: .98;
	margin: 0 auto 26px;
	max-width: 22ch;
	color: #fff;
}

.hero-copy .hero-sub {
	font-size: clamp(17px, 1.6vw, 20px);
	color: rgba(255, 255, 255, .86);
	line-height: 1.55;
	margin: 0 auto 30px;
	max-width: 60ch;
}

.hero-sub strong {
	color: #fff;
}

.hero-actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	justify-content: center;
}

.hero .btn-ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, .5);
	background: rgba(15, 18, 22, .34);
	backdrop-filter: blur(8px);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.hero .btn-ghost:hover {
	border-color: #fff;
	background: rgba(15, 18, 22, .5);
}

/* ==========================================================================
   Compteurs
   ========================================================================== */

.counters-wrap {
	margin: 0px auto 0px auto;
	position: relative;
	z-index: 5;
}

.counters {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 30px 38px 34px;
	box-shadow: 0 24px 60px -28px rgba(38, 36, 31, .35);
}

.counters-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	justify-content: center;
}

.counters-src {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--ink-3);
	letter-spacing: .01em;
}

.counters-grid {
	display: grid;
	/* --stat-count est posée en style inline (nombre de statistiques
	   réellement affichées, bloc « Chiffres clés ») ; passer par une
	   variable plutôt que fixer grid-template-columns en inline permet à
	   la règle responsive ci-dessous de continuer à s'appliquer. */
	grid-template-columns: repeat(var(--stat-count, 4), 1fr);
	gap: 28px;
}

.stat {
	padding: 0 8px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 18px;
	text-align: left;
}

.stat + .stat {
	border-left: 1px solid var(--line-2);
}

.stat-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: var(--accent);
	flex: none;
	background: color-mix(in oklab, var(--accent) 11%, var(--paper-2));
	border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
}

.stat-text {
	min-width: 0;
}

.stat-num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(30px, 3.4vw, 44px);
	letter-spacing: -.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.stat-suffix {
	font-size: .5em;
	margin-left: 2px;
}

.stat-lbl {
	font-size: 13.5px;
	color: var(--ink-2);
	margin-top: 8px;
	max-width: 18ch;
}

.live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
}

.live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
	animation: armacoop-pulse 2s infinite;
}

@keyframes armacoop-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
	70% { box-shadow: 0 0 0 9px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ==========================================================================
   Sections génériques
   ========================================================================== */

.section {
	padding: var(--section-pad) 0;
}

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 42px;
	flex-wrap: wrap;
}

/* ── dernière réalisation (split) ── */

.split {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(36px, 5vw, 72px);
	align-items: stretch;
}

.split-media {
	align-self: stretch;
	height: 340px;
	min-height: 0;
}

.split-media .card-img {
	height: 100%;
	border-radius: var(--card-radius);
}

.ph-real {
	height: 100%;
	min-height: 0;
}

.split-copy {
	padding: 6px 0;
	align-self: center;
}

/* ── manifeste / CTA ── */
/* Le bloc manifeste suit directement le corps d'article (pas de <section>
   au padding propre) uniquement sur les pages projet/article sans contenu
   « à lire aussi » : il lui faut alors sa propre marge haute. Ailleurs
   (accueil, liste des projets), le bloc précédent a déjà son padding de
   section, inutile d'en rajouter. */
.article-body + .manifeste {
	margin-top: clamp(48px, 6vw, 72px);
}

.manifeste-in {
	background: color-mix(in oklab, var(--accent) 9%, var(--paper-2));
	border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line));
	border-radius: 28px;
	padding: 30px clamp(40px, 5vw, 64px) 30px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.manifeste-in .manifeste-h {
	font-size: clamp(28px, 3.6vw, 34px);
	letter-spacing: -.025em;
	line-height: 1.05;
	max-width: 78%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.manifeste-sub {
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-2);
	/* Pas de margin-top ici : l'espacement avec le titre vient déjà du
	   gap du conteneur flex .manifeste-in — les deux s'additionnaient. */
	max-width: 78%;
	margin-inline: auto;
}

.manifeste-actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 14px;
}

.btn-on-accent {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
}

.btn-on-accent:hover {
	filter: brightness(.92);
}

.btn-outline-accent {
	background: transparent;
	color: var(--accent);
	border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
}

.btn-outline-accent:hover {
	border-color: var(--accent);
	background: color-mix(in oklab, var(--accent) 8%, transparent);
}

/* ── bloc CTA (même traitement visuel que le manifeste, un seul bouton) ── */

.cta {
	margin: 0 0 var(--section-pad);
}

.article-body + .cta {
	margin-top: clamp(48px, 6vw, 72px);
}

.cta-in {
	background: color-mix(in oklab, var(--accent) 9%, var(--paper-2));
	border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line));
	border-radius: 28px;
	padding: 20px clamp(40px, 5vw, 64px) 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cta-in .cta-h {
	font-size: 32px;
	letter-spacing: -.025em;
	line-height: 1.05;
	max-width: 78%;
	margin-top: 0px;
}

.cta-in .cta-sub {
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-2);
	margin-top: 0px;
	max-width: 78%;
	margin-inline: auto;
}

.cta-actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 14px;
}

/* ── actualités ── */

.actu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: var(--card-radius);
	transition: transform .18s ease;
	background: var(--paper-2);
	border: 1px solid var(--line);
	overflow: hidden;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -26px rgba(38, 36, 31, .4);
}

/* Doublon de l'article « à la une » dans la grille : masqué tant qu'aucun
   filtre de rubrique n'est actif (voir assets/js/actu-filters.js). */
.card--feature-dup {
	display: none;
}

.ph-actu,
.card-img {
	height: 200px;
	min-height: 0;
	border-radius: 0;
}

.card-img {
	width: 100%;
	object-fit: cover;
}

.card-body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 6px;
	column-gap: 12px;
	margin-bottom: 13px;
}

.tag {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
	background: color-mix(in oklab, var(--accent) 12%, var(--paper));
	padding: 5px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

.card-date {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-3);
	white-space: nowrap;
}

.card-title {
	font-size: 20px;
	line-height: 1.18;
	letter-spacing: -.02em;
	margin-bottom: 16px;
	transition: color .15s;
}

.card:hover .card-title {
	color: var(--accent);
}

.card-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-top: auto;
}

.card-link .arr {
	transition: transform .2s ease;
}

.card:hover .card-link .arr {
	transform: translateX(3px);
}

/* ── newsletter ── */

.newsletter {
	padding: 0;
}

.news-in {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
	padding: 20px 30px;
	border-radius: var(--card-radius);
	background: var(--accent);
	border: 1px solid var(--line);
}

.news-copy {
	max-width: 560px;
}

/* Sélecteur à deux classes (plutôt que !important) pour battre de façon
   fiable .article-body h2, qui s'applique à tout h2 imbriqué dans
   .article-body — y compris ce titre, quand le bloc Newsletter est inséré
   sur une page ou un article classique. */
.news-copy .news-h {
	font-family: var(--font-head);
	font-size: 40px;
	letter-spacing: -.02em;
	margin: 0 0 16px;
	color: #fff;
}

.news-lead {
	color: #fff;
	opacity: .92;
	font-size: 14px;
	line-height: 1.5;
	max-width: none;
}

.news-form {
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: 100%;
	max-width: 420px;
	text-align: left;
}

/* Bloc « Mis en avant » : mêmes boutons que dans le Hero (fond plein,
   image sombre), adaptés ici au fond vert plein de .news-in. */
.news-actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	justify-content: center;
}

.news-in .btn-primary {
	background: #fff;
	color: var(--accent);
	border-color: #fff;
}

.news-in .btn-primary:hover {
	background: rgba(255, 255, 255, .9);
}

.news-in .btn-ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, .5);
	background: transparent;
}

.news-in .btn-ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .12);
}

.news-field {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.news-input {
	flex: 1;
	min-width: 160px;
	height: 44px;
	padding: 0 14px;
	font: inherit;
	font-size: 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--btn-radius);
	background: rgba(255, 255, 255, .95);
	color: #1a1a1a;
	outline: none;
	transition: border-color .15s;
}

.news-input::placeholder {
	color: #6b6b6b;
}

.news-input:focus {
	border-color: var(--ink);
}

.news-field .btn {
	height: 44px;
	white-space: nowrap;
	padding: 0 18px;
	background: #fff;
	color: var(--accent);
	border-color: #fff;
}

.news-field .btn:hover {
	background: rgba(255, 255, 255, .9);
}

.news-rgpd {
	display: flex;
	gap: 9px;
	font-size: 12px;
	color: rgba(255, 255, 255, .92);
	line-height: 1.4;
	cursor: pointer;
}

.news-rgpd input {
	margin-top: 1px;
	accent-color: var(--ink);
	width: 15px;
	height: 15px;
	flex: none;
}

.news-err {
	font-size: 12.5px;
	color: #fff;
	font-weight: 600;
}

.news-ok {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 15px;
	color: #fff;
}

.news-ok-mark {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	color: var(--accent);
	display: grid;
	place-items: center;
	font-size: 18px;
	flex: none;
}

/* Bloc « Newsletter » : formulaire Contact Form 7 intégré, stylé pour
   reprendre le look du formulaire maison ci-dessus (fond vert de marque).
   Chaque coopérative garde son propre formulaire CF7 (champs, libellés) ;
   ces règles habillent la structure générique que CF7 produit. */
/* Chaque coopérative rédige librement son formulaire CF7 (champs séparés
   par des <br> à l'intérieur d'un seul <p>, le plus souvent) : on ignore
   cette mise en forme d'origine et on empile nous-mêmes chaque élément
   (email, case RGPD, bouton) sur sa propre ligne pleine largeur, quelle
   que soit la façon dont le formulaire a été écrit. */
.newsletter .wpcf7 {
	width: 100%;
	max-width: 420px;
}

.newsletter .wpcf7-form {
	max-width: none;
	margin: 0;
	text-align: left;
}

.newsletter .wpcf7-form p {
	margin: 0;
}

/* Le champ <fieldset> caché (jetons _wpcf7…) garde le padding/bordure par
   défaut du navigateur tant qu'on ne les annule pas, ce qui ajoutait un
   creux invisible en haut du formulaire. Le bloc « screen-reader-response »
   (annonce d'état pour lecteurs d'écran) n'est pas non plus masqué
   visuellement par défaut : sa liste vide gardait, elle aussi, sa marge
   par défaut du navigateur — d'où le déséquilibre entre le haut et le bas
   de l'encart vert. */
.newsletter .wpcf7-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.newsletter .wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

.newsletter .wpcf7-form br {
	display: none;
}

.newsletter .wpcf7-form label {
	display: block;
	margin: 0 0 9px;
	color: #fff;
}

.newsletter .wpcf7-form-control-wrap {
	display: block;
	margin: 0 0 9px;
}

.newsletter input.wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font: inherit;
	font-size: 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--btn-radius);
	background: rgba(255, 255, 255, .95);
	color: #1a1a1a;
	outline: none;
	transition: border-color .15s;
}

.newsletter input.wpcf7-form-control:not(.wpcf7-submit)::placeholder {
	color: #6b6b6b;
}

.newsletter input.wpcf7-form-control:not(.wpcf7-submit):focus {
	border-color: var(--ink);
}

.newsletter input.wpcf7-submit {
	display: block;
	width: auto;
	height: 44px;
	margin: 4px auto 0;
	white-space: nowrap;
	padding: 0 18px;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	border: 1.5px solid #fff;
	border-radius: var(--btn-radius);
	background: #fff;
	color: var(--accent);
	cursor: pointer;
}

.newsletter input.wpcf7-submit:hover {
	background: rgba(255, 255, 255, .9);
}

/* .wpcf7-acceptance porte aussi la classe .wpcf7-form-control : on
   annule ici le fond/bordure/padding du champ générique pour ne garder
   qu'une case à cocher lisible directement sur le vert. */
.newsletter .wpcf7-acceptance {
	display: block;
	width: auto;
	background: none;
	border: none;
	padding: 0;
}

.newsletter .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.newsletter .wpcf7-acceptance label {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, .92);
	line-height: 1.4;
	cursor: pointer;
}

.newsletter .wpcf7-acceptance .wpcf7-list-item-label {
	flex: 1;
	min-width: 0;
}

.newsletter .wpcf7-acceptance input {
	margin-top: 1px;
	accent-color: var(--ink);
	width: 15px;
	height: 15px;
	flex: none;
}

.newsletter .wpcf7-not-valid-tip {
	display: block;
	color: #fff;
	font-weight: 600;
	font-size: 12.5px;
	margin: 9px 0 9px;
	text-align: center;
}

.newsletter .wpcf7-response-output {
	margin: 9px 0 0;
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.newsletter .wpcf7-response-output:empty {
	display: none;
}

/* Par défaut, la feuille de style de Contact Form 7 garde le spinner en
   visibility:hidden (pas display:none) : il réserve donc sa boîte 24×24
   même au repos. Comme le bouton est en display:block (pour le centrer),
   le spinner — juste après lui dans le HTML — était repoussé sur sa
   propre ligne, ajoutant un creux sous le bouton. On le sort du flux tant
   qu'il n'est pas actif (classe .is-active ajoutée par CF7 pendant l'envoi
   du formulaire).*/
.newsletter .wpcf7-spinner {
	display: none;
	vertical-align: middle;
}

.newsletter .wpcf7-spinner.is-active {
	display: inline-block;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.footer {
	background: rgba(9, 9, 9, 0.733);
	color: #d9d6cd;
	padding: 35px 0 32px;
	font-family: var(--font-body);
}

.reseau {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	margin-bottom: 26px;
	flex-wrap: wrap;
}

.reseau-img {
	height: 100px;
	width: auto;
	flex: none;
}

.reseau-txt {
	color: #b8b4aa;
	font-size: 15px;
	line-height: 1.6;
	max-width: 62ch;
	margin: 0;
}

.reseau-txt strong {
	color: #fff;
}

.foot-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 28px;
	flex-wrap: wrap;
	font-size: 13px;
	color: #8d897e;
}

.foot-copy {
	color: #a8a499;
}

.foot-legal,
.foot-social {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.foot-legal a,
.foot-social a {
	color: #cbc7bd;
	text-decoration: none;
	transition: color .15s;
	white-space: nowrap;
}

.foot-legal a:hover,
.foot-social a:hover {
	color: #fff;
}

.foot-social {
	margin-left: auto;
	gap: 20px;
}

.foot-social a {
	font-weight: 500;
}

/* ==========================================================================
   En-tête de page (home.php — liste des actualités)
   ========================================================================== */

.page-head {
	position: relative;
	overflow: hidden;
	color: #fff;
	padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 60px);
}

.page-head .container {
	position: relative;
	z-index: 2;
}

.page-head .eyebrow {
	color: #fff;
}

.page-head .dot-net {
	background: #fff;
}

.page-head .page-lead {
	color: rgba(255, 255, 255, .92);
}

.page-head .page-lead strong {
	color: #fff;
}

.page-head-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.page-head-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

.page-head-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		color-mix(in oklab, var(--accent) 58%, rgba(18, 16, 12, .5)) 0%,
		color-mix(in oklab, var(--accent) 74%, rgba(18, 16, 12, .78)) 100%);
}

.page-title {
	font-size: clamp(34px, 5.2vw, 62px);
	letter-spacing: -.035em;
	line-height: 1;
	max-width: 18ch;
	margin-bottom: 22px;
}

.page-lead {
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.6;
	max-width: 62ch;
}

.page-head .head-stat {
	border-color: rgba(255, 255, 255, .28);
}

.page-head .head-stat-lbl {
	color: rgba(255, 255, 255, .85);
}

.head-stats {
	display: flex;
	gap: 0;
	flex-wrap: wrap;
	margin-top: clamp(32px, 4vw, 46px);
}

.head-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 2px 34px;
	border-left: 1px solid var(--line);
}

.head-stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.head-stat-num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(30px, 3.6vw, 46px);
	letter-spacing: -.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.head-stat-suffix {
	font-size: .46em;
	font-weight: 600;
	margin-left: 1px;
}

.head-stat-lbl {
	font-size: 13.5px;
	color: var(--ink-2);
	max-width: 16ch;
}

@media (max-width: 820px) {
	.head-stat {
		padding-left: 0;
		border-left: 0;
		padding-right: 0;
		flex: 1 1 40%;
	}
	.head-stats {
		gap: 24px 36px;
	}
}

/* ── article à la une ── */

.feature {
	display: grid;
	grid-template-columns: 1.12fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	margin-bottom: clamp(40px, 5vw, 60px);
}

.feature-media {
	display: block;
	align-self: stretch;
	border-radius: var(--card-radius);
	overflow: hidden;
	height: 340px;
	min-height: 0;
	position: relative;
}

.feature-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.feature-media .ph-feature {
	height: 100%;
	min-height: 0;
}

.feature-copy {
	padding: 4px 0;
}

.feature-title {
	font-size: clamp(26px, 3.1vw, 40px);
	letter-spacing: -.025em;
	line-height: 1.08;
	margin: 6px 0 16px;
}

.feature-excerpt {
	color: var(--ink-2);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.6;
	max-width: 54ch;
	margin-bottom: 24px;
}

.feature-excerpt strong {
	color: var(--ink);
}

.tag-une {
	color: var(--on-accent);
	background: var(--accent);
}

/* ── filtres de rubrique ── */

.filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-2);
	background: var(--paper-2);
	border: 1.5px solid var(--line);
	border-radius: var(--btn-radius);
	padding: 10px 16px;
	cursor: pointer;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}

.filter-chip:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.filter-chip.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.filter-count {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--ink) 8%, var(--paper));
	color: var(--ink-2);
}

.filter-chip.is-active .filter-count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* ── cartes actus : extrait ── */

.card-excerpt {
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.55;
	margin-bottom: 18px;
}

.actus-feed {
	padding-top: clamp(44px, 5vw, 64px) !important;
}

/* Sur l'accueil, le manifeste juste au-dessus a déjà sa propre marge basse :
   pas besoin du padding de section complet en plus. */
.actus {
	padding-top: clamp(44px, 5vw, 64px) !important;
}

.actus-feed .card-title {
	margin-bottom: 10px;
}

.actus-feed .card-link {
	white-space: nowrap;
}

@media (max-width: 820px) {
	.feature {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.feature-media,
	.feature-img,
	.feature-media .ph-feature {
		height: 240px;
		min-height: 0;
	}
}

/* ==========================================================================
   Pagination et recherche (index.php)
   ========================================================================== */

.pagination {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: var(--btn-radius);
	border: 1.5px solid var(--line);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
	transition: border-color .15s, background .15s, color .15s;
}

.pagination .page-numbers:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.pagination .page-numbers.dots {
	border: 0;
	color: var(--ink-3);
}

.search-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 24px;
	max-width: 480px;
}

.search-form .search-field {
	flex: 1;
	min-width: 200px;
	height: 44px;
	padding: 0 14px;
	font: inherit;
	font-size: 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--btn-radius);
	background: var(--paper-2);
	color: var(--ink);
	outline: none;
}

.search-form .search-field:focus {
	border-color: var(--accent);
}

.search-form .search-submit {
	height: 44px;
	padding: 0 20px;
	border-radius: var(--btn-radius);
	border: 1.5px solid var(--accent);
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.search-form .search-submit:hover {
	filter: brightness(.92);
}

/* ==========================================================================
   Grille de projets (archive-projet.php)
   ========================================================================== */

.projects {
	padding-top: clamp(44px, 5vw, 64px) !important;
}

.proj-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.proj-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: var(--card-radius);
	overflow: hidden;
	cursor: pointer;
	background: var(--paper-2);
	border: 1px solid var(--line);
	transition: transform .18s ease, box-shadow .18s ease;
}

.proj-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -26px rgba(38, 36, 31, .4);
}

.proj-media {
	position: relative;
}

.ph-proj,
.proj-img {
	height: 198px;
	min-height: 0;
	border-radius: 0;
	border: 0;
}

.proj-img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.proj-filiere {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--paper-2);
	border: 2px solid #fff;
	box-shadow: 0 3px 12px -2px rgba(20, 18, 14, .4);
}

.proj-filiere img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.proj-badge {
	position: absolute;
	top: 13px;
	left: 13px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 6px 11px;
	border-radius: 999px;
}

.proj-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink-3);
}

.proj-badge.st-service .proj-badge-dot {
	background: var(--accent);
}

.proj-badge.st-finance {
	color: var(--accent);
}

.proj-badge.st-finance .proj-badge-dot {
	background: var(--accent);
	box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent);
	animation: armacoop-pulse 2s infinite;
}

.proj-badge.st-etude .proj-badge-dot {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1px var(--ink-3);
}

.proj-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 22px 24px;
}

.proj-loc {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-3);
	letter-spacing: .02em;
	margin-bottom: 9px;
}

.proj-title {
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: -.02em;
	margin-bottom: 16px;
	transition: color .15s;
}

.proj-card:hover .proj-title {
	color: var(--accent);
}

.proj-specs {
	display: flex;
	gap: 26px;
	padding: 14px 0;
	margin-bottom: 14px;
	border-top: 1px solid var(--line-2);
	border-bottom: 1px solid var(--line-2);
}

.proj-spec {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.proj-spec-num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 23px;
	letter-spacing: -.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.proj-spec-unit {
	font-size: .5em;
	font-weight: 600;
	margin-left: 1px;
}

.proj-spec-lbl {
	font-size: 11.5px;
	color: var(--ink-3);
	letter-spacing: .01em;
}

.proj-note {
	font-size: 13px;
	color: var(--ink-2);
	margin-bottom: 16px;
}

.proj-fund {
	margin-bottom: 16px;
}

.proj-fund-bar {
	height: 7px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--ink) 9%, var(--paper));
	overflow: hidden;
	margin-bottom: 8px;
}

.proj-fund-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--accent);
}

.proj-fund-note {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--ink-2);
	letter-spacing: .01em;
}

.proj-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-top: auto;
}

.proj-link .arr {
	transition: transform .2s ease;
}

.proj-card:hover .proj-link .arr {
	transform: translateX(3px);
}

/* ── carte du territoire ── */

.ph-carte {
	height: 100%;
	min-height: 360px;
}

@media (max-width: 980px) {
	.proj-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 820px) {
	.proj-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Vue unique : article, page, projet (single.php, page.php, single-projet.php)
   ========================================================================== */

.article-wrap {
	max-width: 1040px;
	margin-inline: auto;
	padding-inline: 32px;
}

.article-head {
	padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 34px);
}

.crumbs {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--ink-3);
	letter-spacing: .01em;
	margin-bottom: 26px;
}

.crumbs a {
	text-decoration: none;
	transition: color .15s;
}

.crumbs a:hover {
	color: var(--accent);
}

.crumbs-current {
	color: var(--ink-2);
}

.article-title {
	font-size: clamp(32px, 4.4vw, 52px);
	letter-spacing: -.03em;
	line-height: 1.04;
	margin: 16px 0 22px;
}

.article-lead {
	font-size: clamp(18px, 1.7vw, 21px);
	line-height: 1.55;
	color: var(--ink-2);
	font-weight: 500;
}

/* ── visuel principal ── */

.article-hero {
	margin: clamp(28px, 3.5vw, 40px) 0 clamp(36px, 4.5vw, 52px);
}

.article-hero-img {
	width: 100%;
	height: clamp(280px, 42vw, 500px);
	object-fit: cover;
	border-radius: var(--card-radius);
	display: block;
}

.article-figcaption {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--ink-3);
	margin-top: 12px;
	text-align: center;
}

/* ── corps de l'article (contenu réel de the_content()) ── */

.article-body {
	font-size: 18px;
}

.article-body > p {
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.78;
	color: var(--ink);
	margin: 0 0 26px;
}

/* Le bloc « Accroche » doit garder son style propre même inséré dans le
   contenu d'une page/d'un article (où .article-body > p ci-dessus a une
   spécificité plus forte que .article-lead seule). Il déborde aussi de la
   colonne de lecture (.article-wrap, 1040px) pour retrouver la largeur du
   conteneur standard du site (--maxw, 1180px) — la même que le H1 dans
   l'en-tête, qui n'est pas dans .article-wrap. Débordement calculé en
   pixels fixes par rapport au parent (70px de chaque côté = (1180 - 1040)/2,
   padding identique des deux conteneurs) plutôt qu'avec 100vw : cette
   dernière technique inclut la largeur de la barre de défilement verticale
   du navigateur et provoque un ascenseur horizontal parasite. */
.article-body > p.article-lead {
	font-size: clamp(18px, 1.7vw, 21px);
	line-height: 1.55;
	color: var(--ink-2);
	font-weight: 500;
	max-width: none;
	width: calc(100% + 140px);
	margin-inline: -70px;
}

@media (max-width: 820px) {
	.article-body > p.article-lead {
		width: 100%;
		margin-inline: 0;
	}
}

/* Le bloc « Chiffres clés » déborde de la même façon et pour la même
   raison que le bloc Accroche ci-dessus : retrouver la largeur du
   conteneur standard du site (--maxw, 1180px) plutôt que rester cantonné
   à la colonne de lecture (.article-wrap, 1040px). */
.article-body > section.chiffres-cles {
	width: calc(100% + 140px);
	margin-inline: -70px;
	padding: 0 0 var(--section-pad) 0;
}

@media (max-width: 820px) {
	.article-body > section.chiffres-cles {
		width: 100%;
		margin-inline: 0;
	}
}

/* Même débordement que ci-dessus pour le bloc Mis en avant (partage la
   carte .news-in). Le bloc Newsletter, lui, va plus loin : pleine largeur
   de la fenêtre, comme le Hero (voir plus bas). */
.article-body > section.mise-en-avant {
	width: calc(100% + 140px);
	margin-inline: -70px;
}

@media (max-width: 820px) {
	.article-body > section.mise-en-avant {
		width: 100%;
		margin-inline: 0;
	}
}

/* Le bloc Newsletter occupe toute la largeur de la fenêtre, comme le Hero
   (même technique, voir .hero) — plus de carte encadrée : la bordure
   arrondie de .news-in n'a donc plus lieu d'être ici. */
.newsletter {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.newsletter .news-in {
	max-width: none;
	border-radius: 0;
}

.article-body > p strong,
.article-body > ul strong,
.article-body > ol strong {
	font-weight: 700;
}

.article-body > p em,
.article-body > ul em,
.article-body > ol em {
	font-style: italic;
}

.article-body > p a,
.article-body > ul a,
.article-body > ol a,
.article-body > blockquote a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	font-weight: 600;
}

.article-body > p a:hover,
.article-body > ul a:hover,
.article-body > ol a:hover,
.article-body > blockquote a:hover {
	text-decoration-thickness: 2.5px;
}

.article-body > ul,
.article-body > ol {
	margin: 0 0 26px;
	padding-left: 1.4em;
}

.article-body > ul li,
.article-body > ol li {
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.7;
	color: var(--ink);
	padding-left: .3em;
	margin-bottom: 10px;
}

.article-body > ul li:last-child,
.article-body > ol li:last-child {
	margin-bottom: 0;
}

.article-body > ul li::marker,
.article-body > ol li::marker {
	color: var(--accent);
}

.article-body h2 {
	font-size: clamp(23px, 2.4vw, 30px);
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 42px 0 16px;
}

.article-body h3,
.article-body h4 {
	letter-spacing: -.015em;
	margin: 32px 0 14px;
}

.article-body > blockquote {
	margin: 40px 0;
	padding: 6px 0 6px 28px;
	border-left: 3px solid var(--accent);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.32;
	letter-spacing: -.01em;
	color: var(--ink);
}

.article-body > blockquote p {
	margin: 0;
}

.article-body > blockquote cite {
	display: block;
	margin-top: 16px;
	font-family: var(--font-body);
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink-3);
	letter-spacing: 0;
}

/* :not() sur les classes d'images "gérées" par un composant (cartes,
   grilles de projets, article à la une, Hero…) : celles-ci ont déjà leur
   propre cadrage en hauteur fixe défini ailleurs — sans cette exclusion,
   .article-body img (plus spécifique qu'une simple classe) l'écraserait
   dès que le bloc correspondant est inséré dans le contenu d'une page. */
.article-body img:not(.card-img):not(.proj-img):not(.feature-img):not(.hero-img) {
	max-width: 100%;
	height: auto;
	border-radius: var(--card-radius);
	display: block;
}

.article-body > figure {
	margin: 32px 0;
}

.article-body > figure figcaption {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--ink-3);
	margin-top: 10px;
	text-align: center;
}

/* Légende du bloc natif « Image » (wp-block-image), même style que
   .article-figcaption (légende de l'image à la une). */
.wp-block-image :where(figcaption) {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--ink-3);
	margin-top: 12px;
	text-align: center;
}

.wp-block-list{
	margin-top: 16px;
	margin-bottom: 0px;
}
.wp-block-list li{
	margin-bottom: 16px;
}

.article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 26px;
	font-size: 15px;
}

.article-body th,
.article-body td {
	padding: 10px 12px;
	border: 1px solid var(--line);
	text-align: left;
}

.page-links {
	margin: 30px 0;
	font-size: 14px;
	color: var(--ink-2);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.page-links a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── encart chiffres (article / projet) ── */

.article-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 36px 0;
	padding: 28px 30px;
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	background: color-mix(in oklab, var(--accent) 6%, var(--paper-2));
}

.article-stat {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.article-stat-num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(28px, 3.2vw, 40px);
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.article-stat-unit {
	font-size: .46em;
	font-weight: 600;
}

.article-stat-lbl {
	font-size: 13px;
	color: var(--ink-2);
	line-height: 1.3;
}

/* ── pied d'article ── */

.article-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 44px 0 8px;
	padding: 26px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.article-tags {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.article-share {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.share-lbl {
	font-size: 13px;
	color: var(--ink-3);
	font-weight: 600;
}

.share-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	background: transparent;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
	border: 1.5px solid var(--line);
	border-radius: var(--btn-radius);
	padding: 8px 13px;
	transition: border-color .15s, color .15s;
}

.share-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.article-back {
	margin-top: 30px;
	/* .article-back est toujours le dernier élément de .article-body :
	   cette marge basse assure une respiration avant le pied de page
	   quand l'article est court et n'a pas de section « À lire aussi »
	   à sa suite (sans toucher à .article-body, réutilisé par d'autres
	   gabarits comme l'accueil). */
	margin-bottom: clamp(48px, 6vw, 72px);
}

.related {
	padding-top: clamp(48px, 6vw, 72px);
}

@media (max-width: 820px) {
	.article-wrap {
		padding-inline: 22px;
	}
	.article-stats {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 24px;
	}
}

/* ==========================================================================
   Bloc natif : Accordéon (core/accordion)
   ========================================================================== */

.wp-block-accordion-heading__toggle-title {
	color: var(--accent);
}

.wp-block-accordion-heading__toggle-icon {
	color: var(--accent);
	fill: var(--accent);
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* ==========================================================================
   Contact Form 7
   ========================================================================== */

.wpcf7-form {
	max-width: 480px;
	margin-top: 8px;
	margin-bottom: 100px;
}

.wpcf7-form p {
	margin: 0 0 22px;
}

.wpcf7-form label {
	display: block;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	margin-bottom: 10px;
}

.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form-control {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--paper-2);
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 12px 16px;
	transition: border-color .15s;
}

.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--accent);
}

/* .wpcf7-acceptance (case à cocher RGPD) porte aussi la classe
   .wpcf7-form-control : sans cette redéfinition, elle hérite du fond, de
   la bordure et du padding prévus pour les champs texte (même piège déjà
   rencontré et corrigé sur le bloc Newsletter, ici en général). */
.wpcf7-acceptance {
	width: auto;
	background: none;
	border: none;
	padding: 0;
}

.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-acceptance label {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 0;
	font-size: 14px;
	cursor: pointer;
}

.wpcf7-acceptance .wpcf7-list-item-label {
	flex: 1;
	min-width: 0;
}

.wpcf7-acceptance input {
	margin-top: 3px;
	accent-color: var(--accent);
	width: 15px;
	height: 15px;
	flex: none;
}

textarea.wpcf7-form-control {
	min-height: 160px;
	resize: vertical;
}

.wpcf7-form-control.wpcf7-not-valid {
	border-color: #c0392b;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #c0392b;
}

.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 26px;
	border-radius: var(--btn-radius);
	border: 1.5px solid var(--accent);
	background: var(--accent);
	color: var(--on-accent);
	cursor: pointer;
	line-height: 1;
	transition: filter .15s ease;
}

.wpcf7-submit:hover {
	filter: brightness(.92);
}

.wpcf7-spinner {
	margin-left: 10px;
}

.wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid var(--line);
	font-size: 14px;
}

.wpcf7-form[data-status="mail_sent"] .wpcf7-response-output {
	border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
	background: color-mix(in oklab, var(--accent) 9%, var(--paper-2));
	color: var(--ink);
}

.wpcf7-form[data-status="validation_failed"] .wpcf7-response-output,
.wpcf7-form[data-status="acceptance_missing"] .wpcf7-response-output,
.wpcf7-form[data-status="spam"] .wpcf7-response-output,
.wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
.wpcf7-form[data-status="aborted"] .wpcf7-response-output {
	border-color: #e6b3ac;
	background: #fbeceb;
	color: #8f2e23;
}


.realisation .container, .actus .container{ padding: 0px 	}
.realisation h2, .actus h2{ margin-top: 20px; margin-bottom: 0px }
.actus h2{ font-size:44px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 820px) {
	.container { padding: 0 22px; }

	/* Le padding et le max-width du texte, pensés pour desktop, laissaient
	   beaucoup trop de vide et forçaient un excès de retour à la ligne
	   sur un écran étroit. */
	.manifeste-in { padding: 32px 22px 20px; }
	.manifeste-h,
	.manifeste-sub { max-width: none; }

	/* Masquer le conteneur entier, pas seulement .partner à l'intérieur :
	   .nav-top-right a lui aussi margin-left: auto, et entrerait sinon en
	   concurrence avec .nav-toggle pour la position tout à droite. */
	.nav-top-right { display: none; }

	/* Menu hamburger : le bandeau vert des liens est masqué par défaut et
	   ne s'affiche, en liste verticale plein écran, que lorsque le bouton
	   est activé (.nav.is-open, posé par assets/js/nav-toggle.js). */
	.nav-toggle { display: flex; }

	.nav-bar {
		display: none;
	}

	/* position: absolute (plutôt qu'un bloc dans le flux normal) : le
	   panneau se superpose au contenu de la page au lieu de le repousser
	   vers le bas à l'ouverture. .nav (position: sticky) sert de repère
	   de positionnement. */
	.nav.is-open .nav-bar {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		box-shadow: 0 16px 32px rgba(38, 36, 31, .18);
	}

	.nav-bar .container {
		display: block;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.site-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		min-height: 0;
	}

	.site-nav-link {
		padding: 14px 0;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
		margin-left: unset;
		background: transparent;
	}

	.split { grid-template-columns: 1fr; gap: 28px; }

	/* Bloc « Dernière réalisation » : texte avant l'image sur mobile
	   (inversé par rapport à l'ordre du HTML / du desktop). */
	section[data-screen-label="Dernière réalisation"] .split-media { order: 2; }
	section[data-screen-label="Dernière réalisation"] .split-copy { order: 1; }
	.news-in { padding: 30px 22px; gap: 18px; }
	.actu-grid { grid-template-columns: 1fr; }
	/* Colonne unique, dimensionnée à son propre contenu (pas 1fr) et
	   centrée dans la carte via justify-content — chaque ligne s'aligne
	   alors sur la même largeur de colonne plutôt que d'être centrée
	   individuellement (ce qui décalerait le picto selon la largeur du
	   chiffre d'une ligne à l'autre). */
	.counters-grid { grid-template-columns: max-content; justify-content: center; gap: 26px; }
	.stat + .stat { border-left: 0; }
	.reseau { flex-direction: column; align-items: flex-start; gap: 18px; text-align: center; }
	.reseau-img {margin:auto;}
	.foot-bottom { flex-direction: column; gap: 8px; }
	.foot-social {margin-left: unset;}
	.hero{min-height:unset;padding:30px 0 30px;margin-bottom: 30px;}
	.chiffres-cles {display: none;}
	.manifeste{padding-left: 22px; padding-right: 22px;}
	.article-body .manifeste{padding: 0px 0px;}
	.realisation .container, .actus .container{ padding: 0px 	}
	.news-copy .news-h{font-size: 30px;}
	.actus h2, .realisation h2{margin-top: 0px;}
	.wpcf7-form{margin-bottom: 0px;}

	.foot-legal a,
	.foot-social a {
		white-space: unset;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}