/* GLOBAL RESET PIYA RESPONSIVE */
*,
*::before,
*::after{
  box-sizing:border-box;
}

img{
  max-width:100%;
  height:auto;
}

/* End global reset */
  html, body {
  margin: 0;
  padding: 0;
  }

  :root{
    --piya-text:#1F2937;
    --piya-border:#E5E7EB;

    /* Tes variables existantes uniquement */
    --hero-bg:url('https://piya-web.com/wp-content/uploads/2025/08/backgroung-light.jpg');
    --appstore:url('https://piya-web.com/wp-content/uploads/2025/08/app_store-removebg-preview.png');
    --mock-1:url('https://cms.piya-web.com/wp-content/uploads/2025/11/My-Meetings-FR-scaled.png');
    --mock-2:url('https://cms.piya-web.com/wp-content/uploads/2025/11/etat-davancement-FR-scaled.png');
    --mock-3:url('https://cms.piya-web.com/wp-content/uploads/2025/11/Homepage-FR.png');
  }

  /* ================= 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:9999px;
    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){
    .piya-burger{display:inline-flex}
    .piya-menu{
      position:absolute; left:0; right:0; top:64px;
      background:rgba(255,255,255,.9);
      -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
      border-radius:0 0 24px 24px; border-top:1px solid rgba(0,0,0,.06);
      flex-direction:column; gap:14px; padding:14px 20px; display:none;
    }
    .piya-menu.open{display:flex}
    .piya-header-wrap::before{ height: 98px; }
  }

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

  /* =================== HERO full-bleed (plein large) ================== */
  .hero-wrap{position:relative;overflow:hidden;
    position:relative;
    background: var(--hero-bg) center/cover no-repeat; /* pas d'overlay */
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    min-height:100vh;
    display:flex; align-items:center;
    padding: clamp(140px, 18vw, 200px) 0 100px; /* + haut pour ne pas chevaucher la nav fixed */
    z-index:10; /* le hero passe derrière la nav au scroll */
  }
  .hero-container{max-width:1180px; margin:0 auto; padding:0 24px}
  .hero-grid{display:grid; gap:40px; grid-template-columns: 1.05fr .95fr}

  .hero-title{
    margin:0 0 8px;
    font-family:"Anton", sans-serif;
    font-weight:400; font-size:clamp(40px, 6vw, 72px); line-height:1.05;
    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-sub{
    margin:0 0 18px;
    font-family:"Pacifico", cursive;
    font-weight:400; font-size:clamp(22px, 3.2vw, 36px);
    color:#111; text-shadow:0 2px 8px rgba(0,0,0,.12);
  }
  .hero-text{font-family:"Poppins", sans-serif; font-size:18px; line-height:1.7; color:#374151; margin:0 0 22px}

  .hero-stores{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:16px 0 0}
  .hero-stores a{display:inline-block; line-height:0}
  .hero-stores img{height:48px; width:auto; display:block; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.12)}

  /* --- Mockups : netteté + taille ajustée --- */
.hero-mock{ position:relative; min-height:440px }  /* léger ajustement de hauteur */

.mock{
  position:absolute; border-radius:18px; overflow:hidden;
  width:min(300px, 88%);         /* ↓ plus petit = plus net (évite l’upscale) */
  aspect-ratio:9/19;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  background:#fff center/contain no-repeat;   /* contain pour éviter l'écrasement */
  image-rendering:-webkit-optimize-contrast;  /* rendu plus sharp */
  image-rendering:crisp-edges;
}

/* positions inchangées, juste re-calées pour la nouvelle taille */
.mock.one{  right:10%; top:-6px;   background-image: var(--mock-1); transform:rotate(-2deg)}
.mock.two{  right:24%; top:92px;   background-image: var(--mock-2); transform:rotate(2.5deg)}
.mock.three{right:-2%; top:212px;  background-image: var(--mock-3); transform:rotate(-1.5deg)}

@media (max-width:1024px){
  .hero-mock{min-height:400px; margin-top:10px}
  .mock{
    left:50%; transform:translateX(-50%) rotate(0);
    width:min(320px, 88%);        /* mobile un peu plus large mais pas d’upscale */
    background:#fff center/contain no-repeat;
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
  }
  .mock.one{ top:0 } .mock.two{ top:120px } .mock.three{ top:240px }
}


/* ---- separator ---- */


/* ================= VIDEO SECTION ================= */
.piya-video-section{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:80px 0; background:transparent; /* fond clair neutre */
  display:flex; justify-content:center; align-items:center;
}

.video-container{
  max-width:960px; width:100%; padding:0 20px;
}

.video-container video{
  width:100%; height:auto; display:block;
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  background:#000; /* en attendant le chargement */
}


/* ---- separator ---- */


/* ======== Essentiels (namespacé) ======== */
.piya-essentiels{
  max-width:1160px;
  margin: 42px auto 0;
  padding: 0 18px 120px;
}
@media (max-width: 768px){
  .piya-essentiels{ padding-bottom: 120px; }
}

.piya-essentiels *{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.piya-ess-inner{ padding: 0; }

.piya-ess-title{
  margin: 0 0 56px;
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 300;
  text-align: center;
  color: #111827;
}

.piya-ess-title .ess-highlight{
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-size: 0.95em;
  color: #4FA0C9;
  white-space: nowrap;
}
@media (max-width: 640px){
  .piya-ess-title .ess-highlight{ font-size: 0.9em; }
}

.ess-coverflow{
  position:relative;
  padding: 8px 0 0;
  margin-top: 12px;
}

.ess-stack{
  position:relative;
  height: 420px;
  perspective: 1100px;
  user-select:none;
  overflow: visible; /* permet le "peek" */
}

.ess-card{
  position:absolute;
  top:0; left:50%;
  width: min(560px, 92vw);
  transform: translateX(-50%);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .35s ease;
  cursor:pointer;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(15,23,42,.14);
  transform-style: preserve-3d;
}

.ess-media{
  position:relative;
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.0));
  border-radius: 28px;
  overflow: hidden;
}

.ess-anim{
  width:100%;
  height: 330px;
  object-fit: cover;
  background:rgba(15,23,42,.02);
  border-radius: 28px;
}

.ess-chip{
  padding: 14px 16px 16px;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  color: rgba(11,18,32,.86);
  font-size: 18px;
  letter-spacing: .2px;
}
@media (max-width:700px){
  .ess-chip{ font-size: 16px; }
}

/* ===============================
   Bouton Play / Pause — Essentiels
================================ */
.ess-pause{
  position:absolute;
  bottom:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:9999px;
  border:0;
  background:#111;
  cursor:pointer;
  display:grid;
  place-items:center;

  opacity:0;
  transform: translateY(2px);
  transition: opacity .2s ease, transform .2s ease;
}

/* Visible uniquement sur la carte active */
.ess-card.is-center .ess-pause{
  opacity:1;
  transform: translateY(0);
}

/* Icône PAUSE (par défaut) */
.ess-pause::before,
.ess-pause::after{
  content:"";
  position:absolute;
  top:11px;
  width:4px;
  height:16px;
  background:#fff;
  border-radius:2px;
}
.ess-pause::before{ left:14px; }
.ess-pause::after{ left:21px; }

/* Icône PLAY (quand .is-paused) */
.ess-pause.is-paused::before{
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid #fff;
  background:transparent;
  left:15px;
  top:11px;
}
.ess-pause.is-paused::after{ display:none; }

/* Mobile */
@media (max-width:700px){
  .ess-pause{
    width:34px;
    height:34px;
    bottom:10px;
    right:10px;
  }
  .ess-pause::before,
  .ess-pause::after{
    top:10px;
    height:14px;
  }
  .ess-pause::before{ left:13px; }
  .ess-pause::after{ left:20px; }
  .ess-pause.is-paused::before{
    left:14px;
    top:10px;
  }
}

/* ===============================
   Flèches (desktop only)
================================ */
.ess-nav{
  position:absolute;
  top: 45%;
  transform: translateY(-50%);
  width:46px; height:46px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow2);
  cursor:pointer;
  z-index:5;
}
.ess-prev{ left: -4px; }
.ess-next{ right: -4px; }
.ess-nav::after{ content: none !important; } /* évite styles globaux */
.ess-nav::before{
  content:"";
  display:block;
  width:10px; height:10px;
  border-right:2px solid rgba(11,18,32,.8);
  border-bottom:2px solid rgba(11,18,32,.8);
  margin: 0 auto;
  transform: rotate(135deg);
}
.ess-next::before{ transform: rotate(-45deg); }

/* ===============================
   Dots (mobile only)
================================ */
.ess-dots{
  display:none;
  justify-content:center;
  gap:8px;
  margin-top: 14px;
}
.ess-dot{
  width:8px; height:8px;
  border-radius:9999px;
  background: rgba(17,17,17,.18);
  border: 0;
  padding: 0;
  cursor:pointer;
}
.ess-dot.is-active{
  background: rgba(17,17,17,.65);
  transform: scale(1.05);
}

@media (max-width: 768px){
  .ess-dots{ display:flex; }
  .ess-nav{ display:none !important; } /* mobile: swipe + dots */
  .piya-essentiels{ padding-left:14px; padding-right:14px; }

  .ess-card{
    width: 88vw;
    max-width: 420px;
    border-radius: 24px;
  }
  .ess-anim{ height: 260px; border-radius: 24px; }
}

/* ===============================
   Positions coverflow (desktop)
================================ */
.ess-card.pos0{
  transform: translateX(-50%) translateZ(120px) scale(1);
  opacity: 1;
}
.ess-card.pos1{
  transform: translateX(calc(-50% + 260px)) rotateY(-12deg) translateZ(10px) scale(.92);
  opacity: .85;
}
.ess-card.pos2{
  transform: translateX(calc(-50% + 520px)) rotateY(-18deg) translateZ(-80px) scale(.82);
  opacity: .55;
}
.ess-card.neg1{
  transform: translateX(calc(-50% - 260px)) rotateY(12deg) translateZ(10px) scale(.92);
  opacity: .85;
}
.ess-card.neg2{
  transform: translateX(calc(-50% - 520px)) rotateY(18deg) translateZ(-80px) scale(.82);
  opacity: .55;
}
.ess-card.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.7);
}

/* Z-index */
.ess-card.pos0{
  z-index: 5;
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.18);
  border-color: rgba(15, 23, 42, 0.10);
}
.ess-card.pos1, .ess-card.neg1{ z-index: 4; }
.ess-card.pos2, .ess-card.neg2{ z-index: 3; }
.ess-card.is-hidden{ z-index: 1; }

/* ===============================
   Mobile positions (peek + carousel cue)
================================ */
@media (max-width: 700px){
  .ess-stack{ height: 380px; }
  .ess-anim{ height: 290px; }

  .ess-card.pos0{
    transform: translateX(-50%) translateZ(70px) scale(1);
    opacity: 1;
  }
  .ess-card.pos1{
    transform: translateX(calc(-50% + 96px)) rotateY(-10deg) translateZ(0) scale(.94);
    opacity: .55;
  }
  .ess-card.neg1{
    transform: translateX(calc(-50% - 96px)) rotateY(10deg) translateZ(0) scale(.94);
    opacity: .55;
  }
  .ess-card.pos2{
    transform: translateX(calc(-50% + 192px)) rotateY(-14deg) translateZ(-60px) scale(.88);
    opacity: .18;
  }
  .ess-card.neg2{
    transform: translateX(calc(-50% - 192px)) rotateY(14deg) translateZ(-60px) scale(.88);
    opacity: .18;
  }
}

/* =========================================================
   Essentiels — Alertes & Notifications (WebM)
   Background aurora + vidéo visible entièrement
========================================================= */

/* Fond identique à la page, uniquement sur la carte notifications */
.ess-card[data-index="3"] .ess-media{
  background:
    radial-gradient(60% 60% at 20% 30%, rgba(124,58,237,.12), transparent 70%),
    radial-gradient(50% 50% at 80% 20%, rgba(59,130,246,.11), transparent 75%),
    radial-gradient(58% 58% at 60% 85%, rgba(99,102,241,.10), transparent 78%),
    linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,0));
}

/* La vidéo s’affiche en entier (UI) */
.ess-card[data-index="3"] .ess-notif-video{
  width: 100%;
  height: 330px;              /* match .ess-anim desktop */
  object-fit: contain;        /* ✅ pas de crop */
  object-position: center;

  /* on garde ton arrondi */
  border-radius: 28px;

  /* rendu net */
  backface-visibility: hidden;
  transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;

  /* ne bloque pas le swipe/click du carousel */
  pointer-events: none;
}

/* Mobile (match ta hauteur mobile existante) */
@media (max-width: 768px){
  .ess-card[data-index="3"] .ess-notif-video{
    height: 260px;
    border-radius: 24px;
  }
}
@media (max-width: 700px){
  .ess-card[data-index="3"] .ess-notif-video{
    height: 290px;
  }
}

/* Assure que le bouton pause reste cliquable au-dessus */
.ess-card[data-index="3"] .ess-pause{
  pointer-events: auto;
  z-index: 3;
}

/* ===== Timeline ===== */
.features-pill-wrap{
  display: flex;
  justify-content: center;
  margin-bottom: 36px; /* espace avant la timeline */
}

.features-pill{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: #43A6D9;
  background: rgba(67, 166, 217, 0.12);
  border: 1px solid rgba(67, 166, 217, 0.25);

  padding: 8px 16px;
  border-radius: 999px;

  box-shadow: 0 6px 18px rgba(67, 166, 217, 0.15);
}

/* ===============================
   Timeline (propre + responsive)
=============================== */
.piya-timeline{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:72px 0;
  background:transparent;
  font-family:'Poppins',sans-serif;
}

.tl-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
}

/* Ligne centrale */
.tl-container::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#E5E7EB,#D1D5DB);
}

/* Items */
.tl-item{
  position:relative;
  width:50%;
  padding:28px 0;
}

.tl-item.left  { margin-right:auto; }
.tl-item.right { margin-left:auto;  }

/* Point sur la ligne */
.tl-item::before{
  content:"";
  position:absolute;
  top:50%;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#43A6D9;
  box-shadow:0 0 0 6px rgba(67,166,217,.18);
  transform:translateY(-50%);
  z-index:3;
}
.tl-item.left::before  { right:-7px; }
.tl-item.right::before { left:-7px;  }

/* Carte */
.tl-card{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:16px;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:22px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  padding:20px;
  align-items:center;

  /* reveal */
  opacity:0;
  transition:opacity .6s ease, transform .6s ease, box-shadow .25s ease;
}

.tl-item.left  .tl-card{ margin-left:auto; margin-right:40px; transform:translateX(-60px); }
.tl-item.right .tl-card{ margin-right:auto; margin-left:40px;  transform:translateX(60px);  }

.tl-card.is-visible{
  opacity:1;
  transform:translateX(0);
}
.tl-card.is-visible:hover{
  box-shadow:0 16px 36px rgba(0,0,0,.12);
}

/* Texte plain (pas de césure/tirets) */
.tl-card,
.tl-card *{
  hyphens:none !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.tl-card-body{ padding:4px 6px; }
.tl-title{
  margin:0 0 6px;
  font-size:20px;
  font-weight:300;
  color:#111827;
}
.tl-text{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  color:#4B5563;
}

/* Mot Bobby en Pacifico */
.tl-title-highlight{
  font-family: "Pacifico", cursive;
  font-weight: 400;          /* Pacifico n'aime pas le gras */
  color: #43A6D9;
  font-size: 1em;            /* même taille que le reste du titre */
  white-space: nowrap;       /* évite retour à la ligne moche */
}
.tl-title-accent{
  color: #43A6D9;
  font-weight: 500;      /* un peu plus présent que 300 */
}

.tl-card-visual{
  margin-top: auto;                 /* image bien ancrée en bas */
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.tl-card-visual img{
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  background: #fff;

  /* Ombre douce, diffuse, comme sur ton exemple */
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.12),
    0 6px 16px rgba(15, 23, 42, 0.06);

  /* petit lift visuel */
  transform: translateY(0);
}
@media (max-width: 640px){
  .tl-card{
    text-align: center;
  }

  .tl-card-visual img{
    max-width: 100%;
  }
}

/* Media (Lottie) */
.tl-card-media{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

dotlottie-wc,
.lottie-fluid{
  display:block;
  width:min(240px, 100%);
  max-width:100%;
  height:auto !important;
  pointer-events:none;
}

/* ===============================
   Responsive Tablet/Mobile
   - cartes centrées
   - ligne + bullets masqués
   - anim en Y
=============================== */
@media (max-width: 1024px){
  .piya-timeline .tl-container::before{ display:none !important; }
  .piya-timeline .tl-item::before{ display:none !important; }

  .piya-timeline .tl-item{
    width:100%;
    margin:0;
    padding:22px 0;
  }

  .piya-timeline .tl-card{
    grid-template-columns:1fr;
    width:100%;
    max-width:100%;
    margin-left:auto !important;
    margin-right:auto !important;

    opacity:0;
    transform:translateY(20px) !important;
    transition:opacity .6s ease, transform .6s ease, box-shadow .25s ease;
  }

  /* Override explicite des offsets left/right desktop */
  .piya-timeline .tl-item.left  .tl-card,
  .piya-timeline .tl-item.right .tl-card{
    margin-left:auto !important;
    margin-right:auto !important;
    transform:translateY(20px) !important;
  }

  .piya-timeline .tl-card.is-visible{
    opacity:1;
    transform:translateY(0) !important;
  }

  .piya-timeline .tl-card-media{
    justify-content:center;
    margin-top:8px;
  }

  .piya-timeline .tl-title{ font-size:clamp(18px,2.2vw,20px); }
  .piya-timeline .tl-text { font-size:clamp(14px,1.9vw,15px); }
}

/* ===============================
   Timeline — Carte Collaboration
=============================== */

.tl-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Image chat */
.tl-card-visual--chat{
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.tl-card-visual--chat img{
  width: 100%;
  max-width: 360px;
  border-radius: 14px;
  background: #fff;

  /* Ombre douce cohérente avec Suivi */
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.12),
    0 6px 14px rgba(15, 23, 42, 0.06);
}

@media (max-width: 640px){
  .tl-card{
    text-align: center;
  }

  .tl-card-visual--chat img{
    max-width: 100%;
  }
}

.tl-item.alerts .tl-title{
  font-family: "Pacifico", cursive;
  font-weight: 400;
  color: #43A6D9;
  letter-spacing: 0.2px;
}

/* ===== CTA "Voir plus" (après timeline) ===== */
.features-more-wrap{
  display:flex;
  justify-content:center;
  margin-top: 26px;   /* espace après la timeline */
}

.features-more-btn{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;               /* ✅ gras */
  letter-spacing: 0.02em;

  color: #1E88C9;                 /* ✅ bleu plus accentué */
  background: rgba(30, 136, 201, 0.12);
  border: 1px solid rgba(30, 136, 201, 0.28);

  padding: 10px 18px;
  border-radius: 999px;

  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap:10px;

  box-shadow: 0 10px 24px rgba(30, 136, 201, 0.14);

  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

/* petite flèche discrète */
.features-more-btn::after{
  content:"";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  display:inline-block;
  opacity: .9;
}

.features-more-btn:hover{
  transform: translateY(-2px);
  background: rgba(30, 136, 201, 0.16);
  border-color: rgba(30, 136, 201, 0.38);
  box-shadow: 0 14px 30px rgba(30, 136, 201, 0.20);
}

.features-more-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(30, 136, 201, 0.14);
}


@media (max-width: 640px){
  .tl-container{ padding:0 12px; }
  .piya-timeline .tl-card{ padding:16px; border-radius:22px; }
  dotlottie-wc, .lottie-fluid{ width: min(200px, 100%); }
}

/* ---- separator ---- */


/* =========================================================
   SECTION — TRANSPARENCE + CARROUSEL INFINI (AUTO-FILL)
   ========================================================= */

/* ===== Section globale ===== */
.piya-transparency{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 64px 0 40px;
  background: transparent;
  font-family: 'Poppins', sans-serif;
}

/* ===== Contenu texte ===== */
.piya-transparency .pt-inner{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.pt-title{
  margin: 0 0 6px;
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 300;
  color: #111827;
}

.pt-title-accent{
  font-family: "Pacifico", cursive;
  font-weight: 400;
}

.pt-sub{
  margin: 0 0 14px;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 300;
  color: #4FA0C9;
}

.pt-text{
  margin: 0 auto 26px;
  max-width: 920px;
  color: #374151;
  line-height: 1.7;
  font-size: 16px;
}

/* ===== Carrousel infini IMAGES (FULL WIDTH + FADE + no jump) ===== */
.pt-strip-wrap{
  --h: clamp(90px, 18vw, 140px);

  position: relative;
  overflow: hidden;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 10px 0;
  background: transparent !important;

  /* Fade conservé */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}

/* IMPORTANT: on ne lance pas l’animation tant que le JS n’a pas “préparé” la boucle */
.pt-strip{
  display: flex;
  align-items: center;
  gap: 14px;

  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);

  animation: pt-marquee var(--dur, 60s) linear infinite;
  animation-play-state: paused; /* <= démarre seulement quand .is-ready est ajouté */
}

.pt-strip-wrap.is-ready .pt-strip{
  animation-play-state: running;
}

.pt-strip img{
  height: var(--h);
  width: auto;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  pointer-events: none;
  user-select: none;
  flex: 0 0 auto;
}

@keyframes pt-marquee{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(var(--loop, -50%),0,0); } /* --loop est en px via JS */
}

@media (prefers-reduced-motion: reduce){
  .pt-strip{ animation: none !important; }
}

/* =========================
   PIYA — Formation (clean)
   ========================= */

.piya-training{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:72px 0 84px;
  background:transparent;
  font-family:"Poppins",sans-serif;
}

.tr-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}

/* Header (inchangé visuellement) */
.tr-head{
  text-align:center;
  max-width:860px;
  margin:0 auto 28px;
}
.tr-kicker{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(15,23,42,.62);
}
.tr-title{
  margin:0 0 10px;
  font-weight:300;
  font-size:clamp(22px,2.4vw + 1rem,36px);
  color:#0f172a;
}
.tr-accent{
  font-family:"Pacifico",cursive;
  font-weight:400;
  color:#4FA0C9;
}
.tr-sub{
  margin:0;
  font-size:clamp(14px,1.1vw + .7rem,16.5px);
  line-height:1.7;
  font-weight:300;
  color:rgba(15,23,42,.74);
}

/* Grid */
.tr-grid{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:18px;
  align-items:start;
}
@media (max-width:980px){
  .tr-grid{ grid-template-columns:1fr; }
}

/* Base card (glass) */
.tr-card{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  box-shadow:0 18px 52px rgba(2,6,23,.08);
  backdrop-filter:blur(10px);
  padding:clamp(18px,2.4vw,26px);
}

/* Programme */
.tr-card-title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:600;
  color:#0f172a;
  letter-spacing:-0.01em;
}
.tr-card-title-script{
  font-family:"Pacifico",cursive;
  font-weight:400;
  color:#4FA0C9;
}
.tr-card-sub{
  margin:0 0 16px;
  font-size:15px;
  line-height:1.7;
  font-weight:300;
  color:rgba(15,23,42,.78);
  max-width:72ch;
}

.tr-program-list{
  display:grid;
  gap:14px;
}
.tr-program-item{
  display:grid;
  grid-template-columns:16px 1fr;
  gap:12px;
  align-items:start;

  padding:14px 14px;
  border-radius:18px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(15,23,42,0.06);
}
.tr-dot{
  width:10px;
  height:10px;
  margin-top:7px;
  border-radius:999px;
  background:#4FA0C9;
  box-shadow:0 10px 22px rgba(79,160,201,.18);
}
.tr-program-title{
  margin:0 0 4px;
  font-size:15px;
  font-weight:600;
  color:rgba(15,23,42,.92);
}
.tr-program-desc{
  margin:0;
  font-size:14.5px;
  line-height:1.65;
  font-weight:300;
  color:rgba(15,23,42,.78);
}

/* Colonne droite (CTA + outcome) */
.tr-right{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-self:start;
}

/* CTA (plus brandé + pas de vide) */
.tr-cta{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-self:start;
}
.tr-cta-title{
  margin:0;
  font-size:22px;
  font-weight:400;
  font-family:"Pacifico",cursive;
  color:#4FA0C9;
}
.tr-cta-text{
  margin:0;
  font-size:15px;
  line-height:1.7;
  font-weight:300;
  color:rgba(15,23,42,.78);
}

/* Procédure */
.tr-procedure{
  margin:10px 0 0;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(15,23,42,0.06);
}
.tr-proc-title{
  margin:0 0 8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(15,23,42,.62);
}
.tr-proc-steps{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
  font-size:14.5px;
  line-height:1.6;
  font-weight:300;
  color:rgba(15,23,42,.78);
}
.tr-proc-steps strong{
  font-weight:600;
  color:rgba(15,23,42,.92);
}

/* CTA button — même DA que “Voir plus” */
.tr-actions{ margin-top:6px; }
.tr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tr-btn-primary{
  background:rgba(79,160,201,0.12);
  border:1px solid rgba(79,160,201,0.45);
  color:#4FA0C9;
}
.tr-btn-primary:hover{
  background:rgba(79,160,201,0.20);
  box-shadow:0 6px 18px rgba(79,160,201,0.25);
  transform:translateY(-1px);
}
.tr-btn-primary:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(79,160,201,0.20);
}

.tr-note{
  margin:6px 0 0;
  font-size:12.5px;
  color:rgba(15,23,42,.55);
  opacity:.75;
}

/* Carte Outcome (comble le vide) */
.tr-outcome-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:600;
  color:#0f172a;
}
.tr-outcome-script{
  font-family:"Pacifico",cursive;
  font-weight:400;
  color:#4FA0C9;
}
.tr-outcome-sub{
  margin:0 0 12px;
  font-size:14.5px;
  line-height:1.65;
  font-weight:300;
  color:rgba(15,23,42,.76);
}
.tr-outcome-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  font-size:14.5px;
  line-height:1.6;
  font-weight:300;
  color:rgba(15,23,42,.78);
}
.tr-outcome-list strong{
  font-weight:600;
  color:rgba(15,23,42,.92);
}

/* =========================
   Formation Gestion de Projet — Modifiers (sans casser la section 1)
   ========================= */

.piya-training--pm .tr-sub{
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
}

.tr-grid--pm{
  /* même structure, mais un poil plus respirant */
  gap: 18px;
}

.tr-right--pm{
  gap: 18px;
}

/* Carte “Référentiels” */
.tr-proof .tr-proof-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(15,23,42,.78);
}

.tr-proof .tr-proof-list strong{
  font-weight: 600;
  color: rgba(15,23,42,.92);
}

/* CTA PM : micro-ajustements (plus compact, plus “landing”) */
.tr-cta--pm .tr-cta-text{
  margin: 0 0 6px;
}

/* Mobile: garde une hiérarchie clean */
@media (max-width: 980px){
  .piya-training--pm .tr-head{
    margin-bottom: 22px;
  }
}

/* Colonne gauche (pour équilibrer la grille et supprimer le grand vide) */
.tr-left{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Petite note “anti spoil” */
.tr-program-footnote{
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(15,23,42,.58);
}


/* ---------- Contexte typographique ---------- */
.piya-benefits{font-family:'Poppins',sans-serif; color:#0f172a; position:relative;}

/* ---------- Section + fond dégradé animé et doux ---------- */
.piya-benefits{
  position: relative;
  padding: 64px 0 72px;      /* garde tes espacements verticaux */
  padding-inline: 20px;      /* marge à gauche/droite */
  overflow: visible;         /* évite de couper les ombres des cartes */
  background: transparent;   /* on garde le fond global (aurora) */
}

@keyframes pb-bg-move{
  0%   { transform:translate3d(0,0,0) scale(1) }
  100% { transform:translate3d(0,-2%,0) scale(1.02) }
}

/* Apparition douce de la couche fond à l’entrée */
.piya-benefits.in-view .pb-bg{ animation-play-state:running; opacity:.95 }

/* ---------- Titres ---------- */
.pb-header{position:relative; z-index:1; text-align:center; margin-bottom:18px}
.pb-title{margin:0 0 4px; font-weight:300; font-size:clamp(22px,3.3vw,32px)}
.pb-title span{color:#4FA0C9}
.pb-sub{margin:0; color:#374151; font-size:clamp(13px,2vw,14.5px)}

/* ---------- Grille des tuiles ---------- */
/* === Benefits: grille fluide === */

.piya-benefits .pb-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); /* 12 colonnes fines */
  gap: 20px;
  grid-auto-rows: 10px;    /* unité de base verticale */
  width: 100%;
  max-width: 1180px;       /* largeur max du bloc cartes */
  margin-inline: auto;     /* centre le bloc */
}


/* Carte compacte, fond blanc, ombre douce */
.piya-benefits .pb-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 40px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  padding: 18px 20px;
  box-sizing: border-box;

  /* Masonry : largeur/hauteur pilotées par variables (définies par classes/JS) */
  grid-column: span var(--cols, 4);   /* défaut ≈ 1/3 */
  grid-row:    span var(--rows, 20);  /* sera recalculé en JS selon le contenu */

  /* Animation d'apparition */
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition:
    opacity .5s ease var(--d, 0ms),
    transform .6s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
    box-shadow .6s ease var(--d, 0ms);
}

/* Quand visible */
.piya-benefits .pb-card.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 12px 32px rgba(0,0,0,.07);
}

/* Illustration en tête de carte (optionnel mais conseillé) */
.piya-benefits .pb-illu{
  width: 100%;
  height: 120px;               /* ajuste 120–160 selon tes visuels */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
/* Médias dans la carte (pour ne pas déborder) */
.piya-benefits .pb-card img,
.piya-benefits .pb-card svg,
.piya-benefits .pb-card canvas{
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Variations de largeur (colonnes) */
.piya-benefits .pb-card.w-3  { --cols: 3; }   /* étroite */
.piya-benefits .pb-card.w-4  { --cols: 4; }   /* défaut ≈ 1/3 */
.piya-benefits .pb-card.w-6  { --cols: 6; }   /* demi-largeur */
.piya-benefits .pb-card.w-8  { --cols: 8; }
.piya-benefits .pb-card.w-12 { --cols: 12; }  /* pleine largeur */

/* ================================
   BENEFITS — texte + accents + anti-césure
================================ */

/* Empêche les césures / tirets auto dans toute la section */
.piya-benefits,
.piya-benefits *{
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Structure de card pour ancrer les médias en bas */
.piya-benefits .pb-card-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:100%;
}

/* Titres + texte plus premium */
.piya-benefits .pb-card-title{
  margin:0;
  font-weight:600;
  color:#0f172a;
  letter-spacing:-0.01em;
}

.piya-benefits .pb-card-text{
  margin:0;
  font-weight:300;
  color:#334155;
  line-height:1.65;
}

/* Accent couleur */
.piya-benefits .pb-accent{
  color:#43A6D9;
  font-weight:500;
}

/* Accent Pacifico (pour 1-2 mots, pas tout le titre) */
.piya-benefits .pb-script{
  font-family:"Pacifico", cursive;
  font-weight:400;
  color:#43A6D9;
  letter-spacing:.2px;
  white-space:nowrap;
}

/* Image “2x” : en bas, centrée, avec ombre douce */
.piya-benefits .pb-media{
  margin-top:auto;
  display:flex;
  justify-content:center;
  padding-top:10px;
}

.piya-benefits .pb-media img{
  width: min(420px, 100%);
  height:auto;
  display:block;
  border-radius:16px;
  background:#fff;
  box-shadow:
    0 18px 40px rgba(15,23,42,.12),
    0 6px 16px rgba(15,23,42,.06);
}

/* === Parallax + Aurora additions === */

@keyframes piya-aurora-move {
  0%   { transform: translate3d(0, 0, 0) scale(1.00); }
  50%  { transform: translate3d(1.2%, -1.2%, 0) scale(1.02); }
  100% { transform: translate3d(-1.6%, 1.0%, 0) scale(1.03); }
}
/* === Aurora overlay (sections) — FIX COMPLET === */
.piya-video-section,
.piya-essentiels,
.piya-timeline,
.piya-transparency,
.piya-benefits{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.piya-video-section::before,
.piya-essentiels::before,
.piya-timeline::before,
.piya-transparency::before,
.piya-benefits::before{
  content:"";
  position:absolute;
  inset:-30% -10% -30% -10%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(60% 60% at 20% 30%, rgba(124,58,237,.10), transparent 70%),
    radial-gradient(55% 55% at 80% 25%, rgba(59,130,246,.10), transparent 72%),
    radial-gradient(58% 58% at 60% 85%, rgba(99,102,241,.08), transparent 75%);
  filter: blur(2px);
  opacity:.9;
  transform: translateZ(0);
  animation: piya-aurora-move 18s ease-in-out infinite alternate;
}

/* contenu au-dessus de l’aurora */
.piya-video-section > *,
.piya-essentiels > *,
.piya-timeline > *,
.piya-transparency > *,
.piya-benefits > *{
  position: relative;
  z-index: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .piya-video-section::before,
  .piya-essentiels::before,
  .piya-timeline::before,
  .piya-transparency::before,}
}

/* === Global violet-blue aurora background (softer) === */
body {
  position: relative;
  background: #F8FAFC;
  color: #0f172a;
  overflow-x: hidden;
}

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

/* Style des métriques */
.pb-metric {
  font-size: 3rem;         /* Taille par défaut du bloc */
  font-weight: 700;        /* Gras pour bien ressortir */
  color: #43a6d9;          
  line-height: 1.2;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;   /* Aligne le chiffre et l’unité */
  gap: 0.2rem;
}

.pb-metric .count {
  font-size: 3.5rem;       /* Taille encore plus grande pour le chiffre */
  font-weight: 800;
}

.pb-metric .unit {
  font-size: 1.8rem;       /* Taille un peu plus petite pour le symbole % */
  font-weight: 600;
  color: #4A5568;          /* Bleu-gris profond pour contraste */
}

.pb-card-title {
  font-weight: 500;
}

.pb-card-text{
  font-weight: 300;
  color:#374151;
}
/* =========================
   Témoignages — Marquee 2 lignes (FULL BLEED + FADE si tu en as)
   FIX:
   - boucle parfaite (px) via JS
   - aucune interruption (infinite)
   - vitesses constantes (px/sec) via JS
   - 1 ligne → droite, 1 ligne → gauche
========================= */

/* Important : évite le “100vw overflow” iOS */
html, body{
  overflow-x: clip;
}

/* Section */
.piya-testimonials-marquee{
  margin-top: 100px;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  position: relative;
  overflow: hidden;

  padding: 24px 0 8px;

  --gap: 20px;
  --card-w: 420px;
  --card-h: 220px;
  --row-spacing: 38px;

  /* fallback si JS pas prêt */
  --loop: -50%;
  --dur: 60s;

  /* IMPORTANT :
     Je ne touche PAS au fade ici.
     Si tu as un fade existant sur .marquee-mask via mask-image,
     garde-le dans ton CSS global ou ajoute-le ci-dessous.
  */
}

/* En-tête */
.tm-head{
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 18px;
  padding: 0 16px;
}

.tm-title{
  margin: 0 0 6px;
  font-size: clamp(22px, 3.3vw, 32px);
  font-weight: 300;
  color: #0f172a;
}
.tm-title span{ color:#43a6d9; font-weight:300; }

.tm-sub{
  margin: 0;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  color: #334155;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.45;
}

/* Lignes */
.marquee-row{
  position: relative;
  transform: translate3d(0,0,0);
}
.marquee-row + .marquee-row{
  margin-top: var(--row-spacing);
}

/* Masque (full bleed + fade déjà OK chez toi) */
.marquee-mask{
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

/* Track */
.marquee-track{
  display: flex;
  width: max-content;
  gap: var(--gap);
  padding: 10px 0;

  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: layout paint style;

  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--dur, 60s);
}

/* 2 directions (la distance est fournie par JS via --loop) */
.dir-left .marquee-track{
  animation-name: tm-scroll-left;
}
.dir-right .marquee-track{
  animation-name: tm-scroll-right;
}

/* Pause (si tu utilises .is-paused) */
.piya-testimonials-marquee.is-paused .marquee-track{
  animation-play-state: paused !important;
}

/* Cartes */
.tm-card{
  flex: 0 0 var(--card-w);
  min-height: var(--card-h);
  height: auto;

  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:28px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding: 18px 20px;

  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "avatar header"
    "quote  quote"
    "stars  stars";
  column-gap: 12px;
  row-gap: 10px;

  overflow: hidden;
  transform: translate3d(0,0,0);
}

/* Avatar */
.tm-avatar{
  grid-area: avatar;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* En-tête */
.tm-header{
  grid-area: header;
  display:flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.tm-name{ font-weight:700; font-size:16px; color:#0f172a; }
.tm-role{ font-size:13px; font-weight:600; color:#64748b; }

/* Citation */
.tm-quote{
  grid-area: quote;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color:#374151;
  min-height: 3.2em;
  overflow: visible;
}

/* Étoiles */
.tm-stars{
  grid-area: stars;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.star{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: #43a6d9;
}

/* Mobile gestures */
.marquee-row, .marquee-track{
  touch-action: pan-y;
}
.piya-testimonials-marquee{
  -webkit-user-select: none;
  user-select: none;
}

/* Animations (distance exacte via --loop en px) */
@keyframes tm-scroll-left{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(var(--loop, -50%),0,0); }
}

/* À droite : on part de -loop et on revient à 0 (boucle parfaite) */
@keyframes tm-scroll-right{
  from{ transform: translate3d(var(--loop, -50%),0,0); }
  to  { transform: translate3d(0,0,0); }
}

/* Tablet */
@media (max-width: 1024px){
  .piya-testimonials-marquee{
    --card-w: 360px;
    --card-h: 0px;
    --row-spacing: 34px;
  }
  .tm-title{ font-size: 24px; }
}

/* Mobile */
@media (max-width: 640px){
  .piya-testimonials-marquee{
    --card-w: 300px;
    --card-h: 0px;
    --row-spacing: 28px;
  }
  .tm-title{ font-size: 22px; }
  .tm-quote{ font-size: 14px; }
  .star{ width: 16px; height: 16px; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none !important; }
}

/* ---------- FAQ Gradient & Transition ---------- */

/* Section Feedback existante : rien à changer.
   Pour éviter toute cassure entre sections, on "fait monter"
   progressivement le gradient de la FAQ par-dessus via ::before. */
.piya-faq{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  position: relative;
  padding: 64px 20px 96px;
  color: #0f172a;
  isolation: isolate; /* l'overlay reste dans la section */
  /* fond principal de la FAQ */
  background: linear-gradient(135deg, var(--faq-blue), var(--faq-purple));
}

/* Titre / sous-titre */
.faq-header{
  max-width: 1100px;
  margin: 0 auto 24px;
}
.faq-title{
  margin: 0 0 8px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 300;
}
.faq-sub{
  margin: 0 0 28px;
  opacity: .9;
}

/* ---------- Cartes (accordéon) ---------- */
.faq-accordion{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.faq-item{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;            /* arrondis comme le reste du site */
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  overflow: hidden;               /* masque l'ouverture/fermeture */
}

/* Question (bouton) */
.faq-q{
  width: 100%;
  text-align: left;
  padding: 18px 56px 18px 20px;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
  position: relative;
  outline: none;
}

/* Icône + / – */
.faq-toggle{
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 999px;
  background: rgba(15,23,42,.06);
}
.faq-toggle::before,
.faq-toggle::after{
  content:""; position:absolute; left:50%; top:50%;
  width: 14px; height: 2px; background:#0f172a; border-radius:2px;
  transform: translate(-50%,-50%);
}
.faq-toggle::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-toggle::after{ opacity:0; } /* passe de + à – */

/* Réponse (avec animation de hauteur) */
.faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .3s ease;
  padding: 0 20px;
}
.faq-item[open] .faq-a{
  padding: 0 20px 18px;
  max-height: 400px; /* assez pour la plupart des réponses */
}

/* Lien vers Offres */
.faq-link{
  color:#0f62fe;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px){
  .faq-q{ padding: 16px 52px 16px 16px; }
  .faq-a{ padding: 0 16px; }
  .faq-item[open] .faq-a{ padding: 0 16px 16px; }
}

/* ----------- Gradient palette ----------- */
/* Feedback gradient (existant : ajuster si nécessaire) */
:root{
  /* FAQ target gradient (match your purple-background) */
  --faq-c1: #5A8FE0; /* bleu à gauche */
  --faq-c2: #7A66CC; /* violet à droite */
}

/* Feedback background (si pas déjà défini ailleurs) */
#feedback{
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--fb-c1), var(--fb-c2));
  background-size: 200% 200%;
  animation: gradientMove 14s ease-in-out infinite;
}

/* FAQ background = même dégradé final que l’overlay */
#faq{
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--faq-c1), var(--faq-c2));
  color: #0f172a;
}

/* ----------- FAQ basic spacing ----------- */
.piya-faq{
  padding: 64px 20px 96px;
}
.faq-header{
  max-width: 1100px; margin: 0 auto 24px;
}
.faq-title{
  margin:0 0 8px; font-size: clamp(28px,3.2vw,40px); font-weight: 300;
}
.faq-sub{
  margin:0 0 28px; opacity:.9;
}

/* On laisse le fond global gérer la couleur */
#feedback, #faq { background: transparent !important; }


/* Accordéon (si pas déjà stylé chez toi) */
.faq-accordion{ max-width:1100px; margin:0 auto; display:grid; gap:14px; }
.faq-item{ background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.06); overflow:hidden; }
.faq-q{ width:100%; text-align:left; padding:18px 56px 18px 20px; background:transparent; border:0; font:inherit; cursor:pointer; position:relative; }
.faq-toggle{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:999px; background:rgba(15,23,42,.06); }
.faq-toggle::before, .faq-toggle::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; background:#0f172a; border-radius:2px; transform:translate(-50%,-50%); }
.faq-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease, padding .3s ease; padding:0 20px; }
.faq-item[open] .faq-a{ padding:0 20px 18px; max-height:400px; }
.faq-link{ color:#0f62fe; text-decoration:underline; }
@media (max-width:640px){ .faq-q{padding:16px 52px 16px 16px} .faq-a{padding:0 16px} .faq-item[open] .faq-a{padding:0 16px 16px} }

/* ===== Nuancier du dégradé "FAQ" (extrait de ton visuel) ===== */
:root{
  --faq-c1: #5A8FE0;  /* bleu gauche */
  --faq-c2: #7A66CC;  /* violet droite */
  --faq-fade-duration: 700ms; /* ⏱️ durée du fondu (ajuste 400–1200ms) */
}

/* Calque plein écran pour la FAQ : au-dessus du fond existant, sous le contenu */
#bg-faq{
  position: fixed;
  inset: 0;
  z-index: -1;                 /* reste derrière tout le contenu */
  pointer-events: none;
  background: linear-gradient(to right, var(--faq-c1), var(--faq-c2)); /* comme le screen */
  opacity: 0;                  /* invisible par défaut */
  transition: opacity var(--faq-fade-duration) ease-in-out;
  will-change: opacity;
  background-attachment: fixed; /* garde le rendu stable au scroll */
}

/* Quand la FAQ est "active", on fade le calque vers 1 */
html.faq-bg-on #bg-faq{
  opacity: 1;
}

/* (Optionnel) si une section posait un background par défaut */
#faq, #feedback { background: transparent !important; }

/* ===== 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;
  }
}
}



/* === Responsive Lottie (non-breaking) === */
dotlottie-wc,
.lottie-fluid {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
}
/* Utility aspect-ratio classes you may already be using elsewhere */
.lottie-square { aspect-ratio: 1 / 1; }
.lottie-rect-169 { aspect-ratio: 16 / 9; }
.lottie-rect-43  { aspect-ratio: 4 / 3; }
/* Ensure parent containers don't clip */
.tl-card-media, .lottie-container {
  overflow: hidden;
}


/* === Fix: Lotties inside "Votre accélérateur de réussite" cards === */
.piya-benefits .pb-card { overflow: hidden; position: relative; }
.piya-benefits .pb-card .pb-card-inner { display: flex; flex-direction: column; min-height: 100%; }
.piya-benefits .pb-card dotlottie-wc,
.piya-benefits .pb-card .lottie-fluid {
  /* Keep icon inside the card and centered */
  align-self: center;
  margin-top: auto;               /* push to bottom of the card */
  width: clamp(96px, 42%, 220px); /* responsive width cap */
  max-width: 100%;
  height: auto !important;
  /* Ensure the animation never bleeds outside the card */
  translate: 0 0;
  contain: content;
  pointer-events: none;           /* avoid capturing scroll */
}
/* On smaller devices, slightly reduce the footprint */
@media (max-width: 768px){
  .piya-benefits .pb-card dotlottie-wc,
  .piya-benefits .pb-card .lottie-fluid{
    width: clamp(80px, 45%, 180px);
  }
}


/* === Responsive layout & typography for benefit cards (non-destructive) === */

/* Robust text wrapping inside cards */
.piya-benefits .pb-card-title,
.piya-benefits .pb-card-text {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Tablet layout: two columns, softer paddings and scalable type */
@media (max-width: 1024px){
  .pb-grid{ gap: 16px; }
  .piya-benefits .pb-card{ 
    grid-column: span 6 !important;   /* 2 cards per row on tablet */
    border-radius: 28px;
    padding: 16px;
  }
  .pb-metric .count{ font-size: clamp(2.2rem, 5vw, 3rem); }
  .pb-metric .unit{  font-size: clamp(1.2rem, 2.6vw, 1.6rem); }
  .pb-card-title{    font-size: clamp(1.0rem, 2.4vw, 1.15rem); }
  .pb-card-text{     font-size: clamp(0.95rem, 2.2vw, 1.05rem); }
}

/* Mobile layout: single column, tighter paddings and type */
@media (max-width: 640px){
  .pb-grid{ 
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 14px; 
  }
  .piya-benefits .pb-card{ 
    grid-column: span 12 !important;  /* 1 card per row on mobile */
    border-radius: 20px;
    padding: 14px;
  }
  .pb-metric .count{ font-size: clamp(1.8rem, 10vw, 2.6rem); }
  .pb-metric .unit{  font-size: clamp(1.0rem, 6vw, 1.4rem); }
  .pb-card-title{    font-size: clamp(1.0rem, 4.5vw, 1.125rem); }
  .pb-card-text{     font-size: clamp(0.92rem, 4.0vw, 1.0rem); }
}


/* === Responsive: Section "Piya, votre allié chantier : les essentiels à connaître" === */

/* Improve text wrapping in timeline cards */
.tl-card .tl-title,
.tl-card .tl-text{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Tablet: stack items, soften line, center media */
@media (max-width: 1024px){
  .tl-container{ padding: 0 16px; }
  .tl-container:before{ opacity: .25; } /* keep subtle timeline hint */
  .tl-item{ width: 100%; padding: 18px 0; }
  .tl-card{ border-radius: 28px; padding: 20px; }
  .tl-card-media{ justify-content: center; margin-top: 6px; }
  .tl-card-media img{ max-width: clamp(160px, 40vw, 220px); transform: none !important; }
  .tl-card dotlottie-wc,
  .tl-card .lottie-fluid{ width: clamp(140px, 42vw, 240px); height: auto !important; align-self: center; }
  .tl-title{ font-size: clamp(18px, 2.2vw, 20px); }
  .tl-text { font-size: clamp(14px, 1.9vw, 15px); }
}

/* Mobile: single column, hide center line, tighter paddings, fully centered */
@media (max-width: 640px){
  .tl-container{ padding: 0 12px; }
  .tl-container:before{ display: none; } /* remove central line on small screens */
  .tl-item{ width: 100%; padding: 14px 0; }
  .tl-card{ border-radius: 22px; padding: 16px; overflow: hidden; }
  .tl-card-media{ justify-content: center; }
  .tl-card-media img{ max-width: clamp(130px, 70vw, 200px); }
  .tl-card dotlottie-wc,
  .tl-card .lottie-fluid{ width: clamp(120px, 68vw, 200px); }
  .tl-title{ font-size: clamp(17px, 5vw, 19px); }
  .tl-text { font-size: clamp(14px, 4.2vw, 15px); line-height: 1.55; }
}

/* Ensure media never bleeds out of the card */
.tl-card{ overflow: hidden; }

/* === Miniatures qui remplacent le Lottie (cartes “bénéfices”) === */
.piya-benefits .pb-photos{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;                 /* reste en bas de la carte */
  gap: 0;
}

.piya-benefits .pb-photo{
  width: clamp(84px, 38%, 140px);   /* taille fluide */
  aspect-ratio: 1 / 1;              /* vignettes carrées */
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  border: 3px solid #fff;           /* liseré propre sur fond clair */
  will-change: transform;
}

.piya-benefits .pb-photo-a{
  transform: translateX(10%);       /* léger chevauchement */
  z-index: 2;
}
.piya-benefits .pb-photo-b{
  transform: translateX(-10%);
}

/* Petits écrans : miniatures un poil plus petites */
@media (max-width: 640px){
  .piya-benefits .pb-photo{
    width: clamp(72px, 42vw, 120px);
    border-radius: 14px;
  }
}



/* INDEX HERO RESPONSIVE TWEAKS */
@media (max-width: 1024px){
  .hero-wrap{position:relative;overflow:hidden;
    min-height:auto;
    padding:120px 0 60px;
    align-items:flex-start;
  }
  .hero-container{
    padding:0 16px;
  }
  .hero-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .hero-grid > div:first-child{
    text-align:center;
  }
  .hero-title{
    margin-bottom:10px;
  }
  .hero-text{
    max-width:620px;
    margin:0 auto 18px;
    font-size:16px;
  }
  .hero-stores{
    justify-content:center;
  }
  .hero-mock{
    margin-top:10px;
    min-height:360px;
  }
}

@media (max-width: 640px){
  .hero-wrap{position:relative;overflow:hidden;
    padding:110px 0 40px;
  }
  .hero-title{
    font-size:clamp(30px, 9vw, 38px);
  }
  .hero-sub{
    font-size:clamp(16px, 4.4vw, 18px);
  }
  .hero-text{
    font-size:15px;
  }
  .piya-ess-tabs{
    padding:10px 8px;
  }
}

/* END INDEX HERO RESPONSIVE TWEAKS */


/* NAVBAR RESPONSIVE (inspired by support.piya-web.com) */
@media (max-width: 900px){
  .piya-header{
    width: calc(100% - 32px);
    left:50%;
    transform:translateX(-50%);
    padding:0 18px;
    border-radius:9999px;
  }
  .piya-header .row{
    justify-content:space-between;
    gap:16px;
  }
  .piya-menu{
    position:fixed;
    top:72px;
    right:16px;
    left:16px;
    padding:16px 18px;
    border-radius:24px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 50px rgba(15,23,42,.18);
    display:none;
    flex-direction:column;
    gap:10px;
    z-index:55;
  }
  .piya-menu a{
    padding:8px 0;
    font-size:15px;
  }
  .piya-menu.open{
    display:flex;
  }
  .piya-burger{
    display:inline-flex;
  }
}

/* END NAVBAR RESPONSIVE */


/* GLOBAL SECTION SPACING & TYPO ON SMALL SCREENS */
@media (max-width: 768px){
  section,
  .section,
  .piya-section,
  .piya-timeline,
  .piya-ess-block,
  .piya-faq,
  .piya-pricing,
  .legal-wrapper{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  h1{
    font-size:clamp(26px, 8vw, 32px);
    line-height:1.15;
  }
  h2{
    font-size:clamp(20px, 6vw, 26px);
  }
  h3{
    font-size:clamp(17px, 4.8vw, 22px);
  }

  p,
  li{
    font-size:15px;
    line-height:1.7;
  }
}

/* END GLOBAL SECTION SPACING & TYPO */

@media (max-width:1024px){
  .piya-timeline .tl-container{
    max-width:480px;
    margin:0 auto;
    padding:0 16px;
  }
  .piya-timeline .tl-item,
  .piya-timeline .tl-item.left,
  .piya-timeline .tl-item.right{
    width:100%;
    margin:0 auto;
  }
  .piya-timeline .tl-card{
    margin:0 auto;
  }
}

.tm-card{
  position:relative;
}
.tm-stars, .tm-card .tm-stars{
  grid-area:stars;
  align-self:flex-end;
  margin-top:6px;
  margin-bottom:0;
}
@media (max-width:640px){
  .tm-stars, .tm-card .tm-stars{
    margin-top:4px;
  }
}

.faq-title,
.faq-sub,
.faq-q{
  color:#000 !important;
}

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

  .piya-burger:focus,
  .piya-burger:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   CLEAN BACKGROUND SYSTEM (ONE GLOBAL + FAQ TRANSITION)
   - Un seul fond sur tout le site : body::before
   - Toutes les sections = transparent (pas de reset)
   - FAQ = overlay #bg-faq en fondu (au-dessus du body::before)
   - Footer reste blanc
========================================================= */

/* 1) Toutes les sections : pas de background propre */
.piya-video-section,
.piya-essentiels,
.piya-timeline,
.piya-transparency,
.piya-benefits,
.piya-testimonials-marquee,
.piya-cta-final,
.piya-faq{
  background: transparent !important;
}

/* 2) On coupe TOUS les overlays "aurora" par section */
.piya-video-section::before,
.piya-essentiels::before,
.piya-timeline::before,
.piya-transparency::before,
.piya-benefits::before,
.piya-testimonials-marquee::before,
.piya-cta-final::before,
.piya-faq::before{
  content: none !important;
  display: none !important;
}

/* 3) Benefits : si tu veux zéro fond “local”, on désactive pb-bg */
.piya-benefits .pb-bg{
  display: none !important;
}

/* 4) Le fond global (tu le gardes) */
body{
  position: relative;
  background: #F8FAFC;
  color: #0f172a;
  overflow-x: hidden;
}
body::before{
  content: "";
  position: fixed;
  inset: -12% -6% -12% -6%;
  z-index: -2; /* important : sous #bg-faq */
  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;
}

/* 5) FAQ overlay : au-dessus du fond global, mais sous le contenu */
#bg-faq{
  position: fixed;
  inset: 0;
  z-index: -1; /* au-dessus de body::before (-2) */
  pointer-events: none;
  background: linear-gradient(to right, var(--faq-c1), var(--faq-c2));
  opacity: 0;
  transition: opacity var(--faq-fade-duration, 700ms) ease-in-out;
  will-change: opacity;
}
html.faq-bg-on #bg-faq{ opacity: 1; }

/* 6) Footer : fond transparent (la carte .footer-inner reste blanche) */
.piya-footer{
  background: transparent !important;
  padding: 36px 10px 42px;
}

/* ================= 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;
  }
}

.piya-video-wrap{
  position:relative;
}

.piya-video-wrap video{
  width:100%; height:auto; display:block;
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  background:#000;
}

/* Barre de contrôles type "minimal" */
.piya-video-controls{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:9999px;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.pv-btn{
  border:0;
  width:38px; height:38px;
  border-radius:9999px;
  background:#111;
  cursor:pointer;
  display:grid; place-items:center;
}

/* Icônes ultra simples (tu peux remplacer par SVG après) */
.pv-ic{ display:block; width:14px; height:14px; position:relative; }
.pv-ic-play::before{
  content:""; position:absolute; inset:0;
  clip-path: polygon(20% 10%, 90% 50%, 20% 90%);
  background:#fff;
}
.pv-ic-pause::before,
.pv-ic-pause::after{
  content:""; position:absolute; top:0; bottom:0; width:4px; background:#fff; border-radius:2px;
}
.pv-ic-pause::before{ left:2px; }
.pv-ic-pause::after{ right:2px; }

.pv-ic-mute::before{
  content:""; position:absolute; left:0; top:3px; width:7px; height:8px;
  background:#fff; clip-path: polygon(0 25%, 40% 25%, 70% 0, 70% 100%, 40% 75%, 0 75%);
}
.pv-ic-sound::before{
  content:""; position:absolute; left:0; top:3px; width:7px; height:8px;
  background:#fff; clip-path: polygon(0 25%, 40% 25%, 70% 0, 70% 100%, 40% 75%, 0 75%);
}
.pv-ic-sound::after{
  content:""; position:absolute; left:8px; top:1px; width:6px; height:12px;
  border-right:2px solid #fff; border-radius:999px;
  opacity:.9;
}

/* Progress */
.pv-progress{
  position:relative;
  flex:1;
  height:38px;
  display:flex;
  align-items:center;
}

.pv-range{
  position:absolute;
  inset:0;
  width:100%;
  height:38px;
  opacity:0;
  cursor:pointer;
}

.pv-bar{
  width:100%;
  height:8px;
  border-radius:9999px;
  background:rgba(17,17,17,.15);
  overflow:hidden;
}

.pv-fill{
  height:100%;
  width:0%;
  background:#111;
  border-radius:9999px;
}

/* Mobile */
@media (max-width:520px){
  .piya-video-controls{ left:12px; right:12px; bottom:12px; padding:8px 10px; }
  .pv-btn{ width:34px; height:34px; }
}

/* === Controls auto-hide === */
.piya-video-wrap{
  position: relative;
}

.piya-video-controls{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
}

/* état caché */
.piya-video-wrap.controls-hidden .piya-video-controls{
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* sur desktop : au hover on force l’affichage */
@media (hover:hover){
  .piya-video-wrap:hover .piya-video-controls{
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* ========== VIDEO CONTROLS — Responsive fix ========== */

.piya-video-wrap{
  position: relative;
}

/* base */
.piya-video-controls{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  display:flex; align-items:center; gap:10px;

  padding:10px 12px;
  border-radius:9999px;

  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);

  /* évite les débordements */
  max-width: calc(100% - 32px);
  box-sizing: border-box;
}

.pv-btn{
  border:0;
  width:38px; height:38px;
  border-radius:9999px;
  background:#111;
  cursor:pointer;
  display:grid; place-items:center;
  flex:0 0 auto;
}

.pv-progress{
  position:relative;
  flex:1 1 auto;
  min-width: 0; /* IMPORTANT: permet au flex de rétrécir sans overflow */
  height:38px;
  display:flex; align-items:center;
}

.pv-bar{
  width:100%;
  height:8px;
  border-radius:9999px;
  background:rgba(17,17,17,.15);
  overflow:hidden;
}

.pv-fill{
  height:100%;
  width:0%;
  background:#111;
  border-radius:9999px;
}

/* Le range invisible doit être plus “touch-friendly” */
.pv-range{
  position:absolute;
  inset:-10px 0; /* agrandit la zone tactile verticalement */
  width:100%;
  opacity:0;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Auto-hide (tu l'avais déjà) */
.piya-video-wrap.controls-hidden .piya-video-controls{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}

@media (hover:hover){
  .piya-video-wrap:hover .piya-video-controls{
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* ----------- Mobile adjustments ----------- */
@media (max-width: 520px){
  .piya-video-controls{
    left:12px; right:12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    padding:8px 10px;
    gap:8px;
  }

  .pv-btn{
    width:34px; height:34px;
  }

  .pv-progress{
    height:34px;
  }

  .pv-bar{
    height:7px;
  }

  /* range encore plus simple à saisir */
  .pv-range{ inset:-12px 0; }
}

/* Très petits écrans : on compacte encore */
@media (max-width: 360px){
  .piya-video-controls{
    padding:7px 8px;
    gap:6px;
  }

  .pv-btn{
    width:32px; height:32px;
  }

  .pv-progress{
    height:32px;
  }

  .pv-bar{
    height:6px;
  }
}

/* ===============================
   Essentiels — Mobile carousel fix
================================ */
@media (max-width: 768px){

  /* Plus d’air sur les côtés */
  .piya-essentiels{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* On autorise le “peek” */
  .ess-stack{
    overflow: visible;
    height: 360px;
    perspective: 900px;
  }

  /* Carte plus petite, pour laisser apparaître les voisines */
  .ess-card{
    width: 92vw;              /* ✅ évite que ça colle */
    max-width: 420px;         /* ✅ garde un rendu propre */
    border-radius: 24px;
  }

  .ess-anim{
    height: 260px;
    border-radius: 24px;
  }

  /* Positions mobile : petites translations pour “peek” */
  .ess-card.pos0{
    transform: translateX(-50%) translateZ(70px) scale(1);
    opacity: 1;
  }

  .ess-card.pos1{
    transform: translateX(calc(-50% + 110px)) rotateY(-10deg) translateZ(0) scale(.94);
    opacity: .55;
  }

  .ess-card.neg1{
    transform: translateX(calc(-50% - 110px)) rotateY(10deg) translateZ(0) scale(.94);
    opacity: .55;
  }

  /* On garde pos2/neg2 mais très discret */
  .ess-card.pos2{
    transform: translateX(calc(-50% + 220px)) rotateY(-14deg) translateZ(-60px) scale(.88);
    opacity: .18;
  }

  .ess-card.neg2{
    transform: translateX(calc(-50% - 220px)) rotateY(14deg) translateZ(-60px) scale(.88);
    opacity: .18;
  }

  /* ✅ Flèches : on les dégage sur mobile (cheap effect) */
  .ess-nav{
    display: none !important;
  }
}

@media (max-width: 768px){
  .piya-essentiels{ padding-left:14px; padding-right:14px; }

  .ess-stack{
    overflow: visible;
    height: 360px;
    perspective: 900px;
  }

  .ess-card{
    width: 88vw;      /* ✅ réduit : ne colle plus aux bords */
    max-width: 420px;
    border-radius: 24px;
  }

  .ess-anim{ height: 260px; border-radius: 24px; }

  .ess-card.pos0{ transform: translateX(-50%) translateZ(70px) scale(1); opacity: 1; }
  .ess-card.pos1{ transform: translateX(calc(-50% + 96px)) rotateY(-10deg) translateZ(0) scale(.94); opacity: .55; }
  .ess-card.neg1{ transform: translateX(calc(-50% - 96px)) rotateY(10deg) translateZ(0) scale(.94); opacity: .55; }
  .ess-card.pos2{ transform: translateX(calc(-50% + 192px)) rotateY(-14deg) translateZ(-60px) scale(.88); opacity: .18; }
  .ess-card.neg2{ transform: translateX(calc(-50% - 192px)) rotateY(14deg) translateZ(-60px) scale(.88); opacity: .18; }
}

.ess-dots{ display:none; }

@media (max-width: 768px){
  .ess-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top: 14px;
  }
  .ess-dot{
    width:8px; height:8px;
    border-radius:9999px;
    background: rgba(17,17,17,.18);
    border:0; padding:0;
    cursor:pointer;
  }
  .ess-dot.is-active{
    background: rgba(17,17,17,.62);
    transform: scale(1.05);
  }

  /* flèches OFF sur mobile (swipe + dots = mieux) */
  .ess-nav{ display:none !important; }
}

/* ===============================
   FIX flèches dupliquées (desktop)
================================ */

/* On autorise UNE SEULE icône : celle définie via ::before */
.ess-nav::after{
  content: none !important;
}

/* Sécurité si un style global touche les boutons */
button.ess-nav::after{
  content: none !important;
}

/* ===== Fix final responsive Essentiels ===== */

/* Desktop: dots cachés */
.ess-dots{ display:none; }

/* Sécurité flèche dupliquée si style global */
.ess-nav::after{ content:none !important; }

@media (max-width: 768px){

  /* marges => plus collé aux bords */
  .piya-essentiels{ padding-left:14px; padding-right:14px; }

  /* mobile = pas de flèches (swipe + dots) */
  .ess-nav{ display:none !important; }

  /* dots mobile */
  .ess-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top: 14px;
  }

  /* peek carousel */
  .ess-stack{ height: 360px; perspective: 900px; overflow: visible; }

  .ess-card{
    width: 88vw;
    max-width: 420px;
    border-radius: 24px;
  }
  .ess-anim{ height: 260px; border-radius: 24px; }

  .ess-card.pos0{ transform: translateX(-50%) translateZ(70px) scale(1); opacity: 1; }
  .ess-card.pos1{ transform: translateX(calc(-50% + 96px)) rotateY(-10deg) translateZ(0) scale(.94); opacity: .55; }
  .ess-card.neg1{ transform: translateX(calc(-50% - 96px)) rotateY(10deg) translateZ(0) scale(.94); opacity: .55; }
  .ess-card.pos2{ transform: translateX(calc(-50% + 192px)) rotateY(-14deg) translateZ(-60px) scale(.88); opacity: .18; }
  .ess-card.neg2{ transform: translateX(calc(-50% - 192px)) rotateY(14deg) translateZ(-60px) scale(.88); opacity: .18; }
}