/* ==========================================================================
   Invassist — page d'accueil
   ========================================================================== */

/* ---------------------------------------------------------------------------
   01 Hero
   --------------------------------------------------------------------------- */
.hero-stack { position: relative; }
.hero {
	position: sticky; top: 0; height: 100vh; min-height: 640px; z-index: 0;
	background: var(--bg-dark); color: var(--text-light); overflow: hidden;
}
.hero__inner { position: relative; height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); transform-origin: 50% 20%; }
.hero__line { position: absolute; top: 0; bottom: 0; left: var(--line-x); width: 2px; background: var(--accent-red); transform-origin: 50% 0; }
.hero__grid {
	height: 100%; padding-left: var(--indent);
	display: flex; flex-wrap: wrap; align-items: stretch; column-gap: clamp(24px, 4vw, 64px);
}
.hero__copy {
	flex: 1.15 1 480px; min-width: 0; display: flex; flex-direction: column; justify-content: center;
	padding: clamp(104px, 15vh, 150px) 0 clamp(28px, 6vh, 64px);
}
.hero__eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(22px, 3.6vh, 36px);
	font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-soft);
}
.hero__eyebrow-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-red-on-dark); box-shadow: 0 0 0 4px rgba(239, 74, 78, .18); }
.hero__title { margin: 0; font-weight: 600; font-size: clamp(44px, 5.5vw, 86px); line-height: .98; letter-spacing: -.045em; color: var(--white); }
.hero__title-row { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title-row--last { padding-bottom: .1em; }
.hero__title-row > span { display: block; }
.hero__title-u { position: relative; white-space: nowrap; }
.hero__title-rule { position: absolute; left: .02em; right: .28em; bottom: .02em; height: .06em; background: var(--accent-red); transform-origin: 0 50%; }
.hero__lead { margin: clamp(20px, 3vh, 30px) 0 0; max-width: 31em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--dark-body); text-wrap: pretty; }
.hero__facts {
	display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 22px 0 0;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--dark-muted);
}
.hero__slash { color: var(--accent-red); }

/* Formulaire « J'ai besoin… » (Hero et appel à l'action) ------------------- */
.req--hero { margin-top: clamp(26px, 4.4vh, 44px); max-width: 620px; }
.req__step { display: none; }
.req[data-stage="idle"] .req__step--idle,
.req[data-stage="contact"] .req__step--contact,
.req[data-stage="done"] .req__step--done { display: flex; }
.req__step--idle { flex-wrap: wrap; gap: 12px; }
.req__step--contact { flex-direction: column; gap: 14px; }
.req__step--done { flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.req__row { display: flex; flex-wrap: wrap; gap: 12px; }
.req__err { display: none; margin: 0; font-size: 14px; color: var(--accent-red-on-dark); }
.req.has-error .req__err { display: block; }
.req__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--accent-red-on-dark); }

.req-pill {
	flex: 1 1 300px; min-width: 0; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px;
	border-radius: 999px; border: 1px solid #3A3734; background: #161514; cursor: text;
	transition: border-color .3s, background-color .3s;
}
.req-pill:hover { border-color: #5A5550; }
.req-pill:focus-within { border-color: var(--accent-red-on-dark); background-color: #1A1817; }
.req-pill__lead { flex: none; font-size: 16px; font-weight: 600; color: var(--text-light); }
.req-pill__input {
	flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; color: var(--white);
	font-family: var(--font-serif); font-style: italic; font-size: 21px; outline: none; caret-color: var(--accent-red-on-dark);
}

.req--hero .req__recap { margin: 0; font-size: 16px; line-height: 1.5; color: var(--dark-body); }
.req__struck { background-repeat: no-repeat; transition: background-size .9s var(--ease-io); }
.req__struck--hero {
	font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--text-light);
	background-image: linear-gradient(var(--accent-red), var(--accent-red)); background-position: 0 60%; background-size: 0% 2px;
}
.req.is-struck .req__struck--hero { background-size: 100% 2px; }
.req--hero .req__contact {
	flex: 1 1 260px; min-width: 0; height: 60px; padding: 0 24px; border-radius: 999px; border: 1px solid #3A3734;
	background: #161514; color: var(--text-light); font-size: 16px; outline: none; transition: border-color .3s;
}
.req--hero .req__contact:focus { border-color: var(--accent-red-on-dark); }
.req--hero .req__done { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-light); }
.req__reset {
	padding: 10px 0; border: 0; background: none; font-size: 15px; cursor: pointer;
	text-decoration: underline; text-underline-offset: 4px; transition: color .3s;
}
.req--hero .req__reset { color: var(--dark-soft); }
.req--hero .req__reset:hover { color: var(--white); }
.req__reset:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Scène des demandes -------------------------------------------------------- */
.hero__scene-col { flex: 1 1 360px; min-width: 0; position: relative; margin-right: calc(var(--gutter) * -1); }
.scene {
	position: absolute; top: 84px; bottom: 24px; left: 0; right: 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.scene-card { position: absolute; left: 0; top: 0; width: 300px; transform: translate3d(0, 900px, 0); will-change: transform, opacity; }
.scene-card__box {
	padding: 15px 18px 16px; border-radius: 14px; border: 1px solid #34312E; background-color: rgba(26, 25, 24, .94);
	color: var(--text-light); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
	transition: background-color .55s ease, border-color .55s ease, color .55s ease;
}
.scene-card__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; margin-bottom: 6px; }
.scene-card__m0 { color: var(--dark-muted); }
.scene-card__m1 { display: none; color: var(--accent-red); }
.scene-card__need {
	font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em;
	background-image: linear-gradient(var(--accent-red), var(--accent-red)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px;
	transition: background-size .6s var(--ease-io), color .4s ease .2s;
}
.scene-card__sol {
	max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--text-dark);
	transition: max-height .5s ease, opacity .45s ease .15s, margin-top .5s ease;
}
.scene-card.is-done .scene-card__box { background-color: var(--text-light); border-color: var(--text-light); color: var(--text-dark); }
.scene-card.is-done .scene-card__need { background-size: 100% 2px; color: var(--text-soft); }
.scene-card.is-done .scene-card__sol { max-height: 64px; opacity: 1; margin-top: 8px; }
.scene-card.is-done .scene-card__m0 { display: none; }
.scene-card.is-done .scene-card__m1 { display: inline; }

.scene-card--user { width: 320px; opacity: 0; z-index: 3; }
.scene-card--user .scene-card__box { padding: 16px 20px 18px; border-color: var(--accent-red-on-dark); background-color: rgba(26, 25, 24, .97); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9); }
.scene-card--user .scene-card__m0 { color: var(--accent-red-on-dark); }
.scene-card--user .scene-card__need { font-family: var(--font-serif); font-style: italic; font-size: 21px; font-weight: 400; line-height: 1.2; letter-spacing: 0; background-position: 0 60%; transition: background-size .7s var(--ease-io), color .4s ease .2s; }

.scene-line { position: absolute; left: 0; right: 0; top: calc(50% + 30px); height: 0; z-index: 4; pointer-events: none; }
.scene-line__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent-red); transform-origin: 0 50%; overflow: hidden; }
.scene-line__pulse { position: absolute; left: 0; top: 0; width: 80px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFD4D2, rgba(255, 255, 255, 0)); opacity: 0; }
.scene-line__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-red); box-shadow: 0 0 0 6px rgba(212, 42, 47, .18); }
.scene-line__label {
	position: absolute; padding: 4px 8px; background: var(--bg-dark);
	font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; white-space: nowrap;
}
.scene-line__label--main { left: 18px; bottom: 10px; font-weight: 500; color: var(--accent-red-on-dark); }
.scene-line__label--done { right: var(--gutter); bottom: 10px; color: var(--dark-soft); }
.scene-line__label--in { right: var(--gutter); top: 10px; color: var(--dark-muted); }

@media (max-width: 1099px) {
	.hero { position: relative; height: auto; }
	.hero__scene-col { height: 380px; }
}
@media (max-width: 420px) {
	.scene-line__label--done { display: none; }
}

/* ---------------------------------------------------------------------------
   02 Le principe
   --------------------------------------------------------------------------- */
.principe__inner { padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(96px, 14vh, 160px); }
.principe__grid { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); align-items: flex-start; }
.principe__intro { flex: 1 1 340px; min-width: 0; max-width: 500px; position: sticky; top: 130px; }
.principe__lead { margin: 28px 0 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
.principe__hint {
	margin: 22px 0 0; display: flex; align-items: center; gap: 10px;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.principe__hint span { width: 16px; height: 2px; background: var(--accent-red); }

.todo { flex: 1.35 1 440px; min-width: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.todo__item {
	position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
	padding: clamp(16px, 2.3vh, 26px) 0; border-bottom: 1px solid var(--line);
}
.todo__time {
	position: absolute; right: calc(100% + 18px); top: 50%; margin-top: -8px;
	font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); opacity: 0; transition: opacity .5s;
}
.todo__need {
	flex: 1 1 260px; min-width: 0; font-size: clamp(22px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.028em; line-height: 1.15;
	color: var(--text-dark); transition: color .6s ease;
}
.todo__strike {
	background-image: linear-gradient(var(--accent-red), var(--accent-red)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% .08em;
	transition: background-size .75s var(--ease-io);
}
.todo__tag {
	flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-red);
	opacity: 0; transform: translateX(-8px); transition: opacity .5s ease .25s, transform .6s var(--ease-out) .25s;
}
.todo__item.is-done .todo__time, .todo__item.is-done .todo__tag { opacity: 1; transform: none; }
.todo__item.is-done .todo__need { color: var(--text-soft); }
.todo__item.is-done .todo__strike { background-size: 100% .08em; }
.todo__item--last .todo__need { font-weight: 600; color: #8F8983; }
.todo__item--last.is-done .todo__need { color: var(--text-dark); }
.todo__item--last .todo__strike { background-size: 0% .08em !important; }

/* Sans JavaScript, la liste est présentée rayée. */
html:not(.js) .todo__item .todo__tag { opacity: 1; transform: none; }

@media (max-width: 1099px) {
	.principe__intro { position: relative; top: auto; }
	.todo__time { display: none; }
}

/* ---------------------------------------------------------------------------
   03 Vos besoins
   --------------------------------------------------------------------------- */
.besoins__inner { padding-top: clamp(96px, 15vh, 170px); padding-bottom: clamp(96px, 15vh, 170px); }
.besoins__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; margin-bottom: clamp(40px, 7vh, 80px); }
.besoins__title { max-width: 11em; }
.besoins__body { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: flex-start; }

.needs-tabs { flex: 1 1 300px; max-width: 460px; min-width: 0; border-top: 1px solid var(--line); }
.needs-tab {
	--rh: 0; position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 66px; padding: 14px 0;
	border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer;
	color: var(--text-soft); transition: color .35s;
}
.needs-tab:hover { --rh: 1; color: var(--text-dark); }
.needs-tab:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; }
.needs-tab.is-selected { color: var(--text-dark); }
.needs-tab__tick {
	position: absolute; top: 50%; left: calc(clamp(16px, 2vw, 32px) * -1); width: calc(clamp(16px, 2vw, 32px) - 4px); height: 2px; margin-top: -1px;
	background: var(--accent-red); transform-origin: 0 50%; transform: scaleX(0); transition: transform .55s var(--ease-out);
}
.needs-tab.is-selected .needs-tab__tick { transform: scaleX(1); }
.needs-tab__num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--text-soft); }
.needs-tab.is-selected .needs-tab__num { color: var(--accent-red); }
.needs-tab__label {
	font-size: clamp(21px, 2vw, 28px); font-weight: 500; letter-spacing: -.028em; line-height: 1.15;
	transform: translateX(calc(var(--rh) * 6px)); transition: transform .45s var(--ease-out);
}
.needs-tab__arrow { margin-left: auto; font-size: 20px; color: var(--accent-red); opacity: 0; transition: opacity .35s; }
.needs-tab.is-selected .needs-tab__arrow { opacity: 1; }

.need-panel {
	flex: 1.7 1 460px; min-width: 0; background: var(--surface); border: 1px solid var(--card-border); border-radius: 4px; overflow: hidden;
	box-shadow: 0 40px 80px -60px rgba(17, 16, 16, .35);
}
.need-panel__body { padding: clamp(24px, 3.4vw, 52px); }
.need-panel__meta, .need-panel__sub {
	font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.need-panel__meta { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.need-panel__label { color: var(--accent-red); text-align: right; }
.need-panel__quote {
	margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.12; letter-spacing: -.01em;
	color: var(--text-dark); text-wrap: pretty;
	opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .6s var(--ease-out);
}
.need-panel__sub { margin: clamp(28px, 4vh, 40px) 0 14px; }
.need-panel__steps { position: relative; padding-left: 28px; }
.need-panel__line {
	position: absolute; left: 3px; top: 12px; bottom: 12px; width: 2px; background: var(--accent-red);
	transform-origin: 50% 0; transform: scaleY(0); transition: transform .2s ease;
}
.need-panel__steps ol { list-style: none; margin: 0; padding: 0; }
.need-panel__steps li {
	position: relative; padding: 9px 0; font-size: 17px; line-height: 1.45; color: var(--text-body);
	opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s var(--ease-out);
}
.need-panel__square { position: absolute; left: -29px; top: 16px; width: 10px; height: 10px; border: 2px solid var(--accent-red); background: var(--surface); }
.need-panel__also { margin: 24px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.need-panel__also strong { font-weight: 600; color: var(--text-dark); }
.need-panel__foot {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
	padding: 18px clamp(24px, 3.4vw, 52px); background: var(--bg-dark); color: var(--text-light);
}
.need-panel__outcome { margin: 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; opacity: 0; transition: opacity .45s; }
.need-panel__outcome span:last-child { font-size: 16px; }
.need-panel__done { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--accent-red-on-dark); }
.need-panel__part { margin: 0; font-size: 14px; color: var(--dark-soft); }

.need-panel.is-shown .need-panel__quote,
.need-panel.is-shown .need-panel__steps li { opacity: 1; transform: none; }
.need-panel.is-shown .need-panel__steps li { transition-delay: var(--d, 0ms); }
.need-panel.is-shown .need-panel__outcome { opacity: 1; }
.need-panel.is-shown .need-panel__line { transform: scaleY(1); transition: transform 1s var(--ease-io) .1s; }

/* ---------------------------------------------------------------------------
   04 Comment ça marche
   --------------------------------------------------------------------------- */
.fonctionnement__rail { position: absolute; inset: 0; max-width: var(--max); margin: 0 auto; pointer-events: none; }
.fonctionnement__head { padding-top: clamp(96px, 16vh, 180px); }
.fonctionnement__head-grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; }
.fonctionnement__title-wrap { max-width: 760px; }
.fonctionnement__demo { padding-top: clamp(48px, 8vh, 88px); padding-bottom: clamp(96px, 15vh, 170px); }

.how-steps { display: flex; gap: clamp(12px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.how-steps__item { flex: 1 1 0; min-width: 0; }
.how-steps__track { position: relative; height: 2px; background: #2A2826; overflow: hidden; }
.how-steps__bar { position: absolute; inset: 0; background: var(--accent-red); transform-origin: 0 50%; transform: scaleX(0); }
.how-steps__label {
	margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
	font-size: clamp(14px, 1.3vw, 17px); font-weight: 500; color: var(--dark-muted); transition: color .4s;
}
.how-steps__num { font-family: var(--font-mono); font-size: 12px; color: var(--dark-muted); transition: color .4s; }
[data-step="0"] .how-steps__item:nth-child(1) .how-steps__label,
[data-step="1"] .how-steps__item:nth-child(2) .how-steps__label,
[data-step="2"] .how-steps__item:nth-child(3) .how-steps__label { color: var(--text-light); }
[data-step] .how-steps__item:nth-child(1) .how-steps__num,
[data-step="1"] .how-steps__item:nth-child(2) .how-steps__num,
[data-step="2"] .how-steps__item:nth-child(-n+3) .how-steps__num { color: var(--accent-red-on-dark); }

.how-grid { margin-top: clamp(40px, 7vh, 72px); width: 100%; display: flex; flex-wrap: wrap; gap: clamp(18px, 3vh, 28px) clamp(32px, 5vw, 80px); }
.how-you { flex: 1 1 280px; max-width: 430px; min-width: 0; }
.how-you__meta {
	display: flex; justify-content: space-between; margin: 0;
	font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted);
}
/* Les trois bulles partagent la même cellule : la hauteur s'adapte à la plus grande. */
.how-you__stage { display: grid; min-height: clamp(120px, 21vh, 190px); margin-top: 14px; align-items: start; }
.how-bubble { grid-area: 1 / 1; opacity: 0; transition: opacity .5s ease, transform .6s var(--ease-out); }
.how-bubble--0 { transform: translateY(-14px); }
.how-bubble--1 { transform: translateY(14px); }
.how-bubble--2 { transform: translateY(14px); }
[data-step="0"] .how-bubble--0,
[data-step="1"] .how-bubble--1,
[data-step="2"] .how-bubble--2 { opacity: 1; transform: none; }
[data-step="2"] .how-bubble--1 { transform: translateY(-14px); }
.how-bubble__msg {
	margin: 0; padding: 18px 22px; background: #1C1B1A; border: 1px solid #2E2B29; border-radius: 20px 20px 20px 4px;
	font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.22; color: var(--text-light);
}
.how-bubble__meta { margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--dark-muted); }
.how-bubble__aside { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.18; color: #CFC9C3; }
.how-bubble__note { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--dark-muted); }
.how-bubble__reply {
	margin: 0; padding: 18px 22px; background: var(--text-light); color: var(--text-dark); border-radius: 20px 20px 4px 20px;
	font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45;
}
.how-bubble__ok { color: var(--accent-red-on-dark); }

.how-lane { position: relative; flex: 1.5 1 340px; min-width: 0; opacity: .32; transition: opacity .6s ease; }
[data-step="1"] .how-lane, [data-step="2"] .how-lane { opacity: 1; }
.how-lane__conn {
	position: absolute; right: 100%; top: 74px; width: clamp(32px, 5vw, 80px); height: 2px; background: var(--accent-red);
	transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--ease-io);
}
[data-step="1"] .how-lane__conn, [data-step="2"] .how-lane__conn { transform: scaleX(1); }
.how-lane__head { display: flex; align-items: center; gap: 12px; }
.how-lane__avatar {
	position: relative; overflow: hidden; flex: none; width: 30px; height: 30px; border-radius: 50%;
	background: repeating-linear-gradient(135deg, #2A2826 0 4px, #36322F 4px 8px); border: 1px solid #3A3734;
}
.how-lane__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.how-lane__who { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #CFC9C3; }
.how-lane__status { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--dark-muted); white-space: nowrap; }
.how-lane__status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4A4643; }
[data-step="1"] .how-lane__status { color: var(--accent-red-on-dark); }
[data-step="1"] .how-lane__status-dot { background: var(--accent-red-on-dark); }

.how-tasks { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--dark-line); }
.how-tasks__item {
	display: flex; align-items: baseline; gap: 14px; padding: clamp(7px, 1.2vh, 11px) 0; border-bottom: 1px solid #1F1D1C;
	font-size: clamp(14px, 1.25vw, 17px); line-height: 1.35;
}
.how-tasks__time { flex: none; width: 40px; font-family: var(--font-mono); font-size: 12px; color: var(--dark-muted); opacity: 0; transition: opacity .4s; }
.how-tasks__text { color: var(--text-light); transition: color .5s ease .2s; }
.how-tasks__strike {
	background-image: linear-gradient(var(--accent-red), var(--accent-red)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px;
	transition: background-size .55s var(--ease-io);
}
.how-tasks__item.is-done .how-tasks__time { opacity: 1; }
.how-tasks__item.is-done .how-tasks__text { color: var(--dark-muted); }
.how-tasks__item.is-done .how-tasks__strike { background-size: 100% 2px; }

.how-lane__sum {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 14px;
	opacity: 0; transition: opacity .5s;
}
[data-step="2"] .how-lane__sum { opacity: 1; }
.how-lane__sum p { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: #CFC9C3; }
.how-lane__replay {
	--rp: 0; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0; border: 0; background: none; color: var(--dark-soft);
	font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .3s;
}
.how-lane__replay:hover { --rp: 1; color: var(--white); }
.how-lane__replay:focus-visible { outline: 2px solid var(--accent-red-on-dark); outline-offset: 2px; }
.how-lane__replay span { width: 18px; height: 2px; background: var(--accent-red); transform-origin: 0 50%; transform: scaleX(calc(.5 + var(--rp) * .5)); transition: transform .4s var(--ease-out); }

@media (max-width: 1099px) {
	.how-lane__conn { display: none; }
}

/* ---------------------------------------------------------------------------
   05 Les personnes
   --------------------------------------------------------------------------- */
.equipe__inner { padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(96px, 16vh, 180px); }
.equipe__title { max-width: 15em; }
.equipe__grid { display: flex; flex-wrap: wrap; gap: clamp(48px, 7vw, 112px); margin-top: clamp(44px, 7vh, 88px); align-items: flex-start; }
.equipe__figure { flex: 1 1 320px; min-width: 0; max-width: 540px; margin: 0; position: relative; }
.equipe__photo {
	position: relative; aspect-ratio: 4 / 5; overflow: hidden; padding: 22px;
	background: repeating-linear-gradient(135deg, var(--plate) 0 12px, var(--recess) 12px 24px);
}
.equipe__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.equipe__placeholder { position: relative; font-family: var(--font-mono); font-size: 11px; line-height: 1.55; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.equipe__reply {
	position: relative; margin: -110px clamp(-56px, 20px - 5vw, 0px) 0 auto; width: min(410px, 94%);
	background: var(--surface); border: 1px solid var(--card-border); box-shadow: 0 40px 70px -40px rgba(17, 16, 16, .35); padding: 24px 26px 22px;
}
.equipe__reply-meta {
	display: flex; justify-content: space-between; margin: 0 0 14px;
	font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.equipe__reply-msg { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--text-dark); text-wrap: pretty; }
.equipe__reply-sign { margin: 16px 0 0; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.equipe__reply-sign span { width: 28px; height: 2px; background: var(--accent-red); }
.equipe__text { flex: 1 1 340px; max-width: 520px; min-width: 0; padding-top: clamp(0px, 3vw, 48px); }
.equipe__lead { margin: 0; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.42; letter-spacing: -.012em; color: var(--text-body); text-wrap: pretty; }
.equipe__points { list-style: none; margin: clamp(32px, 5vh, 56px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.equipe__points li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 12px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.equipe__num { padding-top: 5px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--accent-red); }
.equipe__points strong { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.equipe__desc { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   06 La confiance
   --------------------------------------------------------------------------- */
.confiance__inner { padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(96px, 14vh, 160px); }
.confiance__stats {
	margin: 0; max-width: 20em; font-size: clamp(28px, 3.5vw, 52px); font-weight: 500; line-height: 1.14; letter-spacing: -.032em;
	color: var(--text-dark); text-wrap: pretty;
}
.confiance__hl { color: var(--accent-red); white-space: nowrap; }
.confiance__note { margin: 20px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.testi {
	display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 88px); margin-top: clamp(64px, 11vh, 128px);
	padding-top: clamp(32px, 5vh, 48px); border-top: 1px solid var(--line); align-items: flex-start;
}
.testi__main { flex: 1.6 1 420px; min-width: 0; }
.testi__eyebrow { margin: 0 0 22px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.testi__fade { min-height: clamp(210px, 26vh, 270px); transition: opacity .35s ease, transform .5s var(--ease-out); }
.testi__quote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.18; letter-spacing: -.01em; color: var(--text-dark); text-wrap: pretty; }
.testi__who { margin: 22px 0 0; font-size: 16px; color: var(--text-body); }
.testi__who strong { font-weight: 600; }
.testi__who > span { color: var(--text-muted); }
.testi__nav { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.testi__segs { display: flex; gap: 8px; flex: 1; max-width: 300px; }
.testi__seg { flex: 1; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; }
.testi__seg:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; }
.testi__seg-track { position: relative; display: block; width: 100%; height: 2px; background: var(--line); overflow: hidden; }
.testi__seg-fill { position: absolute; inset: 0; background: var(--accent-red); transform-origin: 0 50%; transform: scaleX(0); }
.testi__seg.is-past .testi__seg-fill { transform: scaleX(1); }
.testi__seg.is-running .testi__seg-fill { transform: scaleX(1); transition: transform 8s linear; }
.testi__card {
	flex: 1 1 260px; min-width: 0; background: var(--surface); border: 1px solid var(--card-border); border-radius: 4px; padding: 26px 26px 24px;
	transition: opacity .35s ease;
}
.testi__label { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.testi__label--red { margin-top: 24px; color: var(--accent-red); }
.testi__need { margin: 0; font-size: 18px; line-height: 1.4; color: var(--text-muted); }
.testi__strike {
	background-image: linear-gradient(var(--accent-red), var(--accent-red)); background-repeat: no-repeat; background-position: 0 58%; background-size: 100% 2px;
	transition: background-size .8s var(--ease-io) .35s;
}
.testi__res { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; color: var(--text-dark); }
.testi__demo { margin: 22px 0 0; font-size: 12px; color: var(--text-muted); }
.testi.is-fading .testi__fade { opacity: 0; transform: translateY(8px); }
.testi.is-fading .testi__card { opacity: 0; }
.testi.is-fading .testi__strike { background-size: 0% 2px; transition: none; }

.promises { margin-top: clamp(64px, 11vh, 120px); }
.promises__title { margin: 0 0 28px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.03em; }
.promises__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.promises__list li { padding: 22px 0 26px; border-top: 2px solid var(--text-dark); }
.promises__list strong { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.promises__list strong span { flex: none; width: 16px; height: 2px; background: var(--accent-red); }
.promises__list li > span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   07 À vous (appel à l'action rouge)
   --------------------------------------------------------------------------- */
.demande-wrap { position: relative; z-index: 1; background: var(--bg-light-2); }
.demande { position: relative; background: var(--red-deep); color: var(--white); }
.demande__inner {
	position: relative; max-width: var(--max); margin: 0 auto; min-height: 100vh;
	padding: clamp(120px, 17vh, 180px) var(--gutter) clamp(80px, 12vh, 140px);
	display: flex; flex-direction: column; justify-content: center;
}
.demande__line { position: absolute; top: 0; bottom: 0; left: var(--line-x); width: 2px; background: rgba(255, 255, 255, .4); }
.demande__title { margin: 0; max-width: 11em; font-size: clamp(42px, 6.4vw, 100px); font-weight: 600; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.req--cta { margin-top: clamp(40px, 7vh, 72px); max-width: 1000px; }
.req--cta .req__step--idle { align-items: flex-end; gap: 22px 28px; }
.req--cta .req__step--contact { gap: 18px; }
.req--cta .req__step--done { flex-direction: column; align-items: stretch; gap: 14px; }
.req-line { flex: 1 1 420px; min-width: 0; display: block; }
.req-line__label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #FFE1DE; }
.req-line__input {
	display: block; width: 100%; height: clamp(64px, 7vw, 88px); padding: 0; border: 0; border-bottom: 2px solid var(--white); border-radius: 0;
	background: transparent; color: var(--white); font-family: var(--font-serif); font-style: italic; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -.01em;
	outline: none; caret-color: var(--white);
}
.req-line__input:focus-visible { border-bottom-color: var(--bg-dark); }
.req__big { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(26px, 3vw, 42px); line-height: 1.15; overflow-wrap: anywhere; }
.req__struck--cta { background-image: linear-gradient(var(--bg-dark), var(--bg-dark)); background-position: 0 60%; background-size: 0% 3px; }
.req.is-struck .req__struck--cta { background-size: 100% 3px; }
.req--cta .req__recap { margin: 0; font-size: 17px; color: #FFE1DE; }
.req--cta .req__tag { color: var(--white); }
.req--cta .req__row { max-width: 680px; }
.req--cta .req__contact {
	flex: 1 1 260px; min-width: 0; height: 62px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .6);
	background: rgba(0, 0, 0, .14); color: var(--white); font-size: 16px; outline: none;
}
.req--cta .req__contact:focus { border-color: var(--white); }
.req--cta .req__err { font-size: 15px; color: var(--white); }
.req--cta .req__done { margin: 0; font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.req--cta .req__reset { align-self: flex-start; color: var(--white); font-size: 16px; text-underline-offset: 5px; }
.demande__foot {
	display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: clamp(48px, 8vh, 88px); padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .35); font-size: 16px; color: #FFE1DE;
}
.demande__foot p { margin: 0; }
.demande__foot a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.demande__foot a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Téléphone : ajustements fins ------------------------------------------------ */
@media (max-width: 560px) {
	.btn-light, .btn-dark { flex: 1 1 auto; }
	.req--hero .req__step--idle .btn-light { width: 100%; }
	.req--cta .req__step--idle .btn-dark { width: 100%; }
	.need-panel__meta { flex-wrap: wrap; }
	.equipe__reply { margin-right: 0; }
}