/* Build360 — page publique, coup de neuf (LANDING-3, 12/11/2026).
   Surcouche de css/landing-2026.css : mêmes textes, mêmes offres, même structure HTML (une section
   « Aperçu » en plus). Objectif : rythme (bandes claires / sombres), relief, écrans produit, mouvement.
   Les blocs n'apparaissent en fondu que si js/landing-fx.js a posé .ld-fx (jamais de contenu caché sans JS,
   ni quand le système demande de réduire les animations). */

.ld.ld--2026{
  --l3-navy:#0B1220;
  --l3-navy-2:#131C2E;
  --l3-blue:#3882F6;
  --l3-ink:15,23,42;
  --l3-ease:cubic-bezier(.2,.8,.2,1);
  --l3-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(var(--l3-ink),.06),0 14px 30px -14px rgba(var(--l3-ink),.22);
  --l3-shadow-up:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(var(--l3-ink),.06),0 30px 56px -18px rgba(var(--l3-ink),.34);
  scroll-behavior:smooth;
}

/* ---------- Barre haute : verre, se resserre au défilement ---------- */
.ld.ld--2026 .ld-nav{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  transition:box-shadow .25s ease,background-color .25s ease;
}
.ld.ld--2026.is-scrolled .ld-nav{background:rgba(255,255,255,.94);box-shadow:0 14px 40px -20px rgba(var(--l3-ink),.45)}
.ld.ld--2026 .ld-navlinks a:not(.ld-btn){position:relative;transition:color .15s ease}
.ld.ld--2026 .ld-navlinks a:not(.ld-btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:var(--ld-yellow);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s var(--l3-ease)}
.ld.ld--2026 .ld-navlinks a:not(.ld-btn):hover::after{transform:scaleX(1)}

/* ---------- Boutons : arête basse, enfoncement ---------- */
.ld.ld--2026 .ld-btn{transition:transform .12s var(--l3-ease),box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.ld.ld--2026 .ld-btn.primary,.ld.ld--2026 .ld-btn.solid{
  background:linear-gradient(180deg,#FFC533 0%,#FFB300 55%,#F5A800 100%);border-color:#E09A00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 0 #C98A00,0 16px 26px -12px rgba(224,154,0,.8);
}
.ld.ld--2026 .ld-btn.primary:hover,.ld.ld--2026 .ld-btn.solid:hover{
  transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 0 #C98A00,0 24px 34px -14px rgba(224,154,0,.9);
}
.ld.ld--2026 .ld-btn.primary:active,.ld.ld--2026 .ld-btn.solid:active{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(120,80,0,.35)}
.ld.ld--2026 .ld-btn.ghost,.ld.ld--2026 .ld-btn[data-action="demo"]{
  box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(var(--l3-ink),.10),0 10px 18px -12px rgba(var(--l3-ink),.35);
}
.ld.ld--2026 .ld-btn.ghost:hover,.ld.ld--2026 .ld-btn[data-action="demo"]:hover{transform:translateY(-2px)}
.ld.ld--2026 .ld-btn.ghost:active,.ld.ld--2026 .ld-btn[data-action="demo"]:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(var(--l3-ink),.16)}

/* ---------- Titres : plus de présence ---------- */
.ld.ld--2026 .ld-hero h1{letter-spacing:-.055em}
.ld.ld--2026 .ld-hero h1 span{
  background:linear-gradient(100deg,#B87D00 0%,#FF8A00 55%,#FFB300 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.ld.ld--2026 .ld-section__head{max-width:780px;margin-bottom:36px}
.ld.ld--2026 .ld-section__head h2,.ld.ld--2026 .ld-h2,.ld.ld--2026 .ld-final h2{font-size:clamp(32px,3.6vw,50px);line-height:1.04}
.ld.ld--2026 .ld-section__head p,.ld.ld--2026 .ld-h2sub{font-size:17px;color:#4B5563}
.ld.ld--2026 .ld-section__head>span,.ld.ld--2026 .ld-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  background:#fff;border:1px solid rgba(var(--l3-ink),.10);box-shadow:0 6px 14px -8px rgba(var(--l3-ink),.3);
  font-size:10.5px;
}
.ld.ld--2026 .ld-section__head>span::before{width:7px;height:7px;margin:0;border-radius:50%;box-shadow:0 0 0 4px rgba(255,179,0,.22)}
.ld.ld--2026 .ld-section{padding:104px 0}

/* ---------- Cartes : relief, pastille d'icône, survol ---------- */
.ld.ld--2026 .ld-card,.ld.ld--2026 .ld-benefit,.ld.ld--2026 .ld-audience,.ld.ld--2026 .ld-diff,.ld.ld--2026 .ld-faq{
  position:relative;border-radius:18px;border-color:rgba(var(--l3-ink),.08);
  background:linear-gradient(165deg,#FFFFFF 0%,#F6F8FC 100%);box-shadow:var(--l3-shadow);
  transition:transform .3s var(--l3-ease),box-shadow .3s ease,border-color .2s ease;
}
.ld.ld--2026 .ld-card,.ld.ld--2026 .ld-audience{padding:26px 24px 24px}
.ld.ld--2026 .ld-card:hover,.ld.ld--2026 .ld-benefit:hover,.ld.ld--2026 .ld-audience:hover,.ld.ld--2026 .ld-diff:hover{
  transform:translateY(-6px);box-shadow:var(--l3-shadow-up);border-color:rgba(255,179,0,.6);
}
.ld.ld--2026 .ld-card h3,.ld.ld--2026 .ld-benefit h3,.ld.ld--2026 .ld-audience h3,.ld.ld--2026 .ld-diff b{font-size:17px;letter-spacing:-.02em}
.ld.ld--2026 .ld-card p,.ld.ld--2026 .ld-benefit p,.ld.ld--2026 .ld-audience p,.ld.ld--2026 .ld-diff p{font-size:14.5px;line-height:1.6;color:#4B5563}
.ld.ld--2026 .ld-card__icon,.ld.ld--2026 .ld-audience>span,.ld.ld--2026 .ld-benefit>span{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;flex:0 0 auto;
  color:#7A5200;background:linear-gradient(160deg,#FFE9A8 0%,#FFC533 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 0 #D9A200,0 14px 18px -10px rgba(224,154,0,.7);
  transition:transform .35s var(--l3-ease);
}
.ld.ld--2026 .ld-audience>span{margin-bottom:14px}
.ld.ld--2026 .ld-card:hover .ld-card__icon,.ld.ld--2026 .ld-audience:hover>span,.ld.ld--2026 .ld-benefit:hover>span{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
.ld.ld--2026 .ld-card__icon .ld-svg,.ld.ld--2026 .ld-card__icon .ui-svg,.ld.ld--2026 .ld-audience>span svg,.ld.ld--2026 .ld-benefit>span svg{width:22px;height:22px}
/* « Nos différences » : numérotées, pour casser la répétition des cartes. */
.ld.ld--2026 .ld-diffgrid{counter-reset:l3}
.ld.ld--2026 .ld-diff{padding:26px 24px 24px 76px;counter-increment:l3}
.ld.ld--2026 .ld-diff::before{content:counter(l3,decimal-leading-zero);position:absolute;left:22px;top:24px;
  font:800 26px/1 "Fira Code",monospace;letter-spacing:-.04em;
  background:linear-gradient(180deg,#FFB300,#FF6A00);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Aperçu de l'application : fenêtres inclinées ---------- */
.ld.ld--2026 .ld-show{padding-top:40px}
.ld.ld--2026 .ld-show .ld-section__head{margin-left:auto;margin-right:auto;text-align:center}
.ld.ld--2026 .ld-show__stage{position:relative;perspective:1800px;padding:10px 0 70px}
.ld.ld--2026 .ld-show__stage::before{content:"";position:absolute;left:8%;right:8%;top:22%;bottom:4%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,179,0,.38),rgba(56,130,246,.18) 55%,transparent);filter:blur(50px);z-index:0}
.ld.ld--2026 .ld-show__win{position:relative;z-index:1;margin:0;border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid rgba(var(--l3-ink),.12);
  box-shadow:0 2px 4px rgba(var(--l3-ink),.08),0 50px 90px -30px rgba(var(--l3-ink),.55);
  transition:transform .6s var(--l3-ease)}
.ld.ld--2026 .ld-show__win img{display:block;width:100%;height:auto}
.ld.ld--2026 .ld-show__bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:linear-gradient(180deg,#F7F8FA,#ECEFF3);border-bottom:1px solid rgba(var(--l3-ink),.08)}
.ld.ld--2026 .ld-show__bar i{width:10px;height:10px;border-radius:50%;background:#D5D9E0}
.ld.ld--2026 .ld-show__bar i:nth-child(1){background:#FF6B5F}
.ld.ld--2026 .ld-show__bar i:nth-child(2){background:#FFBE2E}
.ld.ld--2026 .ld-show__bar i:nth-child(3){background:#2ACB42}
.ld.ld--2026 .ld-show__bar span{margin-left:12px;padding:4px 14px;border-radius:999px;background:#fff;border:1px solid rgba(var(--l3-ink),.08);font:600 11px/1 "Fira Code",monospace;color:#6B7280}
.ld.ld--2026 .ld-show__win--main{width:78%;margin:0 auto 0 4%;
  transform:rotateX(calc(7deg + var(--l3-ry,0deg))) rotateY(calc(-9deg + var(--l3-rx,0deg))) rotateZ(1deg);transform-origin:50% 60%}
.ld.ld--2026 .ld-show__win--side{position:absolute;right:1%;bottom:0;width:46%;z-index:2;
  transform:rotateX(calc(5deg + var(--l3-ry,0deg))) rotateY(calc(-14deg + var(--l3-rx,0deg))) translateZ(90px)}
.ld.ld--2026 .ld-show__stage:hover .ld-show__win--main{transform:rotateX(3deg) rotateY(-4deg)}
.ld.ld--2026 .ld-show__stage:hover .ld-show__win--side{transform:rotateX(2deg) rotateY(-7deg) translateZ(120px)}

/* ---------- Chiffrage : le devis flotte ---------- */
.ld.ld--2026 .ld-chiffrage .ld-section__head{margin-left:auto;margin-right:auto;text-align:center}
.ld.ld--2026 .ld-chiffrage__shots{perspective:1600px;margin-bottom:48px}
.ld.ld--2026 .ld-chiffrage .ld-shot img{
  border-radius:12px;transform:rotateX(8deg) rotateY(-6deg) rotateZ(1.2deg);transform-origin:50% 100%;
  box-shadow:0 2px 4px rgba(var(--l3-ink),.08),0 60px 80px -34px rgba(var(--l3-ink),.5);
  transition:transform .6s var(--l3-ease),box-shadow .6s ease;
}
.ld.ld--2026 .ld-chiffrage .ld-shot:hover img{transform:none;box-shadow:0 2px 4px rgba(var(--l3-ink),.08),0 34px 60px -30px rgba(var(--l3-ink),.45)}

/* ---------- Offres ---------- */
.ld.ld--2026 .ld-plans{gap:22px;align-items:stretch}
.ld.ld--2026 .ld-plan,.ld.ld--2026 .ld-pricing--maquette .ld-plan{
  border-radius:20px;background:linear-gradient(170deg,#FFFFFF 0%,#F6F8FC 100%);box-shadow:var(--l3-shadow);
  transition:transform .3s var(--l3-ease),box-shadow .3s ease;
}
.ld.ld--2026 .ld-plan:hover{transform:translateY(-6px);box-shadow:var(--l3-shadow-up)}
.ld.ld--2026 .ld-plan--featured,.ld.ld--2026 .ld-pricing--maquette .ld-plan--featured{
  background:linear-gradient(170deg,#FFFDF5 0%,#FFF3CF 100%);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,179,0,.7),0 40px 70px -26px rgba(224,154,0,.6);
}
@media (min-width:1101px){
  .ld.ld--2026 .ld-plan--featured,.ld.ld--2026 .ld-pricing--maquette .ld-plan--featured{transform:translateY(-14px) scale(1.025);z-index:2}
  .ld.ld--2026 .ld-plan--featured:hover{transform:translateY(-20px) scale(1.025)}
}
.ld.ld--2026 .ld-plan__price b,.ld.ld--2026 .ld-pricing--maquette .ld-plan__price b{letter-spacing:-.05em}

/* Comparatif : coches au lieu de « Inclus / Non » (classes posées par landing-fx.js). */
.ld.ld--2026 .ld-compare{border-radius:18px;overflow:hidden;box-shadow:var(--l3-shadow);border:1px solid rgba(var(--l3-ink),.08)}
.ld.ld--2026 .ld-compare__head{position:sticky;top:0;background:var(--l3-navy);color:#fff}
.ld.ld--2026 .ld-compare .ld-compare__row.ld-compare__head>*{color:#fff!important;background:transparent}
.ld.ld--2026 .ld-compare__row:not(.ld-compare__head){transition:background-color .15s ease}
.ld.ld--2026 .ld-compare__row:not(.ld-compare__head):nth-child(odd){background:#F8FAFD}
.ld.ld--2026 .ld-compare__row:not(.ld-compare__head):hover{background:#FFF8E1}
.ld.ld--2026 .l3-yes,.ld.ld--2026 .l3-no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:0;vertical-align:middle}
.ld.ld--2026 .l3-yes{background:#16A34A;box-shadow:0 6px 10px -5px rgba(22,163,74,.8)}
.ld.ld--2026 .l3-yes::before{content:"";width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.ld.ld--2026 .l3-no{background:#E5E7EB}
.ld.ld--2026 .l3-no::before{content:"";width:9px;height:2px;border-radius:2px;background:#9CA3AF}

/* ---------- Bande sombre : « Le suivi au cœur de Build360 » ---------- */
.ld.ld--2026 .ld-band-dark{
  /* Pleine largeur : la section occupe toute la page et recentre son contenu par ses marges intérieures. */
  width:100%;padding-left:max(24px,calc((100% - 1240px) / 2));padding-right:max(24px,calc((100% - 1240px) / 2));
  background-color:var(--l3-navy);
  background-image:
    radial-gradient(60rem 30rem at 85% 0%,rgba(255,179,0,.16),transparent 60%),
    radial-gradient(50rem 30rem at 5% 100%,rgba(56,130,246,.20),transparent 60%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;
  margin-top:40px;margin-bottom:40px;
}
.ld.ld--2026 .ld-band-dark .ld-section__head h2{color:#fff}
.ld.ld--2026 .ld-band-dark .ld-section__head p{color:#B6C0D2}
.ld.ld--2026 .ld-band-dark .ld-section__head>span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#FFD466;box-shadow:none}
.ld.ld--2026 .ld-band-dark .ld-card{
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 40px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.ld.ld--2026 .ld-band-dark .ld-card:hover{border-color:rgba(255,179,0,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,179,0,.35),0 34px 50px -24px rgba(0,0,0,.9)}
.ld.ld--2026 .ld-band-dark .ld-card h3{color:#fff}
.ld.ld--2026 .ld-band-dark .ld-card p{color:#B6C0D2}

/* ---------- Métiers visés, FAQ, appel final ---------- */
.ld.ld--2026 .ld-trustbar{gap:14px;background:transparent;border:0;box-shadow:none}
.ld.ld--2026 .ld-trustbar span{border:1px solid rgba(var(--l3-ink),.08);border-radius:16px;background:linear-gradient(165deg,#fff,#F6F8FC);box-shadow:var(--l3-shadow);text-align:center;font-size:15px}
.ld.ld--2026 .ld-trustbar span:last-child{border-right:1px solid rgba(var(--l3-ink),.08)}
.ld.ld--2026 .ld-faq summary{font-size:16px;transition:color .15s ease}
.ld.ld--2026 .ld-faq[open]{border-color:rgba(255,179,0,.6);box-shadow:var(--l3-shadow-up)}
.ld.ld--2026 .ld-faq:hover{transform:translateY(-2px)}
.ld.ld--2026 .ld-final{
  position:relative;overflow:hidden;padding:84px 32px;border-radius:28px;margin-bottom:70px;
  background:var(--l3-navy);
  background-image:
    radial-gradient(40rem 22rem at 50% -10%,rgba(255,179,0,.32),transparent 65%),
    radial-gradient(34rem 20rem at 0% 110%,rgba(56,130,246,.28),transparent 65%),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  box-shadow:0 50px 90px -40px rgba(var(--l3-ink),.8);
}
.ld.ld--2026 .ld-final h2{color:#fff;max-width:820px;margin-left:auto;margin-right:auto}
.ld.ld--2026 .ld-final p{color:#B6C0D2;font-size:17px}
.ld.ld--2026 .ld-footer{background:transparent}

/* ---------- Apparition au défilement (seulement si landing-fx.js est actif) ---------- */
.ld.ld--2026.ld-fx [data-rv]{opacity:0;transform:perspective(1000px) translate3d(0,34px,-50px) rotateX(-9deg);
  transition:opacity .7s ease,transform .8s var(--l3-ease);transition-delay:calc(var(--rv-i,0) * 70ms);will-change:transform,opacity}
.ld.ld--2026.ld-fx [data-rv].is-in{opacity:1;transform:none}
/* Les fenêtres de l'aperçu gardent leur inclinaison propre : fondu seul. */
.ld.ld--2026.ld-fx .ld-show__stage[data-rv]{transform:translate3d(0,40px,0)}
.ld.ld--2026.ld-fx .ld-show__stage[data-rv].is-in{transform:none}

/* ---------- Petits écrans ---------- */
@media (max-width:900px){
  .ld.ld--2026 .ld-section{padding:64px 0}
  .ld.ld--2026 .ld-band-dark{padding-left:14px;padding-right:14px}
  .ld.ld--2026 .ld-show__stage{padding-bottom:20px;perspective:none}
  .ld.ld--2026 .ld-show__win--main{width:100%;margin:0;transform:none}
  .ld.ld--2026 .ld-show__win--side{position:relative;right:auto;width:100%;margin-top:18px;transform:none}
  .ld.ld--2026 .ld-show__stage:hover .ld-show__win--main,.ld.ld--2026 .ld-show__stage:hover .ld-show__win--side{transform:none}
  .ld.ld--2026 .ld-chiffrage .ld-shot img{transform:none}
  .ld.ld--2026 .ld-final{padding:52px 20px;border-radius:20px}
  .ld.ld--2026 .ld-diff{padding-left:66px}
  .ld.ld--2026 .ld-card:hover,.ld.ld--2026 .ld-benefit:hover,.ld.ld--2026 .ld-audience:hover,.ld.ld--2026 .ld-diff:hover,.ld.ld--2026 .ld-plan:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ld.ld--2026{scroll-behavior:auto}
  .ld.ld--2026 *{transition-duration:.01ms!important}
}