/* ==========================================================================
   Invassist — page Reducbox
   Réutilise base.css (variables, grille, .section, .seg, .eyebrow, boutons,
   flèches, révélations [data-rv]). Seuls les styles propres à la page sont ici.
   ========================================================================== */

/* Éléments partagés dans la page ------------------------------------------- */
.rb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; margin-bottom: clamp(40px, 7vh, 72px); }
.rb-head--flush { margin-bottom: 0; }
.rb-head--brands { margin-bottom: clamp(36px, 6vh, 64px); }
.rb-head--sits { margin-bottom: clamp(48px, 8vh, 88px); }
.rb-head--day { margin-bottom: clamp(44px, 7vh, 80px); }
.rb-head__title {
	flex: 1 1 520px; min-width: 0; max-width: 13em; margin: 0;
	font-size: clamp(34px, 4.4vw, 66px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance;
}
.rb-head__title--12 { max-width: 12em; }
.rb-head__lead { flex: 0 1 420px; min-width: 0; margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
.rb-head__lead--400 { flex-basis: 400px; }
.rb-head__lead--440 { flex-basis: 440px; }
.rb-head__lead--dark { color: var(--dark-body); }
.rb-veil { position: absolute; inset: 0; background: rgba(38, 34, 30, .06); pointer-events: none; }
.rb-link { --sh: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 500; color: var(--text-light); }
.rb-link:hover { --sh: 1; color: var(--text-light); }
.rb-link:focus-visible { outline: 2px solid var(--accent-red-on-dark); outline-offset: 4px; }
.rb-link > span { width: 18px; height: 2px; background: var(--accent-red-on-dark); transform-origin: 0 50%; transform: scaleX(calc(.6 + var(--sh) * .4)); transition: transform .4s var(--ease-out); }
.rb-link--btn { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 600; cursor: pointer; }
.rb-link--dark { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--text-dark); }
.rb-link--dark:hover { color: var(--text-dark); }
.rb-link--dark:focus-visible { outline-color: var(--accent-red); }
.rb-link--dark > span { background: var(--accent-red); }
.rb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: clamp(28px, 4vh, 40px); }
.rb-chips__label { margin-right: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dark-muted); }
.rb-chip {
	min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #3A3734; background-color: rgba(0, 0, 0, 0);
	color: var(--text-light); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .3s, border-color .3s, color .3s;
}
.rb-chip:hover { border-color: var(--text-light); }
.rb-chip:focus-visible { outline: 2px solid var(--accent-red-on-dark); outline-offset: 2px; }
.rb-chip[aria-pressed="true"] { background-color: var(--text-light); border-color: var(--text-light); color: var(--bg-dark); }
.rb-note { display: flex; align-items: baseline; gap: 10px; margin: clamp(40px, 6vh, 64px) 0 0; max-width: 48em; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.rb-note > span { flex: none; width: 16px; height: 2px; background: var(--accent-red); transform: translateY(-4px); }
/* Lignes qui se tracent au scroll (Invassist × Reducbox) */
[data-rv="drawx"], [data-rv="drawy"] { transform-origin: 0 50%; }
[data-rv="drawy"] { transform-origin: 50% 0; }
[data-rv="drawx"].rv-anim, [data-rv="drawy"].rv-anim { transition: transform 1.4s var(--ease-io); }
[data-rv="drawx"].rv-pending { opacity: 1; transform: scaleX(0); }
[data-rv="drawy"].rv-pending { opacity: 1; transform: scaleY(0); }

/* Plaque logo Reducbox (surface claire mate, bord rouge) ------------------- */
.rb-plate { position: relative; flex: 1 1 320px; max-width: 460px; min-width: 0; }
.rb-plate--cta { max-width: 440px; }
.rb-plate__conn { position: absolute; top: -1px; right: 100%; width: clamp(40px, 6vw, 104px); height: 2px; background: var(--accent-red); }
.rb-plate__box {
	position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between;
	padding: clamp(18px, 2vw, 26px); background-color: var(--plate); border: 1px solid var(--plate); color: var(--text-muted);
	box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .9);
}
.rb-plate--hero .rb-plate__box { border-top: 2px solid var(--accent-red); }
.rb-plate--cta .rb-plate__box { box-shadow: 0 60px 120px -60px rgba(60, 0, 0, .9); }
.rb-plate__meta { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.rb-plate__meta--end { align-items: flex-end; }
.rb-plate__square { flex: none; width: 10px; height: 10px; background: var(--accent-red); }
.rb-plate__logo { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.rb-plate__logo img, .rb-duo__rb-logo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 50%; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.rb-hero { position: relative; background: var(--bg-dark); color: var(--text-light); overflow: hidden; }
.rb-hero__inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); min-height: max(760px, 100vh); display: flex; flex-direction: column; }
.rb-hero__line { position: absolute; top: 0; bottom: 0; left: var(--line-x); width: 2px; background: var(--accent-red); transform-origin: 50% 0; }
.rb-hero__main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: calc(clamp(112px, 16vh, 150px) + var(--admin-offset)) 0 clamp(48px, 8vh, 80px) var(--indent); }
.rb-hero__eyebrow {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 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);
}
.rb-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); }
.rb-hero__eyebrow-rule { width: 24px; height: 1px; background: #3A3734; }
.rb-hero__eyebrow-brand { color: var(--text-light); }
.rb-hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 56px clamp(40px, 6vw, 104px); }
.rb-hero__copy { flex: 1.6 1 560px; min-width: 0; }
.rb-hero__title { margin: 0; font-weight: 600; font-size: clamp(46px, 6.4vw, 104px); line-height: .96; letter-spacing: -.05em; color: var(--white); }
.rb-hero__row { display: block; overflow: hidden; padding-bottom: .04em; }
.rb-hero__row--last { padding-bottom: .1em; }
.rb-hero__row > span { display: block; }
.rb-hero__u { position: relative; white-space: nowrap; }
.rb-hero__rule { position: absolute; left: .02em; right: .3em; bottom: .02em; height: .06em; background: var(--accent-red); transform-origin: 0 50%; }
.rb-hero__lead { max-width: 34em; margin: clamp(24px, 4vh, 36px) 0 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.58; color: var(--dark-body); text-wrap: pretty; }
.rb-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 4.5vh, 44px); }
.rb-btn-access { height: 58px; padding: 0 24px 0 28px; transition: transform .3s var(--ease-out), box-shadow .4s; }
.rb-btn-access:hover { background-color: var(--text-light); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8); }
.rb-hero .rb-link { font-size: 16px; font-weight: 500; }
.rb-marquee { position: relative; margin: 0 calc(var(--gutter) * -1); border-top: 1px solid var(--dark-line); overflow: hidden; padding: 18px 0 22px; }
.rb-marquee__track { display: flex; width: max-content; will-change: transform; }
.rb-marquee__item {
	display: inline-flex; align-items: center; gap: 22px; padding-right: 22px;
	font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-muted); white-space: nowrap;
}
.rb-marquee__item span { width: 6px; height: 6px; background: #3A3734; }
.rb-marquee__item span.is-red { background: var(--accent-red); }

@media (max-width: 1099px) {
	.rb-hero__inner { min-height: 0; }
	.rb-plate__conn { display: none; }
}
@media (max-width: 480px) {
	.rb-hero__title { font-size: clamp(36px, 11.4vw, 46px); }
}

/* ---------------------------------------------------------------------------
   01 De la dépense au bon plan
   --------------------------------------------------------------------------- */
.rb-principe__inner { padding-top: clamp(96px, 15vh, 170px); padding-bottom: clamp(96px, 15vh, 170px); }
.sig { margin-top: clamp(64px, 11vh, 120px); }
.sig__kicker { margin: 0 0 18px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); }
.sig__labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sig__label {
	margin: 0; padding: 0 12px 14px 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
	font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); transition: color .5s ease;
}
.sig__label span { color: var(--dark-muted); transition: color .5s ease; }
.sig__label.is-past { color: var(--dark-body); }
.sig__label.is-cur { color: var(--text-light); }
.sig__label.is-past span, .sig__label.is-cur span { color: var(--accent-red-on-dark); }
.sig__track { position: relative; height: 2px; background: #2A2826; }
.sig__lead-in { position: absolute; top: 0; right: 100%; width: calc(clamp(16px, 2vw, 32px) + 2px); height: 2px; background: var(--accent-red); }
.sig__fill { position: absolute; inset: 0; background: var(--accent-red); transform-origin: 0 50%; transform: scaleX(.167); transition: transform .9s var(--ease-io); }
.sig__node { position: absolute; top: -5px; width: 12px; height: 12px; border: 2px solid var(--accent-red); background: var(--bg-dark); transition: background-color .5s ease .2s; }
.sig__node.is-on { background: var(--accent-red); }
.sig__stage { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; min-height: clamp(260px, 30vw, 380px); padding-top: clamp(36px, 6vh, 64px); }
.sig__main { flex: 1 1 560px; min-width: 0; transition: opacity .35s ease, transform .5s var(--ease-out); }
.sig.is-fading .sig__main { opacity: 0; transform: translateY(10px); }
.sig__ctx { margin: 0 0 clamp(16px, 2.4vh, 24px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.sig__tag { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); transition: color .5s ease; }
.sig:not([data-ph="0"]) .sig__tag { color: var(--accent-red-on-dark); }
.sig__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 1.8vw, 26px); color: #CFC9C3; }
.sig__word-wrap { position: relative; display: inline-block; max-width: 100%; padding: .04em .16em .1em; margin-left: -.16em; }
.sig__plate { position: absolute; inset: 0; background: var(--plate); clip-path: inset(0 100% 0 0); }
.sig[data-ph="2"] .sig__plate { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-io); }
.sig__line { position: absolute; left: .16em; right: .16em; bottom: -.08em; height: 4px; background: var(--accent-red); transform-origin: 0 50%; transform: scaleX(0); }
.sig:not([data-ph="0"]) .sig__line { transform: scaleX(1); transition: transform 1s var(--ease-io); }
.sig__word { position: relative; display: block; font-size: clamp(72px, 11vw, 176px); font-weight: 600; line-height: .92; letter-spacing: -.055em; color: #6E6964; overflow-wrap: anywhere; }
.sig[data-ph="1"] .sig__word { color: var(--white); transition: color .5s ease .25s; }
.sig[data-ph="2"] .sig__word { color: var(--text-dark); transition: color .5s ease .25s; }
.sig__note {
	flex: 0 1 320px; min-width: 0; padding: 18px 20px 20px; border: 1px solid #2A2826; border-top: 2px solid var(--accent-red); background: rgba(24, 23, 22, .96);
	opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s var(--ease-out);
}
.sig[data-ph="2"]:not(.is-fading) .sig__note { opacity: 1; transform: none; }
.sig__note-k { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-red-on-dark); }
.sig__note-d { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #CFC9C3; }

@media (max-width: 699px) {
	.sig__label { font-size: 10px; }
	.sig__word { font-size: 17vw; }
}

/* ---------------------------------------------------------------------------
   02 Univers
   --------------------------------------------------------------------------- */
.rb-unis__inner { padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(80px, 12vh, 140px); }
.runi { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 72px); align-items: flex-start; }
.runi__list { flex: 1 1 300px; max-width: 440px; min-width: 0; border-top: 1px solid var(--line); }
.runi__tab {
	--rh: 0; position: relative; display: flex; align-items: baseline; gap: 16px; width: 100%; min-height: 60px; padding: 14px 0;
	border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; color: #6E6964; transition: color .35s;
}
.runi__tab:hover { --rh: 1; color: var(--text-dark); }
.runi__tab.is-selected { color: var(--text-dark); }
.runi__tab:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; }
.runi__tick {
	position: absolute; top: 50%; left: calc(clamp(16px, 2vw, 32px) * -1); width: calc(clamp(16px, 2vw, 32px) - 4px); height: 2px;
	background: var(--accent-red); transform-origin: 0 50%; transform: scaleX(0); transition: transform .55s var(--ease-out);
}
.runi__tab.is-selected .runi__tick { transform: scaleX(1); }
.runi__num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: #8A857F; }
.runi__tab.is-selected .runi__num { color: var(--accent-red); }
.runi__label { min-width: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; transform: translateX(calc(var(--rh) * 6px)); transition: transform .45s var(--ease-out); }
.runi__chips { display: none; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
.runi__chip {
	min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background-color: rgba(0, 0, 0, 0);
	color: var(--text-dark); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .3s, border-color .3s, color .3s;
}
.runi__chip.is-selected { background-color: var(--bg-dark); border-color: var(--bg-dark); color: var(--text-light); }
.runi__chip:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; }
.runi__panel { flex: 1.7 1 500px; min-width: 0; }
.runi__photo { position: relative; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #DDDAD4 0 12px, #D7D3CC 12px 24px); overflow: hidden; }
.runi__img {
	position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.04);
	transition: opacity .7s ease, transform 1.2s var(--ease-out), visibility 0s linear .7s;
}
.runi__img.is-shown { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }
.runi__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.runi__badge {
	position: absolute; left: clamp(14px, 2vw, 24px); top: clamp(14px, 2vw, 24px); margin: 0; padding: 8px 12px; background: rgba(14, 13, 13, .94); color: var(--text-light);
	font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
}
.runi__badge span:first-child { color: var(--accent-red-on-dark); }
.runi__body { display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 4vw, 64px); margin-top: clamp(24px, 4vh, 36px); }
.runi__text { flex: 1.3 1 300px; min-width: 0; }
.runi__pitch { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.1; color: var(--text-dark); text-wrap: balance; }
.runi__d { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
.runi__ex { flex: 1 1 220px; min-width: 0; }
.runi__ex-label { margin: 0 0 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.runi__ex ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.runi__ex li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; color: var(--text-dark); }
.runi__ex li > span { flex: none; width: 10px; height: 2px; background: var(--accent-red); transform: translateY(-4px); }
/* Changement d'univers : le contenu se retire puis revient (piloté par reducbox.js). */
.runi__body:not(.is-on) { opacity: 0; transform: translateY(10px); }
.runi__body.is-on { transition: opacity .5s ease .1s, transform .6s var(--ease-out) .1s; }
.runi__body:not(.is-on) li { opacity: 0; transform: translateX(-8px); }
.runi__body.is-on li { transition: opacity .45s ease var(--d), transform .55s var(--ease-out) var(--d); }

@media (max-width: 1099px) {
	.runi__list { display: none; }
	.runi__chips { display: flex; }
	.runi__photo { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------------
   03 Grandes enseignes
   --------------------------------------------------------------------------- */
.rb-brands__inner { padding-top: clamp(88px, 14vh, 160px); padding-bottom: clamp(88px, 14vh, 160px); }
.rb-brands__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text-dark); }
.rb-brands__list li { --eh: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding: clamp(20px, 3.4vh, 34px) 0; border-bottom: 1px solid var(--line); }
.rb-brands__list li:hover { --eh: 1; }
.rb-brands__name { position: relative; font-size: clamp(44px, 7.4vw, 124px); font-weight: 600; line-height: .95; letter-spacing: -.055em; color: var(--text-dark); }
.rb-brands__name span { position: absolute; left: .02em; right: .02em; bottom: -.02em; height: .05em; background: var(--accent-red); transform-origin: 0 50%; transform: scaleX(var(--eh)); transition: transform .6s var(--ease-out); }
.rb-brands__k { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rb-brands__k span { color: var(--accent-red); }
.rb-brands__note { margin: 24px 0 0; max-width: 44em; font-size: 15px; line-height: 1.55; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   04 Situations — grille asymétrique sur 12 colonnes
   --------------------------------------------------------------------------- */
.rb-sits__inner { padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(96px, 15vh, 170px); }
.rb-sits__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 7vh, 72px) clamp(16px, 2vw, 28px); align-items: start; }
.rsit { margin: 0; min-width: 0; }
.rsit__photo { position: relative; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #1A1918 0 12px, #211F1E 12px 24px); overflow: hidden; }
.rsit__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.rsit--1 { grid-column: 1 / 8; }
.rsit--1 .rsit__photo { aspect-ratio: 16 / 10; }
.rsit--2 { grid-column: 8 / 13; margin-top: clamp(40px, 10vh, 120px); }
.rsit--2 .rsit__photo { aspect-ratio: 4 / 5; }
.rsit--3 { grid-column: 1 / 5; }
.rsit--3 .rsit__photo { aspect-ratio: 4 / 5; }
.rsit--4 { grid-column: 5 / 13; margin-top: clamp(24px, 6vh, 72px); }
.rsit--4 .rsit__photo { aspect-ratio: 16 / 9; }
.rsit--5 { grid-column: 1 / 7; }
.rsit--5 .rsit__photo { aspect-ratio: 3 / 2; }
.rsit--6 { grid-column: 7 / 13; margin-top: clamp(32px, 8vh, 96px); }
.rsit--6 .rsit__photo { aspect-ratio: 3 / 2; }
.rsit__cap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; padding-top: 18px; border-top: 1px solid #2A2826; margin-top: 16px; }
.rsit__text { flex: 1 1 240px; min-width: 0; }
.rsit__tag { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); }
.rsit__tag span { color: var(--accent-red-on-dark); }
.rsit__q { display: block; margin-top: 8px; font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; color: var(--white); text-wrap: balance; }
.rsit--1 .rsit__q, .rsit--4 .rsit__q { font-size: clamp(28px, 2.8vw, 42px); }
.rsit__go {
	--sh: 0; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none;
	font-size: 14px; font-weight: 500; color: #CFC9C3; cursor: pointer; transition: color .3s;
}
.rsit__go:hover { --sh: 1; color: var(--white); }
.rsit__go:focus-visible { outline: 2px solid var(--accent-red-on-dark); outline-offset: 3px; }
.rsit__go span { width: 16px; height: 2px; background: var(--accent-red-on-dark); transform-origin: 0 50%; transform: scaleX(calc(.6 + var(--sh) * .4)); transition: transform .4s var(--ease-out); }

@media (max-width: 1099px) {
	.rb-sits__grid { grid-template-columns: minmax(0, 1fr); }
	.rsit[class*="rsit--"] { grid-column: 1 / -1; margin-top: 0; }
	.rsit[class*="rsit--"] .rsit__photo { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------------
   05 Une journée avec Reducbox
   --------------------------------------------------------------------------- */
.rb-day__inner { padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(88px, 13vh, 150px); }
.mom__bar { position: relative; }
.mom__track { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: rgba(23, 23, 22, .12); }
.mom__track span { position: absolute; inset: 0; background: var(--accent-red); transform-origin: 0 50%; transform: scaleX(.048); transition: transform .9s var(--ease-io); }
.mom__tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mom__tab {
	--rh: 0; position: relative; min-width: 0; min-height: 44px; padding: 28px 12px 0 0; border: 0; background: transparent;
	text-align: left; cursor: pointer; color: #6E6964; transition: color .35s;
}
.mom__tab:hover { --rh: 1; color: var(--text-dark); }
.mom__tab.is-selected { color: var(--text-dark); }
.mom__tab:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; }
.mom__node { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 2px solid var(--accent-red); background: var(--bg-light); transition: background-color .4s ease; }
.mom__tab.is-reached .mom__node { background: var(--accent-red); }
.mom__t { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #6E6964; }
.mom__tab.is-selected .mom__t { color: var(--accent-red); }
.mom__k { display: block; margin-top: 6px; font-size: clamp(22px, 2.2vw, 34px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; transform: translateY(calc(var(--rh) * -2px)); transition: transform .4s var(--ease-out); }
.mom__panel {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px clamp(32px, 5vw, 88px); margin-top: clamp(40px, 6vh, 64px);
	padding: clamp(28px, 4vw, 48px); background: var(--surface); border: 1px solid var(--card-border); box-shadow: 0 40px 80px -60px rgba(23, 23, 22, .4);
}
.mom__left, .mom__right { min-width: 0; transition: opacity .3s ease, transform .45s var(--ease-out); }
.mom__left { flex: 1 1 280px; }
.mom__right { flex: 1.3 1 340px; transition-delay: .05s; }
.mom__panel.is-fading .mom__left, .mom__panel.is-fading .mom__right { opacity: 0; transform: translateY(8px); }
.mom__time { margin: 0; font-family: var(--font-mono); font-size: clamp(64px, 9vw, 144px); font-weight: 500; line-height: .9; letter-spacing: -.06em; color: var(--text-dark); }
.mom__kind { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-red); }
.mom__kind > span:first-child { width: 16px; height: 2px; background: var(--accent-red); }
.mom__title { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; color: var(--text-dark); text-wrap: balance; }
.mom__d { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
.mom__unis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.mom__uni {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px;
	background: transparent; font-size: 14px; font-weight: 500; color: var(--text-dark); cursor: pointer; transition: background-color .3s, border-color .3s, color .3s;
}
.mom__uni:hover { background-color: var(--bg-dark); border-color: var(--bg-dark); color: var(--text-light); }
.mom__uni:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; }
.mom__uni span { width: 6px; height: 6px; background: var(--accent-red); }

@media (max-width: 1099px) {
	.mom__track, .mom__node { display: none; }
	.mom__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.mom__tab { padding: 14px 16px; }
}

/* ---------------------------------------------------------------------------
   06 Comment y accéder
   --------------------------------------------------------------------------- */
.rb-access__inner { padding-top: clamp(88px, 14vh, 160px); padding-bottom: clamp(88px, 14vh, 160px); }
.rb-access__title { max-width: 13em; margin: 0 0 clamp(48px, 8vh, 88px); }
.rsteps { position: relative; }
.rsteps__track { position: absolute; background: rgba(23, 23, 22, .12); overflow: hidden; }
.rsteps__track span { position: absolute; inset: 0; background: var(--accent-red); }
.rsteps__track--h { left: 0; right: 0; top: 5px; height: 2px; }
.rsteps__track--h span { transform-origin: 0 50%; }
.rsteps__track--v { display: none; left: 5px; top: 6px; bottom: 0; width: 2px; }
.rsteps__track--v span { transform-origin: 50% 0; }
.rsteps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.rsteps__step { position: relative; min-width: 0; padding: 40px 0 0; }
.rsteps__node { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 2px solid var(--accent-red); background: var(--accent-red); }
.rsteps__num { margin: 0; font-family: var(--font-mono); font-size: clamp(40px, 4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.05em; color: var(--accent-red); }
.rsteps__title { margin: 16px 0 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.rsteps__d { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
/* Apparition des étapes (pilotée par reducbox.js) */
.js .rsteps:not(.is-on) .rsteps__track--h span { transform: scaleX(0); }
.js .rsteps:not(.is-on) .rsteps__track--v span { transform: scaleY(0); }
.js .rsteps.is-on .rsteps__track span { transition: transform 1.8s var(--ease-io) .1s; }
.js .rsteps:not(.is-on) .rsteps__node { background: var(--bg-light-2); }
.js .rsteps.is-on .rsteps__node { transition: background-color .4s ease var(--d); }
.js .rsteps:not(.is-on) .rsteps__body { opacity: 0; transform: translateY(14px); }
.js .rsteps.is-on .rsteps__body { transition: opacity .6s ease var(--d), transform .7s var(--ease-out) var(--d); }
.rb-access__foot {
	display: flex; flex-wrap: wrap; gap: 16px 48px; margin-top: clamp(48px, 8vh, 80px); padding-top: 24px; border-top: 1px solid var(--line);
	font-size: 16px; line-height: 1.55; color: var(--text-body);
}
.rb-access__foot p { flex: 1 1 360px; margin: 0; max-width: 36em; }
.rb-access__foot a { font-weight: 600; color: var(--text-dark); text-decoration: underline; text-decoration-color: var(--accent-red); text-underline-offset: 4px; transition: color .3s; }
.rb-access__foot a:hover { color: var(--accent-red); }

@media (max-width: 1099px) {
	.rsteps__track--h { display: none; }
	.rsteps__track--v { display: block; }
	.rsteps ol { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.rsteps__step { padding: 0 0 0 36px; }
}

/* ---------------------------------------------------------------------------
   07 Invassist × Reducbox
   --------------------------------------------------------------------------- */
.rb-duo__inner { padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(96px, 15vh, 170px); }
.rb-duo__title { max-width: 15em; margin: 0 0 clamp(48px, 8vh, 88px); }
.rb-duo__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(72px, 8vw, 128px) minmax(0, 1fr); align-items: stretch; }
.rb-duo__card { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: clamp(340px, 34vw, 460px); padding: clamp(24px, 3vw, 40px); }
.rb-duo__card--inv { background: var(--text-dark); border: 1px solid #2A2826; }
.rb-duo__card--rb { background-color: var(--plate); border: 1px solid var(--plate); color: var(--text-dark); }
.rb-duo__brand { display: flex; align-items: center; gap: 12px; }
.rb-duo__bar { flex: none; display: block; width: 2px; height: 32px; background: var(--accent-red); }
/* Véritable logo Invassist (image entière, jamais recadrée) ; la marge négative
   compense la zone transparente gauche du PNG, comme dans le header. */
.rb-duo__inv-logo { --dl-h: clamp(96px, 9vw, 128px); display: block; max-width: none; width: auto; height: var(--dl-h); margin: calc(var(--dl-h) * -16 / 179) 0 calc(var(--dl-h) * -16 / 179) calc(var(--dl-h) * -30 / 179); }
.rb-duo__rb-logo { position: relative; width: min(100%, 300px); aspect-ratio: 16 / 9; }
.rb-duo__say { margin: 0; font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.rb-duo__verbs { margin: 18px 0 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-soft); }
.rb-duo__card--rb .rb-duo__verbs { color: var(--text-muted); }
.rb-duo__conn { position: relative; display: flex; align-items: center; justify-content: center; }
.rb-duo__line { position: absolute; }
.rb-duo__line span { position: absolute; inset: 0; background: var(--accent-red); }
.rb-duo__line--h { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.rb-duo__line--v { display: none; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; }
.rb-duo__x { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--accent-red); color: var(--white); font-family: var(--font-mono); font-size: 20px; font-weight: 500; }
.rb-duo__foot { display: flex; flex-wrap: wrap; gap: 20px 64px; margin-top: clamp(40px, 6vh, 64px); }
.rb-duo__foot p { flex: 1 1 360px; margin: 0; max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--dark-body); text-wrap: pretty; }
.rb-duo__foot .rb-duo__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: var(--white); }

@media (max-width: 1099px) {
	.rb-duo__grid { grid-template-columns: minmax(0, 1fr); }
	.rb-duo__conn { min-height: 72px; }
	.rb-duo__line--h { display: none; }
	.rb-duo__line--v { display: block; }
}

/* ---------------------------------------------------------------------------
   08 À vous — appel à l'action rouge
   --------------------------------------------------------------------------- */
.rb-cta { position: relative; z-index: 1; background: var(--red-deep); color: var(--white); }
.rb-cta__inner { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(112px, 16vh, 180px) var(--gutter) clamp(88px, 13vh, 150px); }
.rb-cta__line { position: absolute; top: 0; bottom: 0; left: var(--line-x); width: 2px; background: rgba(255, 255, 255, .4); }
.rb-cta__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 56px clamp(40px, 6vw, 104px); }
.rb-cta__copy { flex: 1.4 1 480px; min-width: 0; }
.rb-cta__title { margin: 0; max-width: 10em; font-size: clamp(42px, 6.2vw, 100px); font-weight: 600; line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.rb-cta__lead { margin: clamp(22px, 3.4vh, 32px) 0 0; max-width: 32em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: #FFE1DE; text-wrap: pretty; }
.rb-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(32px, 5vh, 48px); }
.rb-cta__alt { font-size: 16px; color: var(--white); text-decoration: underline; text-underline-offset: 5px; transition: color .3s; }
.rb-cta__alt:hover { color: #FFE1DE; }
.rb-cta__alt:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

@media (max-width: 560px) {
	.rb-hero__actions .btn-light, .rb-cta__actions .btn-dark { flex: 1 1 auto; width: 100%; }
}