/* ===================================================================
   PIYA — Style HeyWorld-like (fond clair + halo bleu)
   =================================================================== */

/* --------------------- Root & Base --------------------- */
:root{
  --piya-text:#1F2937;
  --piya-border:#E5E7EB;
  --hero-gutter: clamp(0px, 1vw, 12px);
  --hero-panel-inset: clamp(0px, 0.5vw, 8px);
  --hero-panel-radius: 28px;
}

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--bg-base);
  overflow-x: hidden;  /* plus de débordement ni scroll horizontal */
}

body{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--piya-text);
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: -12% -6% -12% -6%;
  z-index: -1;
background:
      radial-gradient(60% 60% at 20% 30%, rgba(124, 58, 237, 0.12), transparent 78%),
      radial-gradient(50% 50% at 80% 20%, rgba(59, 130, 246, 0.11), transparent 80%),
      radial-gradient(58% 58% at 60% 85%, rgba(99, 102, 241, 0.10), transparent 80%);
    filter: blur(3px) saturate(100%);
  animation: auroraMove 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes auroraMove {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.0%, -1.8%, 0) scale(1.03); }
  100% { transform: translate3d(-2.0%, 1.6%, 0) scale(1.035); }
}

/* ================= NAVBAR (fixed + blur + pilule) ================= */
  .piya-header-wrap{
    font-family:'Poppins', sans-serif !important;
    position:relative; z-index:50;
    padding:0; margin:0; height:0;      /* supprime le vide au-dessus du hero */
    text-align:center;
  }
  .piya-header{
    position:fixed; top:16px; left:50%; transform:translateX(-50%); /* centrée et toujours visible */
    z-index:60;
    display:inline-block;
    border:1px solid rgba(0,0,0,.08);
    border-radius:32px;
    padding:0 32px;
    background:rgba(255,255,255,.55);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
    backdrop-filter:saturate(160%) blur(10px);
    box-shadow:0 6px 20px rgba(0,0,0,.06);
  }
/* === Full-width blurred backdrop behind sticky nav (with fade, no seam) === */
.piya-header-wrap::before{
  content:"";
  position: fixed;
  top: 0; left: 0; right: 0;
  /* un peu plus haut + 1px d'overscan pour éviter toute couture */
  height: 98px;
  z-index: 55;                 /* sous .piya-header (60), au-dessus du contenu */
  pointer-events: none;

  /* micro-astuce anti‑subpixel seam sur certains écrans */
  transform: translateZ(0);
}
  .piya-header .row{ display:flex; align-items:center; justify-content:center; height:64px; gap:40px }
  .piya-brand{display:flex; align-items:center; gap:10px; color:var(--piya-text); text-decoration:none; font-weight:700; font-size:18px}
  .piya-brand img{height:28px; width:auto; display: block; transition: transform 0.6s ease-in-out; /* vitesse + fluidité */}
  .piya-brand img:hover {transform: rotate(360deg); /* fait tourner le logo */}


  .piya-menu{display:flex; gap:28px; align-items:center}
  .piya-menu a{
    font-family:'Poppins', sans-serif !important;
    font-weight:500 !important; font-size:16px !important;
    color:var(--piya-text) !important;
    text-decoration:none; position:relative; padding:6px 2px;
  }
  .piya-menu a:after{content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:currentColor; transition:width .2s ease}
  .piya-menu a:hover:after{width:100%}
  .piya-menu a.active{ color:#0f172a !important; font-weight:600 !important }
  .piya-menu a.active:after{ width:100% }

  .piya-burger{display:none; background:none; border:1px solid var(--piya-border); border-radius:8px; height:40px; width:44px; padding:0; align-items:center; justify-content:center; cursor:pointer}
  .piya-burger span{display:block; width:20px; height:2px; background:var(--piya-text); position:relative}
  .piya-burger span:before, .piya-burger span:after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--piya-text); transition:.2s}
  .piya-burger span:before{top:-6px} .piya-burger span:after{bottom:-6px}
  .piya-burger[aria-expanded="true"] span{background:transparent}
  .piya-burger[aria-expanded="true"] span:before{top:0; transform:rotate(45deg)}
  .piya-burger[aria-expanded="true"] span:after{bottom:0; transform:rotate(-45deg)}

  @media (max-width: 768px){

  /* barre étendue */
  .piya-header{
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: 620px;
    padding: 0 18px;
    height: 62px;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    isolation: isolate;
  }

  .piya-header .row{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* burger visible */
  .piya-burger{
    display: inline-flex !important;
  }

  /* menu dropdown compact */
  .piya-menu{
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(62px + 12px);

    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    border-radius: 32px;
    box-shadow: 0 14px 34px rgba(0,0,0,.16);

    display: none !important;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
  }

  .piya-menu a{
    font-size: 15px;
    padding: 6px 0;
    border-radius: 16px;
  }

  .piya-menu.open{
    display: flex !important;
  }
}

  
  :target{scroll-margin-top:110px;} /* compense la nav fixed (64px + marges) */

/* ---------- LAYOUT GLOBAL ---------- */
.hero-v2{
  width:100%;
  padding: clamp(120px, 16vh, 160px) 4vw 120px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-v2-inner{
  width:100%;
  /* plus de max-width ici : on prend toute la largeur */
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 50% / 50% */
  align-items:center;
  gap:40px;
}

/* ---------- TEXTE GAUCHE ---------- */
.hero-v2-left{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.hero-v2-title{
  margin:0;
  font-weight:500;
  font-size:clamp(34px, 3.2vw, 46px);
  line-height:1.15;
    color:#4FA0C9; text-shadow:0 2px 0 rgba(0,0,0,.08);

    /* Dégradé bleu → violet animé */
    background: linear-gradient(270deg, #43A6D9, #A49FE2, #43A6D9);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

  animation: gradientFlow 3s ease infinite;
  }

  /* Animation du gradient */
  @keyframes gradientFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }


.hero-v2-title .accent{
  font-family:"Pacifico";
  color:#0f172a;
}

.hero-v2-text{
  margin:0;
  max-width:480px;
  font-size:15px;
  line-height:1.7;
  color:#334155;
}

.hero-v2-stores{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.hero-v2-stores img{
  height:44px;
  width:auto;
  display:block;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* ---------- COLONNES DROITE ---------- */
.hero-v2-right{
  display: flex;
  justify-content: space-between; /* ⬅️ les colonnes se répartissent totalement */
  gap: 0;                          /* ⬅️ collées (ou mets 10px si tu veux) */
  align-items: stretch;
  width: 100%;                     /* ⬅️ permet d’utiliser toute la zone droite */
}

/* Chaque colonne */
.hero-column{
  position: relative;
  flex: 1;                   /* ⬅️ chaque colonne prend toute la place disponible */
  min-width: 0;              /* ⬅️ essentiel pour éviter les débordements */
  height: clamp(840px, 58vh, 560px);
  border-radius: 32px;
  overflow: hidden;
}
/* Piste animée dans chaque colonne */
.hero-column-track{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Images */
.hero-column img{
  display:block;
  width:100%;
  height:100%;            /* ⬅️ l’image remplit la carte */
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 18px 40px rgba(15,23,42,0.32);
}

/* ---------- ANIMATIONS SCROLL ---------- */

/* Colonne qui va vers le bas */
.hero-column-track-down{
  animation: scroll-down 26s linear infinite;
}

/* Colonne qui va vers le haut */
.hero-column-track-up{
  animation: scroll-up 26s linear infinite;
}

@keyframes scroll-down{
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); } /* on fait défiler la moitié car contenu dupliqué */
}

@keyframes scroll-up{
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px){
  .hero-v2-inner{
    grid-template-columns:1fr;
    gap:40px;
  }

  .hero-v2-left{
    order:1;
    text-align:center;
    align-items:center;
  }

  .hero-v2-text{
    max-width:100%;
  }

  .hero-v2-stores{
    justify-content:center;
  }

  .hero-v2-right{
    order:2;
    justify-content:center;
  }

  .hero-column{
    width: 160px;
    height: 340px;
  }

  .hero-column img{
    height:220px;
  }
}

@media (max-width: 640px){
  .hero-v2-right{
    gap:10px;
  }
  .hero-column{
    width: 130px;
    height: 300px;
  }
  .hero-column img{
    height:200px;
  }
}

/* --------------------- UTILITIES --------------------- */
img{ max-width:100%; height:auto; display:block }
figure{ margin:0 }

/* --------------------- Actors (piya-actor, pa-*) --------------------- */
/* ================================
   PIYA ACTOR — New Section (DA Match)
   ================================ */

.piya-actor{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 6px;
}

/* fond subtil + aura propre */
.piya-actor::before{
  content:"";
  position:absolute;
  inset:-30% -15%;
  z-index:0;
  pointer-events:none;
  background:transparent;
  filter: blur(10px);
}

/* SECTION wrapper */
.pa-section{
  position: relative;
  z-index: 1;
  padding: clamp(64px, 7vw, 96px) 20px;
}

/* shell centré + bloc “glass” soft */
.pa-shell{
  max-width: 1120px;
  margin: 0 auto;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(15,23,42,0.07);
  border-radius: 28px;
  box-shadow: 0 18px 52px rgba(2,6,23,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(22px, 3.2vw, 34px);
}

/* Header */
.pa-head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 22px;
}

.pa-kicker{
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(15,23,42,.62);
}

.pa-kicker::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(39,174,249,.85);
  box-shadow: 0 10px 24px rgba(39,174,249,.25);
}

.pa-title{
  margin: 0 0 12px;
  font-weight: 300;
  font-size: clamp(22px, 2vw + 1rem, 36px);
  line-height: 1.22;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.pa-accent{
  font-weight: 500;
  font-family:"Pacifico";
}

.pa-sub{
  margin: 0;
  font-weight: 300;
  font-size: clamp(14px, 1vw + .7rem, 16.5px);
  line-height: 1.7;
  color: rgba(15,23,42,.74);
}

/* Grid images */
.pa-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}

@media (max-width: 1100px){
  .pa-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .pa-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.pa-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 12px 30px rgba(2,6,23,0.10);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

.pa-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(2,6,23,0.14);
}

.pa-img{
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(0.98);
  transform: scale(1.02);
  transition: transform .6s ease;
}
.pa-card:hover .pa-img{ transform: scale(1.08); }

/* Caption overlay (clean, readable) */
.pa-cap{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;

  display: flex;
  flex-direction: column;
  gap: 2px;

  padding: 12px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(15,23,42,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pa-cap-title{
  font-size: 14px;
  font-weight: 600;
  color: rgba(15,23,42,0.92);
}

.pa-cap-sub{
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(15,23,42,0.62);
}

/* Decorative glow on hover */
.pa-card::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(35% 35% at 20% 20%, rgba(39,174,249,.18), transparent 70%),
    radial-gradient(30% 30% at 80% 70%, rgba(124,58,237,.12), transparent 72%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.pa-card:hover::after{ opacity: 1; }

/* --------------------- Special text --------------------- */
.special-text{
    font-weight: 500;
    font-family:"Pacifico";
    color: #4FA0C9; 
}

/* --------------------- Bobby Section --------------------- */
.bobby-section{ position:relative; padding:72px 20px; width:100%; }
.bobby-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap: clamp(24px, 5vw, 64px); align-items:center; max-width:1200px; margin:0 auto; padding:0 24px; }
@media(max-width:980px){ .bobby-inner{ grid-template-columns:1fr; } }

.bobby-title{
  font-weight:300; font-size:clamp(22px, 2vw + 1rem, 32px); line-height:1.45; margin:0 0 18px; color:#0f172a;
}
.bobby-accent{
  font-weight: 500;
  font-family:"Pacifico";
}
.bobby-p{ font-weight:300; font-size:clamp(14px, 1vw + .75rem, 16px); line-height:1.65; margin:0 0 14px; color:#334155; }
.bobby-illu{ width:100%; min-height:280px; display:flex; justify-content:center; align-items:center; }
#bobby-lottie{ width:100%; height:360px; max-width:460px; }
@media (max-width:980px){ #bobby-lottie{ height:300px; } }
.bobby-block{ margin-top:168px; }
@media(max-width:980px){ .bobby-block{ margin-top:96px; } }

/* =========================
   Bobby — Vidéo en boucle
   ========================= */

.bobby-video{
  width: 100%;
  max-width: 460px;      /* même logique que ton ancien lottie */
  height: auto;
  display: block;

  border-radius: 20px;   /* match avec ta DA */
  object-fit: contain;

  /* rendu clean */
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
}

/* Mobile */
@media (max-width:980px){
  .bobby-video{
    max-width: 360px;
  }
}


/* --------------------- Progress Block --------------------- */

/* Decorative drops (require assets/Drop.png) */
.progress-decos{ position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.drop{ position: absolute; opacity: .95; filter: drop-shadow(0 8px 24px rgba(2,6,23,.12)); }
/* Right drop (like screenshot) */
.drop-right{ right: max(-50px, -2vw); top: clamp(40px, 6vw, 120px); width: clamp(120px, 18vw, 280px); }
/* Left drop (mirror, lower on page) */
.drop-left{ left: max(-20px, -2vw); bottom: clamp(40px, 6vw, 120px); width: clamp(80px, 12vw, 200px); }
/* Responsiveness */
@media (max-width: 980px){
  .drop-right{ width: clamp(100px, 22vw, 220px); top: clamp(20px, 8vw, 80px); }
  .drop-left{ width: clamp(70px, 16vw, 180px); bottom: clamp(20px, 8vw, 80px); }
}

.progress-block{ position:relative; width:100%; isolation:isolate; }
.progress-max{ max-width:1200px; margin:0 auto; padding:0 24px; }
.progress-text{ text-align:center; margin-bottom: clamp(28px, 4vw, 48px); }
.progress-title{
  font-weight:300; font-size:clamp(22px, 2vw + 1rem, 34px); line-height:1.3; margin:0 0 14px; color:#0f172a;
}
.progress-p{ font-weight:300; font-size:clamp(14px, 1vw + .7rem, 16px); line-height:1.6; color:#334155; }
.progress-illu{ width:100%; display:flex; justify-content:center; align-items:center; }
#progress-illu{
  width:100%; max-width:900px; height:clamp(220px, 32vw, 420px);
  background: rgba(255,255,255,0.55); border-radius:18px; box-shadow:0 8px 26px rgba(2,6,23,0.06); backdrop-filter: blur(4px);
}

/* =========================
   Progress — Illustration constellation (final clean)
   (nettoyage uniquement — rendu inchangé)
   ========================= */

.progress-illu{
  overflow: visible !important;
}

.progress-illu-canvas{
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;

  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 3D context */
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Image centrale (hero) */
.illu-center{
  width: 72%;
  max-width: 720px;

  border-radius: 22px;
  object-fit: cover;

  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 22px 52px rgba(15,23,42,0.18);

  position: relative;
  z-index: 20 !important;  /* toujours au-dessus */
  transform: none !important;
}

/* Satellites (second plan, sans flou/transparence) */
.illu-float{
  position: absolute;
  z-index: 5 !important;           /* derrière le centre */
  width: 34% !important;
  max-width: 300px !important;

  border-radius: 16px;
  object-fit: cover;

  opacity: 1 !important;
  filter: none !important;

  box-shadow: 0 14px 36px rgba(15,23,42,0.12);

  transform-origin: center;
  backface-visibility: hidden;
}

/* Positions irrégulières + hors zone centrale */
.f1{ top: 8%;  left: -16%; transform: rotateY(10deg)  translateZ(-40px); }
.f2{ top: 22%; right: -20%; transform: rotateY(-12deg) translateZ(-50px); }
.f3{ bottom: 14%; left: -12%; transform: rotateY(8deg)  translateZ(-45px); }
.f4{ bottom: -4%; right: -8%; transform: rotateY(-10deg) translateZ(-42px); }

/* Hover très léger (reste en arrière-plan) */
@media (hover:hover){
  .illu-float{
    transition: transform .35s ease;
  }
  .illu-float:hover{
    transform: translateY(-2px) translateZ(-30px) rotateY(0deg);
  }
}

/* Responsive */
@media (max-width: 980px){
  .progress-illu-canvas{
    aspect-ratio: auto;
    padding-top: 24px;
    padding-bottom: 24px;
    perspective: 900px;
  }

  .illu-center{
    width: 88%;
  }

  .illu-float{
    width: 40% !important;
    max-width: 240px !important;
  }

  .f1{ top: 6%;  left: -18%; }
  .f2{ top: 18%; right: -22%; }
  .f3{ bottom: 10%; left: -14%; }
  .f4{ bottom: -8%; right: -12%; }
}

/* Mobile : lisibilité */
@media (max-width: 640px){
  .progress-illu-canvas{
    padding-top: 0;
  }
  .illu-float{
    display: none !important;
  }
  .illu-center{
    width: 100%;
  }
}


/* --------------------- Steps Block --------------------- */
.steps-block{ position:relative; width:100%; }
.steps-max{ max-width:1200px; margin:0 auto; padding:0 24px; }
.steps-inner{ display:grid; grid-template-columns: minmax(260px, 520px) 1fr; gap:48px; align-items:center; }
@media (max-width:980px){ .steps-inner{ grid-template-columns:1fr; gap:28px; } }
.steps-title{ font-weight:300; font-size: clamp(20px, 1.6vw + 1rem, 28px); line-height:1.35; margin:0 0 10px; color:#0f172a; }
.steps-p{ font-weight:300; font-size:clamp(13px, 1vw + .6rem, 15.5px); line-height:1.55; color:#334155; max-width:46ch; }
.steps-illu{ display:flex; justify-content:center; align-items:center; }
#steps-illu{ width:100%; max-width:320px; height: clamp(200px, 28vw, 340px); background: rgba(0,0,0,.06); border-radius:18px; box-shadow:0 8px 24px rgba(2,6,23,.06); }
@media (max-width:980px){ #steps-illu{ height:clamp(200px, 48vw, 320px);} }
/* =========================
   Steps — Illustration statique
   ========================= */

.steps-illu{
  display:flex;
  justify-content:center;
  align-items:center;

  padding: 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 22px;

  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}

.steps-image{
  width: 100%;
  max-width: 420px;
  height: auto;

  object-fit: contain;   /* aucune découpe */
  display: block;

  border-radius: 14px;
}

/* Responsive */
@media (max-width:980px){
  .steps-illu{
    padding: 8px;
  }
}


/* --------------------- Communication Block --------------------- */
.comm-block{ position:relative; width:100%; }
.comm-max{ max-width:1200px; margin:0 auto; padding:0 24px; }
.comm-inner{ display:grid; grid-template-columns:1fr minmax(260px, 520px); gap:48px; align-items:center; }
@media (max-width:980px){ .comm-inner{ grid-template-columns:1fr; gap:28px; } }
.comm-title{ font-weight:300; font-size: clamp(20px, 1.6vw + 1rem, 28px); line-height:1.35; margin:0 0 10px; color:#0f172a; }
.comm-p{ font-weight:300; font-size:clamp(13px, 1vw + .6rem, 15.5px); line-height:1.55; color:#334155; max-width:48ch; }
.comm-illu{ display:flex; justify-content:center; align-items:center; }
#comm-illu{ width:100%; max-width:520px; height:clamp(200px, 28vw, 340px); background: rgba(0,0,0,.06); border-radius:18px; box-shadow: 0 8px 24px rgba(2,6,23,.06); }

/* =========================
   Communication — Vidéo
   ========================= */

.comm-video{
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;

  border-radius: 18px;
  object-fit: contain;

  background: rgba(255,255,255,0.55);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}

/* Mobile */
@media (max-width:980px){
  .comm-video{
    max-width: 360px;
  }
}


/* --------------------- Meetings Block --------------------- */
.meetings-block{ position:relative; width:100%; }
.meetings-max{ max-width:1200px; margin:0 auto; padding:0 24px; }
.meetings-text{ text-align:center; margin-bottom: clamp(28px, 4vw, 48px); }
.meetings-title{ font-weight:300; font-size: clamp(22px, 2vw + 1rem, 34px); line-height:1.3; margin:0 0 14px; color:#0f172a; }
.meetings-p{ font-weight:300; font-size:clamp(14px, 1vw + .7rem, 16px); line-height:1.55; color:#334155; max-width:80ch; margin:0 auto; }
.meetings-illu{ display:flex; justify-content:center; align-items:center; width:100%; }
#meetings-illu{
  width:100%; max-width:980px; height:clamp(240px, 34vw, 460px);
  background: rgba(255,255,255,0.55); border-radius:18px; box-shadow:0 8px 26px rgba(2,6,23,0.06); backdrop-filter: blur(4px);
}
/* ---------------------
   Meetings — Vidéo
--------------------- */

.meetings-video{
  width: 100%;
  max-width: 1120px;
  height: auto;

  display: block;
  border-radius: 18px;

  object-fit: cover; /* impact visuel */
  box-shadow: 0 10px 28px rgba(2,6,23,.08);

  backface-visibility: hidden;
  transform: translateZ(0);
}


/* Responsive */
@media (max-width: 980px){
  .meetings-video{
    max-width: 360px;
  }
}


/* --------------------- Duo (two cards) --------------------- */
.duo-block{ position:relative; width:100%; }
.duo-max{ max-width:1200px; margin:0 auto; padding:0 24px; }
.duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(18px, 3vw, 28px); align-items:start; }
@media (max-width:900px){ .duo-grid{ grid-template-columns:1fr; } }
.duo-item{ display:flex; flex-direction:column; gap:14px; }
.duo-title{ font-weight:300; font-size: clamp(20px, 1.6vw + 1rem, 28px); line-height:1.35; margin:0 0 8px; color:#0f172a; }
.duo-p{ font-weight:300; font-size:clamp(13px, 1vw + .6rem, 15.5px); line-height:1.55; color:#334155; max-width:48ch; }
.duo-illu{ display:flex; justify-content:flex-start; align-items:center; }
.duo-illu-box{
  width: 100%;
  max-width: 520px;

  height: auto;     /* ✅ pas de hauteur imposée */
  min-height: 0;

  background: rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);

  display: inline-block;
  overflow: hidden; /* ✅ radius propre */
  line-height: 0;   /* ✅ supprime les espaces fantômes */
}


/* =========================
   Duo — Vidéo permissions
   ========================= */

.duo-video{
  display: block;

  width: 100%;
  max-width: 520px;
  height: auto;              /* ✅ la hauteur suit le contenu */

  border-radius: 18px;
  object-fit: contain;

  background: rgba(255,255,255,0.55);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);

  /* 🔥 supprime toute hauteur fantôme */
  line-height: 0;

  /* rendu net */
  backface-visibility: hidden;
  transform: translateZ(0);
}

@media (max-width: 900px){
  .duo-video{
    max-width: 380px;
  }
}

@media (max-width: 900px){
  .duo-illu-box{
    max-width: 380px;
  }
}



/* --------------------- Unique (video + background switch) --------------------- */
.piya-actor{ z-index:0; }
.piya-actor > *{ position:relative; z-index:1; }
.unique-bg{
  position:absolute; inset:0;
  background: linear-gradient(90deg, #5A8FE0, #7A66CC);
  opacity: 0; transition: opacity 700ms ease;
  z-index: 0; pointer-events: none;
}
.piya-actor.is-unique-bg .unique-bg{ opacity: 1; }

.unique-block{ position:relative; width:100%; }
.unique-max{ max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.unique-title{ font-weight:300; font-size:clamp(22px, 2vw + 1rem, 34px); line-height:1.3; text-align:center; color:#0f172a; margin: 0 0 18px; }
.unique-illu{ display:flex; justify-content:center; }
#unique-video{
  width: 100%; max-width: 980px; height: clamp(240px, 34vw, 460px);
  background: rgba(255,255,255,0.55); border-radius: 18px;
  box-shadow: 0 8px 26px rgba(2,6,23,0.06); backdrop-filter: blur(4px);
}

/* Support the html flag if present in your HTML */
html.unique-bg-on #bg-unique{ opacity: 1; }
/* ===== SECTION CTA FINALE ===== */
.piya-cta-final{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  position: relative;

  /* ⚠️ overflow: clip coupe le texte (Pacifico) sur iOS */
  overflow: visible;

  padding: 72px 20px 88px;
  color: #0f172a;
}

.cta-container{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding-inline: 16px; /* ✅ sécurité mobile */
}

.cta-title{
  margin: 0 0 12px;
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 300;
  line-height: 1.12;
  color: #0f172a;
  letter-spacing: -0.02em;
  text-align: center;

  /* ✅ anti “texte rongé” */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 22ch;          /* look premium + évite les lignes trop longues */
  margin-left: auto;
  margin-right: auto;
}

.cta-title::selection{ background: rgba(67,166,217,.18); }

/* Mot(s) “signature” en Pacifico via <span class="cta-script">…</span> */
.cta-title .cta-script{
  font-family: "Pacifico", cursive;
  font-weight: 400;
  color: #0f172a;

  /* ⚠️ ne PAS bloquer sur une seule ligne */
  white-space: normal;
}

/* Accent couleur via <span class="cta-accent">…</span> */
.cta-title .cta-accent{
  color: #0f172a;
  font-weight: 500;
}

/* Sous-titre */
.cta-sub{
  margin: 0 auto 22px;
  max-width: 820px;
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.7;
  font-weight: 300;
  color: rgba(15,23,42,.78);
  padding-inline: 4px;
}

.cta-sub strong{
  font-weight: 600;
  color: rgba(15,23,42,.92);
}

.cta-sub .cta-accent{
  color: #43a6d9;
  font-weight: 500;
}

.cta-stores{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.store-link img{
  display: block;
  height: 50px;
  width: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.20));
  border-radius: 10px;
}

/* ✅ Mobile : un poil plus d’air et titre moins “serré” */
@media (max-width: 640px){
  .piya-cta-final{
    padding: 64px 14px 76px;
  }
  .cta-title{
    line-height: 1.18;
    max-width: 18ch;
  }
}


/* ================= FOOTER PIYA (FIX: no white frame + more breathing + CTA) ================= */
.piya-footer{
  background: transparent;          /* ✅ supprime le grand carré blanc autour */
  padding: 36px 10px 42px;          /* ✅ plus d’air autour */
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.footer-inner{
  max-width:1160px;
  margin:0 auto;

  display:grid;
  grid-template-columns: 2.1fr 1fr 1fr 1fr;
  gap:44px;                         /* ✅ plus espacé */

  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:36px;
  padding:42px;                     /* ✅ plus d’air dans la carte */
  box-shadow:0 16px 44px rgba(0,0,0,.08);
}

.footer-col{ display:flex; flex-direction:column; gap:12px; }

/* ===== FOOTER LOGO — SIZE & ALIGN FIX ===== */

.footer-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* aligne logo + texte à gauche */
  gap: 10px;
}

/* Logo plus présent, ancré visuellement */
.footer-logo{
  height: 96px;          /* 🔥 taille cible (ajuste 88–104 si besoin) */
  width: auto;
  max-width: 220px;     /* empêche qu’il déborde */
  object-fit: contain;
  display: block;
}

/* Texte bien aligné sous le logo */
.footer-desc{
  margin-top: 0;
  max-width: 420px;
}

/* Mobile : logo un peu réduit mais toujours lisible */
@media (max-width: 640px){
  .footer-logo{
    height: 80px;
    max-width: 200px;
  }
}

.footer-desc{
  font-size:14.5px;
  line-height:1.65;
  color:#374151;
  max-width:380px;
  margin: 2px 0 6px;
}

.footer-copy{
  font-size:13px;
  opacity:.75;
  margin: 10px 0 0;
}

/* CTA store */
.footer-cta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top: 10px;
}
.footer-cta a{ display:inline-flex; line-height:0; }
.footer-cta img{
  height:46px;
  width:auto;
  display:block;
  border-radius:12px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
}

/* Titles */
.footer-heading{
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#111827;
  margin: 2px 0 8px;
}

/* Lists */
.footer-nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;                         /* ✅ plus respirant */
}

.footer-nav a{
  font-size:14px;
  color:#374151;
  text-decoration:none;
}
.footer-nav a:hover{
  color:#43a6d9;
  text-decoration:underline;
}

/* Social */
.footer-social-links{ display:flex; gap:14px; }
.footer-social-links a{
  width:42px; height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(67,166,217,.12);
  transition:transform .2s ease, background .2s ease;
}
.footer-social-links a:hover{
  background:#43a6d9;
  transform:translateY(-2px);
}
.footer-social-links svg{ width:20px; height:20px; fill:#43a6d9; }
.footer-social-links a:hover svg{ fill:#fff; }

/* Responsive */
@media (max-width: 1024px){
  .footer-inner{
    grid-template-columns: 1.4fr 1fr;
    gap:28px;
    padding:32px;
  }
}
@media (max-width: 640px){
  .piya-footer{ padding: 56px 16px 68px; }
  .footer-inner{
    grid-template-columns: 1fr;
    padding:24px;
    border-radius:28px;
    gap:22px;
  }
  @media (max-width: 640px){
  .footer-logo{
    height: 56px;
    max-width: 160px;
  }
}
}

/* ================= FOOTER — REDUCE EXCESS SPACE ================= */

/* 1) Réduit l’espace EXTERNE du footer */
.piya-footer{
  padding: 48px 20px 56px !important; /* avant: 72 / 84 */
}

/* 2) Réduit l’espace INTERNE de la carte */
.footer-inner{
  padding: 28px 32px !important;  /* avant: 42px */
  gap: 28px !important;           /* avant: 44px */
}

/* 3) Texte descriptif moins “aéré” */
.footer-desc{
  margin: 0 0 4px !important;
  line-height: 1.6 !important;
}

/* 4) Listes plus compactes */
.footer-nav ul{
  gap: 8px !important; /* avant: 10–12px */
}

/* 5) CTA stores plus proche du texte */
.footer-cta{
  margin-top: 6px !important;
}

/* ================= MOBILE ================= */
@media (max-width: 640px){
  .piya-footer{
    padding: 36px 16px 44px !important;
  }

  .footer-inner{
    padding: 22px !important;
    gap: 18px !important;
  }
}

/* --------------------- Utilities & Global Tweaks --------------------- */
.vr{ margin-top: clamp(var(--vr-mobile), 10vw, var(--vr-desktop)); }
.container, .hero-container, .bobby-inner, .comm-inner, .steps-inner, .cta-container{
  max-width: 1200px; margin-left:auto; margin-right:auto;
  box-sizing:border-box; width:100%;
  padding-left:clamp(16px, 4vw, 24px); padding-right:clamp(16px, 4vw, 24px);
}
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
h2, .section-title{ font-size: clamp(22px, 5.5vw, 28px); line-height:1.25; }
.hero-text, .bobby-p, p{ font-size: clamp(14px, 4vw, 16px); }

/* --------------------- Keyframes --------------------- */
@keyframes auroraShift{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, -2%, 0) scale(1.03); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.06); }
}
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes scroll-up { from{ transform: translateY(0) } to{ transform: translateY(-50%) } }
@keyframes scroll-down{ from{ transform: translateY(-50%) } to{ transform: translateY(0) } }
@keyframes bobby-gradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes paFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes paFloatStrong { 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-14px) scale(1.04) } }
@keyframes blobSpin { 0%{ transform:rotate(0deg) scale(1) } 50%{ transform:rotate(180deg) scale(1.1) } 100%{ transform:rotate(360deg) scale(1) } }

/* ======= ESPACEMENT ENTRE LES SECTIONS ======= */

/* espace général entre toutes les sections internes */
.piya-actor > section {
  margin-top: 120px;
  margin-bottom: 120px;
}
/* ⬅️ on colle la première section sous la hero */
.piya-actor > section:first-of-type {
  margin-top: 0;
}

/* sections contenant un max-width interne */
.piya-actor section .pa-inner,
.piya-actor section .bobby-inner,
.piya-actor section .progress-max,
.piya-actor section .steps-max,
.piya-actor section .comm-max,
.piya-actor section .meetings-max,
.piya-actor section .duo-max,
.piya-actor section .unique-max,
.piya-actor section .cta-container {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* HERO → on garde un espace naturel sous le bloc hero-v2 */
.hero-v2 {
  margin-bottom: 30px;
}

/* adaptation mobile */
@media (max-width: 960px) {
  .piya-actor > section {
    margin-top: 90px;
    margin-bottom: 90px;
  }

  .hero-v2 {
    margin-bottom: 100px;
  }
}


/* HERO — espacement propre */
.hero-v2 {
  margin-top: 0 !important;
  margin-bottom: 0px;   /* léger espace sous la hero, plus besoin de plus */
  position: relative;
  z-index: 1;
}

/* Le carrousel remonte derrière la navbar */
.hero-v2-right {
  margin-top: -140px;     /* ⬅️ valeur à ajuster selon ton screenshot */
  position: relative;
  z-index: 0;             /* ⬅️ passe derrière la navbar */
}

/* Option : augmenter la hauteur des colonnes si tu veux un effet encore plus “mur” */
.hero-column {
  height: clamp(700px, 70vh, 700px);
}

/* ============================= */
/* Bande blanche + vagues        */
/* ============================= */

.pa-section{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: transparent;
  padding: 100px 0;       /* espace intérieur */
  overflow: visible;
  z-index: 5;
}

/* ============================== */
/* Section "Conçue main..." wavy  */
/* ============================== */

.pa-section{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 120px 0;           /* espace interne haut/bas */
  display: flex;
  justify-content: center;
  z-index: 2;
}

/* Le bloc blanc "wavy" qui forme VRAIMENT la section */
.pa-section::before,
.pa-section::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background: transparent;
  z-index: -1;
}

/* Top : le bloc blanc est découpé en vague sur son bord supérieur */
.pa-section::before{
  top: 0;
  height: 100%;
  clip-path: path("M0 80 C 240 0 480 160 720 80 C 960 0 1200 160 1440 80 L1440 100% L0 100% Z");
}

/* Bottom : on ajoute une vague inversée pour découper le bas de la section */
.pa-section::after{
  bottom: 0;
  height: 100%;
  clip-path: path("M0 0 L1440 0 L1440 40 C 1200 120 960 -40 720 40 C 480 120 240 -40 0 40 Z");
}

/* On garde ton style existant pour le contenu */
.pa-inner{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

/* -------------------------------
   MOBILE + TABLETTE
   Suppression totale de l’illustration
-------------------------------- */
@media (max-width: 768px) {
  .hero-v2-right {
    display: none !important; /* On cache toute la partie visuelle */
  }

  .hero-v2-inner {
    grid-template-columns: 1fr !important; /* Hero en une colonne */
  }

  .hero-v2-left {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .hero-v2-stores {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero-v2 {
    padding: 120px 20px 60px;
  }
}

@media (max-width: 640px) {
  .hero-v2 {
    padding: 110px 16px 40px;
  }
}

/* ===== NAVBAR MOBILE / TABLETTE — FULL-WIDTH PILL ===== */
@media (max-width: 768px){

  /* Conteneur principal */
  .piya-header{
    position: fixed;
    top: 16px;                /* petit espace respirant */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px); /* pill qui suit la largeur mobile */
    max-width: 620px;         /* limite pour éviter d’être trop large sur tablet */
    padding: 0 18px;

    height: 62px;
    border-radius: 32px;      /* effet pill conservé */

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(255,255,255,0.35);          /* translucide */
    backdrop-filter: blur(18px);                 /* flou */
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.5);
    z-index: 999;
  }

  /* Le wrap "flou" que tu utilises n’a plus besoin d’être très haut */
  .piya-header-wrap::before{
    height: 80px;
  }

  .piya-header .row{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* ===== CENTRAGE GLOBAL MOBILE ===== */
@media (max-width: 768px){
  /* Textes principaux */
  .hero-v2-left,
  .hero-v2-title,
  .hero-v2-text,
  .bobby-inner,
  .bobby-text,
  .steps-text,
  .comm-text,
  .duo-item{
    text-align: center;
  }

  /* Paragraphes limités en largeur, mais centrés */
  .bobby-p,
  .comm-p,
  .duo-p{
    margin-left: auto;
    margin-right: auto;
  }

  /* Illus centrées */
  .bobby-illu,
  .steps-illu,
  .comm-illu,
  .duo-illu{
    justify-content: center;
  }
}


/* COMM-BLOCK : texte au-dessus de l'illu sur mobile / tablette */
@media (max-width: 1024px){
  .comm-inner{
    display: flex;          /* plus simple que la grille pour cette vue */
    flex-direction: column; /* empile dans l'ordre normal */
    align-items: center;
    gap: 24px;
  }

  /* On force le texte en premier dans la pile */
  .comm-text{
    order: -1;
    text-align: center;
  }

  .comm-illu{
    order: 0;
    justify-content: center;
  }
}


/* ===== HERO MOBILE / TABLETTE ===== */
@media (max-width: 1080px){
  .hero-v2-inner{
    grid-template-columns: 1fr !important;
  }

  .hero-v2-left{
    text-align: center;
    align-items: center;
  }

  .hero-v2-text{
    max-width: 100%;
  }

  .hero-v2-stores{
    justify-content: center;
  }

  /* On cache complètement la partie visuelle */
  .hero-v2-right{
    display: none !important;
  }
}

/* Centrer correctement toutes les sections texte sur mobile */
@media (max-width: 1080px){

    .steps-text,
    .bobby-text,
    .comm-text,
    .duo-text {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Centrer aussi les paragraphes internes */
    .steps-text p,
    .bobby-text p,
    .comm-text p,
    .duo-text p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 768px){
  .hero-v2-inner{
    grid-template-columns: 1fr !important;
  }
  .hero-v2-left{
    text-align:center;
    align-items:center;
    justify-content:center;
  }
}

/* HERO — centrage propre mobile / tablette */
@media (max-width: 768px){
  .hero-v2{
    padding: 120px 16px 60px !important; /* même padding à gauche/droite */
  }

  .hero-v2-inner{
    grid-template-columns: 1fr !important; /* 1 seule colonne */
    max-width: 720px;
    margin: 0 auto;                        /* centré dans la page */
  }

  .hero-v2-left{
    text-align: center;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px){
  .hero-v2-inner{
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  .hero-v2-left{
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .hero-v2-text{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================
   NAVBAR — Version clean (desktop + mobile) — radius 32px
   ========================================================= */

/* Desktop (pilule centrée) */
.piya-header-wrap{
  font-family:'Poppins', sans-serif !important;
  position:relative;
  z-index:50;
  padding:0;
  margin:0;
  height:0;
  text-align:center;
}

.piya-header{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:60;

  display:inline-block;
  padding:0 32px;
  height:64px;

  border:1px solid rgba(0,0,0,.08);
  border-radius:32px;

  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.06);

  isolation:isolate;
}

.piya-header .row{
  display:flex;
  align-items:center;
  justify-content:center;
  height:64px;
  gap:40px;
}

.piya-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--piya-text);
  text-decoration:none;
  font-weight:700;
  font-size:18px;
}

.piya-brand img{
  height:28px;
  width:auto;
  display:block;
  transition:transform .6s ease-in-out;
}

.piya-brand img:hover{ transform:rotate(360deg); }

.piya-menu{
  display:flex;
  gap:28px;
  align-items:center;
}

.piya-menu a{
  font-family:'Poppins', sans-serif !important;
  font-weight:500 !important;
  font-size:16px !important;
  color:var(--piya-text) !important;
  text-decoration:none;
  position:relative;
  padding:6px 2px;
}

.piya-menu a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:0;
  background:currentColor;
  transition:width .2s ease;
}

.piya-menu a:hover:after{ width:100%; }

.piya-burger{
  display:none;
  background:none;
  border:1px solid var(--piya-border);
  border-radius:10px;
  height:40px;
  width:44px;
  padding:0;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.piya-burger span{
  display:block;
  width:20px;
  height:2px;
  background:var(--piya-text);
  position:relative;
}

.piya-burger span:before,
.piya-burger span:after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--piya-text);
  transition:.2s;
}

.piya-burger span:before{ top:-6px; }
.piya-burger span:after{ bottom:-6px; }

.piya-burger[aria-expanded="true"] span{ background:transparent; }
.piya-burger[aria-expanded="true"] span:before{ top:0; transform:rotate(45deg); }
.piya-burger[aria-expanded="true"] span:after{ bottom:0; transform:rotate(-45deg); }

/* Backdrop plein écran derrière la navbar (optionnel) */
.piya-header-wrap::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:98px;
  z-index:55;
  pointer-events:none;
  transform:translateZ(0);
}

/* Mobile — pilule étendue + dropdown compact */
@media (max-width: 768px){
  .piya-header{
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 28px);
    max-width:620px;

    height:62px;
    padding:0 18px;
    border-radius:32px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    z-index:999;
  }

  .piya-header .row{
    width:100%;
    justify-content:space-between;
    gap:12px;
  }

  .piya-burger{
    display:inline-flex !important;
  }

  /* on cache le menu desktop */
  .piya-menu{
    position:absolute;
    left:14px;
    right:14px;
    top:calc(62px + 12px);

    display:none !important;
    flex-direction:column;
    gap:10px;
    padding:14px 16px;

    background:rgba(255,255,255,0.94);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);

    border-radius:32px;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
  }

  .piya-menu.open{
    display:flex !important;
  }

  .piya-menu a{
    font-size:15px !important;
    padding:6px 0;
  }

  .piya-header-wrap::before{
    height:80px;
  }
}

/* ================================
   NAVBAR MOBILE — mêmes dimensions partout
   ================================ */
@media (max-width: 768px){

  .piya-header{
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    transform: none;

    width: auto;
    max-width: 620px;      /* même limite que tes autres pages */
    margin: 0 auto;        /* centre la pilule */

    height: 62px;
    padding: 0 18px;
    border-radius: 32px;
  }

  /* garde le dropdown aligné avec la pilule */
  .piya-menu{
    left: 16px;
    right: 16px;
  }
}

/* HERO — desktop conservé, mobile recentré */
@media (max-width: 768px){

  /* on annule les marges/paddings “design desktop” */
  .hero-v2{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* on force un container centré (comme le reste du site) */
  .hero-v2-inner{
    max-width: 720px !important;
    margin: 0 auto !important;
    width: 100% !important;

    grid-template-columns: 1fr !important;
    justify-items: center; /* évite le décalage */
  }

  /* la colonne texte prend la pleine largeur */
  .hero-v2-left{
    width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }

  /* texte confortable + vraiment centré */
  .hero-v2-text{
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* si tu caches le visuel en mobile */
  .hero-v2-right{
    display: none !important;
  }
}

@media (max-width: 768px){
  .hero-v2, .hero-v2-inner{
    overflow-x: clip;
  }
}

@media (max-width: 768px){
  .piya-burger{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

@media (max-width: 768px){

  /* 1) on force une vraie marge latérale */
  .hero-v2{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* 2) le container ne dépasse jamais l’écran */
  .hero-v2-inner{
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    box-sizing: border-box;

    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  /* 3) le bloc texte ne déborde pas */
  .hero-v2-left{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-right: 0 !important;
    text-align: center;
    align-items: center;
    min-width: 0; /* 🔥 important en grid/flex */
  }

  /* 4) wrap agressif si un mot/inline casse le layout */
  .hero-v2-title,
  .hero-v2-text{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;

    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 768px){
  .hero-v2, .hero-v2-inner, .hero-v2-left{
    overflow-x: clip;
  }
}

/* ========== SPACING FIX (ONLY) ========== */
/* Objectif : rendre les espacements entre sections réguliers (desktop + mobile)
   sans toucher au design, aux layouts, ni aux styles existants. */

/* 1) Tu utilises .vr avec des variables non définies -> ça crée des espacements incohérents.
      On définit donc des valeurs propres. */
:root{
  --vr-desktop: 120px;
  --vr-mobile: 90px;
}

/* 2) Ton CSS met des margins top/bottom énormes sur toutes les sections :
      .piya-actor > section { margin-top/bottom:120px; }
      Ça double avec .vr et crée des écarts irréguliers.
      On neutralise ces margins (UNIQUEMENT pour gérer les gaps). */
.piya-actor > section{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3) On fait de .vr l’unique source de spacing entre sections (régulier) */
.vr{
  margin-top: clamp(var(--vr-mobile), 8vw, var(--vr-desktop)) !important;
}

/* 4) Mobile : un peu plus compact, mais régulier */
@media (max-width: 960px){
  :root{
    --vr-desktop: 96px;
    --vr-mobile: 72px;
  }
}

/* 5) La HERO avait un margin-bottom variable + piya-actor margin-top variable.
      On force une transition propre : aucune marge “fantôme” */
.hero-v2{
  margin-bottom: 0 !important;
}

/* 6) Sécurité : si certaines sections ont encore un margin-top “hérité”, on le neutralise */
.piya-actor > section + section{
  margin-top: 0 !important;
}

/* ========== END SPACING FIX (ONLY) ========== */

/* =========================
   FIX MOBILE ONLY (2 points)
   ========================= */

/* 1) HERO trop haut sur mobile → on descend la hero (sans toucher desktop) */
@media (max-width: 768px){
  .hero-v2{
    /* avant : 110/120px selon tes blocs → on augmente juste le top */
    padding-top: 150px !important;
  }
}

/* 2) Section "Conçue main..." trop collée aux bords sur mobile */
@media (max-width: 768px){
  .pa-section{
    /* on remet une marge latérale safe (sans toucher desktop) */
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  .pa-shell{
    /* on s'assure que le bloc blanc ne colle jamais aux bords */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* FIX : supprime le vide entre HERO et "Conçue avec le terrain" */
@media (max-width: 768px){
  .hero-v2 + .piya-actor .pa-section{
    padding-top: 48px !important;
  }
}

/* FIX : réduit l’espace entre HERO et la section "Conçue avec le terrain" (mobile + desktop) */
.hero-v2 + .piya-actor .pa-section{
  padding-top: 64px !important;  /* ajuste 48 / 64 / 80 si tu veux */
}

/* Mobile : encore un peu plus compact */
@media (max-width: 768px){
  .hero-v2 + .piya-actor .pa-section{
    padding-top: 48px !important;
  }
}

/* =========================
   HERO CAROUSEL — FADE OUT BAS
   ========================= */

/* Fondu discret en bas du carousel (desktop + tablet) */
.hero-v2-right{
  position: relative;
}

/* Masque en dégradé */
.hero-v2-right::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 160px; /* intensité du fondu */
  pointer-events: none;
  z-index: 5;

  /* fondu vers la couleur de fond */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.85) 70%,
    rgba(255,255,255,1) 100%
  );
}

/* =========================
   PA-SECTION — BLUEPRINT ONLY (no halo)
   Visible mais subtil, match avec le background global
   ========================= */

.pa-section{
  position: relative;
  overflow: hidden;           /* cache les débords du motif */
}

/* Blueprint: grille fine + micro-traits de plan */
.pa-section::before{
  content:"";
  position:absolute;
  inset:-8%;
  pointer-events:none;
  z-index:0;

  /* On augmente légèrement l’opacité vs ta version précédente
     + on utilise des teintes bleu-gris pour matcher la DA */
  background:
    /* grille principale */
    linear-gradient(rgba(15,23,42,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.07) 1px, transparent 1px),

    /* sous-grille plus fine */
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px),

    /* traits techniques très légers (diagonales) */
    repeating-linear-gradient(135deg,
      rgba(79,160,201,.10) 0 2px,
      transparent 2px 34px
    );

  background-size:
    56px 56px,
    56px 56px,
    14px 14px,
    14px 14px,
    240px 240px;

  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    -40px 30px;

  /* IMPORTANT: on évite que le motif se voie trop sur les bords
     sans halo: simple "fade" via mask */
  -webkit-mask-image: radial-gradient(80% 70% at 50% 55%, #000 55%, transparent 95%);
  mask-image: radial-gradient(80% 70% at 50% 55%, #000 55%, transparent 95%);

  opacity: 1;  /* intensité globale (descends à .75 si trop visible) */
}

/* Le contenu reste au-dessus */
.pa-shell{
  position: relative;
  z-index: 1;
}

/* ==========================================
   FIX BLUEPRINT — full width, no clipping
   (neutralise les ::before/::after wavy existants)
   ========================================== */

/* 1) Force la section à être vraiment full-bleed, stable */
.pa-section{
  position: relative !important;

  /* full-bleed sans calc(50% - 50vw) qui peut glitch */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;

  margin: 0 !important;
  overflow: visible !important;

  /* 2) Blueprint DIRECTEMENT sur la section (pas sur pseudo-element) */
  background-image:
    /* grille principale */
    linear-gradient(rgba(15,23,42,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.07) 1px, transparent 1px),

    /* sous-grille */
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px),

    /* diagonales techniques */
    repeating-linear-gradient(135deg,
      rgba(79,160,201,.10) 0 2px,
      transparent 2px 34px
    ) !important;

  background-size:
    56px 56px,
    56px 56px,
    14px 14px,
    14px 14px,
    240px 240px !important;

  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    -40px 30px !important;

  background-repeat: repeat !important;
}

/* 3) Neutralise les anciens pseudo-elements "wave" qui peuvent clipper */
.pa-section::before,
.pa-section::after{
  content: none !important;
  display: none !important;
}

/* 4) On garde le contenu au-dessus */
.pa-shell{
  position: relative !important;
  z-index: 1 !important;
}