/* =================================================================
 * BETSALEEL DIGITAL — Feuille de style principale
 * Thème enfant de Twenty Twenty-Five
 *
 * Design system v0.8.0 — retour hero cinématique v0.5.9
 * - Palette Betsaleel (bleu / violet / jaune)
 * - Tokens inspirés de MyCFiA ink-0/1/2/3, fog, glass
 * - Typo : Rubik (display) + Inter (body) + JetBrains Mono (mono)
 * - Motion : GSAP 3.12.5 + ScrollTrigger (hero 3 phases, scrub 1.2) +
 *   IntersectionObserver (.reveal sections 2-8)
 * - Hero v0.5.9 : 300vh sticky 100vh, logo couleur centre → sortie haut,
 *   textes slide-in, pauses 33%/66%, sortie inverse
 *
 * @package Betsaleel_Child
 * @version 0.8.0
 * =================================================================
 */

/* -----------------------------------------------------------------
 * 1. TOKENS DE COULEURS
 * ----------------------------------------------------------------- */
:root {
	/* Couleurs officielles du logo (non négociable) */
	--betsaleel-blue: #3EBBD0;
	--betsaleel-violet: #B14693;
	--betsaleel-yellow: #D6A94D;
	--betsaleel-gold: #D7AA4E;        /* v0.9.21 — jaune doré du logo, utilisé en touches subtiles */

	/* Dégradé signature (bleu → violet uniquement) */
	--betsaleel-gradient: linear-gradient(135deg, #3EBBD0 0%, #B14693 100%);
	--betsaleel-gradient-soft: linear-gradient(135deg, rgba(62, 187, 208, 0.15) 0%, rgba(177, 70, 147, 0.15) 100%);

	/* Backgrounds (équivalent MyCFiA ink-0/1/2/3) */
	--betsaleel-bg: #0A0A0F;            /* page background */
	--betsaleel-bg-elevated: #07111F;   /* section --dim (MyCFiA ink-1) */
	--betsaleel-surface: #0B1A2E;       /* MyCFiA ink-2 */
	--betsaleel-surface-hover: #0F2238; /* MyCFiA ink-3 */

	/* Texte (équivalent MyCFiA fog) */
	--betsaleel-text: #F5F5F7;          /* MyCFiA fog */
	--betsaleel-text-muted: #CBD5E1;    /* MyCFiA fog-muted */
	--betsaleel-text-dim: #94A3B8;      /* MyCFiA fog-dim */

	/* Bordures / surfaces */
	--betsaleel-line: rgba(255, 255, 255, 0.08);
	--betsaleel-line-strong: rgba(255, 255, 255, 0.12);
	--betsaleel-line-hover: rgba(255, 255, 255, 0.20);

	/* Ombres */
	--betsaleel-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--betsaleel-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.32);
	--betsaleel-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.48);
	--betsaleel-shadow-glow: 0 0 60px -10px rgba(62, 187, 208, 0.45);

	/* Radius */
	--betsaleel-radius-sm: 6px;
	--betsaleel-radius-md: 12px;
	--betsaleel-radius-lg: 20px;
	--betsaleel-radius-pill: 999px;

	/* Typo */
	--betsaleel-font-display: 'Rubik', 'Inter Tight', system-ui, sans-serif;
	--betsaleel-font-body: 'Inter', system-ui, sans-serif;
	--betsaleel-font-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* Transitions */
	--betsaleel-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--betsaleel-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--betsaleel-transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	--betsaleel-transition-spring: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* -----------------------------------------------------------------
 * 2. RESET + BASE
 * ----------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: var(--betsaleel-bg);
	color: var(--betsaleel-text);
	font-family: var(--betsaleel-font-body);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
	color-scheme: dark;
}

::selection {
	background: var(--betsaleel-blue);
	color: var(--betsaleel-bg);
}

/* -----------------------------------------------------------------
 * 3. TYPOGRAPHIE
 * ----------------------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--betsaleel-font-display);
	color: var(--betsaleel-text);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin-top: 0;
}

h1 {
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
}

h2 {
	font-size: clamp(1.75rem, 4vw, 3rem);
}

h3 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

h5, h6 {
	font-family: var(--betsaleel-font-body);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8125rem;
	color: var(--betsaleel-text-muted);
}

p {
	margin: 0 0 1em 0;
	color: var(--betsaleel-text);
}

a {
	color: var(--betsaleel-blue);
	text-decoration: none;
	transition: color var(--betsaleel-transition-fast);
}

a:hover,
a:focus {
	color: var(--betsaleel-violet);
}

/* -----------------------------------------------------------------
 * 4. UTILITAIRES — Design system MyCFiA-inspired
 * ----------------------------------------------------------------- */

/* Container fluide */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Section wrapper */
.section {
	padding: clamp(4rem, 10vh, 8rem) 0;
	position: relative;
}

.section--dim {
	background: var(--betsaleel-bg-elevated);
	border-top: 1px solid var(--betsaleel-line);
	border-bottom: 1px solid var(--betsaleel-line);
}

/* -----------------------------------------------------------------
 * 4a. EYEBROW (kicker au-dessus des titres)
 * ----------------------------------------------------------------- */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: var(--betsaleel-radius-pill);
	border: 1px solid var(--betsaleel-line);
	background: rgba(255, 255, 255, 0.04);
	padding: 0.4rem 0.9rem;
	font-family: var(--betsaleel-font-body);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--betsaleel-text-muted);
}

.eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--betsaleel-gold);
	flex-shrink: 0;
}

/* -----------------------------------------------------------------
 * 4b. TEXT GRADIENTS
 * ----------------------------------------------------------------- */
.text-gradient {
	background: linear-gradient(120deg, var(--betsaleel-text) 0%, var(--betsaleel-text-muted) 40%, var(--betsaleel-blue) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.text-gradient-blue {
	background: linear-gradient(120deg, var(--betsaleel-blue) 0%, var(--betsaleel-violet) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.gradient-text {
	background: var(--betsaleel-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	display: inline-block;
}

/* -----------------------------------------------------------------
 * 4c. GLASS UTILITIES (MyCFiA-inspired)
 * ----------------------------------------------------------------- */
.glass-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	border-radius: 16px;
	padding: 1.5rem;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.glass-card:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	border-color: var(--betsaleel-line-hover);
	transform: translateY(-2px);
}

.glass-strong {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
	border: 1px solid var(--betsaleel-line);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border-radius: 16px;
}

/* -----------------------------------------------------------------
 * 4d. HAIRLINE + GRID + SHADOWS
 * ----------------------------------------------------------------- */
.hairline {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
	height: 1px;
	width: 100%;
}

.grid-bg {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), transparent 70%);
}

.premium-shadow {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* -----------------------------------------------------------------
 * 4e. SECTION HEADING
 * ----------------------------------------------------------------- */
.section-heading {
	margin-bottom: 3rem;
}

.section-heading--center {
	text-align: center;
}

.section-heading__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.section-heading h2 {
	font-family: var(--betsaleel-font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

/* -----------------------------------------------------------------
 * 4f. BADGE PILL
 * ----------------------------------------------------------------- */
.badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: var(--betsaleel-radius-pill);
	border: 1px solid var(--betsaleel-line);
	background: rgba(255, 255, 255, 0.04);
	padding: 0.3rem 0.8rem;
	font-family: var(--betsaleel-font-body);
	font-size: 12px;
	color: var(--betsaleel-text-muted);
}

.badge-pill::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--betsaleel-blue);
	flex-shrink: 0;
}

.badge-live {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: var(--betsaleel-radius-pill);
	border: 1px solid rgba(62, 187, 208, 0.3);
	background: rgba(62, 187, 208, 0.1);
	padding: 0.3rem 0.8rem;
	font-family: var(--betsaleel-font-body);
	font-size: 12px;
	color: var(--betsaleel-blue);
}

/* -----------------------------------------------------------------
 * 5. BOUTONS
 * ----------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-ghost,
.btn--primary,
.btn--secondary,
.btn--ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--betsaleel-font-body);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: all var(--betsaleel-transition-base);
	border: 1px solid transparent;
}

.btn {
	padding: 0.875rem 1.75rem;
	border-radius: var(--betsaleel-radius-pill);
	font-size: 0.9375rem;
	font-weight: 600;
}

.btn-primary {
	border-radius: var(--betsaleel-radius-pill);
	background: var(--betsaleel-gradient);
	padding: 0.75rem 1.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--betsaleel-bg);
	box-shadow: var(--betsaleel-shadow-glow);
}

.btn-primary:hover,
.btn-primary:focus {
	filter: brightness(1.1);
	transform: translateY(-1px);
	color: var(--betsaleel-bg);
}

.btn-ghost {
	border-radius: var(--betsaleel-radius-pill);
	border: 1px solid var(--betsaleel-line);
	background: rgba(255, 255, 255, 0.04);
	padding: 0.75rem 1.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--betsaleel-text);
}

.btn-ghost:hover,
.btn-ghost:focus {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--betsaleel-line-hover);
	color: var(--betsaleel-text);
}

.btn--primary {
	background: var(--betsaleel-gradient);
	color: var(--betsaleel-bg);
	background-size: 200% 100%;
	background-position: 0% 50%;
}

.btn--primary:hover,
.btn--primary:focus {
	background-position: 100% 50%;
	color: var(--betsaleel-bg);
	transform: translateY(-2px);
	box-shadow: var(--betsaleel-shadow-md);
}

.btn--secondary {
	background: transparent;
	color: var(--betsaleel-text);
	border-color: var(--betsaleel-line-strong);
}

.btn--secondary:hover,
.btn--secondary:focus {
	background: var(--betsaleel-bg-elevated);
	border-color: var(--betsaleel-blue);
	color: var(--betsaleel-blue);
}

.btn--ghost {
	background: transparent;
	color: var(--betsaleel-text);
	padding: 0.5rem 0;
	border: none;
}

.btn--ghost:hover,
.btn--ghost:focus {
	color: var(--betsaleel-blue);
}

/* -----------------------------------------------------------------
 * 6. HERO — v0.8.0 modèle v0.5.9 restauré (cinématique 3 phases)
 * - Container 300vh orchestré par GSAP ScrollTrigger (scrub 1.2)
 * - Sticky 100vh à l'intérieur, contenu centré (logo + textes + CTAs + badges)
 * - Eyebrow "Association loi 1901" supprimé (v0.5.0, conservé)
 * - Tous les éléments sont en `opacity: 0` par défaut et animés par GSAP
 * - prefers-reduced-motion : état final visible, pas d'animation scroll
 * ----------------------------------------------------------------- */
.hero {
	position: relative;
	background-color: var(--betsaleel-bg);
	z-index: 0;
}

/* v0.8.2 : la cinématique GSAP du hero home a besoin de 300vh de scroll
   pour orchestrer les 3 phases. Sur les pages intérieures, le hero
   .hero--page fait min-height: 70vh, mais si on laisse `height: 300vh`
   sur .hero, le contenu centré verticalement tombe à y=150vh, hors
   viewport au load. On exclut donc .hero--page du height: 300vh. */
.hero:not(.hero--page) {
	height: 300vh;
}

.hero__sticky {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Background gradient radial subtil bleu→violet (intensité 14%) */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(ellipse at 30% 25%, rgba(62, 187, 208, .14) 0%, transparent 55%),
		radial-gradient(ellipse at 70% 75%, rgba(177, 70, 147, .14) 0%, transparent 55%);
	pointer-events: none;
}

/* v0.9.34 : champ d'étoiles scintillantes — 64 étoiles, plus brillantes,
   plus rapides (1.5-3s), 4 couleurs (blue/violet/mix/gold). */
.hero__stars {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.hero__star {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	will-change: opacity, transform;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.hero__star--blue {
	background: var(--betsaleel-blue);
	box-shadow: 0 0 5px rgba(62, 187, 208, 0.65);
}

.hero__star--violet {
	background: var(--betsaleel-violet);
	box-shadow: 0 0 5px rgba(177, 70, 147, 0.65);
}

.hero__star--mix {
	background: linear-gradient(135deg, var(--betsaleel-blue), var(--betsaleel-violet));
	box-shadow: 0 0 6px rgba(120, 130, 180, 0.55);
}

.hero__star--gold {
	background: var(--betsaleel-gold);
	box-shadow: 0 0 6px rgba(215, 170, 78, 0.70);
}

.hero__star--dim {
	animation-name: star-twinkle-dim;
}

.hero__star--medium {
	animation-name: star-twinkle-medium;
}

.hero__star--bright {
	animation-name: star-twinkle-bright;
}

@keyframes star-twinkle-dim {
	0%, 100% { opacity: 0.05; transform: scale(0.7); }
	50%      { opacity: 0.22; transform: scale(0.95); }
}

@keyframes star-twinkle-medium {
	0%, 100% { opacity: 0.10; transform: scale(0.85); }
	50%      { opacity: 0.42; transform: scale(1.05); }
}

@keyframes star-twinkle-bright {
	0%, 100% { opacity: 0.18; transform: scale(0.95); }
	50%      { opacity: 0.65; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__star {
		animation: none !important;
		opacity: 0.22;
	}
}

/* Logo couleur Betsaleel (animé par GSAP, centre → sortie haut, anti-superposition) */
.hero__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: clamp(180px, 30vw, 320px);
	max-width: 320px;
	height: auto;
	filter:
		drop-shadow(0 0 30px rgba(62, 187, 208, .25))
		drop-shadow(0 0 60px rgba(177, 70, 147, .18));
	transform: translate(-50%, -50%);
	will-change: transform, opacity;
	user-select: none;
	pointer-events: none;
}

/* Contenu du hero (titre, signature, lead, CTAs, badges) */
.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	text-align: center;
	pointer-events: none; /* pour ne pas bloquer le logo au centre */
}

.hero__content > * {
	pointer-events: auto;
}

.hero__title {
	font-family: var(--betsaleel-font-display);
	font-weight: 700;
	font-size: clamp(3rem, 9vw, 7rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	background: var(--betsaleel-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	margin: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	opacity: 0;
	will-change: transform, opacity;
}

.hero__signature {
	font-family: var(--betsaleel-font-display);
	font-weight: 500;
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	color: var(--betsaleel-text);
	opacity: 0;
	margin: 0;
	letter-spacing: -0.01em;
	will-change: transform, opacity;
}

.hero__lead {
	font-family: var(--betsaleel-font-body);
	font-weight: 400;
	font-size: clamp(0.95rem, 1.3vw, 1.0625rem);
	color: var(--betsaleel-text-muted);
	max-width: 580px;
	line-height: 1.6;
	margin: 0;
	opacity: 0;
	will-change: transform, opacity;
}

.hero__ctas {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	opacity: 0;
	will-change: transform, opacity;
}

.hero__ctas .btn {
	will-change: transform, opacity;
}

.hero__badges {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1rem;
	opacity: 0;
	will-change: transform, opacity;
}

/* Aucun indicateur de scroll : le scroll lui-même fait la cinématique */

/* -----------------------------------------------------------------
 * 7. SECTIONS — Patterns partagés
 * ----------------------------------------------------------------- */

/* Feature grid (sections actions, publics) */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

.feature-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	border-radius: 16px;
	padding: 2rem;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-card:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	border-color: var(--betsaleel-line-hover);
	transform: translateY(-2px);
}

.feature-card__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--betsaleel-radius-sm);
	background: var(--betsaleel-surface);
	margin-bottom: 1.25rem;
	color: var(--betsaleel-blue);
	transition: all var(--betsaleel-transition-base);
}

.feature-card:hover .feature-card__icon {
	background: var(--betsaleel-gradient);
	color: var(--betsaleel-bg);
	transform: scale(1.05);
}

.feature-card__title {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}

.feature-card__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* -----------------------------------------------------------------
 * 7a. ENGAGEMENT — 3 piliers (Comprendre · Discerner · Agir)
 * ----------------------------------------------------------------- */
.engagement-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-top: 1rem;
}

@media (max-width: 900px) {
	.engagement-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.pillar-card {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	border-radius: 16px;
	padding: 2.5rem 2rem 2rem;
	display: flex;
	flex-direction: column;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pillar-card:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	border-color: var(--betsaleel-line-hover);
	transform: translateY(-2px);
}

.pillar-card__tier {
	display: inline-block;
	font-family: var(--betsaleel-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--betsaleel-text-muted);
	margin-bottom: 0.75rem;
}

.pillar-card__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--betsaleel-radius-sm);
	background: var(--betsaleel-gradient-soft);
	margin-bottom: 1.25rem;
	color: var(--betsaleel-blue);
}

.pillar-card__title {
	font-family: var(--betsaleel-font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	color: var(--betsaleel-text);
	margin: 0 0 1rem 0;
	letter-spacing: -0.01em;
}

.pillar-card__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 1.5rem 0;
}

.pillar-card__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pillar-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	color: var(--betsaleel-text);
	font-size: 0.875rem;
	line-height: 1.5;
}

.pillar-card__features li::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background: var(--betsaleel-gradient);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat;
}

/* Carte featured (centrale, "Discerner") — bordure gradient + lift + ombre plus marquée */
.pillar-card--featured {
	border: 1px solid transparent;
	background-clip: padding-box;
	position: relative;
}

.pillar-card--featured::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	padding: 1px;
	background: var(--betsaleel-gradient);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0.7;
}

.pillar-card--featured:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(62, 187, 208, 0.15), 0 16px 48px rgba(177, 70, 147, 0.10);
}

.pillar-card__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.375rem 0.875rem;
	border-radius: var(--betsaleel-radius-pill);
	background: var(--betsaleel-gradient);
	color: var(--betsaleel-bg);
	font-family: var(--betsaleel-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------
 * 7b. CONSTAT — 3 paragraphes en glass-card
 * ----------------------------------------------------------------- */
.constat-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	max-width: 880px;
	margin: 0 auto;
}

.constat-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	border-radius: 16px;
	padding: 1.75rem 2rem;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.constat-card:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	border-color: var(--betsaleel-line-hover);
}

.constat-card p {
	margin: 0;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.constat-card strong {
	color: var(--betsaleel-text);
	font-weight: 500;
}

.section__lead {
	max-width: 760px;
	margin: 0 auto;
}

/* -----------------------------------------------------------------
 * 7c. AGENDA — grande card glass-strong
 * ----------------------------------------------------------------- */
.event-card {
	max-width: 720px;
	margin: 0 auto;
	padding: 3rem 2.5rem;
	text-align: center;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
	border: 1px solid var(--betsaleel-line);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border-radius: 20px;
	position: relative;
}

.event-card__tag {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border-radius: var(--betsaleel-radius-pill);
	background: var(--betsaleel-yellow);
	color: var(--betsaleel-bg);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1.5rem;
	animation: pulseTag 2.5s ease-in-out infinite;
}

@keyframes pulseTag {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.65; }
}

.event-card__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: 1rem;
}

.event-card__desc {
	color: var(--betsaleel-text-muted);
	margin-bottom: 2rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* -----------------------------------------------------------------
 * 7d. PUBLICS — 6 items en grid
 * ----------------------------------------------------------------- */
.publics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1rem;
	max-width: 1080px;
	margin: 0 auto;
}

.public-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.public-card:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	border-color: var(--betsaleel-line-hover);
	transform: translateY(-2px);
}

.public-card__icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--betsaleel-gradient-soft);
	color: var(--betsaleel-blue);
}

.public-card__body {
	flex: 1;
	min-width: 0;
}

.public-card__label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--betsaleel-text);
	margin: 0 0 0.35rem 0;
	font-family: var(--betsaleel-font-body);
}

.public-card__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 0;
}

/* -----------------------------------------------------------------
 * 7e. POURQUOI — card glass-strong centrée
 * ----------------------------------------------------------------- */
.why-card {
	max-width: 760px;
	margin: 0 auto;
	padding: 3rem 2.5rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
	border: 1px solid var(--betsaleel-line);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border-radius: 20px;
	text-align: center;
}

.why-card p {
	margin: 0 0 1.25rem 0;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.why-card p:last-of-type {
	margin-bottom: 0;
}

.why-card strong {
	color: var(--betsaleel-text);
	font-weight: 500;
}

.why-card em {
	color: var(--betsaleel-blue);
	font-style: italic;
}

.why-card__quote {
	margin: 2rem 0 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--betsaleel-line);
	font-family: var(--betsaleel-font-display);
	font-size: 1rem;
	font-style: italic;
	color: var(--betsaleel-text);
	letter-spacing: 0.005em;
}

/* -----------------------------------------------------------------
 * 7f. CTA FINAL
 * ----------------------------------------------------------------- */
.cta-final {
	text-align: center;
	padding: 6rem 1.5rem;
	background:
		radial-gradient(ellipse at center, rgba(62, 187, 208, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse at center bottom, rgba(177, 70, 147, 0.08) 0%, transparent 60%),
		var(--betsaleel-bg);
	position: relative;
}

.cta-final__inner {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.cta-final h2 {
	margin: 0;
}

.cta-final__text {
	font-size: 1.125rem;
	color: var(--betsaleel-text-muted);
	margin: 0 0 1rem 0;
	line-height: 1.7;
}

.cta-final__ctas {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* -----------------------------------------------------------------
 * 8. NAVIGATION — Header smart (v0.5.0+ — inchangé)
 * ----------------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(10, 10, 15, 0.55);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border-bottom: 1px solid var(--betsaleel-line);
	transform: translateY(-110%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.site-header.is-visible {
	transform: translateY(0);
}

/* v0.9.8 : sur les pages intérieures (non-home), le header est TOUJOURS
   visible — pas de smart slide-in. Permet de revenir à l'accueil et
   d'accéder au menu dès le top de la page. */
.site-header--always-visible {
	transform: translateY(0);
}

.site-header--always-visible .site-header__container {
	/* Petit ajustement pour s'assurer que la nav est cliquable en l'état
	   initial (au cas où is-visible n'est pas ajouté par le JS). */
	pointer-events: auto;
}

.site-header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1280px;
	margin: 0 auto;
	padding: 1rem 28px;
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.site-header__logo img {
	display: block;
	height: 63px;
	width: auto;
}

.site-header__nav {
	display: flex;
	align-items: center;
	position: relative;
}

/* v0.9.14 : barre animée colorée qui glisse sous l'item actif du menu.
   Positionnée et redimensionnée dynamiquement par motion.js (initMenuIndicator).
   Initialisée sous "Accueil" par défaut, puis suit l'item courant (scroll spy
   sur la home, item de menu actif sur les pages intérieures). */
.site-header__indicator {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--betsaleel-blue) 0%, var(--betsaleel-violet) 100%);
	border-radius: 2px 2px 0 0;
	box-shadow: 0 0 12px rgba(62, 187, 208, 0.45);
	transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				opacity 0.3s ease;
	opacity: 0;
	pointer-events: none;
	z-index: 2;
}

.site-header__indicator.is-ready {
	opacity: 1;
}

.primary-menu {
	display: flex;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu li {
	display: block;
}

.primary-menu a,
.primary-menu .primary-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem 0.875rem;
	color: var(--betsaleel-text);
	font-family: var(--betsaleel-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-radius: 6px;
	position: relative;
	transition: background var(--betsaleel-transition-fast), color var(--betsaleel-transition-fast);
	white-space: nowrap;
}

.primary-menu a:hover,
.primary-menu a:focus-visible,
.primary-menu .primary-menu__link:hover,
.primary-menu .primary-menu__link:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	outline: none;
}

/* v0.9.16 : suppression de l'ancienne barre CSS `::after` qui faisait
   doublon avec la barre JS .site-header__indicator (v0.9.14/15). La barre
   JS est unique et pilotée par motion.js (initMenuIndicator) :
   apparaît au hover d'un item OU sous l'item actif (page courante / section
   en cours de scroll spy). Cachée sinon. */

/* Burger menu (mobile) */
.site-header__burger {
	display: none;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
}

.burger-line {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.site-header__burger.is-open .burger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__burger.is-open .burger-line:nth-child(2) {
	opacity: 0;
}

.site-header__burger.is-open .burger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Tablette / mobile : burger menu */
@media (max-width: 960px) {
	.site-header__burger {
		display: flex;
	}

	.site-header__nav {
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		background: rgba(10, 10, 15, 0.96);
		-webkit-backdrop-filter: blur(14px) saturate(140%);
		backdrop-filter: blur(14px) saturate(140%);
		border-bottom: 1px solid var(--betsaleel-line);
		flex-direction: column;
		align-items: stretch;
		padding: 1rem;
		transform: translateY(-200%);
		transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
	}

	.site-header__nav.is-open {
		transform: translateY(0);
		pointer-events: auto;
	}

	.primary-menu {
		flex-direction: column;
		gap: 0.25rem;
	}

	.primary-menu a,
	.primary-menu .primary-menu__link {
		padding: 0.875rem 1rem;
		font-size: 1rem;
	}
}

/* -----------------------------------------------------------------
 * 9. FOOTER (inchangé depuis v0.5.0)
 * ----------------------------------------------------------------- */
.site-footer {
	background: var(--betsaleel-bg);
	border-top: 1px solid var(--betsaleel-line);
	padding: 4rem 1.5rem 2rem;
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	position: relative;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--betsaleel-gradient);
	opacity: 0.4;
}

.site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 2.5rem;
	margin-bottom: 3rem;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.site-footer__logo {
	display: inline-block;
	width: fit-content;
}

.site-footer__logo img {
	height: auto;
	width: clamp(91px, 10.4vw, 130px);
	filter: drop-shadow(0 0 20px rgba(62, 187, 208, 0.12));
	transition: transform var(--betsaleel-transition-slow);
}

.site-footer__logo img:hover {
	transform: scale(1.04);
}

.site-footer__tagline {
	margin: 0;
	color: var(--betsaleel-text-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.site-footer__tagline strong {
	color: var(--betsaleel-text);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.site-footer__col h6 {
	color: var(--betsaleel-text);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	margin-bottom: 1.25rem;
	font-family: var(--betsaleel-font-body);
}

.site-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer__col li {
	margin-bottom: 0.625rem;
}

.site-footer__col a {
	color: var(--betsaleel-text-muted);
	text-decoration: none;
	transition: color var(--betsaleel-transition-fast);
	font-size: 0.9375rem;
}

.site-footer__col a:hover {
	color: var(--betsaleel-blue);
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 2rem;
	border-top: 1px solid var(--betsaleel-line);
	flex-wrap: wrap;
	gap: 1rem;
}

/* -----------------------------------------------------------------
 * 10. ANIMATIONS — révélation au scroll + motion design
 *
 * v0.9.7 — Enrichissement du système .reveal + stagger + parallax
 * - .reveal : easing expo-out (cubic-bezier(0.16, 1, 0.3, 1))
 * - Variants : .reveal--fade, .reveal--slide-left/right, .reveal--scale
 * - .motion-stagger : container ; chaque enfant direct apparaît en cascade
 *   (utilisé sur les grilles de cards : enjeux, interventions, approche,
 *   limites, appel, ressources, mission, vision)
 * - [data-parallax] : piloté par GSAP ScrollTrigger (scrub) dans motion.js
 * - prefers-reduced-motion : tout apparaît immédiatement (WCAG 2.3.3)
 * ----------------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Variants de révélation (au choix du HTML) */
.reveal--fade        { transform: none; }
.reveal--slide-left  { transform: translateX(-40px); }
.reveal--slide-right { transform: translateX(40px); }
.reveal--scale       { transform: scale(0.95); }

.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }
.reveal--delay-5 { transition-delay: 500ms; }

/* ----- 10b. Motion stagger -----
 * Container : on ajoute .is-visible quand le container entre dans le viewport
 * (via motion.js). Les enfants directs apparaissent en cascade.
 * Permet l'animation séquentielle des cards/étapes en un seul déclencheur.
 * v0.9.9 : animation de cards plus prononcée et plus lente.
 *   - translateY 20px → 32px (amplitude augmentée, mouvement plus lisible)
 *   - durée 0.6s → 0.8s (transition plus fluide et perceptible)
 *   - will-change ajouté pour GPU compositor
 *   - Stagger par enfant : 80ms → 100ms (cascade plus marquée)
 */
.motion-stagger > * {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
				transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.motion-stagger.is-visible > *:nth-child(1)  { transition-delay: 0ms;   }
.motion-stagger.is-visible > *:nth-child(2)  { transition-delay: 100ms; }
.motion-stagger.is-visible > *:nth-child(3)  { transition-delay: 200ms; }
.motion-stagger.is-visible > *:nth-child(4)  { transition-delay: 300ms; }
.motion-stagger.is-visible > *:nth-child(5)  { transition-delay: 400ms; }
.motion-stagger.is-visible > *:nth-child(6)  { transition-delay: 500ms; }
.motion-stagger.is-visible > *:nth-child(7)  { transition-delay: 600ms; }
.motion-stagger.is-visible > *:nth-child(8)  { transition-delay: 700ms; }
.motion-stagger.is-visible > *:nth-child(n+9) { transition-delay: 800ms; }

.motion-stagger.is-visible > * {
	opacity: 1;
	transform: none;
}

/* ----- 10c. Parallax (piloté par GSAP ScrollTrigger dans motion.js) ----- */
[data-parallax] {
	will-change: transform;
}

/* -----------------------------------------------------------------
 * 11. RESPONSIVE
 * ----------------------------------------------------------------- */
@media (max-width: 768px) {
	.hero {
		height: 220vh; /* v0.8.0 : raccourcit le hero cinématique sur mobile */
	}

	.hero__sticky {
		height: 100vh;
	}

	.site-header__nav {
		gap: 1rem;
	}

	.feature-grid,
	.publics-grid {
		grid-template-columns: 1fr;
	}

	.site-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
		text-align: center;
		align-items: center;
	}

	.site-footer__logo {
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	.hero__ctas {
		flex-direction: column;
		width: 100%;
		max-width: 320px;
		margin: 1rem auto 0;
	}

	.btn-primary,
	.btn-ghost,
	.btn--primary,
	.btn--secondary {
		width: 100%;
	}

	.site-footer__top {
		grid-template-columns: 1fr;
	}

	.site-footer__brand {
		text-align: left;
		align-items: flex-start;
	}

	.site-footer__logo {
		margin: 0;
	}
}

/* -----------------------------------------------------------------
 * 12. WP CORE OVERRIDES
 * ----------------------------------------------------------------- */
.alignwide {
	max-width: 1400px;
}

.alignfull {
	max-width: 100%;
	width: 100%;
}

.wp-block-button__link {
	border-radius: var(--betsaleel-radius-pill) !important;
}

.wp-site-header,
.wp-block-template-part {
	background: transparent !important;
}

.home #headerimg,
.home #header,
.home .wp-block-site-title,
.home .wp-block-site-tagline,
body.home .is-layout-flex.site-header,
body.home header.wp-block-template-part,
body.home div#page > div#header,
body.home div#page > hr {
	display: none !important;
}

.betsaleel-injected-header header.wp-block-template-part:first-of-type {
	display: none !important;
}

.betsaleel-injected-header .wp-site-blocks {
	padding-top: 0 !important;
}

body.betsaleel-injected-header .site-header--injected {
	z-index: 1000;
}

/* -----------------------------------------------------------------
 * 13. A11Y + POLISH
 * ----------------------------------------------------------------- */
.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 9999;
	padding: 0.75rem 1.25rem;
	background: var(--betsaleel-blue);
	color: var(--betsaleel-bg);
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: var(--betsaleel-radius-pill);
	text-decoration: none;
	transition: top 200ms ease;
}

.skip-link:focus {
	top: 1rem;
	color: var(--betsaleel-bg);
	outline: 2px solid var(--betsaleel-yellow);
	outline-offset: 2px;
}

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

:focus-visible {
	outline: 2px solid var(--betsaleel-blue);
	outline-offset: 3px;
	border-radius: 2px;
}

a:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn--primary:focus-visible,
.btn--secondary:focus-visible {
	outline: 2px solid var(--betsaleel-gold);
	outline-offset: 3px;
}

/* prefers-reduced-motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.reveal,
	.motion-stagger > * {
		opacity: 1 !important;
		transform: none !important;
	}

	/* Désactive le will-change (perf) + neutralise le transform JS */
	[data-parallax] {
		transform: none !important;
	}

	.event-card__tag {
		animation: none !important;
	}
}

/* Scrollbar custom (Webkit) */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--betsaleel-bg);
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--betsaleel-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--betsaleel-blue);
}

::selection {
	background: var(--betsaleel-blue);
	color: var(--betsaleel-bg);
}

/* Noise texture super-subtile sur le dark — ambiance Infranex */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.025;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
	mix-blend-mode: screen;
}

/* Section séparateurs (entre Constat / Engagement) */
.section--accent {
	position: relative;
}

.section--accent::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 1px;
	background: var(--betsaleel-gradient);
	opacity: 0.6;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
	outline: 2px solid var(--betsaleel-blue);
	outline-offset: 2px;
	border-color: var(--betsaleel-blue);
}

/* -----------------------------------------------------------------
 * 14. PAGES INTÉRIEURES — hero sobre (v0.6.0+, conservé v0.8.0)
 * -----------------------------------------------------------------
 * Variante hero statique (non cinématique) pour les pages Qui sommes-nous /
 * Contact / Mentions / Politique. Hauteur réduite, pas de 3 badges,
 * pas de 2e CTA. 1 H1 centré, eyebrow + sous-texte + 1 CTA ghost.
 * Note v0.8.0 : la home n'utilise plus .hero--v6 (elle utilise .hero v0.5.9),
 * mais .hero--page reste utilisé sur les autres pages.
 */
.hero--page {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rem 24px 5rem;
	overflow: hidden;
	isolation: isolate;
	background: var(--betsaleel-bg);
}

.hero--page .hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero--page .hero__grid {
	position: absolute;
	inset: 0;
	opacity: 0.4;
}

.hero--page .hero__glow {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1200px;
	height: 900px;
	max-width: 120vw;
	background:
		radial-gradient(60% 60% at 20% 20%, rgba(62, 187, 208, 0.22) 0%, transparent 60%),
		radial-gradient(50% 50% at 80% 30%, rgba(177, 70, 147, 0.15) 0%, transparent 60%),
		radial-gradient(60% 60% at 50% 90%, rgba(58, 191, 240, 0.30) 0%, transparent 60%);
	filter: blur(60px);
	opacity: 0.7;
	pointer-events: none;
}

.hero--page .hero__container {
	max-width: 900px;
	width: 100%;
	text-align: center;
}

.hero--page .hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.hero--page .hero__title {
	font-family: var(--betsaleel-font-display);
	font-size: clamp(2.25rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 800px;
	/* Override le .hero__title général qui a opacity: 0 (cinématique GSAP home).
	   Sur les pages intérieures, GSAP ne s'occupe pas du hero — il doit être
	   visible immédiatement. */
	opacity: 1;
}

.hero--page .hero__title .text-gradient-blue {
	display: inline-block;
}

.hero--page .hero__subtitle {
	font-family: var(--betsaleel-font-body);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	color: var(--betsaleel-text-muted);
	line-height: 1.6;
	max-width: 620px;
	margin: 0;
}

.hero--page .hero__ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.75rem;
	/* Override le .hero__ctas général qui a opacity: 0 (cinématique GSAP home).
	   Sur les pages intérieures, GSAP ne s'occupe pas du hero — il doit être
	   visible immédiatement. */
	opacity: 1;
}

@media (max-width: 768px) {
	.hero--page {
		padding: 6rem 1.25rem 4rem;
		min-height: 60vh;
	}
}

/* -----------------------------------------------------------------
 * 15. PAGE QUI SOMMES-NOUS — cards & layout
 * ----------------------------------------------------------------- */

/* Notre histoire : glass-strong centrée, 3 paragraphes */
.about-history {
	max-width: 760px;
	margin: 0 auto;
	padding: 3rem 2.5rem;
}

.about-history p {
	margin: 0 0 1.25rem 0;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.about-history p:last-child {
	margin-bottom: 0;
}

.about-history strong {
	color: var(--betsaleel-text);
	font-weight: 600;
}

.about-history em {
	color: var(--betsaleel-blue);
	font-style: italic;
}

/* Le bureau : glass-card centrée + tableau */
.bureau-card {
	max-width: 720px;
	margin: 0 auto;
	padding: 2.5rem;
}

.bureau-card__intro {
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 1.5rem 0;
}

.bureau-card__note {
	color: var(--betsaleel-text-dim);
	font-size: 0.9375rem;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.bureau-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem 0;
	font-size: 1rem;
}

.bureau-table thead th {
	text-align: left;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--betsaleel-line-strong);
	color: var(--betsaleel-text-muted);
	font-family: var(--betsaleel-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.bureau-table tbody th,
.bureau-table tbody td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--betsaleel-line);
	text-align: left;
	vertical-align: middle;
}

.bureau-table tbody tr:last-child th,
.bureau-table tbody tr:last-child td {
	border-bottom: 0;
}

.bureau-table tbody th {
	font-weight: 500;
	color: var(--betsaleel-text-muted);
}

.bureau-table tbody td {
	color: var(--betsaleel-text);
}

/* Nos principes / périmètre : glass-strong centrée + liste */
.principles-card,
.perimetre-card {
	max-width: 800px;
	margin: 0 auto;
	padding: 3rem 2.5rem;
}

.principles-card__intro,
.perimetre-card__intro {
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 1.5rem 0;
}

.principles-card__independence,
.perimetre-card__approach {
	margin: 1.5rem 0 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--betsaleel-line);
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.principles-card__independence strong,
.perimetre-card__approach strong {
	color: var(--betsaleel-text);
}

.principles-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem 0;
	counter-reset: principles-counter;
}

.principles-list li {
	position: relative;
	padding: 0.6rem 0 0.6rem 2rem;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
	border-bottom: 1px solid var(--betsaleel-line);
}

.principles-list li:last-child {
	border-bottom: 0;
}

.principles-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--betsaleel-gradient);
	flex-shrink: 0;
}

.principles-list li strong {
	color: var(--betsaleel-text);
	font-weight: 500;
}

/* -----------------------------------------------------------------
 * 16. PAGE CONTACT — cards & layout
 * ----------------------------------------------------------------- */

/* Pourquoi nous contacter : glass-card + liste */
.contact-intro {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem;
}

.contact-reasons {
	list-style: none;
	padding: 0;
	margin: 0;
}

.contact-reasons li {
	position: relative;
	padding: 0.65rem 0 0.65rem 1.75rem;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
	border-bottom: 1px solid var(--betsaleel-line);
}

.contact-reasons li:last-child {
	border-bottom: 0;
}

.contact-reasons li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--betsaleel-blue);
	flex-shrink: 0;
}

.contact-reasons strong {
	color: var(--betsaleel-text);
	font-weight: 500;
}

.contact-reasons--muted {
	color: var(--betsaleel-text-dim);
}

.contact-reasons--muted::before {
	background: var(--betsaleel-text-dim);
	opacity: 0.6;
}

/* Wrapper formulaire — pleine largeur, max 760px */
.contact-form-wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* Coordonnées : glass-strong + grille 3 colonnes */
.coordonnees-card {
	max-width: 960px;
	margin: 0 auto;
	padding: 3rem 2.5rem;
}

.coordonnees-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin: 0 0 2rem 0;
}

@media (max-width: 760px) {
	.coordonnees-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.coordonnees-item__label {
	font-family: var(--betsaleel-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--betsaleel-text-muted);
	margin: 0 0 0.5rem 0;
}

.coordonnees-item__value {
	color: var(--betsaleel-text);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0;
}

.coordonnees-item__value a {
	color: var(--betsaleel-blue);
}

.coordonnees-item__value--muted {
	color: var(--betsaleel-text-dim);
	font-style: italic;
}

.coordonnees-card__note {
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--betsaleel-line);
	color: var(--betsaleel-text-dim);
	font-size: 0.9375rem;
	text-align: center;
}

/* Soutenir : glass-card + tag */
.soutenir-card {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem;
	position: relative;
}

.soutenir-card__tag {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.5rem;
}

.soutenir-card__intro {
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 1.5rem 0;
}

.soutenir-card__contact {
	margin: 1.5rem 0 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--betsaleel-line);
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	text-align: center;
}

.soutenir-card__contact a {
	color: var(--betsaleel-blue);
}

/* Badge "Bientôt disponible" — jaune Betsaleel (usage unique : Phase 2) */
.badge-pill--soon {
	background: rgba(214, 169, 77, 0.10);
	border-color: rgba(214, 169, 77, 0.35);
	color: var(--betsaleel-yellow);
}

.badge-pill--soon::before {
	background: var(--betsaleel-yellow);
}

/* -----------------------------------------------------------------
 * 17. FORMULAIRE DE CONTACT (WPForms) — design system overlay
 * -----------------------------------------------------------------
 * On NE ré-écrit pas les styles WPForms par défaut de manière
 * agressive. On ré-applique nos tokens (--betsaleel-*) sur les
 * classes WPForms pertinentes (conteneur, labels, inputs, bouton,
 * errors) pour qu'ils s'intègrent au dark mode et à la palette
 * Betsaleel.
 */
.wpforms-container {
	background: transparent;
	color: var(--betsaleel-text);
}

/* v0.9.22 : description sous les champs (ex : captcha math) en blanc.
   Avant : WPForms applique une couleur par défaut (souvent gris/muted)
   qui se confond avec le dark mode. Override pour qu'elle soit lisible
   et cohérente avec le reste du design system Betsaleel. */
.wpforms-form .wpforms-field-description,
.wpforms-form .wpforms-field-captcha-math .wpforms-field-description,
.wpforms-form #wpforms-19-field_11-description {
	color: var(--betsaleel-text) !important;
	font-size: 0.8125rem;
	font-style: italic;
	margin: 0.5rem 0 0 0;
	opacity: 0.85;
}

.wpforms-form .wpforms-field {
	padding: 0 0 1.25rem 0;
	margin: 0;
}

.wpforms-form .wpforms-field-label {
	display: block;
	color: var(--betsaleel-text);
	font-family: var(--betsaleel-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
	letter-spacing: 0.01em;
}

.wpforms-form .wpforms-field-label .wpforms-required-label {
	color: var(--betsaleel-violet);
	font-weight: 600;
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="url"],
.wpforms-form input[type="number"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="password"],
.wpforms-form select,
.wpforms-form textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--betsaleel-line);
	border-radius: var(--betsaleel-radius-md);
	color: var(--betsaleel-text);
	font-family: var(--betsaleel-font-body);
	font-size: 1rem;
	padding: 0.75rem 1rem;
	line-height: 1.5;
	transition: border-color var(--betsaleel-transition-fast),
		background var(--betsaleel-transition-fast),
		box-shadow var(--betsaleel-transition-fast);
}

.wpforms-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--betsaleel-text-muted) 50%),
		linear-gradient(135deg, var(--betsaleel-text-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) calc(50% - 2px),
		calc(100% - 12px) calc(50% - 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.wpforms-form textarea {
	min-height: 240px;
	resize: vertical;
}

.wpforms-form input[type="text"]::placeholder,
.wpforms-form input[type="email"]::placeholder,
.wpforms-form textarea::placeholder {
	color: var(--betsaleel-text-dim);
}

.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
	outline: none;
	border-color: var(--betsaleel-blue);
	background: rgba(62, 187, 208, 0.06);
	box-shadow: 0 0 0 3px rgba(62, 187, 208, 0.18);
}

/* Choices (radio / checkbox) */
.wpforms-form .wpforms-field-checkbox ul,
.wpforms-form .wpforms-field-radio ul,
.wpforms-form .wpforms-field-gdpr-checkbox ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.wpforms-form .wpforms-field-checkbox li,
.wpforms-form .wpforms-field-radio li,
.wpforms-form .wpforms-field-gdpr-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.4rem 0;
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.wpforms-form .wpforms-field-checkbox li label,
.wpforms-form .wpforms-field-radio li label,
.wpforms-form .wpforms-field-gdpr-checkbox li label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--betsaleel-text-muted);
	cursor: pointer;
}

.wpforms-form .wpforms-field-checkbox input[type="checkbox"],
.wpforms-form .wpforms-field-radio input[type="radio"],
.wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0 0;
	accent-color: var(--betsaleel-blue);
	flex-shrink: 0;
	cursor: pointer;
}

.wpforms-form .wpforms-field-gdpr-checkbox li a {
	color: var(--betsaleel-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Submit button — réutilise .btn-primary */
.wpforms-form button[type="submit"].wpforms-submit,
.wpforms-form .wpforms-submit {
	background: var(--betsaleel-gradient);
	color: var(--betsaleel-bg);
	border: 1px solid transparent;
	border-radius: var(--betsaleel-radius-pill);
	padding: 0.85rem 1.75rem;
	font-family: var(--betsaleel-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--betsaleel-shadow-glow);
	transition: filter var(--betsaleel-transition-base),
		transform var(--betsaleel-transition-base);
}

.wpforms-form button[type="submit"].wpforms-submit:hover,
.wpforms-form button[type="submit"].wpforms-submit:focus,
.wpforms-form .wpforms-submit:hover,
.wpforms-form .wpforms-submit:focus {
	filter: brightness(1.1);
	transform: translateY(-1px);
	color: var(--betsaleel-bg);
}

.wpforms-form button[type="submit"].wpforms-submit:focus-visible,
.wpforms-form .wpforms-submit:focus-visible {
	outline: 2px solid var(--betsaleel-gold);
	outline-offset: 3px;
}

/* Bouton désactivé pendant l'envoi */
.wpforms-form .wpforms-submit[disabled] {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* Validation errors — violet Betsaleel */
.wpforms-form .wpforms-error {
	color: var(--betsaleel-violet);
	font-size: 0.875rem;
	margin-top: 0.4rem;
	display: block;
}

.wpforms-form .wpforms-field input.wpforms-error,
.wpforms-form .wpforms-field select.wpforms-error,
.wpforms-form .wpforms-field textarea.wpforms-error {
	border-color: var(--betsaleel-violet);
	box-shadow: 0 0 0 3px rgba(177, 70, 147, 0.18);
}

.wpforms-form .wpforms-field-input.has-error {
	border-color: var(--betsaleel-violet);
}

/* Confirmation message après envoi (v0.9.55 polish — dark + bordure gradient)
   v0.9.55b : !important + sélecteur avec body pour gagner contre le CSS WPForms
   qui injecte un style natif vert clair après le nôtre dans la cascade. */
body .wpforms-confirmation-container-full,
body .wpforms-confirmation-container {
	position: relative !important;
	background:
		linear-gradient(135deg, rgba(62, 187, 208, 0.06) 0%, rgba(177, 70, 147, 0.06) 100%),
		var(--betsaleel-bg-elevated) !important;
	border: none !important;
	border-radius: var(--betsaleel-radius-lg) !important;
	color: var(--betsaleel-text) !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
	padding: 2.25rem 2rem !important;
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
	text-align: center;
	box-shadow: var(--betsaleel-shadow-md) !important;
	overflow: hidden;
	animation: betsaleel-confirmation-fadein 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Bordure gradient bleu→violet via pseudo-élément (compatible border-radius) */
body .wpforms-confirmation-container-full::before,
body .wpforms-confirmation-container::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--betsaleel-blue) 0%, var(--betsaleel-violet) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

/* Icône check (SVG) en haut du cadre, dans un cercle gradient */
body .wpforms-confirmation-container-full .betsaleel-confirm-icon,
body .wpforms-confirmation-container .betsaleel-confirm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--betsaleel-blue) 0%, var(--betsaleel-violet) 100%);
	margin: 0 auto 1rem;
	color: var(--betsaleel-bg);
	box-shadow: 0 8px 24px -6px rgba(62, 187, 208, 0.5);
}

/* Sous-titre d'accueil (eyebrow) */
body .wpforms-confirmation-container-full .betsaleel-confirm-eyebrow,
body .wpforms-confirmation-container .betsaleel-confirm-eyebrow {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--betsaleel-blue);
}

/* CTA retour accueil — style btn du site, !important pour gagner contre WPForms
   qui applique un style natif vert sur le bouton dans la confirmation. */
body .wpforms-confirmation-container-full a,
body .wpforms-confirmation-container a,
body .wpforms-confirmation-container-full a.btn,
body .wpforms-confirmation-container a.btn {
	background: var(--betsaleel-gradient) !important;
	background-size: 200% 100% !important;
	background-position: 0% 50% !important;
	color: var(--betsaleel-bg) !important;
	border: 1px solid transparent !important;
	border-radius: var(--betsaleel-radius-pill) !important;
	padding: 0.875rem 1.75rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	margin-top: 1.5rem !important;
	gap: 0.5rem;
	transition: background-position 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

body .wpforms-confirmation-container-full a:hover,
body .wpforms-confirmation-container a:hover,
body .wpforms-confirmation-container-full a.btn:hover,
body .wpforms-confirmation-container a.btn:hover,
body .wpforms-confirmation-container-full a:focus,
body .wpforms-confirmation-container a:focus {
	background-position: 100% 50% !important;
	color: var(--betsaleel-bg) !important;
	transform: translateY(-2px);
	box-shadow: var(--betsaleel-shadow-md);
}

/* Animation fade-in + slight slide-up */
@keyframes betsaleel-confirmation-fadein {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive */
@media (max-width: 600px) {
	body .wpforms-confirmation-container-full,
	body .wpforms-confirmation-container {
		padding: 1.75rem 1.25rem !important;
	}
}

/* Page break & submit footer */
.wpforms-form .wpforms-page-indicator,
.wpforms-form .wpforms-field-pagebreak {
	margin-top: 1rem;
}

/* Honeypot — masquer visuellement mais garder accessible */
.wpforms-form .wpforms-field-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -----------------------------------------------------------------
 * 18. PAGES LÉGALES (Mentions & Politique) — design system overlay
 * -----------------------------------------------------------------
 * Le contenu est rendu via the_content() à partir de HTML structuré
 * (h2/h3/p/ul/table). Le wrapper .legal-content est ajouté par
 * template-legal.php, PAS dans le HTML du contenu.
 *
 * On ré-applique nos tokens (--betsaleel-*) sur ces éléments pour
 * qu'ils s'intègrent au dark mode et à la palette Betsaleel.
 */
.legal-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 3rem 2.5rem;
	font-family: var(--betsaleel-font-body);
	color: var(--betsaleel-text);
}

/* H2 = section principale (Éditeur, Hébergeur, Propriété…) */
.legal-content h2 {
	font-family: var(--betsaleel-font-display);
	color: var(--betsaleel-text);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 3rem 0 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--betsaleel-line);
}

.legal-content > h2:first-child {
	margin-top: 0;
}

/* H3 = sous-section (A. Formulaire, B. Cookies…) */
.legal-content h3 {
	font-family: var(--betsaleel-font-display);
	color: var(--betsaleel-blue);
	font-weight: 600;
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	line-height: 1.3;
	margin: 2rem 0 1rem;
	letter-spacing: -0.005em;
}

/* Paragraphes & listes */
.legal-content p,
.legal-content li {
	font-family: var(--betsaleel-font-body);
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.75;
	margin: 0 0 1rem 0;
}

.legal-content p:last-child,
.legal-content li:last-child {
	margin-bottom: 0;
}

.legal-content strong {
	color: var(--betsaleel-text);
	font-weight: 600;
}

.legal-content ul,
.legal-content ol {
	margin: 0 0 1.25rem 0;
	padding-left: 1.5rem;
}

.legal-content li {
	margin: 0 0 0.4rem 0;
	padding-left: 0.25rem;
}

.legal-content li::marker {
	color: var(--betsaleel-blue);
}

/* Liste de définitions (label : valeur) — pas d'item bullet marqué */
.legal-content ul.legal-defs {
	list-style: none;
	padding-left: 0;
}

.legal-content ul.legal-defs li {
	padding: 0.4rem 0 0.4rem 1.5rem;
	border-bottom: 1px solid var(--betsaleel-line);
	position: relative;
}

.legal-content ul.legal-defs li:last-child {
	border-bottom: none;
}

.legal-content ul.legal-defs li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1rem;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--betsaleel-blue);
	box-shadow: 0 0 8px rgba(62, 187, 208, 0.45);
}

/* Liens */
.legal-content a {
	color: var(--betsaleel-blue);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--betsaleel-transition-fast), border-color var(--betsaleel-transition-fast);
}

.legal-content a:hover,
.legal-content a:focus-visible {
	color: var(--betsaleel-text);
	border-bottom-color: var(--betsaleel-blue);
}

/* Tableaux */
.legal-content table.legal-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0 2rem;
	font-family: var(--betsaleel-font-body);
	font-size: 0.9375rem;
	background: var(--betsaleel-bg-elevated);
	border: 1px solid var(--betsaleel-line);
	border-radius: var(--betsaleel-radius-md);
	overflow: hidden;
}

.legal-content table.legal-table th,
.legal-content table.legal-table td {
	padding: 0.85rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--betsaleel-line);
	vertical-align: top;
}

.legal-content table.legal-table tbody tr:last-child td {
	border-bottom: none;
}

.legal-content table.legal-table th {
	background: rgba(62, 187, 208, 0.12);
	color: var(--betsaleel-blue);
	font-family: var(--betsaleel-font-display);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.01em;
}

.legal-content table.legal-table tbody tr:hover {
	background: rgba(62, 187, 208, 0.05);
}

/* Encadré d'info ℹ️ (ex: Infomaniak) */
.legal-content .legal-note {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: rgba(62, 187, 208, 0.06);
	border-left: 3px solid var(--betsaleel-blue);
	border-radius: 0 var(--betsaleel-radius-sm) var(--betsaleel-radius-sm) 0;
	color: var(--betsaleel-text-muted);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* Mise en avant (ex: "Aucune donnée n'est transmise à des tiers") */
.legal-content .legal-highlight {
	margin: 1.5rem 0;
	padding: 1rem 1.5rem;
	background: var(--betsaleel-gradient-soft);
	border: 1px solid rgba(62, 187, 208, 0.30);
	border-radius: var(--betsaleel-radius-md);
	color: var(--betsaleel-text);
	font-size: 1rem;
	line-height: 1.7;
}

.legal-content .legal-highlight strong {
	color: var(--betsaleel-text);
	font-weight: 700;
}

/* =================================================================
 * UI GLOBALE — scroll indicator (home) + back to top
 * Ajouté en v0.8.1.
 * v0.9.4 (01/09/2026) : reprise du design Eyano Consulting sur le picto
 *   scroll. Design minimaliste : juste le texte "Scroll" + une ligne
 *   verticale en ::after animée (pulse), opacity 0.5, pas de pill ni de
 *   glassmorphism. Choix éditorial Yann 01/09.
 * v0.9.3 (01/09/2026) : picto scroll aux angles adoucis (border-radius
 *   999px → 6px) et seuil étendu jusqu'à la section #pourquoi.
 * - .scroll-indicator : picto "Scroll" centré en bas de page, visible
 *   sur la home tant qu'on n'a pas atteint la section #pourquoi.
 * - .back-to-top : bouton rond flèche vers le haut, en bas à droite,
 *   visible après scroll 2 × innerHeight (200vh) sur la home (= fin
 *   du hero cinématique) ou après 400px de scroll sur les autres
 *   pages. Click → smooth scroll vers le haut.
 * ================================================================= */

.scroll-indicator {
	position: fixed;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	z-index: 80;
	color: var(--betsaleel-text);
	font-family: var(--betsaleel-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	opacity: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.scroll-indicator.is-visible {
	opacity: 0.5;
}

.scroll-indicator:hover {
	opacity: 0.85;
}

.scroll-indicator::after {
	content: '';
	width: 1px;
	height: 40px;
	background: var(--betsaleel-gold);
	box-shadow: 0 0 8px rgba(215, 170, 78, 0.45);
	animation: scroll-indicator-pulse 2s ease-in-out infinite;
	transform-origin: top center;
}

@keyframes scroll-indicator-pulse {
	0%, 100% { opacity: 0.3; transform: scaleY(0.5); }
	50%      { opacity: 1;   transform: scaleY(1); }
}

.back-to-top {
	position: fixed;
	right: 28px;
	bottom: 28px;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(62, 187, 208, 0.18), rgba(177, 70, 147, 0.18));
	border: 1px solid rgba(62, 187, 208, 0.45);
	border-radius: 50%;
	color: var(--betsaleel-blue);
	cursor: pointer;
	z-index: 70;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
}

.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background: linear-gradient(135deg, rgba(62, 187, 208, 0.35), rgba(177, 70, 147, 0.35));
	border-color: var(--betsaleel-blue);
	color: #fff;
	box-shadow: 0 6px 24px rgba(62, 187, 208, 0.35);
	outline: none;
}

.back-to-top:focus-visible {
	outline: 2px solid var(--betsaleel-blue);
	outline-offset: 3px;
}

/* Responsive — rétrécit le wrapper et la typo sur mobile */
@media (max-width: 760px) {
	.legal-content {
		padding: 2rem 1.25rem;
	}

	.legal-content h2 {
		margin-top: 2.25rem;
	}

	.legal-content h3 {
		margin-top: 1.5rem;
	}

	.legal-content p,
	.legal-content li {
		font-size: 1rem;
	}

	.legal-content table.legal-table {
		font-size: 0.875rem;
	}

	.legal-content table.legal-table th,
	.legal-content table.legal-table td {
		padding: 0.7rem 0.75rem;
	}
}

/* -----------------------------------------------------------------
 * 19. WPFORMS OVERRIDES — design system Betsaleel (v0.8.4)
 *
 * Le thème "modern" de WPForms Lite utilise des couleurs sombres
 * pensées pour fond clair. Sur le fond dark de Betsaleel, c'est
 * illisible. On override pour :
 *   - Labels en blanc
 *   - Inputs : fond blanc + texte noir (reste blanc au focus)
 *   - Astérisque obligatoire inline avec le label (pas au-dessus)
 *   - Marges verticales entre les fields réduites
 *   - Bouton submit en gradient Betsaleel
 * ----------------------------------------------------------------- */

/* Container général — texte clair, fond transparent */
.wpforms-container,
.wpforms-container .wpforms-form,
.wpforms-container .wpforms-field-container {
	color: var(--betsaleel-text);
	background: transparent;
}

/* Labels : couleur claire, gras moyen, pas display block redondant */
.wpforms-container .wpforms-form .wpforms-field-label,
.wpforms-field-label {
	color: var(--betsaleel-text) !important;
	font-family: var(--betsaleel-font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.4;
	margin: 0 0 0.5rem 0;
	min-width: 0;
	hyphens: none;
}

/* Astérisque obligatoire : inline avec le label, couleur Betsaleel blue */
.wpforms-required-label,
.wpforms-container .wpforms-form .wpforms-required-label {
	color: var(--betsaleel-blue) !important;
	font-weight: 600;
	margin-left: 0.25rem;
	display: inline !important;
	vertical-align: baseline;
}

/* Marges réduites entre les fields (WPForms modern met ~2rem) */
.wpforms-container .wpforms-form .wpforms-field {
	margin: 0 0 1.25rem 0 !important;
	padding: 0;
}

.wpforms-container .wpforms-field-container {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Inputs (text, email, tel, url, number) : fond blanc + texte noir */
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="number"],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
	background-color: #ffffff !important;
	background-image: none !important;
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--betsaleel-radius-md, 12px);
	padding: 0.75rem 1rem;
	font-family: var(--betsaleel-font-body);
	font-size: 1rem;
	line-height: 1.5;
	min-height: auto;
	height: auto;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Au focus : on GARDE le fond blanc + texte noir, juste un ring bleu */
.wpforms-container .wpforms-form input[type="text"]:focus,
.wpforms-container .wpforms-form input[type="email"]:focus,
.wpforms-container .wpforms-form input[type="url"]:focus,
.wpforms-container .wpforms-form input[type="tel"]:focus,
.wpforms-container .wpforms-form input[type="number"]:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus {
	background-color: #ffffff !important;
	background-image: none !important;
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
	border-color: var(--betsaleel-blue);
	box-shadow: 0 0 0 3px rgba(62, 187, 208, 0.22);
	outline: none;
}

/* Placeholder gris foncé lisible */
.wpforms-container .wpforms-form input::placeholder,
.wpforms-container .wpforms-form textarea::placeholder {
	color: #8a8a93 !important;
	-webkit-text-fill-color: #8a8a93 !important; /* v0.9.55 — fix textarea (Chrome/Safari) */
	opacity: 1;
}

/* Choices.js (select modernisé) — fond blanc + texte noir */
.choices__inner,
.choices__list--dropdown,
.choices__list[aria-expanded] {
	background-color: #ffffff !important;
	color: #1a1a1a !important;
	border-radius: var(--betsaleel-radius-md, 12px);
}

.choices__item--selectable,
.choices__item--selected {
	color: #1a1a1a !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: rgba(62, 187, 208, 0.12) !important;
}

/* Checkboxes / radios — labels et legends en blanc */
.wpforms-container .wpforms-form .wpforms-field-checkbox legend,
.wpforms-container .wpforms-form .wpforms-field-radio legend {
	color: var(--betsaleel-text) !important;
	font-size: 0.9375rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.wpforms-container .wpforms-form .wpforms-field-checkbox .wpforms-field-label-inline,
.wpforms-container .wpforms-form .wpforms-field-radio .wpforms-field-label-inline {
	color: var(--betsaleel-text) !important;
	font-size: 0.9375rem;
	font-weight: 400;
	display: inline;
}

.wpforms-container .wpforms-form .wpforms-field-checkbox ul,
.wpforms-container .wpforms-form .wpforms-field-radio ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Container du bouton submit */
.wpforms-submit-container {
	margin-top: 1.5rem;
	text-align: left;
}

/* Bouton submit : gradient Betsaleel + animation hover */
.wpforms-container .wpforms-form .wpforms-submit,
.wpforms-submit {
	background: var(--betsaleel-gradient) !important;
	background-image: var(--betsaleel-gradient) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px;
	padding: 0.875rem 2rem;
	font-family: var(--betsaleel-font-body);
	font-weight: 600;
	font-size: 1rem;
	min-height: auto;
	height: auto;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	width: auto;
}

.wpforms-container .wpforms-form .wpforms-submit:hover,
.wpforms-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(62, 187, 208, 0.35);
	filter: brightness(1.05);
}

.wpforms-container .wpforms-form .wpforms-submit:active,
.wpforms-submit:active {
	transform: translateY(0);
}

/* Lien dans les checkboxes (politique de confidentialité) en bleu Betsaleel */
.wpforms-container .wpforms-form .wpforms-field-checkbox a,
.wpforms-container .wpforms-form .wpforms-field-radio a {
	color: var(--betsaleel-blue) !important;
	text-decoration: underline;
}

.wpforms-container .wpforms-form .wpforms-field-checkbox a:hover,
.wpforms-container .wpforms-form .wpforms-field-radio a:hover {
	color: var(--betsaleel-violet, #B14693) !important;
}

/* Erreurs de validation en rouge Betsaleel */
.wpforms-container .wpforms-form .wpforms-error,
.wpforms-container .wpforms-form .wpforms-required-label {
	color: var(--betsaleel-blue) !important;
}


/* =================================================================
 * 13. ONEPAGE v0.9.0 — Sections 2 à 13
 * 14 sections ancrées (hors hero cinématique). Design system Betsaleel
 * (glassmorphism, gradient bleu→violet, dark mode, tokens existants).
 * ================================================================= */

/* ----- 13.1. Site-main one-page ----- */
.site-main--onepage {
	padding-top: 0;
}

/* ----- 13.2. Section POURQUOI (Section 2) ----- */
.section-pourquoi__intro {
	max-width: 780px;
	margin: 0 auto 3rem;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.section-pourquoi__intro p {
	color: var(--betsaleel-text-muted);
}

.section-pourquoi__questions {
	max-width: 820px;
	margin: 0 auto 2.5rem;
}

.section-pourquoi__questions-title {
	font-family: var(--betsaleel-font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 600;
	text-align: center;
	margin-bottom: 1.5rem;
	color: var(--betsaleel-text);
}

.pourquoi-questions {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
	counter-reset: pourquoi-q;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pourquoi-questions li {
	counter-increment: pourquoi-q;
	position: relative;
	padding: 1.25rem 1.5rem 1.25rem 4rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: var(--betsaleel-radius-md);
	font-size: 1.0625rem;
	color: var(--betsaleel-text);
	line-height: 1.55;
}

.pourquoi-questions li::before {
	content: counter(pourquoi-q, decimal-leading-zero);
	position: absolute;
	left: 1.25rem;
	top: 1.25rem;
	font-family: var(--betsaleel-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	background: var(--betsaleel-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: 0.05em;
}

.section-pourquoi__conclusion {
	text-align: center;
	font-size: 1.0625rem;
	color: var(--betsaleel-text);
	font-weight: 500;
	margin: 2.5rem 0;
}

.pourquoi-callout {
	max-width: 820px;
	margin: 2.5rem auto 0;
	padding: 2rem 2.25rem;
	border-left: 3px solid var(--betsaleel-blue);
}

.pourquoi-callout p {
	margin: 0;
	font-family: var(--betsaleel-font-display);
	font-size: clamp(1.125rem, 2.2vw, 1.375rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--betsaleel-text);
	font-style: italic;
}

/* ----- 13.3. Section MISSION (Section 3) — 3 piliers ----- */
.section-mission__intro {
	max-width: 780px;
	margin: 0 auto 3rem;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	text-align: center;
}

.section-mission__intro p {
	color: var(--betsaleel-text-muted);
}

.mission-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-top: 1rem;
}

@media (max-width: 900px) {
	.mission-pillars {
		grid-template-columns: 1fr;
	}
}

.mission-pillar {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: 16px;
	padding: 2.25rem 2rem;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.mission-pillar:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	border-color: var(--betsaleel-line-hover);
	transform: translateY(-2px);
}

.mission-pillar__tier {
	font-family: var(--betsaleel-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--betsaleel-text-muted);
	margin-bottom: 0.5rem;
}

.mission-pillar__title {
	font-family: var(--betsaleel-font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	background: var(--betsaleel-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0 0 1rem 0;
	letter-spacing: -0.01em;
}

.mission-pillar__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* ----- 13.4. Section VISION (Section 4) ----- */
.vision-block {
	max-width: 820px;
	margin: 0 auto;
}

.vision-block__lead {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--betsaleel-text);
	margin-bottom: 2.5rem;
}

.vision-block__sub {
	font-family: var(--betsaleel-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--betsaleel-text);
	margin: 2.5rem 0 1.25rem;
}

.vision-block__position {
	font-size: 1.0625rem;
	color: var(--betsaleel-text);
	font-weight: 500;
	margin-bottom: 2.5rem;
}

.vision-extremes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
	.vision-extremes {
		grid-template-columns: 1fr;
	}
}

.vision-extreme {
	padding: 1.5rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: var(--betsaleel-radius-md);
}

.vision-extreme h4 {
	font-family: var(--betsaleel-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 0.625rem;
	color: var(--betsaleel-blue);
}

.vision-extreme p {
	margin: 0;
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.vision-callout {
	padding: 2rem 2.25rem;
	border-left: 3px solid var(--betsaleel-violet);
	margin-top: 2.5rem;
}

.vision-callout p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--betsaleel-text);
	font-style: italic;
}

/* ----- 13.5. Section ENJEUX (Section 5) — 8 cards en carousel -----
 * v0.9.46 : rollback du « Card Beam » v0.9.45 (mal cadré). État
 * fonctionnel et visuel ramené à v0.9.44 : carousel slide horizontal
 * simple, sans beam, sans is-under-beam, démarre à la card 2 (peek
 * card 1 à gauche). La feature « Card Beam » est déplacée sur la
 * section Interventions (section 13.6) où elle prend tout son sens.
 *
 * v0.9.45 : « Card Beam » — un trait vertical lumineux (.enjeux-
 * carousel__beam) était positionné à 1/3 de la largeur du container
 * (gauche). Mauvais cadrage (Yann 03/09) : feature déplacée sur
 * Interventions en v0.9.46. Voir section 13.6.
 *
 * v0.9.42 : refactor — la grille statique (.enjeux-grid) puis le
 * carousel 3D (v0.9.40) sont remplacés par un carousel horizontal
 * propre. Architecture :
 *   .enjeux-carousel       (overflow:hidden, position:relative, drag zone)
 *     .enjeux-carousel__track   (display:flex, translateX via --track-shift)
 *       .enjeux-carousel__item  (flex:0 0 320px, flex-column, card styling)
 *     .enjeux-carousel__chrome  (prev / counter / next, en absolute)
 * Le JS (motion.js → initCarousel) pose une seule CSS custom property
 * --track-shift sur la track, calculée pour centrer l'item actif :
 * shiftX = (containerWidth - itemWidth) / 2 - active * step.
 * Avantages vs 3D par-item : 1 transform au lieu de 8, layout déter-
 * ministe, peek lisible, plus simple à débugger.
 *
 * Note : la classe .enjeux-card est conservée sur l'<article> interne
 * pour réutiliser le styling padding/bordure/hover partagé avec
 * interventions, etc.
 */

.enjeux-carousel {
	position: relative;
	width: 100%;
	height: 460px;
	overflow: hidden;
	cursor: grab;
	/* Touch : laisser le navigateur scroller verticalement, on capte
	   seulement le drag horizontal. Sans pan-y, les mobiles ne pourraient
	   plus défiler la page une fois le doigt sur le carousel. */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.enjeux-carousel:active {
	cursor: grabbing;
}

/* Track : conteneur flex horizontal qui contient les 8 articles côte
   à côte. C'est lui qui reçoit le translateX (via --track-shift posé
   par JS). Pas de padding latéral — le peek vient naturellement du
   débordement des items adjacents au-delà de l'overflow:hidden. */
.enjeux-carousel__track {
	display: flex;
	gap: 1.5rem; /* 24px — doit rester en sync avec motion.js (const gap) */
	height: 100%;
	align-items: center;
	/* v0.9.43 : transition raccourcie à 0.2s pour que le changement
	   de card via flèches/click/clavier soit snappy. */
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
	transform: translateX(var(--track-shift, 0px));
	/* Empêche le navigateur de générer un scroll horizontal si un
	   user-agent stylesheet en ajoute un (defensive). */
	overflow: visible;
}

.enjeux-carousel__item {
	/* Pas de position:absolute — les items sont en flex côte à côte.
	   Largeur fixe, pas de shrink, pour que la track ait une taille
	   déterministe et que le peek soit prévisible. */
	flex: 0 0 320px; /* 320px sur desktop — breakpoint mobile override */
	width: 320px;
	min-height: 380px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	/* Fond / bordure / radius : palette Betsaleel (subtil tint doré +
	   ligne fine). Cohérent avec les cards interventions. */
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: 16px;
	color: var(--betsaleel-text);
	/* Transition légère sur la bordure pour le hover et l'item actif. */
	transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
	/* Empêche la sélection de texte pendant le drag. */
	-webkit-user-drag: none;
}

/* Item actif (centré) : bordure dorée + glow léger pour qu'on sache
   où on en est. Classe posée par motion.js (render → is-active). */
.enjeux-carousel__item.is-active {
	border-color: rgba(215, 170, 78, 0.42);
	box-shadow: 0 12px 32px -16px rgba(215, 170, 78, 0.28),
		0 0 0 1px rgba(215, 170, 78, 0.08) inset;
}

/* L'item actif garde son style gold même au survol : la règle générique
   .enjeux-card:hover (section hover cards, plus bas dans le CSS) a la
   même spécificité que .enjeux-carousel__item.is-active mais est
   déclarée après, donc on force ici avec une spécificité supérieure
   (2 classes + 1 pseudo-classe) pour préserver l'indication visuelle
   de l'item centré. */
.enjeux-carousel__item.is-active:hover {
	border-color: rgba(215, 170, 78, 0.42);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	box-shadow: 0 12px 32px -16px rgba(215, 170, 78, 0.28),
		0 0 0 1px rgba(215, 170, 78, 0.08) inset;
}

/* Hover discret sur les items (interdit en mode drag actif pour ne
   pas interférer avec le drag). */
.enjeux-carousel__item:hover {
	border-color: var(--betsaleel-line-hover);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
}

.enjeux-carousel__item .enjeux-card__icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--betsaleel-radius-sm);
	background: var(--betsaleel-gradient-soft);
	color: var(--betsaleel-blue);
	flex-shrink: 0;
}

.enjeux-carousel__item .enjeux-card__icon svg {
	width: 22px;
	height: 22px;
}

.enjeux-carousel__item .enjeux-card__title {
	font-family: var(--betsaleel-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0;
	color: var(--betsaleel-text);
	letter-spacing: -0.005em;
}

.enjeux-carousel__item .enjeux-card__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* Chrome (prev / counter / next) — posé en bas du container, au-dessus
   de la track. Pas dans la track pour ne pas affecter le layout flex. */
.enjeux-carousel__chrome {
	position: absolute;
	bottom: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.5rem 0.875rem;
	background: rgba(10, 10, 15, 0.55);
	border: 1px solid var(--betsaleel-line);
	border-radius: var(--betsaleel-radius-pill);
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	z-index: 10;
}

.enjeux-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--betsaleel-line);
	border-radius: 50%;
	color: var(--betsaleel-text);
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.enjeux-carousel__btn:hover {
	background: var(--betsaleel-gradient-soft);
	border-color: rgba(62, 187, 208, 0.45);
	color: var(--betsaleel-blue);
}

.enjeux-carousel__btn:active {
	transform: scale(0.94);
}

.enjeux-carousel__btn:focus-visible {
	outline: 2px solid var(--betsaleel-blue);
	outline-offset: 3px;
}

.enjeux-carousel__counter {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	font-family: var(--betsaleel-font-mono);
	font-size: 0.875rem;
	color: var(--betsaleel-text-muted);
	font-variant-numeric: tabular-nums;
	min-width: 3.5rem;
	justify-content: center;
}

.enjeux-carousel__counter-current {
	color: var(--betsaleel-gold);
	font-weight: 600;
}

.enjeux-carousel__counter-sep {
	opacity: 0.5;
}

.enjeux-carousel__counter-total {
	color: var(--betsaleel-text-muted);
}

/* Desktop large : items un peu plus larges, gap un peu plus aéré. */
@media (min-width: 1100px) {
	.enjeux-carousel {
		height: 480px;
	}
	.enjeux-carousel__track {
		gap: 2rem; /* 32px */
	}
	.enjeux-carousel__item {
		flex: 0 0 360px;
		width: 360px;
	}
}

/* Tablette/mobile : items plus petits, gap resserré, hauteur
   adaptée. Le peek reste lisible grâce au overflow:hidden. */
@media (max-width: 768px) {
	.enjeux-carousel {
		height: 500px;
	}
	.enjeux-carousel__track {
		gap: 1rem; /* 16px */
	}
	.enjeux-carousel__item {
		flex: 0 0 min(280px, calc(100vw - 6rem));
		width: min(280px, calc(100vw - 6rem));
		padding: 1.5rem;
		min-height: 360px;
	}
	.enjeux-carousel__chrome {
		gap: 0.75rem;
		padding: 0.4rem 0.625rem;
	}
}

/* prefers-reduced-motion (WCAG 2.3.3) — on désactive complètement le
   carousel : grille statique, pas de transform, pas de boutons
   (motion.js n'initialise pas non plus la mécanique JS, donc pas de
   listeners drag/molette). display:contents sur la track permet aux
   8 articles de devenir enfants directs du grid parent. */
@media (prefers-reduced-motion: reduce) {
	.enjeux-carousel {
		height: auto;
		cursor: default;
		overflow: visible;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 1.5rem;
	}
	.enjeux-carousel__track {
		display: contents; /* les 8 articles deviennent grid items */
	}
	.enjeux-carousel__item {
		flex: none;
		width: 100%;
		min-height: 0;
		transform: none !important;
	}
	.enjeux-carousel__item.is-active {
		/* Pas de distinction visuelle en reduced motion : on n'a plus
		   de notion d'item "actif" dans une grille. */
		border-color: var(--betsaleel-line);
		box-shadow: none;
	}
	.enjeux-carousel__chrome {
		display: none;
	}
}

/* ----- 13.6. Section INTERVENTIONS (Section 6) — 8 thèmes en carousel (style Enjeux) -----
 * v0.9.52 : ROLLBACK du « Card Beam » (v0.9.47 → v0.9.51). Yann a tranché
 * tard le 03/09/2026 : le modèle BL/S® Studio n'a pas tenu ses promesses
 * (mécanique fragile, beam/canvas désalignés, reflows imprévus, code
 * ~1200 lignes pour un effet gadget). On revient au pattern simple
 * style « Enjeux » : track flex horizontal, 1 card centrale + 2 peek
 * latérales, prev/next + counter + clavier (← → Home End). Architecture
 * copiée telle quelle depuis la section 13.5 (juste le préfixe
 * `.interventions-carousel` au lieu de `.enjeux-carousel`).
 *
 * Pas de THREE.js, pas de canvas, pas de beam, pas d'ASCII : retour à
 * la sobriété initiale. Le carousel Interventions est maintenant piloté
 * par initCarousel({ withBeam: false, ... }) depuis motion.js, comme
 * Enjeux. Voir functions.php — l'enqueue threejs-r128 + betsaleel-
 * card-beam est retiré, et card-beam.js est supprimé du bundle.
 *
 * a11y : role="region" + aria-roledescription="carousel" sur le
 * container, role="group" + aria-roledescription="slide" + aria-label
 * "n sur 8 — titre" sur chaque article, aria-live="polite" sur le
 * compteur.
 *
 * prefers-reduced-motion (WCAG 2.3.3) : le carousel est masqué
 * (display:none) et la grille de fallback .interventions-grid (déjà
 * présente dans le DOM, 8 articles avec classe intervention-item--grid)
 * prend le relais. Le CSS de la grille est défini en fin de bloc.
 */

/* Container (copie conforme de .enjeux-carousel, préfixe renommé) */
.interventions-carousel {
	position: relative;
	width: 100%;
	height: 460px;
	overflow: hidden;
	cursor: grab;
	/* Touch : laisser le navigateur scroller verticalement, on capte
	   seulement le drag horizontal. Sans pan-y, les mobiles ne pourraient
	   plus défiler la page une fois le doigt sur le carousel. */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.interventions-carousel:active {
	cursor: grabbing;
}

/* Track : conteneur flex horizontal qui contient les 8 articles côte
   à côte. C'est lui qui reçoit le translateX (via --track-shift posé
   par JS). Pas de padding latéral — le peek vient naturellement du
   débordement des items adjacents au-delà de l'overflow:hidden. */
.interventions-carousel__track {
	display: flex;
	gap: 1.5rem; /* 24px — doit rester en sync avec motion.js (readMetrics) */
	height: 100%;
	align-items: center;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
	transform: translateX(var(--track-shift, 0px));
	overflow: visible;
}

.interventions-carousel__item {
	flex: 0 0 320px;
	width: 320px;
	min-height: 380px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: 16px;
	color: var(--betsaleel-text);
	transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
	-webkit-user-drag: none;
}

/* Item actif (centré) : bordure dorée + glow léger pour qu'on sache
   où on en est. Classe posée par motion.js (render → is-active). */
.interventions-carousel__item.is-active {
	border-color: rgba(215, 170, 78, 0.42);
	box-shadow: 0 12px 32px -16px rgba(215, 170, 78, 0.28),
		0 0 0 1px rgba(215, 170, 78, 0.08) inset;
}

.interventions-carousel__item.is-active:hover {
	border-color: rgba(215, 170, 78, 0.42);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	box-shadow: 0 12px 32px -16px rgba(215, 170, 78, 0.28),
		0 0 0 1px rgba(215, 170, 78, 0.08) inset;
}

.interventions-carousel__item:hover {
	border-color: var(--betsaleel-line-hover);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
}

.interventions-carousel__item .intervention-item__icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--betsaleel-radius-sm);
	background: var(--betsaleel-gradient-soft);
	color: var(--betsaleel-blue);
	flex-shrink: 0;
}

.interventions-carousel__item .intervention-item__icon svg {
	width: 22px;
	height: 22px;
}

.interventions-carousel__item .intervention-item__title {
	font-family: var(--betsaleel-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0;
	color: var(--betsaleel-text);
	letter-spacing: -0.005em;
}

.interventions-carousel__item .intervention-item__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* Chrome (prev / counter / next) — posé en bas du container, au-dessus
   de la track. */
.interventions-carousel__chrome {
	position: absolute;
	bottom: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.5rem 0.875rem;
	background: rgba(10, 10, 15, 0.55);
	border: 1px solid var(--betsaleel-line);
	border-radius: var(--betsaleel-radius-pill);
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	z-index: 10;
}

.interventions-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--betsaleel-line);
	border-radius: 50%;
	color: var(--betsaleel-text);
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.interventions-carousel__btn:hover {
	background: var(--betsaleel-gradient-soft);
	border-color: rgba(62, 187, 208, 0.45);
	color: var(--betsaleel-blue);
}

.interventions-carousel__btn:active {
	transform: scale(0.94);
}

.interventions-carousel__btn:focus-visible {
	outline: 2px solid var(--betsaleel-blue);
	outline-offset: 3px;
}

.interventions-carousel__counter {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	font-family: var(--betsaleel-font-mono);
	font-size: 0.875rem;
	color: var(--betsaleel-text-muted);
	font-variant-numeric: tabular-nums;
	min-width: 3.5rem;
	justify-content: center;
}

.interventions-carousel__counter-current {
	color: var(--betsaleel-gold);
	font-weight: 600;
}

.interventions-carousel__counter-sep {
	opacity: 0.5;
}

.interventions-carousel__counter-total {
	color: var(--betsaleel-text-muted);
}

/* Desktop large : items un peu plus larges, gap un peu plus aéré. */
@media (min-width: 1100px) {
	.interventions-carousel {
		height: 480px;
	}
	.interventions-carousel__track {
		gap: 2rem;
	}
	.interventions-carousel__item {
		flex: 0 0 360px;
		width: 360px;
	}
}

/* Tablette/mobile : items plus petits, gap resserré. */
@media (max-width: 768px) {
	.interventions-carousel {
		height: 500px;
	}
	.interventions-carousel__track {
		gap: 1rem;
	}
	.interventions-carousel__item {
		flex: 0 0 min(280px, calc(100vw - 6rem));
		width: min(280px, calc(100vw - 6rem));
		padding: 1.5rem;
		min-height: 360px;
	}
	.interventions-carousel__chrome {
		gap: 0.75rem;
		padding: 0.4rem 0.625rem;
	}
}

/* prefers-reduced-motion (WCAG 2.3.3) : le carousel est masqué
   (display:none), la grille de fallback .interventions-grid (déjà
   dans le DOM, 8 articles avec classe intervention-item--grid)
   prend le relais. motion.js early-return évite d'initialiser la
   mécanique JS. L'utilisateur voit une grille sobre, sans
   animation. */
@media (prefers-reduced-motion: reduce) {
	.interventions-carousel {
		display: none;
	}
	.interventions-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
		margin: 0 auto;
	}
	@media (max-width: 900px) {
		.interventions-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
	@media (max-width: 540px) {
		.interventions-grid {
			grid-template-columns: 1fr;
		}
	}
}

/* ----- Grille de fallback (.interventions-grid) — utilisée en reduced motion -----
 * 4×2 desktop, 2×4 tablette, 1×8 mobile. Les 8 articles qu'elle
 * contient ont la classe .intervention-item--grid et réutilisent
 * .intervention-item__* (icon/title/desc) défini ci-dessus pour le
 * carousel — c'est le même look, juste présenté en grille statique. */
.interventions-grid {
	display: none; /* masqué en mode normal — le carousel prend le relais */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0 auto;
}

.intervention-item--grid {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: 16px;
	color: var(--betsaleel-text);
}

.intervention-item--grid .intervention-item__icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--betsaleel-radius-sm);
	background: var(--betsaleel-gradient-soft);
	color: var(--betsaleel-blue);
	flex-shrink: 0;
}

.intervention-item--grid .intervention-item__icon svg {
	width: 22px;
	height: 22px;
}

.intervention-item--grid .intervention-item__title {
	font-family: var(--betsaleel-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0;
	color: var(--betsaleel-text);
	letter-spacing: -0.005em;
}

.intervention-item--grid .intervention-item__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* CTA final de la section (bouton "Échanger sur votre besoin") */
.interventions-cta {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}


/* ----- 13.7. Section APPROCHE (Section 7) — 4 étapes + 8 principes ----- */
.approche-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 3rem;
	counter-reset: approche;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

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

@media (max-width: 560px) {
	.approche-steps {
		grid-template-columns: 1fr;
	}
}

.approche-step {
	text-align: center;
	padding: 2rem 1.25rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: 16px;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.approche-step:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	border-color: var(--betsaleel-line-hover);
	transform: translateY(-2px);
}

.approche-step__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--betsaleel-gradient);
	color: var(--betsaleel-bg);
}

.approche-step__icon svg {
	width: 28px;
	height: 28px;
}

.approche-step__tier {
	font-family: var(--betsaleel-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--betsaleel-gold);
	margin-bottom: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.approche-step__tier::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--betsaleel-gold);
	box-shadow: 0 0 6px rgba(215, 170, 78, 0.55);
	flex-shrink: 0;
}

.approche-step__title {
	font-family: var(--betsaleel-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: var(--betsaleel-text);
}

.approche-step__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

.approche-principles-title {
	font-family: var(--betsaleel-font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 600;
	text-align: center;
	margin: 3rem 0 1.5rem;
	color: var(--betsaleel-text);
}

.approche-principes {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	max-width: 920px;
	margin: 0 auto;
}

@media (max-width: 700px) {
	.approche-principes {
		grid-template-columns: 1fr;
	}
}

.approche-principe {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1.25rem;
	background: rgba(62, 187, 208, 0.06);
	border: 1px solid rgba(62, 187, 208, 0.18);
	border-radius: var(--betsaleel-radius-pill);
	font-size: 0.9375rem;
	color: var(--betsaleel-text);
	line-height: 1.4;
}

.approche-principe::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: var(--betsaleel-gradient);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat;
}

/* ----- 13.8. Section LIMITES (Section 8) — 8 non-délégations (style éditorial v0.9.38) -----
 * Approche « commandements » : liste verticale, une ligne par item,
 * séparées par des traits or, "NON" en colonne gauche (typo display, gold)
 * avec filet vertical plein, texte aligné à droite. Solennel, pastoral.
 *
 * v0.9.38 : traits bordures + filet vertical remontés en opacité
 * (rgba 0.22 → 0.55 / dégradé doux → trait plein) car quasi-invisibles
 * sur fond #0A0A0F (rapporté par Yann après v0.9.37). */
.section-limites__intro {
	max-width: 780px;
	margin: 0 auto 2.5rem;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	text-align: center;
}

.limites-edito {
	list-style: none;
	counter-reset: limite;
	padding: 0;
	margin: 0 auto 2.5rem;
	max-width: 820px;
}

.limites-edito__item {
	display: grid;
	grid-template-columns: 110px 1fr;
	align-items: center;
	gap: 2rem;
	padding: 1.75rem 0;
	border-top: 1px solid rgba(214, 169, 77, 0.55);
	transition: border-top-color 0.4s ease, padding-left 0.4s ease;
}

.limites-edito__item:last-child {
	border-bottom: 1px solid rgba(214, 169, 77, 0.55);
}

.limites-edito__item:hover {
	border-top-color: var(--betsaleel-gold);
	padding-left: 0.5rem;
}

.limites-edito__no {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--betsaleel-gold);
	position: relative;
	padding-right: 1.5rem;
	line-height: 1;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				filter 0.4s ease;
}

.limites-edito__cross {
	display: block;
	filter: drop-shadow(0 0 4px rgba(214, 169, 77, 0.35));
}

.limites-edito__no::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 100%;
	background: rgba(214, 169, 77, 0.70);
	border-radius: 1px;
}

.limites-edito__item:hover .limites-edito__no {
	transform: scale(1.12);
	filter: drop-shadow(0 0 8px rgba(214, 169, 77, 0.55));
}

.limites-edito__text {
	font-family: var(--betsaleel-font-display);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--betsaleel-text);
	letter-spacing: -0.005em;
}

@media (max-width: 600px) {
	.limites-edito__item {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 1.25rem 0;
	}
	.limites-edito__no {
		justify-content: flex-start;
		padding-right: 0;
	}
	.limites-edito__no::after {
		display: none;
	}
}

.limites-callout {
	max-width: 820px;
	margin: 2.5rem auto 0;
	padding: 2rem 2.25rem;
	border-left: 3px solid var(--betsaleel-yellow);
}

.limites-callout p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--betsaleel-text);
	font-style: italic;
}

/* ----- 13.9. Section APROPOS (Section 9) ----- */
.apropos-block {
	max-width: 820px;
	margin: 0 auto;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.apropos-block p {
	color: var(--betsaleel-text-muted);
}

.apropos-block h3 {
	font-family: var(--betsaleel-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--betsaleel-text);
	margin: 2rem 0 0.75rem;
}

.apropos-respect {
	list-style: none;
	padding: 0;
	margin: 1rem 0 1.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 1.5rem;
}

@media (max-width: 600px) {
	.apropos-respect {
		grid-template-columns: 1fr;
	}
}

.apropos-respect li {
	color: var(--betsaleel-text);
	font-size: 0.9375rem;
	padding-left: 1.25rem;
	position: relative;
}

.apropos-respect li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--betsaleel-blue);
}

.apropos-signature {
	font-family: var(--betsaleel-font-display);
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	background: var(--betsaleel-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	margin-top: 0.5rem;
}

/* ----- 13.10. Section NOM (Section 10) ----- */
.nom-betsaleel {
	max-width: 820px;
	margin: 0 auto;
	padding: 2.5rem;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.nom-betsaleel p {
	color: var(--betsaleel-text-muted);
}

.nom-betsaleel h3 {
	font-family: var(--betsaleel-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--betsaleel-text);
	margin: 1.75rem 0 1rem;
}

.nom-rencontre {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nom-rencontre li {
	padding: 0.5rem 1rem;
	background: rgba(62, 187, 208, 0.08);
	border: 1px solid rgba(62, 187, 208, 0.25);
	border-radius: var(--betsaleel-radius-pill);
	color: var(--betsaleel-text);
	font-size: 0.9375rem;
}

/* v0.9.12 : sous-sections ajoutées — nom hébreu + symboles du logo */
.nom-hebreu,
.nom-symboles {
	max-width: 820px;
	margin: 2.5rem auto 0;
	padding: 2.5rem;
	border-radius: var(--betsaleel-radius-lg);
}

.nom-hebreu h3,
.nom-symboles h3 {
	font-family: var(--betsaleel-font-display);
	font-size: 1.5rem;
	color: var(--betsaleel-text);
	margin: 0 0 1.25rem;
}

.nom-hebreu p,
.nom-symboles p {
	color: var(--betsaleel-text-muted);
	line-height: 1.7;
	margin: 0 0 1rem;
}

/* Le mot hébreu en grand, avec police sérif et ltr→rtl mix */
.nom-hebreu__mot {
	font-family: 'Frank Ruhl Libre', 'Times New Roman', 'David', serif;
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 700;
	color: var(--betsaleel-blue);
	text-align: center;
	margin: 0 0 0.5rem;
	letter-spacing: 0.05em;
	line-height: 1.2;
}

.nom-hebreu__transliteration {
	text-align: center;
	color: var(--betsaleel-text-dim);
	font-size: 0.9375rem;
	font-style: italic;
	margin: 0 0 1.5rem;
}

/* Grille des 2 symboles */
.nom-symboles__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 1.5rem 0;
}

.symbole-item {
	padding: 1.5rem;
	background: rgba(10, 10, 15, 0.45);
	border: 1px solid rgba(62, 187, 208, 0.18);
	border-radius: var(--betsaleel-radius-md);
	color: var(--betsaleel-blue);
}

.symbole-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 130px;
	margin-bottom: 1rem;
	color: var(--betsaleel-blue);
}

.symbole-item h4 {
	font-family: var(--betsaleel-font-display);
	font-size: 1.125rem;
	color: var(--betsaleel-text);
	margin: 0 0 0.75rem;
	text-align: center;
}

.symbole-item p {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0;
}

/* Citation biblique */
.nom-citation {
	margin: 2rem 0 1.5rem;
	padding: 1.5rem 1.75rem;
	border-left: 3px solid var(--betsaleel-blue);
	background: rgba(62, 187, 208, 0.06);
	border-radius: 0 var(--betsaleel-radius-md) var(--betsaleel-radius-md) 0;
}

.nom-citation p {
	color: var(--betsaleel-text);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 0.75rem;
}

.nom-citation cite {
	color: var(--betsaleel-text-dim);
	font-size: 0.875rem;
	font-style: normal;
	letter-spacing: 0.04em;
}

.nom-conclusion {
	text-align: center;
	color: var(--betsaleel-text);
	font-size: 1.0625rem;
	font-style: italic;
	margin: 1.5rem 0 0;
}

@media (max-width: 720px) {
	.nom-symboles__grid {
		grid-template-columns: 1fr;
	}
	.nom-hebreu,
	.nom-symboles {
		padding: 1.75rem 1.5rem;
	}
}

/* ----- 13.11. Section RESSOURCES (Section 11) — 2 cards ----- */
.section-ressources__intro {
	max-width: 780px;
	margin: 0 auto 3rem;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	text-align: center;
}

.ressources-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

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

.ressource-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: 16px;
	padding: 2rem;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ressource-card:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	border-color: var(--betsaleel-line-hover);
	transform: translateY(-2px);
}

.ressource-card__tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--betsaleel-gradient-soft);
	border: 1px solid var(--betsaleel-line);
	border-radius: var(--betsaleel-radius-pill);
	font-family: var(--betsaleel-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--betsaleel-blue);
	width: fit-content;
}

.ressource-card__title {
	font-family: var(--betsaleel-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0;
	color: var(--betsaleel-text);
}

.ressource-card__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

.ressource-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--betsaleel-blue);
	font-family: var(--betsaleel-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	margin-top: 0.5rem;
	transition: color var(--betsaleel-transition-fast);
}

.ressource-card__link:hover {
	color: var(--betsaleel-violet);
}

.ressource-card__icon {
	display: inline-flex;
	align-items: center;
	transition: transform var(--betsaleel-transition-fast);
}

.ressource-card__link:hover .ressource-card__icon {
	transform: translate(2px, -2px);
}

.ressources-note {
	max-width: 820px;
	margin: 2rem auto 0;
	font-size: 0.875rem;
	color: var(--betsaleel-text-dim);
	font-style: italic;
	text-align: center;
}

/* v0.9.14 : carte "Bientôt une newsletter" (placeholder, cards Regard retirées) */
.ressources-empty {
	max-width: 720px;
	margin: 2rem auto 0;
	padding: 3rem 2rem;
	border-radius: var(--betsaleel-radius-lg);
	text-align: center;
}

.ressources-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: rgba(62, 187, 208, 0.12);
	border: 1px solid rgba(62, 187, 208, 0.30);
	color: var(--betsaleel-blue);
}

.ressources-empty__title {
	font-family: var(--betsaleel-font-display);
	font-size: 1.375rem;
	color: var(--betsaleel-text);
	margin: 0 0 1rem;
}

.ressources-empty__desc {
	color: var(--betsaleel-text-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin: 0 0 1.25rem;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

.ressources-empty__hint {
	display: inline-block;
	margin: 0;
	padding: 0.4rem 0.9rem;
	background: rgba(62, 187, 208, 0.08);
	border: 1px solid rgba(62, 187, 208, 0.20);
	border-radius: var(--betsaleel-radius-pill);
	color: var(--betsaleel-blue);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

/* ----- 13.11b. Section NEWSLETTER PROMO (v0.9.54) -----
 * Remplace l'ancien bloc .ressources-empty (placeholder "Bientôt
 * une newsletter") par une vraie section active avec intro, 4
 * rubriques détaillées, et CTA d'inscription. La cible du CTA
 * (/inscription-newsletter/) sera créée par un form WPForms dédié
 * (form 20) qui enregistre dans la base Notion "Inscrits".
 * Palette : bleu Betsaleel primary, accent gold sur le CTA hover. */
.newsletter-promo {
	max-width: 720px;
	margin: 0 auto;
	padding: 2.5rem 2rem 2rem;
	text-align: center;
	background: linear-gradient(180deg, rgba(62, 187, 208, 0.04), rgba(177, 70, 147, 0.04));
	border: 1px solid rgba(62, 187, 208, 0.16);
	position: relative; /* v0.9.55 — nécessaire pour le glow effect (border-glow) */
}

/* v0.9.55 — bordure lumineuse animée sur la card newsletter-promo.
   Effet "point lumineux qui tourne sur le contour" via SVG overlay :
   un <rect> avec stroke-dasharray crée un segment visible (la "tache
   lumineuse"), et l'animation stroke-dashoffset le fait tourner autour
   du périmètre du rect. Le pathLength="100" normalise la longueur pour
   que l'animation soit parfaitement cyclique.
   Fiabilité : pas de mask-composite exotique, pas de conic-gradient,
   supporté partout (Chrome, Firefox, Safari depuis 2014).
   a11y : pointer-events:none + respect prefers-reduced-motion.
   (position:relative du parent .newsletter-promo défini plus haut) */
.newsletter-promo__border-glow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

.newsletter-promo__border-glow rect {
	fill: none;
	stroke: url(#newsletter-glow-gradient);
	stroke-width: 0.5;       /* v0.9.55 Yann — trait plus fin (était 1.5) */
	stroke-linecap: round;
	stroke-dasharray: 12 88;  /* 12% visible, 88% invisible : point plus discret */
	stroke-dashoffset: 0;
	animation: newsletter-border-rotate 4s linear infinite;
}

@keyframes newsletter-border-rotate {
	to { stroke-dashoffset: -100; }
}

@media (prefers-reduced-motion: reduce) {
	.newsletter-promo__border-glow rect {
		animation: none;
	}
}

.newsletter-promo__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--betsaleel-gradient-soft);
	color: var(--betsaleel-blue);
	margin: 0 auto 1rem;
}

.newsletter-promo__title {
	font-family: var(--betsaleel-font-display);
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	font-weight: 600;
	color: var(--betsaleel-text);
	margin: 0 0 0.6rem;
	letter-spacing: -0.01em;
}

.newsletter-promo__desc {
	font-size: 1.0625rem;
	color: var(--betsaleel-text-muted);
	line-height: 1.6;
	margin: 0 0 1.5rem;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

.newsletter-promo__rubriques {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.875rem 1.5rem;
	text-align: left;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.newsletter-promo__rubriques li {
	font-size: 0.9375rem;
	color: var(--betsaleel-text-muted);
	line-height: 1.5;
	padding-left: 1.5rem;
	position: relative;
}

.newsletter-promo__rubriques li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--betsaleel-gold);
	font-weight: 700;
}

.newsletter-promo__rubriques li strong {
	color: var(--betsaleel-text);
}

.newsletter-promo__engagement {
	font-size: 0.875rem;
	color: var(--betsaleel-text-dim);
	font-style: italic;
	margin: 0 0 1.5rem;
}

.newsletter-promo__cta {
	margin: 0 0 1rem;
}

.newsletter-promo__cta .btn--primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	background: var(--betsaleel-blue);
	color: var(--betsaleel-bg);
	border: none;
	border-radius: var(--betsaleel-radius-pill);
	box-shadow: 0 8px 24px -8px rgba(62, 187, 208, 0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.newsletter-promo__cta .btn--primary:hover {
	background: #4cc8db;
	transform: translateY(-1px);
	box-shadow: 0 12px 32px -8px rgba(62, 187, 208, 0.7);
}

.newsletter-promo__cta .btn--primary svg {
	width: 18px;
	height: 18px;
	stroke-width: 2.5;
}

.newsletter-promo__reassurance {
	font-size: 0.8125rem;
	color: var(--betsaleel-text-dim);
	margin: 0;
}

@media (max-width: 640px) {
	.newsletter-promo {
		padding: 2rem 1.25rem 1.5rem;
	}
	.newsletter-promo__rubriques {
		grid-template-columns: 1fr;
	}
}

/* v0.9.14 : effet hover des cards (pattern Framer "cards-folder")
   - card : translateY(-6px) + ombre + bordure plus visible
   - icon SVG en haut : scale(1.1) + rotate légère
   - overlay gradient bleu en haut à droite (apparaît au hover)
   - flèche → en bas à droite (apparaît au hover)
   Compatible avec : .enjeux-card, .intervention-item, .approche-step,
                    .approche-principe, .appel-public, .mission-pillar,
                    .vision-extreme, .symbole-item.
   (v0.9.37 : .limite-item retirée — remplacée par .limites-edito__item
    avec son propre hover éditorial, voir section 13.8) */
.enjeux-card,
.intervention-item,
.approche-step,
.approche-principe,
.appel-public,
.mission-pillar,
.vision-extreme,
.symbole-item {
	position: relative;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
				border-color 0.3s ease,
				background 0.3s ease,
				box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}

/* v0.9.20 : flèche ::after retirée (Yann 02/09, choix éditorial).
   L'effet de hover reste (translateY, shadow bleu, bordure plus visible)
   mais sans la flèche en haut à droite. */

.enjeux-card:hover,
.intervention-item:hover,
.approche-step:hover,
.approche-principe:hover,
.appel-public:hover,
.mission-pillar:hover,
.vision-extreme:hover,
.symbole-item:hover {
	transform: translateY(-6px);
	border-color: rgba(62, 187, 208, 0.45);
	background: rgba(10, 10, 15, 0.55);
	box-shadow: 0 18px 40px -16px rgba(62, 187, 208, 0.35),
				0 8px 20px -8px rgba(0, 0, 0, 0.4);
}

.enjeux-card:hover::after,
.intervention-item:hover::after,
.approche-step:hover::after,
.approche-principe:hover::after,
.appel-public:hover::after,
.mission-pillar:hover::after,
.vision-extreme:hover::after,
.symbole-item:hover::after {
	opacity: 1;
	transform: translate(0, 0);
}

/* Zoom + tilt des icônes SVG en haut des cards au hover */
.enjeux-card__icon,
.intervention-item__icon,
.approche-step__icon,
.approche-step__numeral,
.appel-public__icon,
.mission-pillar__icon,
.vision-extreme__icon {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				color 0.3s ease;
}

.enjeux-card:hover .enjeux-card__icon,
.intervention-item:hover .intervention-item__icon,
.approche-step:hover .approche-step__icon,
.approche-step:hover .approche-step__numeral,
.appel-public:hover .appel-public__icon,
.mission-pillar:hover .mission-pillar__icon,
.vision-extreme:hover .vision-extreme__icon {
	transform: scale(1.12) rotate(-3deg);
	color: var(--betsaleel-blue);
}

@media (prefers-reduced-motion: reduce) {
	.enjeux-card:hover,
	.intervention-item:hover,
	.approche-step:hover,
	.approche-principe:hover,
	.appel-public:hover,
	.mission-pillar:hover,
	.vision-extreme:hover,
	.symbole-item:hover {
		transform: none;
	}
	.enjeux-card:hover .enjeux-card__icon,
	.intervention-item:hover .intervention-item__icon,
	.approche-step:hover .approche-step__icon,
	.approche-step:hover .approche-step__numeral,
	.appel-public:hover .appel-public__icon,
	.mission-pillar:hover .mission-pillar__icon,
	.vision-extreme:hover .vision-extreme__icon {
		transform: none;
	}
}

/* ----- 13.12. Section APPEL (Section 12) — 8 publics ----- */
.section-appel__intro {
	max-width: 780px;
	margin: 0 auto 2.5rem;
	color: var(--betsaleel-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	text-align: center;
}

.appel-publics-title {
	font-family: var(--betsaleel-font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 600;
	text-align: center;
	margin: 0 0 1.5rem;
	color: var(--betsaleel-text);
}

.appel-publics {
	list-style: none;
	padding: 0;
	margin: 0 0 2.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}

.appel-public {
	padding: 0.75rem 1.5rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
	border: 1px solid var(--betsaleel-line);
	border-radius: var(--betsaleel-radius-pill);
	color: var(--betsaleel-text);
	font-size: 0.9375rem;
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.appel-public:hover {
	background: var(--betsaleel-gradient-soft);
	border-color: var(--betsaleel-blue);
	color: var(--betsaleel-blue);
	transform: translateY(-1px);
}

.appel-cta {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

/* ----- 13.13. Section CONTACT (Section 13) — form block ----- */
.contact-form-block {
	max-width: 720px;
	margin: 0 auto;
}

.contact-form-block__note {
	margin-top: 2rem;
	font-size: 0.875rem;
	color: var(--betsaleel-text-dim);
	text-align: center;
	font-style: italic;
}

.contact-form-block__note a {
	color: var(--betsaleel-blue);
	text-decoration: underline;
}

.contact-form-block__note a:hover {
	color: var(--betsaleel-violet);
}

/* ----- 13.14. Bouton CTA (v0.9.0) -----
   Conçu à l'origine pour le menu header (.primary-menu), utilisé
   désormais aussi par la section Newsletter de la home (CTA "S'inscrire
   gratuitement"). On retire le préfixe .primary-menu pour rendre la
   classe .nav-cta réutilisable hors du menu. Le margin-left (qui servait
   à espacer le CTA du dernier item de menu) ne s'applique qu'au menu. */
.nav-cta,
.primary-menu .nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	border-radius: var(--betsaleel-radius-pill);
	background: var(--betsaleel-gradient) !important;
	color: var(--betsaleel-bg) !important;
	font-family: var(--betsaleel-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: filter var(--betsaleel-transition-fast), transform var(--betsaleel-transition-fast);
	box-shadow: var(--betsaleel-shadow-glow);
}

.primary-menu .nav-cta {
	margin-left: 0.5rem;
}

.nav-cta:hover,
.nav-cta:focus-visible,
.primary-menu .nav-cta:hover,
.primary-menu .nav-cta:focus-visible {
	filter: brightness(1.1);
	transform: translateY(-1px);
	color: var(--betsaleel-bg) !important;
	outline: none;
}

/* Footer v0.9.6 : 2 colonnes (brand+tagline / liens), sans mention cookies,
   sans bloc adresse ni phrase loi 1901 (antispam + choix éditorial Yann) */
.site-footer__col.site-footer__brand {
	gap: 1rem;
}

.site-footer__copyright {
	margin: 0;
	font-size: 0.875rem;
	color: var(--betsaleel-text-dim);
}

.copyright-symbol {
	color: var(--betsaleel-gold);
	font-weight: 600;
	margin-right: 0.15em;
}
}

@media (max-width: 960px) {
	.site-footer__top {
		grid-template-columns: 1fr 1fr;
	}
	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.site-footer__top {
		grid-template-columns: 1fr;
	}
	.site-footer__brand {
		grid-column: auto;
	}
}

/* Mobile : adapter le bouton CTA menu dans la nav mobile (glassmorphism) */
@media (max-width: 960px) {
	.primary-menu .nav-cta {
		margin: 0.5rem 0 0;
		padding: 0.875rem 1.5rem;
		font-size: 1rem;
		justify-content: center;
	}
}

/* ----- 13.15. PAGES LÉGALES — bouton anti-scrapping (v0.9.53) -----
 * Le Directeur de la publication (Yann TANGUY) est encodé en base64 dans
 * data-name-b64 et révélé au clic par motion.js → initRevealName().
 * Le bouton « Voir » est accessible (button + aria-controls + aria-expanded)
 * et adopte le style Betsaleel sobre. Le hint « (cliquez pour afficher) »
 * est aria-hidden pour ne pas polluer les lecteurs d'écran. */
.legal-content .js-reveal-name {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	margin-left: 0.25rem;
	background: rgba(215, 170, 78, 0.08);
	border: 1px solid rgba(215, 170, 78, 0.32);
	border-radius: 999px;
	color: var(--betsaleel-gold);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.legal-content .js-reveal-name:hover {
	background: rgba(215, 170, 78, 0.16);
	border-color: rgba(215, 170, 78, 0.6);
	color: #E8C465;
}

.legal-content .js-reveal-name:focus-visible {
	outline: 2px solid var(--betsaleel-gold);
	outline-offset: 3px;
}

.legal-content .legal-reveal-hint {
	font-size: 0.8125rem;
	color: var(--betsaleel-text-dim);
	font-style: italic;
	margin-left: 0.5rem;
}

.legal-content #dir-pub-name {
	font-weight: 500;
	color: var(--betsaleel-text);
}