/* =========================================================
   Stone logo reveal
   ========================================================= */

.stone-logo-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#stone-logo {
  width: 100%;
  height: auto;
  display: block;
    contain: layout paint;
}

#stone-logo path {
  fill: #1d1d1b;
}

#stone-reveal-rect {
  transform-box: fill-box;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;

  transform: scaleX(0);
  -webkit-transform: scaleX(0);

  animation: stoneRevealScale 2.5s ease forwards;
  -webkit-animation: stoneRevealScale 2.5s ease forwards;

  animation-delay: 1s;
  -webkit-animation-delay: 1s;

  will-change: transform;
}

@keyframes stoneRevealScale {
  to { transform: scaleX(1); }
}

@-webkit-keyframes stoneRevealScale {
  to { -webkit-transform: scaleX(1); }
}

/* =========================================================
   Stone Tendance – Tooltip & lignes interactives
   ========================================================= */

.elementor-element-1c2fa076 .elementor-element-42bd1967,
.elementor-element-1c2fa076 .elementor-element-6deca480,
.elementor-element-1c2fa076 .elementor-element-2f7914df,
.elementor-element-1c2fa076 .elementor-element-4fa7d553 {
  position: relative;
}

.elementor-element-1c2fa076 .elementor-element-42bd1967::before,
.elementor-element-1c2fa076 .elementor-element-42bd1967::after,
.elementor-element-1c2fa076 .elementor-element-6deca480::before,
.elementor-element-1c2fa076 .elementor-element-6deca480::after,
.elementor-element-1c2fa076 .elementor-element-2f7914df::before,
.elementor-element-1c2fa076 .elementor-element-2f7914df::after,
.elementor-element-1c2fa076 .elementor-element-4fa7d553::before,
.elementor-element-1c2fa076 .elementor-element-4fa7d553::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  height: 1px;
  background: #000;
  transform-origin: center;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.elementor-element-1c2fa076 .elementor-element-42bd1967::before,
.elementor-element-1c2fa076 .elementor-element-6deca480::before,
.elementor-element-1c2fa076 .elementor-element-2f7914df::before,
.elementor-element-1c2fa076 .elementor-element-4fa7d553::before {
  top: 0;
}

.elementor-element-1c2fa076 .elementor-element-42bd1967::after,
.elementor-element-1c2fa076 .elementor-element-6deca480::after,
.elementor-element-1c2fa076 .elementor-element-2f7914df::after,
.elementor-element-1c2fa076 .elementor-element-4fa7d553::after {
  bottom: 0;
}

.st-row-active::before,
.st-row-active::after {
  transform: translateX(-50%) scaleX(1);
}

.elementor-element-1c2fa076 .elementor-heading-title {
  transition:
    transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
    letter-spacing 0.3s cubic-bezier(0.19, 1, 0.22, 1),
    color 0.25s ease-out;
}

.st-row-active .elementor-heading-title {
  transform: translateX(4px);
  letter-spacing: 0.08em;
  color: #000;
}

.st-tooltip-wrapper {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.7);
  transition:
    opacity 0.25s ease-out,
    transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 99999;
}

.st-tooltip-wrapper.st-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.st-tooltip-svg {
  width: 200px;
  height: auto;
  display: block;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.st-tooltip-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  width: 70%;
  line-height: 1.2;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.st-tooltip-wrapper{
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity .15s ease;
}

.st-tooltip-wrapper.st-visible{
  opacity: 1;
}

.st-tooltip-svg{
  width: 28px;
  height: 28px;
  display: block;
}

.st-tooltip-svg{
  width: 200px;  
  height: auto;
}

/* =========================================================
   Stone Tendance – Scroll background video control
   ========================================================= */

.elementor-277 .elementor-background-video-hosted{
  display:block;
}

body.st-static-video .elementor-277 .elementor-background-video-hosted{
  display:block;
}

.elementor-element.e-con
  > .elementor-background-video-container{
  isolation: isolate;
}

.elementor-element.e-con > .elementor-background-overlay {
  z-index: 0 !important;
  pointer-events: none;
}

.elementor-element.e-con > .elementor-background-video-container {
  z-index: 0 !important;
  pointer-events: none;
}

.elementor-element-6a9c3f12{
  min-height: auto !important;
  height: auto !important;
}

/* =========================================================
   SEAK — Menu mobile
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap");

:root{
  --bg: #F7F5F1;
  --text: #0E0F12;
  --muted: rgba(14,15,18,.55);
  --line: rgba(14,15,18,.10);
  --shadow: 0 28px 80px rgba(14,15,18,.10);
  --logo: url("https://stonetendance.be/wp-content/uploads/2025/12/logo_triangle_couleur_1.svg");
}

#menu{ cursor:pointer; }

body.stm-lock{ touch-action: none; }
.stm-menu{ overscroll-behavior: contain; }

.stm-menu{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  opacity: 0;
  pointer-events: none;
}

.stm-menu.is-open{
  opacity: 1;
  pointer-events: auto;
}

.stm-panel{
  position:absolute; inset:0;
  background: var(--bg);
  overflow:hidden;
}

.stm-panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(14,15,18,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,15,18,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity:.22;
  pointer-events:none;
}

.stm-watermark{
  position:absolute;
  left:50%;
  top:50%;
  width:min(78vw, 620px);
  height:min(78vw, 620px);
  transform: translate3d(-50%,-50%,0) rotate(-10deg) scale(1);
  transform-origin: 50% 50%;
  background-image: var(--logo);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:.09;
  filter: blur(7px);
  pointer-events:none;
  will-change: transform;
}

.stm-menu.is-open .stm-watermark{
  animation: stmWatermarkGrow 3.8s cubic-bezier(.16,.9,.2,1) forwards;
}

@keyframes stmWatermarkGrow{
  0%   { transform: translate3d(-50%,-50%,0) rotate(-10deg) scale(1); }
  60%  { transform: translate3d(-50%,-50%,0) rotate(-10deg) scale(2); }
  100% { transform: translate3d(-50%,-50%,0) rotate(-10deg) scale(2); }
}

.stm-outside{ position:absolute; inset:0; }

.stm-top{
  position:absolute;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left:18px; right:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index: 5;
  opacity:0;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .4s cubic-bezier(.16,.9,.2,1);
  transition-delay: .10s;
}
.stm-menu.is-open .stm-top{
  opacity:1;
  transform: translateY(0);
}

.stm-brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color: var(--text);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:800;
  font-size:12px;
}
.stm-brand img{
  width:34px; height:34px; display:block;
  filter: drop-shadow(0 16px 40px rgba(14,15,18,.12));
}

.stm-close,
.stm-close:hover,
.stm-close:active,
.stm-close:focus,
.stm-close:focus-visible{
  width:46px !important;
  height:46px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.0) !important;
  background-color:#0E0F12 !important;
  background-image:none !important;
  color:#ffffff !important;
  box-shadow: 0 28px 80px rgba(14,15,18,.18) !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  display:grid !important;
  place-items:center !important;
  transition: transform .18s ease !important;
  outline: none !important;
}

.stm-close:hover{ transform: translateY(-1px) !important; }
.stm-close:active{ transform: translateY(0) scale(.98) !important; }

.stm-close *{ color:#ffffff !important; fill:#ffffff !important; }

.stm-close::before,
.stm-close::after{
  content: "" !important;
  display:none !important;
  background:none !important;
}

.stm-content{
  position:relative;
  height:100%;
  display:grid;
  align-items:center;
  justify-items:center;
  padding: 94px 18px 28px;
  z-index: 4;
}
.stm-inner{ width:min(720px, 92vw); }

.stm-nav{ display:grid; gap:14px; }

.stm-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  padding: 18px 6px 18px 2px;
  text-decoration:none;
  color: var(--text);
  border-bottom: 1px solid rgba(14,15,18,.10);

  opacity:0;
  transform: translateY(10px);
}

.stm-item:nth-child(1){ --d: 0ms; }
.stm-item:nth-child(2){ --d: 80ms; }
.stm-item:nth-child(3){ --d: 160ms; }
.stm-item:nth-child(4){ --d: 240ms; }

.stm-menu.is-open .stm-item{
  animation: stmItemIn .55s cubic-bezier(.16,.9,.2,1) forwards;
  animation-delay: calc(180ms + var(--d));
}

@keyframes stmItemIn{
  0%   { opacity:0; transform: translateY(10px); }
  70%  { opacity:1; transform: translateY(-1px); }
  100% { opacity:1; transform: translateY(0); }
}

.stm-label{
  font-weight:800;
  font-size: clamp(28px, 6.2vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.stm-sub{
  display:block;
  margin-top: 6px;
  font-weight:700;
  font-size: 12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--muted);
}

.stm-arrow{
  width:14px; height:14px;
  background: var(--text);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity:.85;
  flex:0 0 auto;
}

.stm-foot{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
  opacity:0;
  transform: translateY(8px);
}
.stm-menu.is-open .stm-foot{
  animation: stmFootIn .5s cubic-bezier(.16,.9,.2,1) .44s forwards;
}
@keyframes stmFootIn{ to { opacity:1; transform: translateY(0); } }

.stm-foot a{
  color: var(--text);
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom: 1px solid rgba(14,15,18,.18);
}

@media (min-width: 1025px){
  .stm-menu{ display:none; }
}