/* =========================================================
   DOXA — style.css (clean, no duplicates, fully responsive)
   Includes: Base, Topbar, Hero (image left), Button, Menu,
             Discover, Backbar, Preloader, Réalisations
   ========================================================= */

/* === BASE ================================================= */
:root{
  --container:1200px;
  --bg:#0a0a0a;
  --fg:#f5f5f5;
  --muted:#9aa0a6;

  /* circle origin (menu/discover) */
  --cx:24px;
  --cy:24px;

  /* Timings menu */
  --overlayDur:.7s;
  --panelDur:.4s;
  --gridDur:.25s;
  --itemStep:.03s;
  --itemStart:.20s;

  /* Discover */
  --suckDur:.8s;
  --panelRadius:24px;
  --discoverDur:.80s;

  /* Dynamic colors */
  --heroColor:#0eb5e4;
  --discoverColor:#0eb5e4;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:#000;
  color:#fff;
  overflow-x:hidden;
  overflow-y:auto;
  min-height:100svh;
}

/* Utility */
a{ color:inherit }
button{ font-family:inherit }
img{ max-width:100%; display:block }
:focus-visible{ outline:3px solid #fff8; outline-offset:3px; }

/* === TOPBAR ============================================== */
.topbar{
  position:fixed;
  inset:0 0 auto 0;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  z-index:400;
  pointer-events:auto;
}

.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  cursor:pointer;
  z-index:999;
}
.brand img{
  height:48px;
  width:auto;
  border-radius:8px;
  transition:transform .3s ease, filter .3s ease;
}
.brand:hover img{
  transform:scale(1.05);
  filter:brightness(1.2);
}

/* Burger */
.menu-toggle{
  --size:44px;
  position:relative;
  width:var(--size);
  height:var(--size);
  border:0;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:402;
  transition:transform .25s ease;
}
.menu-toggle .line{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
  transform:translate(-50%,-50%);
}
.menu-toggle .l1{ transform:translate(-50%,-50%) translateY(-6px); }
.menu-toggle .l2{ transform:translate(-50%,-50%); }
.menu-toggle .l3{ transform:translate(-50%,-50%) translateY(6px); }
body.menu-open .menu-toggle .l1{ transform:translate(-50%,-50%) rotate(45deg); }
body.menu-open .menu-toggle .l2{ opacity:0; }
body.menu-open .menu-toggle .l3{ transform:translate(-50%,-50%) rotate(-45deg); }
.menu-toggle:hover .line{ opacity:.9; transform-origin:center; }

/* === PAGE ================================================= */
.page{
  position:relative;
  height:100svh;
  width:100%;
  overflow:hidden;
}

/* === HERO (image gauche, texte droite) ==================== */
.page.hero{
  background:var(--heroColor, #0eb5e4);
  transition:background .6s ease;
}

/* layout */
.slide{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:3vw;
  width:min(88vw,1200px);
  pointer-events:none; /* image + layout don't block clicks */
}
.obj{
  width:clamp(260px,38vw,760px);
  height:auto;
  border-radius:24px;
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.25));
  user-select:none;
}

.hero-copy{
  width:min(560px,46vw);
  pointer-events:auto; /* allow button clicks */
}

.title{
  margin:0 0 18px;
  font-size:clamp(26px, 5.4vw, 64px);
  line-height:1.05;
  letter-spacing:-.02em;
  text-shadow:0 10px 30px rgba(0,0,0,.18);
  text-wrap:balance;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:18px 22px;
  margin-bottom:10px;
  opacity:.96;
}
.meta-chip{
  font-size:clamp(13px, 1.35vw, 16px);
  font-weight:600;
  color:#fff;
  text-shadow:0 10px 22px rgba(0,0,0,.12);
}
.hero-sub{
  font-size:clamp(14px, 1.5vw, 18px);
  font-weight:500;
  opacity:.92;
  margin-bottom:18px;
  text-shadow:0 10px 22px rgba(0,0,0,.12);
}

/* dots */
.hero-controls{
  position:absolute;
  left:50%;
  bottom:6vh;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:6;
}
.hero-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  background:rgba(255,255,255,.42);
  box-shadow:0 10px 20px rgba(0,0,0,.22);
}
.hero-dot.active{ background:#fff; }

/* hidden preload */
.preload-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* Tablet low height refinements */
@media (min-width: 769px) and (max-height: 750px){
  .slide{ top:48%; }
  .obj{ width:clamp(240px,34vw,640px); }
  .title{ font-size:clamp(24px,4.6vw,56px); }
}
@media (min-width: 769px) and (max-height: 620px){
  .slide{ top:46%; }
  .obj{ width:clamp(220px,32vw,560px); }
  .title{ font-size:clamp(22px,4.2vw,50px); }
}

/* Mobile & tablet: stack */
@media (max-width: 768px){
  .page.hero{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:80px; /* topbar */
  }
  .slide{
    position:static !important;
    transform:none !important;
    flex-direction:column;
    text-align:center;
    gap:14px;
    width:100%;
    max-width:520px;
    margin:0 auto;
  }
  .obj{
    width:86vw;
    max-width:420px;
    border-radius:18px;
  }
  .hero-copy{ width:100%; }
}
@media (max-width: 480px){
  .slide{ max-width:420px; }
  .obj{ width:84vw; max-width:360px; }
}

/* === DISCOVER BUTTON (oval) ================================ */
.ovalmorph{
  --h:64px;
  --r:999px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:0 28px;
  height:var(--h);
  min-width:clamp(240px,28vw,380px);
  border:none;
  border-radius:var(--r);
  cursor:pointer;
  overflow:hidden;
  background:transparent;
  color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.ovalmorph::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--r);
  background:linear-gradient(180deg,#ff6a00,#ff7f00);
  z-index:0;
  clip-path:circle(140% at 28px 50%);
  transition:clip-path .7s cubic-bezier(.22,.8,.2,1);
  box-shadow:inset 0 1px 0 #ffffff40;
}
.ovm-track{
  position:absolute;
  inset:4px;
  border-radius:calc(var(--r) - 4px);
  background:#ffffff20;
  box-shadow:inset 0 0 0 1px #ffffff30, inset 0 6px 20px #ffffff10;
  opacity:0;
  transform:scale(.96);
  transition:opacity .25s ease, transform .35s ease;
  z-index:1;
}
.ovm-label{
  position:relative;
  z-index:2;
  font-weight:700;
  letter-spacing:.02em;
}
.ovm-inline-arrow{
  position:relative;
  z-index:2;
  transition:opacity .22s ease, transform .28s ease;
}
.ovm-knob{
  --size:calc(var(--h) - 10px);
  position:absolute;
  top:50%;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:radial-gradient(110% 110% at 32% 30%, #9d163c, #7c0b28);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0;
  transform:translate(0,-50%) scale(.8);
  transition:opacity .3s ease .35s, transform .3s ease .35s;
  z-index:2;
  left:8px;
}
.ovalmorph.spawn-right .ovm-knob{ left:auto; right:8px; }
.ovalmorph:hover::after{ clip-path:circle(0 at calc(100% - 28px) 50%); }
.ovalmorph:hover .ovm-track{ opacity:1; transform:scale(1); }
.ovalmorph:hover .ovm-inline-arrow{ opacity:0; transform:translateX(6px); }
.ovalmorph:hover .ovm-knob{ opacity:1; transform:translate(0,-50%) scale(1); }
.ovalmorph.reverting::after{ clip-path:circle(140% at 28px 50%); transition-delay:.2s; }
.ovalmorph.reverting .ovm-knob{ opacity:0; transform:translate(0,-50%) scale(.8); transition-delay:0s; }
.ovalmorph.reverting .ovm-track{ opacity:0; transform:scale(.96); }
@media (max-width:480px){
  .ovalmorph{ --h:58px; padding:0 22px; min-width:min(86vw, 360px); }
}

/* === SUCTION overlay ======================================= */
#suction{
  position:fixed;
  inset:0;
  background:#000;
  z-index:60;
  pointer-events:none;
  display:none;
}
body:not(.discover-open):not(.panel-down) #suction{
  display:none !important;
  opacity:0 !important;
  transform:none !important;
  border-radius:0 !important;
}

/* === MENU overlay/panel ==================================== */
.menu-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:300;
  background:
    radial-gradient(circle at 20% 20%, #ffb347 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, #7c0bff 0%, transparent 60%),
    linear-gradient(135deg, #ff7b00 0%, #ff0077 40%, #00c2ff 100%);
  background-blend-mode:screen, overlay, normal;
  clip-path:circle(0 at var(--cx) var(--cy));
  transition:clip-path var(--overlayDur) cubic-bezier(.22,.61,.36,1),
             background 2s ease-in-out;
  animation:doxaGlow 10s ease-in-out infinite alternate;
}
@keyframes doxaGlow{
  0%{ background-position:0% 50%; filter:brightness(1) saturate(1.2); }
  50%{ background-position:100% 50%; filter:brightness(1.3) saturate(1.4); }
  100%{ background-position:0% 50%; filter:brightness(1) saturate(1.2); }
}
body.menu-open .menu-overlay,
body.menu-closing .menu-overlay{
  pointer-events:auto;
  clip-path:circle(160vmax at var(--cx) var(--cy));
}

.menu-panel{
  position:fixed;
  inset:0;
  z-index:310;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(25px) saturate(140%);
  background:rgba(10,10,10,.4);
  box-shadow:inset 0 0 80px rgba(255,255,255,0.05);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--panelDur) ease var(--overlayDur);
}
body.menu-open .menu-panel{ opacity:1; pointer-events:auto; }
body.menu-closing .menu-panel{
  opacity:0;
  pointer-events:none;
  transition-delay:0s;
}

.menu-grid{
  width:min(1100px,92vw);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:56px;
  align-items:center;
  transform:translateY(20px);
  transition:transform var(--gridDur) ease calc(var(--overlayDur) + .15s);
}
body.menu-open .menu-grid{ transform:none; }
body.menu-closing .menu-grid{
  transform:translateY(20px);
  transition-delay:0s;
}

.menu-item{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
}
body.menu-open .menu-item{ opacity:1; transform:none; }
body.menu-closing .menu-item{
  opacity:0;
  transform:translateY(10px);
  transition-delay:0s;
}

.close-hit{
  position:fixed;
  inset:0;
  z-index:100;
  background:transparent;
  border:none;
  display:none;
}
body.menu-open .close-hit{ display:block; }

.menu-visual{
  position:relative;
  aspect-ratio:4/3;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.18);
  background:#0b0b0b;
}
.menu-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.85;
  transform:scale(1.02);
  transition:opacity .35s ease, transform .45s ease;
}
.menu-visual-cap{
  position:absolute;
  left:12px;
  bottom:10px;
  font-size:12px;
  letter-spacing:.08em;
  opacity:.75;
}

.menu-col{ display:flex; flex-direction:column; gap:24px; }
.menu-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.menu-links .menu-item a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  background:linear-gradient(180deg, #ffffff12, #ffffff08);
  box-shadow:inset 0 0 0 1px #ffffff22;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.menu-links .menu-item a:hover{
  transform:translateX(4px);
  background:linear-gradient(180deg, #ffffff18, #ffffff10);
  box-shadow:inset 0 0 0 1px #ffffff33, 0 8px 22px rgba(0,0,0,.25);
}

.menu-socials{ display:flex; align-items:center; gap:12px; }
.menu-socials .soc{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:#ffffff14;
  box-shadow:inset 0 0 0 1px #ffffff26, 0 10px 24px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.menu-socials .soc:hover{
  transform:translateY(-2px);
  background:#ffffff22;
  box-shadow:inset 0 0 0 1px #ffffff3a, 0 14px 28px rgba(0,0,0,.32);
}

/* Drawer (optional) */
.menu-item.shift-up{ transform:translateY(-10px); }
.menu-item.shift-down{ transform:translateY(10px); }

.menu-drawer{
  overflow:hidden;
  max-height:0;
  opacity:0;
  pointer-events:none;
  border-radius:16px;
  border:1px solid #ffffff25;
  background:#00000033;
  backdrop-filter:blur(6px) saturate(140%);
  box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 #ffffff18;
  transition:max-height .45s cubic-bezier(.22,.8,.3,1), opacity .35s ease, margin-top .35s ease;
  margin-top:0;
}
.menu-drawer.open{
  max-height:420px;
  opacity:1;
  pointer-events:auto;
  margin-top:10px;
}
.drawer-pane{ padding:16px 18px 18px; }
.drawer-title{ margin:0 0 6px; font-weight:700; letter-spacing:.02em; }
.drawer-body{ margin:0; opacity:.92; line-height:1.6; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
.form-grid label.full{ grid-column:1 / -1; }
.form-grid input,
.form-grid textarea{
  color:#fff;
  background:#ffffff14;
  border:1px solid #ffffff28;
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
.form-grid input:focus,
.form-grid textarea:focus{ border-color:#ffffff66; }

.send-cta{
  margin-top:10px;
  background:#ff6a00;
  color:#fff;
  border:0;
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .2s ease;
}
.send-cta:hover{ transform:translateY(-1px); }

@media (max-width: 1024px){
  .menu-grid{
    width:min(94vw,640px);
    grid-template-columns:1fr;
    gap:32px;
    justify-items:center;
  }
  .menu-visual{ display:none;  }
  .menu-col{ order:1; width:100%; }
  .menu-links{ align-items:center; }
}
@media (max-width: 768px){
  .menu-panel{
    align-items:flex-start;
    justify-content:flex-start;
    padding:80px 16px 24px;
    overflow-y:auto;
  }
  .menu-grid{
    width:100%;
    max-width:420px;
    margin:0 auto;
    grid-template-columns:1fr;
    gap:24px;
  }
  .menu-visual{ display:none; }
  .menu-col{ width:100%; }
}
@media (max-width: 640px){
  .form-grid{ grid-template-columns:1fr; }
  .form-grid label.full{ grid-column:1 / -1; }
}

/* Topbar compact */
@media (max-width: 520px){
  .topbar{ height:56px; padding:0 12px; }
  .brand img{ height:36px; }
  .menu-toggle{ --size:40px; }
}

/* === DISCOVER overlay/panel ================================ */
#discoverOverlay{
  position:fixed;
  inset:0;
  z-index:52;
  background:var(--discoverColor, #0eb5e4);
  clip-path:circle(0 at var(--cx) var(--cy));
  transition:clip-path var(--discoverDur) cubic-bezier(.22,.61,.36,1),
             background .2s linear;
  pointer-events:none;
}
body.discover-open #discoverOverlay{
  clip-path:circle(160vmax at var(--cx) var(--cy));
  pointer-events:auto;
}

#discoverPanel{
  position:fixed;
  top:-100%;
  right:5%;
  width:30%;
  height:70%;
  z-index:130;

  display:grid;
  grid-template-rows:auto auto 1fr;
  align-items:start;
  justify-items:center;
  row-gap:12px;

  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(18px) saturate(160%);
  border-radius:0 0 28px 28px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  overflow:hidden;
  transition:top 1s cubic-bezier(.22,.8,.3,1);
}
body.panel-down #discoverPanel{ top:0; }

.panel-hero{
  width:100%;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
}
#discoverPanel img{
  width:88%;
  height:auto;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s ease .2s, transform .7s ease .2s;
}
body.asset-in #discoverPanel img{ opacity:1; transform:none; }

.panel-cta{
  position:static;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
body.asset-in .panel-cta{ opacity:1; transform:none; }

.btn-primary{
  background:#ff6a00;
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

/* service icons under panel */
.panel-services{
  position:fixed;
  top:calc(70% + 20px);
  right:5%;
  width:30%;
  display:flex;
  gap:14px;
  justify-content:center;
  padding:8px 0 16px;
  z-index:120;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
body.panel-down .panel-services{ opacity:1; transform:none; }

.svc-icon{
  --svc:#888;
  width:54px;
  height:54px;
  border-radius:50%;
  border:2px solid #ffffff88;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  font-size:14px;
  letter-spacing:.06em;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 #ffffff2a;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  background:radial-gradient(120% 120% at 30% 20%,
    color-mix(in srgb, var(--svc) 92%, #fff 0%) 0%,
    var(--svc) 100%);
}
.svc-icon:hover{
  transform:scale(1.08);
  border-color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 #ffffff35;
}
.svc-icon.active{
  outline:3px solid #ffffffaa;
  outline-offset:3px;
  filter:saturate(1.15) brightness(1.02);
}

/* left column text */
#leftWrap{
  position:fixed;
  top:120px;
  left:5%;
  max-width:420px;
  width:calc(100% - 10%);
  opacity:0;
  transform:translateY(8px);
  z-index:140;
}
body.copy-in #leftWrap{
  opacity:1;
  transform:none;
  transition:opacity .35s ease, transform .35s ease;
}

.big{
  font-size:clamp(22px, 3.2vw, 38px);
  line-height:1.15;
  margin:.2em 0 .5em;
  text-wrap:balance;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sub{
  color:#ffffffd9; /* FIX: readable on colored overlay */
  opacity:.95;
  line-height:1.7;
  font-weight:500;
  margin:0 0 .8em;
  max-width:100%;
}

/* hide discover when not active (prevents residue) */
body:not(.discover-open):not(.menu-open):not(.menu-closing) #discoverPanel,
body:not(.discover-open):not(.menu-open):not(.menu-closing) .panel-services,
body:not(.discover-open):not(.menu-open):not(.menu-closing) #leftWrap,
body:not(.discover-open):not(.menu-open):not(.menu-closing) .backbar{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
}
body.discover-open #discoverPanel,
body.discover-open .panel-services,
body.discover-open #leftWrap,
body.discover-open .backbar{
  visibility:visible !important;
  pointer-events:auto !important;
}

/* discover responsive */
@media (max-width: 1024px){
  #discoverPanel{ right:4%; width:38%; height:66%; }
  .panel-services{ right:4%; width:38%; }
  #leftWrap{ left:4%; width:calc(100% - 8%); max-width:420px; }
}
@media (max-width: 768px){
  #discoverPanel{
    right:16px;
    left:16px;
    width:auto;
    height:62%;
  }
  .panel-services{
    right:16px;
    left:16px;
    width:auto;
    top:calc(62% + 18px);
  }
  #leftWrap{
    left:16px;
    right:16px;
    width:auto;
    top:96px;
    z-index:150;
  }
  .sub{ font-size:14px; line-height:1.6; }
}
@media (max-width: 520px){
  #discoverPanel{ height:58%; }
  .panel-services{ top:calc(58% + 16px); }
}

/* === BACKBAR (Discover) =================================== */
.backbar{
  position:fixed;
  left:0;
  bottom:16px;
  width:100%;
  z-index:170;
  opacity:0;
  transform:translateY(8px);
  padding:0 24px;
}
body.back-in .backbar{
  opacity:1;
  transform:none;
  transition:opacity .25s ease .05s, transform .25s ease .05s;
}
.backbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  width:100%;
}
.link-realisations{
  font-weight:600;
  color:#ffffffcc;
  text-decoration:none;
  letter-spacing:.02em;
  font-size:15px;
  transition:color .25s ease, transform .25s ease;
}
.link-realisations:hover{ color:#fff; transform:translateY(-2px); }
.link-realisations:active{ transform:translateY(0); }

@media (max-width:520px){
  .backbar{ padding:0 16px; }
  .link-realisations{ font-size:14px; }
}

/* Back button variant */
.backbar .back-btn{
  --h:46px;
  padding:0 18px;
  min-width:150px;
  box-shadow:0 8px 16px rgba(0,0,0,.16);
}
.back-btn.back-left{
  display:inline-flex;
  justify-content:flex-end;
  gap:10px;
}
.back-btn.back-left::after{
  clip-path:circle(140% at calc(100% - 28px) 50%);
}
.back-btn.back-left:hover::after,
.back-btn.back-left:focus-visible::after{
  clip-path:circle(0 at 28px 50%);
}
.back-btn.back-left:hover .ovm-inline-arrow{
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .22s ease, transform .28s ease;
}
.back-btn.back-left .ovm-knob{ left:8px; right:auto; }
.back-btn.back-left.reverting::after{
  clip-path:circle(140% at calc(100% - 28px) 50%);
  transition-delay:.2s;
}

/* === PRELOADER DOXA ====================================== */
#preloader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 20%, #ffb347 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, #7c0bff 0%, transparent 60%),
    linear-gradient(135deg, #ff7b00 0%, #ff0077 40%, #00c2ff 100%);
  background-blend-mode:screen, overlay, normal;
  color:#fff;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.preloader-inner{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px 20px;
  border-radius:24px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18);
}
.preloader-logo{
  width:72px;
  height:auto;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.preloader-text{ margin:0; font-size:14px; opacity:.95; }
.preloader-bar{
  margin-top:4px;
  width:min(320px, 70vw);
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.25);
}
.preloader-bar-inner{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #ff7b00, #ff0077, #00c2ff);
  transition:width .25s ease-out;
}
@media (max-width: 480px){
  .preloader-inner{ width:86vw; padding-inline:16px; }
}

/* === RÉALISATIONS (1 écran) ================================ */
.realisations-section{
  min-height:100vh;
  padding:48px 0 24px;
  background:linear-gradient(135deg,#F7C948 0%,#FF6B6B 26%,#FF6AD5 45%,#7C5CFF 65%,#00C2FF 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
}
.realisations-inner{
  width:min(1100px,92vw);
  margin:0 auto;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  position:relative;
  z-index:1;
}
.realisations-main{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.realisations-preview{
  width:100%;
  max-width:760px;
  height:clamp(270px,58vh,400px);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.35), inset 0 0 0 1px #ffffff33;
  background:#00000040;
  display:grid;
  place-items:center;
}
.realisations-preview img{ width:100%; height:100%; object-fit:cover; }

.realisations-info{ text-align:center; max-width:720px; }
.realisations-title{ margin:0 0 4px; font-size:clamp(20px,3vw,26px); font-weight:700; }
.realisations-summary{ margin:0; font-size:14px; line-height:1.5; opacity:.96; color: white;}

.realisations-carousel{
  width:100%;
  max-width:900px;
  display:flex;
  align-items:center;
  gap:10px;
}
.real-nav{
  width:34px;
  height:34px;
  border-radius:999px;
  border:none;
  display:grid;
  place-items:center;
  background:#ffffff22;
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.25), inset 0 0 0 1px #ffffff33;
  font-size:18px;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.real-nav:hover{
  background:#ffffff33;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.3);
}
.real-track{
  flex:1;
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:4px 2px 4px;
  scroll-snap-type:x mandatory;
}
.real-track::-webkit-scrollbar{ height:5px; }
.real-track::-webkit-scrollbar-thumb{ background:#ffffff55; border-radius:999px; }
.real-track::-webkit-scrollbar-track{ background:transparent; }

.real-item{
  flex:0 0 auto;
  width:140px;
  border-radius:16px;
  overflow:hidden;
  border:0;
  padding:0;
  cursor:pointer;
  background:#00000040;
  scroll-snap-align:start;
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px #ffffff2a;
  transition:transform .2s ease, box-shadow .2s ease, outline .2s ease, opacity .2s ease;
}
.real-item img{ display:block; width:100%; height:90px; object-fit:cover; }
.real-item.active{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 30px rgba(0,0,0,.45), inset 0 0 0 2px #ffffffcc;
}
.real-item:not(.active){ opacity:.78; }
.real-item:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.real-footer{ margin-top:8px; text-align:center; font-size:13px; opacity:.96; }

@media (max-width:700px){
  .realisations-section{ padding:36px 0 20px; }
  .realisations-inner{ gap:14px; }
  .realisations-preview{ height:clamp(200px,40vh,300px); }
  .realisations-summary{ font-size:13px; }
  .real-nav{ display:none; }
}

/* floating back button (realisations) */
.real-back-btn{
  position:fixed;
  top:130px;
  right:40px;
  width:55px;
  height:55px;
  border-radius:50%;
  font-size:26px;
  font-weight:600;
  color:#fff;
  border:none;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(0,0,0,0.12);
  cursor:pointer;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease, transform .2s ease, background .2s ease;
}
.real-back-btn.visible{ opacity:1; pointer-events:auto; }
.real-back-btn:hover{ background:rgba(255,255,255,0.28); transform:scale(1.08); }
.real-back-btn:active{ transform:scale(0.95); }
@media (max-width:768px){
  .real-back-btn{
    top:90px;
    right:20px;
    width:48px;
    height:48px;
    font-size:22px;
  }
}

.menu-links .menu-item a{ pointer-events:auto; }
.menu-drawer{ pointer-events:auto; }

/* === FIX: Ghost menu on desktop (hide panel/overlay completely when closed) === */

/* Overlay */
.menu-overlay{
  opacity:0;
  visibility:hidden;
  will-change: clip-path, opacity;
}
body.menu-open .menu-overlay,
body.menu-closing .menu-overlay{
  opacity:1;
  visibility:visible;
}

/* Panel */
.menu-panel{
  visibility:hidden;        /* clé */
  transform:translateY(10px);
  opacity:0;
  will-change: opacity, transform;
}

body.menu-open .menu-panel,
body.menu-closing .menu-panel{
  visibility:visible;
  transform:none;
}

/* Optionnel mais utile: évite que le contenu du panel “bave” en fermant */
body:not(.menu-open):not(.menu-closing) .menu-panel *{
  filter:none !important;
}

/* Close-hit seulement quand le menu est actif */
.close-hit{ visibility:hidden; }
body.menu-open .close-hit,
body.menu-closing .close-hit{ visibility:visible; }


/* === FIX: Center subtitles under hero title (all screens) === */

.hero-copy{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centre tout horizontalement */
  text-align: center;
}

/* Ligne des sous-titres */
.hero-meta{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  width: 100%;
}

/* Chips */
.meta-chip{
  text-align: center;
}

/* Texte secondaire */
.hero-sub{
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}

/* ===== Discover mobile : sheet propre ===== */
@media (max-width: 768px){
  #leftWrap{
    position:relative;
    left:auto; right:auto;
    top:auto;
    width:auto;
    padding: 84px 16px 0;
  }

  #discoverPanel{
    left: 14px;
    right: 14px;
    width: auto;
    height: auto;
    max-height: 62vh;
    border-radius: 22px;
    overflow: hidden;
    top: -100%;
  }
  body.panel-down #discoverPanel{ top: 64px; }

  .panel-hero{ min-height: 220px; }
  #discoverPanel img{ width: min(88%, 360px); }

  .panel-services{
    position:fixed;
    left: 0;
    right: 0;
    width:100%;
    top: calc(64px + 62vh + 10px);
    justify-content:center;
    flex-wrap:wrap;
    gap: 12px;
  }
}

/* ================================
   FIX: Image du panel non floutée
   ================================ */
#discoverPanel img,
#discoverImg{
  filter: none !important;
  -webkit-filter: none !important;
  transform: translateZ(0); /* évite certains flous GPU */
}

/* Optionnel: rendu plus net */
#discoverPanel img{
  image-rendering: auto;
}

/* ================================
   DESKTOP: Panel à droite propre
   ================================ */
#discoverPanel{
  right: 5%;
  width: min(520px, 34vw);
  height: 70vh;
  max-height: 720px;
  border-radius: 0 0 28px 28px;
}

.panel-hero{
  width: 100%;
  display: grid;
  place-items: center;
}

/* Image bien visible (pas crop, pas flou) */
#discoverPanel img{
  width: min(420px, 88%);
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease .2s, transform .7s ease .2s;
}
body.asset-in #discoverPanel img{ opacity:1; transform: translateY(0); }

/* ================================
   MOBILE: layout panel -> texte -> icônes
   ================================ */
@media (max-width: 768px){

  /* Panel flottant en haut, centré */
  #discoverPanel{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(92vw, 520px);
    height: auto;
    max-height: 52vh;
    border-radius: 0 0 24px 24px;
  }

  /* Icônes (les 3 boutons) en bas */
  .panel-services{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 92px;          /* laisse la place au backbar */
    width: 100%;
    justify-content: center;
    gap: 14px;
  }

  /* Titre + sous-titre AU MILIEU, entre panel et icônes */
  #leftWrap{
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 170px;         /* AU-DESSUS des icônes */
    width: 100%;
    padding: 0 18px;
    text-align: center;
    z-index: 145;
  }

  /* Lisibilité sur fond */
  #leftWrap .big{
    color: #fff;
    margin: 0 0 10px;
    -webkit-line-clamp: 2;
  }
  #leftWrap .sub{
    color: rgba(255,255,255,.88);
    margin: 0;
    line-height: 1.5;
  }

  /* Si tu ne veux pas afficher la gallery sur mobile, tu peux la masquer */
  #leftWrap .gallery{ display:none; }
}

/* ================================
   FIX IMAGE FLOUTÉE (DESKTOP)
================================ */
#discoverPanel img,
#discoverImg{
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0); /* évite certains artefacts */
  will-change: transform, opacity;
}

/* ===== FIX NETTETÉ IMAGE PANEL (DESKTOP) ===== */
#discoverPanel .panel-hero,
#discoverPanel img{
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Ne jamais agrandir au-delà de la taille du fichier */
#discoverPanel img{
  width: auto !important;
  max-width: min(420px, 88%) !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Si tu veux forcer un rendu plus “sharp” (optionnel) */
#discoverPanel img{
  image-rendering: auto;
}

@media (max-width: 768px){

  /* Panel en haut */
  #discoverPanel{
    left: 16px !important;
    right: 16px !important;
    top: 64px !important;
    transform: none !important;
    width: auto !important;
    max-height: 52vh !important;
    height: auto !important;
  }

  /* Texte : centré, et on le positionne via JS */
  #leftWrap{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 18px !important;
    text-align: center !important;
    z-index: 160 !important;
  }

  #leftWrap .big,
  #leftWrap .sub{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Les 3 boutons : on positionne via JS */
  .panel-services{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    z-index: 165 !important;
  }
}

/* ✅ Select : texte lisible + dropdown options visibles */
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.9) 50%),
    linear-gradient(135deg, rgba(255,255,255,.9) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* ✅ Le plus important : options (dropdown) en noir sur fond blanc */
select option{
  color:#0f172a;
  background:#ffffff;
}

/* Option placeholder un peu plus douce */
select option[value=""]{
  color:#64748b;
}


@media (max-width: 768px){
  #discoverPanel{
    display:none !important;
  }
  
}


/* État ouvert : pas de scale sur le panel (évite rasterisation floue) */
body.discover-open #discoverPanel{
  transform: translateZ(0); /* ok */
}

/* Si tu as un scale caché/animé quelque part, force-le à 1 en état final */
body.discover-open.panel-down #discoverPanel{
  transform: translateZ(0) scale(1) !important;
}

#leftSub {
  white-space: pre-line;
}

#discoverPanel{
  position:fixed;
  top:-100%;
  right:5%;
  width:min(520px, 34vw);
  height:70vh;
  max-height:720px;
  z-index:130;

  display:grid;
  grid-template-rows:auto auto 1fr;
  align-items:start;
  justify-items:center;
  row-gap:12px;

  /* IMPORTANT: plus de backdrop-filter ici */
  background: transparent;
  border-radius:0 0 28px 28px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  overflow:hidden;
  transition:top 1s cubic-bezier(.22,.8,.3,1);

  /* garde le contenu net */
  -webkit-font-smoothing: antialiased;
  transform: translate3d(0,0,0);
}

#discoverPanel::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  z-index:0;
}

/* tout le contenu au-dessus du “verre” */
#discoverPanel > *{
  position:relative;
  z-index:1;
}

body.panel-down #discoverPanel{ top:0; }

#discoverImg{
  filter:none !important;
  -webkit-filter:none !important;
  transform: translate3d(0,0,0) !important;
  will-change: opacity, transform;
}

/* ===========================
   HARD FIX: image panel nette
   =========================== */

/* 1) Jamais de backdrop-filter sur le conteneur réel */
#discoverPanel{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;     /* stop rasterisation */
  filter: none !important;
  isolation: isolate;             /* couche propre */
}

/* 2) Le "verre" est sur ::before uniquement */
#discoverPanel::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  z-index:0;
}

/* 3) Tout le contenu passe AU-DESSUS du verre */
#discoverPanel > *{
  position:relative;
  z-index:1;
}

/* 4) L'image: aucune transformation GPU, aucune interpolation bizarre */
#discoverImg,
#discoverPanel img{
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  will-change: auto !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: auto;
}

/* ===== FIX FINAL: panel verre + image visible ===== */
#discoverPanel{
  position: fixed;              /* au cas où tes doublons changent */
  overflow: hidden;
  background: transparent !important;
  isolation: isolate;
}

/* le verre derrière */
#discoverPanel::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  z-index: 0;
  pointer-events:none;
}

/* tout le contenu devant */
#discoverPanel .panel-hero,
#discoverPanel .panel-cta{
  position: relative;
  z-index: 2;
}

/* l'image: VISIBLE par défaut (on ne dépend plus de asset-in) */
#discoverImg{
  display:block;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  width: min(420px, 88%);
  height: auto;
  object-fit: contain;
}

#discoverImg{ opacity:0; transform: translateY(30px); }
body.asset-in #discoverImg{ opacity:1; transform:none; transition: opacity .7s ease .2s, transform .7s ease .2s; }

/* ===== FIX: éviter les tailles fractionnaires (cause principale du flou) ===== */
#discoverPanel{
  width: 400px !important;     /* entier => net */
  right: 5% !important;
  height: 70vh;
  max-height: 720px;
}

/* image: taille entière aussi (évite interpolation) */
#discoverImg{
  width: 360px !important;     /* entier */
  max-width: 88% !important;
  height: auto !important;
  object-fit: contain !important;
}

#discoverPanel{ width: 520px; }
@media (max-width: 1400px){ #discoverPanel{ width: 480px; } }
@media (max-width: 1200px){ #discoverPanel{ width: 440px; } }
@media (max-width: 1024px){ #discoverPanel{ width: 400px; } }
@media (max-width: 900px){  #discoverPanel{ width: 360px; } }

/* =========================
   STOP BLUR (force net)
   ========================= */
#discoverPanel .panel-hero,
#discoverPanel .panel-hero * ,
#discoverImg{
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
}

/* IMPORTANT: si un blur vient d'un parent via filter, on isole */
#discoverPanel{
  filter: none !important;
  -webkit-filter: none !important;
  isolation: isolate !important;
}

/* ============================
   FIX: blur uniquement derrière
   (pas sur le contenu)
   ============================ */

#discoverPanel{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
  isolation: isolate;
}

/* On met le verre (blur) sur un calque derrière */
#discoverPanel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  pointer-events:none;
}

/* Contenu au-dessus du verre */
#discoverPanel .panel-hero,
#discoverPanel .panel-cta{
  position: relative;
  z-index: 2;
}

/* Image toujours nette */
#discoverImg{
  filter:none !important;
  -webkit-filter:none !important;
}