/* ============================================================
   SUMO Relief — page produit « carte en relief »
   ------------------------------------------------------------
   Prolonge style.css (mêmes variables, mêmes boutons, même
   octogone). Principe de mise en page : une idée par écran,
   alternance sombre / clair pour rythmer la descente.
   Tout est préfixé « r » pour ne jamais entrer en collision
   avec les classes de la page d'accueil.
============================================================ */

.relief-page { background: var(--noir); }

/* ------------------------------------------------------------
   RÉVÉLATIONS — pilotées par carte-relief.js (IntersectionObserver)
------------------------------------------------------------ */
[data-r] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-r].is-in { opacity: 1; transform: none; }

.rdisplay .line > span { transform: translateY(105%); transition: transform 1.05s var(--ease); }
.rdisplay.is-in .line > span { transform: none; }
.rdisplay.is-in .line:nth-child(2) > span { transition-delay: .09s; }

/* ------------------------------------------------------------
   TYPOGRAPHIE DE PAGE
------------------------------------------------------------ */
.rdisplay {
  font-size: clamp(2.6rem, 8vw, 7rem);
  font-weight: 800; line-height: .96; letter-spacing: -0.045em;
  color: var(--bg);
}
.rdisplay .line { padding-top: .1em; }
.rdisplay--md { font-size: clamp(2rem, 5.4vw, 4.4rem); letter-spacing: -0.035em; }
.rdisplay--dark { color: var(--ink); }

.rlead {
  max-width: 54ch;
  font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65;
  color: rgba(255,255,255,.58);
}
.rlead--dark { color: var(--ink-60); }
.rlead--center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------
   BARRE
------------------------------------------------------------ */
.rnav {
  position: fixed; inset: 0 0 auto 0; z-index: 800;
  background: rgba(13,13,13,.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rnav__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px var(--gut);
  display: flex; align-items: center; gap: 16px;
}
.rnav__brand {
  display: flex; align-items: center; gap: 9px;
  color: #fff; font-weight: 800; letter-spacing: .18em; font-size: .9rem;
}
.rnav__label {
  color: var(--accent); font-size: .9rem; font-weight: 600; letter-spacing: .1em;
  padding-left: 14px; margin-left: -4px;
  border-left: 1px solid rgba(255,255,255,.16);
}
.rnav__cta { margin-left: auto; --pad-y: 10px; --pad-x: 20px; font-size: .82rem; }

/* ------------------------------------------------------------
   1. HERO
------------------------------------------------------------ */
.rhero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: grid; align-items: center;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 70px);
  padding: clamp(110px, 16vh, 170px) var(--gut) clamp(80px, 12vh, 130px);
  background: var(--noir);
}
/* halo doré : donne du volume au produit sans calque photo */
.rhero__glow {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: min(72vw, 900px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(200,154,75,.20) 0%, rgba(200,154,75,.07) 38%, transparent 68%);
  pointer-events: none;
}
.rhero__copy { position: relative; z-index: 2; max-width: 680px; }
.rhero .eyebrow { margin-bottom: 24px; }
.rhero__sub {
  margin-top: 28px; max-width: 40ch;
  font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.6;
  color: rgba(255,255,255,.6);
}
.rhero__stage { position: relative; z-index: 2; display: flex; justify-content: center; }
.rhero__img {
  --py: 0px;                 /* décalage de parallaxe, écrit par le JS */
  width: min(100%, 470px); height: auto; display: block;
  border-radius: 10px;
  box-shadow: 0 60px 130px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  animation: rFloat 7s ease-in-out infinite;
}
@keyframes rFloat {
  0%,100% { transform: translateY(var(--py)); }
  50%     { transform: translateY(calc(var(--py) - 14px)); }
}

.rscroll {
  position: absolute; left: var(--gut); bottom: 34px; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.rscroll i { display: block; width: 54px; height: 1px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.rscroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateX(-100%); animation: rScroll 2.6s var(--ease) infinite;
}
@keyframes rScroll { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }

/* ------------------------------------------------------------
   2. CHIFFRES
------------------------------------------------------------ */
.rfigures { background: var(--bg); padding: var(--sp) var(--gut); }
.rfigures__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 60px);
  text-align: center;
}
.rfig { display: flex; flex-direction: column; gap: 10px; }
.rfig__n {
  font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1; color: var(--ink);
}
.rfig__n em {
  font-style: normal; font-size: .38em; font-weight: 600;
  letter-spacing: -0.01em; color: var(--accent); margin-left: .1em;
}
.rfig__l {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-40);
}
.rfigures__line {
  max-width: 52ch; margin: clamp(46px, 7vh, 80px) auto 0; text-align: center;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.55; color: var(--ink-60);
}
.rfigures__line strong { display: block; margin-top: .5em; color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------
   3. RELIEF
------------------------------------------------------------ */
.rrelief { background: var(--noir); padding: var(--sp) var(--gut); }
.rrelief__head { max-width: var(--maxw); margin: 0 auto; }
.rrelief__head .eyebrow { margin-bottom: 22px; }
.rrelief__head .rlead { margin-top: 30px; }
.rrelief__media {
  max-width: var(--maxw); margin: clamp(46px, 7vh, 86px) auto 0;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 50px 110px -46px rgba(0,0,0,.9);
}
.rrelief__media img { width: 100%; height: auto; display: block; }

.rspecs {
  max-width: var(--maxw); margin: clamp(46px, 7vh, 86px) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
}
.rspec {
  padding: 30px 28px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.rspec svg {
  width: 30px; height: 30px; display: block; margin-bottom: 18px;
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.rspec h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 9px; letter-spacing: -0.01em; }
.rspec p { font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.52); }

/* ------------------------------------------------------------
   4. TRACE (section claire)
------------------------------------------------------------ */
.rtrace { background: var(--bg); padding: var(--sp) var(--gut); }
.rtrace__head { max-width: var(--maxw); margin: 0 auto clamp(40px, 6vh, 70px); }
.rtrace__head .eyebrow { margin-bottom: 20px; }
.rtrace__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 80px);
  align-items: center;
}
.rtrace__stage { display: flex; justify-content: center; }
.risle { width: min(100%, 420px); height: auto; overflow: visible; }
.risle__land { fill: #14151A; stroke: rgba(17,17,17,.14); stroke-width: .4; }
.risle__trace {
  fill: none; stroke: var(--race, #E8B647); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke .5s var(--ease);
}
.rtrace__stage.is-in .risle__trace { animation: rDraw 3.4s var(--ease) .2s forwards; }
@keyframes rDraw { to { stroke-dashoffset: 0; } }
.risle__start { fill: var(--bois); }
.risle__end { fill: var(--race, #E8B647); transition: fill .5s var(--ease); }

.rraces { display: flex; flex-direction: column; gap: 8px; margin: 30px 0 24px; }
.rrace {
  display: flex; align-items: center; gap: 14px;
  appearance: none; cursor: pointer; font-family: inherit; text-align: left;
  padding: 13px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.rrace:hover { border-color: var(--ink-14); transform: translateX(3px); }
.rrace.is-active { border-color: var(--ink); background: #fff; }
.rrace__chip {
  flex: none; width: 15px; height: 15px; background: var(--c);
  clip-path: var(--oct);
}
.rrace__name { font-size: .95rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.rtrace__note { font-size: .86rem; line-height: 1.55; color: var(--ink-40); font-style: italic; }

/* ------------------------------------------------------------
   5. DONNÉES (sombre)
------------------------------------------------------------ */
.rdata { background: var(--noir); padding: var(--sp) var(--gut); text-align: center; }
.rdata .eyebrow { margin-bottom: 20px; }
.rdata .rdisplay { margin-inline: auto; }

.rplate {
  max-width: 940px; margin: clamp(44px, 6vh, 74px) auto 0;
  display: flex; align-items: stretch; justify-content: center; gap: clamp(18px, 4vw, 52px);
  padding: 34px clamp(22px, 4vw, 46px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  background: rgba(255,255,255,.03);
}
.rplate__cell { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.rplate__k { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.rplate__v { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.rplate__s { font-size: .92rem; color: var(--accent); font-weight: 600; }
.rplate__sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.12); flex: none; }

.rprofile { max-width: 940px; margin: clamp(40px, 6vh, 70px) auto 0; }
.rprofile svg { width: 100%; height: clamp(70px, 11vw, 120px); display: block; }
.rprofile__line {
  fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.4;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.rprofile.is-in .rprofile__line { animation: rDraw 2.8s var(--ease) .15s forwards; }
.rprofile__axis {
  display: flex; justify-content: space-between; margin-top: 12px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.rdata .rlead { margin-top: clamp(34px, 5vh, 56px); }

/* ------------------------------------------------------------
   6. FORMATS (clair)
------------------------------------------------------------ */
.rformats { background: var(--bg); padding: var(--sp) var(--gut); }
.rformats__head { max-width: var(--maxw); margin: 0 auto clamp(40px, 6vh, 70px); }
.rformats__head .eyebrow { margin-bottom: 20px; }
.rformats__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.rcard {
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: var(--paper);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.rcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.rcard--featured { border-color: rgba(200,154,75,.4); }
.rcard__media { background: #EFEDE9; display: flex; align-items: center; justify-content: center; }
.rcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard__media--portrait { aspect-ratio: 4 / 5; }
.rcard__media--land { aspect-ratio: 4 / 3; }
.rcard__body { padding: 30px clamp(22px, 2.6vw, 34px) 34px; }
.rcard__tag {
  display: inline-block; margin-bottom: 14px;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-40);
}
.rcard__tag--gold { color: var(--accent); }
.rcard h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; }
.rcard p { font-size: .98rem; line-height: 1.62; color: var(--ink-60); }

/* ------------------------------------------------------------
   7. ATELIER (sombre)
------------------------------------------------------------ */
.rmade { background: var(--noir); padding: var(--sp) var(--gut); }
.rmade__inner { max-width: var(--maxw); margin: 0 auto; }
.rmade .eyebrow { margin-bottom: 22px; }
.rmade .rlead { margin-top: 30px; }

/* ------------------------------------------------------------
   8. CTA (clair)
------------------------------------------------------------ */
.rcta { background: var(--bg); padding: var(--sp) var(--gut); text-align: center; }
.rcta .rdisplay { margin-inline: auto; }
.rcta .rlead { margin-top: 28px; }
.rcta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }
.rcta__note { margin-top: 24px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40); }

/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */
.rfooter {
  background: var(--noir); color: rgba(255,255,255,.4);
  padding: 56px var(--gut);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; font-size: .82rem;
}
.rfooter__brand { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 800; letter-spacing: .18em; }
.rfooter__legal a { color: rgba(255,255,255,.4); text-decoration: underline; text-underline-offset: 2px; }
.rfooter__legal a:hover { color: #fff; }

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1024px) {
  .rhero { grid-template-columns: 1fr; text-align: left; }
  .rhero__stage { order: -1; }
  .rhero__img { width: min(74%, 330px); }
  .rhero__glow { right: -30%; top: 30%; }
  .rscroll { display: none; }
  .rtrace__grid { grid-template-columns: 1fr; }
  .rspecs { grid-template-columns: 1fr; }
  .rformats__grid { grid-template-columns: 1fr; max-width: 540px; }
}
@media (max-width: 720px) {
  .rfigures__grid { grid-template-columns: 1fr; gap: 34px; }
  .rplate { flex-direction: column; gap: 22px; }
  .rplate__sep { width: 100%; height: 1px; }
  .rnav__label { display: none; }
}

/* ------------------------------------------------------------
   ACCESSIBILITÉ
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-r] { opacity: 1; transform: none; }
  .rdisplay .line > span { transform: none; }
  .rhero__img { animation: none; }
  .rscroll i::after { animation: none; }
  .risle__trace, .rprofile__line { stroke-dashoffset: 0; animation: none; }
}

/* ============================================================
   BANDEAU — repris dans la DA du reste du site : fond clair,
   texte encre, filet fin. Sur le hero sombre, ça donne un
   contraste net plutôt qu'une barre qui se fond dans la page.
============================================================ */
.rnav {
  background: rgba(248,247,245,.82);
  border-bottom: 1px solid var(--line);
}
.rnav__brand { color: var(--ink); }
.rnav__label { color: var(--accent); border-left-color: var(--ink-14); }

/* ============================================================
   PROFIL ALTIMÉTRIQUE — aire remplie + annotation du point haut
============================================================ */
.rprofile__plot { position: relative; }
.rprofile__fill { fill: rgba(255,255,255,.055); }
.rprofile__peak {
  position: absolute; left: var(--x); top: 4%;
  transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease) 1.6s;
}
.rprofile.is-in .rprofile__peak { opacity: 1; }
.rprofile__peak em {
  font-style: normal; font-size: .82rem; font-weight: 800;
  letter-spacing: -0.01em; color: var(--accent);
}
.rprofile__peak > span {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.rprofile__peak::after {
  content: ""; width: 1px; height: 14px; background: rgba(200,154,75,.5); margin-top: 3px;
}

/* ============================================================
   CONFIGURATEUR (section sombre — réutilise .field de style.css)
============================================================ */
.rorder { background: var(--noir); padding: var(--sp) var(--gut); }
.rorder__inner { max-width: 860px; margin: 0 auto; }
.rorder__head { text-align: center; margin-bottom: clamp(40px, 6vh, 66px); }
.rorder__head .eyebrow { margin-bottom: 20px; }
.rorder__head .rdisplay { margin-inline: auto; }
.rorder__head .rlead { margin-top: 24px; }
.rorder__form { gap: 30px; }

.rpick { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rpick legend { padding: 0; }
.rpick__grid { display: grid; gap: 12px; }
.rpick__grid--2 { grid-template-columns: repeat(2, 1fr); }
.rpick__grid--3 { grid-template-columns: repeat(3, 1fr); }

.rpick__opt { cursor: pointer; }
.rpick__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.rpick__box {
  display: flex; flex-direction: column; gap: 9px; height: 100%;
  padding: 16px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.rpick__box--row { flex-direction: row; align-items: center; gap: 13px; }
.rpick__opt:hover .rpick__box { border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.rpick__opt input:checked + .rpick__box {
  border-color: var(--accent); background: rgba(200,154,75,.10);
  box-shadow: 0 0 0 1px rgba(200,154,75,.35) inset;
}
.rpick__opt input:focus-visible + .rpick__box { box-shadow: 0 0 0 3px rgba(200,154,75,.3); }
.rpick__name { font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.rpick__desc { font-size: .78rem; line-height: 1.45; color: rgba(255,255,255,.45); }
.rpick__swatch { width: 26px; height: 26px; flex: none; background: var(--s); clip-path: var(--oct); }

/* Aperçus dessinés en CSS : pas d'image à produire, et ça reste net
   à toutes les tailles. */
.rpick__art { display: block; border-radius: 8px; background: #14151A; }
.rpick__art--portrait { width: 34px; height: 46px; border: 1px solid rgba(255,255,255,.22); }
.rpick__art--land { width: 54px; height: 38px; border: 1px solid rgba(255,255,255,.22); }
.rpick__art--plain { height: 42px; background: #17181D; }
.rpick__art--lontan {
  height: 42px;
  background: repeating-linear-gradient(115deg, #1b1a17 0 5px, #232019 5px 10px);
}
.rpick__art--topo {
  height: 42px;
  background:
    radial-gradient(ellipse 40% 60% at 50% 50%, transparent 38%, rgba(200,154,75,.5) 39% 41%, transparent 42%),
    radial-gradient(ellipse 60% 80% at 50% 50%, transparent 55%, rgba(200,154,75,.32) 56% 58%, transparent 59%),
    radial-gradient(ellipse 82% 100% at 50% 50%, transparent 70%, rgba(200,154,75,.2) 71% 73%, transparent 74%),
    #14151A;
}

/* ============================================================
   VOTE (section claire)
============================================================ */
.rvote { background: var(--bg); padding: var(--sp) var(--gut); }
.rvote__head { max-width: 760px; margin: 0 auto clamp(38px, 5vh, 58px); text-align: center; }
.rvote__head .rdisplay { margin-inline: auto; }
.rvote__head .rlead { margin-top: 24px; }

.rvote__box {
  max-width: 900px; margin: 0 auto;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--line); border-radius: 24px; background: var(--paper);
}
.rvote__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rvote__opt {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 15px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: #fff;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rvote__opt:hover { border-color: var(--ink-14); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.rvote__opt.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.rvote__opt--other { grid-column: 1 / -1; }
.rvote__name { font-size: .96rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.rvote__meta { font-size: .78rem; color: var(--ink-40); }

.rvote__custom { margin-top: 12px; }
.rvote__custom input,
.rvote__send input {
  width: 100%; appearance: none; font-family: inherit; font-size: .95rem;
  padding: 14px 18px; border-radius: 100px;
  border: 1px solid var(--ink-14); background: #fff; color: var(--ink);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rvote__custom input:focus, .rvote__send input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,154,75,.18);
}
.rvote__send { display: flex; gap: 10px; margin-top: 18px; }
.rvote__send input { flex: 1; min-width: 0; }
.rvote__send .btn { flex: none; }
.rvote__note { min-height: 1.3em; margin-top: 12px; font-size: .86rem; font-weight: 600; color: var(--accent); }
.rvote__note[data-state="error"] { color: #C0473C; }

@media (max-width: 720px) {
  .rpick__grid--2, .rpick__grid--3, .rvote__options { grid-template-columns: 1fr; }
  .rvote__send { flex-direction: column; }
  .rvote__send .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   MISE EN CASCADE — les éléments d'une même grille arrivent
   l'un après l'autre plutôt que d'un bloc. C'est ce décalage
   qui fait la différence entre « ça apparaît » et « ça se
   met en place ».
============================================================ */
.rspecs [data-r]:nth-child(2),
.rformats__grid [data-r]:nth-child(2) { transition-delay: .12s; }
.rspecs [data-r]:nth-child(3) { transition-delay: .24s; }
.rfigures__grid [data-r]:nth-child(2) { transition-delay: .1s; }
.rfigures__grid [data-r]:nth-child(3) { transition-delay: .2s; }

/* Deux sections sombres se suivent (atelier → configurateur) :
   un filet fin évite qu'elles se confondent. */
.rorder { border-top: 1px solid rgba(255,255,255,.07); }

/* Survol des cartes de format : la photo respire légèrement. */

/* Bouton du bandeau : léger relief au survol, cohérent avec
   les boutons magnétiques de l'accueil. */
.rnav__cta { transition: transform .3s var(--ease), background .3s var(--ease); }
.rnav__cta:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .rcard__media img, .rnav__cta { transition: none; }
  .rspecs [data-r], .rformats__grid [data-r], .rfigures__grid [data-r] { transition-delay: 0s; }
}

/* ============================================================
   CARROUSEL DU HERO ; plusieurs vues de la même pièce
   ------------------------------------------------------------
   Fondu enchaîné plutôt que glissement : sur un objet immobile,
   le fondu se lit comme un changement de point de vue, le
   glissement comme un défilé de produits différents.
============================================================ */
.shots { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(100%, 520px); }
.shots__frame {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 60px 130px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
}
.shots__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.015);
  transition: opacity 1s var(--ease), transform 1.6s var(--ease);
}
.shots__img.is-on { opacity: 1; transform: none; }

.shots__dots { display: flex; gap: 9px; }
.shots__dot {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 8px; height: 8px; background: rgba(255,255,255,.28);
  clip-path: var(--oct);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.shots__dot:hover { background: rgba(255,255,255,.55); }
.shots__dot.is-on { background: var(--accent); transform: scale(1.35); }

/* ============================================================
   IMAGE DU RELIEF ; pivotée d'un quart de tour
   La photo est prise dans le sens de la longueur ; en la
   redressant, le cadre se lit à l'endroit sur la page.
============================================================ */
.rrelief__media--rot { display: flex; justify-content: center; background: #0B0B0D; }
.rrelief__media--rot img {
  width: auto; height: auto;
  max-height: min(78vh, 760px);
  transform: rotate(90deg);
  transform-origin: center;
}
/* Le parent doit réserver la place de l'image TOURNÉE, sinon la
   rotation déborde : on échange donc les proportions du bloc. */
.rrelief__media--rot { aspect-ratio: 3 / 4; max-width: 620px; margin-inline: auto; align-items: center; }
.rrelief__media--rot img { max-width: 133%; max-height: 75%; }

@media (prefers-reduced-motion: reduce) {
  .shots__img { transition: opacity .2s linear; transform: none; }
}

/* ============================================================
   TÊTE DE PAGE ; titre et pièce côte à côte
   La page n'a plus de hero : cette section ouvre le récit, donc
   son titre monte en taille sans aller jusqu'au calibre hero.
============================================================ */
/* Depuis la v12, l'en-tête est le composant .phero (site.css) :
   cette section ne garde que les trois points clés. */
.rrelief--intro { padding-top: var(--sp); }
.rrelief--intro .rspecs { margin-top: 0; }
.rdisplay--intro { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -0.04em; }

.rintro {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(28px, 4.5vw, 64px); align-items: center;
}
.rintro__copy .eyebrow { margin-bottom: 22px; }
.rintro__copy .rlead { margin-top: 28px; }
.rintro__shot { display: flex; justify-content: center; }
.rintro__shot img {
  width: min(100%, 620px); height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 40px 90px -38px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
}
@media (max-width: 900px) {
  .rintro { grid-template-columns: 1fr; }
  .rintro__shot { order: -1; }
  .rintro__shot img { width: min(74%, 340px); }
}

/* ============================================================
   « DANS LE CADRE » ; photos pivotées d'un quart de tour à gauche
   Les clichés sont pris dans le sens de la longueur ; on les
   redresse. Le conteneur échange ses proportions pour réserver
   la place de l'image tournée, sinon elle déborderait.
============================================================ */
.rcard__media--rot { aspect-ratio: 3 / 4; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rcard__media--rot img {
  width: auto; height: auto;
  max-width: 133%; max-height: 75%;
  object-fit: contain;
  transform: rotate(-90deg);
}

/* ============================================================
   PERSONNALISATION ; une teinte commande tout
============================================================ */
.rperso { background: var(--bg); padding: var(--sp) var(--gut); }
.rperso__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.rperso__copy .eyebrow { margin-bottom: 20px; }
.rperso__copy .rlead { margin-top: 26px; }

.rperso__sw { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.psw {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 46px; height: 46px; background: none;
  display: grid; place-items: center;
  transition: transform .3s var(--ease);
}
.psw:hover { transform: translateY(-3px); }
.psw__c {
  width: 34px; height: 34px; background: var(--sw);
  clip-path: var(--oct);
  box-shadow: 0 0 0 1px rgba(17,17,17,.12) inset;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.psw.is-on .psw__c { transform: scale(1.22); box-shadow: 0 0 0 2px var(--ink) ; }
.psw:focus-visible { outline: none; }
.psw:focus-visible .psw__c { box-shadow: 0 0 0 3px rgba(200,154,75,.5); }

.rperso__readout { margin-top: 22px; font-size: .92rem; color: var(--ink-60); }
.rperso__readout b { color: var(--ink); font-weight: 700; }

.rperso__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rperso__list li { display: flex; align-items: center; gap: 12px; font-size: .94rem; color: var(--ink-60); }
.rperso__list i {
  flex: none; width: 11px; height: 11px; background: var(--race, #C89A4B);
  clip-path: var(--oct); transition: background .45s var(--ease);
}

.rperso__view { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rperso__frame {
  position: relative; width: min(100%, 700px); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* Calque du dessous : intact, il conserve la vraie couleur du cadre. */
.rperso__base { width: 100%; height: auto; display: block; }
/* Calque du dessus : recoloré, puis découpé à l'intérieur du cadre
   pour que le bois ne vire jamais avec la teinte choisie. */
.rperso__tint {
  position: absolute; inset: 0; width: 100%; height: 100%;
  clip-path: inset(7.5% 6.5% 7.5% 6.5%);
  filter: hue-rotate(var(--rot, 0deg)) saturate(var(--sat, 1));
  transition: filter .55s var(--ease);
}
.rperso__note { font-size: .76rem; font-style: italic; color: var(--ink-40); text-align: center; max-width: 34ch; }

@media (max-width: 900px) {
  .rperso__grid { grid-template-columns: 1fr; }
  .rperso__view { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .rperso__frame img, .rperso__list i, .psw, .psw__c { transition: none; }
}

/* ============================================================
   CONFIGURATEUR ; couleur + aperçu du rendu
============================================================ */
.rconf__sw { display: flex; flex-wrap: wrap; gap: 8px; }
/* sur fond sombre, le contour de la pastille active passe en clair */
.rorder .psw__c { box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
.rorder .psw.is-on .psw__c { box-shadow: 0 0 0 2px #fff; }

.rconf__preview {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 24px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
}
.rconf__stage { width: min(100%, 460px); border-radius: 12px; overflow: hidden; box-shadow: 0 34px 80px -36px rgba(0,0,0,.9); }
.rconf__stage img {
  width: 100%; height: auto; display: block;
  filter: hue-rotate(var(--rot, 0deg)) saturate(var(--sat, 1));
  transition: filter .55s var(--ease), opacity .35s var(--ease);
}
.rconf__caption { text-align: center; display: flex; flex-direction: column; gap: 5px; }
.rconf__caption span { font-size: .86rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.rconf__caption em { font-style: italic; font-size: .74rem; color: rgba(255,255,255,.38); }

/* Bandeau « course au catalogue » : apparaît quand la saisie
   correspond à une course qu'on sait déjà tracer. */
.rconf__ready {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-top: 18px; padding: 16px 20px; border-radius: 16px;
  border: 1px solid rgba(200,154,75,.42); background: rgba(200,154,75,.09);
  animation: rReady .5s var(--ease);
}
@keyframes rReady { from { opacity: 0; transform: translateY(8px); } }
.rconf__ready-mark { flex: none; width: 26px; height: 26px; color: var(--accent); }
.rconf__ready-mark svg { width: 100%; height: 100%; }
.rconf__ready-txt { flex: 1; min-width: 200px; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.72); }
.rconf__ready-txt b { color: var(--accent); font-weight: 700; }
.rconf__ready-btn { flex: none; --pad-y: 11px; --pad-x: 22px; font-size: .84rem; }

@media (prefers-reduced-motion: reduce) {
  .rconf__stage img { transition: none; }
  .rconf__ready { animation: none; }
}

/* ============================================================
   EMPLACEMENT VIDÉO ; fond clair, en attente du fichier
============================================================ */
.rfilm { background: #fff; padding: clamp(96px, 14vh, 150px) var(--gut) clamp(24px, 4vh, 48px); }
/* placée sous l'en-tête .phero : même fond, marge haute ordinaire */
.phero-band + .rfilm { background: var(--bg); padding-top: 0; padding-bottom: clamp(56px, 9vh, 100px); }
.rfilm__slot {
  max-width: var(--maxw); margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 20px;
  border: 1px dashed var(--ink-14); background: var(--bg);
  display: grid; place-items: center; overflow: hidden;
}
/* Dès qu'une vidéo est posée dedans, le repère disparaît et
   l'élément occupe toute la place. */
.rfilm__slot:has(video) { border-style: none; background: #000; }
.rfilm__slot:has(video) .rfilm__hint { display: none; }
.rfilm__slot video, .rfilm__slot iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.rfilm__hint {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-40);
}
.rfilm__hint svg { width: 40px; height: 40px; color: var(--ink-14); }

/* ============================================================
   ATELIER ; texte à gauche, l'île à droite
============================================================ */
.rmade__inner--split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.rmade__shot img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.85);
}
@media (max-width: 900px) {
  .rmade__inner--split { grid-template-columns: 1fr; }
  .rmade__shot { order: -1; }
}

/* ============================================================
   MODULE D'ACHAT
============================================================ */
.rbuy {
  margin-top: 4px; padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  background: rgba(255,255,255,.04);
}
.rbuy__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 7px 0; font-size: .94rem; color: rgba(255,255,255,.62);
}
.rbuy__row--total {
  margin-top: 6px; padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; color: #fff;
}
.rbuy__row--total span:last-child { color: var(--accent); }
.field__hint--pay { margin-top: 10px; font-style: normal; line-height: 1.5; }

/* L'aperçu du configurateur suit la même logique de calques :
   ici l'image est unique, donc on découpe le filtre à l'intérieur. */
.rconf__stage { position: relative; }
.rconf__stage img { filter: none; }
.rconf__stage::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--shot, none); background-size: cover; background-position: center;
  clip-path: inset(7.5% 6.5% 7.5% 6.5%);
  filter: hue-rotate(var(--rot, 0deg)) saturate(var(--sat, 1));
  transition: filter .55s var(--ease);
  pointer-events: none;
}