/* === 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,0.35);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.18);
}

.preloader-logo{
  width: 72px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,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,0.15);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.25);
}

.preloader-bar-inner{
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7b00, #ff0077, #00c2ff);
  transition: width .25s ease-out;
}

/* petit ajustement mobile */
@media (max-width: 480px){
  .preloader-inner{
    width: 86vw;
    padding-inline: 16px;
  }
}

  
  :root{
    --container:1200px;
    --bg:#0a0a0a; --fg:#f5f5f5; --muted:#9aa0a6;
    --cx:24px; --cy:24px; --overlay:#000; --ring:150vmax;
    --menu-gap:20px; --delay-step:70ms;

    /* Timings menu */
    --overlayDur:.7s;    /* expansion/rétraction cercle */
    --panelDur:.4s;      /* fade panel */
    --gridDur:.25s;      /* slide grille */
    --itemStep:.03s;     /* écart items ouverture */
    --itemStart:.20s;    /* offset items après overlay */

    /* Transition aspirée Discover */
    --suckDur:.8s;
    --panelRadius:24px;

    /* DiscoverOverlay */
    --discoverDur:.80s;
  }

  *{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;

    /* ⚡ Mobile-friendly */
    overflow-x: hidden;   /* pas de scroll horizontal */
    overflow-y: auto;     /* on peut scroller verticalement */
    min-height: 100svh;   /* au moins la hauteur de l’écran */
  }


  /* ===== 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;              /* ⬅️ au-dessus des calques Discover */
  pointer-events: auto;      /* autorise les clics */
} 
  .brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  z-index: 999;
}

.brand img {
  height: 48px;             /* ajuste selon ta mise en page */
  width: auto;
  border-radius: 8px;       /* optionnel pour un look doux */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.brand:hover img {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* === BOUTON BURGER → CROIX ENCERCLÉ === */
/* === BURGER TRANSPARENT → CROIX BLANCHE === */
.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;
}

/* traits blancs centrés */
.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); }

/* === état ouvert === */
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);
}

/* optionnel : petit hover subtil */
.menu-toggle:hover .line{
  opacity:.9;
  transform-origin:center;
}


  /* ===== HERO ===== */
  
  .page{position:relative; height:100svh; width:100%; overflow:hidden}
  .hero{background:#FFD100; transition:background .6s ease}
  .slide{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:3vw; width:min(70vw,980px); pointer-events:none}
  .obj{width:clamp(240px,28vw,460px); border-radius:12px; filter:drop-shadow(0 40px 50px rgba(0,0,0,.25)); user-select:none}
  .title{font-size:clamp(36px,7.4vw,92px); color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.18); white-space:nowrap}

  .bottom-stack{position:absolute; left:50%; bottom:8vh; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:18px; width:min(90vw, var(--container)); z-index:5}
  .services{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:28px; color:#fff; font-weight:600}
  .service{opacity:.65; cursor:pointer; position:relative}
  .service:hover{opacity:.85}
  .service.active{opacity:1}
  .service.active::after{content:""; position:absolute; left:0; right:0; height:3px; bottom:-8px; background:#fff; border-radius:3px}

  /* ===== HERO ===== */
.slide{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:3vw;
  width:min(78vw,1100px);               /* un peu plus large si possible */
  pointer-events:none
}
.obj{ width:clamp(200px,26vw,420px); border-radius:12px; filter:drop-shadow(0 40px 50px rgba(0,0,0,.25)); user-select:none }

/* Titre Hero : s’adapte et peut passer à la ligne */
.title{
  font-size:clamp(22px,5.2vw,64px);     /* avant: 36px–92px */
  line-height:1.08;
  color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.18);
  white-space:normal;                   /* ⬅ autorise le retour à la ligne */
  max-width:min(52vw,680px);            /* stoppe les débordements */
  text-wrap:balance;                    /* équilibre les lignes si dispo */
}

/* Layout compact sur écrans plus étroits */
@media (max-width: 900px){
  .slide{ flex-direction:column; text-align:center; gap:18px; width:min(92vw,680px) }
  .obj{ width:clamp(180px,48vw,360px) }
  .title{
    max-width:92vw;
    font-size:clamp(22px,7vw,25px);
  }
}

/* ===== DESKTOP / TABLETTE (≥ 769px) : bloc héro bien séparé des services ===== */
@media (min-width: 769px) {
  .slide{
    position: absolute;
    top: 40%;                          /* avant 50% → remonte le bloc */
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3vw;
  }

  .obj{
    margin: 0 !important;              /* on enlève les marges mobiles */
  }

  .title{
    margin: 0;
  }

  .bottom-stack{
    bottom: 5vh !important;            /* descend un peu les services + bouton */
  }
}



/* ---------- FIX MOBILE HERO (élimine l'espace vide) ---------- */
/* ---------- MOBILE (général) ---------- */
@media (max-width: 768px) {

  .slide {
    top: auto !important;
    bottom: 26vh !important;              /* remonte le bloc */
    transform: translateX(-50%) ;
  }

  .obj {
    width: 58vw !important;
    max-width: 300px !important;
    order: 2;
    margin-top: -3vh !important;          /* remonte l’image */
  }

  .title {
    order: 1;
    margin-top: -4vh !important;
    font-size: clamp(26px,6vw,38px) !important;
  }

  .bottom-stack {
    bottom: 7vh !important;
  }
}


/* ---------- MOBILE INTERMÉDIAIRE (361px → 480px) ---------- */
@media (min-width: 361px) and (max-width: 480px) {
  .slide {
    bottom: 30vh !important;          /* remonte tout le bloc */
    transform: translateX(-50%) ;
  }
  .obj {
    width: 64vw !important;
    max-width: 260px !important;
    margin-top: -6vh !important;      /* image clairement plus haut */
  }
  .title {
    margin-top: -2vh !important;      /* garde un peu d'air avec le haut */
  }
}


/* ---------- MOBILE XS (ultra petits écrans ≤360px) ---------- */
@media (max-width: 360px) {
  .slide {
    bottom: 30vh !important;              /* remonte tout le bloc */
    transform: translateX(-50%) ;
  }

  .obj {
    width: 68vw !important;
    max-width: 260px !important;
    margin-top: -6vh !important;          /* remonte l’image */
    order: 2;
  }

  .title {
    margin-top: -2vh !important;
    font-size: clamp(22px,7vw,25px) !important;
    order: 1;
  }

  .bottom-stack {
    bottom: 6vh !important;
  }
}

  /* ===== Discover (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)}
  .ovalmorph:focus-visible{outline:3px solid #fff8; outline-offset:3px}
  @media (max-width:480px){ .ovalmorph{ --h:58px; padding:0 22px } }

 
  /* ===== “SUCTION” OVERLAY ===== */
  #suction{
    position:fixed; inset:0; background:#000; z-index:60; pointer-events:none;
    transform:scale(1); transform-origin:50% 50%; border-radius:0; display:none;
  }

  /* Kill-switch : si Discover n'est pas actif, aucun résidu de #suction */
body:not(.discover-open):not(.panel-down) #suction{
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
}

  /* ===== MENU (ouverture d’abord, fermeture en 2 temps) ===== */
  .menu-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  background: radial-gradient(circle at 30% 30%, #ff6a00 0%, transparent 60%),
              radial-gradient(circle at 80% 70%, #7c0bff 0%, transparent 55%),
              linear-gradient(135deg, #0a0a0a 0%, #111 100%);
  background-blend-mode: screen;
  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: funPulse 6s ease-in-out infinite alternate;
}

/* effet de pulsation subtile */
@keyframes funPulse {
  0% {
    background-position: 0% 0%;
    filter: brightness(1);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.2);
  }
  100% {
    background-position: 0% 100%;
    filter: brightness(1);
  }
}

  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(30px) saturate(140%);
  background: rgba(10, 10, 10, 0.55);
  box-shadow: inset 0 0 120px rgba(255, 255, 255, 0.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--panelDur) ease var(--overlayDur);
}

/* quand ouvert */
body.menu-open .menu-panel {
  opacity: 1;
  pointer-events: auto;
}

/* texte dans le menu plus clair */
.menu-item a {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.15);
}
  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; }
  .menu-item:nth-child(1){ transition-delay: calc(var(--overlayDur) + var(--itemStart) + 0 * var(--itemStep)); }
  .menu-item:nth-child(2){ transition-delay: calc(var(--overlayDur) + var(--itemStart) + 1 * var(--itemStep)); }
  .menu-item:nth-child(3){ transition-delay: calc(var(--overlayDur) + var(--itemStart) + 2 * var(--itemStep)); }
  .menu-item:nth-child(4){ transition-delay: calc(var(--overlayDur) + var(--itemStart) + 3 * var(--itemStep)); }
  .menu-item:nth-child(5){ transition-delay: calc(var(--overlayDur) + var(--itemStart) + 4 * var(--itemStep)); }
  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}

  /* Overlay circulaire façon menu, mais pour Discover */
#discoverOverlay{
  position:fixed; inset:0;
  z-index:52;                   /* au-dessus du hero, sous le menu si besoin */
  background: var(--discoverColor, #000);
  clip-path: circle(0 at var(--cx) var(--cy));      /* point de départ = centre défini en JS */
  transition: clip-path var(--discoverDur) cubic-bezier(.22,.61,.36,1),
              background .2s linear;
  pointer-events:none;
}

/* Quand actif : couvre tout l'écran */
body.discover-open #discoverOverlay{
  clip-path: circle(160vmax at var(--cx) var(--cy));
  pointer-events:auto;
}

/* ---- Panneau Discover en grille : image / CTA / icônes ---- */

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

  display: grid;
  grid-template-rows: auto auto 1fr; /* 1) image  2) CTA  3) icônes en bas */
  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; }

/* Image */
.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: translateY(0); }

/* CTA juste sous l'image (ligne 2) */
.panel-cta{
  position: static;            /* force la position normale */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;                   /* pas de marges parasites */
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
body.asset-in .panel-cta{      /* apparaît après l'image */
  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);
}


/* Icônes des autres services en bas (ligne 3) */
/* Icônes des services SOUS le panel (déjà en dehors du panel) */
.panel-services{
  position: fixed;
  top: calc(70% + 20px);   /* juste sous le bas du panel (70%) */
  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: translateY(0); }

/* Icône circulaire colorée (couleur passée en --svc) */
.svc-icon{
  --svc:#888;                       /* fallback */
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--svc) 92%, #fff 0%) 0%, var(--svc) 100%);
  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;
}
.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); }

/* Si tu utilises une image à l'intérieur, elle ne doit pas masquer la couleur */
.svc-icon > img{
  width: 60%; height: 60%; object-fit: contain; pointer-events:none;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.2));
}


/* Colonne gauche */
/* Colonne gauche : calée sur la partie gauche, sans passer sous le panel */
#leftWrap{
  position: fixed;
  top: 120px;
  left: 5%;

  /* colonne texte bien délimitée */
  max-width: 420px;      /* tu peux réduire à 380px si tu veux plus d’espace */
  width: 100%;
  right: auto;           /* on supprime tout calcul avec right */

  opacity: 0;
  transform: translateY(8px);
  z-index: 140;
}
body.copy-in #leftWrap{
  opacity:1;
  transform:none;
  transition:opacity .35s ease, transform .35s ease;
}
.kicker{ opacity:.85; letter-spacing:.04em; font-weight:600; margin-bottom:6px; }
/* Titre Discover (colonne gauche) */
.big{
  /* taille responsive plus raisonnable */
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.15;
  margin: .2em 0 .5em;
  text-wrap: balance;

  /* >>> limite stricte à 2 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* nombre de lignes max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Si tu utilises .detail-title quelque part (panneau/detail), garde la même règle */
.detail-title{
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.15;
  margin: 0 0 12px;
  text-wrap: balance;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Petits écrans : on baisse un peu pour éviter toute coupe agressive */
@media (max-width: 780px){
  .big,
  .detail-title{
    font-size: clamp(20px, 5.4vw, 32px);
  }
}

.sub{ color:#1d1d1d; opacity:.95; line-height:1.7; font-weight:500; margin:0 0 .8em; max-width: 100%;  }

/* -------------------------- */
/* < 590px : tout se réduit   */
/* -------------------------- */
@media (max-width: 590px){

  /* Colonne texte à gauche */
  #leftWrap{
    width: 52vw;             /* ~ moitié de l’écran */
    left: 4vw;
  }

  /* Titre : plus petit et fluide */
  #leftTitle{
    font-size: clamp(20px, 5.4vw, 30px);
    line-height: 1.18;
  }

  /* Texte : taille liée à la largeur */
  #leftSub{
    font-size: clamp(13px, 3.5vw, 16px);
    line-height: 1.55;
  }

  /* Carte Discover à droite : réduit aussi */
  #discoverPanel{
    width: 40vw;
    right: 4vw;
  }

  .panel-cta .btn-primary,
  #contactBtnMobile{
    font-size: clamp(12px, 3.6vw, 15px);
    padding: 10px 16px;
    white-space: nowrap;
  }

  /* Icônes S / A / A → taille proportionnelle */
  .panel-services{
    gap: clamp(8px, 2.4vw, 14px);
  }

  .svc-icon{
    width: clamp(38px, 9vw, 50px);
    height: clamp(38px, 9vw, 50px);
    font-size: clamp(11px, 3vw, 13px);
  }

  /* Barre du bas : texte légèrement réduit aussi */
  .back-btn .ovm-label,
  .link-realisations{
    font-size: clamp(12px, 3.2vw, 14px);
  }
}

/* Sécurité pour les très petits écrans (≤ 360px) :
   on empile proprement si jamais ça devient trop serré */




/* Icônes des autres services en bas (ligne 3) */
/* Icônes des services SOUS le panel (déjà en dehors du panel) */
.panel-services{
  position: fixed;
  top: calc(70% + 20px);   /* juste sous le bas du panel (70%) */
  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: translateY(0); }

/* Icône circulaire colorée (couleur passée en --svc) */
.svc-icon{
  --svc:#888;                       /* fallback */
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--svc) 92%, #fff 0%) 0%, var(--svc) 100%);
  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;
}
.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); }

/* Si tu utilises une image à l'intérieur, elle ne doit pas masquer la couleur */
.svc-icon > img{
  width: 60%; height: 60%; object-fit: contain; pointer-events:none;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.2));
}


/* Colonne gauche */
#leftWrap{
  position:fixed; left:5%; top:120px; width:42%;
  opacity:0; transform:translateY(8px);
  z-index:140;
}

/* ===== DISCOVER : POSITION DU TEXTE SUR MOBILE (≤768px) ===== */
@media (max-width: 768px){
  #leftWrap{
    position: fixed;
    left: 16px;
    right: 16px;
    width: auto;
    top: 96px;                /* Titre en haut de l’écran */
    z-index: 150;
  }

  #leftWrap .big{
    font-size: clamp(20px, 6vw, 26px);
  }

  #leftWrap .sub{
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ===== DISCOVER : proportion fixe sous 650px ===== */
@media (min-width: 361px) and (max-width: 650px){

  /* Colonne gauche : ~52% de la largeur de l'écran */
  #leftWrap{
    position: fixed;
    top: 96px;         /* garde ta position verticale */
    left: 5vw;         /* marge gauche en % */
    right: auto;
    width: 52vw;       /* 52% de la largeur de l'écran */
    z-index: 150;
  }

  #leftWrap .big{
    font-size: clamp(18px, 4.4vw, 22px);
  }

  #leftWrap .sub{
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.6;
  }

  /* Discover panel : ~38% de la largeur de l'écran */
  #discoverPanel{
    top: 96px;         /* aligné avec le texte */
    right: 5vw;        /* marge droite en % */
    left: auto;
    width: 38vw;       /* 38% de la largeur de l'écran */
    height: auto;      /* laisse la hauteur s'ajuster */
  }

  #discoverPanel .panel-hero{
    width: 100%;
  }

  #discoverPanel img{
    width: 88%;
    height: auto;
  }
  /* Icône circulaire responsive et toujours ronde */
  /* Icônes S A A qui restent bien rondes et qui s’adaptent */
  .svc-icon{
    width: clamp(38px, 11vw, 46px);
    height: clamp(38px, 11vw, 46px);
    min-width: 38px;
    min-height: 38px;
  }

.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);
}

/* Image interne responsive */
.svc-icon > img{
  width: 60%;
  height: 60%;
  object-fit: contain;

  pointer-events:none;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.2));
}

/* Tant que Discover n'est PAS ouvert ET que le menu n'est pas ouvert,
   on garde le panneau invisible mais présent (pour que les transitions marchent) */
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) .cta-services-row {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* optionnel : léger décalage vers le bas pour l’entrée */
  transform: translateY(10px);
}

/* Quand Discover est ouvert, on laisse tes règles existantes (.panel-down, .asset-in…)
   gérer la transition de top/opacity, donc rien à ajouter ici */


  /* Quand Discover est ouvert (clic sur le bouton), on ré-affiche normalement */
  body.discover-open #discoverPanel {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.discover-open .panel-services,
  body.discover-open .cta-services-row {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ===== MOBILE XS (≤360px) : layout Discover ===== */
@media (max-width: 360px){


/* Tant que Discover n'est PAS ouvert ET que le menu n'est pas ouvert,
   on garde le panneau invisible mais présent (pour que les transitions marchent) */
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) .cta-services-row {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* optionnel : léger décalage vers le bas pour l’entrée */
  transform: translateY(10px);
}

/* Quand Discover est ouvert, on laisse tes règles existantes (.panel-down, .asset-in…)
   gérer la transition de top/opacity, donc rien à ajouter ici */



    #discoverPanel{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Taille du titre et du texte */
  #leftTitle{
    font-size: clamp(18px, 6.4vw, 24px);
  }

  #leftSub{
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.6;
  }

  /* Icônes S / A / A qui restent bien rondes */
  .svc-icon{
    width: clamp(38px, 11vw, 46px);
    height: clamp(38px, 11vw, 46px);
    min-width: 38px;
    min-height: 38px;
  }

  /* Barre Retour + Voir nos réalisations : on garde en bas */
  .backbar{
    bottom: 12px;
  }
}




body.copy-in #leftWrap{
  opacity:1; transform:none;
  transition:opacity .35s ease, transform .35s ease;
}
.kicker{ opacity:.85; letter-spacing:.04em; font-weight:600; margin-bottom:6px; }
/* Titre Discover (colonne gauche) */
.big{
  /* taille responsive plus raisonnable */
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.15;
  margin: .2em 0 .5em;
  text-wrap: balance;

  /* >>> limite stricte à 2 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* nombre de lignes max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Si tu utilises .detail-title quelque part (panneau/detail), garde la même règle */
.detail-title{
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.15;
  margin: 0 0 12px;
  text-wrap: balance;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Petits écrans : on baisse un peu pour éviter toute coupe agressive */
@media (max-width: 780px){
  .big,
  .detail-title{
    font-size: clamp(20px, 5.4vw, 32px);
  }
}

.sub{ color:#1d1d1d; opacity:.95; line-height:1.7; font-weight:500; margin:0 0 .8em; }

/* Réalisations */
.gallery{
  margin-top:8px; display:flex; gap:12px; overflow:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.thumb{
  flex:0 0 auto; width:190px; border-radius:14px; overflow:hidden;
  background:#ffffff10; backdrop-filter:blur(6px);
  scroll-snap-align:start; box-shadow:0 8px 20px rgba(0,0,0,.24);
}
.thumb a{ display:block; color:#fff; text-decoration:none; }
.thumb img{ display:block; width:100%; height:120px; object-fit:cover; }
.thumb .cap{ padding:8px 10px; font-size:14px; text-align:center; background:#00000045; }

/* Bouton Retour (apparition) */
.backbar{
  position:fixed; left:16px; bottom:16px; z-index:170;
  opacity:0; transform:translateY(8px);
}
body.back-in .backbar{
  opacity:1; transform:none;
  transition:opacity .25s ease .05s, transform .25s ease .05s;
}
.backbtn{
  padding:10px 14px; border-radius:10px; border:1px solid #ffffff50;
  background:#00000055; color:#fff; backdrop-filter:blur(6px); cursor:pointer;
}

/* -- Retour plus petit (ovale orange) -- */
.backbar .back-btn{
  --h: 46px;          /* hauteur du bouton (avant 64px) */
  padding: 0 18px;    /* moins large */
  min-width: 150px;   /* largeur mini */
  box-shadow: 0 8px 16px rgba(0,0,0,.16);
}
.backbar .back-btn .ovm-label{ font-size: 14px; }
.backbar .back-btn .ovm-inline-arrow,
.backbar .back-btn .ovm-knob-arrow{ font-size: 14px; }

/* encore un peu plus petit sur mobile */
@media (max-width: 520px){
  .backbar .back-btn{ --h: 42px; padding: 0 14px; min-width: 135px; }
  .backbar .back-btn .ovm-label{ font-size: 13px; }
}

/* ===== Bouton RETOUR orienté à gauche ===== */
.back-btn.back-left{
  /* taille : conserve ce que tu as déjà défini, ou adapte ici */
  --h: 46px;
  padding: 0 18px;
  min-width: 150px;

  /* contenu aligné à DROITE au repos */
  display:inline-flex;
  justify-content:flex-end;     /* contenu packé à droite */
  gap:10px;
}

/* Couche orange: ASPIRATION vers la GAUCHE au hover */
.back-btn.back-left::after{
  /* orange plein au repos (centre gauche à 28px) */
  clip-path: circle(140% at calc(100% - 28px) 50%);
}
.back-btn.back-left:hover::after,
.back-btn.back-left:focus-visible::after{
  /* s’effondre côté GAUCHE */
  clip-path: circle(0 at 28px 50%);
}

/* Rail translucide identique */
.back-btn.back-left .ovm-track{}

/* Inline arrow + label visibles à droite au repos */
.back-btn.back-left .ovm-inline-arrow,
.back-btn.back-left .ovm-label{
  position:relative; z-index:2;
}

/* Au hover: on masque la flèche inline (celle dans le texte),
   la boule apparait avec une flèche dedans */
.back-btn.back-left:hover .ovm-inline-arrow{
  opacity:0; transform:translateX(-6px);
  transition:opacity .22s ease, transform .28s ease;
}

/* BOULE violette positionnée à GAUCHE */
.back-btn.back-left .ovm-knob{
  --size: calc(var(--h) - 10px);
  left:8px; right:auto;           /* clé : à gauche */
  top:50%;
  width:var(--size); height:var(--size);
  border-radius:50%;
  background:radial-gradient(110% 110% at 32% 30%, #9d163c, #7c0b28);
  display:grid; place-items:center;
  opacity:0; transform:translate(0,-50%) scale(.8);
  transition:opacity .3s ease .35s, transform .3s ease .35s;
  z-index:2;
}
.back-btn.back-left:hover .ovm-knob{
  opacity:1; transform:translate(0,-50%) scale(1);
}

/* Texte un poil plus petit (optionnel) */
.back-btn.back-left .ovm-label{ font-size:14px; }
.back-btn.back-left .ovm-inline-arrow,
.back-btn.back-left .ovm-knob-arrow{ font-size:14px; }

/* État de retour (quand on quitte le bouton) */
.back-btn.back-left.reverting::after{
  clip-path: circle(140% at calc(100% - 28px) 50%);
  transition-delay:.2s;
}
.back-btn.back-left.reverting .ovm-knob{
  opacity:0; transform:translate(0,-50%) scale(.8);
  transition-delay:0s;
}
.back-btn.back-left.reverting .ovm-track{
  opacity:0; transform:scale(.96);
}

/* Focus accessible */
.back-btn.back-left:focus-visible{
  outline:3px solid #fff8; outline-offset:3px;
}

/* ===== BARRE BAS GAUCHE : Retour + Lien ===== */
.backbar{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:170;
  opacity:0;
  transform:translateY(8px);
}
body.back-in .backbar{
  opacity:1;
  transform:none;
  transition:opacity .25s ease .05s, transform .25s ease .05s;
}

/* aligner le bouton + le lien horizontalement */
.backbar-inner{
  display:flex;
  align-items:center;
  gap:28px;          /* espace entre bouton et lien */
}

/* lien “Voir nos réalisations” */
.link-realisations{
  font-weight:600;        /* fin mais bold élégant */
  color:#ffffffcc;        /* blanc légèrement adouci */
  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);
}

/* responsive */
@media (max-width:520px){
  .backbar-inner{ gap:18px; }
  .link-realisations{ font-size:14px; }
}

/* ===== BARRE BAS : Bouton à gauche / Lien à droite ===== */
.backbar{
  position:fixed;
  left:0;
  bottom:16px;
  width:100%;
  z-index:170;
  opacity:0;
  transform:translateY(8px);
  padding:0 24px; /* marge latérale */
}
body.back-in .backbar{
  opacity:1;
  transform:none;
  transition:opacity .25s ease .05s, transform .25s ease .05s;
}

/* disposition horizontale */
.backbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between; /* <-- clé : envoie le lien à droite */
  gap:28px;
  width:100%;
}

/* Lien “Voir nos réalisations” */
.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);
}

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

/* ==== MENU : Colonne visuelle (aperçu) ==== */
.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 : Liste des liens ==== */
.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 : Réseaux ==== */
.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);
}

/* Assure que le menu est au-dessus du Discover */
.menu-overlay{ z-index:300; }
.menu-panel{ z-index:310; }
.topbar{ z-index:400; }          /* logo + burger restent au-dessus si désiré */

.menu-visual img {
  opacity: .85;
  transform: scale(1.02);
  transition: opacity .35s ease, transform .45s ease;
}




/* ==== FOND DU MENU PANEL façon logo DOXA ==== */
.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;
}

/* Animation lumineuse fluide */
@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);
  }
}

/* Fond du panneau du menu au-dessus */
.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, 0.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;
}

/* === Tiroir sous le menu DOXA === */
.menu-item { transition: transform .35s cubic-bezier(.22,.8,.3,1); }
.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);
}
.send-cta:hover { transform: translateY(-1px); }

/* ===================================================== */
/* 🔥 Ultra responsive mobile / tablette DOXA landing    */
/* ===================================================== */

/* 1. Grille du MENU pleine largeur sur mobile */
@media (max-width: 1024px){
  .menu-grid{
    width: min(94vw, 640px);
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
  }

  .menu-visual{
    order: 2;
    text-align: center;
  }

  .menu-col{
    order: 1;
    width: 100%;
  }

  .menu-links{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/* MENU : comportement mobile, tout visible + scrollable */
@media (max-width: 768px) {
  .menu-panel {
    align-items: flex-start;         /* plus centré verticalement */
    justify-content: flex-start;
    padding: 80px 16px 24px;         /* espace sous la topbar */
    overflow-y: auto;                /* le menu peut scroller */
  }

  .menu-grid {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    grid-template-columns: 1fr;      /* une seule colonne */
    gap: 24px;
  }

  .menu-visual {
    display: none;
  }

  .menu-col {
    width: 100%;
  }
}

/* ========== CENTRAGE VERTICAL COMPLET DU MENU ========== */
body.menu-open .menu-open {
    display: flex !important;
    flex-direction: column;
    justify-content: center;   /* centrage vertical */
    align-items: center;       /* centrage horizontal */
    min-height: 100vh;
    padding: 20px 0;
}

/* Boutons du menu */
.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    align-items: center;
}

/* Bloc d'information (Qui nous sommes / Contact / Formulaire) */
.menu-card {
    width: 92%;
    max-width: 420px;
    margin-top: 18px;
}

/* Empêche le débordement sur mobile */
@media (max-width: 768px) {
    .menu-card {
        transform: scale(0.95);     /* Ajuste si nécessaire */
    }
}

/* Très petits écrans 300–360px : réduire légèrement */
@media (max-width: 360px) {
    .menu-card {
        transform: scale(0.90);
    }
}

/* 5. Formulaire du tiroir : une seule colonne sur mobile */
@media (max-width: 640px){
  .form-grid{
    grid-template-columns: 1fr;
  }

  .form-grid label.full{
    grid-column: 1 / -1;
  }
}

/* 6. Topbar plus compacte sur très petits écrans */
@media (max-width: 520px){
  .topbar{
    height: 56px;
    padding: 0 12px;
  }

  .brand img{
    max-height: 32px;
  }
}

/* HERO tablette : éviter le mélange avec les services (à partir de 769px) */
@media (min-width: 769px) and (max-height: 750px) {

  .page.hero{
    height: 100vh;                /* 1 écran */
  }

  .page.hero .slide{
    top: 36%;                     /* AVANT : 40% / 50% → on remonte le bloc */
    gap: 2.4vw;                   /* un peu moins d’espace entre image et texte */
  }

  .page.hero .obj{
    width: clamp(220px, 22vw, 340px);   /* image un peu plus petite */
  }

  .page.hero .title{
    font-size: clamp(28px, 4.2vw, 52px); /* titre plus compact */
    max-width: 48vw;
  }

  .page.hero .bottom-stack{
    bottom: 8vh;                  /* services + Discover bien décollés du slide */
  }
}

/* Cas très serré (écrans encore plus bas) */
@media (min-width: 769px) and (max-height: 620px) {

  .page.hero .slide{
    top: 33%;                     /* on remonte encore un peu */
  }

  .page.hero .obj{
    width: clamp(200px, 20vw, 320px);
  }

  .page.hero .title{
    font-size: clamp(24px, 3.6vw, 46px);
  }
}


/* ---------- HERO MOBILE : remonter sans casser le slide ---------- */
@media (max-width: 600px) {

  /* on NE touche plus au transform, GSAP s’en occupe */
  #slideHero{
    top: 38%;               /* centre plus haut (50% -> 38%) */
  }

  .obj{
    width: 64vw;
    max-width: 250px;
  }

  .title{
    font-size: clamp(20px, 6.4vw, 26px);
  }

  .bottom-stack{
    bottom: 6vh;
  }
}

/* ===================== SECTION RÉALISATIONS (version 1 écran) ===================== */

.realisations-section{
  min-height:100vh;                       /* occupe UNE hauteur d'écran */
  padding:48px 0 24px;                    /* padding réduit */
  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;          /* répartit grand visuel / carrousel */
  gap:18px;
}

/* bloc principal : grande image + texte */
.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);         /* hauteur limitée en fonction de l’écran */
  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;
}

/* infos projet */
.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;
}

/* CARROUSEL HORIZONTAL */
.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;
}

/* FOOTER collé à la section, sans gros espace */
.real-footer{
  margin-top:8px;
  text-align:center;
  font-size:13px;
  opacity:.96;
}
.real-footer .heart{
  margin:0 4px;
}

/* Responsive : sur mobile on accepte que ça dépasse un peu l'écran,
   donc on ré-autorise plus de marge si besoin */
@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; /* sur mobile : swipe horizontal */
  }
}

/* ===== Bouton retour en haut des réalisations ===== */

/* Le conteneur reste positionné, on garde le z-index pour la carte */
.realisations-inner {
  position: relative;
  z-index: 1;
}

/* Bouton flotant (invisible par défaut) */
.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;            /* caché par défaut */
  pointer-events: none;  /* pas cliquable tant qu’il est invisible */
  transition: opacity .35s ease,
              transform .2s ease,
              background .2s ease;
}

/* État visible : activé via JS quand la section #realisations est en vue */
.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);
}

/* Option : placer un peu plus bas sur mobile */
@media (max-width: 768px) {
  .real-back-btn {
    top: 90px;
    right: 20px;
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
}

/* === HERO MOBILE (0–480px) : tout empilé et centré, sans chevauchement === */
@media (max-width: 480px) {

  /* La page hero devient un conteneur flex vertical */
  .page.hero{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;       /* centrage vertical */
    align-items: center;           /* centrage horizontal */
    height: 100svh;
    min-height: 100svh;
    padding-top: 80px;             /* laisse la place pour la topbar */
    overflow: hidden;
  }

  /* Le bloc image + titres ne flotte plus en absolute */
  .page.hero .slide,
  #slideHero{
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none ;

    width: 100%;
    max-width: 420px;
    margin: 0 auto 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  .page.hero .obj{
    width: 70vw;
    max-width: 260px;
  }

  .page.hero .title{
    max-width: 90vw;
    font-size: clamp(22px, 7vw, 26px);
    white-space: normal;
  }

  /* Discover + services passent en dessous, dans le flux normal */
  .page.hero .bottom-stack{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    gap: 12px;
  }
}

/* === FIX HERO DESKTOP / TABLETTE : recentrer le bloc image + titre === */
@media (min-width: 769px) {
  .page.hero{
    height: 100vh;
  }

  .page.hero .slide{
    top: 50% !important;              /* centre verticalement */
    transform: translate(-50%, -50%); /* garde le centrage */
  }

  .page.hero .bottom-stack{
    bottom: 8vh !important;           /* services + Discover bien séparés */
  }
}