/* ============================================================
   ADEPP — theme.css v0.3.0 (J1 — 10 mai 2026)
   Inter (display + body) — charte 9 mai
   ============================================================ */

:root {
	--bg:        #FFFFFF;
	--bg-deep:   #E8E1D2;
	--paper:     #FCFAF5;
	--ink:       #1F1F1F;
	--ink-soft:  #5C5C5C;
	--rule:      #EAE7E0;
	--red:       #7A1E2C;
	--red-deep:  #4F1018;

	/* Métal foncé (top-rule, footer-bottom, quote) */
	--metal:          #2A2A2E;
	--metal-light:    #3A3A3E;
	--metal-deep:     #1F1F22;
	--metal-gradient: linear-gradient(180deg, #3A3A3E 0%, #1F1F22 100%);

	--ff-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	--max-content: 1100px;
	--max-wide:    1400px;
	--gutter:      40px;
	--header-h:    70px;

	/* Charte v2 — 10 mai après-midi tardif (J3.7) */
	--paper-grey:      #EEEEF0;  /* gris doux, remplace beige --paper en background */
	--paper-grey-rule: #DDDDE0;  /* filet sur fond paper-grey */

	/* --paper #FCFAF5 conservé pour color/border-color (texte clair sur fond sombre).
	   NE PLUS UTILISER comme background — utiliser --paper-grey. */
}

/* Reset minimal */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	font-family: var(--ff-body);
	background: var(--bg);
	color: var(--ink);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: radial-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px);
	background-size: 3px 3px;
	overflow-x: hidden;
}
::selection { background: var(--red); color: #fff; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   TYPOGRAPHIE — Inter
   ============================================================ */
h1, h2, h3, h4, h5 {
	font-family: var(--ff-display);
	font-weight: 700;
}
h1, h2 {
	letter-spacing: -0.035em;
	line-height: 1;
}
h3 {
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-weight: 600;
}
h4 {
	letter-spacing: 0.02em;
	font-weight: 500;
}

/* a11y */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden;
}
.screen-reader-text:focus {
	clip: auto; width: auto; height: auto;
	padding: 12px 16px; background: var(--ink); color: var(--paper);
	z-index: 9999;
}

/* ============================================================
   REVEAL WORDS animation
   ============================================================ */
.reveal-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-word.in { opacity: 1; transform: translateY(0); }
.reveal {
	opacity: 0; transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.reveal-word, .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HEADER — simplifié J1.7 (logo + burger seul)
   ============================================================ */
header.nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--rule);
	transition: padding 0.3s ease;
}
.nav-inner { padding: 0; }
.nav-bar {
	max-width: var(--max-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 14px 24px;
	transition: padding 0.3s ease;
}
.nav-bar-spacer { display: block; }
.nav-bar-brand { justify-self: center; display: inline-flex; }
.nav-bar-end { justify-self: end; display: inline-flex; }
header.nav.scrolled .nav-bar { padding: 10px 24px; }

.brand { display: inline-flex; align-items: center; }
.brand-logo,
.custom-logo {
	height: 42px;
	width: auto;
	display: block;
	transition: height 0.3s ease, opacity 0.2s ease;
}
header.nav.scrolled .custom-logo,
header.nav.scrolled .brand-logo { height: 34px; }
.brand:hover .brand-logo,
.brand:hover .custom-logo { opacity: 0.85; }

/* Burger (toujours visible, tous breakpoints) */
.burger {
	display: inline-flex;
	background: transparent;
	border: 1px solid var(--ink);
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	transition: background 0.2s ease, color 0.2s ease;
	flex-direction: column;
	gap: 4px;
}
.burger:hover { background: var(--ink); color: var(--paper); }
.burger-bar {
	display: block;
	width: 20px; height: 2px;
	background: currentColor;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
body.menu-open .burger .burger-bar:nth-child(1) { transform: translate(0, 6px) rotate(45deg); }
body.menu-open .burger .burger-bar:nth-child(2) { opacity: 0; }
body.menu-open .burger .burger-bar:nth-child(3) { transform: translate(0, -6px) rotate(-45deg); }

/* ============================================================
   NAV OVERLAY — slide-in 50% droite + backdrop (J3.7 fix anim)
   Bug J3.6 : panneau apparaissait instantanément car [hidden]→display:none
   cassait la transition. Fix : visibility/pointer-events au repos +
   class .is-open + force reflow JS pour déclencher la transition.
   ============================================================ */
.nav-overlay-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1850;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 500ms cubic-bezier(0.33, 1, 0.68, 1),
	            visibility 0s linear 500ms;
	cursor: pointer;
}
.nav-overlay-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 1100ms cubic-bezier(0.65, 0, 0.35, 1),
	            visibility 0s linear 0s;
}

.nav-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 50%;
	z-index: 1900;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 22px 28px 28px;
	transform: translateX(100%);
	visibility: hidden;
	pointer-events: none;
	will-change: transform;
	box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
	transition: transform 500ms cubic-bezier(0.33, 1, 0.68, 1),
	            visibility 0s linear 500ms;
}
body.menu-open { overflow: hidden; }

.nav-overlay.is-open {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
	transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1),
	            visibility 0s linear 0s;
}

/* Head + actions : fade-in décalé pendant ouverture */
.nav-overlay-head,
.nav-overlay-actions {
	opacity: 0;
	transition: opacity 200ms ease-out;
}
.nav-overlay.is-open .nav-overlay-head {
	opacity: 1;
	transition: opacity 400ms ease-out 200ms;
}
.nav-overlay.is-open .nav-overlay-actions {
	opacity: 1;
	transition: opacity 400ms ease-out 760ms;
}

/* Stagger items menu : translateX(-12px → 0) + opacity 0 → 1 sur 350ms ease-out
   Delay base 200ms + 80ms × index (selon brief J3.7 Décision D) */
.nav-overlay-list > li {
	opacity: 0;
	transform: translateX(-12px);
	transition: opacity 350ms ease-out, transform 350ms ease-out;
}
.nav-overlay.is-open .nav-overlay-list > li {
	opacity: 1;
	transform: translateX(0);
}
.nav-overlay.is-open .nav-overlay-list > li:nth-child(1) { transition-delay: 200ms; }
.nav-overlay.is-open .nav-overlay-list > li:nth-child(2) { transition-delay: 280ms; }
.nav-overlay.is-open .nav-overlay-list > li:nth-child(3) { transition-delay: 360ms; }
.nav-overlay.is-open .nav-overlay-list > li:nth-child(4) { transition-delay: 440ms; }
.nav-overlay.is-open .nav-overlay-list > li:nth-child(5) { transition-delay: 520ms; }
.nav-overlay.is-open .nav-overlay-list > li:nth-child(6) { transition-delay: 600ms; }
.nav-overlay.is-open .nav-overlay-list > li:nth-child(7) { transition-delay: 680ms; }
.nav-overlay.is-open .nav-overlay-list > li:nth-child(8) { transition-delay: 760ms; }

@media (max-width: 980px) {
	.nav-overlay { left: 0; box-shadow: none; }
	.nav-overlay-backdrop { background: rgba(0, 0, 0, 0); display: none; }
}

.nav-overlay-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 8px;
}
.nav-overlay-close {
	background: transparent;
	border: 1px solid var(--ink);
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.nav-overlay-close:hover { background: var(--ink); color: var(--paper); }

.nav-overlay-nav {
	flex: 1;
	max-width: var(--max-wide);
	width: 100%;
	margin: 0 auto;
	padding: 24px 0 36px;
}
.nav-overlay-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.nav-overlay-list > li {
	border-bottom: 1px solid var(--rule);
}
.nav-overlay-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 16px;
	padding: 22px 4px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--ff-display);
	font-size: clamp(22px, 3.4vw, 38px);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-align: left;
	transition: color 0.2s ease, padding-left 0.25s ease;
}
.nav-overlay-link:hover,
.nav-overlay-link:focus-visible {
	color: var(--red);
	padding-left: 14px;
	outline: none;
}
.nav-overlay-chev {
	display: inline-flex;
	width: 24px; height: 24px;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 300;
	color: var(--ink-soft);
	transition: transform 0.3s ease, color 0.2s ease;
}
.nav-overlay-toggle[aria-expanded="true"] .nav-overlay-chev {
	transform: rotate(45deg);
	color: var(--red);
}

.nav-overlay-sublist {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 4px 0 18px 14px;
	border-top: 1px solid var(--rule);
}
.nav-overlay-sublist a {
	display: block;
	padding: 12px 4px;
	font-family: var(--ff-body);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ink-soft);
	transition: color 0.2s ease, padding-left 0.2s ease;
}
.nav-overlay-sublist a:hover,
.nav-overlay-sublist a:focus-visible {
	color: var(--red);
	padding-left: 8px;
	outline: none;
}

.nav-overlay-actions {
	max-width: var(--max-wide);
	width: 100%;
	margin: 0 auto;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}
.nav-overlay-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-family: var(--ff-body);
	font-size: 13px;
	color: var(--ink-soft);
}
.nav-overlay-meta a { color: var(--ink-soft); transition: color 0.2s ease; }
.nav-overlay-meta a:hover { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
	.nav-overlay,
	.nav-overlay.is-open,
	.nav-overlay-backdrop,
	.nav-overlay-backdrop.is-open,
	.nav-overlay .nav-overlay-head,
	.nav-overlay .nav-overlay-actions,
	.nav-overlay-list > li,
	.nav-overlay.is-open .nav-overlay-list > li {
		transition: none !important;
		transition-delay: 0s !important;
	}
}

/* ============================================================
   BOUTONS
   ============================================================ */
/* J3.6-3 — CTA bordeaux global (var --red default, hover slide-in --red-deep) */
.btn {
	background: var(--red);
	color: var(--bg);
	padding: 16px 26px;
	font-family: var(--ff-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border: 1px solid var(--red);
	position: relative;
	overflow: hidden;
	display: inline-block;
	transition: color 0.4s ease, border-color 0.4s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn span { position: relative; z-index: 2; }
.btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--red-deep);
	transform: translateY(101%);
	transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
	z-index: 1;
}
.btn:hover { color: var(--bg); border-color: var(--red-deep); }
.btn:hover::before { transform: translateY(0); }
.btn.light  { background: var(--paper-grey); color: var(--ink);   border-color: var(--paper-grey); }
.btn.light::before { background: var(--red); }
.btn.light:hover  { color: var(--bg); border-color: var(--red); }
.btn.outline {
	background: transparent;
	color: var(--paper);
	border-color: rgba(250, 247, 238, 0.5);
}
.btn.outline::before { background: var(--red); }
.btn.outline:hover { color: var(--bg); border-color: var(--red); }
.btn.nav-cta { padding: 12px 22px; font-size: 11px; }

/* ============================================================
   HERO (front-page)
   ============================================================ */
.hero {
	position: relative;
	min-height: 92vh;
	display: grid;
	grid-template-columns: 1fr;
	border-bottom: 1px solid var(--ink);
	overflow: hidden;
}
.hero-image {
	position: absolute;
	inset: -10%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: contrast(1.05) saturate(1.05);
	will-change: transform;
}
.hero-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(241, 236, 226, 0.10) 0%,
		rgba(241, 236, 226, 0)    35%,
		rgba(15, 15, 15, 0.55)   100%);
}
.hero-content {
	position: relative;
	z-index: 2;
	padding: 80px var(--gutter);
	align-self: end;
	max-width: var(--max-wide);
	margin: 0 auto;
	width: 100%;
	color: var(--paper);
}
.hero-content--bottom {
	text-align: center;
	padding: 60px var(--gutter) 56px;
}
.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	font-family: var(--ff-display);
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--paper);
	opacity: 0.85;
	margin-bottom: 28px;
}
.hero-content--bottom .hero-meta { justify-content: center; }
.hero-meta span:first-child { color: var(--red); font-weight: 700; opacity: 1; }
.hero h1 {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(56px, 9vw, 144px);
	line-height: 0.85;
	letter-spacing: -0.04em;
	/* scaleY removed — Inter does not need it */
	transform-origin: left center;
	margin-bottom: 32px;
	max-width: 1100px;
}
.hero h1 em {
	font-style: italic;
	font-weight: 600;
	color: var(--red);
}
/* Hero home variant — fluid, allows wrap; nowrap only when room exists */
.hero-title--single {
	font-size: clamp(24px, 4.2vw, 60px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em !important;
	/* scaleY removed — Inter does not need it */
	transform-origin: center center !important;
	margin: 0 auto 28px !important;
	max-width: 100% !important;
	/* No nowrap — let it break to 2 lines naturally if needed */
}
@media (min-width: 1700px) {
	/* Single line guaranteed only at very large screens */
	.hero-title--single {
		white-space: nowrap;
		font-size: clamp(48px, 4vw, 72px) !important;
	}
}
.hero-content--bottom .hero-bottom {
	border-top: none;
	padding-top: 0;
	display: block;
}
.hero-content--bottom .hero-cta {
	justify-content: center;
}
.hero-bottom {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	align-items: end;
	border-top: 1px solid rgba(250, 247, 238, 0.3);
	padding-top: 28px;
}
.hero-lede {
	font-size: 17px;
	line-height: 1.5;
	max-width: 480px;
	color: var(--paper);
	opacity: 0.92;
}
.hero-cta {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ============================================================
   QUOTE / MANIFESTE
   ============================================================ */
.quote {
	background: var(--metal-gradient);
	color: var(--paper);
	padding: 100px var(--gutter);
	text-align: center;
	border-bottom: 1px solid var(--ink);
}
.quote-mark {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 80px;
	line-height: 0;
	color: var(--red);
	display: block;
	margin-bottom: 20px;
}
.quote-text {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 52px);
	line-height: 1.05;
	max-width: 1100px;
	margin: 0 auto;
	letter-spacing: -0.03em;
	/* scaleY removed — Inter does not need it */
}
.quote-cite {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--paper);
	opacity: 0.6;
	margin-top: 32px;
	font-style: normal;
}

/* ============================================================
   STATS
   ============================================================ */
.stats-section {
	background: var(--bg);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 36px var(--gutter);
}
.stats-section--three { padding: 32px var(--gutter); }
.stats-grid {
	max-width: var(--max-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.stat {
	padding: 12px 24px;
	border-right: 1px solid var(--rule);
	text-align: left;
}
.stat:last-child { border-right: none; }
.stat-num {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: clamp(28px, 3.4vw, 48px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin-bottom: 6px;
	display: flex;
	align-items: baseline;
	gap: 3px;
}
.stat-num em { color: var(--red); font-style: italic; }
.stat-num sup, .stat-num .star {
	font-size: 0.5em;
	line-height: 0;
	font-weight: 600;
}
.stat-num .star { color: var(--red); }
.stat-num .stat-suffix { color: var(--ink-soft); font-size: 0.55em; }
.stat-label {
	font-family: var(--ff-body);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink-soft);
}

/* ============================================================
   PAGE SHELL
   ============================================================ */
.page-shell { border-bottom: 1px solid var(--ink); }
.page-shell-inner {
	max-width: var(--max-content);
	margin: 0 auto;
	padding: 80px var(--gutter);
}
.section-tag {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--red);
	border-top: 1px solid var(--ink);
	padding-top: 12px;
	display: inline-block;
	margin-bottom: 24px;
}
.page-article-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(40px, 6vw, 88px);
	line-height: 0.85;
	letter-spacing: -0.04em;
	/* scaleY removed — Inter does not need it */
	transform-origin: left center;
	margin-bottom: 32px;
}
.page-article-body {
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.page-article-body p + p { margin-top: 1em; }
.placeholder-note { color: var(--ink-soft); font-size: 14px; }

/* Post list (index.php) */
.archive-head { margin-bottom: 40px; }
.post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.post-card {
	border: 1px solid var(--ink);
	padding: 24px;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: background 0.3s ease;
}
.post-card:hover { background: var(--paper-grey); }
.post-card-thumb img { aspect-ratio: 16/10; object-fit: cover; }
.post-card h2 {
	font-family: var(--ff-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.03em;
	/* scaleY removed — Inter does not need it */
	transform-origin: left center;
}
.post-card h2 a { color: var(--ink); }
.post-card h2 a:hover { color: var(--red); }
.post-excerpt { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.blog-meta {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-soft);
	font-weight: 500;
}
.blog-readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	align-self: flex-start;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-readmore::after { content: '→'; transition: transform 0.2s ease; }
.blog-readmore:hover { color: var(--red); border-color: var(--red); }
.blog-readmore:hover::after { transform: translateX(3px); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--bg); border-top: 1px solid var(--ink); }
.footer-hero {
	padding: 80px var(--gutter);
	border-bottom: 1px solid var(--ink);
	max-width: var(--max-wide);
	margin: 0 auto;
}
.footer-hero-tag {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--red);
	border-top: 1px solid var(--ink);
	padding-top: 12px;
	display: inline-block;
	margin-bottom: 28px;
}
.footer-hero h2 {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(48px, 8vw, 124px);
	line-height: 0.85;
	letter-spacing: -0.04em;
	/* scaleY removed — Inter does not need it */
	transform-origin: left center;
	margin-bottom: 56px;
	max-width: 1200px;
}
.footer-hero h2 em { font-style: italic; color: var(--red); font-weight: 600; }

.contact-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	border-top: 1px solid var(--ink);
	padding-top: 32px;
	align-items: start; /* fix bug J : alignement vertical */
}
.contact-block h4 {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: 12px;
}
.contact-block .value {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ink);
	display: block;
}
.contact-block a.value { transition: color 0.2s ease; }
.contact-block a.value:hover { color: var(--red); }
.contact-block .value em { font-style: italic; color: var(--red); }
.contact-block .value.email-value {
	font-family: var(--ff-body);
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 500;
	letter-spacing: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.contact-block .sub {
	font-family: var(--ff-body);
	font-size: 13px;
	color: var(--ink-soft);
	margin-top: 6px;
}

.footer-bottom {
	background: var(--metal-gradient);
	color: var(--paper);
	padding: 24px var(--gutter);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
	align-items: center;
	font-family: var(--ff-body);
	font-size: 12px;
	letter-spacing: 0.05em;
}
.footer-bottom em { color: var(--red); font-style: normal; font-weight: 600; }
.footer-bottom .center { text-align: center; }
.footer-bottom .end    { text-align: right; }
.footer-bottom a { color: var(--paper); transition: color 0.2s ease; }
.footer-bottom a:hover { color: var(--red); }
.footer-bottom .footer-mark img {
	height: 22px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	opacity: 0.9;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
	.contact-grid { grid-template-columns: 1fr 1fr; }
	.hero-bottom { grid-template-columns: 1fr; gap: 24px; }
	.hero-cta { justify-content: flex-start; }
	.post-list { grid-template-columns: 1fr; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
	.contact-grid { grid-template-columns: 1fr; }
	.stats-grid { grid-template-columns: 1fr; }
	.stat { border-right: none; border-bottom: 1px solid var(--bg-deep); }
}

/* ============================================================
   J3-C — Recette responsive : sécurités & ajustements 1280/1080/900/375
   ============================================================ */
/* Sécurité globale : pas de débordement horizontal — overflow-x: clip pour ne pas casser position:sticky des enfants */
html { overflow-x: clip; }
body { overflow-x: clip; word-break: normal; overflow-wrap: anywhere; }
@supports not (overflow-x: clip) {
	html, body { overflow-x: hidden; }
}
img, video, svg { max-width: 100%; }

/* Footer — entre 980 et 1280, libérer la col 1 (logo) en mode 1.5+1+1+1+1 mais avec gap réduit */
@media (max-width: 1280px) {
	.footer-cols { gap: 28px; padding: 56px 28px 40px; }
	.footer-col-title { font-size: 10px; letter-spacing: 0.18em; }
	.footer-links-list a { font-size: 13px; }
}

/* Universes grid — étape intermédiaire pour 1080px (passer à 1 col à 760, pas 980) */
@media (max-width: 1080px) and (min-width: 901px) {
	.universe-card { padding: 28px 22px 22px; min-height: 280px; }
	.universe-card-name { font-size: 22px; }
}
@media (max-width: 900px) {
	.universes-grid { grid-template-columns: 1fr; }
	.universe-card { border-right: none; min-height: 240px; }
}

/* Hero — réduction padding sur mobile (375) */
@media (max-width: 600px) {
	.hero-content { padding: 40px 22px 36px; }
	.hero-content--bottom { padding: 36px 22px 32px; }
	.hero-meta { gap: 12px; font-size: 10px; margin-bottom: 18px; }
	.hero-meta span { white-space: normal; }
	.hero h1, .hero-title--single { font-size: clamp(28px, 7vw, 40px) !important; }
	.hero-tagline { font-size: 15px; }
}

/* Pillar cards — gutter mobile */
@media (max-width: 600px) {
	.pillar-cards-section { padding: 40px 0 48px; }
	.pillar-cards-head { padding: 0 22px; margin-bottom: 24px; }
	.pillar-cards-section .brands-grid { padding: 0 22px; }
}

/* Founder section — gap reduit avant la bascule mobile */
@media (max-width: 1280px) and (min-width: 981px) {
	.founder-inner { gap: 40px; }
}

/* Bassin items à 1080-901 : font-size lisible */
@media (max-width: 1080px) and (min-width: 901px) {
	.bassin-item { font-size: 15px; padding: 18px 14px; }
}

/* Quote (manifeste) sur 900px (ne plus forcer nowrap) */
@media (max-width: 1100px) {
	.quote-text { white-space: normal; max-width: 1000px; }
}

/* Cookie banner mobile : empile texte/actions et reduit padding */
@media (max-width: 600px) {
	.cookie-banner-inner { padding: 16px 22px; }
	.cookie-banner-actions { gap: 6px; }
	.cookie-btn { padding: 10px 14px; font-size: 10px; flex: 1 0 calc(50% - 6px); justify-content: center; }
	.cookie-btn-link { flex: 1 0 100%; text-align: center; }
}

/* Nav overlay : padding mobile 22px */
@media (max-width: 600px) {
	.nav-overlay { padding: 18px 22px 24px; }
	.nav-overlay-link { font-size: clamp(20px, 5vw, 28px); padding: 18px 0; }
}

/* CTA band — alignement column sur petit ecran */
@media (max-width: 600px) {
	.cta-band-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
	.cta-band { padding: 48px 22px; }
}

/* Page-shell padding mobile */
@media (max-width: 600px) {
	.page-shell-inner { padding: 48px 22px; }
}

/* Footer mobile - reduce padding global */
@media (max-width: 600px) {
	.footer-cols { padding: 36px 22px 28px; gap: 24px; }
	.footer-legal { padding: 14px 22px; }
}

/* ============================================================
   PHASE 2 — Pillar / Brand / Partners templates
   ============================================================ */

/* Mini-hero (pages internes) */
.hero--mini { min-height: 56vh; background: var(--ink); color: var(--paper); }
.hero--mini .hero-image { opacity: 0.55; }
.hero--ink { background: var(--ink); }
.hero--ink::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 30% 30%, rgba(122, 30, 44, 0.15), transparent 60%),
		radial-gradient(circle at 70% 80%, rgba(58, 58, 62, 0.4), transparent 70%);
	z-index: 1;
}
.hero-tagline {
	font-family: var(--ff-body);
	font-size: 17px; line-height: 1.4;
	max-width: 780px;
	margin: 16px auto 0;
	color: var(--paper); opacity: 0.85;
}

/* Brand card grid (pillar + partners) */
.brands-pillar-section,
.partners-pillar-block {
	border-bottom: 1px solid var(--ink);
	padding: 60px 0;
	background: var(--bg);
}
.partners-pillar-block:nth-of-type(odd) { background: var(--paper-grey); }
.partners-pillar-head {
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: 16px;
	margin-bottom: 32px;
}
.partners-pillar-link {
	font-family: var(--ff-body);
	font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase; font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.partners-pillar-link:hover { color: var(--red); border-color: var(--red); }
.brands-pillar-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(36px, 5vw, 72px);
	line-height: 0.85;
	letter-spacing: -0.04em;
	/* scaleY removed — Inter does not need it */
	transform-origin: left center;
	margin-bottom: 36px;
}
.brands-pillar-title em { font-style: italic; color: var(--red); font-weight: 600; }
.brands-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0;
	border-top: 1px solid var(--ink);
}
.brand-card {
	border-right: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	padding: 28px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--bg);
	transition: background 0.25s ease;
	position: relative;
	min-height: 200px;
	color: var(--ink);
}
.brand-card:last-child { border-right: none; }
/* J3.6-4 : hover en metal-gradient + textes blancs */
.brand-card:hover { background: var(--metal-gradient); color: var(--bg); }
.brand-card:hover .brand-card-name { color: var(--bg); }
.brand-card:hover .brand-card-tagline { color: rgba(255, 255, 255, 0.78); }
.brand-card:hover .brand-card-blurb { color: rgba(255, 255, 255, 0.7); }
.brand-card:hover .brand-card-link { color: var(--bg); }
.brand-card:hover .tri-a-icon { color: var(--red); }
.brand-card::before {
	content: '';
	position: absolute; top: 0; left: 0;
	height: 2px; width: 0;
	background: var(--red);
	transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 2;
}
.brand-card:hover::before { width: 100%; }
/* J3.9 : .brand-card-pivot-tag supprimée (uniformisation cards) */
.brand-card-name {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 28px;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--ink);
	/* J3.10-A : fix wrap intra-mot (SpeakerCraft cassé en SpeakerCraf+t)
	   override du body{overflow-wrap:anywhere} J3-C */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.brand-card-tagline {
	font-family: var(--ff-body);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	font-weight: 500;
	line-height: 1.4;
}
.brand-card-link {
	margin-top: auto;
	font-family: var(--ff-body);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--red);
	display: inline-flex; align-items: center; gap: 6px;
	transition: gap 0.2s ease;
}
.brand-card-link::after { content: '→'; transition: transform 0.2s ease; }
.brand-card:hover .brand-card-link { gap: 12px; }
.brand-card:hover .brand-card-link::after { transform: translateX(2px); }
/* J3.9 : .brand-card--pivot supprimée (uniformisation cards — plus de différenciation visuelle pivot) */

/* Pillar pitch + body */
.pillar-pitch p {
	font-family: var(--ff-body);
	font-size: 19px; line-height: 1.5;
	color: var(--ink); max-width: 780px;
	margin-bottom: 16px;
}
.pillar-body {
	font-family: var(--ff-body);
	font-size: 16px; line-height: 1.6;
	color: var(--ink-soft);
	max-width: 780px;
}
.pillar-body p + p { margin-top: 1em; }

/* CTA band (low-page CTA banner) */
.cta-band {
	background: var(--metal-gradient);
	color: var(--paper);
	padding: 60px var(--gutter);
	border-bottom: 1px solid var(--metal-deep);
}
.cta-band-inner {
	max-width: var(--max-wide);
	margin: 0 auto;
	display: flex; justify-content: space-between;
	align-items: center; gap: 24px; flex-wrap: wrap;
}
.cta-band-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 52px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	/* scaleY removed — Inter does not need it */
	transform-origin: left center;
	margin: 0;
}
/* J3.6-3 — CTA-band utilise le bouton bordeaux global (suppression de l override paper) */

/* J4 — 4e retour Pascal : bouton bordeaux peu détaché sur fond metal-gradient.
   Outline blanc 2px pour affordance CTA (WCAG AA contrast). */
.cta-band .btn {
	outline: 2px solid var(--bg);
	outline-offset: 2px;
}

/* J3.6-4 — Charte v2 : CTA finale home en metal-gradient (au lieu de paper) */
.cta-band--soft {
	background: var(--metal-gradient);
	color: var(--bg);
	border-top: none;
	border-bottom: 1px solid var(--metal-deep);
}
.cta-band--soft .cta-band-title { color: var(--bg); }

/* — Brand simple page — */
.brand-section {
	background: var(--bg);
	border-bottom: 1px solid var(--ink);
	padding: 80px var(--gutter);
}
.brand-section-inner {
	max-width: var(--max-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 60px;
	align-items: start;
}
.brand-logo-block {
	border: 1px solid var(--ink);
	padding: 60px 24px;
	background: var(--paper-grey);
	text-align: center;
	min-height: 240px;
	display: flex; flex-direction: column;
	justify-content: center; gap: 16px;
}
.brand-logo-mark {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 36px; line-height: 0.95;
	letter-spacing: -0.04em;
	/* scaleY removed — Inter does not need it */
	color: var(--ink);
}
.brand-logo-note {
	font-family: var(--ff-body);
	font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.brand-content { font-family: var(--ff-body); }
.brand-pitch {
	font-size: 19px; line-height: 1.5;
	color: var(--ink); margin-bottom: 16px; max-width: 720px;
}
.brand-extra { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 720px; }
.brand-cta-row {
	display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
	margin-top: 32px;
}
.brand-back-link {
	font-family: var(--ff-body);
	font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase; font-weight: 600;
	color: var(--ink-soft); transition: color 0.2s ease;
}
.brand-back-link:hover { color: var(--red); }

/* — Brand detailed page (ELAN OS / Crestron) — */
.brand-sections-block {
	background: var(--paper-grey);
	border-bottom: 1px solid var(--ink);
	padding: 80px 0;
}
.brand-sections-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(36px, 5vw, 72px);
	line-height: 0.85;
	letter-spacing: -0.04em;
	/* scaleY removed — Inter does not need it */
	transform-origin: left center;
	margin-bottom: 36px;
}
.brand-sections-title em { font-style: italic; color: var(--red); font-weight: 600; }
/* J3.10-A : grille features alignée sur le pattern brand-card (grille uniforme) */
.brand-sections-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.brand-section-card {
	border: 1px solid var(--rule);
	padding: 28px 24px 26px;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 200px;
	transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-section-card:hover {
	background: var(--bg);
	border-color: var(--red);
	box-shadow: 0 12px 32px -8px rgba(122, 30, 44, 0.18);
	transform: translateY(-2px);
}
.brand-section-num {
	font-family: var(--ff-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 4px;
}
.brand-section-card-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
	color: var(--ink);
	overflow-wrap: normal;
	word-break: normal;
}
.brand-section-card-body {
	font-family: var(--ff-body);
	font-size: 14px; line-height: 1.55;
	color: var(--ink-soft);
}

/* — Contact / Devis pages — */
.contact-grid-2col {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	max-width: var(--max-wide) !important;
	padding: 80px var(--gutter) !important;
}
.contact-form-title,
.contact-info-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 0.85;
	letter-spacing: -0.04em;
	/* scaleY removed — Inter does not need it */
	transform-origin: left center;
	margin-bottom: 24px;
}
.contact-info-block {
	border-left: 1px solid var(--ink);
	padding-left: 36px;
}
.contact-info-item { margin-bottom: 24px; }
.contact-info-item h4 {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 8px;
	font-weight: 600;
}
.contact-info-item p {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--ink);
}
.contact-info-item p .sub {
	font-family: var(--ff-body);
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-soft);
	letter-spacing: 0;
}
.contact-info-item a { color: var(--ink); transition: color 0.2s ease; }
.contact-info-item a:hover { color: var(--red); }

/* CF7 styling override */
.wpcf7-form { font-family: var(--ff-body); }
.wpcf7-form p { margin-bottom: 18px; }
.wpcf7-form label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=number],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--ink);
	background: var(--paper-grey);
	font-family: var(--ff-body);
	font-size: 15px;
	color: var(--ink);
	border-radius: 0;
}
.wpcf7-form textarea { min-height: 140px; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--red);
}
.wpcf7-form input[type=submit] {
	background: var(--red);
	color: var(--bg);
	padding: 16px 32px;
	font-family: var(--ff-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border: 1px solid var(--red);
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease;
}
.wpcf7-form input[type=submit]:hover { background: var(--red-deep); border-color: var(--red-deep); }
.wpcf7-not-valid-tip { color: var(--red); font-size: 12px; margin-top: 4px; }
.wpcf7-response-output {
	border: 1px solid var(--ink);
	padding: 14px 18px;
	font-size: 14px;
	margin-top: 16px;
}

@media (max-width: 980px) {
	.contact-grid-2col { grid-template-columns: 1fr; gap: 40px; }
	.contact-info-block { border-left: none; border-top: 1px solid var(--ink); padding-left: 0; padding-top: 32px; }
	.brand-section-inner { grid-template-columns: 1fr; gap: 40px; }
	.brands-grid { grid-template-columns: 1fr 1fr; }
	.brand-sections-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.brands-grid { grid-template-columns: 1fr; }
	.brand-sections-grid { grid-template-columns: 1fr; }
	.cta-band-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   J1 — Refinements Inter (10 mai 2026)
   Tailles de titres ré-ajustées sans scaleY
   ============================================================ */

/* Hero home — la taille était calibrée pour scaleY 0.82 */
.hero h1                  { font-size: clamp(40px, 6.5vw, 96px); line-height: 0.98; }
.hero-title--single       { font-size: clamp(22px, 3.6vw, 48px) !important; line-height: 1.1 !important; }
@media (min-width: 1700px) {
	.hero-title--single   { font-size: clamp(40px, 3.4vw, 60px) !important; }
}

/* Quote, stats, page-article, post-card, footer-hero, brands titles */
.quote-text               { font-size: clamp(24px, 3.4vw, 44px); line-height: 1.15; font-style: italic; font-weight: 600; }
@media (min-width: 1280px) {
	.quote-text {
		white-space: nowrap;
		font-size: clamp(28px, 2.4vw, 38px);
		max-width: none;
	}
}
/* J3.5-1 : stat-num finesse — override déplacé dans la règle principale .stat-num */
.page-article-title       { font-size: clamp(34px, 5vw, 72px); line-height: 0.95; }
.post-card h2             { font-size: 24px; line-height: 1.1; }
.footer-hero h2           { font-size: clamp(40px, 6.5vw, 100px); line-height: 0.95; }
.brands-pillar-title,
.brand-sections-title     { font-size: clamp(30px, 4vw, 60px); line-height: 0.95; }
.cta-band-title           { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.05; }
.brand-logo-mark          { font-size: 30px; line-height: 1; }
.contact-form-title,
.contact-info-title       { font-size: clamp(28px, 3.6vw, 44px); line-height: 1; }

/* ============================================================
   J1 — HERO PARALLAXE (Apple-style, 40% scroll, voile 0.45→0.85)
   ============================================================ */
.hero, .hero--mini { position: relative; overflow: hidden; }

.hero .hero-image {
	transition: none;
	will-change: transform;
}

/* Voile sombre piloté par JS via --hero-veil (0.45 → 0.85) */
.hero .hero-image::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(15, 15, 15, calc(var(--hero-veil, 0.45) * 0.4)) 0%,
		rgba(15, 15, 15, calc(var(--hero-veil, 0.45) * 0.7)) 40%,
		rgba(15, 15, 15, var(--hero-veil, 0.45)) 100%);
	pointer-events: none;
	transition: background 0.05s linear;
}

.hero--mini .hero-image::after {
	background: linear-gradient(180deg,
		rgba(15, 15, 15, calc(0.4 + var(--hero-veil, 0.45) * 0.4)) 0%,
		rgba(15, 15, 15, calc(0.55 + var(--hero-veil, 0.45) * 0.3)) 50%,
		rgba(15, 15, 15, calc(0.7 + var(--hero-veil, 0.45) * 0.2)) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.hero .hero-image { transform: none !important; }
}

/* ============================================================
   J1 — TRIANGLE A BORDEAUX (cards univers + brand-cards)
   Inline SVG dans .tri-a-icon.
   ============================================================ */
.tri-a-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--red);
	margin-bottom: 10px;
}
.tri-a-icon svg {
	width: 100%; height: 100%;
	display: block;
}

.brand-card .tri-a-icon { width: 22px; height: 22px; margin-bottom: 6px; }

/* ============================================================
   J1 — FOOTER 5 colonnes + rangée légale
   (remplace l'ancien footer-hero / footer-bottom)
   ============================================================ */
.footer-cols {
	max-width: var(--max-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr repeat(4, 1fr);
	gap: 40px;
	padding: 64px var(--gutter) 48px;
	border-bottom: 1px solid var(--rule);
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col--brand { gap: 14px; }
.footer-brand img { height: 40px; width: auto; }
.footer-slogan {
	font-family: var(--ff-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
}
.footer-slogan em { font-style: italic; color: var(--red); font-weight: 600; }
.footer-address {
	font-style: normal;
	font-family: var(--ff-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.footer-col-title {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}
.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links-list a {
	font-family: var(--ff-body);
	font-size: 14px;
	color: var(--ink-soft);
	transition: color 0.2s ease;
}
.footer-links-list a:hover { color: var(--red); }
.footer-links-list .footer-cta-link {
	color: var(--red);
	font-weight: 600;
	margin-top: 4px;
}

.footer-legal {
	max-width: var(--max-wide);
	margin: 0 auto;
	padding: 18px var(--gutter);
	border-top: 1px solid var(--rule);
}
.footer-legal-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	font-family: var(--ff-body);
	font-size: 12px;
	color: var(--ink-soft);
	align-items: center;
}
.footer-legal-links a {
	color: var(--ink-soft);
	transition: color 0.2s ease;
	border-bottom: 1px solid transparent;
}
.footer-legal-links a:hover { color: var(--red); border-bottom-color: var(--red); }
.footer-legal-links li:not(:last-child)::after {
	content: '·';
	margin-left: 18px;
	color: var(--rule);
}
.footer-legal-copy {
	margin-left: auto;
	color: var(--ink-soft);
	font-weight: 500;
}

@media (max-width: 980px) {
	.footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px var(--gutter) 36px; }
	.footer-col--brand { grid-column: 1 / -1; }
	.footer-legal-links { gap: 10px 14px; }
	.footer-legal-links li:not(:last-child)::after { margin-left: 14px; }
	.footer-legal-copy { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 600px) {
	.footer-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   J1 — BANDEAU COOKIES (localStorage)
   ============================================================ */
.cookie-banner {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 2000;
	background: var(--bg);
	border-top: 1px solid var(--rule);
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner[hidden] { display: block; }
.cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner-inner {
	max-width: var(--max-wide);
	margin: 0 auto;
	padding: 22px var(--gutter);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
}
.cookie-banner-text strong {
	display: block;
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 6px;
}
.cookie-banner-text p {
	font-family: var(--ff-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 720px;
}
.cookie-banner-text a { color: var(--ink); text-decoration: underline; }
.cookie-banner-text a:hover { color: var(--red); }

.cookie-banner-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.cookie-btn { padding: 12px 18px; font-size: 11px; }
.cookie-btn--ghost {
	background: var(--bg);
	color: var(--ink);
	border-color: var(--ink-soft);
}
.cookie-btn--ghost:hover { color: var(--paper); border-color: var(--red); }
.cookie-btn-link {
	background: none;
	border: none;
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	border-bottom: 1px solid var(--ink);
	padding: 0 0 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.cookie-btn-link:hover { color: var(--red); border-bottom-color: var(--red); }

.cookie-panel {
	max-width: var(--max-wide);
	margin: 0 auto;
	padding: 0 var(--gutter) 22px;
	border-top: 1px solid var(--rule);
}
.cookie-panel h4 {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 18px 0 14px;
}
.cookie-panel-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid var(--rule);
	font-family: var(--ff-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-soft);
	cursor: pointer;
}
.cookie-panel-row:last-of-type { border-bottom: none; }
.cookie-panel-row input { margin-top: 3px; accent-color: var(--red); }
.cookie-panel-row strong { color: var(--ink); }
.cookie-panel-actions {
	margin-top: 14px;
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 980px) {
	.cookie-banner-inner { grid-template-columns: 1fr; padding: 18px var(--gutter); }
	.cookie-banner-actions { justify-content: flex-start; }
}

/* ============================================================
   J1.7 — Boutique "Coming Soon" sobre (override WC)
   ============================================================ */
.shop-coming-soon {
	background: var(--paper-grey);
	border-bottom: 1px solid var(--rule);
	padding: clamp(60px, 12vw, 120px) var(--gutter);
}
.shop-coming-soon-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.shop-coming-soon .section-tag {
	color: var(--red);
	border-top: 1px solid var(--ink);
	display: inline-block;
	padding-top: 12px;
	margin-bottom: 24px;
}
.shop-coming-soon-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin-bottom: 18px;
}
.shop-coming-soon-text {
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 540px;
	margin: 0 auto 28px;
}
.shop-coming-soon-cta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: center;
}
.shop-coming-soon-link {
	font-family: var(--ff-body);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.shop-coming-soon-link:hover { color: var(--red); border-bottom-color: var(--red); }

/* Cacher les éléments WC parasites éventuels (Cardo H1 etc.) au cas où */
.wp-block-woocommerce-coming-soon .has-cardo-font-family,
.wp-block-woocommerce-coming-soon .wp-block-spacer { display: none !important; }

/* ============================================================
   J3.5-7 — View Transitions API (Chrome 126+, Edge, Safari 18+)
   Effet "futuriste" doux : fade + translateY + blur léger
   Fallback : navigation instantanée standard sur navigateurs non-supportés
   ============================================================ */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: 280ms cubic-bezier(0.4, 0, 1, 1) both adepp-vt-fade-out;
}
::view-transition-new(root) {
	animation: 320ms cubic-bezier(0, 0, 0.2, 1) 80ms both adepp-vt-fade-in;
}

@keyframes adepp-vt-fade-out {
	to {
		opacity: 0;
		transform: translateY(8px);
		filter: blur(4px);
	}
}
@keyframes adepp-vt-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
		filter: blur(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

/* ============================================================
   J2 — PILLAR CARDS (marques juste sous le hero)
   ============================================================ */
/* J3.8-A : toutes les pillar-cards-section en metal-gradient (généralisation du pattern --sub).
   La modifier --sub reste comme alias no-op (markup legacy). */
.pillar-cards-section,
.pillar-cards-section--sub {
	background: var(--metal-gradient);
	color: var(--bg);
	border-bottom: 1px solid var(--metal-deep);
	padding: 56px 0 64px;
}
.pillar-cards-section .pillar-cards-head .section-tag,
.pillar-cards-section--sub .pillar-cards-head .section-tag { color: var(--bg); border-top-color: var(--red); }
.pillar-cards-section .pillar-pitch-short,
.pillar-cards-section--sub .pillar-pitch-short { color: rgba(255, 255, 255, 0.85); }
.pillar-cards-section .brands-grid,
.pillar-cards-section--sub .brands-grid { border-top-color: rgba(255, 255, 255, 0.2); }
.pillar-cards-section .brand-card,
.pillar-cards-section--sub .brand-card { border-color: rgba(255, 255, 255, 0.2); }

/* J3.8-A : hover ombre + border bordeaux sur toutes les cards dans .pillar-cards-section
   (étend le pattern J3.7 de --sub à toutes les pillar). */
.pillar-cards-section .brand-card:hover,
.pillar-cards-section--sub .brand-card:hover,
.brand-card--subpillar:hover {
	background: var(--bg);
	border-color: var(--red);
	box-shadow: 0 12px 32px -8px rgba(122, 30, 44, 0.18);
	transform: translateY(-2px);
	transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-cards-section .brand-card:hover .brand-card-name,
.pillar-cards-section--sub .brand-card:hover .brand-card-name,
.brand-card--subpillar:hover .brand-card-name { color: var(--ink); }
.pillar-cards-section .brand-card:hover .brand-card-tagline,
.pillar-cards-section--sub .brand-card:hover .brand-card-tagline,
.brand-card--subpillar:hover .brand-card-tagline { color: var(--ink-soft); }
.pillar-cards-section .brand-card:hover .brand-card-link,
.pillar-cards-section--sub .brand-card:hover .brand-card-link,
.brand-card--subpillar:hover .brand-card-link { color: var(--red); }
.pillar-cards-section .brand-card,
.pillar-cards-section--sub .brand-card,
.brand-card--subpillar {
	transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* J3.9 : .brand-card--highlight (AMINA) supprimée — uniformisation cards */
.pillar-cards-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 32px;
	padding: 0 var(--gutter);
	max-width: var(--max-wide);
	margin-left: auto;
	margin-right: auto;
}
.pillar-cards-head .section-tag {
	display: inline-block;
	color: var(--red);
	border-top: 1px solid var(--ink);
	padding-top: 12px;
	margin-bottom: 0;
}
.pillar-pitch-short {
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.5;
	color: var(--ink);
	max-width: 780px;
	margin: 0;
}

.pillar-cards-section .brands-grid {
	max-width: var(--max-wide);
	margin: 0 auto;
	padding: 0 var(--gutter);
	border-top: 1px solid var(--rule);
}

/* Grille Home Cinéma 3×2 (J3.9 — annule J3.8 D.3 6×1 ; toujours 3 cols >=1080) */
.brands-grid--grid-3x2 {
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 1079px) {
	.brands-grid--grid-3x2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 719px) {
	.brands-grid--grid-3x2 { grid-template-columns: 1fr; }
}

/* J3.5-4 + J3.8-D : Grille 1 ligne 4 cols (Maison Connectée, HiFi Design, Systèmes Encastrés) */
.brands-grid--grid-1row {
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 1279px) {
	.brands-grid--grid-1row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
	.brands-grid--grid-1row { grid-template-columns: 1fr; }
}

/* J3.9 : .brands-grid--grid-1row-6 supprimé (Pascal annule la 6x1 sur 1440+, retour 3x2 stable) */

/* Grille 2 colonnes (sous-piliers Audio/HiFi) — centrée */
.brands-grid--2col {
	grid-template-columns: repeat(2, 1fr);
	max-width: 1100px;
	margin-left: auto !important;
	margin-right: auto !important;
}
@media (max-width: 700px) {
	.brands-grid--2col { grid-template-columns: 1fr; }
}

/* Carte sous-pilier (plus généreuse) */
.brand-card--subpillar {
	min-height: 260px;
	padding: 36px 28px 30px;
}
.brand-card--subpillar .brand-card-name {
	font-size: 36px;
}
.brand-card--subpillar .brand-card-tagline {
	font-size: 14px;
}

/* J3.9 : suppression .brand-card--highlight (AMINA), .brand-card-quote (citation invisible),
   .brand-card-eyebrow (badge absolute) — uniformisation cards. Reste uniquement
   .brand-card-eyebrow--protocol pour /zwave-zigbee/ (autonome). */

/* J3.8-C / J3.9 : eyebrow protocol — inline flow au-dessus du name (Z-Wave / Zigbee) */
.brand-card-eyebrow--protocol {
	font-family: var(--ff-body);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--red);
	border: 1px solid var(--red);
	padding: 4px 9px;
	background: transparent;
	align-self: flex-start;
	margin-bottom: 12px;
}

/* ============================================================
   J3.10-B — Page univers enrichie (pilote KNX & DALI)
   Pattern à étendre J3.11 (ELAN OS, Crestron, Z-Wave/Zigbee)
   et J3.12 (marques HiFi/HC).
   ============================================================ */
.enriched-section {
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
	padding: 80px var(--gutter);
	/* Scroll offset pour ancres sous header sticky (J3.13 : 86px = 70 header + 16 buffer) */
	scroll-margin-top: 86px;
}
/* J3.13 : id="features" sur .brand-sections-block pour lien retour ↑ sommaire */
#features { scroll-margin-top: 86px; }

/* ============================================================
   J3.14 — Variants .enriched-section pour /home-cinema/
   ============================================================ */
.enriched-section--paper-grey { background: var(--paper-grey); }
.enriched-section--dark {
	background: var(--metal-gradient);
	color: var(--bg);
	border-bottom: 1px solid var(--metal-deep);
}
.enriched-section--dark .section-tag { color: var(--bg); border-top-color: var(--red); }
.enriched-section--dark .enriched-section-title { color: var(--bg); }
.enriched-section--dark .enriched-section-title em { color: var(--red); }
.enriched-section--dark .enriched-section-text { color: var(--bg); }
.enriched-section--dark .enriched-section-text p { color: rgba(255, 255, 255, 0.88); }
.enriched-section--dark .enriched-section-text p strong { color: var(--bg); }
.enriched-section--dark .enriched-section-text p em { color: rgba(255, 255, 255, 0.65); }
.enriched-section--dark .enriched-section-list li { color: rgba(255, 255, 255, 0.85); }
.enriched-section--dark .enriched-section-list li strong { color: var(--bg); }
.enriched-section--dark .enriched-section-list li::marker { color: var(--red); }
.enriched-section--dark .enriched-section-transition,
.enriched-section--dark .enriched-section-closing { color: rgba(255, 255, 255, 0.75); border-top-color: rgba(255, 255, 255, 0.18); }
.enriched-section--dark .enriched-section-closing strong { color: var(--red); }

/* Section centrée (sect 1) : texte centré + photo full-width en dessous */
.enriched-section--centered .enriched-section-centered-inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
	text-align: center;
}
.enriched-section--centered .section-tag {
	align-self: center;
	color: var(--red);
	border-top: 1px solid var(--ink);
	padding-top: 12px;
}
.enriched-section--centered .enriched-section-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(36px, 4.8vw, 60px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--ink);
}
.enriched-section--centered .enriched-section-title em { font-style: italic; color: var(--red); font-weight: 600; }
.enriched-section--centered .enriched-section-text {
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
	text-align: left;
	max-width: 760px;
	margin: 0 auto;
}
.enriched-section--centered .enriched-section-text p { margin-bottom: 18px; }
.enriched-section--centered .enriched-section-text p strong { color: var(--ink); font-weight: 600; }
.enriched-section-photo--full {
	width: 100%;
	max-width: 1100px;
	margin: 16px auto 0;
	overflow: hidden;
	border: 1px solid var(--rule);
}
.enriched-section-photo--full img {
	width: 100%;
	height: auto;
	display: block;
	min-height: 360px;
	max-height: 560px;
	object-fit: cover;
}

/* Listes enriched (sect 2 + 5) */
.enriched-section-list {
	margin: 0 0 16px 18px;
	padding-left: 6px;
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
}
.enriched-section-list li { margin-bottom: 8px; }
.enriched-section-list li strong { color: var(--ink); font-weight: 600; }
.enriched-section-list li::marker { color: var(--red); }

@media (max-width: 980px) {
	.enriched-section-photo--full img { min-height: 220px; }
}

/* J3.14 Section 4 — Home Cinéma 3 sous-cards (Amina / Dynaudio / Cerwin-Vega) */
.home-cinema-speakers-chapeau {
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
	text-align: left;
	max-width: 760px;
	margin: 0 auto;
}
.home-cinema-speakers-chapeau strong { color: var(--ink); font-weight: 600; }
.home-cinema-speakers-chapeau em { font-style: italic; color: var(--red); }

.home-cinema-speakers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: var(--max-wide);
	margin: 16px auto 24px;
	text-align: left;
}
.speakers-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 24px 26px;
	background: var(--bg);
	border: 1px solid var(--rule);
	color: var(--ink);
	text-decoration: none;
	transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.speakers-card:hover {
	border-color: var(--red);
	box-shadow: 0 12px 32px -8px rgba(122, 30, 44, 0.18);
	transform: translateY(-2px);
}
.speakers-card-eyebrow {
	font-family: var(--ff-body);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--red);
	border: 1px solid var(--red);
	padding: 4px 9px;
	background: transparent;
	align-self: flex-start;
	margin-bottom: 4px;
}
.speakers-card-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.speakers-card-title em { font-style: italic; color: var(--red); font-weight: 600; }
.speakers-card-body {
	font-family: var(--ff-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-soft);
	flex: 1;
}
.speakers-card-body strong { color: var(--ink); font-weight: 600; }
.speakers-card-body em { font-style: italic; }
.speakers-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--red);
	margin-top: 4px;
	transition: gap 0.2s ease;
}
.speakers-card:hover .speakers-card-link { gap: 12px; }

.home-cinema-speakers-outro {
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-soft);
	text-align: left;
	max-width: 760px;
	margin: 16px auto 0;
}
.home-cinema-speakers-outro strong { color: var(--ink); font-weight: 600; }

@media (max-width: 980px) {
	.home-cinema-speakers-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   J3.15 — Page /nos-partenaires/ refonte 18 cards externes
   ============================================================ */
.partners-external-section {
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
	padding: 64px var(--gutter);
}
.partners-external-head {
	max-width: var(--max-wide);
	margin: 0 auto 36px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.partners-external-head .section-tag {
	color: var(--red);
	border-top: 1px solid var(--ink);
	display: inline-block;
	padding-top: 12px;
	align-self: flex-start;
}

/* J3.15-ter : grille partenaires = variante de .brands-grid (pattern .brand-card éprouvé) */
.brands-grid--partners {
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	border-top: none;
	max-width: var(--max-wide);
	margin: 0 auto;
}
@media (max-width: 1279px) {
	.brands-grid--partners { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.brands-grid--partners { grid-template-columns: 1fr; }
	.partners-external-section { padding: 48px 22px; }
}

/* Variante .brand-card--external : card autonome (pas cellulaire), border-radius subtile, icône ↗,
   et OVERRIDE du hover global metal-gradient J3.6 par ombre+border+lift J3.10. */
.brand-card--external {
	position: relative;
	border: 1px solid var(--rule);
	border-radius: 5px;
	padding: 30px 28px;
	min-height: 220px;
	gap: 10px;
	/* Annule les borders cellulaires héritées de .brand-card base */
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Override le hover global .brand-card:hover (metal-gradient) — pas de fond gris sur partners */
.brand-card--external:hover {
	background: var(--bg);
	color: var(--ink);
	border-color: var(--red);
	box-shadow: 0 12px 32px -8px rgba(122, 30, 44, 0.18);
	transform: translateY(-2px);
}
.brand-card--external:hover .brand-card-name { color: var(--ink); }
.brand-card--external:hover .brand-card-tagline { color: var(--ink-soft); }
.brand-card--external:hover .brand-card-link { color: var(--red); }
.brand-card--external:hover .tri-a-icon { color: var(--red); }

/* Icône SVG ↗ external-link en absolute top-right (sur .brand-card--external) */
.brand-card-ext-icon {
	position: absolute;
	top: 16px;
	right: 16px;
	color: var(--ink-soft);
	z-index: 2;
	transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-card--external:hover .brand-card-ext-icon {
	color: var(--red);
	transform: translate(2px, -2px);
}

/* Section "Pourquoi ces marques ?" */
.partners-why-section {
	background: var(--paper-grey);
	border-bottom: 1px solid var(--rule);
	padding: 80px var(--gutter);
}
.partners-why-inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: left;
}
.partners-why-section .section-tag {
	color: var(--red);
	border-top: 1px solid var(--ink);
	display: inline-block;
	padding-top: 12px;
	margin-bottom: 18px;
}
.partners-why-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(32px, 4.5vw, 56px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin-bottom: 28px;
}
.partners-why-title em { font-style: italic; color: var(--red); font-weight: 600; }
.partners-why-text {
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink);
}
.partners-why-text p { margin-bottom: 16px; }
.partners-why-text p strong { color: var(--ink); font-weight: 600; }
.partners-why-text p em { color: var(--red); font-style: italic; }

/* ============================================================
   J3.15-bonus — Bandeau "écoute showroom" sous hero /hifi-design/
   ============================================================ */
.showroom-listening-banner {
	background: var(--paper-grey);
	border-bottom: 1px solid var(--rule);
	padding: 18px var(--gutter);
}
.showroom-listening-banner-inner {
	max-width: var(--max-wide);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	text-align: center;
}
.showroom-listening-icon {
	font-size: 22px;
	line-height: 1;
}
.showroom-listening-text {
	font-family: var(--ff-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
	margin: 0;
	max-width: 820px;
}
.showroom-listening-text strong { color: var(--red); font-weight: 600; }
.showroom-listening-link {
	font-family: var(--ff-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	white-space: nowrap;
	transition: color 0.2s ease, border-bottom-color 0.2s ease, gap 0.2s ease;
}
.showroom-listening-link:hover {
	color: var(--red);
	border-bottom-color: var(--red);
}
@media (max-width: 700px) {
	.showroom-listening-text { font-size: 14px; }
}

/* J3.13 : .brand-section-card en lien cliquable (vers ancre #slug en bas de page) */
a.brand-section-card,
a.brand-section-card--link {
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
}
.brand-section-card--link {
	position: relative;
}
.brand-section-card--link::after {
	content: '↓';
	position: absolute;
	top: 22px;
	right: 22px;
	font-family: var(--ff-body);
	font-size: 16px;
	color: var(--red);
	opacity: 0.6;
	transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-section-card--link:hover::after {
	opacity: 1;
	transform: translateY(2px);
}

/* J3.13 : lien retour "↑ Retour au sommaire" en bas de chaque sous-section */
.enriched-section-back-to-features {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
	font-family: var(--ff-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}
.enriched-section-back-to-features:hover {
	color: var(--red);
	gap: 10px;
}
/* Sur fond metal-gradient (sections enriched), couleur claire */
.enriched-section .enriched-section-back-to-features { color: rgba(255, 255, 255, 0.7); border-top-color: rgba(255, 255, 255, 0.2); }
.enriched-section .enriched-section-back-to-features:hover { color: var(--bg); }
/* J3.10-B.5 : scroll offset pour les ancres #zwave / #zigbee sur les cards sub-protocols */
.brand-card[id] { scroll-margin-top: calc(var(--header-h, 70px) + 16px); }
.enriched-section + .enriched-section { padding-top: 64px; }
.enriched-section-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 60px;
	align-items: center;
}
.enriched-section--reverse .enriched-section-inner {
	grid-template-columns: 1.15fr 1fr;
}
.enriched-section-media {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.enriched-section-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 32px;
	letter-spacing: 0.06em;
	color: var(--red);
	border: 2px solid var(--red);
	padding: 14px 28px;
	background: var(--bg);
	align-self: flex-start;
}
.enriched-section-photo {
	overflow: hidden;
	border: 1px solid var(--rule);
}
.enriched-section-photo img {
	width: 100%;
	height: auto;
	min-height: 320px;
	object-fit: cover;
	display: block;
}
.enriched-section-body .section-tag {
	color: var(--red);
	border-top: 1px solid var(--ink);
	display: inline-block;
	padding-top: 12px;
	margin-bottom: 18px;
}
.enriched-section-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(36px, 4.8vw, 60px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin-bottom: 24px;
}
.enriched-section-title em { font-style: italic; color: var(--red); font-weight: 600; }
.enriched-section-text {
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	max-width: 65ch;
}
.enriched-section-text p { margin-bottom: 16px; }
.enriched-section-text p strong { color: var(--ink); font-weight: 600; }
.enriched-section-text p em { color: var(--ink-soft); }
.enriched-section-transition,
.enriched-section-closing {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
	font-size: 15px;
	color: var(--ink-soft);
}
.enriched-section-closing { color: var(--ink); }
.enriched-section-closing strong { color: var(--red); }

@media (max-width: 980px) {
	.enriched-section { padding: 60px var(--gutter); }
	.enriched-section-inner,
	.enriched-section--reverse .enriched-section-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	/* En mode mobile, l'ordre garde media en premier dans .reverse */
	.enriched-section--reverse .enriched-section-media { order: -1; }
	.enriched-section-photo img { min-height: 240px; }
}

/* ============================================================
   J3.5-4 — Pillar intro section (texte 2-3 paragraphes + photo)
   ============================================================ */
.pillar-intro-section {
	background: var(--paper-grey);
	border-bottom: 1px solid var(--rule);
	padding: 64px var(--gutter);
}
.pillar-intro-inner {
	max-width: var(--max-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	align-items: center;
}
.pillar-intro-media {
	overflow: hidden;
	border: 1px solid var(--rule);
}
.pillar-intro-media img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	display: block;
}
.pillar-intro-body {
	font-family: var(--ff-body);
}
.pillar-intro-body .section-tag {
	color: var(--red);
	border-top: 1px solid var(--ink);
	display: inline-block;
	padding-top: 12px;
	margin-bottom: 18px;
}
.pillar-intro-body p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	margin-bottom: 16px;
	max-width: 640px;
}
.pillar-intro-body p:last-child { color: var(--ink-soft); }
@media (max-width: 980px) {
	.pillar-intro-inner { grid-template-columns: 1fr; gap: 28px; }
	.pillar-intro-media img { min-height: 240px; }
}

/* ============================================================
   J2 — Hero per-pillar (laisse la place de surcharger via slug)
   ============================================================ */
.hero--mini { min-height: clamp(48vh, 64vh, 72vh); }
.hero--home-cinema .hero-image { filter: contrast(1.1) brightness(0.85); }
.hero--systemes-encastres .hero-image { filter: contrast(1.05) brightness(0.92); }
.hero--hifi-design .hero-image { filter: contrast(1.05) saturate(0.95); }

/* ============================================================
   J3-B — Front-page : cards univers + Bassin + Fondateur
   ============================================================ */
.universes-section {
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
	padding: 80px var(--gutter);
}
.universes-inner {
	max-width: var(--max-wide);
	margin: 0 auto;
}
.universes-head { margin-bottom: 36px; text-align: center; }
.universes-head .section-tag {
	color: var(--red);
	border-top: 1px solid var(--ink);
	display: inline-block;
	padding-top: 12px;
	margin-bottom: 18px;
}
.universes-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(32px, 4.5vw, 60px);
	line-height: 0.98;
	letter-spacing: -0.025em;
	color: var(--ink);
	max-width: 980px;
	margin: 0 auto;
}
.universes-title em { font-style: italic; color: var(--red); font-weight: 600; }
.universes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--ink);
}
.universe-card {
	border-right: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	padding: 36px 28px 28px;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 320px;
	position: relative;
	color: var(--ink);
	transition: background 0.3s ease, color 0.3s ease;
}
.universe-card:last-child { border-right: none; }
/* J3.6-4 : hover en metal-gradient + textes blancs */
.universe-card:hover { background: var(--metal-gradient); color: var(--bg); }
.universe-card:hover .universe-card-name { color: var(--bg); }
.universe-card:hover .universe-card-tagline { color: rgba(255, 255, 255, 0.78); }
.universe-card:hover .universe-card-meta { color: rgba(255, 255, 255, 0.65); border-top-color: rgba(255, 255, 255, 0.2); }
.universe-card:hover .universe-card-link { color: var(--bg); }
.universe-card:hover .tri-a-icon { color: var(--red); }
.universe-card::before {
	content: '';
	position: absolute; top: 0; left: 0;
	height: 2px; width: 0;
	background: var(--red);
	transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.universe-card:hover::before { width: 100%; }
.universe-card .tri-a-icon { width: 36px; height: 36px; margin-bottom: 12px; }
.universe-card-name {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(24px, 2.4vw, 32px);
	letter-spacing: -0.02em;
	color: var(--ink);
	line-height: 1.05;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.universe-card-tagline {
	font-family: var(--ff-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-soft);
	flex: 1;
}
.universe-card-meta {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-soft);
	font-weight: 500;
	padding-top: 12px;
	border-top: 1px solid var(--rule);
}
.universe-card-link {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--red);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap 0.2s ease;
}
.universe-card:hover .universe-card-link { gap: 12px; }
@media (max-width: 980px) {
	.universes-grid { grid-template-columns: 1fr; }
	.universe-card { border-right: none; }
}

/* — Bassin d'Arcachon — */
.bassin-section {
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
	padding: 80px var(--gutter);
}
.bassin-inner {
	max-width: var(--max-wide);
	margin: 0 auto;
	text-align: center;
}
.bassin-section .section-tag {
	color: var(--red);
	border-top: 1px solid var(--ink);
	display: inline-block;
	padding-top: 12px;
	margin-bottom: 18px;
}
.bassin-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 72px);
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin: 0 auto 18px;
	color: var(--ink);
	max-width: 1100px;
}
.bassin-title em { font-style: italic; color: var(--red); font-weight: 600; }
.bassin-pitch {
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 780px;
	margin: 0 auto 32px;
}
.bassin-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
.bassin-item {
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 22px 18px;
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--red);
}
.bassin-item--star {
	font-weight: 500;
}
.bassin-item--star::before {
	content: '★ ';
	margin-right: 4px;
	color: var(--red);
}
@media (max-width: 980px) {
	.bassin-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.bassin-list { grid-template-columns: 1fr; }
}

/* — Pascal Fondateur — J3.6-4 charte v2 metal-gradient */
.founder-section {
	background: var(--metal-gradient);
	border-bottom: 1px solid var(--metal-deep);
	padding: 100px var(--gutter);
	color: var(--bg);
}
.founder-inner {
	max-width: var(--max-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 60px;
	align-items: start;
}
.founder-meta .section-tag {
	color: var(--bg);
	border-top: 1px solid var(--red);
	display: inline-block;
	padding-top: 12px;
	margin-bottom: 18px;
}
.founder-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(32px, 4.5vw, 60px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--bg);
}
.founder-title em { font-style: italic; color: var(--red); font-weight: 600; }
.founder-quote {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.35;
	color: var(--bg);
	margin-bottom: 28px;
	max-width: 720px;
	letter-spacing: -0.015em;
}
.founder-bio {
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	max-width: 720px;
}
@media (max-width: 980px) {
	.founder-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   J3-A — Partners page (sous-groupes + partenaires distribués)
   ============================================================ */
.partners-subgroup-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin: 36px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rule);
}
.partners-subgroup-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.partners-subgroup-link {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--rule);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.partners-subgroup-link:hover { color: var(--red); border-color: var(--red); }

.partners-pillar-block--distribues { background: var(--paper-grey); }
.partners-pillar-meta {
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-soft);
	font-weight: 500;
}
.brand-card-blurb {
	font-family: var(--ff-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin-top: 8px;
}
.brand-card--no-link {
	cursor: default;
	pointer-events: none;
}
.brand-card--no-link .brand-card-link { display: none; }

/* ============================================================
   J3.5-5 — Breadcrumb renforcé + sticky sous header
   ============================================================ */
.breadcrumb {
	position: sticky;
	top: var(--header-h, 70px);
	z-index: 50;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--rule);
	padding: 14px var(--gutter);
}
.breadcrumb-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: var(--max-wide);
	margin: 0 auto;
	font-family: var(--ff-body);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ink);
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 0.2s ease, border-bottom-color 0.2s ease, gap 0.2s ease;
}
.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
	color: var(--red);
	border-bottom-color: var(--red);
	gap: 12px;
	outline: none;
}
@media (max-width: 600px) {
	.breadcrumb { padding: 12px 22px; }
	.breadcrumb-link { font-size: 14px; }
}

/* Logo cliquable explicit */
.brand, .custom-logo-link { cursor: pointer; }

/* ============================================================
   J2 — Stats 3 colonnes centrées (front-page, sans 4e stat)
   ============================================================ */
.stats-grid--three { grid-template-columns: repeat(3, 1fr); justify-items: center; max-width: 980px; }
.stats-grid--three .stat { text-align: center; }
.stat-pending {
	color: var(--ink-soft);
	font-style: italic;
	font-size: 0.7em;
	font-weight: 500;
}
@media (max-width: 980px) {
	.stats-grid--three { grid-template-columns: 1fr 1fr; }
	.stats-grid--three .stat:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.stats-grid--three { grid-template-columns: 1fr; }
	.stats-grid--three .stat:nth-child(3) { grid-column: auto; }
}

/* ============================================================
   J4-ter — Fond atmosphérique page /nos-partenaires/
   Image rack audio sombre + voile blanc 88% pour atténuation.
   Wrappe partners-external-section, partners-why-section, cta-band.
   ============================================================ */
.partners-page-wrapper {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
.partners-page-veil {
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	pointer-events: none;
	z-index: 1;
}
.partners-page-content {
	position: relative;
	z-index: 2;
}

/* À l'intérieur du wrapper, les sections doivent être transparentes
   pour laisser passer l'image + voile (la blancheur vient du voile, pas des sections). */
.partners-page-wrapper .partners-external-section,
.partners-page-wrapper .partners-why-section {
	background-color: transparent;
}

/* Cards : fond blanc opaque + box-shadow renforcée pour ressortir sur l'ambiance */
.partners-page-wrapper .brand-card,
.partners-page-wrapper .brand-card--external {
	background-color: var(--bg);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.08);
}
.partners-page-wrapper .brand-card--external:hover {
	box-shadow: 0 12px 32px -8px rgba(122, 30, 44, 0.22);
}

/* Compatibilité mobile : background-attachment fixed casse sur iOS/Android (rendu flou ou bug scroll) */
@media (max-width: 1024px) {
	.partners-page-wrapper {
		background-attachment: scroll;
	}
}

/* Voile plus opaque sur petits écrans pour lisibilité texte */
@media (max-width: 768px) {
	.partners-page-veil {
		background-color: rgba(255, 255, 255, 0.92);
	}
}