/* =============================================================================
   LIFT Consulting — Charte §12 (BRIEF-REFONTE)
   Tokens · base typographique · grille · composants.
   Registre : sobre, beaucoup de blanc, accent minoritaire.
   Aucun dégradé, aucune ombre portée, aucune icône colorée.
   ============================================================================= */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
	/* Couleurs — valeurs exactes du §12 */
	--c-ink:        #14181C; /* anthracite — fond sombre / texte principal */
	--c-paper:      #F6F5F1; /* ivoire — fond clair (jamais blanc pur) */
	--c-accent:     #0B5D4E; /* vert profond — minoritaire */
	--c-accent-ink: #08463b; /* accent assombri (hover) */
	--c-text:       #14181C; /* texte principal sur clair */
	--c-text-muted: #5A6068; /* texte secondaire */
	--c-rule:       #DFDCD4; /* filets et séparateurs */
	--c-paper-dk:   #EEEBE3; /* variation ivoire pour cartes/aplats discrets */

	/* Typographie */
	--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Échelle typographique — hiérarchie franche, corps généreux */
	--fs-body:  1.0625rem;  /* ~17px */
	--fs-small: 0.9375rem;  /* ~15px */
	--fs-card:  0.9375rem;  /* corps des cartes, resserré */
	--fs-h3:    1.2rem;
	--fs-h2:    clamp(1.5rem, 1.05rem + 1.5vw, 2.05rem);
	--fs-h1:    clamp(1.9rem, 1.25rem + 1.9vw, 2.6rem);
	--fs-eyebrow: 0.78rem;

	--lh-body: 1.55;
	--lh-tight: 1.12;

	/* Mesure — longueur de ligne limitée (~68 caractères) */
	--measure: 62ch;

	/* Rythme d'espacement */
	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.25rem;
	--space-6: 3.5rem;
	--space-7: 5.5rem;
	--space-8: 8rem;

	/* Conteneurs */
	--container:        72rem;
	--container-narrow: 46rem;
	--gutter: clamp(1.25rem, 5vw, 3.5rem);

	--radius: 2px;
	--rule-w: 1px;
}

/* ---- 2. Reset léger & base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.lift {
	margin: 0;
	background: var(--c-paper);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.lift img { max-width: 100%; height: auto; display: block; }

/* Titres — serif de labeur */
.lift h1, .lift h2, .lift h3, .lift h4 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: var(--lh-tight);
	color: var(--c-ink);
	margin: 0 0 var(--space-3);
	letter-spacing: -0.01em;
}
.lift h1 { font-size: var(--fs-h1); }
.lift h2 { font-size: var(--fs-h2); }
.lift h3 { font-size: var(--fs-h3); font-weight: 600; }

.lift p, .lift ul, .lift ol { margin: 0 0 var(--space-4); }
.lift p { max-width: var(--measure); }

/* Liens — accent, souligné discret */
.lift a {
	color: var(--c-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--c-rule);
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.lift a:hover { color: var(--c-accent-ink); text-decoration-color: currentColor; }
.lift a:focus-visible,
.lift .btn:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* Eyebrow — sur-titre de section */
.lift .eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin: 0 0 var(--space-2);
}

.lift .lead {
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--c-text);
	max-width: var(--measure);
}

.lift .muted { color: var(--c-text-muted); }
.lift .small { font-size: var(--fs-small); }

/* ---- 3. Grille & conteneurs -------------------------------------------- */
.lift .container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.lift .container--narrow { max-width: var(--container-narrow); }

.lift .section { padding-block: var(--space-7); }
.lift .section--tight { padding-block: var(--space-6); }

/* Bandes sur fond sombre — usage parcimonieux, jamais l'accent en aplat plein */
.lift .band-dark {
	background: var(--c-ink);
	color: var(--c-paper);
}
.lift .band-dark h1, .lift .band-dark h2, .lift .band-dark h3 { color: var(--c-paper); }
.lift .band-dark .muted { color: #A7ACB2; }
.lift .band-dark a { color: #EDEAE2; text-decoration-color: rgba(255,255,255,.35); }

/* Grille colonnes réutilisable */
.lift .grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) {
	.lift .grid--2 { grid-template-columns: repeat(2, 1fr); }
	.lift .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 4. Composants ------------------------------------------------------ */

/* Filet */
.lift .filet {
	border: 0;
	border-top: var(--rule-w) solid var(--c-rule);
	margin-block: var(--space-5);
}

/* Bouton */
.lift .btn {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 0.9em 1.4em;
	border: var(--rule-w) solid var(--c-accent);
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lift .btn--primary { background: var(--c-accent); color: var(--c-paper); }
.lift .btn--primary:hover { background: var(--c-accent-ink); border-color: var(--c-accent-ink); color: var(--c-paper); }
.lift .btn--ghost { background: transparent; color: var(--c-accent); }
.lift .btn--ghost:hover { background: var(--c-accent); color: var(--c-paper); }
.lift .band-dark .btn--ghost { color: var(--c-paper); border-color: rgba(255,255,255,.4); }
.lift .band-dark .btn--ghost:hover { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-paper); }

/* Carte */
.lift .card {
	background: var(--c-paper);
	border: var(--rule-w) solid var(--c-rule);
	border-radius: var(--radius);
	padding: var(--space-4);
}
.lift .card h3 { margin-top: 0; }
.lift .card__eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin: 0 0 var(--space-2);
}
.lift .card > :last-child { margin-bottom: 0; }

/* Liste marquée d'un filet accent (repère minoritaire) */
.lift .marker-list { list-style: none; padding: 0; }
.lift .marker-list li {
	padding-left: var(--space-4);
	border-left: 2px solid var(--c-accent);
	margin-bottom: var(--space-3);
	max-width: var(--measure);
}

/* ---- 5. Accessibilité --------------------------------------------------- */
.lift .skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-ink);
	color: var(--c-paper);
	padding: var(--space-2) var(--space-3);
	z-index: 1000;
}
.lift .skip-link:focus { left: var(--space-2); }

.lift .visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ---- 6. En-tête & pied -------------------------------------------------- */
.lift-header {
	background: var(--c-paper);
	border-bottom: var(--rule-w) solid var(--c-rule);
}
.lift-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 78px;
	flex-wrap: wrap;
}
.lift a.lift-brand,
.lift a.lift-brand:hover { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1.1; }
.lift-brand__name {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.3rem;
	letter-spacing: 0.01em;
	color: var(--c-ink);
}
.lift-brand__tag {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin-top: 2px;
}

.lift-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0; padding: 0;
}
.lift-nav__link,
.lift-nav .lift-nav__list a {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--c-text);
	text-decoration: none;
	padding-block: 0.35em;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.lift-nav__link:hover,
.lift-nav .lift-nav__list a:hover {
	color: var(--c-accent);
	border-bottom-color: var(--c-accent);
}

/* Pied */
.lift-footer { padding-block: var(--space-6) var(--space-5); margin-top: var(--space-7); }
.lift-footer__grid { gap: var(--space-5); align-items: start; }
.lift-footer .lift-brand__name { color: var(--c-paper); }
.lift-footer__list { list-style: none; margin: 0; padding: 0; }
.lift-footer__list li { margin-bottom: var(--space-2); }
.lift-footer__list a { font-size: 0.95rem; text-decoration: none; }
.lift-footer__list a:hover { text-decoration: underline; }
.lift-footer__legal { margin: 0; }

/* ---- 7. Prose (corps de page/article) ---------------------------------- */
.lift-prose > :last-child { margin-bottom: 0; }
.lift-prose h2 { margin-top: var(--space-5); }
.lift-prose h3 { margin-top: var(--space-4); }
.lift-prose img { margin-block: var(--space-4); border-radius: var(--radius); }
.lift-prose blockquote {
	margin: var(--space-4) 0;
	padding-left: var(--space-4);
	border-left: 2px solid var(--c-accent);
	color: var(--c-text-muted);
	font-family: var(--font-serif);
	font-size: 1.25rem;
	max-width: var(--measure);
}

/* ---- 8. Gabarits spécifiques ------------------------------------------- */
.lift-page__head, .lift-article__head { padding-bottom: 0; }
.lift-article__meta { margin-top: var(--space-2); }
.lift-expertise__hero { padding-block: var(--space-7); }
.lift-expertise__hero .lead { margin-top: var(--space-3); }
.lift-index__item { margin-bottom: var(--space-4); }

/* ---- 9. Réductions de mouvement ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lift * { transition: none !important; animation: none !important; }
}

/* ---- 9b. Logo (SVG, dimensions fluides) -------------------------------- */
/* Spécificité > `.lift img` (qui impose height:auto / max-width:100%). */
.lift img.lift-logo {
	display: block;
	width: auto;
	max-width: none;
	height: clamp(30px, 3.2vw, 40px);
}
.lift img.lift-logo--footer { height: 44px; margin-bottom: var(--space-2); }

/* ---- 9c. Bandeau cookies (wf-cookie-consent / cookiechoices) ----------- */
/* Surcharge des styles inline du script pour l'aligner sur la charte §12. */
#cookieChoiceInfo {
	background: var(--c-paper) !important;
	color: var(--c-text-muted) !important;
	border-top: var(--rule-w) solid var(--c-rule) !important;
	box-shadow: none !important;
	padding: 12px var(--gutter) !important;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	line-height: 1.5;
}
#cookieChoiceInfo > div {
	padding-right: 0 !important;
	max-width: var(--container);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 14px;
}
#cookieChoiceInfo span { color: var(--c-text-muted); }
#cookieChoiceInfo a:not(#cookieChoiceDismiss):not(#cookieChoiceDismissIcon) {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--c-rule);
	margin-left: 0 !important;
}
#cookieChoiceInfo a#cookieChoiceDismiss {
	display: inline-block !important;
	background: #3B3FE4 !important;   /* accent bleu de la marque */
	color: var(--c-paper) !important;
	padding: 7px 18px !important;
	border-radius: var(--radius);
	text-decoration: none !important;
	font-weight: 600;
	font-size: 0.85rem;
	margin-left: 6px !important;
}
#cookieChoiceInfo a#cookieChoiceDismiss:hover { background: #2f33c9 !important; }
#cookieChoiceDismissIcon { display: none !important; } /* redondant avec « OK » */

/* ---- 9d. Page 404 ------------------------------------------------------ */
.lift-404 { padding-block: var(--space-7) var(--space-8); }
.lift-404 > * + * { margin-top: var(--space-3); }
.lift-404 .btn { margin-top: var(--space-4); }
.lift-404 .filet { margin-block: var(--space-6) var(--space-4); }
.lift-404__nav {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
}
.lift-404__nav a { text-decoration: none; }
.lift-404__nav a:hover { text-decoration: underline; }

/* ---- 9e. Formulaire (maquette Contact) -------------------------------- */
.lift-canvas .lift-form { max-width: 42rem; margin-top: var(--space-3); }
.lift-form__note {
	font-size: 0.85rem; color: var(--c-text-muted);
	border-left: 2px solid var(--c-accent);
	padding-left: var(--space-3); margin-bottom: var(--space-4);
	max-width: var(--measure);
}
.lift-form__row { display: grid; gap: var(--space-3); }
@media (min-width: 620px) { .lift-form__row { grid-template-columns: 1fr 1fr; } }
.lift-form label {
	display: block; font-size: 0.82rem; color: var(--c-text-muted);
	margin-bottom: var(--space-3);
}
.lift-form input, .lift-form textarea {
	display: block; width: 100%; margin-top: 6px;
	font-family: var(--font-sans); font-size: 1rem; color: var(--c-text);
	background: #fff; border: var(--rule-w) solid var(--c-rule);
	border-radius: var(--radius); padding: 10px 12px;
}
.lift-form input:focus, .lift-form textarea:focus {
	outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent);
}
.lift-form textarea { resize: vertical; }
.lift-form__submit {
	margin-top: var(--space-3); font-family: var(--font-sans);
	font-size: var(--fs-small); font-weight: 600;
	padding: 0.9em 1.4em; border: var(--rule-w) solid var(--c-accent);
	border-radius: var(--radius); background: var(--c-accent); color: var(--c-paper);
	cursor: pointer;
}
.lift-form__submit[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- 10. Canvas Gutenberg (pages structurelles) ------------------------ */
/* Grille de contenu : UNE colonne partagée par les titres ET le contenu.
   Corrige l'alignement — plus de recentrage individuel des blocs plats,
   chaque bloc se cale sur la même gouttière. La même grille est
   réappliquée à l'intérieur des bandes pleine largeur. */
.lift-canvas,
.lift-canvas .alignfull {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--gutter), 1fr)
		[content-start] min(100% - var(--gutter) * 2, var(--container))
		[content-end] minmax(var(--gutter), 1fr) [full-end];
}
.lift-canvas { overflow-x: clip; }
.lift-canvas > *,
.lift-canvas .alignfull > * { grid-column: content; min-width: 0; }
.lift-canvas > .alignfull { grid-column: full; }

/* Texte : mesure de lecture, calé à gauche de la colonne (jamais recentré). */
.lift-canvas :where(p, ul, ol) { max-width: var(--measure); }
.lift-canvas :is(p, ul, ol, .wp-block-heading) { margin-block: 0; }

/* Rythme vertical : respirations généreuses entre sections, resserré dedans. */
.lift-canvas > * + * { margin-top: var(--space-4); }
.lift-canvas > .eyebrow { margin-top: var(--space-7); }
.lift-canvas > .eyebrow:first-child { margin-top: 0; }
.lift-canvas > .eyebrow + * { margin-top: var(--space-2); }
.lift-canvas > .wp-block-heading + * { margin-top: var(--space-3); }
.lift-canvas > .alignfull { margin-top: 0; }
.lift-canvas > .alignfull + * { margin-top: var(--space-7); }

/* Bandes (sections) */
.lift-canvas .wp-block-group.lift-section { padding-block: var(--space-6); }
.lift-canvas .wp-block-group.lift-section--tight { padding-block: var(--space-5); }
.lift-canvas .band-dark { background: var(--c-ink); color: var(--c-paper); }
.lift-canvas .band-dark :is(h1,h2,h3) { color: var(--c-paper); }
.lift-canvas .band-dark .muted,
.lift-canvas .band-dark .lead { color: #A7ACB2; }
.lift-canvas .alignfull > * + * { margin-top: var(--space-3); }
.lift-canvas .alignfull > .eyebrow + * { margin-top: var(--space-2); }
.lift-canvas .alignfull > .wp-block-buttons { margin-top: var(--space-4); }

/* Colonnes → grille responsive de cartes */
.lift-canvas .wp-block-columns {
	display: grid; gap: var(--space-3);
	grid-template-columns: 1fr; margin-block: 0; max-width: none;
}
@media (min-width: 720px) {
	.lift-canvas .wp-block-columns.lift-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.lift-canvas .wp-block-columns.lift-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.lift-canvas .wp-block-columns.lift-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
	.lift-canvas .wp-block-columns.lift-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.lift-canvas .wp-block-column { margin: 0; min-width: 0; }

/* Carte — corps resserré, quatre cartes équilibrées */
.lift-canvas .wp-block-column.card,
.lift-canvas .wp-block-group.card {
	background: var(--c-paper);
	border: var(--rule-w) solid var(--c-rule);
	border-radius: var(--radius);
	padding: 1.35rem 1.4rem;
	font-size: var(--fs-card);
	line-height: 1.5;
}
.lift-canvas .band-dark .card { background: transparent; border-color: rgba(255,255,255,.16); }
.lift-canvas .card > * + * { margin-top: var(--space-2); }
.lift-canvas .card p { max-width: none; }
.lift-canvas .card .wp-block-heading { font-size: var(--fs-h3); line-height: 1.2; }

/* Boutons Gutenberg → composant .btn */
.lift-canvas .wp-block-button__link {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 0.9em 1.4em;
	border: var(--rule-w) solid var(--c-accent);
	border-radius: var(--radius);
	background: var(--c-accent);
	color: var(--c-paper);
	text-decoration: none;
}
.lift-canvas .wp-block-button__link:hover { background: var(--c-accent-ink); border-color: var(--c-accent-ink); }
.lift-canvas .is-style-ghost .wp-block-button__link {
	background: transparent; color: var(--c-accent);
}
.lift-canvas .is-style-ghost .wp-block-button__link:hover { background: var(--c-accent); color: var(--c-paper); }
.lift-canvas .band-dark .is-style-ghost .wp-block-button__link { color: var(--c-paper); border-color: rgba(255,255,255,.4); }
.lift-canvas .band-dark .is-style-ghost .wp-block-button__link:hover { background: var(--c-paper); color: var(--c-ink); }

/* Séparateur → filet */
.lift-canvas .wp-block-separator {
	border: 0; border-top: var(--rule-w) solid var(--c-rule);
	max-width: var(--container); margin-block: var(--space-2);
	opacity: 1;
}
.lift-canvas .band-dark .wp-block-separator { border-top-color: rgba(255,255,255,.14); }

/* Listes marquées (via className is-style-marker sur wp:list) */
.lift-canvas .is-style-marker { list-style: none; padding: 0; }
.lift-canvas .is-style-marker li {
	padding-left: var(--space-4);
	border-left: 2px solid var(--c-accent);
	margin-bottom: var(--space-3);
	max-width: var(--measure);
}
.lift-canvas .band-dark .is-style-marker li { border-left-color: var(--c-accent-light); }

/* ---- 11. Hero — présence, profondeur, motif vivant --------------------- */
/* Premier bandeau sombre de chaque page = hero. Composition en couches :
   dégradé de profondeur + halo de lumière (fond), trame fine estompée
   (::after masqué), écho de chevrons du logo animé — respiration + montée
   lente + parallaxe au scroll (::before). Texte au-dessus, calé à gauche.
   Registre §12 : sombre, sobre, aucun aplat criard ; vivant par la maîtrise. */
@property --hero-rise {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
.lift-canvas > .band-dark:first-child {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* EMPLACEMENT IMAGE DE TEXTURE (Joris) : redéfinir --hero-image ici, ex.
	   --hero-image: url('../img/hero-texture.jpg'); — s'insère sous la trame
	   et les chevrons, devant le dégradé, sans refonte. */
	--hero-image: none;
	--hero-scroll: 0px;
	background-color: #0e1215;
	background-image:
		radial-gradient(58% 46% at 86% 4%, rgba(91,107,240,.12) 0%, rgba(91,107,240,0) 60%),
		var(--hero-image),
		radial-gradient(135% 125% at 84% 0%, #20262e 0%, #14181C 42%, #0d1013 100%);
	background-repeat: no-repeat;
	background-size: cover, cover, cover;
	background-position: center;
	padding-block: clamp(4.5rem, 3rem + 6.5vw, 8rem);
}
/* Trame fine — structure discrète, estompée par un masque radial. */
.lift-canvas > .band-dark:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(0deg, transparent 0 71px, rgba(233,234,238,.032) 71px 72px),
		repeating-linear-gradient(90deg, transparent 0 71px, rgba(233,234,238,.032) 71px 72px);
	-webkit-mask: radial-gradient(125% 105% at 72% -8%, #000 0%, transparent 70%);
	mask: radial-gradient(125% 105% at 72% -8%, #000 0%, transparent 70%);
}
/* Écho de chevrons — couche animée (respiration + montée + parallaxe). */
.lift-canvas > .band-dark:first-child::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -10%;
	right: -5%;
	width: min(56%, 700px);
	aspect-ratio: 600 / 820;
	background: url('../img/hero-chevrons.svg') no-repeat center / contain;
	transform: translate3d(0, calc(var(--hero-rise) + var(--hero-scroll)), 0);
	animation: heroRise 17s ease-in-out infinite;
	will-change: transform;
	pointer-events: none;
}
@keyframes heroRise {
	0%, 100% { --hero-rise: 0px; }
	50%      { --hero-rise: -20px; }
}
/* Eyebrow du hero — petit filet éditorial en amorce. */
.lift-canvas > .band-dark:first-child .eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.lift-canvas > .band-dark:first-child .eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: #5B6BF0;
	opacity: 0.85;
}
/* Titre du hero — plus d'ampleur et de tenue typographique. */
.lift-canvas > .band-dark:first-child h1 {
	font-size: clamp(2.35rem, 1.4rem + 3.1vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -0.022em;
	max-width: 16ch;
}
@media (max-width: 719px) {
	/* Mobile : l'écho se replie en haut à droite, réduit et atténué, pour
	   rester derrière le vide et jamais concurrencer le titre. */
	.lift-canvas > .band-dark:first-child::before {
		width: 58%;
		top: -3%;
		right: -12%;
		opacity: 0.5;
	}
	.lift-canvas > .band-dark:first-child h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lift-canvas > .band-dark:first-child::before { animation: none; }
}

/* Apparition douce à l'ouverture — ANIMATION CSS PURE, sans dépendance JS.
   Le contenu est TOUJOURS rendu (opacité 1 par défaut, aucune règle ne le
   masque de façon persistante). L'animation joue au chargement et se termine
   à l'état visible (fill-mode forwards). Si elle ne joue pas (reduced-motion,
   navigateur ancien, JS coupé), le contenu reste visible. Aucun point de
   défaillance. */
@keyframes liftIn {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
.lift-canvas > *:not(.band-dark):not(.wp-block-separator):not(.wp-block-columns) {
	animation: liftIn 0.7s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
/* Cartes : même entrée, léger décalage en cascade au chargement. */
.lift-canvas .wp-block-columns > .wp-block-column {
	animation: liftIn 0.6s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
.lift-canvas .wp-block-columns > .wp-block-column:nth-child(1) { animation-delay: 0.05s; }
.lift-canvas .wp-block-columns > .wp-block-column:nth-child(2) { animation-delay: 0.12s; }
.lift-canvas .wp-block-columns > .wp-block-column:nth-child(3) { animation-delay: 0.19s; }
.lift-canvas .wp-block-columns > .wp-block-column:nth-child(4) { animation-delay: 0.26s; }
@media (prefers-reduced-motion: reduce) {
	.lift-canvas > *,
	.lift-canvas .wp-block-columns > .wp-block-column { animation: none !important; }
}

/* ---- 12. Index éditorial des pôles (numérotation 01–04) ---------------- */
/* Remplace les pictogrammes : un grand numéro sérif prolongé d'un filet —
   même signature pour les 4 pôles, sur l'accueil (cartes) et Expertises
   (ouverture de section). Sobre, monochrome, registre §12. */
.lift-canvas .lift-pole-num {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 2.35rem;
	line-height: 1;
	letter-spacing: 0.005em;
	font-variant-numeric: lining-nums;
	color: var(--c-ink);
	margin: 0 0 var(--space-3);
	max-width: none;
}
.lift-canvas .lift-pole-num::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-rule);
}
/* Sur Expertises : le numéro ouvre chaque section, plus d'ampleur. */
.lift-canvas > .lift-pole-num {
	font-size: clamp(2.6rem, 1.9rem + 1.8vw, 3.3rem);
	margin-top: var(--space-7);
}
.lift-canvas > .lift-pole-num + .wp-block-heading { margin-top: var(--space-2); }
/* Sur fond sombre (si réemployé) : filet plus discret. */
.lift-canvas .band-dark .lift-pole-num { color: var(--c-paper); }
.lift-canvas .band-dark .lift-pole-num::after { background: rgba(255,255,255,.18); }
/* Test : amorce d'accent bleu très courte au départ du filet (écho logo). */
.lift-canvas .lift-pole-num::after {
	background: linear-gradient(90deg, #5B6BF0 0 18px, var(--c-rule) 18px);
}
.lift-canvas .band-dark .lift-pole-num::after {
	background: linear-gradient(90deg, #5B6BF0 0 18px, rgba(255,255,255,.18) 18px);
}

/* ---- 13. Rythme & composition des sections ----------------------------- */
/* Alternance tonale D/I/D/I/D motivée + en-têtes composés + respirations.
   Registre §12 : sobre, jamais mécanique. */

/* Bande de section pleine largeur (au-delà du hero) : respiration avant. */
.lift-canvas > .lift-band { margin-top: var(--space-7); }
.lift-canvas .lift-band.lift-section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }

/* Eyebrow lisible sur fond sombre (hero + bandes anthracite). */
.lift-canvas .band-dark .eyebrow { color: #9BA1A9; }

/* En-tête de section composé : titre à gauche, accroche alignée à droite. */
.lift-canvas > .lift-sec-head { margin-top: var(--space-8); }
.lift-canvas > .lift-sec-head:first-child,
.lift-band > .lift-sec-head { margin-top: 0; }
.lift-sec-head {
	display: grid;
	gap: var(--space-2) var(--space-6);
	grid-template-columns: 1fr;
	align-items: end;
	margin-bottom: var(--space-5);
}
@media (min-width: 880px) {
	.lift-sec-head { grid-template-columns: 1.15fr 0.85fr; }
}
.lift-sec-head__title > .eyebrow { margin-bottom: var(--space-2); }
.lift-sec-head__title > .wp-block-heading { margin: 0; }
.lift-sec-head__lead {
	margin: 0;
	color: var(--c-text-muted);
	font-size: 1.02rem;
	max-width: 40ch;
}
.lift-canvas .band-dark .lift-sec-head__lead { color: #A7ACB2; }

/* Lien « en savoir plus » de section — repère sobre avec flèche. */
.lift-canvas a.lift-more {
	display: inline-block;
	margin-top: var(--space-4);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--c-accent);
}
.lift-canvas a.lift-more::after { content: " \2192"; transition: none; }
.lift-canvas a.lift-more:hover { color: var(--c-accent-ink); }
.lift-canvas .band-dark a.lift-more { color: var(--c-paper); }

/* CTA composé sur panneau ivoire chaud (rupture douce, pas une bande sombre). */
.lift-canvas .lift-cta {
	background: var(--c-paper-dk);
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
}
.lift-cta__inner {
	display: grid;
	gap: var(--space-4);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 820px) {
	.lift-cta__inner { grid-template-columns: 1fr auto; gap: var(--space-6); }
}
.lift-cta__inner > .lift-cta__text > :last-child { margin-bottom: 0; }
.lift-cta__inner .wp-block-buttons { margin: 0; }

/* Bande douce (panneau ivoire chaud) — inset léger, alternance sur Expertises. */
.lift-canvas > .lift-band-soft { margin-top: var(--space-7); }
.lift-canvas .lift-band-soft.lift-section {
	background: var(--c-paper-dk);
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
	padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.lift-canvas .lift-band-soft .wp-block-columns { gap: var(--space-4) var(--space-7); }
.lift-canvas .lift-band-soft .wp-block-column > * + * { margin-top: var(--space-3); }
.lift-canvas .lift-band-soft .wp-block-column > .eyebrow + .wp-block-heading { margin-top: var(--space-2); }

/* Split éditorial (pages de contenu) : en-tête à gauche, corps à droite.
   Compose les sections au lieu de les empiler. */
.lift-canvas > .lift-split { margin-top: var(--space-8); }
.lift-band > .lift-split { margin-top: 0; }
.lift-split {
	display: grid;
	gap: var(--space-3) var(--space-7);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 880px) {
	.lift-split { grid-template-columns: 0.82fr 1.18fr; }
}
.lift-split__head > .eyebrow { margin-bottom: var(--space-2); }
.lift-split__head > .wp-block-heading { margin: 0; }
.lift-split__body { max-width: var(--measure); }
.lift-split__body > * { margin: 0; max-width: none; }
.lift-split__body > * + * { margin-top: var(--space-4); }
.lift-canvas .band-dark .lift-split__body { color: #C5C9CF; font-size: 1.08rem; }
.lift-canvas .band-dark .lift-split__body strong { color: var(--c-paper); font-weight: 600; }

/* ---- 14. Formulaire Fluent Forms — habillage §12 (CSS uniquement) ------- */
/* Aligne le rendu du formulaire de contact sur la charte : champs sobres,
   bordures discrètes, rayon 2px (pas d'arrondi criard), bouton à l'accent
   bleu de la marque, focus bleu cohérent. Aucune modification des champs,
   du honeypot ni de la logique Fluent Form. !important pour battre les
   styles à ID générés par le plugin. */
.lift .fluentform { --ff-blue: #3B3FE4; --ff-blue-ink: #2f33c9; }

.lift .fluentform .ff-el-group { margin-bottom: var(--space-4); }

/* Intitulés de champ */
.lift .fluentform .ff-el-input--label label {
	font-family: var(--font-sans) !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	color: var(--c-text) !important;
	letter-spacing: 0.01em;
	margin-bottom: 6px !important;
}
.lift .fluentform .ff-el-input--label.ff-el-is-required label::after { color: var(--ff-blue) !important; }

/* Champs (texte, courriel, message) */
.lift .fluentform input.ff-el-form-control,
.lift .fluentform textarea.ff-el-form-control,
.lift .fluentform select.ff-el-form-control {
	font-family: var(--font-sans) !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	color: var(--c-text) !important;
	background: #fff !important;
	border: 1px solid var(--c-rule) !important;
	border-radius: var(--radius) !important;
	padding: 11px 13px !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.lift .fluentform input.ff-el-form-control::placeholder,
.lift .fluentform textarea.ff-el-form-control::placeholder { color: #9a978c !important; }
.lift .fluentform textarea.ff-el-form-control { min-height: 132px !important; resize: vertical !important; }

/* Focus — accent bleu de la marque */
.lift .fluentform input.ff-el-form-control:focus,
.lift .fluentform textarea.ff-el-form-control:focus,
.lift .fluentform select.ff-el-form-control:focus {
	outline: none !important;
	border-color: var(--ff-blue) !important;
	box-shadow: 0 0 0 2px rgba(59, 63, 228, 0.18) !important;
}

/* Bouton d'envoi — accent bleu de la marque */
.lift .fluentform button.ff-btn-submit,
.lift .fluentform .ff-btn.ff-btn-submit {
	font-family: var(--font-sans) !important;
	font-size: var(--fs-small) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	line-height: 1 !important;
	color: #fff !important;
	background: var(--ff-blue) !important;
	border: 1px solid var(--ff-blue) !important;
	border-radius: var(--radius) !important;
	padding: 0.95em 1.6em !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.lift .fluentform button.ff-btn-submit:hover,
.lift .fluentform .ff-btn.ff-btn-submit:hover {
	background: var(--ff-blue-ink) !important;
	border-color: var(--ff-blue-ink) !important;
}
.lift .fluentform button.ff-btn-submit:focus-visible {
	outline: 2px solid var(--ff-blue) !important;
	outline-offset: 2px !important;
}

/* États d'erreur / validation — sobres */
.lift .fluentform .ff-el-is-error input.ff-el-form-control,
.lift .fluentform .ff-el-is-error textarea.ff-el-form-control { border-color: #b3402f !important; }
.lift .fluentform .error.text-danger,
.lift .fluentform .ff-el-is-error .error { color: #b3402f !important; font-size: 0.82rem !important; }

/* ---- 15. Cas de mission (page Références) ------------------------------- */
/* Rôle en retrait discret ; Apport mis en valeur par un filet d'accent —
   c'est la valeur délivrée, le point de preuve. */
.lift-canvas .lift-case-role {
	color: var(--c-text-muted);
	font-size: 0.95rem;
}
.lift-canvas .lift-apport {
	border-left: 2px solid var(--c-accent);
	padding-left: var(--space-4);
	max-width: none;
}
.lift-canvas .lift-apport > * { margin: 0; max-width: none; }
.lift-canvas .lift-apport > * + * { margin-top: var(--space-2); }
.lift-canvas .lift-apport__label {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent);
}

/* ---- 16. Hero vivant (champ de chevrons animé) + survol des pôles ------- */
/* Un <canvas> injecté par JS fait monter en continu un champ de chevrons
   (le « LIFT » en mouvement), réactif à la souris. Il remplace l'écho
   statique quand JS est actif ; sans JS / reduced-motion, l'écho ::before
   reste et le hero garde son rendu actuel. */
.lift-canvas > .band-dark:first-child canvas.lift-field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	pointer-events: none;
}
.lift-canvas > .band-dark:first-child.lift-has-field::before { display: none; }
.lift-canvas > .band-dark:first-child.lift-has-field > :not(canvas) {
	position: relative;
	z-index: 1;
}

/* Survol des cartes de pôles — passage en sombre, chiffre bleu, filet déployé.
   Ciblé via :has() sur les seules cartes numérotées (pas les cartes « modes »). */
.lift-canvas .card:has(.lift-pole-num) {
	transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.lift-canvas .card:has(.lift-pole-num):hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	transform: translateY(-4px);
}
.lift-canvas .card:has(.lift-pole-num):hover :is(h3, .wp-block-heading) { color: var(--c-paper); }
.lift-canvas .card:has(.lift-pole-num):hover .muted { color: #A7ACB2; }
.lift-canvas .card:has(.lift-pole-num):hover a { color: #EDEAE2; }
.lift-canvas .card:has(.lift-pole-num) .lift-pole-num { transition: color 0.3s ease; }
.lift-canvas .card:has(.lift-pole-num):hover .lift-pole-num { color: #5B6BF0; }
.lift-canvas .card:has(.lift-pole-num) .lift-pole-num::after { transition: background 0.3s ease; }
.lift-canvas .card:has(.lift-pole-num):hover .lift-pole-num::after { background: #5B6BF0; }
@media (prefers-reduced-motion: reduce) {
	.lift-canvas .card:has(.lift-pole-num):hover { transform: none; }
}
