/*
 * Silo Aménagement (maquette « showroom » validée le 06/10) : héros « pièce par pièce », fond lin, défilement
 * horizontal, bandes de pièces, éventail des rendus, plan qui se meuble, vitrine inclinable. Chargé seulement sur
 * les pages qui utilisent ces dispositions (inc/releve.php). Sans script, tout reste lisible : étapes empilées,
 * plan complet, cartes déjà ouvertes, première bande ouverte.
 */

/* ---------- Fond lin ---------- */
.cp-rl--lin { background: #F6F1EA; }

/* ---------- Héros « pièce par pièce » (bloc secteur-hero) ---------- */
.cp-sx-hero__pieces { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.cp-sx-hp { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 0 100%); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.cp-sx-hp:first-child,
.cp-sx-hp.is-on { clip-path: inset(0 0 0 0); }
.cp-sx-hero.is-live .cp-sx-hp:not(.is-on):not(.is-out) { clip-path: inset(0 0 0 100%); }
.cp-sx-hp.is-out { clip-path: inset(0 100% 0 0); }
.cp-sx-hero .cp-sx-hp .cp-sx-hero__img { z-index: 0; transform: scale(1.1); transition: transform 7s linear; }
.cp-sx-hp.is-on .cp-sx-hero__img { transform: scale(1); }
.cp-sx-hero.is-pieces .cp-sx-hero__in { grid-template-columns: minmax(0, 1fr) 280px; align-items: end; }
.cp-sx-hero.is-pieces .cp-sx-hero__title { font-size: clamp(34px, 3.6vw, 56px); }
.cp-sx-rooms { margin: 0; padding: 0; list-style: none; justify-self: end; width: 100%; }
.cp-sx-rooms li { position: relative; border-top: 1px solid rgba(255, 255, 255, .22); }
.cp-sx-rooms li:nth-last-child(2):not(.cp-sx-rooms__leg),
.cp-sx-rooms li:last-child:not(.cp-sx-rooms__leg) { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.cp-sx-rooms button { all: unset; display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 14px 0; cursor: pointer; color: rgba(255, 255, 255, .55); font-size: 19px; font-weight: 600; line-height: 1.3; transition: color .4s; }
.cp-sx-rooms button small { color: rgba(255, 255, 255, .4); font-size: 13px; letter-spacing: .12em; }
.cp-sx-rooms li.is-on button { color: #fff; }
.cp-sx-rooms li.is-on button small { color: #FF9900; }
.cp-sx-rooms button:focus-visible { outline: 2px solid #FF9900; outline-offset: 4px; }
.cp-sx-rooms i { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: #FF9900; }
.cp-sx-hero.is-live .cp-sx-rooms li.is-on i { animation: cp-sw-fill 6s linear forwards; }
@keyframes cp-sw-fill { to { width: 100%; } }
.cp-sx-rooms__leg { border: 0 !important; padding-top: 18px; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.45; }
.cp-sx-rooms__leg a { color: #fff; text-decoration: underline; text-decoration-color: #FF9900; text-underline-offset: 4px; }
@media (max-width: 1000px) {
	.cp-sx-hero.is-pieces .cp-sx-hero__in { grid-template-columns: minmax(0, 1fr); }
	.cp-sx-rooms { justify-self: start; max-width: 320px; }
}

/* ---------- Défilement horizontal ---------- */
.cp-rl--defile { padding-block: 0; }
.cp-rl--defile > .cp-rl__w { max-width: none; padding: 0; }
/* L'élément collé ne glisse que dans son parent : le conteneur prend toute la hauteur de la section. */
.cp-rl--defile.is-live > .cp-rl__w { height: 100%; }
.cp-rl__dfpin { display: flex; flex-direction: column; }
.cp-rl__dfhead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: end; padding-top: clamp(96px, 11vh, 132px); }
.cp-rl__dfhead .cp-rl__cote { margin-bottom: 0; }
.cp-rl__dfhead .cp-rl__lead { margin: 0; }
.cp-rl__dftrack { display: flex; gap: 40px; align-items: center; padding: 48px clamp(16px, 4vw, 48px); will-change: transform; }
.cp-rl__dfc { flex: none; width: min(62vw, 860px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.cp-rl__dffig { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #F6F1EA; box-shadow: 0 40px 80px -40px rgba(0, 0, 51, .45); }
.cp-rl .cp-rl__dffig img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--a, 1) * .12)); }
.cp-rl .cp-rl__dffig.is-plan img { object-fit: contain; padding: 12px; background: #fff; }
.cp-rl__dffig span { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--n); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cp-rl__dfn { position: relative; display: block; margin-bottom: 18px; color: transparent; font-size: 88px; line-height: .8; font-weight: 700; -webkit-text-stroke: 1.5px #EDE4D8; }
.cp-rl__dfn::after { content: attr(data-n); position: absolute; inset: 0; color: var(--o); -webkit-text-stroke: 0; clip-path: inset(calc((1 - var(--a, 1)) * 100%) 0 0 0); }
.cp-rl__dfbar { display: flex; gap: 10px; padding-bottom: 40px; }
.cp-rl__dfbar span { position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: #E4DDD2; }
.cp-rl__dfbar span::after { content: ""; position: absolute; inset: 0; background: var(--o); transform: scaleX(var(--f, 1)); transform-origin: left; }
.cp-rl--defile.is-live .cp-rl__dfpin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.cp-rl--defile.is-live .cp-rl__dftrack { flex: 1; padding-right: 30vw; }
.cp-rl--defile:not(.is-live) .cp-rl__dftrack { flex-direction: column; }
.cp-rl--defile:not(.is-live) .cp-rl__dfc { width: 100%; max-width: 1320px; }
.cp-rl--defile:not(.is-live) .cp-rl__dfbar { display: none; }
@media (max-width: 1000px) {
	.cp-rl__dfhead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.cp-rl__dftrack { flex-direction: column; transform: none !important; }
	.cp-rl__dfc { width: 100%; grid-template-columns: minmax(0, 1fr); }
	.cp-rl__dfbar { display: none; }
	.cp-rl__dfn { font-size: 56px; }
}

/* ---------- Bandes de pièces ---------- */
.cp-rl__bdhead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: end; }
.cp-rl__bdhead .cp-rl__cote { margin-bottom: 0; }
.cp-rl__bdhead .cp-rl__lead { margin: 0; }
.cp-rl__bdrow { display: flex; gap: 10px; height: clamp(420px, 62vh, 620px); margin-top: 56px; }
.cp-rl__bd { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 8px; cursor: pointer; transition: flex 1s cubic-bezier(.6, 0, .2, 1); outline: none; }
.cp-rl__bd.is-on { flex: 5.2; }
.cp-rl__bd:focus-visible { box-shadow: 0 0 0 2px var(--o); }
.cp-rl .cp-rl__bd img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.15); transition: transform 1.4s cubic-bezier(.6, 0, .2, 1), filter .8s; }
.cp-rl__bd:not(.is-on) img { filter: saturate(.55) brightness(.7); }
.cp-rl .cp-rl__bd.is-on img { transform: scale(1); }
.cp-rl__bd::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 51, .85), rgba(0, 0, 51, 0) 55%); }
.cp-rl__bdlab { position: absolute; z-index: 1; left: 50%; bottom: 24px; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); transition: opacity .4s; }
.cp-rl__bd.is-on .cp-rl__bdlab { opacity: 0; }
.cp-rl__bdtxt { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 30px; opacity: 0; transform: translateY(20px); transition: opacity .5s .35s, transform .6s .35s; }
.cp-rl__bd.is-on .cp-rl__bdtxt { opacity: 1; transform: none; }
.cp-rl .cp-rl__bdtxt .cp-rl__h3 { margin-bottom: 8px; color: #fff; }
.cp-rl .cp-rl__bdtxt p { color: rgba(255, 255, 255, .85); }
@media (max-width: 1000px) {
	.cp-rl__bdhead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.cp-rl__bdrow { flex-direction: column; height: auto; }
	.cp-rl__bd { flex: none; height: 90px; transition: height .8s cubic-bezier(.6, 0, .2, 1); }
	/* La règle d’ordinateur « flex: 5.2 » donnerait une base nulle dans la pile verticale : bande ouverte de 0 px. */
	.cp-rl__bd.is-on { flex: none; height: 440px; }
	.cp-rl__bdlab { left: 24px; bottom: 32px; writing-mode: horizontal-tb; transform: none; }
}

/* ---------- Éventail des rendus ---------- */
.cp-rl--eventail { overflow: clip; }
.cp-rl__evhead { text-align: center; }
.cp-rl__evhead .cp-rl__cote { margin-inline: auto; }
.cp-rl__evstage { position: relative; height: 500px; margin-top: 16px; }
.cp-rl__evc { position: absolute; left: 50%; top: 40px; width: min(320px, 70vw); margin-left: calc(min(320px, 70vw) / -2); padding: 12px 12px 22px; border-radius: 8px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 51, .5); transform: translateX(calc((var(--i) - (var(--cnt) - 1) / 2) * 100%)) rotate(calc((var(--i) - (var(--cnt) - 1) / 2) * 7deg)) translateY(calc(var(--d, 0) * 22px)); transition: transform 1.1s cubic-bezier(.2, .9, .25, 1.15), box-shadow .3s; transition-delay: calc(var(--i) * .06s); }
.cp-rl--eventail.is-live:not(.is-open) .cp-rl__evc { transform: none; }
.cp-rl--eventail.is-open .cp-rl__evc:hover { z-index: 5; box-shadow: 0 50px 90px -30px rgba(0, 0, 51, .6); transform: translateX(calc((var(--i) - (var(--cnt) - 1) / 2) * 100%)) translateY(-26px) scale(1.04); transition-delay: 0s; }
.cp-rl__evc figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #F6F1EA; }
.cp-rl .cp-rl__evc img { width: 100%; height: 100%; object-fit: cover; }
.cp-rl .cp-rl__evc figure.is-plan img { object-fit: contain; background: #fff; }
.cp-rl__evb { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; background: rgba(0, 0, 51, .82); color: #fff; font-size: 14px; font-weight: 700; }
.cp-rl__evb svg { width: 18px; height: 18px; fill: #fff; }
.cp-rl .cp-rl__evc .cp-rl__h3 { margin: 16px 6px 0; font-size: 20px; }
.cp-rl .cp-rl__evc p { margin: 6px 6px 0; font-size: 15px; line-height: 1.5; }
@media (max-width: 1000px) {
	.cp-rl__evstage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; height: auto; margin-top: 40px; }
	.cp-rl__evc { position: static; width: auto; margin: 0; transform: none !important; }
}
@media (max-width: 600px) {
	.cp-rl__evstage { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Plan qui se meuble ---------- */
.cp-rl__mbgrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cp-rl__mbs { min-height: 44vh; padding: 34px 0 34px 28px; border-left: 2px solid #E4DDD2; transition: border-color .5s; }
.cp-rl__mbs.is-on,
.cp-rl:not(.is-live) .cp-rl__mbs { border-left-color: var(--o); }
.cp-rl__mbn { display: block; color: var(--mute); font-size: 14px; font-weight: 700; letter-spacing: .14em; transition: color .4s; }
.cp-rl__mbs.is-on .cp-rl__mbn { color: var(--o); }
.cp-rl .cp-rl__mbs .cp-rl__h3 { margin: 8px 0 10px; transition: opacity .4s; }
.cp-rl--meuble.is-live .cp-rl__mbs:not(.is-on) .cp-rl__h3 { opacity: .45; }
.cp-rl__mbtags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px !important; }
.cp-rl__mbtags span { padding: 6px 12px; border-radius: 999px; background: #F6F1EA; color: var(--n); font-size: 13px; font-weight: 600; line-height: 1.4; }
.cp-rl--lin .cp-rl__mbtags span { background: #fff; }
.cp-rl__mbfig { position: sticky; top: calc(var(--cp-bar-h, 76px) + 32px); padding: 24px; border-radius: 8px; background: #F6F1EA; }
.cp-rl--lin .cp-rl__mbfig { background: #fff; }
.cp-rl__mbfig svg { display: block; width: 100%; height: auto; }
.cp-rl__mbfig figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; color: var(--mute); font-size: 13px; line-height: 1.4; }
.cp-mb-wall { fill: none; stroke: #000033; stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.6, 0, .2, 1); }
.cp-mb-door { fill: none; stroke: #000033; stroke-width: 1.2; opacity: 0; transition: opacity .6s .8s; }
.s1 .cp-mb-wall { stroke-dashoffset: 0; }
.s1 .cp-mb-door { opacity: 1; }
.cp-mb-dim { opacity: 0; transition: opacity .6s; }
.cp-mb-dim path { fill: none; stroke: #FF9900; stroke-width: 1.5; }
.cp-mb-dim text { fill: #B86E00; font: 600 13px "Titillium Web", sans-serif; }
.s2 .cp-mb-dim { opacity: 1; }
.cp-mb-fur { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .4s, transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.cp-mb-fur rect,
.cp-mb-fur circle,
.cp-mb-fur path { fill: #fff; stroke: #000033; stroke-width: 1.4; transition: fill .8s .3s; }
.s3 .cp-mb-fur { opacity: 1; transform: none; }
.s3 .cp-mb-fur:nth-of-type(2) { transition-delay: .08s; }
.s3 .cp-mb-fur:nth-of-type(3) { transition-delay: .16s; }
.s3 .cp-mb-fur:nth-of-type(4) { transition-delay: .24s; }
.s3 .cp-mb-fur:nth-of-type(5) { transition-delay: .32s; }
.s3 .cp-mb-fur:nth-of-type(6) { transition-delay: .4s; }
.s3 .cp-mb-fur:nth-of-type(7) { transition-delay: .48s; }
.cp-mb-floor,
.cp-mb-sun { opacity: 0; transition: opacity 1s; }
.s4 .cp-mb-floor,
.s4 .cp-mb-sun { opacity: 1; }
.s4 .cp-mb-fur rect.c1 { fill: #D9A066; }
.s4 .cp-mb-fur rect.c2 { fill: #9AA9C9; }
.s4 .cp-mb-fur circle.c3 { fill: #E8C9A0; }
.s4 .cp-mb-fur rect.c4 { fill: #C9D6C2; }
@media (max-width: 1000px) {
	.cp-rl__mbgrid { grid-template-columns: minmax(0, 1fr); }
	.cp-rl__mbfig { position: static; order: -1; }
	.cp-rl__mbs { min-height: 0; }
}

/* ---------- Vitrine inclinable ---------- */
.cp-rl__vt { display: grid; grid-template-columns: repeat(var(--cnt, 4), minmax(0, 1fr)); gap: 20px; perspective: 1200px; }
.cp-rl__vtc { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; color: #fff; outline: none; box-shadow: 0 30px 60px -36px rgba(0, 0, 51, .6); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cp-rl__vtc:focus-visible { box-shadow: 0 0 0 2px var(--o); }
.cp-rl .cp-rl__vtc img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; transform: translate(calc(var(--ry, 0deg) * -.6px), calc(var(--rx, 0deg) * .6px)); }
.cp-rl__vtc::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 51, .95) 8%, rgba(0, 0, 51, .35) 55%, rgba(0, 0, 51, .1)); }
.cp-rl__vtc::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .22), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.cp-rl__vtc:hover::after { opacity: 1; }
.cp-rl__vtc > div { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 24px; }
.cp-rl__vtc i { display: block; width: 32px; height: 2px; margin-bottom: 14px; background: var(--o); }
.cp-rl .cp-rl__vtc .cp-rl__h3 { margin: 0; color: #fff; font-size: 22px; }
.cp-rl .cp-rl__vtc p { max-height: 0; margin-top: 8px; overflow: hidden; color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.5; opacity: 0; transition: max-height .6s, opacity .5s; }
.cp-rl .cp-rl__vtc:hover p,
.cp-rl .cp-rl__vtc:focus-within p,
.cp-rl .cp-rl__vtc:focus p { max-height: 160px; opacity: 1; }
@media (hover: none) {
	.cp-rl .cp-rl__vtc p { max-height: none; opacity: 1; }
}
@media (max-width: 1000px) {
	.cp-rl__vt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.cp-rl__vt { grid-template-columns: minmax(0, 1fr); }
	.cp-rl__vtc { aspect-ratio: 4 / 3; }
	.cp-rl .cp-rl__vtc p { max-height: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.cp-sx-hp,
	.cp-sx-hp img,
	[class*="cp-rl__"],
	[class*="cp-mb-"] { transition: none !important; animation: none !important; }
}