/* ==========================================================================
   SAC — Syndicat Autonome des Cheminots
   Système : voie ferrée institutionnelle bleu/blanc
   ========================================================================== */

:root {
	--sac-ink: #0A1F33;
	--sac-blue: #14315C;
	--sac-blue-mid: #2C5188;
	--sac-steel: #7C93AC;
	--sac-paper: #F5F7FA;
	--sac-white: #FFFFFF;
	--sac-signal: #E2A33B;
	--sac-signal-dark: #B97F22;
	--sac-rail-line: #C7D0DC;
	--sac-red: #C0442E;
	--sac-green: #3E8E5A;

	--font-display: 'Oswald', 'Arial Narrow', sans-serif;
	--font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', 'Courier New', monospace;

	--container-width: 1200px;
	--radius: 4px;
	--transition: 220ms ease;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--sac-ink);
	background: var(--sac-paper);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 0.5em; line-height: 1.15; letter-spacing: 0.01em; }
p { margin: 0 0 1em; }

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--sac-ink); color: var(--sac-white); padding: 10px 16px;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible {
	outline: 3px solid var(--sac-signal);
	outline-offset: 2px;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sac-blue-mid);
	margin: 0 0 10px;
}

.section-title {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	color: var(--sac-blue);
}

.empty-state {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--sac-steel);
	padding: 24px 0;
}

/* ---------- Boutons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 13.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 24px;
	border-radius: var(--radius);
	border: 1.5px solid transparent;
	transition: transform var(--transition), background var(--transition), border-color var(--transition);
	cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }

.btn-signal {
	background: var(--sac-signal);
	color: var(--sac-ink);
	border-color: var(--sac-signal);
}
.btn-signal:hover { background: var(--sac-signal-dark); border-color: var(--sac-signal-dark); color: var(--sac-white); }

.btn-ghost {
	background: transparent;
	color: var(--sac-white);
	border-color: rgba(255,255,255,0.5);
}
.section .btn-ghost { color: var(--sac-blue); border-color: var(--sac-blue-mid); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.section .btn-ghost:hover { background: var(--sac-blue); color: var(--sac-white); }

/* ---------- Ligne de voie décorative ---------- */
.rail-line {
	height: 4px;
	width: 100%;
	background: repeating-linear-gradient(90deg, var(--sac-blue-mid) 0 22px, transparent 22px 34px);
	opacity: 0.9;
}
.rail-line-footer { background: repeating-linear-gradient(90deg, var(--sac-steel) 0 22px, transparent 22px 34px); }

/* ---------- En-tête ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sac-blue);
	box-shadow: 0 2px 10px rgba(10,31,51,0.15);
}

.header-inner {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	gap: 16px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--sac-white);
}
.brand-mark { color: var(--sac-signal); display: flex; }
.brand-mark-logo img { width: 48px; height: 48px; display: block; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.03em; }
.brand-sub { font-family: var(--font-mono); font-size: 11px; color: var(--sac-rail-line); text-transform: uppercase; letter-spacing: 0.08em; }
.custom-logo-link img { max-height: 52px; width: auto; }

/* Groupe de droite : menu + recherche */
.header-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

/* Recherche */
.header-search {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.header-search-form {
	display: flex;
	align-items: center;
	background: var(--sac-blue-mid);
	border: 1.5px solid var(--sac-white);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--transition);
}
.header-search-form:focus-within { box-shadow: 0 0 0 2px var(--sac-signal); }
.header-search-input {
	width: 120px;
	max-width: 100%;
	border: none;
	background: transparent;
	padding: 7px 12px;
	font-family: var(--font-body);
	font-size: 13.5px;
	color: var(--sac-white);
}
.header-search-input:focus { outline: none; }
.header-search-input::placeholder { color: var(--sac-white); opacity: 0.85; }

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.nav-toggle-bar { width: 24px; height: 2px; background: var(--sac-white); display: block; }

.primary-nav .nav-stations {
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
}
.primary-nav .nav-stations > li {
	position: relative;
	flex-shrink: 0;
}
.primary-nav .nav-stations a {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sac-rail-line);
	text-decoration: none;
	padding: 8px 10px;
	border-radius: var(--radius);
	white-space: nowrap;
	transition: color var(--transition), background var(--transition);
}
.primary-nav .nav-stations a:hover,
.primary-nav .nav-stations a:focus-visible { color: var(--sac-white); background: rgba(255,255,255,0.08); }

/* Puce indiquant un sous-menu */
.primary-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--transition);
}
.primary-nav .menu-item-has-children:hover > a::after,
.primary-nav .menu-item-has-children:focus-within > a::after,
.primary-nav .menu-item-has-children.is-open > a::after { transform: translateY(0) rotate(-135deg); }

/* Sous-menus */
.primary-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 861px) {
	.primary-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--sac-blue);
		border: 1px solid rgba(255,255,255,0.12);
		border-radius: var(--radius);
		box-shadow: 0 14px 30px rgba(10,31,51,0.35);
		padding: 6px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
		z-index: 10;
	}
	.primary-nav .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}
	.primary-nav .menu-item-has-children:hover > .sub-menu,
	.primary-nav .menu-item-has-children:focus-within > .sub-menu,
	.primary-nav .menu-item-has-children.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.primary-nav .sub-menu a { display: block; white-space: nowrap; }
}

@media (max-width: 860px) {
	.primary-nav .sub-menu {
		display: none;
		padding-left: 16px;
		border-left: 2px solid rgba(255,255,255,0.15);
		margin: 4px 0 4px 14px;
	}
	.primary-nav .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}
}

@media (max-width: 860px) {
	.nav-toggle { display: flex; }
	.primary-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--sac-blue);
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition);
	}
	.primary-nav.is-open { max-height: 80vh; overflow-y: auto; }
	.primary-nav .nav-stations { flex-direction: column; padding: 8px 24px 20px; }

	.header-actions { gap: 8px; }
	.header-search-input { width: 100px; }
}

@media (max-width: 520px) {
	.header-search-input { width: 78px; font-size: 12.5px; }
}

/* ---------- Héros ---------- */
.hero {
	position: relative;
	min-height: 86vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 20%, var(--sac-blue-mid) 0%, var(--sac-ink) 72%);
	color: var(--sac-white);
}
.hero-canvas-wrap { position: absolute; inset: 0; z-index: 0; }
#sacHeroCanvas { width: 100%; height: 100%; display: block; }
.hero-scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(10,31,51,0.35) 0%, rgba(10,31,51,0.55) 60%, var(--sac-ink) 100%);
	pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; padding-top: 60px; padding-bottom: 80px; max-width: 760px; }
.hero .eyebrow { color: var(--sac-signal); }
.hero-title { font-size: clamp(2.2rem, 5.4vw, 4rem); margin-bottom: 0.35em; }
.hero-intro { font-size: 1.15rem; color: var(--sac-rail-line); max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.hero-signal {
	position: absolute;
	right: 28px;
	bottom: 28px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: rgba(10,31,51,0.55);
	padding: 12px 10px;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.15);
}
.signal-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.signal-dot-red.is-active { background: var(--sac-red); box-shadow: 0 0 10px var(--sac-red); }
.signal-dot-amber.is-active { background: var(--sac-signal); box-shadow: 0 0 10px var(--sac-signal); }
.signal-dot-green.is-active { background: var(--sac-green); box-shadow: 0 0 10px var(--sac-green); }

/* ---------- Ligne de navigation "plan de ligne" ---------- */
.route-line {
	background: var(--sac-white);
	border-bottom: 1px solid var(--sac-rail-line);
	position: relative;
}
.route-line-inner {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 18px 24px;
	overflow-x: auto;
	position: relative;
}
.route-line-inner::before {
	content: "";
	position: absolute;
	left: 24px; right: 24px; top: 50%;
	height: 2px;
	background: var(--sac-rail-line);
	z-index: 0;
}
.station {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sac-blue);
	background: var(--sac-white);
	padding: 6px 18px 6px 6px;
	white-space: nowrap;
	transition: color var(--transition);
}
.station-dot {
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--sac-white);
	border: 2.5px solid var(--sac-blue-mid);
	transition: background var(--transition), transform var(--transition);
}
.station:hover .station-dot,
.station:focus-visible .station-dot { background: var(--sac-signal); border-color: var(--sac-signal-dark); transform: scale(1.15); }
.station:hover, .station:focus-visible { color: var(--sac-blue-mid); }
.station.is-active { color: var(--sac-signal-dark); }
.station.is-active .station-dot { background: var(--sac-signal); border-color: var(--sac-signal-dark); }

/* ---------- Mot du Secrétaire général ---------- */
.section-sg {
	background: var(--sac-white);
	position: relative;
	overflow: hidden;
}
.section-sg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 90% 10%, rgba(44,81,136,0.06), transparent 45%);
	pointer-events: none;
}
.sg-inner {
	position: relative;
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 68px;
	align-items: center;
}

.sg-portrait {
	position: relative;
}
.sg-portrait-frame {
	position: relative;
	z-index: 2;
	aspect-ratio: 4/5;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(160deg, var(--sac-paper), var(--sac-rail-line));
	border: 1px solid var(--sac-rail-line);
	box-shadow: 0 26px 54px rgba(10,31,51,0.22);
	transform: perspective(1200px) rotateY(-9deg) rotateX(3deg);
	transition: transform 420ms ease, box-shadow 420ms ease;
}
.sg-portrait:hover .sg-portrait-frame,
.sg-portrait:focus-within .sg-portrait-frame {
	transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
	box-shadow: 0 20px 40px rgba(10,31,51,0.16);
}
.sg-portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-portrait-placeholder {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--sac-steel);
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sg-portrait-leaf {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	border: 1px solid var(--sac-rail-line);
	transition: transform 420ms ease, opacity 420ms ease;
}
.sg-leaf-2 {
	z-index: 1;
	background: var(--sac-rail-line);
	transform: perspective(1200px) rotateY(-9deg) rotateX(3deg) translate(14px, 10px);
	opacity: 0.85;
}
.sg-leaf-3 {
	z-index: 0;
	background: var(--sac-signal);
	opacity: 0.5;
	transform: perspective(1200px) rotateY(-9deg) rotateX(3deg) translate(28px, 22px);
}
.sg-portrait:hover .sg-leaf-2,
.sg-portrait:focus-within .sg-leaf-2 { transform: translate(10px, 8px); }
.sg-portrait:hover .sg-leaf-3,
.sg-portrait:focus-within .sg-leaf-3 { transform: translate(20px, 16px); }

.sg-content { position: relative; }
.sg-message {
	position: relative;
	margin-top: 22px;
	padding-left: 34px;
	max-width: 640px;
	color: #2C3D4F;
	font-size: 1.05rem;
}
.sg-message::before {
	content: "“";
	position: absolute;
	left: -6px;
	top: -30px;
	font-family: var(--font-display);
	font-size: 4.6rem;
	line-height: 1;
	color: var(--sac-signal);
	opacity: 0.75;
}
.sg-message p:last-child { margin-bottom: 0; }
.sg-signature {
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 2px solid var(--sac-rail-line);
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-width: 640px;
}
.sg-signature-name { font-family: var(--font-display); font-weight: 600; color: var(--sac-blue); font-size: 1.1rem; }
.sg-signature-role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sac-steel); }

@media (max-width: 780px) {
	.sg-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
	.sg-portrait { max-width: 260px; margin: 0 auto; }
	.sg-portrait-frame,
	.sg-leaf-2, .sg-leaf-3 { transform: none !important; }
	.sg-message { padding-left: 0; text-align: left; }
	.sg-signature { margin-left: auto; margin-right: auto; text-align: left; }
}

/* ---------- Sections génériques ---------- */
.section { padding: 88px 0; }
.section-cta { margin-top: 40px; text-align: center; }

/* ---------- Actualités ---------- */
.section-news { background: var(--sac-paper); }
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 36px;
}
.news-card {
	background: var(--sac-white);
	border: 1px solid var(--sac-rail-line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}
.news-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,49,92,0.14); }
.news-card-link { text-decoration: none; color: inherit; display: block; }
.news-card-media { aspect-ratio: 16/10; overflow: hidden; background: var(--sac-rail-line); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { padding: 20px 22px 24px; }
.news-card-date { font-family: var(--font-mono); font-size: 12px; color: var(--sac-steel); letter-spacing: 0.05em; }
.news-card-title { font-size: 1.15rem; color: var(--sac-blue); margin: 8px 0 10px; }
.news-card-excerpt { font-size: 0.95rem; color: #3B4A5A; margin: 0; }

/* ---------- Actualités : mise en page à deux colonnes + panneau YouTube ---------- */
.news-section-inner {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: 48px;
	align-items: start;
}
.news-main .news-grid { grid-template-columns: repeat(2, 1fr); }

.news-youtube {
	background: var(--sac-white);
	border: 1px solid var(--sac-rail-line);
	border-radius: var(--radius);
	padding: 26px 24px 28px;
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.news-youtube .eyebrow { margin-bottom: 0; }
.youtube-panel-title { font-size: 1.25rem; color: var(--sac-blue); margin: 0; }
.youtube-embed-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--sac-ink);
}
.youtube-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.youtube-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 28px 14px;
	background: var(--sac-paper);
	border-radius: var(--radius);
	color: var(--sac-blue-mid);
}
.youtube-placeholder svg { color: var(--sac-red); }
.youtube-placeholder p { margin: 0; font-size: 0.9rem; color: #3B4A5A; }
.youtube-panel-btn { width: 100%; justify-content: center; }
.youtube-panel-hint { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--sac-steel); text-align: center; }

@media (max-width: 980px) {
	.news-section-inner { grid-template-columns: 1fr; }
	.news-youtube { position: static; }
	.news-main .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.news-main .news-grid { grid-template-columns: 1fr; }
}

/* ---------- Adhésion ---------- */
.section-adhesion {
	background: var(--sac-blue);
	color: var(--sac-white);
	position: relative;
}
.adhesion-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: center;
	padding-top: 24px;
}
.section-adhesion .eyebrow { color: var(--sac-signal); }
.section-adhesion .section-title { color: var(--sac-white); }
.section-adhesion p { color: var(--sac-rail-line); }
.adhesion-action { display: flex; justify-content: flex-start; }
.adhesion-action form { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 380px; }
.adhesion-action input,
.adhesion-action select,
.adhesion-action textarea {
	font-family: var(--font-body);
	font-size: 15px;
	padding: 12px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--sac-rail-line);
	background: var(--sac-white);
	color: var(--sac-ink);
}

@media (max-width: 780px) {
	.adhesion-inner { grid-template-columns: 1fr; }
}

/* ---------- À propos ---------- */
.section-about { background: var(--sac-white); }
.about-teaser {
	display: block;
	color: var(--sac-ink);
	text-decoration: none;
	cursor: pointer;
}
.about-teaser-text { transition: color var(--transition); }
.about-teaser-dots {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--sac-signal);
	margin-left: 2px;
	transition: color var(--transition), margin-left var(--transition);
}
.about-teaser:hover .about-teaser-text,
.about-teaser:focus-visible .about-teaser-text { color: var(--sac-blue-mid); }
.about-teaser:hover .about-teaser-dots,
.about-teaser:focus-visible .about-teaser-dots { color: var(--sac-signal-dark); margin-left: 5px; }
.about-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.about-track { position: relative; padding-left: 28px; }
.about-track::before {
	content: "";
	position: absolute; left: 6px; top: 6px; bottom: 6px;
	width: 2px;
	background: var(--sac-rail-line);
}
.about-track li { position: relative; padding-bottom: 34px; }
.about-track li:last-child { padding-bottom: 0; }
.about-track li::before {
	content: "";
	position: absolute; left: -28px; top: 4px;
	width: 13px; height: 13px; border-radius: 50%;
	background: var(--sac-signal);
	border: 2px solid var(--sac-white);
	box-shadow: 0 0 0 2px var(--sac-blue-mid);
}
.track-label { display: block; font-family: var(--font-display); font-weight: 600; color: var(--sac-blue); font-size: 1.1rem; }
.track-desc { display: block; color: #3B4A5A; font-size: 0.95rem; margin-top: 4px; }

@media (max-width: 780px) {
	.about-inner { grid-template-columns: 1fr; }
}

/* ---------- Ressources & Documents (espace 3D) ---------- */
.section-resources {
	background: var(--sac-blue);
	color: var(--sac-white);
	position: relative;
	overflow: hidden;
}
.section-resources::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 15%, rgba(226,163,59,0.14), transparent 45%),
		radial-gradient(circle at 88% 85%, rgba(255,255,255,0.07), transparent 50%);
	pointer-events: none;
}
.section-resources .container { position: relative; }
.section-resources .eyebrow { color: var(--sac-signal); }
.section-resources .section-title { color: var(--sac-white); }
.resources-intro { max-width: 620px; color: var(--sac-rail-line); font-size: 1.02rem; }

.resources-3d-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-top: 44px;
	perspective: 1400px;
}

.resource-3d-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.resource-3d-card-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 10px;
	padding: 40px 32px 34px;
	height: 100%;
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
	box-shadow: 0 20px 40px rgba(10,31,51,0.35);
}
.resource-3d-card:hover .resource-3d-card-inner,
.resource-3d-card:focus-visible .resource-3d-card-inner {
	border-color: var(--sac-signal);
	box-shadow: 0 30px 60px rgba(10,31,51,0.5);
}

.resource-3d-icon {
	position: relative;
	display: block;
	width: 60px;
	height: 52px;
	margin-bottom: 24px;
	transform-style: preserve-3d;
	transform: rotateX(12deg) rotateY(-18deg);
}
.doc-leaf {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 5px;
	border: 1.5px solid rgba(255,255,255,0.35);
	background: linear-gradient(160deg, var(--sac-white), var(--sac-rail-line));
}
.doc-leaf-2 { transform: translateZ(-9px) translate(4px, 4px); background: linear-gradient(160deg, var(--sac-rail-line), var(--sac-steel)); opacity: 0.9; }
.doc-leaf-3 { transform: translateZ(-18px) translate(8px, 8px); background: var(--sac-signal); opacity: 0.85; border-color: var(--sac-signal-dark); }

.resource-3d-card .eyebrow { margin-bottom: 8px; }
.resource-3d-title { display: block; font-family: var(--font-display); font-weight: 600; color: var(--sac-white); font-size: 1.4rem; margin: 4px 0 10px; }
.resource-3d-desc { display: block; color: var(--sac-rail-line); font-size: 0.95rem; margin: 0 0 18px; }
.resource-3d-meta {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sac-steel);
	background: rgba(255,255,255,0.08);
	border-radius: var(--radius);
	padding: 4px 10px;
	margin-bottom: 20px;
}
.resource-3d-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sac-signal);
	transition: gap 200ms ease;
}
.resource-3d-card:hover .resource-3d-cta { gap: 10px; }

@media (max-width: 780px) {
	.resources-3d-grid { grid-template-columns: 1fr; perspective: none; }
	.resource-3d-card-inner { transform: none !important; }
}

/* ---------- Documents : listes (archive / catégorie) ---------- */
.page-hero-desc { color: var(--sac-rail-line); max-width: 640px; margin-top: 10px; }
.section-documents + .section-documents { padding-top: 0; }
.doc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 32px;
}
.doc-card {
	background: var(--sac-white);
	border: 1px solid var(--sac-rail-line);
	border-radius: var(--radius);
	transition: transform var(--transition), box-shadow var(--transition);
}
.doc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,49,92,0.14); }
.doc-card-link { display: flex; align-items: center; gap: 16px; padding: 20px 22px; text-decoration: none; color: inherit; }
.doc-card-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--sac-paper);
	color: var(--sac-blue);
}
.doc-card-body { flex: 1; min-width: 0; }
.doc-card-title { display: block; font-family: var(--font-display); font-weight: 600; color: var(--sac-blue); font-size: 1.02rem; margin-bottom: 4px; }
.doc-card-meta { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--sac-steel); letter-spacing: 0.03em; text-transform: uppercase; }
.doc-card-arrow { flex-shrink: 0; color: var(--sac-signal-dark); font-size: 1.2rem; transition: transform var(--transition); }
.doc-card:hover .doc-card-arrow { transform: translateX(4px); }

.doc-single-content { margin-bottom: 8px; }
.doc-download-btn { margin-top: 24px; }

@media (max-width: 620px) {
	.doc-grid { grid-template-columns: 1fr; }
	.resources-3d-grid { gap: 20px; }
}

/* ---------- Nos partenaires (bandeau défilant) ---------- */
.section-partners { background: var(--sac-white); overflow: hidden; }
.partners-track-wrap {
	margin-top: 36px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.partners-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 56px;
	animation: sac-partners-scroll 30s linear infinite;
}
.partners-track-wrap:hover .partners-track { animation-play-state: paused; }

.partners-static {
	margin-top: 36px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 40px 56px;
}

.partner-item {
	flex: 0 0 auto;
	height: 90px;
	width: 190px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sac-white);
	border: 1px solid var(--sac-rail-line);
	border-radius: var(--radius);
	padding: 12px;
}
.partner-item a,
.partner-item span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.partner-item img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform var(--transition);
}
.partner-item img:hover {
	transform: scale(1.06);
}

@keyframes sac-partners-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.partners-track { animation: none; }
	.partners-track-wrap { overflow-x: auto; }
}

@media (max-width: 780px) {
	.partner-item { height: 68px; width: 140px; }
}

/* ---------- Pages génériques ---------- */
.page-hero { background: var(--sac-blue); color: var(--sac-white); padding: 64px 0 40px; }
.page-hero .page-title { color: var(--sac-white); }
.page-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--sac-blue); }
.content-narrow { max-width: 760px; margin: 0 auto; }
.page-thumb { margin-bottom: 28px; border-radius: var(--radius); overflow: hidden; }
.post-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--sac-steel); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Boutons de partage (article) ---------- */
.sac-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 32px 0 8px;
	padding-top: 24px;
	border-top: 1px solid var(--sac-rail-line);
}
.sac-share-label {
	font-family: var(--font-mono);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sac-steel);
	margin-right: 4px;
}
.sac-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--radius);
	background: var(--sac-paper);
	color: var(--sac-blue);
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 0.88rem;
	font-weight: 600;
	border: 1px solid var(--sac-rail-line);
	transition: transform var(--transition), background var(--transition), color var(--transition);
}
.sac-share-btn:hover { transform: translateY(-2px); color: var(--sac-white); }
.sac-share-facebook:hover { background: #1877F2; border-color: #1877F2; }
.sac-share-linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.sac-share-whatsapp:hover { background: #25D366; border-color: #25D366; }
@media (max-width: 480px) {
	.sac-share-btn span:last-child { display: none; }
	.sac-share-btn { padding: 10px; }
}

/* ---------- Pied de page ---------- */
.site-footer { background: var(--sac-ink); color: var(--sac-rail-line); }
.footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding: 56px 24px 40px;
}
.footer-brand .brand-name { font-family: var(--font-display); font-size: 1.5rem; color: var(--sac-white); }
.footer-brand p { color: var(--sac-rail-line); font-size: 0.92rem; margin-top: 8px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.footer-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--sac-white);
	transition: transform var(--transition), filter var(--transition);
}
.footer-social-btn:hover,
.footer-social-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.1); }
.footer-social-facebook { background: #1877F2; }
.footer-social-linkedin { background: #0A66C2; }
.footer-social-youtube { background: #FF0000; }
.footer-social-tiktok { background: #010101; }
.footer-social-whatsapp { background: #25D366; }
.footer-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sac-steel); margin-bottom: 14px; }
.footer-contact-list li, .footer-links li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-contact-list a, .footer-links a { text-decoration: none; color: var(--sac-rail-line); transition: color var(--transition); }
.footer-contact-list a:hover, .footer-links a:hover { color: var(--sac-white); }
.footer-widget-title { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--sac-steel); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 18px 24px; font-size: 0.85rem; }

/* ---------- Formulaire "Nous contacter" (pied de page) ---------- */
.footer-contact-form { display: flex; flex-direction: column; gap: 12px; }
.footer-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.footer-contact-field { display: flex; }
.footer-contact-form input,
.footer-contact-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.92rem;
	padding: 10px 12px;
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(255,255,255,0.05);
	color: var(--sac-white);
	transition: border-color var(--transition), background var(--transition);
}
.footer-contact-form input::placeholder,
.footer-contact-form textarea::placeholder { color: var(--sac-steel); }
.footer-contact-form input:focus,
.footer-contact-form textarea:focus {
	outline: none;
	border-color: var(--sac-signal);
	background: rgba(255,255,255,0.08);
}
.footer-contact-form textarea { resize: vertical; min-height: 96px; }
.footer-contact-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.footer-contact-submit {
	align-self: flex-start;
	border: none;
	cursor: pointer;
}
.footer-contact-submit:disabled { opacity: 0.6; cursor: default; }
.footer-contact-feedback { font-size: 0.85rem; margin: 0; min-height: 1.1em; }
.footer-contact-feedback.is-success { color: var(--sac-signal); }
.footer-contact-feedback.is-error { color: #ff8a80; }

@media (max-width: 560px) {
	.footer-contact-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.footer-inner { grid-template-columns: 1fr; }
}

/* ---------- Grilles responsives générales ---------- */
@media (max-width: 980px) {
	.news-grid { grid-template-columns: repeat(2, 1fr); }
	.gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
	.news-grid { grid-template-columns: 1fr; }
	.section { padding: 60px 0; }
	.hero { min-height: 78vh; }
}

/* ---------- Barre de réseaux sociaux flottante (gauche) ---------- */
.sac-social-sidebar {
	position: fixed;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9998;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}
.sac-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--sac-white);
	background: var(--sac-blue);
	box-shadow: 0 4px 14px rgba(10, 31, 51, 0.25);
	transition: transform 0.18s ease, background 0.18s ease;
}
.sac-social-btn:hover,
.sac-social-btn:focus-visible {
	transform: translateY(-2px) scale(1.06);
	color: var(--sac-white);
}
.sac-social-facebook { background: #1877F2; }
.sac-social-facebook:hover { background: #0f5fcb; }
.sac-social-youtube { background: #FF0000; }
.sac-social-youtube:hover { background: #cc0000; }
.sac-social-whatsapp { background: #25D366; }
.sac-social-whatsapp:hover { background: #1ea952; }

@media (max-width: 620px) {
	.sac-social-sidebar {
		left: auto;
		right: 12px;
		top: auto;
		bottom: 90px;
		transform: none;
		flex-direction: column;
	}
	.sac-social-btn { width: 38px; height: 38px; }
}