/* ==========================================================================
   TIENS DS-COM — styles du thème
   Valeurs reprises de la maquette Figma « SITE INSTITUTIONNEL » (cadre 1440 px).
   ========================================================================== */

/* ---------- Jetons de design (variables Figma) ---------- */
:root {
	--green: #17884b;          /* color/spring green/31 — Jewel */
	--green-2: #1aa856;        /* color/spring green/38 */
	--green-dark: #074a2e;     /* vert foncé TIENS (fond des couvertures magazine dans Figma) */
	--green-text: #12733f;     /* vert un peu plus foncé pour les petits textes : contraste 5,9:1 */
	--green-10: rgba(23, 136, 75, 0.1);
	--green-5: rgba(23, 136, 75, 0.05);
	--ink: #101828;            /* color/azure/11 — Ebony */
	--ink-2: #1e2939;          /* color/azure/17 */
	--slate: #0f172a;
	--text: #364153;           /* color/azure/27 — Oxford Blue */
	--muted: #4a5565;          /* color/azure/34 — River Bed */
	--pale: #6a7282;           /* color/azure/46 — Pale Sky */
	--soft: #99a1af;
	--black: #0a0a0a;          /* Cod Gray */
	--grey-50: #f9fafb;        /* color/grey/98 */
	--grey-100: #f3f4f6;       /* color/grey/96 */
	--grey-200: #e5e7eb;       /* color/grey/91 */
	--dot: #868e8b;            /* points de carrousel inactifs : contraste 3,4:1 */
	--white: #fff;

	--font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--container: 1152px;
	--gutter: clamp(24px, 5vw, 64px); /* marge gauche/droite : 24 px sur téléphone, 64 px sur ordinateur */
	--header-h: 80px;

	--radius: 16px;
	--radius-lg: 17px;
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	--h2: clamp(28px, 1.2rem + 2.5vw, 48px); /* 28 px téléphone → 38 px tablette → 48 px ordinateur */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--text);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
button { font: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	padding: 12px 16px; background: var(--green); color: var(--white); font-weight: 700;
}
.skip-link:focus { top: 16px; }

.container {
	width: min(var(--container), 100% - 2 * var(--gutter));
	margin-inline: auto;
}

.icon { display: inline-block; flex-shrink: 0; }
.icon--down { transform: rotate(90deg); }

/* ---------- Typographie ---------- */
.h2 {
	font-size: var(--h2);
	line-height: 1.25;              /* 48 / 60 */
	font-weight: 700;
	color: var(--ink);
	text-wrap: balance;
}
.h2--tight { line-height: 1; }
.line { display: block; }
.nowrap { white-space: nowrap; }

/* Retours à la ligne : titres équilibrés, pas de mot seul en fin de paragraphe. */
h1, h2, h3, .h2, .h3, .eyebrow { text-wrap: balance; }
p, li, dd, dt, blockquote { text-wrap: pretty; }
.h2--upper { text-transform: uppercase; letter-spacing: -1.2px; text-wrap: wrap; }

.h3 { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--ink); }
.h3--lg { font-size: 24px; line-height: 32px; }
.h3--md { font-size: 20px; line-height: 25px; }

.eyebrow {
	display: inline-block;
	padding-left: 20px;
	border-left: 4px solid var(--green);
	font-size: 14px; line-height: 20px; font-weight: 700;
	letter-spacing: 0.7px; text-transform: uppercase;
	color: var(--green-text);
}
.eyebrow--tight { padding-left: 16px; }

.pill {
	display: inline-block;
	padding: 8px 24px;
	border-radius: 999px;
	background: var(--green-10);
	font-size: 14px; line-height: 20px; font-weight: 700;
	letter-spacing: 0.7px; text-transform: uppercase;
	color: var(--green-text);
}

.prose { display: grid; gap: 16px; font-size: 18px; line-height: 27px; color: var(--text); }
.prose--lg { font-size: 20px; line-height: 30px; }
.prose--muted { color: var(--muted); }

.bar-title {
	display: flex; align-items: center; gap: 12px;
	font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink);
}
.bar-title::before { content: ""; width: 48px; height: 4px; border-radius: 999px; background: var(--green); }

/* ---------- Boutons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	padding: 16px 32px;
	font-size: 16px; line-height: 24px; font-weight: 700;
	text-align: center;
	transition: background-color .2s, color .2s, transform .2s;
}
.btn--primary { background: var(--green); color: var(--white); }
.btn--primary:hover { background: #127040; }
.btn--lg { padding: 20px 40px; font-size: 18px; line-height: 28px; }
.btn--outline { border: 2px solid var(--white); color: var(--white); padding: 18px 40px; }
.btn--outline:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Cartes ---------- */
.card {
	background: var(--white);
	border: 1px solid var(--grey-100);
	border-radius: var(--radius);
}
.card--shadow { box-shadow: var(--shadow-lg); }

.icon-tile {
	display: grid; place-items: center;
	width: 56px; height: 56px; flex-shrink: 0;
	border-radius: 14px;
	background: var(--green-10);
}
.icon-tile--sm { width: 48px; height: 48px; }

.feature { display: flex; align-items: flex-start; gap: 16px; padding: 24px; }
.feature > div { display: grid; gap: 8px; padding-top: 4px; }
.feature p { font-size: 14px; line-height: 21px; color: var(--muted); }

.photo-card {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; }

.blur-spot { position: absolute; pointer-events: none; filter: blur(32px); border-radius: 999px; }

/* ---------- Sections génériques ---------- */
.section { position: relative; padding-block: 64px; overflow: hidden; }
.section--grey { background: var(--grey-50); }
.section-head { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: 64px; }
.section-head__lead { max-width: 768px; padding-top: 8px; font-size: 18px; line-height: 27px; color: var(--text); }
.section-head--split {
	grid-template-columns: minmax(0, 672px) auto;
	justify-content: space-between; align-items: end;
	justify-items: start; text-align: left;
}
.section-head--split > div { display: grid; gap: 16px; justify-items: start; }
.section-head--split .section-head__lead { padding-top: 0; }

/* ==========================================================================
   En-tête
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 50;
	height: var(--header-h);
	background: var(--white);
	box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.admin-bar .site-header { top: 32px; }
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 100%;
	width: min(var(--container), 100% - 2 * var(--gutter));
	margin-inline: auto;
}
.site-header__logo img { width: 70px; height: auto; }
.site-header__nav { display: flex; align-items: center; gap: 32px; }

.main-menu { display: flex; align-items: center; gap: 30px; }
.main-menu > li { position: relative; }
.main-menu a {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 15px; line-height: 22.5px; font-weight: 500;
	color: var(--text);
	transition: color .2s;
}
.main-menu a:hover { color: var(--black); }
/* Onglet actif : vert et souligné. */
.main-menu .current-menu-item > a,
.main-menu .current-menu-ancestor > a { color: var(--green-text); font-weight: 700; }
.main-menu > .current-menu-item > a,
.main-menu > .current-menu-ancestor > a {
	text-decoration: underline 2px var(--green);
	text-underline-offset: 8px;
}
.submenu-toggle { display: none; }
.main-menu .menu-item-has-children > a::after {
	content: ""; width: 8px; height: 5px;
	background: url("../img/chevron-down.svg") no-repeat center / contain;
	transition: transform .2s;
}
.main-menu .sub-menu {
	position: absolute; left: -16px; top: calc(100% + 16px);
	min-width: 220px; padding: 8px;
	background: var(--white);
	border: 1px solid var(--grey-100);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.main-menu .sub-menu::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
/* Dernier sous-menu : ouvert vers la gauche pour ne pas sortir de l'écran. */
.main-menu > li:last-child > .sub-menu { left: auto; right: -16px; }
.main-menu .sub-menu a { display: block; padding: 8px 12px; border-radius: 8px; }
.main-menu .sub-menu a:hover { background: var(--grey-50); color: var(--green); }
.main-menu > li:hover > .sub-menu,
.main-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-menu > li:hover > a::after { transform: rotate(180deg); }

.lang-switch { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22.5px; color: var(--soft); }
.lang-switch a { font-weight: 500; }
.lang-switch .is-current { color: #000; }

.site-header__toggle { display: none; }

/* ==========================================================================
   Hero — carrousel vidéo
   ========================================================================== */
/* Le hero prend le format des vidéos (16:9) : elles s'affichent en entier, sans être coupées. */
.hero {
	position: relative;
	background: var(--ink);
	color: var(--white);
}
.hero__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	/* Jamais plus haut que la fenêtre : le hero et ses points restent visibles sans défiler.
	   Sur les écrans assez hauts, la vidéo s'affiche entière ; sinon elle est très légèrement rognée en haut et en bas. */
	max-height: calc(100svh - var(--header-h) - var(--adminbar-h, 0px));
	width: 100%;
	overflow: hidden;
}
.admin-bar { --adminbar-h: 32px; }
.hero__panel { display: none; }
.hero__slide {
	position: absolute; inset: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform .9s cubic-bezier(0.77, 0, 0.18, 1);
	will-change: transform;
}
.hero__slide.is-active { visibility: visible; transform: none; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__dots {
	position: absolute; left: 0; right: 0; bottom: 32px; z-index: 2;
	display: flex; justify-content: center; gap: 8px;
}
.hero__dot {
	width: 10px; height: 10px; padding: 0;
	border: 0; border-radius: 5px;
	background: rgba(255, 255, 255, 0.5);
	transition: width .3s, background-color .3s;
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.8); }
.hero__dot.is-active { width: 24px; background: var(--white); }
/* Bouton son : en bas à droite, aligné sur la marge du site. */
.hero__sound {
	position: absolute; z-index: 3;
	right: max(var(--gutter), (100% - var(--container)) / 2); bottom: 20px;
	display: grid; place-items: center;
	width: 44px; height: 44px; padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
	color: var(--white);
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.hero__sound:hover { background: var(--green); transform: scale(1.06); }
.hero__sound:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.hero__sound-on, .hero__sound[aria-pressed="true"] .hero__sound-off { display: none; }
.hero__sound[aria-pressed="true"] .hero__sound-on { display: block; }
.hero__gradient {
	position: absolute; inset: 0;
	pointer-events: none;
	/* Dégradé limité au coin bas-gauche : le reste de la vidéo n'est pas assombri. */
	background:
		radial-gradient(130% 110% at 0% 100%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0) 68%);
}
.hero__slide--right .hero__gradient {
	background:
		radial-gradient(130% 110% at 100% 100%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0) 68%);
}
/* Bandeau bas : le texte occupe le coin inférieur, comme dans la maquette Figma. */
.hero__content {
	position: absolute; left: 0; right: 0;
	bottom: clamp(64px, 11vh, 96px);
	display: grid; justify-items: start; gap: 12px;
	width: min(var(--container), 100% - 2 * var(--gutter));
	margin-inline: auto;
}
.hero__content .hero__title, .hero__content .hero__text { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
/* Texte qui s'efface : après quelques secondes, il laisse la vidéo seule ;
   il revient quand la souris bouge sur la vidéo (pas au simple défilement), au clavier et à la vidéo suivante. */
.hero__content, .hero__gradient { transition: opacity 1.2s var(--ease-out, ease); }
.hero__slide.is-faded .hero__content,
.hero__slide.is-faded .hero__gradient { opacity: 0; }
.hero__stage.is-peek .hero__slide.is-faded .hero__content,
.hero__stage.is-peek .hero__slide.is-faded .hero__gradient,
.hero__slide.is-faded:focus-within .hero__content,
.hero__slide.is-faded:focus-within .hero__gradient { opacity: 1; transition-duration: .4s; }
.hero__slide--right .hero__content { justify-items: end; text-align: right; }
.hero__slide--right .hero__title,
.hero__slide--right .hero__text { margin-left: auto; }
.hero__title { max-width: 680px; font-size: clamp(30px, 1.2rem + 2.2vw, 48px); line-height: 1.25; font-weight: 700; text-wrap: pretty; } /* 48 px max, comme dans Figma */
.hero__text { max-width: 400px; font-size: 18px; line-height: 27px; color: rgba(255, 255, 255, 0.85); }
.hero__content .btn { margin-top: 12px; }

/* ==========================================================================
   La dynamique que nous construisons
   ========================================================================== */
.dynamique__grid {
	display: grid;
	grid-template-columns: 645fr 443fr;
	gap: 64px;
	align-items: center;
}
.dynamique__photo { height: 784px; }
.dynamique__text { display: grid; justify-items: start; gap: 16px; }
.dynamique__text .eyebrow { margin-top: 2.5px; }
.dynamique__text .prose { padding-top: 16px; }
.dynamique__text .btn { margin-top: 24px; }

/* ---------- Chiffres clés ---------- */
.stats { padding-bottom: 80px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 64px; }
.stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: 12px; text-align: center; }
.stats__value { font-size: 72px; line-height: 72px; font-weight: 700; color: var(--green); }
.stats__label {
	font-size: 16px; line-height: 24px; font-weight: 500;
	letter-spacing: 0.4px; text-transform: uppercase;
	color: var(--muted);
}

/* ==========================================================================
   S'appuyer sur la force d'un groupe global
   ========================================================================== */
.groupe {
	padding-block: 44px 40px;
	background: linear-gradient(to bottom, var(--white), rgba(249, 250, 251, 0.5));
}
.groupe__glow {
	top: 79px; right: 128px; width: 568px; height: 781px; border-radius: 0;
	background: linear-gradient(126deg, var(--green-5), rgba(23, 136, 75, 0));
}
.groupe__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 568px;
	gap: 76px;
}
.groupe__text { display: flex; flex-direction: column; align-items: flex-start; }
.groupe__text .h2 { margin-top: 28px; max-width: 515px; }
.groupe__text .prose { margin-top: 39px; gap: 8px; max-width: 524px; }
.groupe__features {
	display: grid; grid-template-columns: 296px 1fr; row-gap: 32px;
	margin-top: 36px;
}
.groupe__features li {
	display: flex; align-items: center; gap: 11px;
	font-size: 16px; line-height: 20px; font-weight: 500; color: var(--text);
}
.round-icon {
	display: grid; place-items: center;
	width: 45px; height: 45px; flex-shrink: 0;
	border: 1px solid var(--white);
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.groupe__quote {
	margin-top: 32px; padding: 16px 0 28px 28px;
	max-width: 535px;
	border-left: 4px solid var(--green);
	font-size: 20px; line-height: 30px; font-weight: 700; color: var(--ink);
}
.groupe__photo { height: 784px; margin-top: 32px; }

/* ==========================================================================
   Leadership
   ========================================================================== */
.leadership { padding-block: 80px 64px; }
.leadership__glow--tr { top: 0; right: 0; width: 33.3%; height: 33.3%; background: linear-gradient(143deg, var(--green-5), rgba(23, 136, 75, 0)); }
.leadership__glow--bl { bottom: 0; left: 0; width: 25%; height: 25%; background: linear-gradient(37deg, var(--green-5), rgba(23, 136, 75, 0)); }
.leadership .section-head { margin-bottom: 80px; }
.leadership__grid {
	display: grid;
	grid-template-columns: 410px minmax(0, 678px);
	justify-content: start;
	gap: 64px;
	align-items: center;
}
.leader-card { position: relative; }
.leader-card__glow {
	position: absolute; inset: -4px;
	border-radius: 24px;
	background: linear-gradient(to right, var(--green), var(--green-2));
	opacity: 0.25;
	filter: blur(8px);
}
.leader-card__inner {
	position: relative;
	min-height: 600px;
	overflow: hidden;
	border-radius: 24px;
	box-shadow: var(--shadow-xl);
}
.leader-card__inner > img { width: 100%; height: 832px; object-fit: cover; }
.leader-card__caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: grid; gap: 16px; padding: 32px;
}
.leader-card__name { font-size: 30px; line-height: 36px; font-weight: 700; color: var(--white); }
.leader-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.leader-card__tags li {
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	font-size: 12px; line-height: 16px; font-weight: 700;
	letter-spacing: 0.3px; text-transform: uppercase; color: var(--green-text);
}
.leadership__text { display: grid; gap: 40px; }
.leadership__text .prose { gap: 24px; }
.leadership__quote {
	position: relative;
	padding: 32px 24px 32px 36px;
	border-left: 4px solid var(--green);
	border-radius: 0 16px 16px 0;
	background: linear-gradient(to right, var(--green-5), rgba(23, 136, 75, 0));
	font-size: 24px; line-height: 36px; font-weight: 700; font-style: italic; color: var(--ink);
}
.leadership__quote-icon { position: absolute; left: 12px; top: 24px; }
.leadership__quote p { position: relative; }
.leadership .bar-title { margin-top: -8px; }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: -8px; }
.role { display: flex; align-items: flex-start; gap: 12px; padding: 24px 20px; min-height: 102px; font-size: 16px; line-height: 22px; }
.role > span:last-child { padding-top: 8px; }

/* ==========================================================================
   Le centre TIENS DS-COM
   ========================================================================== */
.centre { padding-block: 80px 114px; background: rgba(6, 78, 59, 0.05); }
.centre__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 536px);
	gap: 48px;
}
.centre__text .h2 { margin-top: 20px; }
.centre__text .prose { margin-top: 34px; gap: 30px; max-width: 614px; }
.centre__photo { height: 564px; border-radius: var(--radius); }
.centre__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 80px; }
/* Carte d'espace : icône et titre côte à côte, texte sur toute la largeur (pas de vide sous l'icône). */
.espace { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.espace__head { display: flex; align-items: center; gap: 14px; }
.espace__head .h3 { font-size: 18px; line-height: 24px; }
.espace p { font-size: 14px; line-height: 22px; color: var(--muted); }

/* ==========================================================================
   Produits, qualité & sécurité
   ========================================================================== */
.produits { background: linear-gradient(to bottom, var(--white), var(--grey-50)); }
.produits__glow--tr { top: 80px; right: 80px; width: 288px; height: 288px; background: var(--green-10); opacity: .3; }
.produits__glow--bl { bottom: 80px; left: 80px; width: 384px; height: 384px; background: var(--green-5); opacity: .3; }
.produits__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 536px; gap: 80px; }
.produits__text { padding-top: 22px; }
.produits__text .h2 { margin-top: 15px; }
.produits__text .prose { margin-top: 26px; gap: 30px; padding-left: 5px; }
.produits__points { display: grid; gap: 24px; margin-top: 52px; padding-left: 4px; }
.produits__points .feature { padding: 24px; }
.produits__photo { height: 804px; border-radius: var(--radius); }

/* ==========================================================================
   Carrousel magazines
   ========================================================================== */
.magazines { padding-block: 56px 8px; overflow: visible; }
.mag-carousel__track { display: grid; }
.mag-card {
	grid-area: 1 / 1;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	min-height: 600px;
	overflow: hidden;
	border: 1px solid #f1f5f9;
	border-radius: 32px;
	background: var(--white);
	box-shadow: var(--shadow-xl);
	opacity: 0; visibility: hidden;
	transition: opacity .4s ease-in-out, visibility .4s;
}
.mag-card.is-active { opacity: 1; visibility: visible; }
.mag-card__cover { position: relative; overflow: hidden; background: var(--green-dark); }
.mag-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* Couverture en paysage : colonne image élargie (7/12), photo pleine ; le magazine reste entier. */
.mag-card--paysage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mag-card--paysage .mag-card__img { object-fit: cover; }
.mag-card--paysage .mag-card__backdrop { display: none; }
.mag-card--paysage .mag-card__body { padding: 56px 48px; }
.mag-card--paysage .mag-card__title { font-size: clamp(26px, 0.9rem + 1.3vw, 34px); }
/* Couverture entière, sans recadrage ; le fond flouté évite les bandes vides. */
.mag-card__img { object-fit: contain; }
.mag-card__backdrop { object-fit: cover; filter: blur(28px) brightness(0.7); transform: scale(1.2); }
.mag-card__body {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	gap: 28px;
	padding: 72px 64px;
}
.mag-card__title {
	padding-bottom: 8px;
	font-size: clamp(28px, 1rem + 1.6vw, 40px); line-height: 1.2; font-weight: 700;
	letter-spacing: -0.8px; color: var(--slate);
	text-wrap: balance;
}
.mag-card__text {
	padding-bottom: 16px;
	font-family: Inter, var(--font);
	font-size: 20px; line-height: 32.5px; font-weight: 300;
	color: var(--muted);
}
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.dots__dot {
	width: 10px; height: 10px; padding: 0;
	border: 0; border-radius: 5px;
	background: var(--dot);
	transition: width .3s, background-color .3s;
}
.dots__dot.is-active { width: 24px; background: var(--green); }

/* ==========================================================================
   Quatre piliers / Événements (cartes image + texte)
   ========================================================================== */
.piliers__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.media-card {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-lg);
}
.media-card__img { position: relative; display: block; height: 256px; overflow: hidden; }
.media-card__img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.media-card:hover .media-card__img > img { transform: scale(1.04); }
.media-card__img::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0));
}
/* Dégradés propres à certaines cartes des piliers (Figma 268:787 et 268:815). */
.piliers__grid > li:nth-child(2) .media-card__img::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 20.9%, rgba(0, 0, 0, 0) 38.1%); }
.piliers__grid > li:nth-child(4) .media-card__img::after { background: linear-gradient(26deg, rgba(0, 0, 0, 0.7) 25.7%, rgba(0, 0, 0, 0.3) 39.4%, rgba(0, 0, 0, 0) 50.7%); }
.media-card__badge {
	position: absolute; left: 24px; bottom: 24px; z-index: 1;
	display: grid; place-items: center;
	width: 64px; height: 64px;
	background: var(--green);
}
.media-card__body { display: grid; gap: 16px; padding: 32px; }
.media-card__body p { font-size: 16px; line-height: 24px; color: var(--text); }

.evenements__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.event .media-card__img::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0)); }
.event .media-card__body { padding: 24px 24px 29px; }
.event h3 a:hover { color: var(--green); }
.event__meta { display: grid; gap: 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.event__meta li { display: flex; align-items: center; gap: 8px; }
.event { position: relative; }
.event__badge {
	position: absolute; top: 16px; left: 16px; z-index: 2;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.92);
	font-size: 12px; line-height: 16px; font-weight: 700;
	letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink);
}
.event--past .media-card__img > img { filter: grayscale(0.35); }

/* ==========================================================================
   Partenaires
   ========================================================================== */
.partenaires__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.tile {
	position: relative;
	height: 320px;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0));
}
.tile__title {
	position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1;
	font-size: 24px; line-height: 30px; font-weight: 700; color: var(--white);
}

/* ==========================================================================
   Appel à l'action
   ========================================================================== */
.cta {
	position: relative;
	overflow: hidden;
	padding-top: 64px;
	background: linear-gradient(161deg, var(--ink) 0%, var(--ink-2) 50%, #000 100%);
	color: var(--white);
	text-align: center;
}
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }
.cta__inner { position: relative; display: grid; justify-items: center; }
.cta .h2 { max-width: 760px; color: var(--white); }
.cta p { max-width: 900px; margin-top: 60px; font-size: 20px; line-height: 30px; color: rgba(255, 255, 255, 0.9); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; margin-top: 50px; }
.cta__bar { width: 128px; height: 4px; margin-top: 66px; background: var(--green); }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer { border-top: 1px solid var(--grey-200); background: var(--white); }
.site-footer .container { padding-block: 80px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.site-footer__brand { display: grid; gap: 23px; justify-items: start; align-content: start; }
/* Même logo complet que l'en-tête (la maquette n'avait que le pied, sans « TIENS »). */
.site-footer__brand > img { width: 102px; height: auto; }
.site-footer__brand p { font-size: 14px; line-height: 22.75px; color: var(--muted); max-width: 240px; }
.socials { display: flex; gap: 16px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; background: var(--grey-100); transition: background-color .2s; }
.socials a:hover { background: var(--grey-200); }
.site-footer__col { display: grid; gap: 16px; align-content: start; }
.site-footer__col h3 { font-size: 18px; line-height: 27px; font-weight: 700; color: #000; }
.site-footer__col ul { display: grid; gap: 12px; }
.site-footer__col a, .legal-menu a { font-size: 14px; line-height: 20px; color: var(--muted); transition: color .2s; }
.site-footer__col a:hover, .legal-menu a:hover { color: var(--green); }
.site-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 48px; padding-top: 33px;
	border-top: 1px solid var(--grey-200);
	font-size: 14px; line-height: 20px; color: var(--pale);
}
.legal-menu { display: flex; flex-wrap: wrap; gap: 24px; }
.legal-menu a { color: var(--pale); }
.site-footer__col .menu-text { font-size: 14px; line-height: 20px; color: var(--muted); }

/* ---------- Page par défaut ---------- */
.page-default { padding-block: 80px; min-height: 50vh; }
.page-default h1 { font-size: var(--h2); line-height: 1.25; color: var(--ink); margin-bottom: 24px; }
.entry-content { max-width: 760px; font-size: 17px; line-height: 28px; color: var(--text); }
.entry-content > * + * { margin-top: 16px; }
.entry-content h2 { margin-top: 40px; font-size: 24px; line-height: 32px; color: var(--ink); }
.entry-content a { color: var(--green-text); text-decoration: underline; }

/* ==========================================================================
   Page Modèle (Figma 307:438)
   ========================================================================== */

/* Haut de page : photo plein écran, texte en bas à gauche (Figma 307:712). */
.page-hero {
	position: relative; overflow: hidden;
	display: grid; align-items: end;
	min-height: clamp(440px, 43vw, 620px);
	background: var(--ink);
	color: var(--white);
}
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
}
.page-hero__content {
	position: relative; z-index: 1;
	display: grid; justify-items: start; gap: 12px;
	padding-block: 120px 128px;
}
.page-hero__title { max-width: 768px; font-size: clamp(32px, 1.2rem + 2.5vw, 48px); line-height: 1.25; font-weight: 700; }
.page-hero__text { max-width: 768px; font-size: 18px; line-height: 27px; color: rgba(255, 255, 255, 0.8); }
.page-hero .btn { margin-top: 12px; }
.page-hero__content > * { animation: tdc-rise .9s var(--ease-out) both; }
.page-hero__content > :nth-child(1) { animation-delay: .15s; }
.page-hero__content > :nth-child(2) { animation-delay: .3s; }
.page-hero__content > :nth-child(3) { animation-delay: .45s; }

/* Notre approche (Figma 367:301) : photo 645 px, texte 443 px, 64 px entre les deux. */
/* Marge basse : laisse l'ombre de la photo s'afficher en entier. */
.approche { padding-block: 64px 56px; scroll-margin-top: calc(var(--header-h) + var(--adminbar-h, 0px) - 24px); }
.approche__grid {
	display: grid;
	grid-template-columns: minmax(0, 645fr) minmax(0, 443fr);
	gap: 64px; align-items: center;
}
.approche__photo { aspect-ratio: 645 / 372; }
.approche__photo img { object-position: 78% 50%; }
.approche__text .h2 { margin-top: 12px; }
.approche__text .prose { margin-top: 16px; gap: 27px; }

/* Les piliers du modèle (Figma 318:614) : cartes 564 × 252 px. */
/* Les trois points de la maquette (Figma 314:200) sont retirés : l'espace suffit à séparer. */
/* Marge basse : l'ombre des cartes du bas n'est plus coupée par la section suivante. */
.principes { padding-block: 40px 48px; }
.principes .section-head { margin-bottom: 80px; }
.principes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
.principe {
	min-height: 252px; padding: 32px;
	border-radius: var(--radius);
	background: var(--grey-50);
	box-shadow: var(--shadow-lg);
}
.principe__head { display: flex; align-items: flex-start; gap: 16px; }
/* Le titre occupe toute la largeur : pas de retour à la ligne inutile. */
.principe__head .h3 { padding-top: 3px; text-wrap: wrap; }
.principe__icon { width: 64px; height: 64px; }
.principe__text, .principe__list { margin-top: 32px; max-width: 470px; font-size: 16px; line-height: 26px; color: var(--text); }
.principe__list { padding-left: 24px; list-style: disc; }

/* Comment ça fonctionne (Figma 367:300) : frise des 4 étapes et 4 photos. */
.fonctionnement { padding-block: 26px 80px; }
.fonctionnement .section-head { margin-bottom: 80px; }
.fonctionnement__grid {
	display: grid;
	grid-template-columns: minmax(0, 608fr) minmax(0, 467fr);
	column-gap: 70px; align-items: start;
}
.etapes { position: relative; display: grid; gap: 48px; margin: 0; padding: 0; list-style: none; }
/* Frise : trait fin gris, et trait vert qui se dessine au défilement (--progress, main.js). */
.etapes::before, .etapes::after {
	content: ""; position: absolute; left: 31.5px; top: 0; bottom: 0;
	width: 1px;
}
.etapes::before { background: var(--grey-200); }
.etapes::after {
	background: var(--green);
	transform: scaleY(var(--progress, 1)); transform-origin: top;
}
.etape { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.etape__icon {
	position: relative; z-index: 1;
	display: grid; place-items: center;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--green);
	filter: drop-shadow(0 10px 7.5px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}
.etape__card {
	min-height: 172px; padding: 32px;
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.etape__card .h3 { color: var(--slate); }
.etape__card p { text-wrap: wrap; margin-top: 8px; font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: -0.44px; color: #314158; }
.fonctionnement__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 29px; }
.fonctionnement__photo { overflow: hidden; aspect-ratio: 219 / 388; border-radius: var(--radius-lg); }
.fonctionnement__photo img { width: 100%; height: 100%; object-fit: cover; }
.fonctionnement__photo:nth-child(1) img { object-position: 79% 50%; }
.fonctionnement__photo:nth-child(3) img { object-position: 75% 50%; }
/* Deuxième colonne décalée vers le bas, comme dans la maquette. */
.fonctionnement__photo:nth-child(even) { margin-top: 25px; margin-bottom: -25px; }

/* Un modèle basé sur l'engagement (Figma 366:173). */
.engagement { position: relative; overflow: hidden; padding-block: 107px 106px; background: #142234; color: var(--white); text-align: center; }
.engagement__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 90%; }
.engagement::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(20, 34, 52, 0.72); }
.engagement__inner { position: relative; z-index: 2; display: grid; justify-items: center; }
.engagement .h2 { color: var(--white); }
.engagement__lead { max-width: 442px; margin-top: 8px; font-size: 18px; line-height: 28px; letter-spacing: -0.44px; }
.engagement__quote {
	width: min(832px, 100%); margin-top: 27px;
	padding: 32px 32px 32px 36px;
	border-left: 4px solid var(--green);
	border-radius: 14px;
	background: var(--white);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 20px; line-height: 28px; font-style: italic; letter-spacing: -0.45px; color: var(--ink-2);
}

@media (max-width: 900px) {
	.approche__grid, .fonctionnement__grid { grid-template-columns: 1fr; gap: 40px; }
	.principes__grid { grid-template-columns: 1fr; gap: 24px; }
	.principe { min-height: 0; }
	.fonctionnement__photos { width: min(560px, 100%); margin-inline: auto; margin-top: 56px; }
	.principes .section-head, .fonctionnement .section-head { margin-bottom: 48px; }
	.approche { padding-bottom: 48px; }
	.principes { padding-top: 24px; }
	.fonctionnement { padding-block: 16px 72px; }
}
@media (max-width: 680px) {
	.page-hero { min-height: 480px; }
	/* Sur téléphone, le texte couvre presque toute la photo : voile plus soutenu pour la lisibilité. */
	.page-hero::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.85) 100%); }
	.page-hero__content { padding-block: 96px 48px; }
	.page-hero__text { font-size: 16px; line-height: 26px; }
	.approche { padding-top: 48px; }
	.approche__grid, .fonctionnement__grid { gap: 32px; }
	.approche__text .prose { gap: 16px; }
	.principe { padding: 24px; }
	.principe__icon { width: 52px; height: 52px; border-radius: 12px; }
	.principe__icon .icon { width: 28px; height: 28px; }
	.principe__head { align-items: center; }
	.principe__head .h3 { padding-top: 0; font-size: 20px; line-height: 28px; }
	.principe__text, .principe__list { margin-top: 20px; }
	.etapes { gap: 24px; }
	.etapes::before, .etapes::after { left: 23.5px; }
	.etape { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; }
	.etape__icon { width: 48px; height: 48px; }
	.etape__icon .icon { width: 24px; height: 24px; }
	.etape__card { min-height: 0; padding: 20px; }
	.etape__card .h3 { font-size: 20px; line-height: 28px; }
	.etape__card p { font-size: 16px; line-height: 26px; letter-spacing: 0; }
	.fonctionnement__photos { gap: 12px; margin-top: 40px; }
	.fonctionnement__photo:nth-child(even) { margin-top: 16px; margin-bottom: -16px; }
	.engagement { padding-block: 64px; }
	.engagement__lead { font-size: 16px; line-height: 26px; }
	.engagement__quote { margin-top: 24px; padding: 24px 20px 24px 24px; font-size: 17px; line-height: 27px; letter-spacing: 0; }
}

/* ==========================================================================
   Page Opportunités (Figma 930:767) — le haut de page reprend .page-hero (page Modèle)
   ========================================================================== */

/* Un cadre où l'effort devient résultat (Figma 956:1611) : photo 521 × 660, texte 555 px. */
.cadre { padding-block: 80px 40px; scroll-margin-top: calc(var(--header-h) + var(--adminbar-h, 0px) - 24px); }
.cadre__grid {
	display: grid;
	grid-template-columns: minmax(0, 521fr) minmax(0, 555fr);
	gap: 76px; align-items: start;
}
.cadre__photo { aspect-ratio: 521 / 660; }
.cadre__text { padding-top: 7px; }
.cadre__text .h2 { max-width: 492px; margin-top: 16px; line-height: 1.04; }
.cadre__intro { max-width: 380px; margin-top: 48px; font-size: 18px; line-height: 27px; color: var(--text); }
.dispositifs { display: grid; gap: 16px; margin-top: 48px; }
.dispositif {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 16px;
	border: 1px solid var(--grey-200);
	border-radius: 12px;
	background: var(--grey-50);
}
.dispositif__icon {
	display: grid; place-items: center; flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 8px;
	background: #eaf5ee;
}
.dispositif__title { display: block; font-size: 14px; line-height: 20px; font-weight: 700; color: #142234; }
.dispositif__text { display: block; margin-top: 4px; font-size: 14px; line-height: 22.75px; color: #6b7280; }
.cadre__note {
	margin-top: 32px; padding-left: 20px;
	border-left: 4px solid var(--green);
	font-size: 16px; line-height: 26px; color: #4b5563;
}

/* Sections à titre centré de la page : petit titre, titre, introduction. */
.paliers .section-head, .voyages .section-head, .promos .section-head { margin-bottom: 41px; }
.paliers .section-head__lead { max-width: 532px; }
.voyages .section-head__lead { max-width: 694px; }
.promos .section-head__lead { max-width: 594px; }
.paliers .section-head__lead, .voyages .section-head__lead, .promos .section-head__lead { padding-top: 0; font-size: 16px; line-height: 26px; color: #6b7280; }

/* Ce que le modèle rend possible : 6 cartes 361 × 489 (Figma). */
.paliers { padding-block: 80px 40px; }
.paliers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 35px; }
.palier {
	display: flex; flex-direction: column;
	min-height: 489px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--white);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.palier__media { height: 208px; flex-shrink: 0; overflow: hidden; }
.palier__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.palier__body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 32px; }
/* Gris de la maquette (#9ca3af) trop pâle pour un petit texte : #6a7282 (contraste 4,8:1). */
.palier__kicker { font-size: 12px; line-height: 16px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--pale); }
.palier__title { margin-top: 12px; font-size: 20px; line-height: 28px; font-weight: 700; color: #142234; }
.palier__text { flex: 1; margin-top: 12px; font-size: 14px; line-height: 22.75px; color: #6b7280; }
.palier__link {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 24px; padding-top: 24px;
	border-top: 1px solid var(--grey-100);
	font-size: 14px; line-height: 20px; color: var(--green-text);
}
.palier__link .icon { width: 10.5px; height: 12px; transition: transform .25s var(--ease-out, ease); }
.palier__link:hover .icon { transform: translateX(4px); }
/* Palier mis en avant (carte sombre de la maquette, Figma 1136:568), en vert foncé TIENS :
   au survol / au clavier sur ordinateur, au centre de l'écran pendant le défilement sur mobile (.is-focus). */
.palier { transition: transform .4s var(--ease-out, ease), box-shadow .4s, background-color .4s; }
.palier__kicker, .palier__title, .palier__text, .palier__link { transition: color .4s, border-color .4s; }
.palier:hover, .palier:focus-within, .palier.is-focus {
	background: var(--green-dark);
	box-shadow: 0 20px 60px rgba(23, 136, 75, 0.25);
	transform: translateY(-6px);
}
.palier:hover .palier__media img, .palier:focus-within .palier__media img, .palier.is-focus .palier__media img { transform: scale(1.05); }
.palier:is(:hover, :focus-within, .is-focus) .palier__title { color: var(--white); }
.palier:is(:hover, :focus-within, .is-focus) .palier__kicker,
.palier:is(:hover, :focus-within, .is-focus) .palier__text { color: rgba(255, 255, 255, 0.78); }
.palier:is(:hover, :focus-within, .is-focus) .palier__link { border-top-color: rgba(255, 255, 255, 0.15); color: var(--white); }
.palier:is(:hover, :focus-within, .is-focus) .palier__link .icon { filter: brightness(0) invert(1); }

/* Le monde comme horizon : carrousel pleine largeur (1440 × 658 dans la maquette). */
.voyages { padding-block: 80px 0; }
.voyages .section-head { margin-bottom: 80px; }
.slider { position: relative; overflow: hidden; height: clamp(360px, 45.7vw, 658px); background: #142234; touch-action: pan-y; }
.slider__track { display: flex; height: 100%; transition: transform .8s var(--ease-out, ease); }
.slider__slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; }
.slider__slide::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
	pointer-events: none;
}
/* Légende discrète en bas à gauche : ne cache pas les personnes au centre de la photo. */
.slider__legend {
	position: absolute; left: 0; right: 0; bottom: 40px; z-index: 1;
	color: var(--white);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.slider__legend-text { display: grid; gap: 2px; justify-items: start; width: fit-content; padding-left: 16px; border-left: 4px solid var(--green); }
.slider__legend strong { font-size: 20px; line-height: 28px; font-weight: 800; }
.slider__legend span { font-size: 15px; line-height: 19px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.slider__dots {
	position: absolute; left: 0; right: 0; bottom: 52px; z-index: 2;
	display: flex; justify-content: flex-end; gap: 8px;
	pointer-events: none;
}
.slider__dot {
	width: 10px; height: 10px; padding: 0;
	border: 0; border-radius: 5px;
	background: rgba(255, 255, 255, 0.55);
	pointer-events: auto;
	transition: width .3s, background-color .3s;
}
.slider__dot:hover { background: rgba(255, 255, 255, 0.85); }
.slider__dot.is-active { width: 24px; background: var(--white); }

/* Les opportunités de l'année : affiches 361 × 489 (Figma 1148:773). */
.promos { padding-block: 80px 40px; }
.promos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 33px; }
.promo {
	display: block; overflow: hidden;
	aspect-ratio: 361 / 489;
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.promo:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.promo img { width: 100%; height: 100%; object-fit: cover; }

/* Des moments qui parlent : mosaïque de 4 colonnes, 1088 px (Figma 1148:771). */
.galerie { padding-block: 80px; }
.galerie .section-head { margin-bottom: 45px; }
.galerie__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1088px; margin-inline: auto; align-items: start; }
.galerie__col { display: grid; gap: 16px; }
.galerie__item {
	position: relative; display: block;
	overflow: hidden; margin: 0;
	cursor: zoom-in;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.galerie__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.galerie__item:hover img, .galerie__item:focus-visible img { transform: scale(1.04); }
/* Petite loupe au survol : la photo s'agrandit au clic. */
.galerie__item::after, .promo::after {
	content: ""; position: absolute; right: 12px; bottom: 12px;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(0, 0, 0, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") no-repeat center;
	opacity: 0; transform: scale(.8);
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}
.galerie__item:hover::after, .galerie__item:focus-visible::after,
.promo:hover::after, .promo:focus-visible::after { opacity: 1; transform: none; }
.promo { position: relative; cursor: zoom-in; }

/* Visionneuse (galerie et affiches) : photo en grand sur fond sombre. */
.lightbox {
	width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0;
	background: rgba(4, 18, 11, 0.97);
	color: var(--white);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; animation: tdc-fade .25s ease-out; }
@keyframes tdc-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__figure { display: grid; justify-items: center; gap: 14px; margin: 0; padding: 72px 96px; }
.lightbox__img {
	max-width: min(1400px, 100%); max-height: calc(100dvh - 150px);
	width: auto; height: auto; object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	transition: opacity .2s;
}
.lightbox__img.is-loading { opacity: 0.25; }
.lightbox__count { position: absolute; left: 24px; top: 24px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.75); }
.lightbox__btn {
	position: absolute; display: grid; place-items: center;
	width: 48px; height: 48px; padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
	transition: background-color .2s;
}
.lightbox__btn:hover { background: var(--green); border-color: var(--green); }
.lightbox__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.lightbox__close { right: 24px; top: 16px; }
.lightbox__prev { left: 24px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 24px; top: 50%; translate: 0 -50%; }
@media (max-width: 680px) {
	.lightbox__figure { padding: 64px 12px 96px; }
	.lightbox__img { max-height: calc(100dvh - 220px); }
	.lightbox__prev, .lightbox__next { top: auto; bottom: 24px; translate: none; }
	.lightbox__prev { left: calc(50% - 60px); }
	.lightbox__next { right: calc(50% - 60px); }
}

@media (max-width: 1024px) {
	.paliers__grid, .promos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
	.cadre__grid { gap: 48px; }
}
@media (max-width: 900px) {
	.cadre__grid { grid-template-columns: 1fr; gap: 40px; }
	.cadre__photo { aspect-ratio: 4 / 3; }
	.cadre__intro, .dispositifs { margin-top: 24px; }
	.galerie__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.voyages .section-head { margin-bottom: 48px; }
}
@media (max-width: 680px) {
	.cadre, .paliers, .promos { padding-block: 56px 24px; }
	.voyages { padding-top: 56px; }
	.galerie { padding-block: 56px; }
	.cadre__text .h2 { line-height: 1.2; }
	.cadre__intro { font-size: 16px; line-height: 26px; }
	.paliers__grid, .promos__grid { grid-template-columns: 1fr; gap: 24px; }
	.palier { min-height: 0; }
	.promos__grid { width: min(361px, 100%); margin-inline: auto; }
	.slider { height: auto; aspect-ratio: 4 / 3; }
	.slider__legend { bottom: 44px; }
	.slider__legend strong { font-size: 17px; line-height: 24px; }
	.slider__legend span { font-size: 13px; line-height: 18px; }
	/* Points sous la légende, centrés, pour ne pas la chevaucher sur petit écran. */
	.slider__dots { bottom: 16px; justify-content: center; }
	.galerie__grid, .galerie__col { gap: 10px; }
}

/* ==========================================================================
   Page Produits (Figma 367:302) — le haut de page reprend .page-hero
   ========================================================================== */
.page-hero--produits .page-hero__bg { object-position: 50% 56%; }
.page-hero--produits .page-hero__text { color: var(--white); }

/* Une approche structurée du bien-être : texte 443 px, photo 645 × 372 (Figma). */
.intro-produits { padding-block: 64px 100px; }
.intro-produits__grid {
	display: grid;
	grid-template-columns: minmax(0, 443fr) minmax(0, 645fr);
	gap: 64px; align-items: center;
}
.intro-produits__text .h2 { max-width: 443px; margin-top: 24px; line-height: 1.1; }
.intro-produits__text .prose { margin-top: 20px; gap: 24px; line-height: 26px; }
.intro-produits__photo { aspect-ratio: 645 / 372; }

/* Barre de filtres : reste visible sous l'en-tête pendant le défilement du catalogue. */
.filtres {
	position: sticky; top: calc(var(--header-h) + var(--adminbar-h, 0px)); z-index: 40;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	background: var(--white);
	box-shadow: 0 1px 3.45px rgba(0, 0, 0, 0.12);
}
.filtres__list { display: flex; justify-content: space-between; gap: 12px; padding-block: 16px; overflow-x: auto; scrollbar-width: none; }
.filtres__list::-webkit-scrollbar { display: none; }
.filtre {
	display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
	height: 40px; padding: 0 28px;
	border: 0; border-radius: 999px;
	background: var(--grey-100);
	font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text);
	white-space: nowrap;
	transition: background-color .25s, color .25s, box-shadow .25s;
}
.filtre:hover { background: var(--grey-200); }
.filtre.is-active {
	background: var(--green); color: var(--white);
	box-shadow: 0 4px 3px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
}
.filtre.is-active .icon { filter: brightness(0) invert(1); }

/* Une section par gamme : titre, texte, 3 cartes produit. */
.gamme { padding-block: 52px 48px; scroll-margin-top: calc(var(--header-h) + var(--adminbar-h, 0px) + 72px); }
.gamme[hidden] { display: none; }
.gamme__head { max-width: 572px; margin-bottom: 52px; }
.gamme__title { font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: 0.4px; color: var(--black); }
.gamme__lead { margin-top: 15px; font-size: 16px; line-height: 24px; color: var(--muted); }
.produits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.produit {
	display: flex; flex-direction: column;
	padding: 24px 24px 32px;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.produit:hover { transform: translateY(-4px); box-shadow: 0 20px 32px -8px rgba(16, 24, 40, 0.14); }
.produit__media { height: 240px; overflow: hidden; border-radius: var(--radius-lg); background: var(--grey-50); }
.produit__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.produit:hover .produit__media img { transform: scale(1.05); }
.produit__body { display: flex; flex-direction: column; flex: 1; margin-top: 32px; }
.produit__kicker { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--green-text); }
.produit__title { margin-top: 12px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink); }
.produit__text { flex: 1; margin-top: 12px; font-size: 16px; line-height: 24px; color: #667085; }
.produit__link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 32px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--green-text); }
.produit__link .icon { transition: transform .25s var(--ease-out, ease); }
.produit__link:hover .icon { transform: translateX(4px); }

/* Le Pack Adhésion : bandeau photo + voile vert foncé TIENS (Figma 374:156 / 374:157). */
.pack { padding-top: 56px; }
.pack__head { margin-bottom: 77px; gap: 24px; }
.pack__band { position: relative; overflow: hidden; padding-block: 77px; color: var(--white); }
.pack__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pack__band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(7, 74, 46, 0.84); }
.pack__grid {
	position: relative; z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 600fr) minmax(0, 445fr);
	gap: 107px; align-items: center;
}
.pack__visual {
	overflow: hidden; margin: 0;
	aspect-ratio: 634 / 670;
	border: 10px solid var(--white);
	border-radius: var(--radius-lg);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}
.pack__visual img { width: 100%; height: 100%; object-fit: cover; }
.pack__title { font-size: var(--h2); line-height: 1.05; font-weight: 700; text-wrap: balance; }
.pack__lead { margin-top: 40px; font-size: 18px; line-height: 28px; font-weight: 700; }
.pack__list { display: grid; gap: 16px; margin-top: 36px; }
.pack__list li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; }
.pack__list .icon {
	box-sizing: content-box; width: 20px; height: 20px; padding: 5px;
	border-radius: 50%; background: var(--grey-50);
}
.pack .btn { margin-top: 44px; }
.pack .btn--primary { background: var(--white); color: var(--green-text); }
.pack .btn--primary:hover { background: #eaf4ee; }
.pack .btn--primary .icon { filter: brightness(0) saturate(100%) invert(30%) sepia(52%) saturate(744%) hue-rotate(101deg) brightness(92%) contrast(92%); }

@media (max-width: 1024px) {
	.produits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.pack__grid { gap: 48px; }
	.filtres__list { justify-content: flex-start; }
}
@media (max-width: 900px) {
	.intro-produits__grid, .pack__grid { grid-template-columns: 1fr; gap: 40px; }
	.intro-produits__photo { order: -1; aspect-ratio: 4 / 3; }
	.intro-produits { padding-bottom: 56px; }
	.pack__visual { width: min(480px, 100%); margin-inline: auto; }
}
@media (max-width: 680px) {
	.produits-grid { grid-template-columns: 1fr; }
	.produit__media { height: auto; aspect-ratio: 4 / 3; }
	.produit__title { font-size: 21px; line-height: 28px; }
	.gamme { padding-block: 40px 32px; }
	.gamme__head { margin-bottom: 28px; }
	.gamme__title { font-size: 24px; line-height: 30px; }
	.filtres__list { padding-block: 12px; }
	.filtre { height: 38px; padding: 0 18px; font-size: 15px; }
	.pack__head { margin-bottom: 40px; }
	.pack__band { padding-block: 48px; }
	.pack__lead { margin-top: 24px; font-size: 16px; line-height: 26px; }
	.pack .btn { margin-top: 32px; }
}

/* ==========================================================================
   Page Impact (Figma 406:124) — le haut de page reprend .page-hero
   ========================================================================== */
.page-hero--impact .page-hero__bg { object-position: 50% 40%; }
.page-hero--impact .page-hero__text { max-width: 616px; color: var(--white); }

/* Haut de page en vidéo (Impact) : même comportement que le hero de l'accueil.
   Ordinateur : le texte s'efface après quelques secondes et revient quand la souris bouge.
   .page-hero--split (toutes les pages à photo ou vidéo de haut de page) — tablette et téléphone : la photo ou la vidéo entière en haut,
   le texte dessous sur fond vert, pour que le texte ne cache plus l'image. */
/* Le cadre de la vidéo porte aussi le bouton son (même bouton que l'accueil). */
.page-hero__media { position: absolute; inset: 0; }
@media (min-width: 1025px) {
	.page-hero--video::after, .page-hero--video .page-hero__content { transition: opacity 1.2s var(--ease-out, ease); }
	.page-hero--video.is-faded::after,
	.page-hero--video.is-faded .page-hero__content { opacity: 0; }
	.page-hero--video.is-faded.is-peek::after,
	.page-hero--video.is-faded.is-peek .page-hero__content,
	.page-hero--video.is-faded:focus-within::after,
	.page-hero--video.is-faded:focus-within .page-hero__content { opacity: 1; transition-duration: .4s; }
}
@media (max-width: 1024px) {
	.page-hero--split { min-height: 0; background: var(--green-dark); }
	.page-hero--split::after { display: none; }
	.page-hero--video .page-hero__media { position: relative; }
	.page-hero--video .hero__sound { right: 12px; bottom: 10px; width: 40px; height: 40px; }
	.page-hero--split .page-hero__bg { position: static; display: block; height: auto; aspect-ratio: 16 / 9; max-height: calc(100svh - var(--header-h) - var(--adminbar-h, 0px)); object-fit: contain; }
	.page-hero--leaders .page-hero__bg { aspect-ratio: 3 / 2; object-fit: cover; }
	.page-hero--modele .page-hero__bg { aspect-ratio: 2400 / 1265; object-fit: cover; }
	.page-hero--opportunites .page-hero__bg { aspect-ratio: 3 / 2; object-fit: cover; }
	/* Produits : cadrage carré centré sur le flacon, pour le mettre en avant. */
	.page-hero--produits .page-hero__bg { aspect-ratio: 1 / 1; max-height: 520px; object-fit: cover; object-position: 100% 50%; }
	.page-hero--split .page-hero__content { gap: 16px; padding-block: 40px 48px; }
	.page-hero--split .page-hero__title { max-width: 640px; font-size: clamp(28px, 1.2rem + 2.5vw, 38px); }
	.page-hero--split .btn { margin-top: 8px; }
	/* Bouton blanc à texte vert : un bouton vert sur fond vert ne se verrait pas. */
	.page-hero--split .btn--primary { background: var(--white); color: var(--green-text); }
	.page-hero--split .btn--primary:hover { background: #eaf4ee; }
	.page-hero--split .btn--primary .icon { filter: brightness(0) saturate(100%) invert(30%) sepia(52%) saturate(744%) hue-rotate(101deg) brightness(92%) contrast(92%); }
}

/* Notre Impact sur le Terrain : 6 cartes domaine (Figma 1822:2731). */
.domaines { padding-block: 64px 40px; }
.domaines .section-head { margin-bottom: 72px; gap: 20px; }
.domaines .section-head__lead { max-width: 520px; padding-top: 0; font-size: 16px; line-height: 24px; color: #6b7280; }
.domaines__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 62px 18px; }
.domaine {
	display: flex; flex-direction: column;
	overflow: hidden;
	border: 1px solid #f1f5f9;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.domaine:hover { transform: translateY(-4px); box-shadow: 0 20px 32px -10px rgba(0, 0, 0, 0.18); }
.domaine__media { position: relative; height: 252px; overflow: hidden; }
.domaine__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .6s var(--ease-out, ease); }
.domaine__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); }
.domaine:hover .domaine__media img { transform: scale(1.05); }
.domaine__body { display: flex; flex-direction: column; flex: 1; padding: 32px 20px 32px; }
.domaine__title { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.6px; color: var(--slate); }
.domaine__text { flex: 1; margin-top: 32px; font-size: 16px; line-height: 26px; font-weight: 300; color: rgba(15, 23, 42, 0.68); }
.domaine__link {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-end;
	margin-top: 24px; padding: 10px 24px;
	background: rgba(7, 74, 46, 0.06);
	font-size: 14px; line-height: 20px; font-weight: 500; color: var(--green-dark);
	transition: background-color .2s, color .2s;
}
.domaine__link:hover { background: var(--green-dark); color: var(--white); }
.domaine__link:hover .icon { filter: brightness(0) invert(1); }

/* Initiatives sur le terrain : une initiative à la fois (Figma 1586:2352). */
.initiatives { padding-block: 80px 94px; scroll-margin-top: calc(var(--header-h) + var(--adminbar-h, 0px) - 24px); }
.initiatives__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 60px; flex-wrap: wrap; margin-bottom: 64px; }
.initiatives__head .h2 { letter-spacing: -1.2px; line-height: 1; }
.initiatives__outils { display: flex; gap: 16px; flex-wrap: wrap; }
.outil {
	display: flex; align-items: center; gap: 8px;
	height: 44px; padding: 0 17px;
	border: 1px solid var(--grey-200);
	border-radius: 999px;
	background: var(--white);
	transition: border-color .2s, box-shadow .2s;
}
.outil:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 136, 75, 0.15); }
.outil input, .outil select {
	border: 0; outline: 0; background: transparent;
	font: inherit; font-size: 14px; color: var(--ink);
}
.outil--recherche { width: 260px; }
.outil--recherche input { flex: 1; min-width: 0; }
.outil--recherche input::placeholder { color: var(--pale); }
.outil--filtre { width: 300px; }
.outil--filtre select { flex: 1; font-weight: 500; cursor: pointer; }
.initiatives__slides { display: grid; touch-action: pan-y; }
/* Diapositives superposées : fondu de l'une à l'autre, comme le carrousel des magazines. */
.initiative {
	grid-area: 1 / 1;
	display: grid; grid-template-columns: minmax(0, 667fr) minmax(0, 463fr); gap: 50px; align-items: center;
	opacity: 0; visibility: hidden;
	transition: opacity .6s ease-in-out, visibility .6s;
}
.initiative.is-active { opacity: 1; visibility: visible; }
.initiative[hidden] { display: none; }
.initiatives__vide { grid-area: 1 / 1; }
.initiatives__dots { margin-top: 40px; }
.initiatives__dots[hidden] { display: none; }
.initiative__media { margin: 0; aspect-ratio: 667 / 626; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.initiative__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.initiative__title { margin-top: 16px; font-size: clamp(26px, 1rem + 1.4vw, 36px); line-height: 1.25; font-weight: 700; letter-spacing: -0.9px; color: var(--slate); text-wrap: balance; }
.initiative__body { display: grid; gap: 26px; margin-top: 25px; font-size: 16px; line-height: 26px; font-weight: 300; color: rgba(15, 23, 42, 0.72); }
.initiatives__vide { padding: 48px 0; font-size: 18px; text-align: center; color: var(--muted); }
/* Cap sur l'avenir : fond vert très clair, 4 cartes, citation (Figma 1586:2386). */
.avenir { padding-block: 70px 48px; background: rgba(23, 136, 75, 0.08); }
.avenir .section-head { margin-bottom: 48px; }
.avenir .section-head__lead { max-width: 760px; font-size: 18px; line-height: 26px; }
.avenir__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.axe {
	padding: 40px;
	border: 1px solid #f1f5f9;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.axe:hover { transform: translateY(-4px); box-shadow: 0 16px 28px -10px rgba(7, 74, 46, 0.2); }
.axe__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgba(7, 74, 46, 0.06); }
.axe__title { margin-top: 32px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--slate); }
.axe__text { margin-top: 16px; font-size: 16px; line-height: 26px; font-weight: 300; color: rgba(15, 23, 42, 0.68); }
.avenir__quote { max-width: 768px; margin: 48px auto 0; font-size: clamp(22px, 1rem + 1vw, 30px); line-height: 1.6; font-weight: 700; font-style: italic; text-align: center; color: var(--green-dark); text-wrap: balance; }

@media (max-width: 1024px) {
	.domaines__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
	.avenir__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.initiative { gap: 32px; }
}
@media (max-width: 900px) {
	.initiative { grid-template-columns: 1fr; }
	.initiative__media { aspect-ratio: 4 / 3; }
	.initiatives__outils, .outil--recherche, .outil--filtre { width: 100%; }
	.outil--recherche, .outil--filtre { flex: 1 1 240px; }
}
@media (max-width: 680px) {
	.domaines__grid, .avenir__grid { grid-template-columns: 1fr; }
	.domaines .section-head { margin-bottom: 40px; }
	.domaine__media { height: 220px; }
	.domaine__text { margin-top: 16px; }
	.initiatives__head { margin-bottom: 32px; }
	.axe { padding: 28px; }
	.axe__title { margin-top: 20px; font-size: 21px; line-height: 28px; }
	.avenir__quote { margin-top: 36px; }
}

/* ==========================================================================
   Page d'un domaine d'impact (Figma Impact/Institution 1570:1345 et suivantes)
   ========================================================================== */
.domaines { scroll-margin-top: calc(var(--header-h) + var(--adminbar-h, 0px) - 24px); }
.domaine-top { display: grid; gap: 32px; padding-top: 40px; }
.fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fil li { font-size: 11px; line-height: 16.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(15, 23, 42, 0.45); }
.fil li + li::before {
	content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
	background: url("../img/impact/ico-fil.svg") center / 14px no-repeat;
}
.fil a { color: inherit; transition: color .2s; }
.fil a:hover { color: var(--green-text); }
.retour {
	display: flex; align-items: center; gap: 12px;
	padding-bottom: 25px; border-bottom: 1px solid rgba(15, 23, 42, 0.05);
	font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--slate);
}
.retour__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(15, 23, 42, 0.05); transition: background-color .2s, transform .2s; }
.retour:hover .retour__icon { background: rgba(23, 136, 75, 0.12); transform: translateX(-3px); }
.retour:hover { color: var(--green-text); }

.domaine-hero {
	position: relative; isolation: isolate;
	display: flex; align-items: flex-end;
	min-height: 442px; margin-top: 7px; overflow: hidden;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(15, 23, 42, 0.05);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	color: var(--white);
}
.domaine-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.domaine-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0) 100%);
}
.domaine-hero__content { display: grid; justify-items: start; gap: 16px; padding: 48px; }
.domaine-hero__title { font-size: clamp(34px, 1rem + 3.4vw, 60px); line-height: 1.1; font-weight: 700; letter-spacing: -1.5px; }
.domaine-hero__text { max-width: 507px; font-size: 16px; line-height: 26px; font-weight: 300; color: rgba(255, 255, 255, 0.86); }
.domaine-hero .btn { margin-top: 24px; }
.domaine-hero__content > * { animation: tdc-rise .9s var(--ease-out) both; }
.domaine-hero__content > :nth-child(1) { animation-delay: .15s; }
.domaine-hero__content > :nth-child(2) { animation-delay: .3s; }
.domaine-hero__content > :nth-child(3) { animation-delay: .45s; }

.presentation { padding-block: 64px 40px; }
.presentation__head { gap: 8px; margin-bottom: 40px; }
.presentation__title { font-size: clamp(28px, 1rem + 1.6vw, 36px); line-height: 1.35; letter-spacing: -1.2px; }
.presentation__grid { display: grid; grid-template-columns: minmax(0, 563fr) minmax(0, 580fr); gap: 36px; align-items: start; }
.presentation__grid--seul { grid-template-columns: minmax(0, 768px); justify-content: center; }
.presentation__texte { display: grid; gap: 24px; font-size: 18px; line-height: 26px; letter-spacing: -0.3px; color: var(--text); }
.presentation__photo { margin: 0; aspect-ratio: 580 / 475; overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.presentation__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.encart {
	position: relative; display: grid; gap: 12px;
	margin-top: 48px; padding: 32px 40px 32px 72px;
	border-left: 4px solid var(--green);
	border-radius: 0 16px 16px 0;
	background: linear-gradient(to right, rgba(23, 136, 75, 0.06), rgba(23, 136, 75, 0));
	font-size: 20px; line-height: 25px; font-weight: 700; color: var(--ink);
}
.encart__icon { position: absolute; left: 24px; top: 30px; pointer-events: none; }
.encart p { position: relative; }
.domaines--autres { padding-block: 64px 80px; }
.domaines--autres .section-head { margin-bottom: 48px; }

@media (max-width: 900px) {
	.presentation__grid { grid-template-columns: 1fr; }
	.presentation__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 680px) {
	.domaine-top { gap: 20px; padding-top: 24px; }
	.retour { padding-bottom: 18px; }
	.domaine-hero { min-height: 420px; }
	.domaine-hero__content { padding: 28px 24px; }
	.domaine-hero__title { letter-spacing: -0.8px; }
	.domaine-hero .btn { margin-top: 8px; }
	.presentation { padding-top: 48px; }
	.presentation__texte { font-size: 16px; line-height: 26px; }
	.encart { padding: 64px 20px 24px 24px; font-size: 17px; line-height: 25px; }
	.encart__icon { left: 22px; top: 22px; }
	.domaines--autres { padding-block: 48px 56px; }
	.domaines--autres .section-head { margin-bottom: 32px; }
}

/* ==========================================================================
   Page Leaders (Figma 435:805) — le haut de page reprend .page-hero
   ========================================================================== */
.page-hero--leaders .page-hero__bg { object-position: 0% 88%; }
.page-hero--leaders .page-hero__text { max-width: 616px; color: var(--white); }

/* Accompagner la transmission : texte 522 px, photo 631 px. */
.transmission { padding-block: 58px 72px; scroll-margin-top: calc(var(--header-h) + var(--adminbar-h, 0px) - 24px); }
.transmission__grid { display: grid; grid-template-columns: minmax(0, 522fr) minmax(0, 631fr); gap: 56px; align-items: center; }
.transmission__text .h2 { margin-top: 16px; letter-spacing: -1.2px; }
.transmission__text .prose { margin-top: 24px; gap: 24px; font-size: 18px; line-height: 26px; }
.transmission__photo { aspect-ratio: 631 / 393; }

/* Présidents : deux grandes cartes sur fond vert très clair. */
.presidents { padding-block: 68px; background: rgba(23, 136, 75, 0.08); }
.presidents__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.president {
	display: grid; justify-items: start; gap: 8px;
	padding: 40px;
	border: 1px solid rgba(7, 74, 46, 0.05);
	border-radius: 32px;
	background: #fdfcfb;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
.president__photo {
	width: 100%; aspect-ratio: 491 / 614; overflow: hidden;
	border-radius: 32px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
/* Léger zoom vers le haut, comme la maquette : le nom inscrit en bas de certains portraits reste hors cadre. */
.president__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.14); transform-origin: 50% 0; transition: transform .6s var(--ease-out, ease); }
.president:hover .president__photo img { transform: scale(1.18); }
.president__name { margin-top: 40px; font-size: clamp(24px, 1rem + 1vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -0.75px; color: var(--slate); }
.president__text { display: grid; gap: 28px; margin-top: 24px; font-size: 18px; line-height: 29px; font-weight: 300; color: rgba(15, 23, 42, 0.65); }

/* Badges de niveau. */
.badge-niveau { display: inline-flex; align-items: center; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.badge-niveau--president {
	gap: 8px; padding: 8px 24px;
	border-radius: 999px;
	background: var(--green-dark);
	box-shadow: 0 10px 15px -3px rgba(7, 74, 46, 0.2), 0 4px 6px -4px rgba(7, 74, 46, 0.2);
	font-size: 10px; line-height: 15px; letter-spacing: 2px; color: var(--white);
}
.badge-niveau--fonce {
	gap: 12px; padding: 10px 20px 10px 10px;
	border-radius: 16px;
	background: var(--green-dark);
	box-shadow: 0 20px 25px -5px rgba(7, 74, 46, 0.12), 0 8px 10px -6px rgba(7, 74, 46, 0.12);
	font-size: 11px; line-height: 16.5px; letter-spacing: 1.65px; color: var(--white);
}
.badge-niveau__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--green); }
.badge-niveau--clair {
	gap: 8px; padding: 8px 16px;
	border: 1px solid rgba(7, 74, 46, 0.1);
	border-radius: 12px;
	background: rgba(7, 74, 46, 0.05);
	font-size: 10px; line-height: 15px; letter-spacing: 1px; color: var(--green-dark);
}

/* Lions Diamond, Gold Lion… : cartes 273 px, quatre par ligne. */
.niveau { padding-block: 80px 24px; }
.niveau + .niveau { padding-top: 56px; }
.niveau .section-head { gap: 12px; margin-bottom: 48px; }
.niveau__title { text-transform: uppercase; letter-spacing: -1px; }
.niveau .section-head__lead { max-width: 620px; padding-top: 4px; font-size: 16px; line-height: 24px; color: #6b7280; }
.leaders__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 29px; }
.leader {
	display: flex; flex-direction: column;
	overflow: hidden;
	border: 1px solid #f1f5f9;
	border-radius: 32px;
	background: var(--white);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.leader:hover { transform: translateY(-4px); box-shadow: 0 20px 32px -12px rgba(0, 0, 0, 0.18); }
.leader__photo { aspect-ratio: 271 / 405; overflow: hidden; background: #1a1a1a; }
.leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .6s var(--ease-out, ease); }
.leader:hover .leader__photo img { transform: scale(1.04); }
/* Reflet au survol des cartes de niveau : éclat argenté (badge foncé, Diamond) ou doré (badge clair, Gold).
   Une seule bande de lumière qui traverse la photo, sans image ni script : léger. */
.niveau .leader__photo { position: relative; }
.niveau .leader__photo::after {
	content: ""; position: absolute; inset: -10% -60%;
	background: linear-gradient(105deg, transparent 38%, var(--reflet) 50%, transparent 62%);
	transform: translateX(-75%);
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}
.niveau--fonce { --reflet: rgba(225, 240, 255, 0.7); --halo: rgba(170, 205, 255, 0.45); }
.niveau--clair { --reflet: rgba(255, 214, 120, 0.65); --halo: rgba(212, 160, 40, 0.4); }
.niveau .leader:hover .leader__photo::after { animation: tdc-reflet 1.1s var(--ease-out, ease) forwards; }
.niveau .leader:hover { box-shadow: 0 20px 34px -12px var(--halo), 0 0 0 1px var(--halo); }
@keyframes tdc-reflet {
	0% { transform: translateX(-75%); opacity: 1; }
	100% { transform: translateX(75%); opacity: 1; }
}
@media (hover: none) {
	.niveau .leader__photo::after { display: none; }
}
/* Tête de lion qui rugit au survol : en or (Gold Lion) ou en diamant (Diamond). Dessin vectoriel léger, animé en CSS. */
.lion {
	position: absolute; top: 12px; right: 12px; z-index: 1;
	width: 78px; height: 78px;
	opacity: 0;
	transform: scale(.4) rotate(-20deg);
	transition: opacity .3s, transform .3s;
	pointer-events: none;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}
.lion svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lion__head, .lion__jaw { transform-box: fill-box; }
.lion__head { transform-origin: 50% 60%; }
.lion__jaw { transform-origin: 50% 0; transform: scaleY(.12); }
/* Ondes du rugissement. */
.lion::before, .lion::after {
	content: ""; position: absolute; inset: 0;
	border: 2px solid var(--onde);
	border-radius: 50%;
	opacity: 0;
}
.lion--or { --onde: rgba(255, 210, 110, 0.85); }
.lion--diamant { --onde: rgba(210, 235, 255, 0.9); }
.leader:hover .lion { opacity: 1; transform: none; transition: opacity .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.leader:hover .lion__head { animation: lion-rugit .9s .35s ease-in-out both; }
.leader:hover .lion__jaw { animation: lion-gueule .9s .35s ease-in-out both; }
.leader:hover .lion::before { animation: lion-onde .8s .45s ease-out both; }
.leader:hover .lion::after { animation: lion-onde .8s .65s ease-out both; }
@keyframes lion-rugit {
	0% { transform: none; }
	20% { transform: scale(1.14) rotate(-6deg); }
	35% { transform: scale(1.14) rotate(5deg); }
	50% { transform: scale(1.14) rotate(-4deg); }
	65% { transform: scale(1.12) rotate(3deg); }
	100% { transform: none; }
}
@keyframes lion-gueule {
	0% { transform: scaleY(.12); }
	18%, 70% { transform: scaleY(1); }
	100% { transform: scaleY(.45); }
}
@keyframes lion-onde {
	0% { opacity: .9; transform: scale(.7); }
	100% { opacity: 0; transform: scale(1.9); }
}
@media (prefers-reduced-motion: reduce) {
	.leader:hover .lion__jaw { transform: scaleY(.45); }
	.lion::before, .lion::after { display: none; }
}
@media (max-width: 680px) {
	.lion { top: 8px; right: 8px; width: 52px; height: 52px; }
}
.leader__body { display: grid; justify-items: start; gap: 16px; padding: 24px; }
.leader__name { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--slate); }
.niveau--fonce .leader__name { font-size: 20px; }

/* Devenir leader : carte blanche sur fond vert foncé. */
.devenir { padding-block: 144px; background: var(--green-dark); }
.devenir__card {
	display: grid; justify-items: center;
	max-width: 1180px; margin-inline: auto; padding: 96px 48px;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	text-align: center;
}
.devenir__icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 24px; background: rgba(23, 136, 75, 0.14); }
.devenir .h2 { margin-top: 48px; }
.devenir__text { display: grid; gap: 32px; max-width: 600px; margin-top: 48px; font-size: 20px; line-height: 30px; color: rgba(15, 23, 42, 0.62); text-wrap: balance; }
.devenir__quote {
	margin-top: 64px; padding: 32px;
	border: 1px solid rgba(7, 74, 46, 0.1);
	border-radius: 24px;
	background: rgba(7, 74, 46, 0.05);
	font-size: 20px; line-height: 28px; font-weight: 700; font-style: italic; color: var(--green-dark);
}

@media (max-width: 1100px) {
	.leaders__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.transmission__grid, .presidents__grid { grid-template-columns: 1fr; }
	.transmission__photo { order: -1; }
	.presidents__grid { max-width: 560px; margin-inline: auto; }
	.leaders__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.devenir { padding-block: 80px; }
}
@media (max-width: 680px) {
	.transmission { padding-block: 40px 48px; }
	.presidents { padding-block: 48px; }
	.president { padding: 20px; border-radius: 24px; }
	.president__photo { border-radius: 20px; }
	.president__name { margin-top: 24px; }
	.president__text { gap: 18px; margin-top: 16px; font-size: 16px; line-height: 26px; }
	.niveau { padding-top: 56px; }
	.niveau + .niveau { padding-top: 40px; }
	.niveau .section-head { margin-bottom: 32px; }
	.leaders__grid { gap: 14px; }
	.leader { border-radius: 20px; }
	.leader__body { gap: 10px; padding: 14px; }
	.leader__name, .niveau--fonce .leader__name { font-size: 15px; line-height: 21px; }
	.badge-niveau--fonce { gap: 6px; padding: 5px 9px 5px 5px; border-radius: 12px; font-size: 9px; letter-spacing: 0.4px; }
	.badge-niveau__icon { width: 20px; height: 20px; border-radius: 6px; }
	.badge-niveau--clair { gap: 6px; padding: 5px 9px; font-size: 9px; letter-spacing: 0.4px; }
	.devenir { padding-block: 56px; }
	.devenir__card { padding: 48px 22px; }
	.devenir__icon { width: 64px; height: 64px; border-radius: 18px; }
	.devenir .h2, .devenir__text { margin-top: 28px; }
	.devenir__text { gap: 18px; font-size: 17px; line-height: 27px; }
	.devenir__quote { margin-top: 36px; padding: 20px; font-size: 17px; line-height: 25px; }
}

/* ==========================================================================
   Page Formateurs (Figma 994:2415) — reprend le haut de page, les cartes et badges de Leaders
   ========================================================================== */
.page-hero--formateurs .page-hero__bg { object-position: 50% 45%; }
.page-hero--formateurs .page-hero__text { max-width: 616px; color: var(--white); }

/* Structurer la progression : texte 522 px et deux points clés, photo 610 × 572 px. */
.progression .transmission__grid { grid-template-columns: minmax(0, 522fr) minmax(0, 610fr); }
.progression__photo { aspect-ratio: 610 / 572; }
.points { display: grid; gap: 16px; margin-top: 28px; }
.point {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #f9fafb;
}
.point__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: #eaf5ee; }
.point__title { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink); }
.point__text { margin-top: 4px; font-size: 14px; line-height: 22px; color: #6b7280; }

/* Les formateurs : deux grandes cartes, puis trois par ligne. */
.equipe { padding-block: 80px; scroll-margin-top: calc(var(--header-h) + var(--adminbar-h, 0px) - 24px); }
.equipe .section-head { gap: 12px; margin-bottom: 64px; }
.equipe__vedettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.formateur--vedette .leader__photo { aspect-ratio: 564 / 700; }
.formateur--vedette .leader__body { padding: 32px; }
.formateur--vedette .leader__name { font-size: clamp(22px, 1rem + 1vw, 30px); line-height: 1.2; }
.formateur__text { display: grid; gap: 28px; margin-top: 16px; font-size: 18px; line-height: 29px; font-weight: 300; color: rgba(15, 23, 42, 0.65); }
.formateur--vedette .badge-niveau { white-space: normal; }
.equipe__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin-top: 48px; }
.formateur .leader__photo { aspect-ratio: 370 / 544; }
.formateur .leader__body { padding: 32px; }
.formateur .leader__name { font-size: 20px; }

/* Un rôle clé au cœur du modèle : six cartes (mêmes que « Cap sur l'avenir »). */
.expertise { padding-block: 32px 96px; }
.expertise .section-head { gap: 12px; margin-bottom: 64px; }
.expertise__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; }

@media (max-width: 1024px) {
	.page-hero--formateurs .page-hero__bg { aspect-ratio: 3 / 2; object-fit: cover; }
}
@media (max-width: 900px) {
	.progression .transmission__grid { grid-template-columns: 1fr; }
	.progression__photo { aspect-ratio: 4 / 3; }
	.equipe__vedettes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
	.equipe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.expertise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 680px) {
	.equipe { padding-block: 56px; }
	.equipe .section-head, .expertise .section-head { margin-bottom: 36px; }
	.formateur--vedette { border-radius: 24px; }
	.formateur--vedette .leader__body { padding: 22px; }
	.formateur__text { gap: 18px; font-size: 16px; line-height: 26px; }
	.equipe__grid { gap: 14px; margin-top: 24px; }
	.formateur .leader__body { padding: 14px; }
	.formateur .leader__name { font-size: 15px; line-height: 21px; }
	.expertise { padding-bottom: 56px; }
	.expertise__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page Actualités (Figma 561:483) et article seul
   ========================================================================== */
.page-hero--actualites .page-hero__bg { object-position: 50% 40%; }
.page-hero--actualites .page-hero__text { max-width: 616px; color: var(--white); }
.magazines--une { padding-top: 56px; }
.magazines__eyebrow { margin-bottom: 64px; }

/* Barre de filtres et recherche. */
.actus__barre { padding-block: 48px; border-bottom: 1px solid #f1f5f9; }
.actus__barre-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.actus-filtres { display: flex; flex-wrap: wrap; gap: 16px; }
.actus-filtre {
	padding: 13px 32px;
	border: 1px solid #f1f5f9;
	border-radius: 999px;
	background: #fdfcfb;
	font: inherit; font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--slate);
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.actus-filtre:hover { border-color: rgba(7, 74, 46, 0.25); }
.actus-filtre.is-active {
	border-color: var(--green-dark); background: var(--green-dark); color: var(--white);
	box-shadow: 0 10px 15px -3px rgba(7, 74, 46, 0.2), 0 4px 6px -4px rgba(7, 74, 46, 0.2);
}
.recherche {
	position: relative; display: flex; align-items: center;
	width: 320px; height: 48px; padding: 0 24px;
	border: 1px solid #f1f5f9; border-radius: 999px; background: #fdfcfb;
	transition: border-color .2s, box-shadow .2s;
}
.recherche:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 136, 75, 0.15); }
.recherche .icon { flex: none; opacity: .6; }
.recherche input {
	flex: 1; min-width: 0; height: 100%; margin-left: 16px;
	border: 0; outline: 0; background: transparent;
	font: inherit; font-size: 14px; color: var(--ink);
}
.recherche input::placeholder { font-size: 10px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(15, 23, 42, 0.5); }

/* Marge basse : les sections coupent ce qui dépasse, l'ombre des cartes doit s'afficher en entier. */
.actus__groupe { padding-block: 80px 32px; }
.actus__groupe[hidden] { display: none; }
.actus__groupe .section-head { gap: 12px; margin-bottom: 48px; }
.actus__groupe .section-head__lead { padding-top: 4px; font-size: 16px; line-height: 24px; color: #6b7280; }
.actus__evenements { padding-bottom: 96px; }
.actus [hidden] { display: none !important; }
.actus__vide { padding-block: 64px 96px; font-size: 18px; text-align: center; color: var(--muted); }

/* Carte article : photo, étiquette de catégorie, date, titre, résumé, « Lire ». */
.articles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 25px; }
.article-card {
	display: flex; flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.article-card:hover { transform: translateY(-4px); box-shadow: 0 20px 32px -12px rgba(0, 0, 0, 0.2); }
.article-card__img { position: relative; display: block; aspect-ratio: 375 / 265; overflow: hidden; background: #f1f5f9; }
.article-card__img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out, ease); }
.article-card:hover .article-card__img > img { transform: scale(1.04); }
.article-card__cat {
	position: absolute; top: 24px; right: 24px;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	font-size: 8px; line-height: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--slate);
}
.article-card__body { display: flex; flex-direction: column; flex: 1; gap: 24px; padding: 40px; }
.article-card__date { display: flex; align-items: center; gap: 16px; font-size: 9px; line-height: 13.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(15, 23, 42, 0.45); }
.article-card__title { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.6px; color: var(--slate); }
.article-card__title a { transition: color .2s; }
.article-card__title a:hover { color: var(--green-text); }
.article-card__text { flex: 1; font-size: 16px; line-height: 26px; font-weight: 300; color: rgba(15, 23, 42, 0.62); }
.article-card__lire { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding-top: 8px; font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green-dark); }
.article-card__lire .icon { transition: transform .2s; }
.article-card__lire:hover .icon { transform: translateX(4px); }

/* Restez informé : même carte que « Devenir leader », avec un bouton. */
.abonnement .h2 { margin-top: 0; max-width: 860px; text-wrap: balance; }
.abonnement .devenir__text { max-width: 460px; margin-top: 28px; }
.abonnement .btn { margin-top: 44px; }
.abonnement { scroll-margin-top: var(--header-h); }
/* Formulaire d'inscription à la lettre d'information. */
.abonnement-form { display: grid; gap: 16px; width: 100%; max-width: 720px; margin-top: 40px; text-align: left; }
.abonnement-form__ligne {
	display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) auto; gap: 8px;
	padding: 8px; border-radius: 18px; background: var(--grey-50); border: 1.5px solid var(--grey-200);
	transition: border-color .2s, box-shadow .2s;
}
.abonnement-form__ligne:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px rgba(23, 136, 75, 0.15); }
.abonnement-form__ligne input {
	min-width: 0; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--white);
	font: inherit; font-size: 16px; color: var(--ink);
}
.abonnement-form__ligne input:focus { outline: 2px solid rgba(23, 136, 75, 0.35); outline-offset: 0; }
.abonnement .abonnement-form .btn { margin-top: 0; border-radius: 12px; }
.abonnement-form__accord { max-width: 640px; justify-self: center; font-size: 13px; line-height: 20px; }
.abonnement-form__alerte { margin-top: 0; text-align: center; }

/* Article seul. */
.article { padding-block: 40px 24px; }
.article__inner { max-width: 820px; }
.article__head { display: grid; justify-items: start; gap: 16px; }
.article__title { font-size: clamp(30px, 1rem + 2.2vw, 44px); line-height: 1.2; font-weight: 700; letter-spacing: -1px; color: var(--slate); text-wrap: balance; }
.article__photo { margin: 32px 0 0; aspect-ratio: 16 / 9; }
.article__content { margin-top: 40px; }
.article__autres { padding-bottom: 96px; }

@media (max-width: 1024px) {
	.page-hero--actualites .page-hero__bg { aspect-ratio: 3 / 2; object-fit: cover; }
	.articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.recherche { width: 100%; }
}
@media (max-width: 680px) {
	.magazines--une { padding-top: 40px; }
	.magazines__eyebrow { margin-bottom: 28px; }
	.actus__barre { padding-block: 28px; }
	.actus-filtres { gap: 8px; }
	.actus-filtre { padding: 11px 18px; letter-spacing: 1.4px; }
	.actus__groupe { padding-block: 56px 24px; }
	.actus__groupe .section-head { margin-bottom: 32px; }
	.articles__grid { grid-template-columns: 1fr; gap: 24px; }
	.article-card__body { gap: 16px; padding: 28px 24px; }
	.article-card__title { font-size: 21px; line-height: 27px; }
	.actus__evenements, .article__autres { padding-bottom: 64px; }
	.abonnement .btn { margin-top: 28px; }
	.abonnement-form { margin-top: 28px; }
	.abonnement-form__ligne { grid-template-columns: 1fr; padding: 10px; }
	.abonnement .abonnement-form .btn { width: 100%; }
}

/* ==========================================================================
   Page Interviews (Figma 872:342) — reprend les filtres et cartes de la page Actualités
   ========================================================================== */
.page-hero--interviews .page-hero__bg { object-position: 50% 30%; }
.page-hero--interviews .page-hero__text { max-width: 560px; color: var(--white); }

/* Bouton lecture (rond vert) posé sur les images. */
.play {
	position: absolute; left: 50%; top: 50%; z-index: 1;
	display: grid; place-items: center;
	width: 48px; height: 48px; margin: -24px 0 0 -24px;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	background: var(--green);
	backdrop-filter: blur(2px);
	transition: transform .25s var(--ease-out, ease), box-shadow .25s;
}
.play .icon { margin-left: 3px; }
.play--grand {
	width: 80px; height: 80px; margin: -40px 0 0 -40px;
	border: 0;
	box-shadow: 0 0 0 8px rgba(23, 136, 75, 0.25), 0 8px 32px rgba(23, 136, 75, 0.4);
}
a:hover > .play { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(23, 136, 75, 0.25), 0 8px 32px rgba(23, 136, 75, 0.45); }

/* L'interview du moment. */
.itw-une { padding-block: 72px 56px; }
.itw-une .section-head { gap: 12px; margin-bottom: 56px; }
.itw-une__card {
	display: grid; grid-template-columns: minmax(0, 633fr) minmax(0, 546fr); align-items: stretch;
	overflow: hidden;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #f9fafb;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}
.itw-une__media { position: relative; display: block; min-height: 420px; aspect-ratio: 633 / 636; overflow: hidden; }
.itw-une__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .6s var(--ease-out, ease); }
.itw-une__media:hover > img { transform: scale(1.03); }
.itw-une__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 50%); pointer-events: none; }
.itw-une__theme {
	position: absolute; left: 20px; top: 20px; z-index: 1;
	padding: 6px 12px; border-radius: 999px; background: var(--green);
	font-size: 12px; line-height: 16px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--white);
}
.itw-une__duree {
	position: absolute; left: 20px; bottom: 20px; z-index: 1;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px; border-radius: 12px;
	background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);
	font-size: 12px; line-height: 16px; color: var(--white);
}
.itw-une__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px; padding: 48px; }
.itw-une__title { font-size: clamp(24px, 1rem + 1vw, 30px); line-height: 1.25; font-weight: 700; letter-spacing: -0.75px; color: var(--ink); }
.itw-une__text { font-size: 16px; line-height: 26px; color: #4b5563; }
.itw-une__personne { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 360px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: var(--white); }
.itw-une__personne .avatar { border: 2px solid var(--green); }
.itw-une__body .btn { margin-top: 4px; }
.avatar { flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.itw-personne__nom { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink); }
.itw-personne__role { font-size: 12px; line-height: 16px; color: var(--green-text); }

/* Cartes d'interview : cartes article avec bouton lecture et personne interviewée. */
.itw-card .article-card__title { font-size: 22px; line-height: 29px; }
.itw-card__personne { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.itw-card__personne .itw-personne__nom { font-size: 12px; line-height: 16px; }
.itws__theme { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); }
.itws__theme button { padding: 4px 12px; border: 1px solid var(--grey-200); border-radius: 999px; background: none; font: inherit; font-size: 12px; cursor: pointer; }
.itws__theme button:hover { border-color: var(--green); color: var(--green-text); }
.itws__plus { display: flex; justify-content: center; margin-top: 48px; }
.btn-plus {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 14px 32px;
	border: 1px solid #e5e7eb; border-radius: 6px; background: var(--white);
	font: inherit; font-size: 14px; line-height: 20px; color: var(--ink);
	cursor: pointer; transition: border-color .2s, color .2s;
}
.btn-plus:hover { border-color: var(--green); color: var(--green-text); }
.btn-plus[hidden] { display: none; }

/* Explorer par catégorie : quatre cartes photo. */
.thematiques { padding-block: 80px 96px; }
.thematiques .section-head { gap: 12px; margin-bottom: 56px; }
.thematiques .section-head__lead { max-width: 400px; font-size: 16px; line-height: 24px; color: #6b7280; }
.thematiques__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.thematique {
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px;
	aspect-ratio: 275 / 312; padding: 24px;
	overflow: hidden; border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	color: var(--white);
}
.thematique > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.thematique::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0)); }
.thematique:hover > img { transform: scale(1.06); }
.thematique__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green); }
.thematique__nom { padding-top: 4px; font-size: 18px; line-height: 22px; font-weight: 700; }
.thematique__pied { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.65); }
.thematique__fleche { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(23, 136, 75, 0.25); transition: background-color .2s, transform .2s; }
.thematique:hover .thematique__fleche { background: var(--green); transform: translateX(3px); }
.thematique:hover .thematique__fleche .icon { filter: brightness(0) invert(1); }

/* Lecteur vidéo (YouTube, Vimeo ou MP4) dans la visionneuse. */
.lightbox--video .lightbox__figure { width: min(1100px, 100vw - 32px); padding: 72px 0; }
.lightbox__video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }

@media (max-width: 1024px) {
	.page-hero--interviews .page-hero__bg { aspect-ratio: 3 / 2; object-fit: cover; }
	.thematiques__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.itw-une__card { grid-template-columns: 1fr; }
	.itw-une__media { min-height: 0; aspect-ratio: 4 / 3; }
	.itw-une__body { padding: 32px 28px; gap: 20px; }
}
@media (max-width: 680px) {
	.itw-une { padding-block: 48px 32px; }
	.itw-une .section-head { margin-bottom: 32px; }
	.itw-une__media { aspect-ratio: 1 / 1; }
	.itw-une__body { padding: 24px 20px 28px; }
	.itw-card .article-card__title { font-size: 20px; line-height: 26px; }
	.thematiques { padding-block: 56px 64px; }
	.thematiques .section-head { margin-bottom: 32px; }
	.thematiques__grid { gap: 14px; }
	.thematique { padding: 16px; }
	.thematique__nom { font-size: 16px; }
	.lightbox--video .lightbox__figure { padding: 64px 0; }
}

/* ==========================================================================
   Page BSuccess TV (Figma 1069:435)
   ========================================================================== */
.page-hero--btv .page-hero__text { max-width: 560px; color: var(--white); }
.btv-h2 { font-size: clamp(28px, 1rem + 1.6vw, 36px); line-height: 1.35; font-weight: 700; letter-spacing: -0.6px; color: var(--ink); text-wrap: balance; }
.btv-h2--moyen { font-size: clamp(26px, 1rem + 1.2vw, 30px); line-height: 1.2; }
.btv-h2--grand { font-size: clamp(32px, 1rem + 2.4vw, 48px); line-height: 1.1; letter-spacing: -1px; }
.btv-centre { text-align: center; }
.btv-lead { font-size: 18px; line-height: 29px; color: #6b7280; }
.btv-lead strong { font-weight: 700; color: var(--ink); }

/* Blocs photo + texte. */
.btv-split { padding-block: 128px; }
.btv-split__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.btv-split__photo { aspect-ratio: 584 / 500; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.btv-split__text { display: grid; justify-items: start; gap: 28px; }
.btv-checks { display: grid; gap: 16px; }
.btv-checks li { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
.btv-checks__icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(23, 136, 75, 0.1); }

/* Ce que BSuccessTV rend visible. */
.btv-visible { padding-block: 96px; background: #f8f9fa; }
.btv-visible__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.btv-carte {
	display: grid; justify-items: start; align-content: start; gap: 12px;
	padding: 32px 32px 40px;
	border: 1px solid #e5e7eb; border-radius: 12px; background: var(--white);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.btv-carte:hover { transform: translateY(-4px); box-shadow: 0 16px 28px -12px rgba(7, 74, 46, 0.2); }
.btv-carte__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(23, 136, 75, 0.1); }
.btv-carte__titre { margin-top: 12px; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--ink); }
.btv-carte__texte { font-size: 14px; line-height: 23px; color: #6b7280; }

/* Ligne éditoriale : rail défilant avec flèches. */
.btv-editorial { padding-block: 96px; }
.btv-editorial__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.btv-editorial__head > div:first-child { display: grid; gap: 8px; justify-items: start; }
.btv-fleches { display: flex; gap: 8px; }
.btv-fleches[data-peu] { display: none; }
.btv-fleche { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e5e7eb; border-radius: 50%; background: var(--white); cursor: pointer; transition: border-color .2s, background-color .2s; }
.btv-fleche:hover { border-color: var(--green); background: rgba(23, 136, 75, 0.06); }
.btv-fleche:disabled { opacity: .35; cursor: default; }
.btv-editorial__rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 3); gap: 32px;
	margin-top: 64px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.btv-editorial__rail::-webkit-scrollbar { display: none; }
.btv-prog { display: grid; gap: 8px; align-content: start; scroll-snap-align: start; }
.btv-prog__img { aspect-ratio: 389 / 292; overflow: hidden; border-radius: 16px; }
.btv-prog__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.btv-prog:hover .btv-prog__img img { transform: scale(1.04); }
.btv-prog__titre { padding-top: 16px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink); }
.btv-prog__texte { font-size: 14px; line-height: 23px; color: #6b7280; }

/* Programmes & contenus. */
.btv-programmes { padding-block: 64px 96px; background: #f9fafb; }
.btv-une {
	position: relative; display: block; margin-top: 64px;
	aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: 24px; background: #101010;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.btv-une__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .6s var(--ease-out, ease); }
.btv-une:hover .btv-une__img { transform: scale(1.03); }
.btv-une::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); }
.btv-play {
	position: absolute; left: 50%; top: 50%; z-index: 1;
	display: grid; place-items: center;
	width: 56px; height: 56px; translate: -50% -50%;
	border-radius: 50%; background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.1);
	transition: transform .25s var(--ease-out, ease);
}
.btv-play .icon { margin-left: 4px; }
.btv-play--grand { width: 96px; height: 96px; box-shadow: 0 0 40px rgba(23, 136, 75, 0.5), 0 25px 50px rgba(0, 0, 0, 0.25); }
.btv-play--grand .icon { margin-left: 6px; }
a:hover .btv-play { transform: scale(1.08); }
.btv-une__texte { position: absolute; left: 32px; right: 32px; bottom: 32px; z-index: 1; display: grid; justify-items: start; gap: 12px; color: var(--white); }
.btv-une__prog { padding: 8px 16px; border-radius: 999px; background: var(--green); font-size: 14px; line-height: 20px; font-weight: 700; }
.btv-une__titre { font-size: clamp(22px, 1rem + 1vw, 30px); line-height: 1.2; font-weight: 700; }
.btv-une__duree { font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.85); }
.btv-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.btv-video {
	display: block; overflow: hidden; height: 100%;
	border: 1px solid #f3f4f6; border-radius: 16px; background: var(--white);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.btv-video:hover { transform: translateY(-4px); box-shadow: 0 20px 32px -12px rgba(0, 0, 0, 0.2); }
.btv-video__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #e5e7eb; }
.btv-video__img > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.btv-video__duree { position: absolute; right: 12px; bottom: 12px; padding: 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.85); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--white); }
.btv-video__corps { display: grid; justify-items: start; gap: 12px; padding: 24px; }
.btv-video__prog { padding: 4px 12px; border-radius: 999px; background: rgba(23, 136, 75, 0.1); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--green-text); }
.btv-video__titre { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ink); }

/* Outil direct de développement. */
.btv-outil { padding-block: 96px; }
.btv-outil__photo { aspect-ratio: 545 / 400; }
.btv-atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.btv-atouts li { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 12px; font-size: 14px; line-height: 20px; color: var(--ink); transition: border-color .2s, background-color .2s; }
.btv-atouts li:hover { border-color: rgba(23, 136, 75, 0.35); background: rgba(23, 136, 75, 0.04); }

/* Dimension africaine. */
.btv-afrique { padding-block: 96px; background: #f8f9fa; }
.btv-afrique__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.btv-afrique__photo { margin: 0; aspect-ratio: 700 / 400; overflow: hidden; border-radius: 24px; }
.btv-afrique__photo img { width: 100%; height: 100%; object-fit: cover; }
.btv-lien { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--green-text); }
.btv-lien .icon { transition: transform .2s; }
.btv-lien:hover .icon { transform: translateX(4px); }

/* Une vision en construction : feuille de route animée.
   La ligne verte se remplit jusqu'à l'étape en cours, les étapes surgissent l'une après l'autre,
   l'étape en cours pulse. Sans .is-vu (animations coupées), tout s'affiche directement. */
.btv-vision { padding-block: 96px; background: linear-gradient(to bottom, var(--white), #f6faf7); }
.btv-vision .btv-vision__eyebrow { display: table; margin: 0 auto 12px; }
.btv-etapes {
	position: relative;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
	margin: 72px 0 0; padding: 0; list-style: none;
}
.btv-etapes__rail {
	position: absolute; left: 12.5%; right: 12.5%; top: 31px;
	height: 4px; border-radius: 4px;
	background: repeating-linear-gradient(to right, #dfe5e1 0 10px, transparent 10px 16px);
}
.btv-etapes__fill {
	position: absolute; left: 0; top: 0; bottom: 0;
	width: var(--avance, 33%);
	border-radius: 4px;
	background: linear-gradient(90deg, var(--green-dark), var(--green) 70%, #3fb877);
	background-size: 200% 100%;
}
/* Point lumineux au bout de la ligne. */
.btv-etapes__fill::after {
	content: ""; position: absolute; right: -6px; top: 50%;
	width: 12px; height: 12px; margin-top: -6px;
	border-radius: 50%; background: var(--white);
	box-shadow: 0 0 0 4px var(--green), 0 0 18px 4px rgba(23, 136, 75, 0.55);
}
.btv-etape { position: relative; display: grid; justify-items: center; gap: 20px; text-align: center; }
.btv-etape__num {
	position: relative; z-index: 1;
	display: grid; place-items: center;
	width: 66px; height: 66px;
	border: 2px dashed #cfd8d2; border-radius: 50%;
	background: var(--white);
	font-size: 18px; font-weight: 700; color: #94a3a0;
	transition: transform .3s var(--ease-out, ease);
}
.btv-etape--faite .btv-etape__num { border: 0; background: linear-gradient(135deg, var(--green), var(--green-dark)); color: var(--white); box-shadow: 0 12px 24px -8px rgba(23, 136, 75, 0.55); }
.btv-etape--en-cours .btv-etape__num { border: 3px solid var(--green); color: var(--green-text); box-shadow: 0 10px 24px -10px rgba(23, 136, 75, 0.5); }
.btv-etape--en-cours .btv-etape__num::before {
	content: ""; position: absolute; inset: -8px;
	border: 2px solid var(--green); border-radius: 50%; opacity: 0;
}
.btv-etape__carte {
	display: grid; justify-items: center; gap: 10px;
	width: 100%; padding: 24px 20px 26px;
	border: 1px solid #e8eeea; border-radius: 16px;
	background: var(--white);
	box-shadow: 0 6px 18px -10px rgba(7, 74, 46, 0.18);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s, border-color .3s;
}
.btv-etape:hover .btv-etape__carte { transform: translateY(-6px); border-color: rgba(23, 136, 75, 0.3); box-shadow: 0 20px 34px -14px rgba(7, 74, 46, 0.3); }
.btv-etape:hover .btv-etape__num { transform: scale(1.08); }
.btv-etape--en-cours .btv-etape__carte { border-color: rgba(23, 136, 75, 0.35); background: linear-gradient(to bottom, #f1f9f4, var(--white)); }
.btv-etape__statut {
	padding: 4px 12px; border-radius: 999px;
	background: #f1f4f2;
	font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #6b7a74;
}
.btv-etape--faite .btv-etape__statut { background: rgba(23, 136, 75, 0.12); color: var(--green-text); }
.btv-etape--en-cours .btv-etape__statut { background: var(--green); color: var(--white); }
.btv-etape__titre { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); }
.btv-etape__texte { max-width: 240px; font-size: 14px; line-height: 21px; color: #6b7280; }

/* Animation à l'arrivée à l'écran. */
.anim-on [data-timeline-btv]:not(.is-vu) .btv-etapes__fill { width: 0; }
.anim-on [data-timeline-btv]:not(.is-vu) .btv-etape { opacity: 0; transform: translateY(28px); }
.anim-on [data-timeline-btv]:not(.is-vu) .btv-etape__num { transform: scale(.4); }
[data-timeline-btv].is-vu .btv-etapes__fill {
	animation: btv-remplir 1.4s cubic-bezier(.65, 0, .35, 1) .35s both, btv-reflet 3s linear 1.8s infinite;
}
[data-timeline-btv].is-vu .btv-etape { animation: btv-surgir .7s cubic-bezier(.34, 1.4, .64, 1) calc(.2s + var(--i) * .22s) both; }
[data-timeline-btv].is-vu .btv-etape__num { animation: btv-pop .6s cubic-bezier(.34, 1.8, .64, 1) calc(.3s + var(--i) * .22s) both; }
[data-timeline-btv].is-vu .btv-etape__coche { stroke-dasharray: 24; animation: btv-coche .5s ease-out .9s both; }
[data-timeline-btv].is-vu .btv-etape--en-cours .btv-etape__num::before { animation: btv-pulse 2s ease-out 1.8s infinite; }
@keyframes btv-remplir { from { width: 0; } to { width: var(--avance, 33%); } }
@keyframes btv-reflet { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes btv-surgir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes btv-pop { from { transform: scale(.4); } to { transform: none; } }
@keyframes btv-coche { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes btv-segment { from { transform: scaleY(0); } to { transform: none; } }
@keyframes btv-pulse { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.45); } }

/* Signature : bandeau sombre. */
.btv-signature { padding-block: 128px; background: #0f1a14; isolation: isolate; }
.btv-signature::before, .btv-signature::after {
	content: ""; position: absolute; z-index: -1; width: 384px; height: 384px;
	border-radius: 50%; background: var(--green); filter: blur(60px); opacity: .14;
}
.btv-signature::before { left: 0; top: 0; }
.btv-signature::after { right: 0; bottom: 0; }
.btv-signature__inner { display: grid; gap: 32px; max-width: 900px; text-align: center; }
.btv-signature__titre { max-width: 760px; margin-inline: auto; font-size: clamp(36px, 1rem + 3.4vw, 60px); line-height: 1.05; font-weight: 700; color: var(--white); text-wrap: pretty; }
.btv-signature__texte { font-size: clamp(18px, 1rem + .6vw, 24px); line-height: 1.6; color: rgba(255, 255, 255, 0.8); text-wrap: balance; }

/* CTA final : carte verte. */
.btv-cta { padding-block: 96px; }
.btv-cta__carte {
	position: relative; overflow: hidden;
	display: grid; justify-items: center; gap: 32px;
	max-width: 976px; margin-inline: auto; padding: 80px 48px;
	border-radius: 32px; background: var(--green);
	box-shadow: 0 25px 50px -12px rgba(23, 136, 75, 0.35);
	text-align: center;
}
.btv-cta__carte::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border: 28px solid rgba(255, 255, 255, 0.08); border-radius: 50%; }
.btv-cta__titre { position: relative; max-width: 820px; font-size: clamp(30px, 1rem + 2.4vw, 48px); line-height: 1.05; font-weight: 700; color: var(--white); text-wrap: balance; }
.btv-cta__boutons { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.btv-cta__btn { padding: 16px 40px; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: var(--white); }
.btv-cta__btn:hover { background: rgba(255, 255, 255, 0.12); }
.btv-cta__btn--plein { border-color: var(--white); background: var(--white); color: var(--green-text); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.btv-cta__btn--plein:hover { background: #eaf4ee; }

@media (max-width: 1024px) {
	.btv-visible__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.btv-editorial__rail { grid-auto-columns: calc((100% - 32px) / 2); }
	.btv-fleches[data-peu] { display: flex; }
}
@media (max-width: 900px) {
	.btv-split { padding-block: 72px; }
	.btv-split__grid, .btv-afrique__grid { grid-template-columns: 1fr; gap: 40px; }
	.btv-split__grid--inverse .btv-split__photo { order: -1; }
	.btv-videos { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 24px; }
	/* Tablette et téléphone : la feuille de route devient verticale ; un segment relie chaque étape à la suivante
	   (plein et vert après une étape réalisée, en pointillés sinon). */
	.btv-etapes { grid-template-columns: 1fr; gap: 20px; max-width: 560px; margin-inline: auto; }
	.btv-etapes__rail { display: none; }
	.btv-etape { grid-template-columns: 66px minmax(0, 1fr); align-items: start; gap: 18px; text-align: left; }
	.btv-etape:not(:last-child)::after {
		content: ""; position: absolute; left: 31px; top: 66px; bottom: -20px; width: 4px;
		background: repeating-linear-gradient(to bottom, #dfe5e1 0 10px, transparent 10px 16px);
	}
	.btv-etape--faite:not(:last-child)::after { background: linear-gradient(180deg, var(--green-dark), var(--green)); transform-origin: top; }
	.btv-etape__carte { justify-items: start; }
	.btv-etape__texte { max-width: none; }
	.anim-on [data-timeline-btv]:not(.is-vu) .btv-etape--faite::after { transform: scaleY(0); }
	[data-timeline-btv].is-vu .btv-etape--faite::after { animation: btv-segment .8s cubic-bezier(.65, 0, .35, 1) .7s both; }
}
@media (max-width: 680px) {
	.btv-split, .btv-outil, .btv-visible, .btv-editorial, .btv-afrique, .btv-vision, .btv-cta { padding-block: 56px; }
	.btv-programmes { padding-block: 48px 64px; }
	.btv-visible__grid { grid-template-columns: 1fr; margin-top: 36px; }
	.btv-editorial__rail { grid-auto-columns: 82%; gap: 16px; margin-top: 32px; }
	.btv-une { margin-top: 32px; aspect-ratio: 4 / 5; border-radius: 18px; }
	.btv-une__texte { left: 20px; right: 20px; bottom: 20px; }
	.btv-play--grand { width: 72px; height: 72px; }
	.btv-play--grand .icon { width: 36px; height: 36px; }
	.btv-videos { margin-top: 32px; }
	.btv-atouts { grid-template-columns: 1fr; }
	.btv-etapes { margin-top: 40px; }
	.btv-etape { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
	.btv-etape__num { width: 56px; height: 56px; font-size: 16px; }
	.btv-etape:not(:last-child)::after { left: 26px; top: 56px; }
	.btv-etape__carte { padding: 18px 18px 20px; }
	.btv-signature { padding-block: 80px; }
	.btv-cta__carte { padding: 48px 22px; border-radius: 22px; gap: 24px; }
	.btv-cta__boutons { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
}

/* ==========================================================================
   Page Contact (pas de maquette : composée avec les éléments du site)
   ========================================================================== */
.page-hero--contact .page-hero__bg { object-position: 50% 40%; }

.contact { padding-block: 96px; background: var(--grey-50); scroll-margin-top: var(--header-h); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.contact__infos { display: grid; gap: 20px; justify-items: start; }
.contact__intro { font-size: 18px; line-height: 27px; color: var(--muted); }
.contact__liste { display: grid; gap: 14px; width: 100%; margin-top: 12px; }
.contact-info {
	display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start;
	padding: 20px; border-radius: var(--radius); background: var(--white);
	border: 1px solid var(--grey-200);
	transition: border-color .25s, box-shadow .25s, transform .25s;
}
.contact-info:hover { border-color: rgba(23, 136, 75, 0.35); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.contact-info__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--green-10); }
.contact-info__label { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--green-text); }
.contact-info__valeur { display: block; margin-top: 4px; font-size: 17px; line-height: 25px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
a.contact-info__valeur:hover { color: var(--green-text); text-decoration: underline; }
.contact-info__lien { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--green-text); text-decoration: underline; text-underline-offset: 3px; }

.contact__carte {
	padding: 48px; border-radius: 24px; background: var(--white);
	box-shadow: 0 30px 60px -20px rgba(7, 74, 46, 0.25);
	border-top: 6px solid var(--green);
}
.contact__obligatoire { margin-top: 8px; font-size: 14px; color: var(--pale); }
.contact__alerte { margin-top: 20px; padding: 14px 18px; border-radius: 12px; font-weight: 500; }
.contact__alerte--succes { background: var(--green-10); color: var(--green-dark); border: 1px solid rgba(23, 136, 75, 0.3); }
.contact__alerte--erreur { background: #fdecec; color: #8a1c1c; border: 1px solid #f3b9b9; }

.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.champ { display: grid; gap: 8px; }
.champ--large, .champ--accord, .contact-form__envoyer { grid-column: 1 / -1; }
.champ label { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-2); }
.requis { color: var(--green-text); }
.champ input, .champ select, .champ textarea {
	width: 100%; padding: 14px 16px;
	border: 1.5px solid var(--grey-200); border-radius: 12px; background: var(--grey-50);
	font: inherit; font-size: 16px; color: var(--ink);
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.champ textarea { resize: vertical; min-height: 150px; }
.champ select {
	appearance: none; padding-right: 44px; cursor: pointer;
	background: var(--grey-50) url("../img/chevron-down.svg") no-repeat right 16px center / 14px;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
	outline: none; border-color: var(--green); background: var(--white);
	box-shadow: 0 0 0 4px rgba(23, 136, 75, 0.15);
}
.champ input:user-invalid, .champ textarea:user-invalid { border-color: #c0392b; }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.champ--accord { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; line-height: 21px; color: var(--muted); cursor: pointer; }
.champ--accord input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--green); cursor: pointer; }
.champ--accord a { color: var(--green-text); text-decoration: underline; }
.contact-form__envoyer { justify-self: start; margin-top: 4px; }

.raccourcis { padding-block: 96px 112px; }
.raccourcis__tete { display: grid; gap: 16px; justify-items: start; margin-bottom: 48px; }
.raccourcis__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.raccourci {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.raccourci:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.raccourci__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.raccourci:hover .raccourci__img { transform: scale(1.05); }
.raccourci__corps { display: grid; gap: 10px; flex: 1; align-content: start; padding: 24px 24px 28px; background: var(--white); }
.raccourci__corps p { color: var(--muted); line-height: 24px; }
.raccourci__lien { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 700; color: var(--green-text); }
.raccourci__lien::after { content: ""; position: absolute; inset: -1000px; } /* toute la carte est cliquable */
.raccourci__lien:focus-visible { outline: none; }
.raccourci:focus-within { outline: 3px solid var(--green); outline-offset: 3px; }

@media (max-width: 1024px) {
	.page-hero--contact .page-hero__bg { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
	.contact { padding-block: 64px; }
	.contact__grid { grid-template-columns: 1fr; gap: 48px; }
	.raccourcis { padding-block: 64px 80px; }
	.raccourcis__grille { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 600px) {
	.contact__carte { padding: 28px 20px; border-radius: 20px; }
	.contact-form { grid-template-columns: 1fr; gap: 16px; }
	.contact-form__envoyer { justify-self: stretch; }
	.contact-info { padding: 16px; gap: 14px; grid-template-columns: 44px minmax(0, 1fr); }
	.contact-info__ico { width: 44px; height: 44px; }
}

/* ==========================================================================
   Agenda /evenements/ et page d'un événement (pas de maquette)
   ========================================================================== */
.page-hero--evenements .page-hero__bg { object-position: 50% 35%; }

.agenda { padding-block: 96px 80px; scroll-margin-top: var(--header-h); }
.agenda__tete { margin-bottom: 48px; }
.agenda__tete .section-head__lead { max-width: 460px; }
.agenda__liste { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }

.rdv {
	position: relative;
	display: grid; grid-template-columns: 112px 340px minmax(0, 1fr); gap: 32px; align-items: center;
	padding: 24px; border-radius: 24px; background: var(--white);
	border: 1px solid var(--grey-200); box-shadow: var(--shadow-lg);
	transition: transform .3s var(--ease-out, ease), box-shadow .3s, border-color .3s;
}
.rdv:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: rgba(23, 136, 75, 0.3); }
.rdv--prochain { border: 2px solid var(--green); }
.rdv--prochain::before {
	content: "Prochain rendez-vous"; position: absolute; top: -14px; left: 32px;
	padding: 4px 14px; border-radius: 999px; background: var(--green);
	font-size: 12px; line-height: 20px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--white);
}
html[lang^="en"] .rdv--prochain::before { content: "Next event"; }
.rdv__date {
	display: grid; justify-items: center; align-content: center; gap: 2px;
	aspect-ratio: 1; border-radius: 20px;
	background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%); color: var(--white);
	box-shadow: 0 14px 28px -12px rgba(7, 74, 46, 0.55);
}
.rdv__jour { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -1px; }
.rdv__mois { font-size: 15px; line-height: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.rdv__annee { font-size: 13px; line-height: 16px; opacity: .75; }
.rdv__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; }
.rdv__img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.rdv:hover .rdv__img > img { transform: scale(1.05); }
.rdv__corps { display: grid; gap: 14px; justify-items: start; }
.rdv__etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.rdv__compte, .rdv__badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px;
	font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.rdv__compte { background: var(--green-10); color: var(--green-text); }
.rdv__compte::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: rdv-pouls 1.8s ease-out infinite; }
@keyframes rdv-pouls {
	0% { box-shadow: 0 0 0 0 rgba(23, 136, 75, 0.55); }
	100% { box-shadow: 0 0 0 8px rgba(23, 136, 75, 0); }
}
.rdv__badge { background: var(--grey-100); color: var(--ink-2); }
.rdv__badge--passe { background: var(--ink-2); color: var(--white); }
.rdv__titre { font-size: 26px; line-height: 32px; font-weight: 700; color: var(--ink); text-wrap: balance; }
.rdv__titre a:hover { color: var(--green-text); }
.rdv__texte { color: var(--muted); line-height: 24px; }
.rdv__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 6px; }
.rdv__details { font-weight: 700; color: var(--green-text); text-decoration: underline; text-underline-offset: 4px; }

.agenda__vide {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center;
	padding: 40px; border-radius: 24px; background: var(--grey-50); border: 2px dashed rgba(23, 136, 75, 0.3);
}
.agenda__vide-ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--green-10); }
.agenda__vide p { margin-top: 8px; max-width: 560px; color: var(--muted); line-height: 24px; }

.agenda-passes { padding-block: 80px 112px; background: var(--grey-50); }
.agenda-passes .agenda__tete { align-items: end; }
.agenda-passes .evenements__grid > [hidden] { display: none; }

.agenda-cta__boutons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 44px; }
.agenda-cta .btn { margin-top: 0; }
.agenda-cta__second { font-weight: 700; color: var(--green-text); text-decoration: underline; text-underline-offset: 4px; }

/* Page d'un événement. */
.evenement { padding-block: 40px 64px; overflow: visible; } /* pour la carte « collante » */
.evenement__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.evenement__infos {
	position: sticky; top: calc(var(--header-h) + 24px);
	display: grid; gap: 18px; justify-items: start;
	padding: 28px; border-radius: 24px; background: var(--white);
	box-shadow: 0 30px 60px -20px rgba(7, 74, 46, 0.25); border-top: 6px solid var(--green);
}
.rdv__date--grand { width: 120px; }
.evenement__meta { font-size: 16px; line-height: 24px; color: var(--text); gap: 12px; }
.evenement__meta li { align-items: flex-start; }
.evenement__meta .icon { margin-top: 3px; flex: none; }
.evenement__note { color: var(--muted); line-height: 24px; }
.evenement__infos .btn { width: 100%; }
.evenement__agenda { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--green-text); }
.evenement__agenda:hover { text-decoration: underline; }

@media (max-width: 1100px) {
	.rdv { grid-template-columns: 96px minmax(0, 1fr); }
	.rdv__img { grid-column: 2; grid-row: 1; }
	.rdv__corps { grid-column: 1 / -1; }
	.rdv__date { align-self: start; }
}
@media (max-width: 1024px) {
	.page-hero--evenements .page-hero__bg { aspect-ratio: 3 / 2; object-fit: cover; }
	.agenda { padding-block: 64px; }
	.agenda-passes { padding-block: 64px 80px; }
	.agenda__vide { grid-template-columns: 1fr; justify-items: start; padding: 28px; }
	.evenement__grid { grid-template-columns: 1fr; gap: 32px; }
	.evenement__infos { position: static; }
}
@media (max-width: 680px) {
	.rdv { grid-template-columns: 1fr; gap: 18px; padding: 16px 16px 22px; }
	.rdv__date { grid-auto-flow: column; justify-self: start; align-items: baseline; gap: 8px; aspect-ratio: auto; padding: 10px 16px; border-radius: 14px; position: absolute; top: 28px; left: 28px; z-index: 1; }
	.rdv__jour { font-size: 26px; }
	.rdv__img { grid-column: 1; }
	.rdv__titre { font-size: 22px; line-height: 28px; }
	.rdv__actions .btn { width: 100%; }
	.rdv--prochain::before { left: 20px; }
	.agenda-cta__boutons { flex-direction: column; align-items: stretch; }
	.rdv__date--grand { position: static; }
}
@media (prefers-reduced-motion: reduce) {
	.rdv__compte::before { animation: none; }
}

/* ==========================================================================
   Page Programmes /modele/programmes/ (pas de maquette)
   ========================================================================== */
.page-hero--programmes .page-hero__bg { object-position: 50% 30%; }

/* Frise du parcours : une ligne qui se remplit, des ronds qui apparaissent l'un après l'autre. */
.parcours { padding-block: 96px 72px; scroll-margin-top: var(--header-h); }
.parcours .section-head { margin-bottom: 56px; }
.parcours__frise {
	position: relative;
	display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
	margin: 0; padding: 0; list-style: none;
}
.parcours__frise::before, .parcours__frise::after {
	content: ""; position: absolute; top: 44px; left: calc(50% / var(--n)); right: calc(50% / var(--n));
	height: 4px; border-radius: 4px; background: var(--grey-200);
}
.parcours__frise::after {
	background: linear-gradient(90deg, var(--green), var(--green-2));
	transform-origin: left; transform: scaleX(1);
}
.parcours__etape { position: relative; z-index: 1; display: grid; justify-items: center; }
.parcours__etape a { display: grid; justify-items: center; gap: 16px; text-align: center; }
.parcours__rond {
	position: relative; display: grid; place-items: center;
	width: 92px; height: 92px; border-radius: 50%;
	background: var(--white); border: 3px solid var(--green);
	box-shadow: 0 14px 30px -14px rgba(7, 74, 46, 0.5);
	transition: transform .3s var(--ease-out, ease), background .3s;
}
.parcours__num {
	position: absolute; top: -4px; right: -4px;
	display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--green-dark); color: var(--white); font-size: 13px; font-weight: 700;
	border: 3px solid var(--white);
}
.parcours__nom { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); transition: color .2s; }
.parcours__etape a:hover .parcours__rond { transform: translateY(-6px) scale(1.04); background: var(--green-10); }
.parcours__etape a:hover .parcours__nom { color: var(--green-text); }

@media (prefers-reduced-motion: no-preference) {
	.js .parcours__frise::after { transform: scaleX(0); transition: transform 1.6s var(--ease-out, ease) .2s; }
	.js .parcours__frise.is-vu::after { transform: scaleX(1); }
	.js .parcours__etape { opacity: 0; transform: translateY(18px) scale(.9); transition: opacity .6s var(--ease-out, ease), transform .6s var(--ease-out, ease); transition-delay: calc(.25s + var(--i) * .28s); }
	.js .parcours__frise.is-vu .parcours__etape { opacity: 1; transform: none; }
}

/* Blocs programmes. */
.programmes { padding-block: 24px 112px; }
.programmes__liste { display: grid; gap: 112px; }
.programme {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center;
	scroll-margin-top: calc(var(--header-h) + 24px);
}
.programme--inverse .programme__photo { order: 2; }
.programme__photo { position: relative; margin: 0; }
.programme__photo > img {
	width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 70%; border-radius: 24px;
	box-shadow: var(--shadow-xl);
}
.programme__photo::before {
	content: ""; position: absolute; inset: 28px -28px -28px 28px; z-index: -1;
	border-radius: 24px; background: var(--green-10);
}
.programme--inverse .programme__photo::before { inset: 28px 28px -28px -28px; }
.programme__num {
	position: absolute; left: 24px; bottom: 20px;
	font-size: 88px; line-height: 1; font-weight: 700; letter-spacing: -3px;
	color: rgba(255, 255, 255, 0.92); text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.programme__corps { display: grid; gap: 20px; justify-items: start; }
.programme__etape {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--green-text);
}
.programme__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green-10); }
.programme__titre { font-size: clamp(28px, 1rem + 1.8vw, 40px); line-height: 1.2; font-weight: 700; color: var(--ink); text-wrap: balance; }
.programme__accroche { font-size: 20px; line-height: 30px; font-weight: 500; color: var(--ink-2); }
.programme__texte { color: var(--muted); font-size: 16px; line-height: 26px; }
.programme__fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; }
.programme__fiche > div { padding: 14px 16px; border-radius: 14px; background: var(--grey-50); border: 1px solid var(--grey-200); }
.programme__fiche dt { font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--green-text); }
.programme__fiche dd { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.programme__points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.programme__points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 24px; color: var(--text); }
.programme__points .icon { margin-top: 2px; }
.programme .btn { margin-top: 8px; }

/* Comment rejoindre : fond vert foncé. */
.rejoindre { padding-block: 112px; background: radial-gradient(120% 120% at 0% 0%, #0b6b40 0%, var(--green-dark) 55%, #05331f 100%); color: var(--white); }
.rejoindre .section-head { margin-bottom: 56px; }
.rejoindre__eyebrow { color: #9fe0bb; border-color: #9fe0bb; }
.rejoindre__titre { color: var(--white); }
.rejoindre__etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.rejoindre__etape {
	display: grid; gap: 12px; align-content: start;
	padding: 32px 28px; border-radius: 20px;
	background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
	transition: background .3s, transform .3s var(--ease-out, ease);
}
.rejoindre__etape:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-4px); }
.rejoindre__num { font-size: 40px; line-height: 1; font-weight: 700; color: #9fe0bb; }
.rejoindre__etape .h3 { color: var(--white); }
.rejoindre__etape p { color: rgba(255, 255, 255, 0.78); line-height: 24px; }
.rejoindre__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 56px; }
.rejoindre__btn { background: var(--white); color: var(--green-text); padding: 20px 36px; }
.rejoindre__btn:hover { background: #eaf4ee; }
.rejoindre .btn--outline { padding: 18px 36px; }

@media (max-width: 1024px) {
	.page-hero--programmes .page-hero__bg { aspect-ratio: 3 / 2; object-fit: cover; }
	.parcours { padding-block: 64px 48px; }
	.programmes { padding-bottom: 80px; }
	.programmes__liste { gap: 80px; }
	.programme { grid-template-columns: 1fr; gap: 48px; }
	.programme--inverse .programme__photo { order: 0; }
	.programme__photo { margin-right: 24px; }
	.programme--inverse .programme__photo { margin: 0 0 0 24px; }
	.programme__photo::before { inset: 20px -20px -20px 20px; }
	.programme--inverse .programme__photo::before { inset: 20px 20px -20px -20px; }
	.rejoindre { padding-block: 80px; }
	.rejoindre__etapes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
/* Téléphone : la frise devient verticale. */
@media (max-width: 760px) {
	.parcours__frise { grid-template-columns: 1fr; gap: 18px; max-width: 360px; margin-inline: auto; }
	.parcours__frise::before, .parcours__frise::after { top: 36px; bottom: 36px; left: 36px; right: auto; width: 4px; height: auto; }
	.parcours__frise::after { transform-origin: top; }
	.js .parcours__frise::after { transform: scaleY(0); }
	.js .parcours__frise.is-vu::after { transform: scaleY(1); }
	.parcours__etape { justify-items: start; }
	.parcours__etape a { grid-auto-flow: column; justify-items: start; align-items: center; gap: 18px; text-align: left; }
	.parcours__rond { width: 76px; height: 76px; }
	.programme__num { font-size: 64px; }
	.programme__fiche { grid-template-columns: 1fr; }
	.programme .btn, .rejoindre__boutons .btn { width: 100%; }
}

/* ==========================================================================
   Pages légales (mentions légales, confidentialité, conditions d'utilisation)
   ========================================================================== */
.legal-hero {
	position: relative; overflow: hidden;
	padding-block: 88px 0;
	background: radial-gradient(120% 140% at 100% 0%, #0b6b40 0%, var(--green-dark) 55%, #05331f 100%);
	color: var(--white);
}
.legal-hero::after {
	content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
	border: 60px solid rgba(255, 255, 255, 0.04); pointer-events: none;
}
.legal-hero__inner { position: relative; z-index: 1; display: grid; justify-items: start; gap: 16px; }
.legal-hero__eyebrow { color: #9fe0bb; border-color: #9fe0bb; }
.legal-hero__titre { font-size: clamp(34px, 1.2rem + 2.6vw, 52px); line-height: 1.15; font-weight: 700; letter-spacing: -1px; }
.legal-hero__maj { color: rgba(255, 255, 255, 0.72); font-size: 15px; }
.legal-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 36px; }
.legal-onglet {
	padding: 14px 22px; border-radius: 14px 14px 0 0;
	font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.82);
	background: rgba(255, 255, 255, 0.08); transition: background .2s, color .2s;
}
.legal-onglet:hover { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.legal-onglet.is-active { background: var(--white); color: var(--green-text); }

.legal { padding-block: 64px 112px; overflow: visible; } /* overflow visible : sinon le sommaire « collant » se décale */
.legal__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal__sommaire { position: sticky; top: calc(var(--header-h) + 24px); padding: 24px; border-radius: 20px; background: var(--grey-50); border: 1px solid var(--grey-200); }
.legal__sommaire-titre { font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--green-text); margin-bottom: 12px; }
.legal__sommaire ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: som; }
.legal__sommaire li { counter-increment: som; }
.legal__sommaire a {
	display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px;
	padding: 8px 10px; border-radius: 10px; font-size: 14px; line-height: 20px; color: var(--text);
	transition: background .2s, color .2s;
}
.legal__sommaire a::before { content: counter(som, decimal-leading-zero); font-weight: 700; color: var(--soft); }
.legal__sommaire a:hover { background: var(--white); color: var(--green-text); }
.legal__sommaire a:hover::before { color: var(--green); }

.legal__corps { display: grid; gap: 48px; min-width: 0; }
.legal__texte { max-width: 760px; }
.legal__texte h2 {
	scroll-margin-top: calc(var(--header-h) + 24px);
	display: flex; align-items: center; gap: 12px;
	margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--grey-200);
}
.legal__texte h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__texte h2::before { content: ""; flex: none; width: 6px; height: 26px; border-radius: 3px; background: var(--green); }
.legal__texte ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.legal__texte li { position: relative; padding-left: 26px; }
.legal__texte li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.legal__texte strong { color: var(--ink); }
.a-completer { padding: 1px 6px; border-radius: 6px; background: #fff3c4; color: #7a5b00; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.legal__question {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center;
	max-width: 760px; padding: 24px 28px; border-radius: 20px; background: var(--green-5); border: 1px solid rgba(23, 136, 75, 0.2);
}
.legal__question-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--white); }
.legal__question-titre { font-weight: 700; color: var(--ink); }
.legal__question p:not(.legal__question-titre) { color: var(--muted); font-size: 15px; }

@media (max-width: 1024px) {
	.legal-hero { padding-top: 56px; }
	.legal__grid { grid-template-columns: 1fr; gap: 32px; }
	.legal__sommaire { position: static; }
}
@media (max-width: 680px) {
	.legal-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
	.legal-onglet { flex: none; padding: 12px 16px; font-size: 14px; }
	.legal { padding-block: 40px 80px; }
	.legal__question { grid-template-columns: 1fr; justify-items: start; }
	.legal__question .btn { width: 100%; }
}

/* ==========================================================================
   Pop-up de promotion (menu « Promotions » de l'admin)
   ========================================================================== */
.promo-pop {
	width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px);
	padding: 0; border: 0; background: transparent; overflow: visible;
}
.promo-pop::backdrop { background: rgba(5, 25, 16, 0.62); backdrop-filter: blur(3px); }
.promo-pop[open] { animation: promo-entree .55s var(--ease-out, cubic-bezier(.2, .8, .2, 1)) both; }
.promo-pop[open]::backdrop { animation: promo-fondu .4s ease both; }
.promo-pop.is-sortie { animation: promo-sortie .25s ease both; }
@keyframes promo-entree { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes promo-sortie { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes promo-fondu { from { opacity: 0; } }

.promo-pop__carte {
	position: relative; overflow: hidden auto; max-height: calc(100svh - 32px);
	border-radius: 24px; background: var(--white);
	box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.55);
}
.promo-pop__fermer {
	position: absolute; top: 14px; right: 14px; z-index: 3;
	display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transition: transform .2s, background .2s;
}
.promo-pop__fermer:hover { transform: rotate(90deg); background: var(--white); }
.promo-pop__visuel { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.promo-pop__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: promo-zoom 12s ease-out both; }
@keyframes promo-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.promo-pop__visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 74, 46, 0.55), rgba(0, 0, 0, 0) 55%); }
.promo-pop__badge {
	position: absolute; left: 20px; bottom: 16px; z-index: 1;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px; border-radius: 999px;
	background: linear-gradient(135deg, #f6d77a, #d4a537); color: #3b2a00;
	font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.promo-pop__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3b2a00; animation: rdv-pouls 1.8s ease-out infinite; }
.promo-pop__corps { display: grid; gap: 14px; justify-items: start; padding: 26px 30px 28px; }
.promo-pop__titre { font-size: clamp(24px, 1rem + 1.4vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.5px; color: var(--ink); text-wrap: balance; }
.promo-pop__texte { font-size: 17px; line-height: 26px; color: var(--text); }
.promo-pop__fin { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: var(--green-10); font-size: 14px; font-weight: 700; color: var(--green-text); }
.promo-pop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.promo-pop__plus-tard { padding: 8px 4px; border: 0; background: none; font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.promo-pop__plus-tard:hover { color: var(--ink); }
.promo-pop__conditions { padding-top: 12px; border-top: 1px solid var(--grey-200); font-size: 12.5px; line-height: 19px; color: var(--pale); }

@media (max-width: 600px) {
	/* Téléphone : la carte monte du bas de l'écran. */
	.promo-pop { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92svh; }
	.promo-pop__carte { border-radius: 24px 24px 0 0; max-height: 92svh; }
	.promo-pop[open] { animation-name: promo-monte; }
	@keyframes promo-monte { from { transform: translateY(100%); } to { transform: none; } }
	.promo-pop__corps { padding: 22px 20px 26px; }
	.promo-pop__actions { width: 100%; }
	.promo-pop__actions .btn { width: 100%; }
	.promo-pop__plus-tard { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.promo-pop[open], .promo-pop[open]::backdrop, .promo-pop__visuel img, .promo-pop__badge::before { animation: none; }
}

/* ==========================================================================
   Notre histoire : section de l'Accueil et page Modèle › Notre histoire
   ========================================================================== */
/* Accueil : mini-frise horizontale. */
.histoire-accueil { padding-block: 96px; background: var(--white); border-top: 1px solid var(--grey-100); }
.histoire-accueil__tete { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px 64px; align-items: end; margin-bottom: 64px; }
.histoire-accueil__tete .h2 { margin-top: 16px; }
.histoire-accueil__intro { display: grid; gap: 24px; justify-items: start; }
.histoire-accueil__intro p { font-size: 18px; line-height: 28px; color: var(--text); }
.mini-frise { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mini-frise::before, .mini-frise::after {
	content: ""; position: absolute; left: 0; right: 0; top: 56px; height: 3px; border-radius: 3px; background: var(--grey-200);
}
.mini-frise::after { background: linear-gradient(90deg, var(--green), var(--green-2)); transform-origin: left; }
.mini-frise__etape { position: relative; display: grid; gap: 14px; justify-items: start; }
.mini-frise__annee { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.5px; color: var(--green-dark); }
.mini-frise__point { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 5px solid var(--green); box-shadow: 0 0 0 6px var(--white); }
.mini-frise__texte { max-width: 220px; font-size: 16px; line-height: 23px; font-weight: 500; color: var(--ink-2); text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
	.js .mini-frise::after { transform: scaleX(0); transition: transform 1.8s var(--ease-out, ease) .2s; }
	.js .mini-frise.is-vu::after { transform: scaleX(1); }
	.js .mini-frise__etape { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out, ease), transform .6s var(--ease-out, ease); transition-delay: calc(.3s + var(--i) * .3s); }
	.js .mini-frise.is-vu .mini-frise__etape { opacity: 1; transform: none; }
}

/* Page : haut de page au modèle commun (.page-hero--split). */
/* Photo « DE COTONOU » : cadrage haut, le palais en entier ; le titre (à gauche, comme partout) se pose sur la colonnade sombre. */
.page-hero--histoire { min-height: clamp(540px, 48vw, 700px); }
.page-hero--histoire .page-hero__bg { object-position: 50% 0%; }

/* Récit au défilement : image collante à gauche (ordinateur), étapes à droite. */
.recit { padding-block: 112px 120px; overflow: visible; scroll-margin-top: var(--header-h); }
.recit .section-head { margin-bottom: 72px; justify-items: start; text-align: left; }
.recit__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: start; }
.recit__scene { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 18px; }
.recit__cadre {
	position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header-h) - 120px);
	border-radius: 28px; background: var(--green-dark); box-shadow: 0 40px 70px -30px rgba(7, 74, 46, 0.55);
}
.recit__visuel { position: absolute; inset: 0; margin: 0; z-index: 0; opacity: 0; }
.recit__visuel > img { width: 100%; height: 100%; object-fit: cover; }
.recit__visuel.is-precedent { z-index: 1; opacity: 1; }
.recit__visuel.is-actif { z-index: 2; opacity: 1; }
.recit__cadre::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: linear-gradient(to top, rgba(4, 41, 26, 0.88) 0%, rgba(4, 41, 26, 0.35) 35%, rgba(0, 0, 0, 0) 60%);
}
.recit__legende { position: absolute; left: 32px; right: 32px; bottom: 28px; z-index: 4; display: grid; gap: 6px; color: var(--white); }
.recit__date { font-size: clamp(44px, 2rem + 2.6vw, 76px); line-height: 1; font-weight: 700; letter-spacing: -2px; color: #f6d77a; }
.recit__lieu { font-size: 17px; font-weight: 700; letter-spacing: .4px; color: rgba(255, 255, 255, 0.9); min-height: 1em; }
.recit__progression { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.recit__progression li { flex: 1; }
.recit__point { display: block; width: 100%; height: 5px; padding: 0; border: 0; border-radius: 3px; background: var(--grey-200); cursor: pointer; transition: background .4s; }
.recit__point.is-passe { background: rgba(23, 136, 75, 0.45); }
.recit__point.is-actif { background: var(--green); }

/* Étape avec vidéo : pastille sur l'image et bouton « Regarder ». */
.recit-badge-video {
	position: absolute; top: 18px; right: 18px; z-index: 4;
	display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.92); color: var(--green-dark); font-size: 13px; font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.recit-etape__video {
	justify-self: start; display: inline-flex; align-items: center; gap: 12px; margin-top: 4px;
	padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--green-dark); color: var(--white); font-weight: 700; font-size: 15px;
	transition: background .25s, transform .25s;
}
.recit-etape__video:hover { background: var(--green); transform: translateY(-2px); }
.recit-etape__play { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #f6d77a; color: var(--green-dark); padding-left: 3px; }
@media (prefers-reduced-motion: no-preference) {
	.recit-etape__play { animation: rdv-pouls-or 2s ease-out infinite; }
}
@keyframes rdv-pouls-or { 0% { box-shadow: 0 0 0 0 rgba(246, 215, 122, 0.6); } 100% { box-shadow: 0 0 0 12px rgba(246, 215, 122, 0); } }
.souvenirs { padding-block: 96px; }
.souvenirs .galerie__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; }
/* Tablette et téléphone : 2 colonnes régulières, la dernière photo sur toute la largeur. */
@media (max-width: 1024px) {
	.souvenirs { padding-block: 72px; }
	.souvenirs .galerie__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.souvenirs .galerie__col { display: contents; }
	.souvenirs .galerie__item { aspect-ratio: 4 / 3 !important; }
	.souvenirs .galerie__col:last-child .galerie__item:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1 !important; }
}

/* Illustration d'une étape sans photo : drapeaux et chiffre sur fond vert. */
.recit-illu {
	display: grid; place-items: center; align-content: center; gap: 24px;
	background: radial-gradient(90% 80% at 30% 20%, #0e7a48 0%, var(--green-dark) 55%, #04291a 100%);
}
.recit-illu__motif {
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.6px, transparent 1.7px); background-size: 22px 22px;
	mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 75%);
}
.recit-illu__drapeaux { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-bottom: 60px; }
.recit-illu__drapeaux img { width: clamp(84px, 9vw, 132px); height: auto; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 18px 34px rgba(0, 0, 0, 0.4); }
.recit-illu__chiffre { position: relative; margin-top: -40px; padding-bottom: 80px; font-size: clamp(44px, 2rem + 3vw, 84px); font-weight: 700; letter-spacing: -2px; color: var(--white); }

/* Étapes (colonne de droite). */
.recit__etapes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.recit-etape { padding-block: 14vh; border-left: 3px solid var(--grey-200); padding-left: 36px; position: relative; transition: border-color .4s; }
.recit-etape:first-child { padding-top: 8px; }
.recit-etape::before {
	content: ""; position: absolute; left: -11px; top: calc(14vh + 6px); width: 19px; height: 19px; border-radius: 50%;
	background: var(--white); border: 4px solid var(--grey-200); transition: border-color .4s, background .4s, transform .4s;
}
.recit-etape:first-child::before { top: 14px; }
.recit-etape__visuel { display: none; }
.recit-etape__corps { display: grid; gap: 14px; }
.recit-etape__periode { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.5px; color: var(--green-dark); }
.recit-etape__periode span { font-size: 14px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--green-text); }
.recit-etape__titre { font-size: 26px; line-height: 33px; font-weight: 700; color: var(--ink); text-wrap: balance; }
.recit-etape__texte { font-size: 17px; line-height: 28px; color: var(--text); }
.recit-etape__citation { margin: 6px 0 0; padding: 16px 20px; border-left: 4px solid var(--green); border-radius: 0 14px 14px 0; background: var(--green-5); }
.recit-etape__citation p { font-size: 17px; line-height: 27px; font-style: italic; font-weight: 500; color: var(--green-dark); }

@media (min-width: 1025px) {
	.js .recit-etape { opacity: .32; transition: opacity .5s, border-color .4s; }
	.js .recit-etape.is-actif { opacity: 1; border-left-color: var(--green); }
	.js .recit-etape.is-actif::before { border-color: var(--green); background: var(--green); transform: scale(1.15); box-shadow: 0 0 0 6px rgba(23, 136, 75, 0.18); }
	.js .recit-etape__citation { transition: opacity .6s .15s, transform .6s .15s; }
	.js .recit-etape:not(.is-actif) .recit-etape__citation { opacity: 0; transform: translateY(10px); }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	/* Image qui arrive : volet de droite à gauche, puis zoom lent (effet Ken Burns). */
	.recit__visuel.is-actif { animation: recit-volet .9s cubic-bezier(.65, 0, .35, 1) both; }
	.recit__visuel.is-actif > img, .recit__visuel.is-actif .recit-illu__drapeaux { animation: recit-zoom 7s ease-out both; }
	.recit__date.is-change { animation: recit-compteur .6s cubic-bezier(.2, .8, .2, 1) both; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.js .recit-etape { opacity: 0; transform: translateY(36px); transition: opacity .7s var(--ease-out, ease), transform .7s var(--ease-out, ease); }
	.js .recit-etape.is-vu { opacity: 1; transform: none; }
	.js .recit-etape__visuel > img { transform: scale(1.12); transition: transform 1.6s var(--ease-out, ease); }
	.js .recit-etape.is-vu .recit-etape__visuel > img { transform: scale(1); }
}
@keyframes recit-volet { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes recit-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes recit-compteur { from { opacity: 0; transform: translateY(60%); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Carte animée du parcours. */
.carte-parcours { padding-block: 112px; background: radial-gradient(80% 90% at 75% 40%, #0b6b40 0%, var(--green-dark) 50%, #04291a 100%); color: var(--white); }
.carte-parcours__grille { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.carte-parcours__texte { display: grid; gap: 20px; justify-items: start; }
.carte-parcours__eyebrow { color: #9fe0bb; border-color: #9fe0bb; }
.carte-parcours__titre { color: var(--white); }
.carte-parcours__intro { font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.8); }
.carte-parcours__intro strong { color: #f6d77a; font-weight: 700; }
.carte-parcours__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 8px 0 0; padding: 0; list-style: none; }
.carte-parcours__liste li {
	display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center;
	padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 14.5px;
}
.carte-parcours__liste img { width: 30px; height: 20px; border-radius: 3px; object-fit: cover; }
.carte-parcours__liste strong { font-weight: 700; }
.carte-parcours__liste em { font-style: normal; font-size: 12px; color: #f6d77a; white-space: nowrap; }
.carte-parcours__depart { grid-column: 1 / -1; background: rgba(246, 215, 122, 0.12) !important; border-color: rgba(246, 215, 122, 0.4) !important; }
.carte-parcours__depart span { display: flex; flex-wrap: wrap; gap: 0 8px; color: rgba(255, 255, 255, 0.85); }
.carte-parcours__depart strong { color: var(--white); }
.carte-parcours__carte { position: relative; }
.carte-svg { display: block; width: 100%; height: auto; max-height: 820px; overflow: visible; }
.carte-svg image { opacity: .55; }
.carte-svg__trajet { fill: none; stroke: #f6d77a; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(246, 215, 122, 0.6)); }
.carte-svg__point { fill: #f6d77a; stroke: var(--green-dark); stroke-width: 3; }
.carte-svg__halo { fill: rgba(246, 215, 122, 0.25); }
.carte-svg__depart { fill: var(--white); stroke: #f6d77a; stroke-width: 4; }
.carte-svg__onde { fill: none; stroke: #f6d77a; stroke-width: 2; opacity: 0; }
.carte-svg__nom { fill: var(--white); font-size: 22px; font-weight: 700; paint-order: stroke; stroke: rgba(4, 41, 26, 0.85); stroke-width: 5px; }
@media (prefers-reduced-motion: no-preference) {
	.js .carte-svg__trajet { stroke-dashoffset: 1; }
	.js .carte-parcours__grille.is-vu .carte-svg__trajet { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.45, 0, .2, 1); transition-delay: calc(.5s + var(--i) * .6s); }
	.js .carte-svg__pays { opacity: 0; transform: scale(0); }
	.js .carte-parcours__grille.is-vu .carte-svg__pays { opacity: 1; transform: scale(1); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; transition-delay: calc(1.35s + var(--i) * .6s); }
	.carte-parcours__grille.is-vu .carte-svg__onde { animation: carte-onde 2.4s ease-out infinite; }
	.carte-parcours__grille.is-vu .carte-svg__onde--2 { animation-delay: 1.2s; }
	.carte-parcours__grille.is-vu .carte-svg__halo { animation: carte-halo 2.2s ease-in-out infinite; animation-delay: calc(1.8s + var(--i) * .6s); transform-box: fill-box; transform-origin: center; }
	.js .carte-parcours__liste li[style] { opacity: .3; transition: opacity .5s, background .5s, border-color .5s; transition-delay: calc(1.35s + var(--i) * .6s); }
	.js .carte-parcours__grille.is-vu .carte-parcours__liste li[style] { opacity: 1; }
}
@keyframes carte-onde { from { opacity: .9; r: 12; } to { opacity: 0; r: 46; } }
@keyframes carte-halo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .4; } }

/* Signature. */
.histoire-fin { padding-block: 120px; text-align: center; background: radial-gradient(70% 90% at 50% 0%, var(--green-5), rgba(23, 136, 75, 0) 70%); }
.histoire-fin__inner { display: grid; justify-items: center; gap: 22px; }
.histoire-fin__marque { font-size: 14px; font-weight: 700; letter-spacing: 3px; color: var(--green-text); }
.histoire-fin__titre { max-width: 900px; font-size: clamp(28px, 1rem + 2.4vw, 48px); line-height: 1.2; font-weight: 700; letter-spacing: -1px; color: var(--ink); text-wrap: balance; }
.histoire-fin__titre span { color: var(--green); }
.histoire-fin__texte { max-width: 560px; font-size: 18px; line-height: 28px; color: var(--muted); }
.histoire-fin__boutons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 12px; }
.histoire-fin__lien { font-weight: 700; color: var(--green-text); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1024px) {
	.histoire-accueil { padding-block: 72px; }
	/* Récit : plus d'image collante, chaque étape porte son image. */
	.recit { padding-block: 72px 80px; }
	.recit .section-head { margin-bottom: 48px; }
	.recit__grille { grid-template-columns: 1fr; }
	.recit__scene { display: none; }
	.recit__etapes { gap: 40px; }
	.recit-etape, .recit-etape:first-child { padding: 0; border: 0; }
	.recit-etape::before { display: none; }
	.recit-etape__visuel { display: grid; position: relative; margin: 0 0 22px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 22px; box-shadow: var(--shadow-xl); }
	.recit-etape__visuel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* même les photos en hauteur restent dans le cadre */
	.recit-etape__visuel.recit-illu .recit-illu__drapeaux { padding-bottom: 0; }
	.recit-etape__visuel.recit-illu .recit-illu__chiffre { margin-top: 0; padding-bottom: 0; font-size: 48px; }
	.carte-parcours { padding-block: 72px; }
	.carte-parcours__grille { grid-template-columns: 1fr; gap: 32px; }
	.carte-parcours__carte { max-width: 560px; margin-inline: auto; width: 100%; }
	.histoire-accueil__tete { grid-template-columns: 1fr; margin-bottom: 48px; }
	.page-hero--histoire { min-height: 0; }
	.page-hero--histoire .page-hero__bg { aspect-ratio: 3 / 2; object-fit: cover; }
}
@media (max-width: 760px) {
	.recit-etape__periode { font-size: 26px; }
	.recit-etape__titre { font-size: 22px; line-height: 29px; }
	.carte-parcours__liste { grid-template-columns: 1fr; }
	/* Mini-frise verticale. */
	.mini-frise { grid-template-columns: 1fr; gap: 22px; padding-left: 34px; }
	.mini-frise::before, .mini-frise::after { left: 10px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
	.mini-frise::after { transform-origin: top; }
	.js .mini-frise::after { transform: scaleY(0); }
	.js .mini-frise.is-vu::after { transform: scaleY(1); }
	.mini-frise__etape { gap: 4px; }
	.mini-frise__point { position: absolute; left: -34px; top: 6px; }
	.mini-frise__annee { font-size: 22px; line-height: 28px; }
	.mini-frise__texte { max-width: none; }
	.histoire-fin { padding-block: 80px; }
	.histoire-fin__boutons { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Page Opportunités : les récompenses en chiffres. */
.chiffres-recompenses { padding-block: 72px; background: radial-gradient(90% 140% at 50% 0%, #0b6b40 0%, var(--green-dark) 55%, #04291a 100%); color: var(--white); }
.chiffres-recompenses__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 980px; }
.chiffre-recompense { display: grid; justify-items: center; gap: 10px; padding: 12px 24px; text-align: center; }
.chiffre-recompense + .chiffre-recompense { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.chiffre-recompense__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(246, 215, 122, 0.12); color: #f6d77a; }
.chiffre-recompense__valeur { font-size: clamp(52px, 2rem + 4vw, 88px); line-height: 1; font-weight: 700; letter-spacing: -2px; color: #f6d77a; font-variant-numeric: tabular-nums; }
.chiffre-recompense__texte { max-width: 300px; font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
@media (max-width: 680px) {
	.chiffres-recompenses { padding-block: 56px; }
	.chiffres-recompenses__grille { grid-template-columns: 1fr; gap: 12px; }
	.chiffre-recompense + .chiffre-recompense { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 32px; }
}

/* ==========================================================================
   Responsive — tablette et mobile (non dessinés dans la maquette)
   ========================================================================== */
@media (max-width: 1200px) {
	.groupe__grid, .produits__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
	.centre__grid { grid-template-columns: 1fr 1fr; }
	.leadership__grid { grid-template-columns: 360px minmax(0, 1fr); gap: 48px; }
	.groupe__features { grid-template-columns: 1fr 1fr; column-gap: 16px; }
	.mag-card__body { padding: 64px; }
}
@media (max-width: 1024px) and (min-width: 901px) {
	.dynamique__photo, .groupe__photo, .produits__photo { height: 100%; min-height: 520px; }
	.leadership__grid { grid-template-columns: 320px minmax(0, 1fr); }
	.leader-card__inner > img { height: 640px; }
	.mag-card { min-height: 640px; }
	.mag-card__body { padding: 48px; }
}

@media (max-width: 1024px) {
	/* Hero : vidéo entière en haut, texte en dessous. */
	.hero__stage { width: auto; max-height: calc(100svh - var(--header-h) - var(--adminbar-h, 0px)); margin-inline: auto; }
	.hero__media { object-fit: contain; }
	.hero__gradient, .hero__content { display: none; }
	.hero__dots { bottom: 16px; }
	.hero__sound { right: 12px; bottom: 10px; width: 40px; height: 40px; }
	.hero, .hero__stage { background: var(--green-dark); }
	.hero__panel { display: block; padding-block: 40px 48px; background: var(--green-dark); }
	/* Bouton blanc à texte vert : un bouton vert sur fond vert ne se verrait pas. */
	.hero__panel .btn--primary { background: var(--white); color: var(--green-text); }
	.hero__panel .btn--primary:hover { background: #eaf4ee; }
	.hero__panel .btn--primary .icon { filter: brightness(0) saturate(100%) invert(30%) sepia(52%) saturate(744%) hue-rotate(101deg) brightness(92%) contrast(92%); }
	.hero__panel .container { display: grid; justify-items: start; gap: 16px; }
	.hero__panel .hero__title { max-width: 640px; font-size: clamp(28px, 1.2rem + 2.5vw, 38px); }
	.hero__panel .btn { margin-top: 8px; }

	:root { --header-h: 72px; }
	.site-header__toggle {
		display: grid; place-items: center;
		width: 44px; height: 44px;
		border: 0; background: none;
	}
	.burger, .burger::before, .burger::after {
		display: block; width: 22px; height: 2px; background: var(--ink);
		transition: transform .25s, opacity .25s;
	}
	.burger { position: relative; }
	.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
	.burger::before { top: -7px; }
	.burger::after { top: 7px; }
	.site-header__toggle[aria-expanded="true"] .burger { background: transparent; }
	.site-header__toggle[aria-expanded="true"] .burger::before { transform: translateY(7px) rotate(45deg); }
	.site-header__toggle[aria-expanded="true"] .burger::after { transform: translateY(-7px) rotate(-45deg); }

	.site-header__nav {
		position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px;
		padding: 24px var(--gutter) 40px;
		overflow-y: auto;
		background: var(--white);
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .2s, transform .2s, visibility .2s;
	}
	.admin-bar .site-header__nav { top: calc(var(--header-h) + 46px); }
	.site-header.is-open .site-header__nav { opacity: 1; visibility: visible; transform: none; }
	.main-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.main-menu > li { border-bottom: 1px solid var(--grey-100); }
	.main-menu a { display: flex; justify-content: space-between; padding: 14px 0; font-size: 18px; }
	/* Sous-menus en accordéon : un seul ouvert à la fois (main.js). */
	.main-menu .menu-item-has-children > a::after { display: none; }
	.main-menu > li.menu-item-has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.submenu-toggle {
		display: grid; place-items: center;
		width: 48px; height: 48px; margin-right: -12px; padding: 0;
		border: 0; background: none; cursor: pointer;
	}
	.submenu-toggle svg { transition: transform .25s; }
	.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
	.main-menu .sub-menu {
		grid-column: 1 / -1;
		position: static; min-width: 0; padding: 0 0 0 16px;
		border: 0; border-radius: 0; box-shadow: none;
		max-height: 0; overflow: hidden;
		opacity: 1; visibility: hidden; transform: none;
		transition: max-height .3s ease, padding .3s ease, visibility .3s;
	}
	.main-menu > li.is-sub-open > .sub-menu { max-height: 320px; padding-bottom: 12px; visibility: visible; }
	.main-menu .sub-menu::before { display: none; }
	.main-menu .sub-menu a { padding: 10px 0 10px 14px; font-size: 16px; border-radius: 0; }
	/* Onglet actif : bande verte à gauche, fond vert très clair, texte vert gras. */
	.main-menu > .current-menu-item > a,
	.main-menu > .current-menu-ancestor > a { text-decoration: none; }
	.main-menu > .current-menu-item,
	.main-menu > .current-menu-ancestor {
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: calc(var(--gutter) - 4px) var(--gutter);
		border-left: 4px solid var(--green);
		background: rgba(23, 136, 75, 0.08);
	}
	.main-menu .sub-menu .current-menu-item > a { box-shadow: inset 3px 0 0 var(--green); }
}

/* Tablette portrait et téléphone : une seule colonne. */
@media (max-width: 900px) {
	.dynamique__grid, .groupe__grid, .centre__grid, .produits__grid, .leadership__grid { grid-template-columns: 1fr; }
	.dynamique__photo, .groupe__photo, .centre__photo, .produits__photo { height: auto; aspect-ratio: 4 / 3; }
	.groupe__photo { margin-top: 0; }
	.leadership__grid { justify-items: center; }
	.leader-card { width: min(410px, 100%); }
	.leader-card__inner, .leader-card__inner > img { min-height: 0; height: auto; aspect-ratio: 410 / 600; }
	.stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
	/* Chiffres → photo du groupe : un seul espace de 56 px (au lieu de 80 + 48). */
	.stats { padding-bottom: 48px; }
	.section.groupe { padding-top: 8px; }
	.centre__cards, .evenements__grid { grid-template-columns: 1fr 1fr; }
	.partenaires__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.mag-card { grid-template-columns: 1fr; min-height: 0; }
	.mag-card__cover { aspect-ratio: 4 / 3; }
	.mag-card__img { object-fit: contain; }
	.site-footer__grid { grid-template-columns: repeat(3, 1fr); }
	.site-footer__brand { grid-column: 1 / -1; }

	/* Empilement uniforme : photo toujours au-dessus du texte, même écart partout. */
	.dynamique__grid, .groupe__grid, .centre__grid, .produits__grid, .leadership__grid { gap: 40px; }
	.dynamique__photo, .groupe__photo, .centre__photo, .produits__photo, .leader-card { order: -1; }
	.centre__cards { margin-top: 56px; }
}

@media (max-width: 680px) {
	.section { padding-block: 48px; }
	.section-head { margin-bottom: 40px; }
	.section-head--split { grid-template-columns: 1fr; }
	.hero__text { font-size: 18px; line-height: 27px; }
	.stats__value { font-size: 52px; line-height: 56px; }
	.stats__label { font-size: 13px; }
	.groupe__features { grid-template-columns: 1fr; row-gap: 20px; }
	.roles, .piliers__grid, .centre__cards, .evenements__grid { grid-template-columns: 1fr; }
	.piliers__grid { gap: 24px; }
	.partenaires__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.tile { height: 220px; }
	.tile__title { left: 16px; right: 16px; bottom: 16px; font-size: 18px; line-height: 24px; }
	.leadership__quote { font-size: 20px; line-height: 30px; }
	.mag-card { border-radius: 24px; }
	.mag-card__body, .mag-card--paysage .mag-card__body { padding: 32px 24px; gap: 20px; }
	.mag-card__title, .mag-card--paysage .mag-card__title { padding-bottom: 0; font-size: 30px; }
	.mag-card__text { padding-bottom: 8px; font-size: 18px; line-height: 28px; }
	.cta { padding-top: 56px; }
	.cta p { margin-top: 24px; font-size: 18px; line-height: 28px; }
	.cta__actions { flex-direction: column; gap: 16px; margin-top: 32px; }
	.cta__bar { margin-top: 48px; }
	.btn--lg { padding: 16px 28px; font-size: 16px; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }

	/* Textes plus compacts sur téléphone */
	.prose--lg { font-size: 18px; line-height: 28px; }
	.groupe__quote { font-size: 18px; line-height: 28px; padding-left: 20px; }
	.groupe__text .h2, .groupe__text .prose { margin-top: 20px; }
	.centre__cards .espace, .produits__points .feature { padding: 20px; min-height: 0; }
	.centre__cards { margin-top: 40px; gap: 16px; }
	.dynamique__grid, .groupe__grid, .centre__grid, .produits__grid, .leadership__grid { gap: 32px; }

	/* Carte du dirigeant */
	.leader-card__caption { padding: 20px; gap: 12px; }
	.leader-card__name { font-size: 24px; line-height: 30px; }
	.leader-card__tags { gap: 6px; }
	.leader-card__tags li { padding: 6px 12px; font-size: 11px; }

	/* Casquettes : cartes plus compactes */
	.roles { gap: 12px; }
	.role { align-items: center; min-height: 0; padding: 16px; }
	.role > span:last-child { padding-top: 0; }
	.leadership__quote { padding: 24px 16px 24px 28px; }

	.media-card__body { padding: 24px; }
	.piliers__grid .h3--lg { font-size: 18px; line-height: 26px; }
}

/* Échelle typographique téléphone : titres, textes et boutons plus petits que sur ordinateur. */
@media (max-width: 680px) {
	.h2, .cta .h2 { font-size: 28px; line-height: 34px; }
	.hero__panel .hero__title { font-size: 28px; line-height: 34px; }
	.hero__text, .hero__panel .hero__text { font-size: 16px; line-height: 25px; }
	.mag-card__title, .mag-card--paysage .mag-card__title { font-size: 26px; line-height: 32px; letter-spacing: -0.5px; }
	.eyebrow, .pill { font-size: 12px; line-height: 18px; letter-spacing: 0.6px; }
	.eyebrow { padding-left: 14px; border-left-width: 3px; }

	.prose, .section-head__lead, .mag-card__text, .cta p { font-size: 16px; line-height: 26px; }
	.prose--lg { font-size: 17px; line-height: 27px; }
	.groupe__features li { font-size: 15px; }
	.groupe__quote, .leadership__quote { font-size: 18px; line-height: 28px; }

	.stats__value { font-size: 44px; line-height: 48px; }
	.stats__label { font-size: 12px; line-height: 18px; }

	.h3 { font-size: 17px; line-height: 26px; }
	.h3--lg, .h3--md { font-size: 18px; line-height: 26px; }
	.bar-title { font-size: 20px; line-height: 28px; }
	.leader-card__name { font-size: 22px; line-height: 28px; }
	.tile__title { font-size: 16px; line-height: 22px; }
	.role, .media-card__body p { font-size: 15px; line-height: 22px; }

	.btn, .btn--lg { padding: 14px 24px; font-size: 15px; line-height: 22px; gap: 10px; }
	.btn--outline { padding: 12px 22px; }
	.site-footer__col h3 { font-size: 16px; line-height: 24px; }
	/* Le texte occupe toute la largeur disponible : pas de coupure prématurée. */
	.line { display: inline; }
	.hero__text, .groupe__text .h2, .groupe__text .prose, .groupe__quote, .centre__text .prose,
	.site-footer__brand p, .cta .h2, .cta p, .section-head__lead, .hero__panel .hero__title { max-width: none; }
}

/* Barre d'administration WordPress (visible seulement par l'équipe connectée). */
@media (max-width: 782px) {
	.admin-bar { --adminbar-h: 46px; }
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar { --adminbar-h: 0px; }
	.admin-bar .site-header { top: 0; }
	.admin-bar .site-header__nav { top: var(--header-h); }
}

/* ==========================================================================
   Animations
   ========================================================================== */
:root { --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Apparition au défilement : l'élément glisse et apparaît en fondu quand il arrive à l'écran.
   Activé seulement quand le JavaScript a vérifié que l'onglet est visible (classe .anim-on).
   On utilise la propriété « translate » pour ne pas gêner les effets de survol (« transform »). */
.anim-on [data-reveal] {
	transition: opacity 1s var(--ease-out), translate 1s var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}
.anim-on [data-reveal]:not(.is-visible) { opacity: 0; translate: 0 48px; }
.anim-on [data-reveal="left"]:not(.is-visible) { translate: -64px 0; }
.anim-on [data-reveal="right"]:not(.is-visible) { translate: 64px 0; }
.anim-on [data-reveal="fade"]:not(.is-visible) { translate: 0 0; }

/* Photos : dézoom lent pendant l'apparition. */
.anim-on .photo-card[data-reveal] img,
.anim-on .leader-card[data-reveal] .leader-card__inner > img {
	transition: scale 1.6s var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}
.anim-on .photo-card[data-reveal]:not(.is-visible) img,
.anim-on .leader-card[data-reveal]:not(.is-visible) .leader-card__inner > img { scale: 1.15; }

/* Hero : titre, texte et bouton en cascade à chaque nouvelle vidéo. */
@keyframes tdc-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}
.hero__slide.is-active .hero__content > *,
.hero__panel .container > * {
	animation: tdc-rise .9s var(--ease-out) both;
}
.hero__slide.is-active .hero__content > :nth-child(1),
.hero__panel .container > :nth-child(1) { animation-delay: .35s; }
.hero__slide.is-active .hero__content > :nth-child(2),
.hero__panel .container > :nth-child(2) { animation-delay: .5s; }
.hero__slide.is-active .hero__content > :nth-child(3),
.hero__panel .container > :nth-child(3) { animation-delay: .65s; }

/* Page Modèle — « Notre approche » est visible dès l'ouverture sur ordinateur :
   la photo glisse depuis la gauche et le texte monte en cascade au chargement. */
@keyframes tdc-from-left {
	from { opacity: 0; transform: translateX(-56px); }
	to   { opacity: 1; transform: none; }
}
@keyframes tdc-zoom-out {
	from { transform: scale(1.15); }
	to   { transform: none; }
}
/* La photo est visible à l'ouverture sur toutes les tailles d'écran. */
.js .approche__photo { animation: tdc-from-left 1s var(--ease-out) .5s backwards; }
.js .approche__photo img { animation: tdc-zoom-out 1.6s var(--ease-out) .5s backwards; }
/* Le texte, lui, n'est visible à l'ouverture que sur ordinateur (au défilement sur mobile, main.js). */
@media (min-width: 901px) {
	.js .approche__text > * { animation: tdc-rise .9s var(--ease-out) backwards; }
	.js .approche__text > :nth-child(1) { animation-delay: .7s; }
	.js .approche__text > :nth-child(2) { animation-delay: .82s; }
	.js .approche__text > :nth-child(3) { animation-delay: .94s; }
}

/* Frise des étapes : chaque rond « rebondit » et sa carte glisse quand le trait vert l'atteint. */
.timeline-on .etape__icon { transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease-out; }
.timeline-on .etape__card { transition: opacity .6s ease-out .12s, translate .8s var(--ease-out) .12s; }
.timeline-on .etape:not(.is-reached) .etape__icon { transform: scale(.3); opacity: 0; }
.timeline-on .etape:not(.is-reached) .etape__card { opacity: 0; translate: 64px 0; }
.etape__icon::after {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%;
	border: 2px solid var(--green);
	opacity: 0; pointer-events: none;
}
.timeline-on .etape.is-reached .etape__icon::after { animation: tdc-ring 1s ease-out .25s; }
@keyframes tdc-ring {
	from { opacity: .6; transform: scale(1); }
	to   { opacity: 0; transform: scale(1.7); }
}
.etapes.timeline-on::after { transition: transform .2s linear; }

/* En-tête : ombre un peu plus marquée une fois la page défilée. */
.site-header { transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(16, 24, 40, 0.25); }

/* Survol : cartes qui se soulèvent, flèche des boutons qui avance. */
.btn .icon { transition: transform .25s var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }
.btn:hover .icon--down { transform: rotate(90deg) translateX(3px); }
.feature, .espace, .role, .media-card, .tile, .site-footer .socials a {
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .2s;
}
@media (hover: hover) {
	.feature:hover, .espace:hover, .role:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -12px rgba(16, 24, 40, 0.18); }
	.media-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -16px rgba(16, 24, 40, 0.25); }
	.tile:hover { transform: translateY(-6px); }
	.tile img { transition: transform .6s var(--ease-out); }
	.tile:hover img { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
}