.nuancier { position: relative; height: 260vh; background: var(--fond); }
.nuancier-scene { position: sticky; top: calc(var(--haut-fixe) + 72px); height: calc(100vh - var(--haut-fixe) - 72px); display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: 40px; padding: 0 var(--marge); max-width: 1600px; margin: auto; }
.nuancier .texte p { max-width: 42ch; color: var(--doux); margin: 20px 0 26px; }
.nuancier .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.nuancier .note { font-size: 12.5px; color: #5f5f5f; margin-top: 16px; }
.eventail { position: relative; height: min(70vh, 640px); }
.planche { position: absolute; left: 50%; bottom: 6%; width: min(11vw, 150px); height: min(58vh, 520px); margin-left: calc(min(11vw, 150px) / -2); transform-origin: 50% 94%; border-radius: 4px; overflow: hidden;
box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 18px 30px -12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .2); background: #ccc; }
.planche img { width: 100%; height: 100%; object-fit: cover; }
.planche span { position: absolute; left: 0; right: 0; top: 0; background: var(--fond); color: var(--texte); font: 700 14px/1.1 var(--titre); font-variation-settings: "wdth" 108; padding: 10px 8px; border-bottom: 3px solid var(--cyan); min-height: 52px; }
.planche::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #9a9a9a; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
@media (max-width: 1023px) {
.nuancier { height: 200vh; }
.nuancier-scene { grid-template-columns: 1fr; align-content: start; padding-top: 20px; gap: 0; top: calc(var(--haut-fixe) + 60px); height: calc(100svh - var(--haut-fixe) - 60px - 70px); }
.nuancier .texte p { margin: 10px 0 12px; font-size: 15px; }
.eventail { height: 44svh; }
.planche { width: 17vw; margin-left: -8.5vw; height: 38svh; }
.planche span { font-size: 11px; padding: 8px 4px; min-height: 44px; }
}
.rb-bande { position: relative; height: 300vh; background: var(--anthracite); color: #fff; }
.rb-scene { position: sticky; top: calc(var(--haut-fixe) + 72px); height: calc(100vh - var(--haut-fixe) - 72px); overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.rb-scene3d { position: relative; perspective: 1100px; perspective-origin: 50% 45%; cursor: grab; touch-action: pan-y; }
.rb-scene3d.tenu { cursor: grabbing; }
.rb-anneau { position: absolute; left: 50%; top: 48%; width: 0; height: 0; transform-style: preserve-3d; }
.rb-panneau { position: absolute; width: 320px; height: 400px; left: -160px; top: -200px; backface-visibility: hidden; margin: 0; }
.rb-panneau img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; pointer-events: none; }
.rb-panneau figcaption { position: absolute; left: 0; right: 0; top: 100%; padding-top: 12px; font-weight: 700; font-variation-settings: "wdth" 118; font-size: 20px; color: #fff; }
.rb-pied { display: flex; justify-content: flex-start; align-items: center; gap: 20px; padding: 0 var(--marge) 26px; color: rgba(255, 255, 255, .86); font-size: 14.5px; }
.rb-fleches { display: flex; gap: 10px; order: -1; }
.rb-fleches button { width: 48px; height: 48px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(11, 12, 13, .72); color: #fff; font: 700 20px var(--titre); cursor: pointer; }
@media (max-width: 1023px) {
.rb-bande { height: auto; }
.rb-scene { position: static; height: auto; padding: 30px 0 20px; }
.rb-scene3d { perspective: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--marge); cursor: auto; touch-action: pan-x pan-y; }
.rb-anneau { position: static; width: auto; height: auto; display: flex; gap: 14px; padding: 0 var(--marge) 60px; transform: none !important; }
.rb-anneau::after { content: ""; flex: none; width: 1px; }
.rb-panneau { position: relative; left: auto; top: auto; width: 76vw; height: 96vw; flex: none; scroll-snap-align: start; transform: none !important; opacity: 1 !important; }
.rb-fleches { display: none; }
}
.rb-bande { background: #0b0c0d; }
.rb-scene {
background:
radial-gradient(30% 70% at 50% -8%, rgba(255, 246, 232, .14), rgba(255, 246, 232, .05) 55%, transparent 82%),
radial-gradient(70% 34% at 50% 86%, rgba(255, 255, 255, .045), transparent 70%),
radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0, 0, 0, .55) 100%),
linear-gradient(180deg, #121314 0%, #1c1d1f 40%, #202123 63%, #141516 71%, #0b0c0d 100%);
}
.rb-panneau { --reflet: .22; }
.rb-reflet { position: absolute; left: 0; right: 0; top: calc(100% + 3px); height: calc(var(--reflet) * 100%); overflow: hidden;
border-radius: 2px; transform: scaleY(-1); pointer-events: none;
-webkit-mask-image: linear-gradient(transparent, rgba(0, 0, 0, .17)); mask-image: linear-gradient(transparent, rgba(0, 0, 0, .17)); }
.rb-panneau .rb-reflet img { position: absolute; left: 0; bottom: 0; height: calc(100% / var(--reflet)); }
@media (min-width: 1024px) and (max-height: 700px) {
.rb-panneau { --reflet: .12; }
}
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
.rb-reflet { display: none; }
}
@media (max-width: 1023px) {
.rb-scene {
background:
radial-gradient(70% 40% at 50% -4%, rgba(255, 246, 232, .09), transparent 75%),
linear-gradient(180deg, #151617 0%, #1e1f21 55%, #121314 80%, #0b0c0d 100%);
}
.rb-panneau { --reflet: .1; }
.rb-reflet { -webkit-mask-image: none; mask-image: none; }
.rb-scene::after { content: ""; position: absolute; left: 0; right: 0; top: calc(30px + 96vw + 3px); height: calc(9.6vw + 1px);
pointer-events: none; background: linear-gradient(rgba(19, 20, 21, .86), #101112); }
}
.nuancier.nuancier-tete { height: auto; }
.nuancier-tete .nuancier-scene { position: relative; top: auto; height: auto; min-height: calc(100vh - var(--haut-fixe) - 72px); padding: 40px 0 30px; }
.nuancier-tete .texte h1 { font-size: clamp(34px, 3.6vw, 60px); margin: 14px 0 0; }
.nuancier-tete .texte .lead { max-width: 52ch; margin: 18px 0 0; }
@media (max-width: 1023px) {
.nuancier.nuancier-tete { height: auto; }
.nuancier-tete .nuancier-scene { min-height: 0; padding: 20px 0 10px; }
.nuancier-tete .eventail { height: 52vw; min-height: 300px; }
}
.nuancier-tete .nuancier-scene { padding: calc(var(--haut-fixe) + 72px + 34px) var(--marge) 30px; min-height: 100vh; }
@media (max-width: 1023px) { .nuancier-tete .nuancier-scene { padding: calc(var(--haut-fixe) + 60px + 20px) var(--marge) 10px; min-height: 0; } }
.tuile-materiau b small { font-size: .7em; font-weight: 500; }
.comparer-ouvrir { margin: 6px 0 4px; }
.nuancier-tete .planche span { white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; line-height: 1.1; hyphens: manual; }
@media (max-width: 1023px) {
.nuancier-tete .nuancier-scene { display: flex; flex-direction: column; }
.nuancier-tete .eventail { order: -1; height: 64vw; min-height: 0; margin: 0 0 8px; }
.nuancier-tete .planche { height: 54vw; width: 13vw; margin-left: -6.5vw; }
.nuancier-tete .planche span { font-size: 9.5px; padding: 6px 4px 6px 3px; min-height: 40px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
}
@media (min-width: 1024px) and (max-width: 1499px) {
.nuancier-tete .planche span { font-size: 12px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; padding: 8px 10px 8px 6px; }
}