/* =========================================================================
   RIMKO — getrimko.com
   Boutique RIMKO et scroll narratif cinématographique.
   Paleta: Noir #0D0D0F · Bronze #B08D57 · Ivoire #F7F5F1 · Pierre #6B6B70 · Blanc #FFFFFF
   Tipografía: Manrope (títulos) + Inter (texto). Idioma: francés.
   ========================================================================= */

:root {
	--noir:   #0D0D0F;
	--bronze: #B08D57;
	--bronze-clair: #c9a97a;
	--ivoire: #F7F5F1;
	--pierre: #6B6B70;
	--blanc:  #FFFFFF;

	/* Bronce algo más profundo, solo para texto pequeño sobre fondo marfil/blanco:
	   el bronce puro sobre #F7F5F1 se queda en ~2.7:1 y no se lee bien. */
	--bronze-fonce: #8A6A3B;

	--font-titre: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--max: 1240px;
}

/* ---- Reset ligero sobre Astra, solo dentro del lienzo RIMKO ---- */
.rimko {
	margin: 0;
	background: var(--noir);
	color: var(--ivoire);
	font-family: var(--font-texte);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.rimko *,
.rimko *::before,
.rimko *::after { box-sizing: border-box; }

.rimko img { display: block; max-width: 100%; }

.rimko-skip {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	transform: translateY(-180%);
	background: var(--ivoire);
	color: var(--noir);
	padding: 0.72rem 1rem;
	border-radius: 2px;
	font-weight: 600;
	text-decoration: none;
}
.rimko-skip:focus { transform: translateY(0); }

/* =========================================================================
   En-tête boutique et identité RIMKO
   ========================================================================= */
.store-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 76px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	padding: 0 clamp(1.25rem, 4vw, 4rem);
	background: linear-gradient(to bottom, rgba(5,5,6,.94), rgba(5,5,6,.72));
	border-bottom: 1px solid rgba(176,141,87,.22);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.store-header--solid { background: rgba(5,5,6,.98); }
.store-brand {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	color: var(--ivoire) !important;
	text-decoration: none !important;
}
.store-brand__mark {
	display: block;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border: 1px solid rgba(176,141,87,.28);
	background: #050506;
}
.store-brand__mark img { height: 80px; width: auto; max-width: none; transform: translate(-10px, -15px); }
.store-brand__name {
	font-family: var(--font-titre);
	font-size: .95rem;
	font-weight: 800;
	letter-spacing: .4em;
}
.store-nav { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.8rem); }
.store-nav a {
	position: relative;
	color: rgba(247,245,241,.76) !important;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-decoration: none !important;
}
.store-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -.5rem;
	height: 1px;
	background: var(--bronze);
	transition: right .3s var(--ease);
}
.store-nav a:hover::after { right: 0; }
.store-header__cta {
	justify-self: end;
	padding: .72rem 1.2rem;
	border: 1px solid var(--bronze);
	color: var(--ivoire) !important;
	font: 700 .76rem/1 var(--font-titre);
	letter-spacing: .1em;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background .3s var(--ease), color .3s var(--ease);
}
.store-header__cta:hover { background: var(--bronze); color: var(--noir) !important; }
.store-header__cta--quiet { border-color: rgba(247,245,241,.25); }

/* Ocultamos la cabecera/pie por defecto de Astra: la home es un lienzo propio.
   (Se aplica solo cuando el body lleva la clase rimko-home.) */
.rimko-home .site-header,
.rimko-home #masthead,
.rimko-home .ast-above-header,
.rimko-home .ast-below-header,
.rimko-home footer.site-footer,
.rimko-home #colophon,
.rimko-product-page .site-header,
.rimko-product-page #masthead,
.rimko-product-page .ast-above-header,
.rimko-product-page .ast-below-header,
.rimko-product-page footer.site-footer,
.rimko-product-page #colophon { display: none !important; }
.rimko-home #page,
.rimko-home .site-content,
.rimko-home #content,
.rimko-product-page #page,
.rimko-product-page .site-content,
.rimko-product-page #content { padding: 0 !important; margin: 0 !important; }

/* =========================================================================
   Tipografía base y utilidades
   ========================================================================= */
.rimko h1, .rimko h2, .rimko h3 {
	font-family: var(--font-titre);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}

.slogan {
	font-family: var(--font-titre);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--ivoire) !important; /* PATCH: Astra pisaba el color del h1/h2 con su propio oscuro */
}
.slogan em { font-style: normal; color: var(--bronze-clair) !important; }

.kicker {
	font-family: var(--font-texte);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--bronze) !important;
	margin: 0 0 1.1rem;
}

.mesure { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Animación de scroll (obligatoria en todos los bloques)
   ========================================================================= */
.reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
	will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Contenedor de imagen con parallax sutil */
.parallax {
	position: absolute;
	inset: -12% 0 -12% 0;
	overflow: hidden;
}
.parallax img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}
.parallax picture { display: block; width: 100%; height: 100%; }
.parallax picture img { width: 100%; height: 100%; }

/* =========================================================================
   Bloques — estructura general
   ========================================================================= */
.bloc {
	position: relative;
	width: 100%;
}

/* Gradiente reutilizable para legibilidad del texto sobre foto */
.voile-bas::after,
.voile-haut::after,
.voile-gauche::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.voile-bas::after   { background: linear-gradient(to top, rgba(8,8,10,0.86) 0%, rgba(8,8,10,0.32) 42%, rgba(8,8,10,0) 72%); }
.voile-haut::after  { background: linear-gradient(to bottom, rgba(8,8,10,0.80) 0%, rgba(8,8,10,0.20) 46%, rgba(8,8,10,0) 78%); }
.voile-gauche::after{ background: linear-gradient(to right, rgba(8,8,10,0.88) 0%, rgba(8,8,10,0.30) 48%, rgba(8,8,10,0) 82%); }

.bloc__contenu {
	position: relative;
	z-index: 2;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 clamp(1.4rem, 5vw, 4rem);
	width: 100%;
}

/* --- Full-bleed (foto a pantalla, texto encima) --- */
.bloc--plein {
	min-height: 100svh;
	display: flex;
	overflow: hidden;
}
.bloc--plein .bloc__contenu {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 12vh;
	padding-bottom: clamp(3rem, 9vh, 7rem);
}
.bloc--plein.pos-haut .bloc__contenu { justify-content: flex-start; padding-top: clamp(5rem,16vh,9rem); }
.bloc--plein.pos-centre .bloc__contenu { justify-content: center; }
.align-droite { text-align: right; margin-left: auto; }
.align-centre { text-align: center; margin: 0 auto; }

.bloc--plein .slogan { font-size: clamp(2rem, 5.6vw, 4.6rem); max-width: 15ch; }
.bloc--plein.pos-centre .slogan { max-width: 20ch; }

/* --- Split (foto a un lado, panel de texto al otro) --- */
.bloc--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 92svh;
}
.bloc--split .media { position: relative; overflow: hidden; min-height: 60svh; }
.bloc--split .media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.bloc--split .panneau {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.4rem, 6vw, 6rem);
}
.bloc--split.inverse { direction: rtl; }
.bloc--split.inverse > * { direction: ltr; }

.panneau--ivoire { background: var(--ivoire); color: var(--noir); }
.panneau--ivoire .slogan { color: var(--noir) !important; } /* PATCH: fondo claro, texto oscuro a proposito */
.panneau--ivoire .kicker { color: var(--bronze) !important; }
.panneau--noir { background: #0a0a0c; }

.bloc--split .slogan { font-size: clamp(1.8rem, 3.4vw, 3.2rem); max-width: 16ch; }

/* --- Texto pleno (sin foto de fondo, tipografía protagonista) --- */
.bloc--texte {
	min-height: 78svh;
	display: flex;
	align-items: center;
	background: var(--noir);
}
.bloc--texte.fond-ivoire { background: var(--ivoire); color: var(--noir); }
.bloc--texte.fond-ivoire .slogan { color: var(--noir) !important; } /* PATCH */
.bloc--texte .slogan { font-size: clamp(2.2rem, 5vw, 4.4rem); max-width: 18ch; }

/* Cifras destacadas (bloque 3) */
.chiffres { display: flex; gap: clamp(2rem, 6vw, 5rem); margin-top: 2.4rem; flex-wrap: wrap; }
.chiffre .val { font-family: var(--font-titre); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; color: var(--bronze); }
.chiffre .lib { display: block; margin-top: 0.5rem; font-size: 0.86rem; letter-spacing: 0.04em; color: var(--pierre); }
.panneau--ivoire .chiffre .lib { color: var(--pierre); }

/* Contraste honestidad (bloque 11) */
.contraste { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,4vw,3rem); margin-top: 2.6rem; }
.contraste .carte { padding: 1.6rem 1.8rem; border-radius: 2px; }
/* Fondos sólidos y opacos: detrás hay una macro muy clara y las tarjetas casi
   transparentes se perdían. Se conserva el acento lateral en bronce/pierre. */
.contraste .oui { background: rgba(20,16,10,0.86); border-left: 2px solid var(--bronze); }
.contraste .non { background: rgba(16,16,18,0.86); border-left: 2px solid var(--pierre); }
.contraste .titre { font-family: var(--font-titre); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; }
.contraste .oui .titre { color: var(--bronze-clair); }
.contraste .non .titre { color: #a9a9b0; }
.contraste p { margin: 0; color: rgba(247,245,241,0.9); font-size: 0.98rem; }

/* Panel de legibilidad para bloques con foto de fondo muy clara.
   Garantiza contraste del texto sin oscurecer la imagen entera. */
.panneau-lisible {
	background: rgba(8,8,10,0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-left: 2px solid rgba(176,141,87,0.55);
	padding: clamp(1.5rem,3.4vw,2.4rem) clamp(1.4rem,3vw,2.4rem);
	border-radius: 2px;
	max-width: 62ch;
}
.panneau-lisible .kicker { color: var(--bronze-clair) !important; }
/* En el bloque claro reforzamos además el degradado general */
.bloc--clair.voile-bas::after {
	background: linear-gradient(to top, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.55) 45%, rgba(8,8,10,0.18) 78%);
}

/* Realce de texto sobre zonas brillantes puntuales (sombra suave, sin caja) */
.fond-texte { text-shadow: 0 2px 18px rgba(0,0,0,0.72), 0 1px 4px rgba(0,0,0,0.6); }

/* Kicker anclado arriba del bloque, separado de la imagen (bloque "Voix") */
.bloc__kicker-haut {
	position: absolute; z-index: 3;
	top: clamp(1.6rem,5vh,3rem); left: 0; width: 100%;
	text-align: center; margin: 0;
	color: var(--bronze) !important;
	text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}
/* Le nouveau visuel garde le robot et ses ondes au centre. */
.bloc--voix .parallax img { object-position: center; }
.voice-notice {
	position: absolute;
	z-index: 4;
	top: 24%;
	right: clamp(1.4rem, 6vw, 6rem);
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .9rem 1.05rem;
	max-width: 310px;
	background: rgba(8,8,10,.76);
	border: 1px solid rgba(176,141,87,.48);
	box-shadow: 0 18px 50px rgba(0,0,0,.28);
	backdrop-filter: blur(10px);
	color: rgba(247,245,241,.88);
	font-size: .78rem;
	line-height: 1.45;
}
.voice-notice__icon { color: var(--bronze-clair); font: 700 1.05rem/1 var(--font-titre); white-space: nowrap; }

/* Contrôle : la photographie reste entière afin que le téléphone et la
   télécommande soient toujours visibles, y compris sur un écran étroit. */
.control-stage {
	min-height: 92svh;
	display: grid;
	grid-template-columns: minmax(280px, .72fr) minmax(0, 1.35fr);
	align-items: center;
	gap: clamp(2.2rem, 6vw, 6rem);
	padding: clamp(5rem, 10vh, 8rem) max(1.4rem, calc((100vw - var(--max)) / 2));
	background: linear-gradient(125deg, #080809 0%, #111012 100%);
}
.control-stage__copy { max-width: 430px; }
.control-stage__copy .slogan { color: var(--ivoire) !important; font-size: clamp(2rem, 4vw, 3.8rem); }
.control-stage__visual {
	margin: 0;
	position: relative;
	border: 1px solid rgba(176,141,87,.28);
	background: #080708;
	overflow: hidden;
}
.control-stage__visual::before {
	content: "";
	position: absolute;
	inset: 1rem -1rem -1rem 1rem;
	border: 1px solid rgba(176,141,87,.16);
	pointer-events: none;
}
.control-stage__visual img { width: 100%; height: auto; object-fit: contain; }

/* Sous-texte discreto bajo un slogan */
.sous-texte { margin-top: 1.4rem; max-width: 46ch; color: rgba(247,245,241,0.74); font-size: clamp(0.98rem,1.4vw,1.12rem); }
.panneau--ivoire .sous-texte, .fond-ivoire .sous-texte { color: rgba(13,13,15,0.7); }

/* =========================================================================
   Compositions éditoriales pour les images verticales
   Ces blocs montrent l'image entière au lieu de la forcer dans un cadre
   horizontal. Chaque composition a son propre rythme et sa propre grille.
   ========================================================================= */
.portrait-stage {
	min-height: 100svh;
	display: grid;
	grid-template-columns: minmax(220px, .78fr) minmax(360px, 1.08fr);
	grid-template-rows: auto 1fr auto;
	column-gap: clamp(2.5rem, 7vw, 7rem);
	align-items: center;
	padding: clamp(4rem, 9vh, 7rem) max(1.4rem, calc((100vw - var(--max)) / 2));
	background:
		linear-gradient(120deg, rgba(176,141,87,.09), transparent 38%),
		#09090b;
	overflow: hidden;
}
.portrait-stage::before {
	content: "";
	position: absolute;
	inset: 8% 8% auto auto;
	width: 36vw;
	height: 36vw;
	border: 1px solid rgba(176,141,87,.16);
	border-radius: 50%;
	pointer-events: none;
}
.portrait-stage__repere {
	grid-column: 1;
	align-self: start;
	font-family: var(--font-titre);
	font-size: clamp(2.8rem, 7vw, 6rem);
	font-weight: 800;
	line-height: 1;
	color: rgba(247,245,241,.1);
}
.portrait-stage__repere span {
	display: block;
	margin-top: .45rem;
	font: 500 .68rem/1 var(--font-texte);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--bronze);
}
.portrait-stage__copie { grid-column: 1; grid-row: 2; position: relative; z-index: 2; }
.portrait-stage__copie .slogan { font-size: clamp(2rem, 4.4vw, 4rem); max-width: 12ch; }
.portrait-stage__visuel {
	grid-column: 2;
	grid-row: 1 / 4;
	justify-self: center;
	position: relative;
	z-index: 1;
	width: min(100%, 590px);
	height: min(84svh, 820px);
	margin: 0;
	filter: drop-shadow(0 30px 80px rgba(0,0,0,.52));
}
.portrait-stage__visuel::after {
	content: "";
	position: absolute;
	inset: 1rem -1rem -1rem 1rem;
	border: 1px solid rgba(176,141,87,.4);
	z-index: -1;
}
.portrait-stage__visuel img { width: 100%; height: 100%; object-fit: contain; }
.portrait-stage__note {
	grid-column: 1;
	align-self: end;
	margin: 0;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(176,141,87,.32);
	color: rgba(247,245,241,.58);
	font-size: .76rem;
	letter-spacing: .08em;
}

.macro-stage {
	min-height: 96svh;
	display: grid;
	grid-template-columns: minmax(320px, 1.15fr) minmax(280px, .85fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 6rem);
	padding: clamp(3.5rem, 8vh, 6rem) max(1.4rem, calc((100vw - var(--max)) / 2));
	background: var(--ivoire);
	color: var(--noir);
}
.macro-stage__visuel {
	height: min(82svh, 790px);
	position: relative;
	margin-left: clamp(-4rem, -4vw, -1rem);
	overflow: hidden;
	box-shadow: 0 28px 80px rgba(20,16,10,.16);
}
.macro-stage__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.4s var(--ease); }
.macro-stage__visuel.is-in img { transform: scale(1.025); }
.macro-stage__copie { padding: clamp(1rem, 3vw, 2.5rem) 0; }
.macro-stage__copie .slogan { color: var(--noir) !important; font-size: clamp(2.2rem, 4.5vw, 4.2rem); max-width: 11ch; }
.macro-stage__copie .kicker { color: var(--bronze-fonce) !important; }
.macro-stage__copie .sous-texte { color: rgba(13,13,15,.7); }

.material-stage {
	min-height: 95svh;
	display: grid;
	place-items: center;
	padding: clamp(4rem, 10vh, 8rem) clamp(1.4rem, 5vw, 4rem);
	background: #111114;
	overflow: hidden;
}
.material-stage__visuel {
	grid-area: 1 / 1;
	width: min(1050px, 88vw);
	aspect-ratio: 5 / 4;
	margin: 0 0 0 auto;
	overflow: hidden;
}
.material-stage__visuel img { width: 100%; height: 100%; object-fit: cover; }
.material-stage__copie {
	grid-area: 1 / 1;
	justify-self: start;
	align-self: end;
	position: relative;
	z-index: 2;
	width: min(530px, 54vw);
	margin: 0 0 clamp(-2rem, -2vw, -.5rem) max(0px, calc((100vw - var(--max)) / 2));
	padding: clamp(2rem, 4.5vw, 4rem);
	background: var(--ivoire);
	box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
.material-stage__copie .slogan { color: var(--noir) !important; font-size: clamp(1.9rem, 3.7vw, 3.35rem); }
.material-stage__copie .kicker { color: var(--bronze-fonce) !important; }
.material-stage__copie .sous-texte { color: rgba(13,13,15,.7); }

.honesty-stage {
	padding: clamp(4.5rem, 11vh, 8rem) clamp(1.4rem, 5vw, 4rem);
	background: var(--noir);
}
.honesty-stage__intro { max-width: var(--max); margin: 0 auto clamp(2.8rem, 7vh, 5rem); }
.honesty-stage__intro .slogan { font-size: clamp(2.2rem, 5.5vw, 5rem); max-width: 17ch; }
.honesty-stage__grille {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(210px, .75fr) minmax(300px, 1fr) minmax(210px, .75fr);
	align-items: center;
	gap: clamp(1.2rem, 3vw, 2.6rem);
}
.honesty-stage__visuel {
	margin: 0;
	height: min(76svh, 760px);
	border: 1px solid rgba(176,141,87,.3);
	background: #070708;
	overflow: hidden;
}
.honesty-stage__visuel img { width: 100%; height: 100%; object-fit: contain; }
.honesty-card { padding: clamp(1.4rem, 3vw, 2.2rem); border-top: 1px solid; }
.honesty-card--oui { border-color: var(--bronze); }
.honesty-card--non { border-color: rgba(247,245,241,.3); }
.honesty-card__index { font: 700 .68rem/1 var(--font-titre); letter-spacing: .22em; color: var(--bronze); }
.honesty-card h3 { margin: 1.2rem 0 .75rem; color: var(--ivoire) !important; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.honesty-card p { margin: 0; color: rgba(247,245,241,.68); font-size: .94rem; line-height: 1.7; }

/* =========================================================================
   Hero (bloque 1)
   ========================================================================= */
/* El hero NO usa parallax de scroll: su contenedor se ancla exactamente al
   viewport (inset:0) para que el primer frame visible sea SIEMPRE la
   composición completa, sin depender de cuándo arranca el JS ni de la altura
   del viewport. La animación la aporta un ken-burns lento propio. */
.hero .parallax { inset: 0; }
.hero .parallax img {
	object-position: center;
	transform: none;
	animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
	.hero .parallax img { animation: none; }
}

.hero .slogan { font-size: clamp(2.4rem, 7vw, 5.6rem); max-width: 13ch; }
.hero::after {
	background: linear-gradient(90deg, rgba(5,5,6,.9) 0%, rgba(5,5,6,.6) 40%, rgba(5,5,6,.08) 72%),
		linear-gradient(0deg, rgba(5,5,6,.78) 0%, transparent 45%);
}
.hero .hero__contenu {
	justify-content: center;
	align-items: flex-start;
	padding-top: 132px;
	padding-bottom: 5rem;
}
.hero__eyebrow {
	margin: 0 0 1rem;
	color: var(--bronze-clair);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
}
.hero__lead {
	max-width: 52ch;
	margin: 1.4rem 0 0;
	color: rgba(247,245,241,.82);
	font-size: clamp(1rem, 1.6vw, 1.16rem);
}
.hero__commerce {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: 2rem;
}
.hero__prix {
	min-width: 140px;
	font: 800 clamp(1.7rem, 3.2vw, 2.5rem)/1 var(--font-titre);
	color: var(--ivoire);
}
.hero__prix > span:first-child {
	display: block;
	margin-bottom: .45rem;
	font: 600 .62rem/1 var(--font-texte);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--bronze);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__contenu > .hero__actions { margin-top: 1.8rem; }
.store-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85rem 1.25rem;
	border: 1px solid transparent;
	font: 700 .78rem/1.2 var(--font-titre);
	letter-spacing: .04em;
	text-align: center;
	text-decoration: none !important;
	transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.store-button:hover { transform: translateY(-2px); }
.store-button--primary { background: var(--bronze); color: #17130c !important; }
.store-button--primary:hover { background: var(--bronze-clair); }
.store-button--ghost { border-color: rgba(247,245,241,.36); color: var(--ivoire) !important; background: rgba(5,5,6,.18); }
.store-button--ghost-light { border-color: rgba(247,245,241,.32); color: var(--ivoire) !important; }
.hero__reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	margin-top: 1.55rem;
	color: rgba(247,245,241,.64);
	font-size: .75rem;
}
.hero__reassurance span::before { content: "✓"; margin-right: .45rem; color: var(--bronze); }
.product-intro { align-items: flex-start; }
.product-intro__achat {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin-top: 1.8rem;
	padding: 1rem 1.1rem;
	background: rgba(5,5,6,.66);
	border-left: 2px solid var(--bronze);
	backdrop-filter: blur(8px);
}
.product-intro__achat > div { display: flex; flex-direction: column; min-width: 120px; }
.product-intro__label { color: var(--bronze-clair); font-size: .63rem; letter-spacing: .17em; text-transform: uppercase; }
.product-intro__achat strong { color: var(--ivoire); font: 800 1.6rem/1.2 var(--font-titre); }
.hero .marque {
	position: absolute; top: clamp(1.6rem,4vh,2.6rem); left: 0; width: 100%;
	z-index: 3; text-align: center;
	font-family: var(--font-titre); font-weight: 800; letter-spacing: 0.5em;
	font-size: 0.92rem; color: var(--ivoire); text-indent: 0.5em;
}
.defilement {
	position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
	z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
	color: rgba(247,245,241,0.7); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
}
.defilement .ligne { width: 1px; height: 42px; background: linear-gradient(var(--bronze), transparent); animation: descend 2.2s var(--ease) infinite; }
@keyframes descend { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* =========================================================================
   Componente — Slider de 5 modos (posición 12)
   Fotografía real de fondo, crossfade, barra de progreso segmentada en bronce.
   ========================================================================= */
/* Sección contenedora: el escenario del slider conserva la proporción 16/10
   del HTML de referencia. Así ninguna de las 5 fotos se recorta hasta perder
   el robot o el trazo de luz — que es lo que pasaba al forzar 100svh en móvil. */
.modes {
	position: relative;
	background: var(--noir);
	padding: clamp(3rem,9vh,6rem) clamp(1.4rem,5vw,4rem) clamp(3.4rem,10vh,6rem);
}
.modes__intro {
	max-width: var(--max); margin: 0 auto clamp(1.8rem,4vh,2.8rem);
	text-align: center;
}
.modes__intro .slogan { font-size: clamp(1.5rem, 3.4vw, 2.6rem); color: var(--ivoire) !important; max-width: 22ch; margin: 0 auto; }

.modes__scene {
	position: relative;
	width: 100%;
	max-width: 1100px;
	aspect-ratio: 16 / 10;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 2px;
	/* el gesto de swipe es horizontal: dejamos el scroll vertical al navegador */
	touch-action: pan-y;
}
.mode-slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 1.1s cubic-bezier(.4,0,.2,1);
}
.mode-slide.actif { opacity: 1; }
.mode-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Scrim del original: oscurece solo la parte baja, no toda la imagen. */
.mode-slide::after {
	content:""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 32%, rgba(0,0,0,0) 60%);
}

.mode-slide__legende {
	position: absolute; z-index: 3;
	left: 48px; bottom: 56px;
	color: var(--ivoire); max-width: 440px;
}
.mode-slide__num {
	font-family: var(--font-titre); font-weight: 700; font-size: 11px;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px;
}
.mode-slide__titre {
	font-family: var(--font-titre); font-weight: 800;
	font-size: clamp(26px,3.4vw,40px); margin: 0 0 10px; letter-spacing: -0.01em; color: var(--ivoire);
}
.mode-slide__desc { font-size: 14.5px; line-height: 1.5; color: rgba(247,245,241,0.82); max-width: 360px; }

/* Barra de progreso segmentada, fina, en bronce (como la referencia) */
.modes__progres {
	position: absolute; z-index: 5;
	left: 48px; right: 48px; bottom: 26px;
	display: flex; gap: 6px;
}
.seg {
	position: relative; flex: 1; height: 1.5px;
	background: rgba(247,245,241,0.28);
	cursor: pointer; border: none; padding: 0;
	overflow: visible;
}
.seg__fill {
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 0%;
	background: var(--bronze);
}
.seg.done .seg__fill { width: 100%; animation: none; }
.seg.actif .seg__fill { width: 0%; animation: fillseg 4.5s linear forwards; }
@keyframes fillseg { from { width: 0%; } to { width: 100%; } }
/* Zona táctil cómoda sin engordar la línea visible */
.seg::before { content:""; position:absolute; left:0; right:0; top:-11px; bottom:-11px; }
.seg:hover { background: rgba(247,245,241,0.45); }
.seg:focus-visible { outline: 2px solid var(--bronze); outline-offset: 8px; }

.modes__aide {
	text-align: center; font-size: 12px; color: var(--pierre);
	margin: 14px auto 0; max-width: 1100px;
}

/* =========================================================================
   Componente — Tabla comparativa / certificado técnico (posición 13)
   Fondo marfil, líneas finas de bronce, números que cuentan hacia arriba.
   ========================================================================= */
.certificat {
	background: var(--ivoire);
	color: var(--noir);
	padding: clamp(4rem, 12vh, 8rem) clamp(1.4rem,5vw,4rem);
}
.certificat__inner { max-width: 920px; margin: 0 auto; }
.certificat .kicker {
	font-family: var(--font-titre); font-weight: 600; letter-spacing: 0.14em;
	font-size: 12px; margin-bottom: 18px;
}
.certificat .slogan {
	color: var(--noir) !important;
	font-weight: 800; font-size: clamp(28px,4vw,44px); line-height: 1.15;
	margin: 0 0 14px; max-width: 640px;
}
.certificat__sub {
	font-size: 15px; color: var(--pierre); max-width: 520px;
	margin: 0 0 56px; line-height: 1.6;
}

/* Fiche: tarjeta blanca sobre marfil. SIN rejilla, SIN bordes verticales:
   solo una línea bronce bajo la cabecera y separadores horizontales muy finos. */
.cert {
	border: 1px solid rgba(176,141,87,0.35);
	background: var(--blanc);
	padding: 0;
}
.cert-head {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	padding: 22px 32px;
	border-bottom: 1px solid var(--bronze);
}
.cert-head span {
	font-family: var(--font-titre); font-weight: 600; font-size: 12px;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--pierre);
}
.cert-head .col-rimko { color: var(--noir); font-weight: 800; }

.cert-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	padding: 20px 32px;
	border-bottom: 1px solid rgba(107,107,112,0.15);
	align-items: center;
}
.cert-row:last-of-type { border-bottom: none; }

.cert .label { font-size: 14px; color: var(--noir); }
.cert .val {
	font-family: var(--font-titre); font-weight: 800; font-size: 19px;
	color: var(--noir); font-variant-numeric: tabular-nums;
}
.cert .val--texte { font-size: 15px; }
.cert .unit {
	font-family: var(--font-texte); font-weight: 400; font-size: 13px;
	color: var(--pierre); margin-left: 4px;
}
.cert .other { font-size: 13px; color: #B7B4AE; font-style: italic; }

.cert-foot {
	padding: 18px 32px; font-size: 11px; color: var(--pierre);
	border-top: 1px solid rgba(176,141,87,0.25);
	background: rgba(176,141,87,0.04);
	line-height: 1.6;
}

/* =========================================================================
   Galería de producto (posición 15, bloque 9)
   ========================================================================= */
.galerie {
	background: #0a0a0c;
	padding: clamp(4rem,12vh,8rem) clamp(1.4rem,5vw,4rem);
}
.galerie__inner { max-width: var(--max); margin: 0 auto; }
.galerie__entete { margin-bottom: clamp(2rem,5vh,3.4rem); }
.galerie__entete .slogan { font-size: clamp(1.6rem,3.2vw,2.6rem); max-width: 18ch; }

.galerie__scene {
	position: relative; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden;
	background: #050506; border: 1px solid rgba(176,141,87,0.18);
}
.galerie__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); }
.galerie__scene img.actif { opacity: 1; }
.galerie__scene img.actif { transform: scale(1.012); }

.galerie__vignettes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
.vignette {
	position: relative; aspect-ratio: 4/3; border-radius: 2px; overflow: hidden;
	border: 1px solid transparent; cursor: pointer; padding: 0; background: #050506;
	opacity: 0.55; transition: opacity 0.4s var(--ease), border-color 0.4s var(--ease);
}
.vignette img { width: 100%; height: 100%; object-fit: contain; background: #080809; }
.vignette:hover { opacity: 0.85; }
.vignette.actif { opacity: 1; border-color: var(--bronze); }

/* =========================================================================
   Bloque 10 — Reserva (foto + formulario)
   ========================================================================= */
.reserve { position: relative; overflow: hidden; background: #09090b; }
.reserve__media {
	position: relative;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	border-inline: 1px solid rgba(176,141,87,.18);
	background: #070708;
}
.reserve__media img { width: 100%; height: auto; object-fit: contain; }
.reserve__media::after {
	content:"";
	position: absolute;
	inset: auto 0 0;
	height: 28%;
	background: linear-gradient(to top, #09090b, transparent);
	pointer-events: none;
}

.reserve__inner {
	position: relative; z-index: 2; max-width: var(--max); margin: 0 auto;
	padding: clamp(3.5rem,8vh,6rem) clamp(1.4rem,5vw,4rem) clamp(5rem,10vh,8rem);
	display: grid; grid-template-columns: 1fr minmax(360px, 480px); gap: clamp(2rem,6vw,5rem); align-items: center;
}
.reserve__intro .slogan { font-size: clamp(2rem,4.4vw,3.6rem); max-width: 14ch; margin-bottom: 1.2rem; }
.reserve__intro .sous-texte { max-width: 38ch; }
.reserve__prix {
	display: inline-flex;
	flex-direction: column;
	margin: 1.8rem 0 0;
	padding: .9rem 1.1rem;
	border-left: 1px solid var(--bronze);
	font-family: var(--font-titre);
	font-size: clamp(1.5rem, 3vw, 2.35rem);
	font-weight: 700;
	color: var(--ivoire);
}
.reserve__prix span { margin-bottom: .2rem; font: 500 .64rem/1.2 var(--font-texte); letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); }

.formulaire {
	background: rgba(13,13,15,0.66);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(176,141,87,0.28);
	border-radius: 4px;
	padding: clamp(1.8rem,3vw,2.6rem);
}
.champ { margin-bottom: 1.1rem; }
.champ--piege { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.champ label { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); margin-bottom: 0.5rem; }
.champ input {
	width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(247,245,241,0.16);
	color: var(--ivoire); font-family: var(--font-texte); font-size: 1rem; padding: 0.85rem 1rem; border-radius: 3px;
	transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.champ input::placeholder { color: rgba(247,245,241,0.32); }
.champ input:focus { outline: none; border-color: var(--bronze); background: rgba(255,255,255,0.07); }

.acompte-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0.4rem 0 0.2rem; }
.acompte-opt { position: relative; }
.acompte-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.acompte-opt span {
	display: block; text-align: center; padding: 0.85rem 0.6rem; border-radius: 3px;
	border: 1px solid rgba(247,245,241,0.16); color: rgba(247,245,241,0.8);
	font-size: 0.92rem; cursor: pointer; transition: all 0.3s var(--ease);
}
.acompte-opt input:checked + span { border-color: var(--bronze); background: rgba(176,141,87,0.16); color: var(--ivoire); }
.acompte-opt input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }

.acompte-montant { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease), margin 0.4s var(--ease); margin-top: 0; }
.acompte-montant.ouvert { max-height: 140px; opacity: 1; margin-top: 1.1rem; }
.acompte-aide { font-size: 0.78rem; color: var(--pierre); margin-top: 0.5rem; }

.form-erreur { color: #e0876a; font-size: 0.85rem; margin: 0.4rem 0 0.9rem; min-height: 1em; }

.bouton {
	width: 100%; border: none; cursor: pointer;
	background: var(--bronze); color: #17130c;
	font-family: var(--font-titre); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em;
	padding: 1rem 1.2rem; border-radius: 3px; margin-top: 0.4rem;
	transition: background 0.3s var(--ease), transform 0.2s var(--ease);
}
.bouton:hover { background: var(--bronze-clair); }
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: 0.6; cursor: default; }

.form-note { font-size: 0.76rem; color: var(--pierre); text-align: center; margin-top: 1rem; line-height: 1.5; }

.form-succes {
	display: none; text-align: center; padding: 1rem 0;
}
.form-succes.actif { display: block; }
.form-succes .coche {
	width: 54px; height: 54px; margin: 0 auto 1.2rem; border-radius: 50%;
	border: 1.5px solid var(--bronze); display: grid; place-items: center; color: var(--bronze); font-size: 1.6rem;
}
.form-succes h3 { font-family: var(--font-titre); font-size: 1.3rem; margin-bottom: 0.6rem; color: var(--ivoire) !important; }
.form-succes p { color: rgba(247,245,241,0.78); font-size: 0.98rem; max-width: 30ch; margin: 0 auto; }

/* =========================================================================
   AUDITORÍA DE COLOR DE TEXTO — reglas defensivas
   Fondos claros (marfil/blanco) -> texto oscuro. Fondos oscuros/foto -> ivoire.
   Se declaran al final para ganar por orden de cascada a cualquier estilo de
   Astra o a un parche anterior, y así ningún bloque queda a medias.
   ========================================================================= */

/* ---- Bloques de fondo CLARO: todo el texto en oscuro ---- */
.panneau--ivoire,
.bloc--texte.fond-ivoire,
.certificat {
	color: var(--noir);
}
.panneau--ivoire .slogan,
.panneau--ivoire h1, .panneau--ivoire h2, .panneau--ivoire h3,
.bloc--texte.fond-ivoire .slogan,
.certificat .slogan,
.certificat h2,
.cert .label,
.cert .val,
.cert-head .col-rimko {
	color: var(--noir) !important;
}
/* Kickers y texto pequeño en bronce sobre claro -> bronce profundo (legible) */
.panneau--ivoire .kicker,
.bloc--texte.fond-ivoire .kicker,
.certificat .kicker {
	color: var(--bronze-fonce) !important;
}
/* Cifras destacadas del bloque 3: sobre marfil necesitan el bronce profundo */
.panneau--ivoire .chiffre .val { color: var(--bronze-fonce); }
.panneau--ivoire .chiffre .lib,
.panneau--ivoire .sous-texte,
.bloc--texte.fond-ivoire .sous-texte { color: rgba(13,13,15,0.72); }

/* ---- Bloques de fondo OSCURO o con foto: todo el texto en ivoire ---- */
.bloc--plein .slogan,
.panneau--noir .slogan,
.modes .slogan,
.galerie .slogan,
.reserve .slogan,
.bloc--texte:not(.fond-ivoire) .slogan {
	color: var(--ivoire) !important;
}
.panneau--noir .sous-texte,
.bloc--plein .sous-texte,
.reserve .sous-texte { color: rgba(247,245,241,0.78); }
.panneau--noir .kicker,
.bloc--plein .kicker,
.modes .kicker,
.galerie .kicker,
.reserve .kicker { color: var(--bronze) !important; }

/* =========================================================================
   Accueil de marque RIMKO
   ========================================================================= */
.brand-home { background: var(--noir); color: var(--ivoire); }
.brand-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
	align-items: center;
	gap: clamp(2rem, 7vw, 8rem);
	padding: 110px max(1.4rem, calc((100vw - var(--max)) / 2)) 5rem;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(176,141,87,.08), transparent 34%),
		#070708;
}
.brand-hero::after {
	content: "";
	position: absolute;
	inset: 10% 7% 8% auto;
	width: 1px;
	background: linear-gradient(transparent, rgba(176,141,87,.52), transparent);
}
.brand-hero__halo {
	position: absolute;
	left: -14vw;
	top: 8%;
	width: min(68vw, 850px);
	aspect-ratio: 1;
	border: 1px solid rgba(176,141,87,.14);
	border-radius: 50%;
	box-shadow: inset 0 0 140px rgba(176,141,87,.045), 0 0 120px rgba(176,141,87,.05);
}
.brand-hero__visual {
	position: relative;
	z-index: 2;
	height: clamp(250px, 46vw, 560px);
	margin: 0;
	overflow: hidden;
	border-left: 1px solid rgba(176,141,87,.34);
	box-shadow: 0 32px 90px rgba(0,0,0,.36);
}
.brand-hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.brand-hero__content { position: relative; z-index: 3; max-width: 720px; }
.brand-hero h1,
.brand-manifesto h2,
.brand-product h2,
.brand-future h2,
.brand-contact h2 {
	font-family: var(--font-titre);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -.045em;
	color: var(--ivoire) !important;
}
.brand-hero h1 { margin: 0; font-size: clamp(3.2rem, 7.4vw, 7rem); }
.brand-hero h1 em { color: var(--bronze-clair); font-style: normal; }
.brand-hero__content > p:not(.kicker) { max-width: 54ch; margin: 1.6rem 0 0; color: rgba(247,245,241,.66); font-size: clamp(1rem, 1.5vw, 1.13rem); }
.brand-link {
	display: inline-flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: 2rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid rgba(176,141,87,.58);
	color: var(--ivoire) !important;
	font: 600 .78rem/1 var(--font-titre);
	letter-spacing: .08em;
	text-decoration: none !important;
}
.brand-link span { color: var(--bronze-clair); }
.brand-hero__word {
	position: absolute;
	left: 0;
	bottom: -3vw;
	font: 800 clamp(7rem, 23vw, 24rem)/.7 var(--font-titre);
	letter-spacing: -.08em;
	color: rgba(247,245,241,.022);
	white-space: nowrap;
}

.brand-manifesto {
	position: relative;
	max-width: var(--max);
	min-height: 92svh;
	margin: 0 auto;
	display: grid;
	grid-template-columns: .25fr 1fr 1.08fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	padding: clamp(5rem, 11vh, 9rem) clamp(1.4rem, 5vw, 4rem);
}
.brand-manifesto__index { align-self: start; color: rgba(247,245,241,.14); font: 800 clamp(3rem, 7vw, 6rem)/1 var(--font-titre); }
.brand-manifesto__copy h2 { font-size: clamp(2.7rem, 5vw, 5rem); }
.brand-manifesto__copy > p:last-child { max-width: 50ch; margin: 1.6rem 0 0; color: rgba(247,245,241,.64); }
.brand-values { border-top: 1px solid rgba(176,141,87,.34); }
.brand-values article { display: grid; grid-template-columns: 34px 1fr; column-gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(247,245,241,.1); }
.brand-values article > span { grid-row: 1 / 3; color: var(--bronze); font: 700 .65rem/1.4 var(--font-titre); letter-spacing: .15em; }
.brand-values h3 { color: var(--ivoire) !important; font-size: 1rem; }
.brand-values p { margin: .35rem 0 0; color: rgba(247,245,241,.48); font-size: .86rem; }

.brand-product {
	min-height: 96svh;
	display: grid;
	grid-template-columns: 1.35fr .85fr;
	align-items: stretch;
	background: var(--ivoire);
	color: var(--noir);
}
.brand-product__visual { min-height: 620px; margin: 0; overflow: hidden; }
.brand-product__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.brand-product__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 7rem); }
.brand-product__copy .kicker { color: var(--bronze-fonce) !important; }
.brand-product__copy h2 { color: var(--noir) !important; font-size: clamp(2.7rem, 5vw, 5rem); }
.brand-product__copy > p { max-width: 43ch; margin: 1.5rem 0 0; color: rgba(13,13,15,.66); }
.brand-product__buy { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(13,13,15,.14); }
.brand-product__buy strong { margin-right: auto; color: var(--noir); font: 800 clamp(1.6rem, 2.7vw, 2.3rem)/1 var(--font-titre); }

.brand-future {
	min-height: 78svh;
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	align-items: center;
	gap: clamp(3rem, 8vw, 8rem);
	padding: clamp(5rem, 11vh, 9rem) max(1.4rem, calc((100vw - var(--max)) / 2));
	background: #0b0b0d;
}
.brand-future__line { width: 100%; height: min(52svh, 560px); border: 1px solid rgba(176,141,87,.18); background: linear-gradient(135deg, transparent 49.8%, rgba(176,141,87,.28) 50%, transparent 50.2%); }
.brand-future__content h2 { font-size: clamp(2.8rem, 5.5vw, 5.6rem); }
.brand-future__content > p:last-child { max-width: 48ch; margin: 1.5rem 0 0; color: rgba(247,245,241,.58); }

.brand-contact {
	max-width: var(--max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	gap: clamp(2rem, 7vw, 7rem);
	padding: clamp(5rem, 10vh, 8rem) clamp(1.4rem, 5vw, 4rem);
}
.brand-contact h2 { font-size: clamp(2.7rem, 5vw, 5rem); }
.brand-contact__action { padding-top: 1.5rem; border-top: 1px solid rgba(176,141,87,.36); }
.brand-contact__action p { max-width: 45ch; margin: 0 0 1.5rem; color: rgba(247,245,241,.58); }

/* =========================================================================
   Footer boutique
   ========================================================================= */
.store-footer { background: #070708; border-top: 1px solid rgba(176,141,87,.24); color: rgba(247,245,241,.6); }
.store-footer__inner {
	max-width: var(--max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.45fr repeat(3, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1.4rem, 5vw, 4rem);
}
.store-footer__brand p { max-width: 32ch; margin: 1.2rem 0 0; font-size: .9rem; }
.store-brand--footer .store-brand__mark { width: 40px; height: 40px; }
.store-brand--footer .store-brand__mark img { height: 70px; transform: translate(-9px, -13px); }
.store-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .72rem; }
.store-footer__col h3 { margin-bottom: .3rem; color: var(--ivoire) !important; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.store-footer__col a { color: rgba(247,245,241,.68) !important; text-decoration: none !important; font-size: .84rem; }
.store-footer__col a:hover { color: var(--bronze-clair) !important; }
.store-footer__col span { color: rgba(247,245,241,.46); font-size: .84rem; }
.store-footer__bottom {
	max-width: var(--max);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.2rem clamp(1.4rem, 5vw, 4rem) 1.8rem;
	border-top: 1px solid rgba(247,245,241,.08);
	font-size: .72rem;
	letter-spacing: .04em;
}
.store-footer__bottom a { color: rgba(247,245,241,.65) !important; text-decoration: none !important; margin-left: 1.2rem; }
.store-footer--compact { padding-top: 0; }

/* =========================================================================
   Page de remerciement
   ========================================================================= */
.rimko-thank-you .site-header,
.rimko-thank-you #masthead,
.rimko-thank-you footer.site-footer,
.rimko-thank-you #colophon { display: none !important; }
.thanks-page {
	min-height: calc(100svh - 80px);
	padding: clamp(8rem, 14vh, 11rem) clamp(1.4rem, 5vw, 4rem) 5rem;
	background:
		radial-gradient(circle at 75% 18%, rgba(176,141,87,.14), transparent 32%),
		linear-gradient(135deg, #070708, #111114);
}
.thanks-card { max-width: 1050px; margin: 0 auto; text-align: center; }
.thanks-card__check {
	width: 62px;
	height: 62px;
	margin: 0 auto 1.6rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--bronze);
	border-radius: 50%;
	color: var(--bronze-clair);
	font-size: 1.8rem;
}
.thanks-card .kicker { margin-bottom: 1rem; }
.thanks-card h1 { color: var(--ivoire) !important; font-size: clamp(2.4rem, 6vw, 5rem); }
.thanks-card__lead { max-width: 620px; margin: 1.35rem auto 0; color: rgba(247,245,241,.7); font-size: clamp(1rem, 1.5vw, 1.12rem); }
.thanks-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 3.2rem 0; background: rgba(176,141,87,.24); border: 1px solid rgba(176,141,87,.24); text-align: left; }
.thanks-steps article { padding: clamp(1.4rem, 3vw, 2.2rem); background: #0b0b0d; }
.thanks-steps article > span { color: var(--bronze); font: 700 .7rem/1 var(--font-titre); letter-spacing: .18em; }
.thanks-steps h2 { margin: 1rem 0 .6rem; color: var(--ivoire) !important; font-size: 1rem; }
.thanks-steps p { margin: 0; color: rgba(247,245,241,.58); font-size: .86rem; }
.thanks-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; }
.thanks-assistance { max-width: 700px; margin: 4rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(247,245,241,.12); text-align: center; }
.thanks-assistance span { color: var(--bronze-clair); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.thanks-assistance p { margin: .5rem 0 0; color: rgba(247,245,241,.58); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
	.store-header { grid-template-columns: 1fr auto; }
	.store-nav { display: none; }
	.store-footer__inner { grid-template-columns: repeat(2, 1fr); }
	.thanks-steps { grid-template-columns: 1fr; }
	.control-stage { grid-template-columns: 1fr; min-height: auto; }
	.control-stage__copy { max-width: 580px; }
	.brand-hero { grid-template-columns: minmax(180px, .55fr) 1fr; }
	.brand-manifesto { min-height: auto; grid-template-columns: .2fr 1fr; }
	.brand-values { grid-column: 2; }
	.brand-product { min-height: auto; grid-template-columns: 1fr; }
	.brand-product__visual { min-height: 54svh; }
	.brand-future { min-height: auto; grid-template-columns: 1fr; }
	.brand-future__line { height: 36svh; }
	.brand-contact { grid-template-columns: 1fr; align-items: start; }
	.bloc--split { grid-template-columns: 1fr; }
	.bloc--split .media { min-height: 56svh; order: -1; }
	.bloc--split.inverse { direction: ltr; }
	.contraste { grid-template-columns: 1fr; }
	.reserve__inner { grid-template-columns: 1fr; }
	.galerie__vignettes { grid-template-columns: repeat(5, 1fr); gap: 8px; }
	.acompte-choix { grid-template-columns: 1fr; }

	.portrait-stage {
		grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr);
		column-gap: 2rem;
		padding-inline: clamp(1.4rem, 4vw, 2.4rem);
	}
	.portrait-stage__visuel { height: min(72svh, 700px); }
	.macro-stage { grid-template-columns: 1fr 1fr; padding-inline: clamp(1.4rem, 4vw, 2.4rem); }
	.macro-stage__visuel { margin-left: 0; height: min(70svh, 650px); }
	.material-stage__copie { width: min(560px, 72vw); margin-left: 0; }
	.honesty-stage__grille { grid-template-columns: 1fr 1.2fr; }
	.honesty-stage__visuel { grid-column: 2; grid-row: 1 / 3; height: min(72svh, 690px); }
	.honesty-card { grid-column: 1; }
	.honesty-card--oui { grid-row: 1; }
	.honesty-card--non { grid-row: 2; }

	/* Fiche técnica: 3 columnas más ajustadas, mismo aire que la referencia */
	.cert-head, .cert-row { grid-template-columns: 1.3fr 1fr .8fr; padding: 16px 18px; }
	.cert .val { font-size: 16px; }
	.cert .val--texte { font-size: 13px; }
	.cert-foot { padding: 14px 18px; }

	/* Slider: caption y barra dejan de usar los 48px de escritorio */
	.mode-slide__legende { left: 20px; right: 20px; bottom: 44px; max-width: none; }
	.modes__progres { left: 20px; right: 20px; bottom: 18px; }
}

@media (max-width: 520px) {
	.store-header { height: 66px; padding-inline: 1rem; gap: .7rem; }
	.store-brand { gap: .55rem; }
	.store-brand__mark { width: 38px; height: 38px; }
	.store-brand__mark img { height: 66px; transform: translate(-8px, -12px); }
	.store-brand__name { font-size: .8rem; letter-spacing: .3em; }
	.store-header__cta { padding: .65rem .72rem; font-size: .65rem; }
	.hero .hero__contenu { padding-top: 100px; padding-bottom: 3rem; }
	.hero .slogan { font-size: clamp(2.5rem, 13vw, 4rem); }
	.hero .parallax img { object-position: center; animation: none; }
	.hero__commerce { align-items: stretch; flex-direction: column; gap: 1rem; width: 100%; }
	.hero__actions { width: 100%; }
	.hero__actions .store-button { flex: 1 1 100%; }
	.hero__reassurance { flex-direction: column; gap: .4rem; }
	.product-intro__achat { flex-direction: column; align-items: stretch; width: 100%; }
	.control-stage { padding: 4.5rem 1.4rem; gap: 2rem; }
	.control-stage__visual::before { display: none; }
	.reserve__media { width: 100%; border-inline: 0; }
	.reserve__media::after { height: 18%; }
	.reserve__inner { padding-top: 2.8rem; }
	.brand-hero { min-height: 100svh; display: block; padding: 104px 1.4rem 5rem; }
	.brand-hero::after { display: none; }
	.brand-hero__halo { width: 120vw; left: -55vw; top: 3%; }
	.brand-hero__visual { width: calc(100% + 2.8rem); height: 44svh; margin: 0 0 2.4rem -1.4rem; border-left: 0; box-shadow: none; }
	.brand-hero__visual img { object-position: center; }
	.brand-hero__content { position: relative; }
	.brand-hero h1 { font-size: clamp(3.1rem, 14vw, 4.5rem); }
	.brand-hero__word { bottom: -1rem; font-size: 30vw; }
	.brand-manifesto { grid-template-columns: 1fr; gap: 2rem; padding: 5rem 1.4rem; }
	.brand-manifesto__index,
	.brand-values { grid-column: 1; }
	.brand-product__visual { min-height: 0; aspect-ratio: 16 / 10; }
	.brand-product__copy { padding: 4rem 1.4rem; }
	.brand-product__buy { align-items: stretch; flex-direction: column; }
	.brand-product__buy strong { margin: 0 0 .5rem; }
	.brand-future { padding: 5rem 1.4rem; gap: 2rem; }
	.brand-future__line { height: 42vw; }
	.brand-contact { padding: 5rem 1.4rem; }
	.chiffres { gap: 1.6rem; }

	.portrait-stage {
		min-height: auto;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		gap: 1.6rem;
		padding: 4rem 1.4rem;
	}
	.portrait-stage::before { width: 76vw; height: 76vw; inset: 18% -20% auto auto; }
	.portrait-stage__repere,
	.portrait-stage__copie,
	.portrait-stage__visuel,
	.portrait-stage__note { grid-column: 1; grid-row: auto; }
	.portrait-stage__visuel { width: 100%; height: auto; aspect-ratio: 2 / 3; }
	.portrait-stage__visuel::after { inset: .65rem -.65rem -.65rem .65rem; }
	.portrait-stage__copie .slogan { max-width: 14ch; }

	.macro-stage {
		min-height: auto;
		grid-template-columns: 1fr;
		gap: 2.2rem;
		padding: 4rem 1.4rem;
	}
	.macro-stage__visuel { height: auto; aspect-ratio: 2 / 3; }
	.macro-stage__copie { padding: 0; }

	.material-stage { min-height: auto; display: flex; flex-direction: column; padding: 4rem 1.4rem; }
	.material-stage__visuel { width: 100%; margin: 0; aspect-ratio: 5 / 4; }
	.material-stage__copie { width: calc(100% - 1.2rem); margin: -2.2rem 0 0 auto; padding: 1.6rem; }

	.honesty-stage { padding: 4rem 1.4rem; }
	.honesty-stage__grille { grid-template-columns: 1fr; gap: 1.6rem; }
	.honesty-stage__visuel { grid-column: 1; grid-row: 2; height: auto; aspect-ratio: 2 / 3; }
	.honesty-card { grid-column: 1; }
	.honesty-card--oui { grid-row: 1; }
	.honesty-card--non { grid-row: 3; }

	/* PATCH (conservado): en movil, 100svh + el overscan del parallax recortaba
	   las fotos horizontales casi hasta desaparecer. Bajamos la altura del
	   bloque y el overscan para que el recorte sea razonable.
	   Nota: el hero se excluye — su encuadre debe quedar completo siempre. */
	.bloc--plein { min-height: 72svh; }
	.hero { min-height: 100svh; }
	.parallax { inset: -4% 0 -4% 0; }
	.hero .parallax { inset: 0; }

	/* El slider ya no depende de svh: conserva la proporción 16/10 del
	   HTML de referencia, así ninguna de las 5 fotos pierde el robot. */
	.modes__scene { aspect-ratio: 4 / 5; }
	.mode-slide:nth-child(1) img { object-position: 62% center; }
	.mode-slide:nth-child(2) img { object-position: 64% center; }
	.mode-slide:nth-child(3) img { object-position: 60% center; }
	.mode-slide:nth-child(4) img { object-position: 57% center; }
	.mode-slide:nth-child(5) img { object-position: 52% center; }
	.mode-slide__titre { font-size: 24px; }
	.mode-slide__desc { font-size: 13.5px; max-width: 100%; }
	.mode-slide__legende { bottom: 40px; }

	/* Les nouveaux visuels sont composés autour d'une zone centrale sûre. */
	.bloc--travail .parallax img { object-position: center; }
	.bloc--controle .parallax img { object-position: 68% center; }
	.bloc--voix .parallax img { object-position: center; }
	.bloc--deux-cotes .parallax img { object-position: center; }
	.bloc--garantie .parallax img { object-position: 68% center; }
	.voice-notice { top: 18%; left: 1rem; right: 1rem; max-width: none; }

	/* En móvil el bloque es más bajo y el indicador de scroll se solapaba
	   con el eslogan del hero. */
	.defilement { display: none; }

	.cert-head, .cert-row { padding: 14px 14px; column-gap: 8px; }
	.cert .label { font-size: 12.5px; }
	.cert .val { font-size: 15px; }
	.cert .val--texte { font-size: 12px; }
	.cert .other { font-size: 11.5px; }
	.cert .unit { font-size: 11px; }
	.galerie__scene { aspect-ratio: 4 / 5; }
	.store-footer__inner { grid-template-columns: 1fr; }
	.store-footer__bottom { flex-direction: column; }
	.store-footer__bottom a { margin: 0 1rem 0 0; }
	.thanks-page { padding-top: 7rem; }
}