/* Erwan Immersif 2.0
   Tout est préfixé .ei pour ne rien casser ailleurs sur le site.
   Sommaire : 1 cadre Astra, 2 tokens et thèmes, 3 base, 4 dessins, 5 bouton de thème,
   6 rail, 7 accueil, 8 guide, 9 mobile, 10 animations réduites. */

/* ---------- 1. Neutraliser le cadre d'Astra ---------- */
body.ei-page { margin: 0; background: #EEF0F5; }
html[data-ei-theme="dark"] body.ei-page { background: #111A2E; }
body.ei-page .site-content > .ast-container { max-width: none; padding: 0; display: block; }
body.ei-page #primary { margin: 0; padding: 0; width: 100%; }
body.ei-page .site-main > article,
body.ei-page .ast-article-single { margin: 0; padding: 0; background: none; border: 0; }
body.ei-page .entry-content { margin: 0; }
body.ei-page .entry-content > p:empty { display: none; }

/* ---------- 2. Tokens, thèmes, polices ---------- */
.ei {
	--ei-paper: #EEF0F5;
	--ei-card: #FFFFFF;
	--ei-ink: #16213A;
	--ei-ink-soft: #4A5570;
	--ei-violet: #5B3DF5;
	--ei-violet-fill: #5B3DF5;
	--ei-sun: #FFD23F;
	--ei-spark: #5B3DF5;
	--ei-line: rgba(22, 33, 58, .16);
	--ei-tint: rgba(91, 61, 245, .1);
	--ei-code-bg: #16213A;
	--ei-contact-bg: #16213A;
	--ei-contact-fg: #EEF0F5;
	--ei-contact-soft: rgba(238, 240, 245, .72);
	--ei-glow: none;

	--ei-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
	--ei-display-weight: 800;
	--ei-display-stretch: 100%;
	--ei-display-case: none;
	--ei-title-scale: .95;
	--ei-title-track: -.035em;
	--ei-title-lh: 1;
	--ei-text: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
	--ei-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

	--ei-rail-w: 7.5rem;
	--ei-gutter: clamp(1.25rem, 4vw, 4rem);
	--ei-p: 0;

	position: relative;
	background: var(--ei-paper);
	color: var(--ei-ink);
	font-family: var(--ei-text);
	font-size: clamp(1.0625rem, .3vw + 1rem, 1.1875rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background-color .3s, color .3s;
}

html[data-ei-theme="dark"] .ei {
	--ei-paper: #111A2E;
	--ei-card: #18233D;
	--ei-ink: #E8EBF4;
	--ei-ink-soft: #A3ABC2;
	--ei-violet: #A596FF;
	--ei-sun: #FFD23F;
	--ei-spark: #FFD23F;
	--ei-line: rgba(232, 235, 244, .16);
	--ei-tint: rgba(165, 150, 255, .14);
	--ei-code-bg: #0A1122;
	--ei-contact-bg: #E8EBF4;
	--ei-contact-fg: #111A2E;
	--ei-contact-soft: rgba(17, 26, 46, .72);
	--ei-glow: drop-shadow(0 0 6px rgba(165, 150, 255, .55));
}

/* Sans JavaScript : on suit simplement le réglage du système */
@media (prefers-color-scheme: dark) {
	html:not([data-ei-theme]) .ei {
		--ei-paper: #111A2E; --ei-card: #18233D; --ei-ink: #E8EBF4; --ei-ink-soft: #A3ABC2;
		--ei-violet: #A596FF; --ei-spark: #FFD23F; --ei-line: rgba(232, 235, 244, .16);
		--ei-tint: rgba(165, 150, 255, .14); --ei-code-bg: #0A1122;
		--ei-contact-bg: #E8EBF4; --ei-contact-fg: #111A2E; --ei-contact-soft: rgba(17, 26, 46, .72);
	}
}

/* Duos de polices : choisis dans config.php ("police") */
.ei[data-ei-font="sora"] {
	--ei-display: "Sora", "Helvetica Neue", Arial, sans-serif; --ei-text: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--ei-display-weight: 700; --ei-title-scale: .88; --ei-title-track: -.035em; --ei-title-lh: 1.02;
}
.ei[data-ei-font="space"] {
	--ei-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --ei-text: "Inter", "Helvetica Neue", Arial, sans-serif;
	--ei-display-weight: 700; --ei-title-scale: .97; --ei-title-track: -.04em; --ei-title-lh: .98;
}
.ei[data-ei-font="archivo"] {
	--ei-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --ei-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--ei-display-weight: 800; --ei-display-stretch: 125%; --ei-title-scale: .82; --ei-title-track: -.02em; --ei-title-lh: 1;
}
.ei[data-ei-font="serif"] {
	--ei-display: "Instrument Serif", Georgia, serif; --ei-text: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--ei-display-weight: 400; --ei-title-scale: 1.2; --ei-title-track: -.02em; --ei-title-lh: .95;
}
.ei[data-ei-font="affiche"] {
	--ei-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif; --ei-text: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--ei-display-weight: 400; --ei-title-scale: 1.4; --ei-title-track: .005em; --ei-title-lh: .9;
}
.ei[data-ei-font="outfit"] {
	--ei-display: "Outfit", "Helvetica Neue", Arial, sans-serif; --ei-text: "Outfit", "Helvetica Neue", Arial, sans-serif;
	--ei-display-weight: 700; --ei-title-scale: 1; --ei-title-track: -.035em; --ei-title-lh: 1;
}

/* ---------- 3. Base ---------- */
.ei .ei-hero__title, .ei .ei-h2, .ei .ei-index__title, .ei .ei-ghead__title, .ei .ei-prose h2,
.ei .ei-related__title, .ei .ei-contact__mail, .ei .ei-brand, .ei .ei-step__node, .ei .ei-toc li::before,
.ei .ei-prose ol li::before { font-stretch: var(--ei-display-stretch); }
.ei *, .ei *::before, .ei *::after { box-sizing: border-box; }
.ei ul, .ei ol { list-style: none; margin: 0; padding: 0; }
.ei h1, .ei h2, .ei h3, .ei p, .ei figure, .ei dl, .ei dd { margin: 0; }
/* Les titres prennent toujours la couleur du thème (sinon WordPress ou Astra peuvent imposer la leur) */
.ei h1, .ei h2, .ei h3, .ei h4, .ei h5, .ei h6 { color: inherit; }
.ei a { color: inherit; }
.ei a:focus-visible,
.ei button:focus-visible { outline: 3px solid var(--ei-violet); outline-offset: 3px; border-radius: 2px; }
.ei [hidden] { display: none !important; }

.ei .ei-section,
.ei .ei-hero {
	padding-top: clamp(5rem, 12vh, 9rem);
	padding-bottom: clamp(5rem, 12vh, 9rem);
	padding-right: var(--ei-gutter);
	padding-left: calc(var(--ei-rail-w) + var(--ei-gutter));
}
.ei .ei-section__head { max-width: 40rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.ei .ei-h2 {
	font-family: var(--ei-display);
	font-size: calc(var(--ei-title-scale) * clamp(2.25rem, 4.5vw + .5rem, 4rem));
	font-weight: var(--ei-display-weight);
	line-height: var(--ei-title-lh);
	letter-spacing: var(--ei-title-track);
	margin-bottom: .6em;
	color: inherit;
}
.ei .ei-section__lede { color: var(--ei-ink-soft); max-width: 34em; }

/* ---------- 4. Les dessins qui se tracent ---------- */
.ei .ei-illu { display: block; overflow: visible; filter: var(--ei-glow); }
.ei .ei-illu .d {
	fill: none;
	stroke: var(--ei-ink);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.ei .ei-illu .d-s { stroke: var(--ei-spark); }
.ei .ei-illu .f-v { fill: var(--ei-violet-fill); }
.ei .ei-illu .f-s { fill: var(--ei-sun); }
.ei .ei-illu .f-i { fill: var(--ei-ink); }

/* État "pas encore dessiné", seulement si le JavaScript est là pour lancer le tracé */
.ei-js .ei .ei-illu .d {
	transition:
		stroke-dashoffset .9s cubic-bezier(.65, 0, .25, 1) calc(var(--i, 0) * 110ms),
		opacity 0s linear calc(var(--i, 0) * 110ms);
}
.ei-js .ei .ei-illu .f { transition: opacity .5s ease calc(var(--n, 6) * 110ms + .35s); }
.ei-js .ei .ei-illu:not(.is-drawn) .d { stroke-dashoffset: 1; opacity: 0; }
.ei-js .ei .ei-illu:not(.is-drawn) .f { opacity: 0; }
.ei-js .ei .ei-illu.is-reset .d,
.ei-js .ei .ei-illu.is-reset .f { transition: none; }

/* ---------- 5. Bouton clair / sombre ---------- */
.ei .ei-theme,
.ei .ei-theme:hover,
.ei .ei-theme:focus {
	display: grid; place-items: center;
	width: 2.75rem; height: 2.75rem;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--ei-ink);
	background: var(--ei-paper);
	color: var(--ei-ink);
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s, transform .3s;
}
.ei .ei-theme:hover { background: var(--ei-sun); color: #16213A; border-color: #16213A; }
.ei .ei-theme svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ei .ei-theme__sun { display: none; }
html[data-ei-theme="dark"] .ei .ei-theme__sun { display: block; }
html[data-ei-theme="dark"] .ei .ei-theme__moon { display: none; }
.ei .ei-theme--floating {
	position: fixed; z-index: 60;
	top: calc(1.25rem + env(safe-area-inset-top, 0px));
	right: 1.25rem;
}
body.admin-bar .ei .ei-theme--floating { top: calc(1.25rem + 32px); }

/* ---------- 6. Le rail : un parcours façon Journey Builder ---------- */
.ei .ei-rail {
	position: fixed; z-index: 50;
	left: 2rem; top: 50%;
	transform: translateY(-50%);
	height: min(60vh, 26rem);
	width: 1.25rem;
}
.ei .ei-rail__track {
	position: absolute; left: 50%; top: 0; bottom: 0;
	width: 2px; margin-left: -1px;
	background: var(--ei-line);
}
.ei .ei-rail__fill {
	position: absolute; left: 0; top: 0; width: 100%;
	height: calc(var(--ei-p) * 100%);
	background: var(--ei-violet);
}
.ei .ei-rail__contact {
	position: absolute; left: 50%;
	top: calc(var(--ei-p) * 100%);
	width: 1.1rem; height: 1.1rem;
	margin: -.55rem 0 0 -.55rem;
	border-radius: 50%;
	background: var(--ei-sun);
	border: 2px solid #16213A;
	z-index: 2;
	pointer-events: none;
}
.ei .ei-rail__list {
	position: relative; height: 100%;
	display: flex; flex-direction: column; justify-content: space-between;
}
.ei .ei-rail__item { height: 0; display: flex; align-items: center; }
.ei .ei-rail__node {
	display: flex; align-items: center; gap: .9rem;
	text-decoration: none;
	font-family: var(--ei-text);
	font-size: .9rem; font-weight: 600;
	white-space: nowrap;
}
.ei .ei-rail__dot {
	flex: none;
	width: 1.25rem; height: 1.25rem;
	border-radius: 50%;
	background: var(--ei-paper);
	border: 2px solid var(--ei-ink);
	transition: background-color .25s;
}
.ei .ei-rail__label {
	opacity: 0; transform: translateX(-.4rem);
	transition: opacity .25s, transform .25s;
	background: var(--ei-paper);
	padding: .1rem .4rem;
	border-radius: 3px;
}
.ei .ei-rail__node:hover .ei-rail__label,
.ei .ei-rail__node:focus-visible .ei-rail__label,
.ei .ei-rail__node[aria-current="true"] .ei-rail__label { opacity: 1; transform: none; }
.ei .ei-rail__node[aria-current="true"] .ei-rail__dot { background: var(--ei-violet); border-color: var(--ei-violet); }
.ei .ei-rail__now { display: none; }

/* Sur un guide, les titres sont longs : libellé au survol seulement */
.ei--guide .ei-rail:not(:hover):not(:focus-within) .ei-rail__node[aria-current="true"] .ei-rail__label { opacity: 0; }

@media (min-width: 901px) {
	.ei .ei-rail.is-inverse .ei-rail__track { background: var(--ei-contact-soft); opacity: .4; }
	.ei .ei-rail.is-inverse .ei-rail__dot { background: var(--ei-contact-bg); border-color: var(--ei-contact-fg); }
	.ei .ei-rail.is-inverse .ei-rail__node { color: var(--ei-contact-fg); }
	.ei .ei-rail.is-inverse .ei-rail__label { background: var(--ei-contact-bg); }
	.ei .ei-rail.is-inverse .ei-rail__node[aria-current="true"] .ei-rail__dot { background: var(--ei-sun); border-color: var(--ei-sun); }
}

/* ---------- 7. Accueil ---------- */
.ei .ei-hero {
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}
.ei .ei-hero__hello {
	font-family: var(--ei-text);
	font-size: clamp(1.2rem, 1vw + 1rem, 1.5rem);
	font-weight: 500;
	margin-bottom: 1.25rem;
}
.ei .ei-token { display: inline-block; min-width: 1ch; }
.ei .ei-token.is-code {
	font-family: var(--ei-mono);
	font-size: .85em;
	background: var(--ei-ink); color: var(--ei-sun);
	padding: .05em .35em; border-radius: 3px;
}
.ei .ei-hero__title {
	font-family: var(--ei-display);
	font-size: calc(var(--ei-title-scale) * clamp(2.75rem, 6vw + .5rem, 6.25rem));
	font-weight: var(--ei-display-weight);
	line-height: var(--ei-title-lh);
	letter-spacing: var(--ei-title-track);
	max-width: 15ch;
	color: var(--ei-ink);
	margin-bottom: 2.25rem;
}
.ei .ei-hero__topics {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem;
	font-family: var(--ei-text);
	font-size: clamp(1.25rem, 1.3vw + .8rem, 1.9rem);
	font-weight: 600;
	margin-bottom: 2.5rem;
}
.ei .ei-rotator {
	position: relative;
	display: inline-block;
	color: #fff;
	background: var(--ei-violet-fill);
	padding: .05em .45em .12em;
	border-radius: .25em;
	overflow: hidden;
}
.ei .ei-rotator__item {
	position: absolute; left: .45em; top: .05em;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(100%);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.ei .ei-rotator__item.is-active { position: relative; left: auto; top: auto; opacity: 1; transform: none; }
.ei .ei-rotator__item.is-leaving { opacity: 0; transform: translateY(-100%); }
.ei .ei-hero__intro { max-width: 34em; color: var(--ei-ink-soft); }
.ei .ei-hero__intro a,
.ei .ei-about a,
.ei .ei-author a {
	color: var(--ei-ink);
	text-decoration: underline;
	text-decoration-color: var(--ei-violet);
	text-decoration-thickness: 2px;
	text-underline-offset: .2em;
}
.ei .ei-hero__intro a:hover,
.ei .ei-about a:hover,
.ei .ei-author a:hover { background: var(--ei-sun); color: #16213A; }
.ei .ei-hero__illu { width: 100%; max-width: 30rem; justify-self: center; }

/* Filtres + sommaire des guides */
.ei .ei-filters {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
	margin-bottom: 1.75rem;
}
.ei .ei-chip,
.ei .ei-chip:hover,
.ei .ei-chip:focus {
	font-family: var(--ei-text);
	font-size: .95rem; font-weight: 600; line-height: 1.2;
	padding: .55rem 1rem;
	border-radius: 999px;
	border: 2px solid var(--ei-ink);
	background: transparent;
	color: var(--ei-ink);
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s, color .2s;
}
.ei .ei-chip:hover { background: var(--ei-card); }
.ei .ei-chip[aria-pressed="true"] { background: var(--ei-ink); color: var(--ei-paper); }
.ei .ei-filters__count { margin-left: auto; font-size: .95rem; color: var(--ei-ink-soft); }

.ei .ei-index { border-bottom: 2px solid var(--ei-ink); }
.ei .ei-index__item { border-top: 2px solid var(--ei-ink); }
.ei .ei-index__link {
	display: grid;
	grid-template-columns: 3.75rem minmax(0, 1.4fr) minmax(0, 1fr) 11rem;
	gap: .5rem 1.75rem;
	align-items: center;
	padding: 1.4rem 0;
	text-decoration: none;
	transition: background-color .3s, color .3s, padding .3s;
}
.ei .ei-index__icon { width: 3.75rem; height: auto; }
.ei .ei-index__title {
	font-family: var(--ei-display);
	font-size: calc(var(--ei-title-scale) * clamp(1.4rem, 1.5vw + .8rem, 2.1rem));
	font-weight: var(--ei-display-weight);
	line-height: 1.1;
	letter-spacing: -.015em;
	color: inherit;
}
.ei .ei-index__desc { color: var(--ei-ink-soft); font-size: .95em; transition: color .3s; }
.ei .ei-index__tags { font-size: .85rem; font-weight: 600; text-align: right; }
.ei .ei-index__link:hover,
.ei .ei-index__link:focus-visible {
	background: var(--ei-violet-fill);
	color: #fff;
	padding-left: 1.25rem; padding-right: 1.25rem;
}
.ei .ei-index__link:hover .ei-index__desc,
.ei .ei-index__link:focus-visible .ei-index__desc { color: rgba(255, 255, 255, .85); }
.ei .ei-index__link:hover .ei-illu .d,
.ei .ei-index__link:focus-visible .ei-illu .d { stroke: #fff; }
.ei .ei-index__link:hover .ei-illu .f-v { fill: #fff; opacity: .25; }

/* Méthode */
.ei .ei-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem;
}
.ei .ei-steps::before {
	content: "";
	position: absolute; left: 1.5rem; right: 1.5rem; top: 8.5rem;
	height: 2px; background: var(--ei-ink);
}
.ei .ei-step { position: relative; }
.ei .ei-step__illu { width: 6rem; height: 6rem; margin-bottom: 1rem; }
.ei .ei-step__node {
	position: relative;
	display: grid; place-items: center;
	width: 3rem; height: 3rem;
	border-radius: 50%;
	background: var(--ei-paper);
	border: 2px solid var(--ei-ink);
	font-family: var(--ei-display);
	font-weight: 700; font-size: 1.05rem;
	margin-bottom: 1.5rem;
}
.ei .ei-step:last-child .ei-step__node { background: var(--ei-sun); color: #16213A; }
.ei .ei-step__title {
	font-family: var(--ei-text);
	font-size: 1.3rem; font-weight: 700; line-height: 1.2;
	margin-bottom: .6rem;
	color: inherit;
}
.ei .ei-step__text { color: var(--ei-ink-soft); font-size: .95em; }

/* Qui suis-je */
.ei .ei-about {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
	background: var(--ei-card);
}
.ei .ei-about__text { max-width: 36em; }
.ei .ei-about__text p { margin-bottom: 0; }
.ei .ei-about__text p + p { margin-top: 1.1em; }
.ei .ei-about__portrait { justify-self: center; width: min(100%, 22rem); }
.ei .ei-about__portrait figcaption { margin-top: 1rem; text-align: center; font-size: .9rem; color: var(--ei-ink-soft); }

.ei .ei-portrait { position: relative; display: block; overflow: hidden; background: #050814; }
.ei .ei-portrait--large { width: 100%; aspect-ratio: 4 / 5; border-radius: 1.25rem; border: 2px solid var(--ei-ink); }
.ei .ei-portrait__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ei .ei-portrait--small { flex: none; width: 5.5rem; height: 5.5rem; border-radius: 50%; border: 2px solid var(--ei-ink); }
.ei .ei-portrait--small .ei-portrait__video { transform: scale(2.1); transform-origin: 50% 12%; }
.ei .ei-portrait--mono {
	display: grid; place-items: center;
	background: var(--ei-sun); color: #16213A;
	font-family: var(--ei-display); font-weight: 800; font-size: 3rem;
}
.ei .ei-portrait--large.ei-portrait--mono { font-size: clamp(6rem, 14vw, 11rem); border-radius: 50%; aspect-ratio: 1; }
.ei .ei-portrait__replay,
.ei .ei-portrait__replay:hover,
.ei .ei-portrait__replay:focus {
	position: absolute; left: 50%; bottom: 1rem;
	transform: translateX(-50%);
	font-family: var(--ei-text); font-size: .85rem; font-weight: 600;
	padding: .5rem .9rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .5);
	background: rgba(5, 8, 20, .7);
	color: #fff;
	cursor: pointer;
	box-shadow: none;
	white-space: nowrap;
}
.ei .ei-portrait__replay:hover { background: #fff; color: #050814; }

/* Contact */
.ei .ei-contact {
	position: relative;
	background: var(--ei-contact-bg);
	color: var(--ei-contact-fg);
	padding-bottom: 3rem;
}
.ei .ei-contact .ei-illu .d { stroke: var(--ei-contact-fg); }
.ei .ei-contact__illu { width: clamp(9rem, 18vw, 15rem); margin-bottom: 1.5rem; }
.ei .ei-contact .ei-h2 { max-width: 17ch; }
.ei .ei-contact__lede { color: var(--ei-contact-soft); max-width: 30em; margin-bottom: 2.5rem; }
.ei .ei-contact__mail {
	display: inline-block;
	font-family: var(--ei-display);
	font-size: calc(var(--ei-title-scale) * clamp(1.6rem, 5.5vw, 5rem));
	font-weight: var(--ei-display-weight);
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--ei-contact-fg);
	text-decoration: underline;
	text-decoration-color: var(--ei-violet-fill);
	text-decoration-thickness: .08em;
	text-underline-offset: .15em;
	overflow-wrap: anywhere;
}
.ei .ei-contact__mail:hover { color: var(--ei-violet-fill); }
.ei .ei-contact a:focus-visible { outline-color: var(--ei-violet-fill); }
.ei .ei-contact__alt { margin-top: 1.5rem; }
.ei .ei-contact__alt a { text-decoration-color: var(--ei-violet-fill); text-underline-offset: .2em; }
.ei .ei-contact__form { margin-top: 3rem; max-width: 40rem; }
.ei .ei-foot {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
	margin-top: clamp(4rem, 10vh, 7rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--ei-contact-soft);
	font-size: .85rem;
	color: var(--ei-contact-soft);
}

/* ---------- 8. Page de guide ---------- */
.ei--guide { min-height: 100vh; }
.ei .ei-topbar {
	position: sticky; top: 0; z-index: 55;
	display: flex; align-items: center; gap: 2rem;
	padding: .75rem var(--ei-gutter) .75rem calc(var(--ei-rail-w) + var(--ei-gutter));
	padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
	background: color-mix(in srgb, var(--ei-paper) 90%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ei-line);
}
body.admin-bar .ei .ei-topbar { top: 32px; }
.ei .ei-topbar .ei-brand { margin-right: auto; }
.ei .ei-topbar__nav { display: flex; gap: 1.5rem; font-size: .95rem; font-weight: 600; }
.ei .ei-topbar__nav a { text-decoration: none; }
.ei .ei-topbar__nav a:hover { text-decoration: underline; text-decoration-color: var(--ei-violet); text-decoration-thickness: 2px; text-underline-offset: .3em; }

.ei .ei-article { padding: 0 var(--ei-gutter) 0 calc(var(--ei-rail-w) + var(--ei-gutter)); }
.ei .ei-ghead {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding: clamp(3rem, 8vh, 6rem) 0 clamp(2.5rem, 6vh, 4rem);
	scroll-margin-top: 5rem;
}
.ei .ei-crumbs { display: flex; gap: .6rem; font-size: .9rem; color: var(--ei-ink-soft); margin-bottom: 1.5rem; }
.ei .ei-crumbs a { text-decoration: none; }
.ei .ei-crumbs a:hover { color: var(--ei-ink); text-decoration: underline; }
.ei .ei-ghead__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.ei .ei-tag {
	font-size: .85rem; font-weight: 600;
	padding: .25rem .75rem;
	border-radius: 999px;
	background: var(--ei-violet-fill); color: #fff;
}
.ei .ei-tag--soft { background: transparent; color: var(--ei-ink); box-shadow: inset 0 0 0 2px var(--ei-ink); }
.ei .ei-ghead__title {
	font-family: var(--ei-display);
	font-size: calc(var(--ei-title-scale) * clamp(2.4rem, 3.2vw + 1rem, 4.5rem));
	font-weight: var(--ei-display-weight);
	line-height: var(--ei-title-lh);
	letter-spacing: var(--ei-title-track);
	max-width: 16ch;
	margin-bottom: 1.5rem;
	color: var(--ei-ink);
}
/* Titres longs (souvent les meilleurs pour le SEO) : plus petits, sur plus de largeur */
.ei .ei-ghead__title--long {
	font-size: calc(var(--ei-title-scale) * clamp(2rem, 1.8vw + 1.2rem, 3.4rem));
	line-height: 1.08;
	max-width: 24ch;
}
.ei .ei-ghead__lede { font-size: 1.2em; color: var(--ei-ink-soft); max-width: 32em; margin-bottom: 2rem; }
.ei .ei-ghead__meta { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.ei .ei-ghead__meta dt { font-size: .8rem; color: var(--ei-ink-soft); }
.ei .ei-ghead__meta dd { font-weight: 600; }
.ei .ei-ghead__illu { width: 100%; max-width: 24rem; justify-self: center; }

.ei .ei-toc {
	max-width: 44rem;
	padding: 1.5rem 1.75rem;
	margin-bottom: 3rem;
	border: 2px solid var(--ei-ink);
	border-radius: 1rem;
	background: var(--ei-card);
}
.ei .ei-toc__title { font-family: var(--ei-text); font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.ei .ei-toc__progress { display: none; }
.ei .ei-toc ol { counter-reset: toc; display: grid; gap: .35rem; }
.ei .ei-toc li { counter-increment: toc; display: flex; gap: .75rem; }
.ei .ei-toc li::before { content: counter(toc); font-family: var(--ei-display); font-weight: 700; color: var(--ei-violet); min-width: 1.25rem; }
.ei .ei-toc a { text-decoration: none; transition: color .2s; }
.ei .ei-toc a:hover { text-decoration: underline; text-decoration-color: var(--ei-violet); text-underline-offset: .2em; }

/* Grand écran : le texte garde une largeur de lecture confortable
   et le sommaire se fixe à droite en suivant la lecture */
.ei .ei-body { max-width: 44rem; }
/* Largeur : le contenu se centre dans l'espace disponible (à droite du parcours),
   le texte garde une ligne confortable (65 à 75 caractères) et le sommaire se cale à droite. */
.ei { --ei-wrap: 78rem; }
.ei .ei-article > * { max-width: var(--ei-wrap); margin-left: auto; margin-right: auto; }
.ei .ei-article > .ei-hub__intro > * { max-width: 46rem; }
.ei .ei-body { max-width: var(--ei-wrap); }
.ei .ei-prose,
.ei .ei-body > .ei-series,
.ei .ei-body > .ei-author,
.ei .ei-body > .ei-comments { max-width: 46rem; }
@media (min-width: 1200px) {
	.ei .ei-body {
		display: grid;
		grid-template-columns: minmax(0, 46rem) minmax(15rem, 18rem);
		justify-content: space-between;
		column-gap: 4rem;
		align-items: start;
	}
	.ei .ei-body > * { grid-column: 1; }
	.ei .ei-body > .ei-toc {
		grid-column: 2; grid-row: 1 / span 5;
		position: sticky; top: 6.5rem;
		margin: 0; padding: 0;
		border: 0; background: none;
		max-height: calc(100vh - 8rem); overflow-y: auto;
	}
	body.admin-bar .ei .ei-body > .ei-toc { top: calc(6.5rem + 32px); }
	.ei .ei-body > .ei-toc .ei-toc__title { font-size: .85rem; color: var(--ei-ink-soft); margin-bottom: .6rem; }
	.ei .ei-toc__progress {
		display: block; position: relative;
		height: 3px; border-radius: 3px;
		background: var(--ei-line);
		margin-bottom: 1.1rem; overflow: hidden;
	}
	.ei .ei-toc__progress span {
		position: absolute; inset: 0 auto 0 0;
		width: calc(var(--ei-p) * 100%);
		background: var(--ei-violet);
	}
	.ei .ei-body > .ei-toc ol { gap: 0; border-left: 2px solid var(--ei-line); }
	.ei .ei-body > .ei-toc li { display: block; }
	.ei .ei-body > .ei-toc li::before { content: none; }
	.ei .ei-body > .ei-toc a {
		display: block;
		margin-left: -2px;
		padding: .4rem 0 .4rem 1rem;
		border-left: 2px solid transparent;
		font-size: .9rem; line-height: 1.35;
		color: var(--ei-ink-soft);
	}
	.ei .ei-body > .ei-toc a[aria-current="true"] { color: var(--ei-ink); font-weight: 700; border-left-color: var(--ei-violet); }
}
@media (min-width: 1700px) { .ei { --ei-wrap: 84rem; } }


/* Le texte du guide (ce que tu écris dans l'éditeur) */
.ei .ei-prose {
	font-size: clamp(1.0625rem, .15vw + 1rem, 1.15rem);
	line-height: 1.75;
	letter-spacing: .003em;
}
.ei .ei-prose > * + * { margin-top: 1.3em; }
.ei .ei-prose h2 {
	font-family: var(--ei-display);
	font-size: calc(var(--ei-title-scale) * clamp(1.75rem, 2vw + 1rem, 2.6rem));
	font-weight: var(--ei-display-weight);
	line-height: 1.1;
	letter-spacing: -.02em;
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 2px solid var(--ei-ink);
	scroll-margin-top: 5rem;
	color: inherit;
}
.ei .ei-prose h3 { font-family: var(--ei-text); font-size: 1.3rem; font-weight: 700; margin-top: 2.25rem; color: inherit; }
.ei .ei-prose p,
.ei .ei-prose li { color: var(--ei-ink); }
.ei .ei-prose a { text-decoration-color: var(--ei-violet); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.ei .ei-prose a:hover { background: var(--ei-sun); color: #16213A; }
.ei .ei-prose ul li,
.ei .ei-prose ol li { position: relative; padding-left: 1.75rem; }
.ei .ei-prose li + li { margin-top: .45em; }
.ei .ei-prose ul li::before {
	content: ""; position: absolute; left: .35rem; top: .65em;
	width: .5rem; height: .5rem; border-radius: 50%;
	background: var(--ei-violet);
}
.ei .ei-prose ol { counter-reset: li; }
.ei .ei-prose ol li { counter-increment: li; }
.ei .ei-prose ol li::before {
	content: counter(li); position: absolute; left: 0; top: 0;
	font-family: var(--ei-display); font-weight: 700; color: var(--ei-violet);
}
.ei .ei-prose strong { font-weight: 700; }
.ei .ei-prose code {
	font-family: var(--ei-mono); font-size: .85em;
	background: var(--ei-tint);
	padding: .1em .35em; border-radius: 4px;
}
.ei .ei-prose .ei-code { position: relative; margin-top: 1.5rem; margin-bottom: 1.5rem; }
.ei .ei-prose pre {
	margin: 0;
	padding: 1.25rem 1.4rem;
	background: var(--ei-code-bg);
	color: #E8EBF4;
	border-radius: .9rem;
	overflow-x: auto;
	font-family: var(--ei-mono);
	font-size: .88rem;
	line-height: 1.65;
	tab-size: 2;
}
.ei .ei-prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.ei .ei-code__lang {
	position: absolute; left: 1.4rem; top: -.75rem;
	font-size: .75rem; font-weight: 700;
	padding: .15rem .6rem; border-radius: 999px;
	background: var(--ei-sun); color: #16213A;
}
.ei .ei-code__copy,
.ei .ei-code__copy:hover,
.ei .ei-code__copy:focus {
	position: absolute; right: .75rem; top: .75rem;
	font-family: var(--ei-text); font-size: .8rem; font-weight: 600;
	padding: .35rem .75rem;
	border-radius: 999px;
	border: 1px solid rgba(232, 235, 244, .35);
	background: rgba(232, 235, 244, .08);
	color: #E8EBF4;
	cursor: pointer;
	box-shadow: none;
}
.ei .ei-code__copy:hover { background: #E8EBF4; color: #16213A; }
.ei .tk-delim { color: #FFD23F; font-weight: 700; }
.ei .tk-kw { color: #B7ABFF; font-weight: 700; }
.ei .tk-str { color: #7FE0C4; }
.ei .tk-var { color: #FF9EC7; }
.ei .tk-fn { color: #8FD3FF; }
.ei .tk-com { color: #8A94AD; font-style: italic; }

.ei .ei-prose blockquote {
	margin-left: 0; margin-right: 0;
	padding-left: 1.25rem;
	border-left: 4px solid var(--ei-violet);
	font-size: 1.1em;
	color: var(--ei-ink-soft);
}
.ei .ei-prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
.ei .ei-prose th,
.ei .ei-prose td { text-align: left; padding: .65rem 1rem; border-bottom: 1px solid var(--ei-line); vertical-align: top; }
.ei .ei-prose th { font-weight: 700; border-bottom: 2px solid var(--ei-ink); }
.ei .ei-prose img { max-width: 100%; height: auto; border-radius: .75rem; }
.ei .ei-prose figcaption { font-size: .85rem; color: var(--ei-ink-soft); margin-top: .5rem; }

.ei .ei-callout {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 1rem;
	padding: 1.25rem 1.4rem;
	margin-top: 1.75rem; margin-bottom: 1.75rem;
	border: 2px solid var(--ei-ink);
	border-radius: 1rem;
	background: var(--ei-card);
}
.ei .ei-callout--attention { background: var(--ei-tint); }
.ei .ei-callout__icon { width: 2.75rem; height: 2.75rem; }
.ei .ei-callout__title { font-weight: 700; margin-bottom: .25rem; }
.ei .ei-callout__body p + p { margin-top: .6em; }

.ei .ei-author {
	display: flex; gap: 1.5rem; align-items: center;
	max-width: 44rem;
	margin-top: 4rem;
	padding: 1.75rem;
	border-radius: 1rem;
	background: var(--ei-card);
	scroll-margin-top: 5rem;
}
.ei .ei-author__title { font-family: var(--ei-text); font-size: 1.15rem; font-weight: 700; margin-bottom: .35rem; }
.ei .ei-author p { color: var(--ei-ink-soft); font-size: .95em; }

.ei .ei-related { padding: 4rem 0 clamp(4rem, 10vh, 7rem); }
.ei .ei-related__title {
	font-family: var(--ei-display);
	font-size: calc(var(--ei-title-scale) * clamp(1.75rem, 2.5vw + 1rem, 2.75rem));
	font-weight: var(--ei-display-weight);
	letter-spacing: -.02em;
	margin-bottom: 1.5rem;
}
.ei .ei-contact--compact { padding-top: clamp(4rem, 10vh, 6rem); }

/* ---------- Le nom en haut à gauche ---------- */
.ei .ei-brand {
	display: inline-flex; align-items: center; gap: .15em;
	font-family: var(--ei-display);
	font-weight: var(--ei-display-weight);
	font-size: calc(var(--ei-title-scale) * 1.15rem);
	letter-spacing: -.02em;
	text-decoration: none;
	white-space: nowrap;
	--ei-brand-rest: var(--ei-ink);
}
.ei .ei-brand__name {
	background: linear-gradient(90deg, var(--ei-violet) 0, var(--ei-violet) calc(var(--ei-p) * 100%), var(--ei-brand-rest) calc(var(--ei-p) * 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ei .ei-brand__dot {
	width: .42em; height: .42em;
	margin-left: .05em; margin-top: .45em;
	border-radius: 50%;
	background: var(--ei-sun);
	transition: transform .3s;
}
.ei .ei-brand:hover .ei-brand__dot { transform: scale(1.5); }
.ei .ei-brand--floating {
	position: fixed; z-index: 60;
	top: calc(1.25rem + env(safe-area-inset-top, 0px)); left: 1.25rem;
	padding: .55rem 1rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ei-paper) 85%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background-color .3s;
}
body.admin-bar .ei .ei-brand--floating { top: calc(1.25rem + 32px); }
.ei .ei-brand--floating.is-inverse { background: color-mix(in srgb, var(--ei-contact-bg) 85%, transparent); --ei-brand-rest: var(--ei-contact-fg); }

/* ---------- Bouton LinkedIn ---------- */
.ei .ei-social {
	display: inline-flex; align-items: center; gap: .8rem;
	margin-top: 1.75rem;
	padding: .45rem 1.25rem .45rem .45rem;
	border-radius: 999px;
	background: var(--ei-violet-fill);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .25s, color .25s, transform .25s;
}
.ei .ei-social:hover { background: var(--ei-sun); color: #16213A; transform: translateY(-2px); }
.ei .ei-social__badge {
	display: grid; place-items: center;
	width: 2.75rem; height: 2.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
}
.ei .ei-social__icon { width: 1.9rem; height: 1.9rem; }
.ei .ei-social .ei-illu .d { stroke: #fff; stroke-width: 7; }
.ei .ei-social:hover .ei-illu .d { stroke: #16213A; }
.ei .ei-social__logo { width: 1.5rem; height: 1.5rem; display: block; }

.ei-js .ei .ei-pop { transition: opacity .5s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.ei-js .ei .ei-pop:not(.is-drawn) { opacity: 0; transform: scale(.7); }

/* ---------- Le rail se déplie au survol (grand écran) ---------- */
@media (min-width: 901px) {
	.ei .ei-rail { --ei-rail-panel: 13rem; }
	.ei--guide .ei-rail { --ei-rail-panel: 24rem; }
	.ei .ei-rail::before {
		content: "";
		position: absolute; z-index: -1;
		left: -1.1rem; top: -1.4rem; bottom: -1.4rem;
		width: 3.45rem;
		border-radius: 1.4rem;
		background: var(--ei-card);
		box-shadow: 0 10px 40px rgba(10, 17, 34, .18), 0 0 0 1px var(--ei-line);
		opacity: 0;
		transition: width .35s cubic-bezier(.2, .8, .2, 1), opacity .2s;
	}
	.ei .ei-rail:hover::before,
	.ei .ei-rail:focus-within::before { opacity: 1; width: var(--ei-rail-panel); }
	.ei .ei-rail.is-inverse::before { background: var(--ei-contact-bg); box-shadow: 0 0 0 1px var(--ei-contact-soft); }
	.ei .ei-rail:hover .ei-rail__label,
	.ei .ei-rail:focus-within .ei-rail__label {
		opacity: 1; transform: none;
		background: none;
		transition-delay: calc(var(--k, 0) * 35ms + 80ms);
	}
	.ei .ei-rail:hover .ei-rail__node:hover .ei-rail__label { color: var(--ei-violet); }
}

/* ---------- Badges "Nouveau" et "Mis à jour" ---------- */
.ei .ei-badge {
	display: inline-block;
	position: relative; top: -.2em;
	margin-left: .35rem;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-family: var(--ei-text);
	font-size: .72rem; font-weight: 700; line-height: 1.2;
	letter-spacing: 0;
	white-space: nowrap;
	vertical-align: middle;
}
.ei .ei-badge--new { background: var(--ei-sun); color: #16213A; }
.ei .ei-badge--update { box-shadow: inset 0 0 0 2px var(--ei-violet); color: var(--ei-violet); }
.ei .ei-index__link:hover .ei-badge--update,
.ei .ei-index__link:focus-visible .ei-badge--update { box-shadow: inset 0 0 0 2px #fff; color: #fff; }
.ei .ei-glossary-link { margin-top: 1.75rem; color: var(--ei-ink-soft); }
.ei .ei-glossary-link a { color: var(--ei-ink); font-weight: 700; text-decoration-color: var(--ei-violet); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.ei .ei-glossary-link a:hover { background: var(--ei-sun); color: #16213A; }

/* ---------- Définitions au survol dans les guides ---------- */
.ei .ei-prose a.ei-term {
	position: relative;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: var(--ei-violet);
	text-decoration-thickness: 2px;
	text-underline-offset: .22em;
	color: inherit;
}
.ei .ei-term::after {
	content: attr(data-ei-def);
	position: absolute; z-index: 30;
	left: 50%; bottom: calc(100% + .6rem);
	width: max-content; max-width: min(19rem, 80vw);
	padding: .7rem .9rem;
	border-radius: .7rem;
	background: var(--ei-ink); color: var(--ei-paper);
	font-family: var(--ei-text); font-size: .85rem; font-weight: 500; line-height: 1.45;
	text-align: left; white-space: normal;
	opacity: 0; pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity .2s, transform .2s;
}
.ei .ei-term:hover::after,
.ei .ei-term:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .ei .ei-term::after { display: none; } }

/* ---------- Glossaire ---------- */
.ei .ei-gl-tools {
	display: flex; flex-wrap: wrap; align-items: end; gap: 1.25rem 2rem;
	padding-bottom: 2rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--ei-ink);
}
.ei .ei-gl-search { display: grid; gap: .4rem; flex: 1 1 18rem; max-width: 26rem; }
.ei .ei-gl-search__label { font-size: .85rem; font-weight: 700; }
.ei .ei-gl-search input,
.ei .ei-gl-search input:focus {
	width: 100%;
	font: inherit; font-size: 1rem;
	padding: .8rem 1.1rem;
	border-radius: 999px;
	border: 2px solid var(--ei-ink);
	background: var(--ei-card);
	color: var(--ei-ink);
	box-shadow: none;
}
.ei .ei-gl-search input:focus-visible { outline: 3px solid var(--ei-violet); outline-offset: 2px; }
.ei .ei-gl-letters { display: flex; flex-wrap: wrap; gap: .25rem; }
.ei .ei-gl-letters a,
.ei .ei-gl-letters span {
	display: grid; place-items: center;
	width: 2.1rem; height: 2.1rem;
	border-radius: 50%;
	font-family: var(--ei-display); font-weight: var(--ei-display-weight); font-size: .95rem;
	text-decoration: none;
}
.ei .ei-gl-letters a:hover { background: var(--ei-violet-fill); color: #fff; }
.ei .ei-gl-letters span { opacity: .28; }

.ei .ei-gl-group {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: 1.5rem;
	padding: 2rem 0;
	border-bottom: 1px solid var(--ei-line);
	scroll-margin-top: 5rem;
}
.ei .ei-gl-group__letter {
	font-family: var(--ei-display);
	font-weight: var(--ei-display-weight);
	font-size: calc(var(--ei-title-scale) * 3.5rem);
	line-height: 1;
	color: var(--ei-violet);
	position: sticky; top: 6rem; align-self: start;
}
.ei .ei-gl-list { display: grid; }
.ei .ei-gl-term {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 7rem;
	gap: .35rem 1.75rem;
	align-items: baseline;
	padding: 1rem 0;
	border-top: 1px solid var(--ei-line);
	text-decoration: none;
	transition: background-color .25s, color .25s, padding .25s;
}
.ei .ei-gl-list li:first-child .ei-gl-term { border-top: 0; }
.ei .ei-gl-term__name {
	font-family: var(--ei-display);
	font-weight: var(--ei-display-weight);
	font-size: calc(var(--ei-title-scale) * 1.35rem);
	line-height: 1.15; letter-spacing: -.01em;
	color: inherit; margin: 0;
}
.ei .ei-gl-term__def { color: var(--ei-ink-soft); font-size: .95em; }
.ei .ei-gl-term__tag { font-size: .8rem; font-weight: 700; text-align: right; }
.ei .ei-gl-term:hover,
.ei .ei-gl-term:focus-visible { background: var(--ei-violet-fill); color: #fff; padding-left: 1rem; padding-right: 1rem; border-radius: .6rem; }
.ei .ei-gl-term:hover .ei-gl-term__def,
.ei .ei-gl-term:focus-visible .ei-gl-term__def { color: rgba(255, 255, 255, .85); }
.ei .ei-gl-empty { padding: 3rem 0; font-size: 1.1em; }
.ei .ei-gl-empty a { font-weight: 700; text-decoration-color: var(--ei-violet); text-underline-offset: .2em; }
.ei--glossaire .ei-article { padding-bottom: clamp(4rem, 10vh, 7rem); }

/* Page d'un terme */
.ei .ei-thead__aka { color: var(--ei-ink-soft); margin-top: -.75rem; margin-bottom: 1.5rem; }
.ei .ei-thead__short { max-width: 36rem; padding-left: 1.25rem; border-left: 4px solid var(--ei-violet); }
.ei .ei-thead__short-label { font-size: .85rem; font-weight: 700; color: var(--ei-ink-soft); margin-bottom: .3rem; }
.ei .ei-thead__short-text { font-size: clamp(1.2rem, 1vw + 1rem, 1.5rem); font-weight: 600; line-height: 1.4; }
.ei .ei-thead__letter {
	justify-self: center;
	display: grid; place-items: center;
	width: min(100%, 13rem); aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ei-sun); color: #16213A;
	border: 2px solid var(--ei-ink);
	font-family: var(--ei-display);
	font-weight: var(--ei-display-weight);
	font-size: calc(var(--ei-title-scale) * 7rem);
	line-height: 1;
}
.ei .ei-tsuite { margin-top: 4rem; padding: 2.5rem 0 clamp(4rem, 10vh, 6rem); border-top: 2px solid var(--ei-ink); scroll-margin-top: 5rem; }
.ei .ei-tsuite__sub { font-family: var(--ei-text); font-size: 1rem; font-weight: 700; margin: 2rem 0 1rem; }
.ei .ei-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ei .ei-chip-link {
	display: inline-block;
	padding: .45rem 1rem;
	border-radius: 999px;
	border: 2px solid var(--ei-ink);
	font-weight: 600; font-size: .95rem;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.ei .ei-chip-link:hover { background: var(--ei-violet-fill); border-color: var(--ei-violet-fill); color: #fff; }
.ei .ei-tnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.ei .ei-tnav__link {
	display: grid; gap: .2rem;
	padding: 1rem 1.25rem;
	border-radius: 1rem;
	background: var(--ei-card);
	font-family: var(--ei-display); font-weight: var(--ei-display-weight);
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.ei .ei-tnav__link span { font-family: var(--ei-text); font-size: .8rem; font-weight: 600; color: var(--ei-ink-soft); }
.ei .ei-tnav__link--all { text-align: center; }
.ei .ei-tnav__link--next { text-align: right; grid-column: 3; }
.ei .ei-tnav__link:hover { background: var(--ei-violet-fill); color: #fff; }
.ei .ei-tnav__link:hover span { color: rgba(255, 255, 255, .8); }
.ei--terme .ei-tsuite .ei-related__title { margin-bottom: 0; }

/* ---------- Vidéos YouTube ---------- */
.ei .ei-video { margin: 2rem 0; }
.ei .ei-video__play,
.ei .ei-video__play:hover,
.ei .ei-video__play:focus {
	position: relative;
	display: block; width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0; margin: 0;
	border: 2px solid var(--ei-ink);
	border-radius: 1rem;
	overflow: hidden;
	background: var(--ei-code-bg);
	cursor: pointer;
	box-shadow: none;
}
.ei .ei-video__thumb { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; transition: transform .5s, opacity .3s; opacity: .9; }
.ei .ei-video__play:hover .ei-video__thumb { transform: scale(1.03); opacity: 1; }
.ei .ei-video__drawn { position: absolute; inset: 0; display: grid; place-items: center; }
.ei .ei-video__drawn .ei-illu { width: 40%; opacity: .35; }
.ei .ei-video__drawn .ei-illu .d { stroke: #E8EBF4; }
.ei .ei-video__btn {
	position: absolute; left: 50%; top: 50%;
	display: grid; place-items: center;
	width: 4.5rem; height: 4.5rem;
	margin: -2.25rem 0 0 -2.25rem;
	border-radius: 50%;
	background: var(--ei-violet-fill);
	box-shadow: 0 8px 30px rgba(10, 17, 34, .35);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s;
}
.ei .ei-video__btn svg { width: 1.9rem; height: 1.9rem; fill: #fff; margin-left: .2rem; }
.ei .ei-video__play:hover .ei-video__btn { transform: scale(1.12); background: var(--ei-sun); }
.ei .ei-video__play:hover .ei-video__btn svg { fill: #16213A; }
.ei .ei-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 2px solid var(--ei-ink); border-radius: 1rem; }
.ei .ei-video__cap { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; margin-top: .75rem; font-size: .9rem; color: var(--ei-ink-soft); }
.ei .ei-video__cap span:first-child { font-weight: 700; color: var(--ei-ink); }
.ei .ei-video__cap a { margin-left: auto; font-weight: 600; text-decoration-color: var(--ei-violet); text-underline-offset: .2em; }
.ei .ei-socials { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.ei .ei-socials .ei-social { margin-top: 0; }

/* ---------- Séries ---------- */
.ei a.ei-tag--series { background: var(--ei-sun); color: #16213A; text-decoration: none; }
.ei a.ei-tag--series:hover { background: var(--ei-violet-fill); color: #fff; }
.ei .ei-series {
	margin-top: 4rem;
	padding: 1.75rem;
	border: 2px solid var(--ei-ink);
	border-radius: 1rem;
	background: var(--ei-card);
}
.ei .ei-series__kicker { font-size: .85rem; font-weight: 700; color: var(--ei-ink-soft); }
.ei .ei-series__title { font-family: var(--ei-display); font-weight: var(--ei-display-weight); font-size: calc(var(--ei-title-scale) * 1.6rem); margin: .2rem 0 1rem; }
.ei .ei-series__title a { text-decoration: none; }
.ei .ei-series__title a:hover { color: var(--ei-violet); }
.ei .ei-series__list { counter-reset: ep; display: grid; gap: .1rem; border-left: 2px solid var(--ei-line); }
.ei .ei-series__list li { counter-increment: ep; display: flex; gap: .75rem; padding: .45rem 0 .45rem 1rem; margin-left: -2px; border-left: 2px solid transparent; }
.ei .ei-series__list li::before { content: counter(ep, decimal-leading-zero); font-family: var(--ei-display); font-weight: 700; color: var(--ei-violet); }
.ei .ei-series__list li.is-current { border-left-color: var(--ei-violet); font-weight: 700; }
.ei .ei-series__list a { text-decoration: none; color: var(--ei-ink-soft); }
.ei .ei-series__list a:hover { color: var(--ei-ink); text-decoration: underline; text-decoration-color: var(--ei-violet); }
.ei .ei-series__nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; margin-top: 1.5rem; }
.ei .ei-series__nav .ei-btn[rel="next"] { margin-left: auto; }
.ei .ei-index--numbered { counter-reset: ep; }
.ei .ei-index--numbered .ei-index__item { counter-increment: ep; }
.ei .ei-index--numbered .ei-index__title::before { content: counter(ep, decimal-leading-zero) "  "; color: var(--ei-violet); }
.ei .ei-index--numbered .ei-index__link:hover .ei-index__title::before { color: var(--ei-sun); }

/* ---------- Commentaires ---------- */
.ei .ei-comments { margin-top: 4rem; padding-top: 2.5rem; border-top: 2px solid var(--ei-ink); scroll-margin-top: 5rem; }
.ei .ei-comments .ei-related__title { margin-bottom: 1.5rem; }
.ei .ei-comments__empty { color: var(--ei-ink-soft); margin-bottom: 2rem; }
.ei .ei-comments__list,
.ei .ei-comments__list .children { display: grid; gap: 1rem; list-style: none; margin: 0 0 2.5rem; padding: 0; }
.ei .ei-comments__list .children { margin: 1rem 0 0 1.5rem; padding-left: 1.25rem; border-left: 2px solid var(--ei-line); }
.ei .ei-comment__body { padding: 1.25rem 1.4rem; border-radius: 1rem; background: var(--ei-card); }
.ei .ei-comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; }
.ei .ei-comment__avatar {
	display: grid; place-items: center;
	width: 2.4rem; height: 2.4rem; border-radius: 50%;
	background: var(--ei-tint); color: var(--ei-violet);
	font-family: var(--ei-display); font-weight: 700;
}
.ei .ei-comment__avatar.is-author { background: var(--ei-sun); color: #16213A; }
.ei .ei-comment__author { font-weight: 700; }
.ei .ei-comment__date { font-size: .85rem; color: var(--ei-ink-soft); margin-left: auto; }
.ei .ei-comment__pending { font-size: .9rem; font-weight: 600; color: var(--ei-violet); margin-bottom: .5rem; }
.ei .ei-comment__text p + p { margin-top: .75em; }
.ei .comment-reply-link { display: inline-block; margin-top: .75rem; font-size: .9rem; font-weight: 700; color: var(--ei-violet); text-decoration: none; }
.ei .comment-reply-link:hover { text-decoration: underline; }
.ei .comment-respond { margin-top: 1rem; }
.ei .comment-reply-title { font-family: var(--ei-text); font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
.ei .comment-reply-title small { margin-left: .75rem; font-size: .85rem; }
.ei .ei-comment-form__note { font-size: .9rem; color: var(--ei-ink-soft); margin-bottom: 1rem; }
.ei .ei-comment-form { display: grid; gap: 1rem; }
.ei .ei-comment-form p { margin: 0; }
.ei .ei-comment-form label { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .35rem; }
.ei .ei-comment-form input[type="text"],
.ei .ei-comment-form input[type="email"],
.ei .ei-comment-form textarea {
	width: 100%;
	font: inherit; font-size: 1rem;
	padding: .8rem 1rem;
	border-radius: .75rem;
	border: 2px solid var(--ei-ink);
	background: var(--ei-card);
	color: var(--ei-ink);
	box-shadow: none;
}
.ei .ei-comment-form input:focus-visible,
.ei .ei-comment-form textarea:focus-visible { outline: 3px solid var(--ei-violet); outline-offset: 2px; }
.ei .ei-comment-form .comment-form-cookies-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.ei .ei-comment-form .comment-form-cookies-consent label { font-weight: 500; margin: 0; }
.ei .ei-comment-form .form-submit .ei-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.ei .ei-comments .nav-links { display: flex; gap: 1rem; margin-bottom: 2rem; }

/* ---------- Page 404 ---------- */
.ei .ei-lost {
	display: grid; justify-items: center; text-align: center;
	padding: clamp(3rem, 8vh, 6rem) var(--ei-gutter) clamp(4rem, 10vh, 7rem);
}
.ei .ei-lost__illu { width: min(100%, 28rem); margin-bottom: 1rem; }
.ei .ei-lost__code {
	font-family: var(--ei-display);
	font-weight: 800;
	font-size: calc(var(--ei-title-scale) * clamp(5.5rem, 15vw, 11rem));
	line-height: .9;
	letter-spacing: -.04em;
	color: var(--ei-violet-fill);
	margin-bottom: 1.25rem;
}
.ei .ei-lost__title {
	font-family: var(--ei-display);
	font-weight: var(--ei-display-weight);
	font-size: calc(var(--ei-title-scale) * clamp(1.9rem, 3vw + 1rem, 3.25rem));
	line-height: 1.05; letter-spacing: var(--ei-title-track);
	max-width: 18ch;
	margin-bottom: 1.25rem;
}
.ei .ei-lost__text { max-width: 34em; color: var(--ei-ink-soft); margin-bottom: 2rem; }
.ei .ei-lost__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.ei .ei-btn {
	display: inline-block;
	padding: .75rem 1.4rem;
	border-radius: 999px;
	background: var(--ei-violet-fill); color: #fff;
	font-weight: 700; text-decoration: none;
	box-shadow: inset 0 0 0 2px var(--ei-violet-fill);
	transition: background-color .2s, color .2s, box-shadow .2s;
}
.ei .ei-btn--ghost { background: transparent; color: var(--ei-ink); box-shadow: inset 0 0 0 2px var(--ei-ink); }
.ei .ei-btn:hover { background: var(--ei-sun); color: #16213A; box-shadow: inset 0 0 0 2px var(--ei-sun); }
.ei--lost,
.ei--guides { --ei-rail-w: 0px; }
.ei--guides .ei-article { padding-bottom: clamp(4rem, 10vh, 7rem); }
.ei .ei-hub__intro { margin-bottom: 2.5rem; }
.ei .ei-more { margin-top: 2rem; }
.ei .ei-gl-prods { display: flex; flex-wrap: wrap; gap: .5rem; }
.ei--lost .ei-related { max-width: 72rem; margin: 0 auto; padding: 0 var(--ei-gutter) clamp(4rem, 10vh, 6rem); }
.ei--terme .ei-body { display: block; }
.ei--terme .ei-tsuite { max-width: none; }

/* ---------- 9. Tablette et mobile ---------- */
@media (max-width: 1100px) {
	.ei .ei-index__link { grid-template-columns: 3.25rem minmax(0, 1fr) 9rem; }
	.ei .ei-index__desc { grid-column: 2 / 3; }
	.ei .ei-index__tags { grid-row: 1; grid-column: 3; }
}

@media (max-width: 900px) {
	.ei { --ei-rail-w: 0px; }
	.ei .ei-rail {
		left: 0; right: 0; top: auto; bottom: 0;
		transform: none;
		width: auto; height: auto;
		padding: .9rem 2rem calc(2.1rem + env(safe-area-inset-bottom, 0px));
		background: color-mix(in srgb, var(--ei-paper) 94%, transparent);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border-top: 1px solid var(--ei-line);
	}
	.ei .ei-rail__track { left: 2.625rem; right: 2.625rem; top: 1.525rem; bottom: auto; width: auto; height: 2px; margin: 0; }
	.ei .ei-rail__fill { height: 100%; width: calc(var(--ei-p) * 100%); }
	.ei .ei-rail__contact { top: 1.525rem; left: calc(2.625rem + var(--ei-p) * (100% - 5.25rem)); }
	.ei .ei-rail__list { flex-direction: row; height: auto; }
	.ei .ei-rail__item { height: auto; }
	.ei .ei-rail__node { position: relative; font-size: .72rem; }
	.ei .ei-rail__label,
	.ei .ei-rail__node:hover .ei-rail__label,
	.ei .ei-rail__node[aria-current="true"] .ei-rail__label {
		position: absolute; top: 1.6rem; left: 50%;
		transform: translateX(-50%);
		opacity: 1; background: none; padding: 0;
	}
	.ei .ei-rail__node[aria-current="true"] .ei-rail__label { color: var(--ei-violet); }
	.ei .ei-rail--compact .ei-rail__label { display: none; }
	.ei .ei-rail--compact .ei-rail__now {
		display: block;
		position: absolute; left: 2rem; right: 2rem; bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
		text-align: center; font-size: .75rem; font-weight: 600;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}

	.ei .ei-theme--floating { top: calc(.9rem + env(safe-area-inset-top, 0px)); right: .9rem; }
	.ei .ei-hero { grid-template-columns: 1fr; padding-top: 5rem; }
	.ei .ei-hero__illu { max-width: 18rem; justify-self: start; order: -1; }
	.ei .ei-contact { padding-bottom: 7rem; }
	.ei .ei-index__link { grid-template-columns: 2.75rem minmax(0, 1fr); gap: .35rem 1rem; align-items: start; }
	.ei .ei-index__icon { width: 2.75rem; grid-row: span 3; }
	.ei .ei-index__tags { order: -1; text-align: left; grid-column: 2; grid-row: auto; }
	.ei .ei-index__desc { grid-column: 2; }
	.ei .ei-steps { grid-template-columns: 1fr; gap: 2.5rem; }
	.ei .ei-steps::before { left: 1.5rem; right: auto; top: 1.5rem; bottom: 1.5rem; width: 2px; height: auto; }
	.ei .ei-step { padding-left: 4.5rem; }
	.ei .ei-step__node { position: absolute; left: 0; top: 0; }
	.ei .ei-step__illu { width: 4.5rem; height: 4.5rem; margin-bottom: .5rem; }
	.ei .ei-about { grid-template-columns: 1fr; }
	.ei .ei-about__portrait { width: min(80%, 18rem); order: -1; justify-self: start; }
	.ei .ei-about__portrait figcaption { text-align: left; }

	.ei .ei-topbar__nav { display: none; }
	.ei .ei-ghead { grid-template-columns: 1fr; }
	.ei .ei-ghead__illu { max-width: 13rem; justify-self: start; order: -1; }
	.ei .ei-author { flex-direction: column; align-items: flex-start; }
	.ei .ei-gl-group { grid-template-columns: 1fr; gap: .5rem; }
	.ei .ei-gl-group__letter { position: static; font-size: 2.5rem; }
	.ei .ei-gl-term { grid-template-columns: 1fr; }
	.ei .ei-gl-term__tag { text-align: left; }
	.ei .ei-thead__letter { width: 6rem; font-size: 3.25rem; justify-self: start; order: -1; }
	.ei .ei-tnav { grid-template-columns: 1fr; }
	.ei .ei-tnav__link--next { grid-column: auto; }
}

@media (max-width: 480px) {
	.ei .ei-rail__label { font-size: .65rem; }
	.ei .ei-filters__count { width: 100%; margin-left: 0; }
}

/* ---------- 10. Moins d'animations si le visiteur l'a demandé ---------- */
@media (prefers-reduced-motion: reduce) {
	.ei *, .ei *::before, .ei *::after { transition: none !important; animation: none !important; }
	.ei-js .ei .ei-illu .d { stroke-dashoffset: 0 !important; opacity: 1 !important; }
	.ei-js .ei .ei-illu .f { opacity: 1 !important; }
}
@media (prefers-reduced-motion: no-preference) {
	html:has(.ei) { scroll-behavior: smooth; }
}