/* Bannière d'accueil « Relevé 3D sur place » (Apikom_Scan3d)
   Composant autonome, classes préfixées r3b-. Proportions 1186 × 330 sur ordinateur, une colonne sous 760 px de large.
   CSS statique et non LESS : la bannière repose sur des custom properties et une requête de conteneur,
   que le compilateur LESS de Magento (wikimedia/less.php) ne sait pas traiter.
   Charte du site : Arial, bleu #0071BB, orange #FF7800 (bouton à texte blanc), gris #333 et #F5F5F5. */
.r3b-wrap{width:100%;margin:15px auto 20px;container-type:inline-size;container-name:r3b}   /* width:100% : indispensable avec la requête de conteneur */
.r3b{
  --r3b-bg:#F5F5F5;--r3b-ink:#333;--r3b-blue:#0071BB;--r3b-text:#444;--r3b-sub:#555;--r3b-legal:#6B6B6B;
  --r3b-btn:#FF7800;--r3b-btn-ink:#fff;--r3b-btn-hover:#E66C00;--r3b-chip-line:#D6D6D6;
  --r3b-font:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --u:calc(100cqw / 1186);
  display:grid;grid-template-columns:480fr 706fr;aspect-ratio:1186/330;width:100%;overflow:hidden;position:relative;isolation:isolate;
  background:var(--r3b-bg);color:var(--r3b-ink);border-radius:14px;font-family:var(--r3b-font)}
.r3b *{box-sizing:border-box}
.r3b .r3b__panel{display:flex;flex-direction:column;min-width:0;padding:calc(23*var(--u)) calc(14*var(--u)) calc(11*var(--u)) calc(28*var(--u))}
.r3b .r3b__eyebrow{display:flex;gap:calc(7*var(--u));margin:0;font-weight:700;font-size:calc(10*var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--r3b-blue);white-space:nowrap}
.r3b .r3b__title{margin:calc(12*var(--u)) 0 0;font-family:var(--r3b-font);font-weight:700;font-size:calc(36*var(--u));line-height:1.05;letter-spacing:-.02em;color:var(--r3b-ink);text-transform:none}
.r3b .r3b__title span{display:block}.r3b .r3b__title span+span{color:var(--r3b-blue)}
.r3b .r3b__sub{margin:calc(9*var(--u)) 0 0;font-weight:700;font-size:calc(16*var(--u));color:var(--r3b-sub);white-space:nowrap}
.r3b .r3b__chips{display:flex;flex-wrap:wrap;gap:calc(7*var(--u));margin:calc(15*var(--u)) 0 0;padding:0;list-style:none}
.r3b .r3b__chips li{margin:0;font-weight:700;font-size:calc(9.4*var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--r3b-text);background:#fff;
  border:1px solid var(--r3b-chip-line);border-radius:calc(5*var(--u));padding:calc(5*var(--u)) calc(9*var(--u));line-height:1.2;white-space:nowrap}
.r3b .r3b__ctarow{display:flex;align-items:stretch;gap:calc(11*var(--u));margin-top:calc(16*var(--u))}
.r3b .r3b__cta{display:inline-flex;align-items:center;justify-content:center;gap:calc(12*var(--u));height:calc(44*var(--u));padding:0 calc(20*var(--u));
  background:var(--r3b-btn);color:var(--r3b-btn-ink);font-weight:700;font-size:calc(15*var(--u));line-height:1;border-radius:8px;text-decoration:none;white-space:nowrap;transition:background .15s}
.r3b .r3b__cta:visited{color:var(--r3b-btn-ink)}
.r3b .r3b__cta:hover,.r3b .r3b__cta:focus{background:var(--r3b-btn-hover);color:var(--r3b-btn-ink);text-decoration:none}
.r3b .r3b__cta:focus-visible{outline:3px solid var(--r3b-blue);outline-offset:3px}
.r3b .r3b__cta svg{width:calc(19*var(--u));height:calc(19*var(--u));stroke:currentColor;fill:none;stroke-width:2;flex:none}
.r3b .r3b__price{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:0;border:calc(1.5*var(--u)) solid var(--r3b-blue);border-radius:8px;padding:0 calc(13*var(--u));background:#fff}
.r3b .r3b__price b{font-weight:700;font-size:calc(19*var(--u));line-height:1;color:var(--r3b-blue);white-space:nowrap}
.r3b .r3b__price span{font-size:calc(9.8*var(--u));line-height:1.2;color:var(--r3b-text);margin-top:calc(3*var(--u));white-space:nowrap}
.r3b .r3b__meta{display:flex;align-items:center;gap:calc(7*var(--u));margin:calc(12*var(--u)) 0 0;font-size:calc(11*var(--u));color:var(--r3b-text)}
.r3b .r3b__meta::before{content:"";width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:var(--r3b-btn);flex:none}
.r3b .r3b__legal{margin:auto 0 0;padding-top:calc(5*var(--u));font-size:calc(8.2*var(--u));line-height:1.35;color:var(--r3b-legal)}

/* visuel : chantier réel | rendu 3D ; le volet révèle le nuage de points (à gauche) et la 3D filaire (à droite) */
.r3b .r3b__visual{position:relative;min-width:0;overflow:hidden;background:#081019;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;--pos:50%}
.r3b .r3b__visual img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.r3b .r3b__clip{position:absolute;inset:0}
.r3b .r3b__clip--n{clip-path:inset(0 50% 0 var(--l,50%))}
.r3b .r3b__clip--f{clip-path:inset(0 calc(100% - var(--r,50%)) 0 50%)}
.r3b .r3b__mid{position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:rgba(255,255,255,.5);pointer-events:none}
.r3b .r3b__bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 calc(10*var(--u)) rgba(80,200,255,.9);pointer-events:none}
.r3b .r3b__knob{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:calc(40*var(--u));height:calc(40*var(--u));min-width:34px;min-height:34px;border-radius:50%;
  background:#fff;color:var(--r3b-ink);display:grid;place-items:center;box-shadow:0 2px calc(10*var(--u)) rgba(0,0,0,.4);cursor:grab;z-index:2}
.r3b .r3b__knob:focus-visible{outline:3px solid var(--r3b-btn);outline-offset:2px}
.r3b .r3b__knob svg{width:60%;height:60%;stroke:currentColor;fill:none;stroke-width:2}
.r3b .r3b__visual.is-drag .r3b__knob{cursor:grabbing}
.r3b .r3b__hint{position:absolute;left:var(--pos);top:calc(50% + 30*var(--u));transform:translateX(-50%);font-weight:700;font-size:calc(9*var(--u));letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(14,22,30,.8);padding:calc(4*var(--u)) calc(7*var(--u));border-radius:calc(4*var(--u));white-space:nowrap;pointer-events:none;transition:opacity .3s}
.r3b .r3b__visual.is-used .r3b__hint{opacity:0}
.r3b .r3b__cap{position:absolute;top:calc(10*var(--u));z-index:1;pointer-events:none;font-weight:700;font-size:calc(9*var(--u));letter-spacing:.1em;text-transform:uppercase;
  color:#fff;padding:calc(5*var(--u)) calc(8*var(--u));border-radius:calc(4*var(--u));transition:opacity .2s;white-space:nowrap}
.r3b .r3b__cap--l{left:calc(10*var(--u));background:rgba(8,16,25,.85)}
.r3b .r3b__cap--r{right:calc(10*var(--u));background:#B76A0A}
.r3b .r3b__cap--n,.r3b .r3b__cap--f{opacity:0;background:#0E2A44}
.r3b .r3b__cap--n{right:calc(50% + 10*var(--u));color:#9FE6FF}
.r3b .r3b__cap--f{left:calc(50% + 10*var(--u));color:#E6F8FF}
.r3b .r3b__visual.show-n .r3b__cap--n,.r3b .r3b__visual.show-f .r3b__cap--f{opacity:1}
.r3b .r3b__visual.hide-l .r3b__cap--l,.r3b .r3b__visual.hide-r .r3b__cap--r{opacity:0}
/* cotes du relevé (texte en HTML) sur la 3D filaire cotée : hauteurs de marche, une marche sur deux, hors de l'escalier */
.r3b .r3b__cote{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:calc(8.6*var(--u));letter-spacing:.02em;
  color:#fff;background:#00468C;padding:calc(2*var(--u)) calc(5*var(--u));border-radius:calc(2*var(--u));white-space:nowrap;line-height:1.2;pointer-events:none}

@container r3b (max-width:759px){
  .r3b{grid-template-columns:1fr;aspect-ratio:auto;--u:1px}
  .r3b .r3b__visual{order:-1;aspect-ratio:668/330}
  .r3b .r3b__panel{padding:18px 16px 16px}
  .r3b .r3b__eyebrow{flex-wrap:wrap;white-space:normal;font-size:11px}
  .r3b .r3b__title{font-size:28px}
  .r3b .r3b__sub{white-space:normal;font-size:16px;line-height:1.25}
  .r3b .r3b__chips li{font-size:10px}
  .r3b .r3b__ctarow{flex-direction:column;gap:10px}
  .r3b .r3b__cta{height:48px;font-size:16px}
  .r3b .r3b__price{padding:10px 14px}.r3b .r3b__price b{font-size:22px}.r3b .r3b__price span{font-size:13px}
  .r3b .r3b__meta{font-size:13.5px}
  .r3b .r3b__legal{margin-top:14px;font-size:11px}
  .r3b .r3b__cap{font-size:9px}.r3b .r3b__hint{font-size:10px;top:calc(50% + 28px)}
  .r3b .r3b__visual.show-n .r3b__cap--l,.r3b .r3b__visual.show-f .r3b__cap--r{opacity:0}   /* pas la place pour deux légendes côte à côte */
  .r3b .r3b__cote{display:none}          /* mobile : flèches seules (filaire-mobile), valeurs masquées pour rester lisibles */
}
@media (prefers-reduced-motion:reduce){.r3b__cap,.r3b__hint,.r3b__cta{transition:none}}