/* ==========================================================================
   Cemanty — landing (deploy/site/). Créa : braisix/project/Landing-Web.dc.html
   (+ Landing-Mots-Nuage et Landing-Plateau, importées dans les scènes 2 et 5).

   Un seul DOM sert les deux artboards de la feuille : le mobile 390 est la base,
   le desktop 1440 arrive à 1000px. Entre les deux (tablette portrait 834), c'est
   la mise en page mobile élargie — la feuille ne dessine pas ce palier, et étirer
   la colonne mobile est moins faux que d'écraser la grille desktop en deux
   colonnes de 400px.

   Aucune ressource externe : la CSP de production est `default-src 'self'`.
   ========================================================================== */

/* ── Polices (sous-ensembles latins, tools/gen-landing-fonts.py) ─────────── */
@font-face {
	font-family: "Fredoka";
	src: url("fonts/fredoka-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Fredoka";
	src: url("fonts/fredoka-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Nunito";
	src: url("fonts/nunito-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Nunito";
	src: url("fonts/nunito-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Nunito";
	src: url("fonts/nunito-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

/* ── Tokens (copie de braisix/project/tokens/, sans l'@import Google Fonts) ── */
:root {
	--bg: #F7EFE2;
	--bg-raise: #FDF8EE;
	--surface: #FFFDF7;
	--surface-warm: #FBF3E4;
	--ink: #3D2B1F;
	--ink-soft: #6E5947;
	--ink-faint: #A08B76;
	--line: #EADBC4;
	--line-strong: #D9C4A5;

	--ember: #E2571E;
	--ember-hot: #C74712;
	--ember-soft: #FBE3D4;
	--ember-ink: #8A3410;
	--on-ember: #FFF8EF;

	--gold: #E9A13B;
	--gold-soft: #FAEDD2;
	--gold-ink: #8A5D14;
	--moss: #5F8D4E;
	--moss-soft: #E3EED9;

	--temp-ice: #5B93C4;
	--temp-cold: #6FAFA3;
	--temp-tepid: #C9A83C;
	--temp-warm: #E2861E;
	--temp-hot: #E2571E;
	--temp-bingo: #D93A2B;
	--temp-track: #EFE3CD;

	--fire-gradient: linear-gradient(90deg, #5B93C4, #6FAFA3, #C9A83C, #E2861E, #E2571E, #D93A2B);

	--shadow-card: 0 2px 8px rgba(107, 66, 38, .08), 0 1px 2px rgba(107, 66, 38, .06);

	--font-display: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

	--text-body: 400 15.5px/1.5 var(--font-body);
	--text-small: 600 13px/1.4 var(--font-body);
	--text-label: 700 11.5px/1.3 var(--font-body);

	--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
	--ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* Les scènes sombres portent `data-theme="dark"` : la créa alterne cacao et crème
   d'une scène à l'autre. C'est une direction artistique, pas le thème du joueur —
   la page ne suit donc pas `prefers-color-scheme`, contrairement au jeu. */
[data-theme="dark"] {
	--bg: #221610;
	--bg-raise: #2B1D14;
	--surface: #312218;
	--surface-warm: #3B2A1D;
	--ink: #F6E9D8;
	--ink-soft: #C9AF97;
	--ink-faint: #8F7660;
	--line: #463325;
	--line-strong: #5C452F;

	--ember: #F0662A;
	--ember-hot: #D2551C;
	--ember-soft: #4A2C1B;
	--ember-ink: #F5B48C;

	--gold: #F0B04A;
	--gold-soft: #453120;
	--gold-ink: #F3CE8F;
	--moss: #7FAF6C;
	--moss-soft: #2C3A24;

	--temp-ice: #6FA5D6;
	--temp-cold: #7FBFB2;
	--temp-tepid: #D8B84E;
	--temp-warm: #EF9330;
	--temp-hot: #F0662A;
	--temp-bingo: #EF5140;
	--temp-track: #3B2A1D;

	--fire-gradient: linear-gradient(90deg, #6FA5D6, #7FBFB2, #D8B84E, #EF9330, #F0662A, #EF5140);
	--shadow-card: 0 2px 8px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: #221610;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font: var(--text-body);
	color: var(--ink);
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
p {
	margin: 0;
}

img,
svg {
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px
	;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Le sprite : 9 icônes de chaleur, 4 portraits, 4 icônes CmIcon. Généré depuis les
   composants Braisix (voir README de ce dossier), référencé par <use>. */
#sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ── Barre collante ──────────────────────────────────────────────────────── */
.bar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 20;
	height: 60px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	transform: translateY(-101%);
	transition: transform .32s var(--ease-out);
}

.bar.on {
	transform: translateY(0);
}

.bar .inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	/* La barre garde ses extrémités collées aux bords, contrairement au contenu
	   des scènes que `.inner` plafonne à 560 px. */
	max-width: none;
	height: 100%;
	padding: 0 14px 0 16px;
}

.bar .mark {
	width: 32px;
	height: 32px;
	border-radius: 10px;
}

.bar .wordmark {
	display: none;
}

.bar .store {
	gap: 6px;
	height: 36px;
	padding: 0 11px;
	border-radius: 999px;
}

.bar .store svg {
	width: 13px;
	height: 13px;
}

.bar .store .kicker,
.bar .store .name {
	display: none;
}

.bar .store .short {
	display: inline;
	font: 700 11.5px/1 var(--font-display);
	white-space: nowrap;
}

.bar-cta {
	display: grid;
	place-items: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--ember);
	color: var(--on-ember);
	font: 700 12.5px/1 var(--font-display);
	letter-spacing: .06em;
}

.bar-cta:hover {
	background: var(--ember-hot);
}

.bar-side {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ── Scènes ──────────────────────────────────────────────────────────────── */
.scene {
	--deco: 0px;
	--emby: 0px;
	--flow: 0px;
	--txt: 0px;
	--fade: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	min-height: 100svh;
	padding: 80px 20px 40px;
	overflow: hidden;
	background: var(--bg);
	color: var(--ink);
}

/* Le contenu passe au-dessus des décors sans leur retirer leur position absolue. */
.inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
	margin-inline: auto;
	width: 100%;
}

/* Les décors glissent à 40 % de la vitesse du scroll, Emby à 20 %, le texte suit
   la page. Les valeurs sont posées par site.js sur chaque scène. */
.deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	transform: translateY(var(--deco));
}

.deco-word {
	font: 700 260px/1 var(--font-display);
	letter-spacing: -.06em;
	color: var(--ember);
	opacity: .07;
	user-select: none;
}

.emby-slot {
	transform: translateY(var(--emby));
}

.label {
	font: var(--text-label);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ember-ink);
}

.scene h2 {
	font: 600 36px/1.05 var(--font-display);
	letter-spacing: -.02em;
	text-wrap: balance;
}

.scene p {
	color: var(--ink-soft);
	text-wrap: pretty;
}

.fire-edge {
	position: absolute;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--fire-gradient);
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.cta {
	display: grid;
	place-items: center;
	height: 60px;
	border-radius: 999px;
	background: var(--ember);
	color: var(--on-ember);
	font: 700 20px/1 var(--font-display);
	letter-spacing: .02em;
}

.cta:hover {
	background: var(--ember-hot);
}

/* Plaquettes des stores. Avant publication elles ne sont pas cliquables : le
   basculement se fait sur `data-apps` de <html> (voir index.html). */
.stores {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.store {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 54px;
	border-radius: 16px;
	background: var(--surface-warm);
	border: 1px solid var(--line-strong);
	color: var(--ink-soft);
}

.store i {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-style: normal;
	line-height: 1;
}

.store .kicker {
	font: 600 10px/1 var(--font-body);
	opacity: .75;
}

.store .name {
	font: 600 15px/1.1 var(--font-display);
}

.store .short {
	display: none;
}

.store .soon {
	display: inline;
}

.store .get {
	display: none;
}

[data-apps="live"] .store .soon {
	display: none;
}

[data-apps="live"] .store .get {
	display: inline;
}

[data-theme="dark"] .store {
	background: rgba(253, 248, 238, .08);
	border-color: #5C452F;
	color: #E8D6C0;
}

/* Publiées, les plaquettes deviennent des boutons pleins — crème sur les scènes
   sombres, encre sur les claires. */
[data-apps="live"] .store {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg-raise);
}

[data-apps="live"] [data-theme="dark"] .store {
	background: #FDF8EE;
	border-color: #FDF8EE;
	color: #3D2B1F;
}

/* ── S1 · ouverture ──────────────────────────────────────────────────────── */
.s1 {
	align-items: center;
	justify-content: space-between;
	padding: 64px 24px 22px;
	text-align: center;
}

.s1 .deco-glow {
	left: -40px;
	right: -40px;
	top: 300px;
	height: 260px;
	border-radius: 50%;
	background: var(--ember);
	opacity: .14;
}

.s1 .inner {
	flex: 1;
	justify-content: space-between;
}

.s1 .emby-slot {
	--s: 170px;
}

.s1 .head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	transform: translateY(var(--txt));
	opacity: var(--fade);
}

.s1 h1 {
	font: 600 40px/1.02 var(--font-display);
	letter-spacing: -.02em;
	text-wrap: balance;
}

.s1 .baseline {
	font: 400 18px/1.4 var(--font-body);
}

.s1 .act {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	transform: translateY(var(--txt));
}

.s1 .note {
	font: var(--text-small);
	color: var(--ink-faint);
	text-align: center;
}

.s1 .fire-edge {
	bottom: 0;
}

/* ── Marque ──────────────────────────────────────────────────────────────── */
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: var(--ember);
}

.mark svg {
	display: block;
}

/* Le wordmark : les lettres montent vers la droite et la flamme du « y » s'échappe
   en trois braises. Avances relevées sur la frame (Logo-Cemanty). */
.wordmark {
	display: flex;
	align-items: baseline;
	font: 700 44px/1 var(--font-display);
	letter-spacing: -.045em;
	color: var(--ink);
}

.wordmark span {
	display: inline-block;
}

.wordmark .l1 {
	transform: translateY(.075em) rotate(-2deg);
}

.wordmark .l2 {
	transform: translateY(.036em) rotate(-1deg);
}

.wordmark .l4 {
	transform: translateY(-.055em) rotate(1.5deg);
}

.wordmark .l5 {
	transform: translateY(-.111em) rotate(3deg);
}

.wordmark .l6 {
	transform: translateY(-.184em) rotate(4.5deg);
}

.wordmark .l7 {
	transform: translateY(-.277em) rotate(6deg);
	color: var(--ember);
}

.wordmark b {
	display: inline-block;
	border-radius: 50%;
	background: var(--ember);
}

.wordmark .e1 {
	width: .159em;
	height: .159em;
	margin-left: -.009em;
	transform: translateY(-.295em);
}

.wordmark .e2 {
	width: .125em;
	height: .125em;
	margin-left: .018em;
	transform: translateY(-.373em);
}

.wordmark .e3 {
	width: .091em;
	height: .091em;
	margin-left: .018em;
	transform: translateY(-.45em);
}



/* ── S2 · nuage sémantique ───────────────────────────────────────────────── */
.s2 {
	gap: 22px;
}

.s2 .deco-word {
	right: -70px;
	top: 30px;
}

.s2 .txt {
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: translateY(var(--txt));
}

.cloud-wrap {
	display: flex;
	justify-content: center;
	transform: translateY(var(--flow));
}

.cloud {
	position: relative;
	width: 350px;
	height: 330px;
	font-family: var(--font-display);
}

.cloud > span {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -50%);
	animation: nu-in .55s var(--ease-bounce) var(--d) both;
}

.cloud em {
	--r: 0deg;
	--dx: 0px;
	--dy: 0px;
	display: inline-flex;
	align-items: center;
	height: var(--h);
	padding: 0 var(--pad);
	border-radius: 999px;
	background: color-mix(in oklab, var(--c) var(--tint), var(--surface));
	border: 1px solid color-mix(in oklab, var(--c) var(--edge), var(--surface));
	font: 700 var(--fs) var(--font-display);
	font-style: normal;
	color: var(--c);
	white-space: nowrap;
	animation: nu-float var(--dur) ease-in-out var(--fd) infinite;
}

.cloud .core {
	left: 50%;
	top: 50%;
	animation: nu-core 3.6s ease-in-out infinite;
}

.cloud .core em {
	gap: 8px;
	height: 52px;
	padding: 0 22px;
	background: var(--ember);
	border: 0;
	color: var(--on-ember);
	font: 700 26px/1 var(--font-display);
	animation: none;
}

.cloud .core svg {
	display: block;
}

/* ── S3 · trois étapes ───────────────────────────────────────────────────── */
.s3 {
	background: var(--ember-soft);
}

.s3 .emby-slot {
	--s: 124px;
	position: absolute;
	right: max(26px, (100% - 560px) / 2 + 26px);
	top: 64px;
	width: 150px;
}

.s3 .txt {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-right: 140px;
	transform: translateY(var(--txt));
}

.steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 10px;
	transform: translateY(var(--txt));
}

.step {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border-radius: 20px;
	background: var(--surface);
}

.step b {
	font: 700 40px/1 var(--font-display);
	letter-spacing: -.04em;
	color: var(--ember);
}

.step span {
	font: 600 17px/1.35 var(--font-body);
}

.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 18px;
	border-top: 1px solid color-mix(in oklab, var(--ember) 25%, transparent);
	transform: translateY(var(--txt));
}

.facts span {
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--surface);
	font: var(--text-small);
	color: var(--ember-ink);
}

/* ── S4 · échelle de chaleur ─────────────────────────────────────────────── */
.s4 {
	display: grid;
	grid-template-columns: 22px 1fr;
	column-gap: 16px;
	align-items: center;
	padding: 80px 20px 36px;
	background: var(--bg-raise);
}

/* Mobile : la colonne va du BINGO (en haut) au glacial (en bas) — l'ordre du DOM
   est celui du desktop, `column-reverse` fait le reste. */
.s4 .gauge-v {
	align-self: stretch;
	border-radius: 999px;
	background: linear-gradient(180deg, #D93A2B, #E2571E, #E2861E, #C9A83C, #6FAFA3, #5B93C4);
}

.s4 .gauge-h {
	display: none;
}

.s4 .txt {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.s4 .aside {
	display: none;
}

.s4 .col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	transform: translateY(var(--txt));
}

.heat {
	display: flex;
	flex-direction: column-reverse;
	gap: 5px;
}

.heat > span {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	align-items: center;
	column-gap: 12px;
	padding: 7px 12px 7px 8px;
	border-radius: 14px;
	background: color-mix(in oklab, var(--c) 12%, var(--surface));
}

.heat svg {
	display: block;
	width: 26px;
	height: 26px;
	animation: hf var(--dur) ease-in-out var(--d) infinite;
}

.heat b {
	font: 700 15px/1 var(--font-display);
	color: var(--c);
}

.heat i {
	font: 600 12px/1.2 var(--font-body);
	font-style: normal;
	color: var(--ink-soft);
}

/* ── S5 · une partie en direct ───────────────────────────────────────────── */
.s5 {
	padding: 80px 0 36px;
}

.s5 .deco-word {
	left: -30px;
	bottom: -40px;
	font-size: 220px;
	opacity: .08;
}

.s5 .txt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 118px 0 20px;
}

.s5 .board-wrap {
	padding: 0 20px;
}

.s5 p {
	display: none;
}

.s5 .emby-slot {
	--s: 88px;
	position: absolute;
	right: max(14px, (100% - 560px) / 2 + 14px);
	top: 64px;
}

/* ── Plateau (Landing-Plateau) ───────────────────────────────────────────── */
.board {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var(--font-body);
}

.feat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	height: 132px;
	padding: 14px 16px;
	border-radius: 18px;
	background: color-mix(in oklab, var(--c) var(--tint, 10%), var(--surface));
	border: 1px solid color-mix(in oklab, var(--c) var(--edge, 32%), var(--surface));
	transition: background .4s ease, border-color .4s ease;
}

.feat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font: var(--text-label);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.feat-head .count {
	font: var(--text-small);
	text-transform: none;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.feat-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: transform .55s var(--ease-bounce), opacity .25s ease;
}

.feat-body.pop {
	transform: translateY(8px) scale(.94);
	opacity: 0;
	transition: none;
}

.feat-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.feat-word {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.feat-word b {
	overflow: hidden;
	font: 700 26px/1 var(--font-display);
	letter-spacing: -.01em;
	color: var(--ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.feat-word span {
	font: var(--text-label);
	color: var(--ink-faint);
	white-space: nowrap;
}

.feat-score {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 700 26px/1 var(--font-display);
	color: var(--c);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.feat-score .bingo {
	display: none;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--temp-bingo);
	color: #FFF8EF;
	font: 700 11px/1 var(--font-display);
	letter-spacing: .06em;
}

.board[data-step="8"] .feat-score .bingo {
	display: inline-block;
}

.track {
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--temp-track);
}

.track i {
	display: block;
	width: var(--fill, 0%);
	height: 100%;
	border-radius: 999px;
	background: var(--fire-gradient);
	background-size: var(--gsize, 100%) 100%;
	transition: width .7s var(--ease-out);
}

.feat-mood {
	display: flex;
	align-items: center;
	gap: 6px;
	font: var(--text-label);
	color: var(--c);
}

.feat-mood svg {
	width: 15px;
	height: 15px;
}

.rows {
	display: flex;
	flex-direction: column;
	height: 240px;
}

.row {
	display: grid;
	grid-template-columns: 5px 26px 1fr auto 62px;
	align-items: center;
	column-gap: 10px;
	height: 40px;
	padding: 0 6px;
	border-bottom: 1px solid var(--line);
	transition: opacity .3s ease, transform .45s var(--ease-bounce);
}

.row.off {
	opacity: 0;
	border-bottom-color: transparent;
	transform: translateY(-12px);
}

.row .dot {
	width: 5px;
	height: 14px;
	border-radius: 3px;
	background: var(--c);
}

.row .n {
	font: var(--text-small);
	color: var(--ink-faint);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.row .w {
	font: 600 16px/1.2 var(--font-display);
}

.row .rank,
.row .icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 22px;
	border-radius: 999px;
}

.row .rank {
	background: var(--surface);
	border: 1px solid var(--line);
}

.row .rank span {
	display: flex;
	align-items: baseline;
	gap: 1px;
}

.row .rank b {
	font: 700 13px/1 var(--font-display);
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

.row .rank i {
	font: 600 8px/1 var(--font-body);
	font-style: normal;
	color: var(--ink-faint);
}

.row .icon {
	background: color-mix(in oklab, var(--c) 12%, var(--surface));
	border: 1px solid color-mix(in oklab, var(--c) 30%, var(--surface));
}

.row .icon svg {
	width: 15px;
	height: 15px;
}

.row.has-rank .icon,
.row:not(.has-rank) .rank {
	display: none;
}

.row .sc {
	font: 700 15px/1 var(--font-display);
	color: var(--c);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ── S6 · revenir ────────────────────────────────────────────────────────── */
.s6 .deco-glow {
	left: -60px;
	top: -60px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: var(--gold-soft);
}

.s6 .txt {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	transform: translateY(var(--txt));
}

.s6 .txt > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.s6 .emby-slot {
	--s: 88px;
	flex: none;
	width: 110px;
}

.reasons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	transform: translateY(var(--txt));
}

.reason {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 14px;
	border-radius: 20px;
	background: var(--surface);
	border: 1px solid var(--line);
}

.reason svg {
	width: 34px;
	height: 34px;
}

.reason b {
	font: 700 18px/1.15 var(--font-display);
}

.reason span {
	font: var(--text-small);
	color: var(--ink-soft);
	text-wrap: pretty;
}

/* ── S7 · à plusieurs ────────────────────────────────────────────────────── */
.s7 {
	gap: 16px;
	background: var(--surface-warm);
}

.s7 .deco-word {
	left: -40px;
	bottom: -60px;
	font-size: 240px;
}

.s7 .txt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	transform: translateY(var(--txt));
}

.modes {
	display: flex;
	flex-direction: column;
	gap: 16px;
	transform: translateY(var(--txt));
}

.mode {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 18px;
	border-radius: 22px;
	background: var(--surface);
}

.mode-faces {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mode-faces svg.av {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--surface);
}

.mode-faces .vs {
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--ember);
	color: var(--on-ember);
	font: 700 12px/1 var(--font-display);
	letter-spacing: .06em;
}

.mode-faces .more {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--surface-warm);
	border: 1px dashed var(--line-strong);
	font: 700 13px/1 var(--font-display);
	color: var(--ink-faint);
}

.mode-faces .heart {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--moss-soft);
	border: 1px solid color-mix(in oklab, var(--moss) 35%, transparent);
}

.mode-faces .heart svg {
	width: 17px;
	height: 17px;
}

.mode-faces .shared {
	flex: 1;
	margin-left: 8px;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--temp-track);
}

.mode-faces .shared i {
	display: block;
	width: 72%;
	height: 100%;
	background: var(--fire-gradient);
	background-size: 139% 100%;
}

.mode b {
	font: 700 20px/1.15 var(--font-display);
}

.mode p {
	font: var(--text-body);
}

/* ── S8 · apps et pied de page ───────────────────────────────────────────── */
.s8 {
	justify-content: space-between;
	padding: 60px 20px 26px;
}

.s8 .fire-edge {
	top: 0;
}

.s8 .deco-glow {
	left: -60px;
	right: -60px;
	bottom: 120px;
	height: 300px;
	border-radius: 50%;
	background: var(--ember);
	opacity: .12;
}

.s8 .pitch {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	text-align: center;
	transform: translateY(var(--txt));
}

.s8 h2 {
	font: 600 40px/1.02 var(--font-display);
}

.s8 .pitch p {
	font: 400 17px/1.45 var(--font-body);
}

.s8 .pitch-txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
}

.s8 .act {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 300px;
	padding-top: 6px;
}

.s8 .stores {
	grid-template-columns: 1fr;
}

.s8 .store {
	height: 58px;
}

.s8 .cta {
	height: 58px;
	font-size: 19px;
}

.s8 .soon-title {
	display: block;
}

.s8 .live-title {
	display: none;
}

[data-apps="live"] .s8 .soon-title {
	display: none;
}

[data-apps="live"] .s8 .live-title {
	display: block;
}

/* Emby qui tape sur un téléphone, à côté du pitch. */
.typing-scene {
	--s: 118px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 24px;
	transform: translateY(var(--emby));
}

.phone {
	position: relative;
	flex: none;
	width: 50px;
	height: 87px;
	margin-bottom: 6px;
}

.phone svg {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 0 100%;
	animation: ph-tilt 3.2s ease-in-out infinite;
}

.phone .tap {
	position: absolute;
	left: -8px;
	top: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gold);
	animation: ph-tap 3.2s ease-in-out infinite;
}

.foot {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.foot nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.foot a {
	font: var(--text-small);
	color: var(--ink-soft);
}

.foot a:hover {
	color: var(--ember);
}

.foot .legal {
	font: var(--text-small);
	color: var(--ink-faint);
}

/* ── Emby : corps commun aux scénarios ───────────────────────────────────── */
.emby {
	position: relative;
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: var(--s);
	height: calc(var(--s) * 1.2);
}

.emby-body {
	position: relative;
	width: var(--s);
	height: calc(var(--s) * 1.15);
	transform-origin: 50% 100%;
}

.emby-body > svg {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 3px 4px rgba(107, 66, 38, .18));
}

.emby-campfire .emby-body {
	margin-bottom: calc(var(--s) * .16);
	animation: emby-crackle 2.4s ease-in-out infinite;
}

.emby-thinking .emby-body {
	animation: emby-float 2.8s ease-in-out infinite;
}

.emby-streak .emby-body {
	animation: emby-surge 1.9s ease-in-out infinite;
}

.emby-typing .emby-body {
	animation: emby-peek 2.9s ease-in-out infinite;
}

/* Décor du feu de camp : le sol et les branches derrière, les bûches devant. */
.camp {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: calc(var(--s) * 1.5);
	transform: translateX(-50%);
	pointer-events: none;
}

.camp-back {
	height: calc(var(--s) * .93);
}

.camp-front {
	z-index: 2;
	height: calc(var(--s) * .4);
}

.camp svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Bulle de réflexion (props "bubble"). */
.bubble {
	position: absolute;
	top: calc(var(--s) * .03);
	right: calc(var(--s) * -.04);
	display: flex;
	align-items: center;
	gap: calc(var(--s) * .036);
	padding: calc(var(--s) * .064) calc(var(--s) * .091);
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
}

.bubble i {
	width: calc(var(--s) * .059);
	height: calc(var(--s) * .059);
	border-radius: 50%;
	background: var(--ember);
	animation: emby-dot 1.2s ease-in-out var(--d) infinite;
}

/* ── Particules (mêmes formules que les composants Braisix) ──────────────── */
.bits {
	position: absolute;
	inset: -25% -20% 0;
	pointer-events: none;
	overflow: visible;
}

.bits i {
	position: absolute;
	left: var(--l);
	width: calc(var(--s) * var(--k));
	height: calc(var(--s) * var(--kh, var(--k)));
	background: var(--bg);
}

.bits .tr,
.bits .fl,
.bits .bf {
	bottom: var(--b);
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.bits .tr {
	opacity: .7;
	animation: emby-rise 1.7s ease-in var(--d) infinite;
}

.bits .bl,
.bits .mo,
.bits .sp,
.bits .bd {
	top: var(--t);
	border-radius: 50%;
}

.bits .bl {
	box-shadow: 0 0 5px rgba(78, 134, 188, .7);
	animation: embt-blow 1.9s linear var(--d) infinite;
}

.bits .mo {
	animation: embt-spark 2.2s ease-out var(--d) infinite;
}

.bits .sp {
	animation: embt-spark 1.4s ease-out var(--d) infinite;
}

.bits .fl {
	opacity: .75;
	animation: embt-rise 1.5s ease-in var(--d) infinite;
}

.bits .bf {
	opacity: .85;
	animation: embt-rise 1s ease-in var(--d) infinite;
}

.bits .bd {
	box-shadow: 0 0 6px rgba(255, 253, 247, .9);
	animation: embt-burst .9s ease-out var(--d) infinite;
}

/* ── Emby « température » : un corps, neuf crans ─────────────────────────── */
.temp {
	position: relative;
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: var(--s);
	height: calc(var(--s) * 1.24);
}

.temp-body {
	position: relative;
	width: var(--s);
	height: calc(var(--s) * 1.15);
	transform-origin: 50% 100%;
}

.temp-body > svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleY(var(--sy, 1)) scaleX(calc(1 + (1 - var(--sy, 1)) * .5));
	transform-origin: 50% 100%;
	transition: transform .35s ease;
}

.temp .face {
	display: none;
}

.temp .bits {
	display: none;
}

.temp[data-bits="blizzard"] .bits-blizzard,
.temp[data-bits="motes"] .bits-motes,
.temp[data-bits="sparks"] .bits-sparks,
.temp[data-bits="flames"] .bits-flames,
.temp[data-bits="bingo"] .bits-bingo {
	display: block;
}

.temp[data-face="brr"] .face-brr,
.temp[data-face="flat"] .face-flat,
.temp[data-face="smile"] .face-smile,
.temp[data-face="grin"] .face-grin,
.temp[data-face="star"] .face-star,
.temp[data-face="star"] .face-mouth-star {
	display: block;
}

.temp[data-face="star"] .eyes {
	display: none;
}

.eye {
	animation: emby-blink 4.5s steps(1, end) infinite;
}

.eye-l {
	transform-origin: 49px 88px;
}

.eye-r {
	transform-origin: 71px 88px;
}

.temp .eye {
	animation: embt-blink 5s steps(1, end) infinite;
}

.temp .face-star > g {
	animation: embt-twinkle 1.1s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.temp .face-star > g + g {
	animation-delay: .28s;
}

.temp[data-stage="glacial"] .temp-body {
	animation: embt-quake .42s linear infinite;
}

.temp[data-stage="froid"] .temp-body {
	animation: embt-sway 3.2s ease-in-out infinite;
}

.temp[data-stage="tiede"] .temp-body {
	animation: embt-breathe 2.6s ease-in-out infinite;
}

.temp[data-stage="chaud"] .temp-body {
	animation: embt-flicker 1.8s ease-in-out infinite;
}

.temp[data-stage="tres-chaud"] .temp-body {
	animation: embt-flicker 1.35s ease-in-out infinite;
}

.temp[data-stage="brulant"] .temp-body {
	animation: embt-blaze 1.1s ease-in-out infinite;
}

.temp[data-stage="bingo"] .temp-body {
	animation: embt-surge .55s ease-in-out infinite;
}

/* Les neuf crans : couleur du corps, du ventre, des joues, et l'écrasement. */
.temp[data-stage="glacial"] {
	--body: color-mix(in oklab, var(--temp-ice) 82%, var(--ink));
	--belly: #BBD8EC;
	--cheek: #8FBEDF;
	--sy: .94;
}

.temp[data-stage="froid"] {
	--body: var(--temp-cold);
	--belly: #D6EDE6;
	--cheek: #9FCFC4;
	--sy: .99;
}

.temp[data-stage="tiede"] {
	--body: var(--temp-tepid);
	--belly: var(--gold-soft);
	--cheek: var(--gold);
	--sy: 1;
}

.temp[data-stage="chaud"] {
	--body: var(--temp-warm);
	--belly: var(--gold);
	--cheek: var(--ember);
	--sy: 1.02;
}

.temp[data-stage="tres-chaud"] {
	--body: color-mix(in oklab, var(--temp-hot) 45%, var(--temp-warm));
	--belly: var(--gold);
	--cheek: var(--temp-warm);
	--sy: 1.03;
}

.temp[data-stage="brulant"] {
	--body: color-mix(in oklab, var(--temp-hot) 78%, var(--temp-warm));
	--belly: var(--gold);
	--cheek: var(--temp-warm);
	--sy: 1.05;
}

.temp[data-stage="bingo"] {
	--body: var(--temp-bingo);
	--belly: #FFF0B8;
	--cheek: #FFF0B8;
	--sy: 1.1;
}

/* ── Images-clés (reprises telles quelles des composants Braisix) ─────────── */
@keyframes hf {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-6px) rotate(2.5deg);
	}
}

@keyframes ph-tilt {
	0%,
	100% {
		transform: rotate(-14deg);
	}

	50% {
		transform: rotate(-22deg) translateY(-4px);
	}
}

@keyframes ph-tap {
	0%,
	40%,
	100% {
		opacity: 0;
		transform: scale(.4);
	}

	50% {
		opacity: 1;
		transform: scale(1.1);
	}

	62% {
		opacity: 0;
		transform: scale(.6) translateY(-8px);
	}
}

@keyframes nu-in {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(.62);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes nu-float {
	0%,
	100% {
		transform: translate(0, 0) rotate(var(--r));
	}

	50% {
		transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * -1));
	}
}

@keyframes nu-core {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
	}

	50% {
		transform: translate(-50%, -50%) scale(1.05);
	}
}

@keyframes emby-float {
	0%,
	100% {
		transform: translateY(0) rotate(-2deg);
	}

	50% {
		transform: translateY(-8%) rotate(2deg);
	}
}

@keyframes emby-surge {
	0%,
	100% {
		transform: translateY(0) scaleY(1);
	}

	45% {
		transform: translateY(-6%) scaleY(1.14) scaleX(.95);
	}
}

@keyframes emby-crackle {
	0%,
	100% {
		transform: scale(1, 1) rotate(-1.5deg);
	}

	35% {
		transform: scale(.98, 1.07) rotate(1.5deg);
	}

	70% {
		transform: scale(1.04, .98) rotate(-.5deg);
	}
}

@keyframes emby-peek {
	0%,
	100% {
		transform: rotate(5deg) translateX(2%) scale(1, 1);
	}

	30% {
		transform: rotate(8deg) translateX(4%) scale(.98, 1.03);
	}

	55% {
		transform: rotate(6deg) translateX(3%) scale(1.02, .99);
	}

	78% {
		transform: rotate(9deg) translateX(4.5%) scale(.99, 1.02);
	}
}

@keyframes emby-blink {
	0%,
	95%,
	100% {
		transform: scaleY(1);
	}

	97% {
		transform: scaleY(.1);
	}
}

@keyframes emby-rise {
	0% {
		opacity: 0;
		transform: translateY(14px) scale(.5);
	}

	30% {
		opacity: .8;
	}

	100% {
		opacity: 0;
		transform: translateY(-40px) scale(1.2);
	}
}

@keyframes emby-dot {
	0%,
	100% {
		transform: translateY(0);
		opacity: .5;
	}

	50% {
		transform: translateY(-4px);
		opacity: 1;
	}
}

@keyframes embt-quake {
	0%,
	100% {
		transform: translateX(-3px) rotate(-1.6deg) scaleY(.97);
	}

	25% {
		transform: translateX(3px) rotate(1.6deg) scaleY(1);
	}

	50% {
		transform: translateX(-2px) rotate(-1deg) scaleY(.95);
	}

	75% {
		transform: translateX(2px) rotate(1deg) scaleY(1);
	}
}

@keyframes embt-sway {
	0%,
	100% {
		transform: rotate(-2deg);
	}

	50% {
		transform: rotate(2deg);
	}
}

@keyframes embt-breathe {
	0%,
	100% {
		transform: scale(1) rotate(-1deg);
	}

	50% {
		transform: scale(1.04, 1.06) rotate(1deg);
	}
}

@keyframes embt-flicker {
	0%,
	100% {
		transform: scaleY(1) rotate(-1.5deg);
	}

	35% {
		transform: scaleY(1.06) rotate(1.5deg);
	}

	70% {
		transform: scaleY(.97) rotate(-.8deg);
	}
}

@keyframes embt-blaze {
	0%,
	100% {
		transform: scale(1, 1) rotate(-2deg);
	}

	30% {
		transform: scale(.96, 1.1) rotate(2deg);
	}

	60% {
		transform: scale(1.05, .97) rotate(-1deg);
	}
}

@keyframes embt-surge {
	0%,
	100% {
		transform: scale(1, 1.04) rotate(-3deg) translateY(0);
	}

	25% {
		transform: scale(.92, 1.18) rotate(3deg) translateY(-4%);
	}

	55% {
		transform: scale(1.09, .95) rotate(-2deg);
	}
}

@keyframes embt-twinkle {
	0%,
	100% {
		transform: scale(1) rotate(0deg);
	}

	30% {
		transform: scale(1.32) rotate(-12deg);
	}

	60% {
		transform: scale(.9) rotate(9deg);
	}
}

@keyframes embt-blink {
	0%,
	95%,
	100% {
		transform: scaleY(1);
	}

	97% {
		transform: scaleY(.1);
	}
}

@keyframes embt-spark {
	0% {
		opacity: 0;
		transform: translateY(12px) scale(.4);
	}

	30% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateY(-28px) scale(1.15);
	}
}

@keyframes embt-rise {
	0% {
		opacity: 0;
		transform: translateY(14px) scale(.5);
	}

	30% {
		opacity: .85;
	}

	100% {
		opacity: 0;
		transform: translateY(-42px) scale(1.25);
	}
}

@keyframes embt-blow {
	0% {
		opacity: 0;
		transform: translate(-6px, -12px);
	}

	20% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(26px, 92px);
	}
}

@keyframes embt-burst {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(.3);
	}

	25% {
		opacity: 1;
		transform: translateY(0) scale(1.2);
	}

	100% {
		opacity: 0;
		transform: translateY(-30px) scale(.6);
	}
}

/* ══ Desktop (artboard 1440 de la feuille) ════════════════════════════════ */
@media (min-width: 1100px) {
	.scene {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		gap: 34px;
		min-height: 900px;
		padding: 0;
	}

	.scene > .inner {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 34px;
		width: 100%;
		max-width: 1260px;
		margin-inline: auto;
		margin: 0 auto;
		padding: 0 40px;
	}

	.scene h2 {
		font-size: 60px;
		line-height: 1.02;
		letter-spacing: -.025em;
	}

	.scene p {
		font: 400 21px/1.5 var(--font-body);
	}

	.deco-word {
		font-size: 560px;
		opacity: .06;
	}

	.bar {
		height: 68px;
		padding: 0;
	}

	.bar > .inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 1260px;
		height: 68px;
		margin: 0 auto;
		padding: 0 40px;
	}

	.bar-cta {
		height: 40px;
		padding: 0 20px;
		margin-left: 6px;
		font-size: 13.5px;
	}

	.bar .store {
		height: 40px;
		padding: 0 14px;
		border-radius: 999px;
	}

	.bar .wordmark {
		display: flex;
		font-size: 21px;
		letter-spacing: -.04em;
	}

	.bar .store svg {
		width: 15px;
		height: 15px;
	}

	.bar .store .kicker,
	.bar .store .name {
		display: block;
	}

	.bar .store .short {
		display: none;
	}

	.bar .store .name {
		font-size: 13px;
	}

	.bar .store .kicker {
		font-size: 9.5px;
	}

	/* S1 */
	.s1 {
		text-align: left;
	}

	.s1 > .inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 520px;
		grid-template-areas: "head emby" "act emby";
		align-content: center;
		gap: 30px 60px;
		align-items: center;
		height: 900px;
	}

	.s1 .deco-glow {
		left: 760px;
		right: auto;
		top: 120px;
		width: 640px;
		height: 640px;
	}

	.s1 .head {
		grid-area: head;
		align-items: flex-start;
		align-self: end;
		gap: 30px;
	}

	.s1 .act {
		align-self: start;
	}

	.s1 h1 {
		font-size: 76px;
		line-height: .98;
		letter-spacing: -.03em;
	}

	.s1 .baseline {
		font-size: 24px;
	}

	.s1 .act {
		grid-area: act;
		gap: 12px;
	}

	.s1 .note {
		text-align: left;
	}

	.s1 .emby-slot {
		--s: 360px;
		grid-area: emby;
		justify-self: center;
	}

	.s1 .stores {
		gap: 12px;
	}

	.s1 .cta {
		height: 64px;
		font-size: 21px;
	}

	.s1 .store {
		height: 64px;
		padding: 0 22px;
		border-radius: 18px;
	}

	.store .kicker {
		font-size: 11px;
	}

	.store .name {
		font-size: 18px;
	}

	.mark {
		width: 76px;
		height: 76px;
		border-radius: 24px;
	}

	.wordmark {
		font-size: 60px;
	}

	.s1 .fire-edge,
	.s8 .fire-edge {
		height: 8px;
	}

	/* S2 */
	.s2 > .inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 480px;
		align-items: center;
		gap: 96px;
	}

	.s2 .deco-word {
		right: -60px;
		top: -60px;
	}

	.s2 .txt {
		gap: 18px;
	}

	.cloud {
		width: 480px;
		height: 360px;
	}

	/* S3 */
	.s3 .emby-slot {
		--s: 300px;
		right: max(80px, (100% - 1260px) / 2 + 80px);
		top: 120px;
		width: 420px;
	}

	.s3 .txt {
		padding-right: 0;
	}

	.steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 300px));
		gap: 20px;
	}

	.step {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 28px 26px 30px;
		border-radius: 24px;
	}

	.step b {
		font-size: 64px;
		letter-spacing: -.05em;
	}

	.step span {
		font-size: 19px;
		line-height: 1.4;
		text-wrap: pretty;
	}

	.facts {
		max-width: 940px;
		gap: 10px;
		padding-top: 24px;
	}

	.facts span {
		padding: 9px 16px;
		font: 600 14px/1.3 var(--font-body);
	}

	/* S4 : l'échelle repasse à l'horizontale, du plus froid au plus chaud. */
	/* La colonne de 22 px de la jauge verticale disparaît : une seule colonne,
	   pleine largeur (`none` rendrait la piste implicite, dimensionnée au contenu). */
	.s4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.s4 > .inner {
		display: flex;
	}

	.s4 .col {
		gap: 34px;
	}

	.s4 .head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
	}

	.s4 .txt {
		gap: 12px;
	}

	.s4 .aside {
		display: block;
		max-width: 440px;
		font: 400 20px/1.5 var(--font-body);
		color: var(--ink-soft);
		text-wrap: pretty;
	}

	.s4 .gauge-v {
		display: none;
	}

	.s4 .gauge-h {
		display: block;
		height: 14px;
		border-radius: 999px;
		background: var(--fire-gradient);
	}

	.heat {
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		gap: 12px;
	}

	.heat > span {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 32px 8px 24px;
		border-radius: 22px;
		text-align: center;
	}

	.heat svg {
		width: 56px;
		height: 56px;
	}

	.heat i {
		font-size: 12.5px;
		line-height: 1.3;
	}

	/* S5 */
	.s5 {
		padding: 0;
	}

	.s5 > .inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 520px;
		align-items: center;
		gap: 96px;
	}

	.s5 .deco-word {
		left: auto;
		right: -40px;
		bottom: -120px;
		font-size: 560px;
		opacity: .07;
	}

	.s5 .txt {
		gap: 18px;
		padding: 0;
	}

	.s5 p {
		display: block;
	}

	/* Emby s'aligne sur la LIGNE VEDETTE, pas sur le bas du plateau : `display:contents`
	   fait remonter la carte et la liste dans cette grille, ce qu'un seul élément
	   « plateau » ne permettrait pas. */
	.s5 .board-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 84px;
		grid-template-areas: "feat emby" "rows .";
		align-items: end;
		gap: 12px 14px;
		padding: 0;
	}

	.s5 .board {
		display: contents;
	}

	.s5 .feat {
		grid-area: feat;
	}

	.s5 .rows {
		grid-area: rows;
	}

	/* Sur l'artboard desktop, Emby est dans le plateau (76 px) et non en haut de
	   la scène : même élément, autre place. */
	.s5 .emby-slot {
		--s: 76px;
		position: static;
		grid-area: emby;
		align-self: end;
	}

	/* S6 */
	.s6 .deco-glow {
		left: -120px;
		top: -160px;
		width: 620px;
		height: 620px;
	}

	.s6 .txt {
		gap: 40px;
	}

	.s6 .txt > div {
		gap: 12px;
	}

	.s6 .emby-slot {
		--s: 150px;
		width: 200px;
	}

	.reasons {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}

	.reason {
		gap: 16px;
		padding: 30px 26px 34px;
		border-radius: 24px;
	}

	.reason svg {
		width: 44px;
		height: 44px;
	}

	.reason b {
		font-size: 24px;
		line-height: 1.1;
	}

	.reason span {
		font: 400 17px/1.5 var(--font-body);
	}

	.s6 .closing {
		font-size: 19px;
	}

	/* S7 */
	.s7 .deco-word {
		left: -40px;
		bottom: -140px;
		font-size: 560px;
	}

	.s7 .txt {
		gap: 12px;
	}

	.modes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.mode {
		gap: 22px;
		padding: 40px;
		border-radius: 28px;
	}

	.mode-faces {
		gap: 14px;
	}

	.mode-faces svg.av {
		width: 84px;
		height: 84px;
	}

	.mode-faces .vs {
		padding: 8px 14px;
		font-size: 14px;
	}

	.mode-faces .more {
		width: 84px;
		height: 84px;
		font-size: 17px;
	}

	.mode-faces .heart {
		width: 44px;
		height: 44px;
	}

	.mode-faces .heart svg {
		width: 25px;
		height: 25px;
	}

	.mode-faces .shared {
		margin-left: 10px;
		height: 12px;
	}

	.mode b {
		font-size: 30px;
		line-height: 1.1;
	}

	.mode p {
		font: 400 18px/1.5 var(--font-body);
	}

	/* S8 */
	.s8 > .inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 900px;
		padding: 68px 40px 32px;
	}

	.s8 .pitch {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		justify-content: center;
		gap: 70px;
		text-align: left;
	}

	.s8 h2 {
		font-size: 64px;
		line-height: 1;
		letter-spacing: -.03em;
	}

	.s8 .pitch-txt {
		align-items: flex-start;
		gap: 22px;
	}

	.s8 .pitch p {
		max-width: 560px;
		font: 400 21px/1.5 var(--font-body);
	}

	.s8 .act {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
		max-width: none;
	}

	.s8 .stores {
		display: flex;
		gap: 12px;
	}

	.s8 .cta {
		height: 64px;
		padding: 0 40px;
		font-size: 21px;
	}

	.s8 .store {
		height: 64px;
		padding: 0 22px;
		border-radius: 18px;
	}

	.typing-scene {
		--s: 230px;
		gap: 40px;
	}

	.phone {
		width: 96px;
		height: 166px;
	}

	.foot {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding-top: 26px;
	}

	/* La frame desktop met le copyright à gauche et les liens à droite ; en mobile
	   les liens passent au-dessus. Un seul DOM, un `order` qui bascule. */
	.foot nav {
		order: 2;
		gap: 22px;
	}
}

/* ── Mouvement réduit : plus une seule animation, ni parallaxe ───────────── */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.scene {
		--deco: 0px;
		--emby: 0px;
		--flow: 0px;
		--txt: 0px;
		--fade: 1;
	}

}

/* ══ Pages de texte (mentions légales, confidentialité) et 404 ═════════════ */
.doc-page {
	background: var(--bg);
}

.doc {
	max-width: 68ch;
	margin: 0 auto;
	padding: 92px 20px 40px;
}

.doc h1 {
	font: 600 34px/1.1 var(--font-display);
	letter-spacing: -.02em;
}

.doc h2 {
	margin: 34px 0 0;
	font: 600 21px/1.25 var(--font-display);
	color: var(--ember-ink);
}

.doc p,
.doc li {
	margin: 14px 0 0;
	font: var(--text-body);
	color: var(--ink-soft);
	text-wrap: pretty;
}

.doc strong {
	color: var(--ink);
}

.doc .doc-date {
	color: var(--ink-faint);
}

.doc ul {
	margin: 0;
	padding-left: 22px;
}

.doc a {
	color: var(--ember);
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	text-underline-offset: 2px;
}

.doc a:hover {
	color: var(--ember-hot);
}

.doc-table {
	margin-top: 18px;
	overflow-x: auto;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: var(--surface);
}

.doc-table table {
	width: 100%;
	border-collapse: collapse;
}

.doc-table th,
.doc-table td {
	padding: 11px 14px;
	font: var(--text-small);
	color: var(--ink-soft);
	text-align: left;
	vertical-align: top;
}

.doc-table th {
	font: 700 12px/1.3 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ember-ink);
	background: var(--surface-warm);
}

.doc-table tbody tr + tr th,
.doc-table tbody tr + tr td {
	border-top: 1px solid var(--line);
}

.doc-back {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.doc-foot {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 68ch;
	margin: 0 auto;
	padding: 0 20px 34px;
}

.doc-foot nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.doc-foot a {
	font: var(--text-small);
	color: var(--ink-soft);
}

.doc-foot a:hover {
	color: var(--ember);
}

.doc-foot .legal {
	font: var(--text-small);
	color: var(--ink-faint);
}

/* La page d'erreur : une scène claire, sans parallaxe ni plateau. */
.gone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 100svh;
	padding: 80px 24px 40px;
	text-align: center;
}

.gone h1 {
	font: 600 40px/1.05 var(--font-display);
	letter-spacing: -.02em;
	text-wrap: balance;
}

.gone p {
	max-width: 34ch;
	font: 400 17px/1.45 var(--font-body);
	color: var(--ink-soft);
	text-wrap: pretty;
}

.gone .cta {
	width: 100%;
	max-width: 300px;
}

.gone .back {
	font: var(--text-small);
	color: var(--ink-faint);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (min-width: 1100px) {
	.doc {
		padding-top: 116px;
	}

	.doc h1 {
		font-size: 44px;
	}

	.doc h2 {
		margin-top: 42px;
		font-size: 24px;
	}

	.doc p,
	.doc li {
		font: 400 17px/1.6 var(--font-body);
	}

	.doc-foot {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}