/* ════════════════════════════════════════════════════════════
   BANDEAU + COMMENT JE TRAVAILLE
   Reprend les styles existants : .svc-header / .svc-eyebrow /
   .svc-heading, .svc-tag, .svc-item__desc, titres serif dark + outline,
   astérisque du sprite SVG, animation ticker-scroll de main.css.
   Démos : éléments blancs posés sur un cône de lumière saturé avec
   grain (moteur WebGL de js/atmosphere.js), comme sur Japhy.
════════════════════════════════════════════════════════════ */

/* ── Bandeau d'engagements : un ruban en arc ──
   Avec JS (js/process.js), le ruban est dessiné en SVG le long d'un arc
   qui monte en diagonale, et le texte défile en suivant la courbe.
   Sans JS : bande droite inclinée. La liste HTML reste lisible par les
   lecteurs d'écran dans les deux cas. */
.proc-band {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	width: 112%;
	margin: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem) -6%;
	background: linear-gradient(90deg, #FFB898, #FFD7F0 20%, #FFDD7A 45%, #B9D3FF 70%, #FFEED8 85%, #FFB898);
	background-size: 200% 100%;
	transform: rotate(-3deg);
	animation: proc-band-hue 24s linear infinite;
}
.proc-band::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .1 0 0 0 0 .31 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	opacity: .35;
	mix-blend-mode: multiply;
	pointer-events: none;
}
@keyframes proc-band-hue { to { background-position: -200% 0; } }
.proc-band__track {
	display: flex;
	width: max-content;
	animation: ticker-scroll 42s linear infinite;
}
.proc-band:hover .proc-band__track { animation-play-state: paused; }
.proc-band__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 1.1rem 0;
}
.proc-band__list li {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	padding-right: 2.25rem;
	white-space: nowrap;
	/* même style que les surtitres (.svc-eyebrow) */
	font-family: var(--fb);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--black);
}
.proc-band__star { width: .9rem; height: .9rem; color: var(--black); flex-shrink: 0; }

/* Version arc (JS) */
.proc-band.is-arc {
	width: 100%;
	margin: 0;
	background: none;
	transform: none;
	animation: none;
	overflow: visible;
}
.proc-band.is-arc::after { display: none; }
.proc-band.is-arc .proc-band__track {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	animation: none;
}
.proc-band__arc {
	display: block;
	overflow: visible;
	animation: proc-band-float 11s ease-in-out infinite alternate;
}
.proc-band__arc text {
	font-family: var(--fb);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	fill: var(--black);
}
/* Flottement doux, comme les rubans de Japhy */
@keyframes proc-band-float {
	from { transform: translate3d(0, 0, 0) rotate(0deg); }
	to   { transform: translate3d(0, -6px, 0) rotate(-.5deg); }
}

/* ── Section ── */
.proc {
	padding: clamp(4rem, 8vw, 8rem) var(--pad);
	scroll-margin-top: -40px;
	overflow-x: clip;
}
.proc-steps {
	list-style: none;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0;
	display: grid;
	gap: clamp(5rem, 9vw, 9rem);
}
.proc-step {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}
.proc-step:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.proc-step:nth-child(even) .proc-step__text { order: 2; }
.proc-step__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}
.proc-step__title {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: var(--ft);
	font-size: clamp(2rem, 3.4vw, 3.5rem);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.04em;
}
.proc .svc-item__desc { max-width: 44ch; }

/* ── Démo : boîte de référence, la lumière déborde autour ── */
.proc-demo {
	position: relative;
	aspect-ratio: 4 / 3;
	isolation: isolate;
}
.proc-glow {
	position: absolute;
	left: -16%;
	right: -16%;
	top: 4%;
	bottom: -26%;
	z-index: -1;
	pointer-events: none;
}
.proc-glow canvas { display: block; width: 100%; height: 100%; }
/* Repli (mobile, sans WebGL) : dégradé statique + grain, bords fondus */
.proc-glow.fallback {
	background:
		radial-gradient(40% 60% at 22% 55%, #ACE9FF, transparent 70%),
		radial-gradient(45% 55% at 74% 40%, #FFEED8, transparent 70%),
		var(--glow, #EC7B57);
	-webkit-mask-image: radial-gradient(50% 50% at 50% 55%, #000 45%, transparent 100%);
	        mask-image: radial-gradient(50% 50% at 50% 55%, #000 45%, transparent 100%);
}
.proc-glow.fallback::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .1 0 0 0 0 .31 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	opacity: .3;
	mix-blend-mode: multiply;
}
.proc-demo__inner { position: absolute; inset: 0; z-index: 1; }
.proc-chip {
	position: absolute;
	right: .25rem;
	bottom: -1.25rem;
	z-index: 5;
	font-family: var(--fb);
	font-size: .75rem;
	line-height: 1;
	padding: .55rem .85rem;
	border-radius: 999px;
	background: #242424;
	color: #fff;
}
/* Éléments blancs : bord fin + ombre longue (Japhy) */
.proc-white {
	background: #fff;
	border: 1px solid rgba(36, 36, 36, .08);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(36, 36, 36, .04), 0 40px 80px -50px rgba(36, 36, 36, .45);
}

/* ── 1. Verbatims → thèmes ── */
.proc-d1 .note {
	position: absolute;
	width: 30%;
	min-height: 19%;
	left: var(--sx);
	top: var(--sy);
	transform: rotate(var(--sr));
	padding: .6rem .7rem;
	background: #fff;
	border: 1px solid rgba(36, 36, 36, .06);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(36, 36, 36, .04), 0 18px 40px -22px rgba(36, 36, 36, .4);
	font-family: var(--fb);
	font-size: .8rem;
	line-height: 1.3;
	color: #242424;
	transition: left .9s cubic-bezier(.2, 1, .3, 1), top .9s cubic-bezier(.2, 1, .3, 1), transform .9s cubic-bezier(.2, 1, .3, 1), box-shadow .5s;
	transition-delay: calc(var(--i) * 55ms);
}
.proc-d1[data-state="sorted"] .note { left: var(--cx); top: var(--cy); transform: rotate(0deg); }
.proc-d1[data-state="sorted"] .note.t1 { box-shadow: 0 1px 2px rgba(36, 36, 36, .04), 0 18px 40px -22px rgba(36, 36, 36, .4), inset 0 3px 0 #E16540; }
.proc-d1[data-state="sorted"] .note.t2 { box-shadow: 0 1px 2px rgba(36, 36, 36, .04), 0 18px 40px -22px rgba(36, 36, 36, .4), inset 0 3px 0 #47D096; }
.proc-d1[data-state="sorted"] .note.t3 { box-shadow: 0 1px 2px rgba(36, 36, 36, .04), 0 18px 40px -22px rgba(36, 36, 36, .4), inset 0 3px 0 #328EFA; }
.proc-d1 .theme {
	position: absolute;
	top: 4%;
	width: 30%;
	font-family: var(--fb);
	font-size: .8rem;
	font-weight: 500;
	line-height: 1.2;
	color: #242424;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .5s, transform .5s cubic-bezier(.2, 1, .3, 1);
}
.proc-d1 .theme i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; }
.proc-d1[data-state="sorted"] .theme { opacity: 1; transform: none; transition-delay: .7s; }
.proc-d1 .proc-chip { opacity: 0; transition: opacity .4s; }
.proc-d1[data-state="sorted"] .proc-chip { opacity: 1; transition-delay: 1s; }

/* ── 2. Wireframe → interface → test ── */
.proc-d2 .proc-demo__inner { display: grid; place-items: center; }
.proc-screen {
	width: 90%;
	height: 86%;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
}
.proc-screen__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #EFEBE6; }
.proc-screen__bar .dot { width: 14px; height: 14px; border-radius: 4px; background: #E3DED7; transition: background-color .5s; }
.proc-screen__bar .bar { height: 7px; border-radius: 4px; background: #EEEAE5; }
.proc-screen__body { padding: 6% 7%; display: flex; flex-direction: column; gap: 4.5%; font-family: var(--fb); }
.proc-swap { display: grid; align-items: center; }
.proc-swap > * { grid-area: 1 / 1; transition: opacity .45s; transition-delay: calc(var(--d, 0) * 120ms); }
.proc-swap .sk { height: 10px; border-radius: 5px; background: #EEEAE5; }
.proc-swap .real { opacity: 0; }
.proc-d2:not([data-step="wire"]) .proc-swap .sk { opacity: 0; }
.proc-d2:not([data-step="wire"]) .proc-swap .real { opacity: 1; }
.proc-d2:not([data-step="wire"]) .proc-screen__bar .dot { background: #242424; }
.proc-s-title { font-family: var(--ft); font-size: clamp(1.05rem, 1.7vw, 1.45rem); letter-spacing: -.02em; color: #242424; }
.proc-s-title .sk { height: 16px; width: 62%; }
.proc-s-text { font-size: .78rem; color: #6b6b6b; }
.proc-s-text .sk { width: 84%; }
.proc-s-row { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: #242424; }
.proc-s-row .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #D6D0C6; flex: none; transition: border-color .4s, background-color .4s; }
.proc-d2:not([data-step="wire"]) .proc-s-row .box { border-color: #242424; }
.proc-d2:not([data-step="wire"]) .proc-s-row.is-done .box { background: #242424; }
.proc-s-row .proc-swap { flex: 1; }
.proc-s-row .sk { width: 66%; }
.proc-s-cta { margin-top: auto; }
.proc-s-cta .proc-swap { justify-items: start; }
.proc-s-cta .sk { width: 120px; height: 34px; border-radius: 8px; background: transparent; border: 1.5px dashed #D6D0C6; }
.proc-s-cta .real {
	height: 34px; padding: 0 18px; border-radius: 8px;
	background: #242424; color: #fff; font-size: .8rem;
	display: inline-flex; align-items: center;
	transition: opacity .45s, transform .15s;
}
.proc-d2[data-step="click"] .proc-s-cta .real { transform: scale(.94); }
.proc-cursor {
	position: absolute; left: 88%; top: 86%; width: 22px; height: 22px; z-index: 4; pointer-events: none;
	opacity: 0; transition: left 1s cubic-bezier(.2, 1, .3, 1), top 1s cubic-bezier(.2, 1, .3, 1), opacity .3s;
}
.proc-d2[data-step="hifi"] .proc-cursor { opacity: 1; }
.proc-d2[data-step="aim"] .proc-cursor,
.proc-d2[data-step="click"] .proc-cursor,
.proc-d2[data-step="done"] .proc-cursor { opacity: 1; left: var(--tx, 30%); top: var(--ty, 76%); }

/* Éclat au clic du curseur (même geste que l'éclat au clic de la page) */
.proc-burst { position: absolute; z-index: 5; pointer-events: none; }
.proc-burst i {
	position: absolute;
	width: .55rem;
	height: 3px;
	border-radius: 999px;
	background: #242424;
	animation: proc-ray .6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes proc-ray {
	0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(.35rem) scaleX(.5); }
	35%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(.8rem) scaleX(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(1.35rem) scaleX(0); }
}
.proc-toast {
	position: absolute; left: 50%; top: 2%; z-index: 5;
	transform: translate(-50%, -8px);
	font-family: var(--fb); font-size: .78rem; white-space: nowrap;
	padding: .55rem .9rem; border-radius: 999px; background: #242424; color: #fff;
	opacity: 0; transition: opacity .35s, transform .35s cubic-bezier(.2, 1, .3, 1);
}
.proc-toast b { font-weight: 500; color: #A8E6C6; margin-right: .35rem; }
.proc-d2[data-step="done"] .proc-toast { opacity: 1; transform: translate(-50%, 0); }

/* ── 3. Un token, tous les composants ── */
.proc-d3 { --tok: #242424; }
.proc-d3 .proc-demo__inner {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
	gap: 4%;
	padding: 4% 3%;
}
.proc-tokens {
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 14px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	font-family: var(--fb);
	font-size: .78rem;
	color: #242424;
}
.proc-tokens .file { color: #4a4a4a; }
.proc-tok { display: grid; grid-template-columns: auto 1fr; gap: .3rem .55rem; align-items: center; }
.proc-tok .k { grid-column: 1 / -1; color: #4a4a4a; }
.proc-tok .sw { width: 18px; height: 18px; border-radius: 5px; background: var(--tok); transition: background-color .5s; }
.proc-tok .v { font-variant-numeric: tabular-nums; font-weight: 500; }
.proc-tok.is-static { opacity: .6; }
.proc-comps {
	padding: 1.1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .8rem .7rem;
	align-content: center;
	font-family: var(--fb);
	font-size: .8rem;
	color: #242424;
}
.proc-comps > * { transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s; transition-delay: calc(var(--i) * 80ms); }
.c-btn { grid-column: 1 / -1; justify-self: start; height: 34px; padding: 0 16px; border-radius: 8px; background: var(--tok); color: #fff; display: inline-flex; align-items: center; }
.c-toggle { width: 36px; height: 20px; border-radius: 999px; background: var(--tok); position: relative; }
.c-toggle::after { content: ''; position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.c-badge { justify-self: start; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--tok); color: var(--tok); font-size: .72rem; }
.c-check { display: flex; align-items: center; gap: .5rem; }
.c-check i { width: 16px; height: 16px; border-radius: 4px; background: var(--tok); display: grid; place-items: center; transition: background-color .5s; transition-delay: inherit; }
.c-check i::after { content: ''; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.c-progress { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #EEEAE5; overflow: hidden; }
.c-progress span { display: block; width: 64%; height: 100%; background: var(--tok); transition: background-color .5s; transition-delay: inherit; }
.c-tabs { grid-column: 1 / -1; display: flex; gap: 1rem; border-bottom: 1px solid #EEEAE5; font-size: .75rem; color: #6b6b6b; }
.c-tabs span { padding-bottom: .45rem; }
.c-tabs span:first-child { color: #242424; box-shadow: inset 0 -2px 0 var(--tok); transition: box-shadow .5s; transition-delay: inherit; }
.c-link { grid-column: 1 / -1; color: var(--tok); text-decoration: underline; text-underline-offset: 3px; }

/* ── 4. Funnel avant / après ── */
.proc-d4 .proc-demo__inner { padding: 4% 3%; display: flex; }
.proc-funnel { flex: 1; padding: 1.25rem 1.4rem; display: flex; flex-direction: column; font-family: var(--fb); color: #242424; }
.proc-funnel__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.proc-funnel__head .svc-tag { transition: background-color .4s, color .4s, border-color .4s; }
.proc-d4[data-v="1"] .ver-1,
.proc-d4[data-v="2"] .ver-2 { background: #242424; border-color: #242424; color: #fff; }
.proc-delta { margin-left: auto; font-size: .8rem; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s cubic-bezier(.2, 1, .3, 1); }
.proc-d4[data-v="2"] .proc-delta { opacity: 1; transform: none; transition-delay: .7s; }
.proc-rows { display: grid; gap: .85rem; flex: 1; align-content: center; }
.proc-row { display: grid; grid-template-columns: 30% 1fr auto; align-items: center; gap: .75rem; font-size: .8rem; }
.proc-row .lbl { color: #6b6b6b; }
.proc-row .track { display: block; height: 20px; border-radius: 5px; background: #F2EFEA; overflow: hidden; }
.proc-row .fill { display: block; height: 100%; width: var(--w1); border-radius: 5px; background: #D6D0C6; transition: width 1s cubic-bezier(.2, 1, .3, 1), background-color .6s; }
.proc-d4[data-v="2"] .proc-row .fill { width: var(--w2); background: #BDB5A8; }
.proc-d4[data-v="2"] .proc-row.key .fill { background: #242424; }
.proc-row .val { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 3.2em; }
.proc-row .val .b { display: none; }
.proc-d4[data-v="2"] .proc-row .val .a { display: none; }
.proc-d4[data-v="2"] .proc-row .val .b { display: inline; }
.proc-note { margin-top: 1rem; font-size: .72rem; color: #6b6b6b; }

/* ── Hauteur juste : les démos 2, 3 et 4 prennent la hauteur de leur contenu
   (plus de format 4:3 imposé, donc plus d'espace vide dans les cartes).
   La démo 1 garde son cadre : les post-it ont besoin de place pour s'éparpiller. ── */
.proc-d2, .proc-d3, .proc-d4 { aspect-ratio: auto; }
.proc-d2 .proc-demo__inner,
.proc-d3 .proc-demo__inner,
.proc-d4 .proc-demo__inner { position: relative; inset: auto; }
/* 2. Écran : marge autour de la fenêtre, contenu serré */
.proc-d2 .proc-demo__inner { padding: 7% 0 6%; }
.proc-d2 .proc-screen { height: auto; }
.proc-d2 .proc-screen__body { gap: 16px; padding: 28px 7% 32px; }
/* 3. Tokens + composants : même hauteur, ajustée au plus haut des deux */
.proc-d3 .proc-demo__inner { padding: 4% 3% 6%; align-items: stretch; }
/* 4. Funnel : les barres suivent directement les boutons v1 / v2 */
.proc-d4 .proc-demo__inner { padding: 4% 3% 6%; }
.proc-d4 .proc-rows { flex: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
	.proc { padding: clamp(3rem, 6vw, 6rem) var(--pad); }
	.proc-step, .proc-step:nth-child(even) { grid-template-columns: 1fr; }
	.proc-step:nth-child(even) .proc-step__text { order: 0; }
	.proc .svc-item__desc { max-width: none; }
	.proc-glow { left: -8%; right: -8%; }
}
@media (max-width: 520px) {
	.proc-demo { aspect-ratio: 1 / 1; }
	.proc-d1 .note { font-size: .7rem; padding: .45rem .5rem; }
	.proc-d1 .theme { font-size: .7rem; }
	.proc-d3 .proc-demo__inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 4%; }
	.proc-tokens { flex-direction: row; flex-wrap: wrap; align-items: center; padding: .7rem .9rem; gap: .5rem; }
	.proc-tokens .file, .proc-tok.is-static { display: none; }
	.proc-comps { padding: .9rem; gap: .6rem; }
	.proc-funnel { padding: 1rem; }
	.proc-delta { margin-left: 0; flex-basis: 100%; }
	.proc-row { font-size: .72rem; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.proc-band, .proc-band__track, .proc-band__arc { animation: none; }
	.proc-band__track { flex-wrap: wrap; width: auto; }
	.proc-band__list[aria-hidden="true"] { display: none; }
	.proc *, .proc *::before, .proc *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ════════════════════════════════════════════════════════════
   PAS LA BONNE PERSONNE SI… — juste avant le contact
   En-tête : .svc-header / .svc-eyebrow / .svc-heading existants.
   Lignes : texte noir, mots-clés en Medium, traits organiques.
════════════════════════════════════════════════════════════ */
.fit-sec {
	padding: clamp(4rem, 8vw, 7rem) var(--pad) clamp(3rem, 6vw, 5rem);
}
.fit-sec__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.fit-sec .svc-header { margin: 0; }
.fit-sec .svc-heading { text-wrap: balance; }
/* Traits organiques (comme sur Japhy) : courbes très douces en SVG,
   une courbe différente par ligne */
.fit-list {
	--line-0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9C180 2 400 14 598 6' fill='none' stroke='%23242424' stroke-opacity='.28' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--line-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 16' preserveAspectRatio='none'%3E%3Cpath d='M2 13C150 3 420 0 598 9' fill='none' stroke='%23242424' stroke-opacity='.28' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--line-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 16' preserveAspectRatio='none'%3E%3Cpath d='M2 5C200 14 380 2 598 11' fill='none' stroke='%23242424' stroke-opacity='.28' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--line-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10C160 4 440 12 598 4' fill='none' stroke='%23242424' stroke-opacity='.28' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fit-list::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 16px;
	background: var(--line-0) center / 100% 100% no-repeat;
}
.fit-list li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: 1.25rem;
	align-items: center;          /* la croix au milieu du texte, sur 1 ou 2 lignes */
	padding: 1.5rem 0 calc(1.5rem + 8px);
	background: var(--line-1) left bottom / 100% 16px no-repeat;
	font-family: var(--fb);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.4;
	color: var(--black);
}
.fit-list li:nth-child(2) { background-image: var(--line-2); }
.fit-list li:nth-child(3) { background-image: var(--line-3); }
.fit-list strong { color: inherit; font-weight: 500; }
/* Croix dans une pastille au contour des tags */
/* Puce : une croix griffonnée au crayon (deux passages sur un trait, un sur l'autre),
   légèrement tournée différemment sur chaque ligne */
.fit-list__x {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	overflow: visible;
	fill: none;
	stroke: var(--black);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fit-list li:nth-child(3n+2) .fit-list__x { transform: rotate(9deg) scale(.95); }
.fit-list li:nth-child(3n)   .fit-list__x { transform: rotate(-7deg) scaleX(-1); }

@media (max-width: 768px) {
	.fit-sec__inner { grid-template-columns: 1fr; }
	.fit-list li { gap: 1rem; padding: 1.25rem 0 calc(1.25rem + 8px); }
}

/* ── Surtitres d'expertise des étapes : libellé souligné d'un trait dessiné ──
   Le même trait que le survol du logo, en dégradé dans la couleur de
   l'étape (dégradés #proc-kick-1…4 dans index.html). Il se trace de
   gauche à droite quand l'étape apparaît (js/process.js). */
.proc-kicker {
	position: relative;
	z-index: 0;
	display: inline-block;
	font-family: var(--fb);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--black);
}
.proc-kicker svg {
	position: absolute;
	z-index: -1;
	left: -4%;
	bottom: -.3em;
	width: 108%;
	height: .5em;
	overflow: visible;
	pointer-events: none;
}
.proc-kicker path {
	transform-origin: 0 50%;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1) .35s;
}
.proc-kicker.is-pending path { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
	.proc-kicker path { transition: none; }
}