/* Build360 — couche « Relief » (DEPTH-1, 11/11/2026).
   Donne de la profondeur à l'application connectée sans toucher à sa structure :
   1. fond vivant en 3D (plan quadrillé en perspective, halos, volumes filaires) — #b360-ambient, posé par js/depth.js ;
   2. surfaces en relief (ombres en couches, arête lumineuse, survol qui soulève) ;
   3. boutons et navigation « physiques » (arête basse, enfoncement au clic) ;
   4. arrivée des écrans carte par carte, en perspective.
   Règles : aucun transform sur #app-content (barres fixes des plans), aucune couleur de texte modifiée
   (contrastes AA de l'AUDIT-38 conservés), tout mouvement coupé par « réduire les animations » ou
   localStorage b360_motion='off'. Fichier chargé après le thème 2026 et avant ux5-floating-layers. */

/* ---------- 0. Jetons de relief ---------- */
.theme-build360-2026{
  --d-ink:15,23,42;
  --d-edge:inset 0 1px 0 rgba(255,255,255,.95);
  --d-shadow-1:var(--d-edge),0 1px 2px rgba(var(--d-ink),.06),0 10px 22px -10px rgba(var(--d-ink),.18);
  --d-shadow-2:var(--d-edge),0 2px 4px rgba(var(--d-ink),.06),0 22px 40px -14px rgba(var(--d-ink),.28);
  --d-shadow-3:0 4px 10px rgba(var(--d-ink),.10),0 34px 70px -18px rgba(var(--d-ink),.38);
  --d-ease:cubic-bezier(.2,.8,.2,1);
  --b360-shadow-sm:var(--d-shadow-1);
  --b360-shadow-md:var(--d-shadow-2);
  --b360-shadow-card:var(--d-shadow-1);
  --b360-shadow-hover:var(--d-shadow-2);
  --shadow-sm:var(--d-shadow-1);
  --shadow:var(--d-shadow-1);
  --b360-radius-card:16px;
  --radius:16px;
}

/* ---------- 1. Fond vivant ---------- */
/* Le dégradé est porté par #b360-ambient : un fond sur body recouvrirait une couche en z-index négatif. */
body.b360-connected{background:transparent}
body.b360-connected .theme-build360-2026 .main,
body.b360-connected .theme-build360-2026 .b360-home{background:transparent}
#b360-ambient{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#F5F7FB 0%,#E8EDF5 100%);overflow:hidden;pointer-events:none;display:none;contain:strict}
body.b360-connected #b360-ambient{display:block}
#b360-ambient .amb__glow{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
#b360-ambient .amb__glow--a{width:52vw;height:52vw;right:-14vw;top:-22vw;
  background:radial-gradient(circle,rgba(255,179,0,.34),rgba(255,179,0,0) 68%);
  transform:translate3d(calc(var(--amb-x,0) * -26px),calc(var(--amb-y,0) * -18px),0)}
#b360-ambient .amb__glow--b{width:46vw;height:46vw;left:6vw;bottom:-24vw;
  background:radial-gradient(circle,rgba(56,130,246,.30),rgba(56,130,246,0) 68%);
  transform:translate3d(calc(var(--amb-x,0) * 30px),calc(var(--amb-y,0) * 20px),0)}
/* Plan de chantier quadrillé, couché en perspective, qui avance lentement vers l'utilisateur. */
#b360-ambient .amb__floor{position:absolute;left:-30%;right:-30%;bottom:-4vh;height:96vh;
  transform:perspective(560px) rotateX(58deg) translate3d(calc(var(--amb-x,0) * 18px),0,0);
  transform-origin:50% 100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%);
          mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%)}
#b360-ambient .amb__grid{position:absolute;inset:-64px 0 0 0;
  background-image:
    linear-gradient(rgba(29,95,191,.42) 2px,transparent 2px),
    linear-gradient(90deg,rgba(29,95,191,.42) 2px,transparent 2px),
    linear-gradient(rgba(29,95,191,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,95,191,.16) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,16px 16px,16px 16px}
/* Volumes filaires (gabarits de bâtiment) qui tournent lentement dans les marges.
   Pas d'opacity sur le cube : elle aplatirait ses six faces (preserve-3d). */
#b360-ambient .amb__cube{position:absolute;width:var(--s);height:var(--s);transform-style:preserve-3d;
  transform:rotateX(-24deg) rotateY(38deg)}
#b360-ambient .amb__cube i{position:absolute;inset:0;border:1.5px solid rgba(29,95,191,.5);
  background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(56,130,246,.08))}
#b360-ambient .amb__cube i:nth-child(1){transform:translateZ(calc(var(--s) / 2))}
#b360-ambient .amb__cube i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
#b360-ambient .amb__cube i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
#b360-ambient .amb__cube i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
#b360-ambient .amb__cube i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s) / 2));border-color:rgba(255,179,0,.75);background:rgba(255,179,0,.14)}
#b360-ambient .amb__cube i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
#b360-ambient .amb__cube--1{--s:92px;right:4.5vw;bottom:15vh}
#b360-ambient .amb__cube--2{--s:54px;right:13vw;bottom:9vh}
#b360-ambient .amb__cube--3{--s:40px;left:calc(var(--b360-sidebar-w,248px) + 3vw);bottom:6vh}
html.b360-motion #b360-ambient .amb__grid{animation:d-grid 9s linear infinite}
html.b360-motion #b360-ambient .amb__glow--a{animation:d-drift-a 22s ease-in-out infinite alternate}
html.b360-motion #b360-ambient .amb__glow--b{animation:d-drift-b 26s ease-in-out infinite alternate}
html.b360-motion #b360-ambient .amb__cube{animation:d-spin 38s linear infinite}
html.b360-motion #b360-ambient .amb__cube--2{animation-duration:52s;animation-direction:reverse}
html.b360-motion #b360-ambient .amb__cube--3{animation-duration:64s}
@keyframes d-grid{to{transform:translate3d(0,64px,0)}}
@keyframes d-drift-a{to{margin-top:6vh;margin-right:5vw}}
@keyframes d-drift-b{to{margin-bottom:5vh;margin-left:7vw}}
@keyframes d-spin{from{transform:rotateX(-24deg) rotateY(0deg)}to{transform:rotateX(-24deg) rotateY(360deg)}}

/* ---------- 2. Ossature : barre latérale et barre haute ---------- */
.theme-build360-2026 .sidebar{
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FC 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.8) inset,10px 0 30px -18px rgba(var(--d-ink),.28);
}
.theme-build360-2026 .nav__item{transition:transform .18s var(--d-ease),background-color .18s ease,box-shadow .18s ease}
.theme-build360-2026 .nav__item:not(.active):hover{transform:translateX(3px)}
.theme-build360-2026 .nav__item.active{
  background:linear-gradient(180deg,#FFFFFF,#FFF8E6);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,179,0,.55),0 3px 0 rgba(224,154,0,.55),0 12px 20px -10px rgba(224,154,0,.55);
}
.theme-build360-2026 .nav__ico{transition:transform .25s var(--d-ease)}
.theme-build360-2026 .nav__item:hover .nav__ico{transform:translateY(-1px) scale(1.08)}
.theme-build360-2026 .topbar{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border-bottom-color:rgba(var(--d-ink),.07);
  transition:box-shadow .25s ease,background-color .25s ease;
}
html.b360-scrolled .theme-build360-2026 .topbar{background:rgba(255,255,255,.9);box-shadow:0 10px 30px -16px rgba(var(--d-ink),.35)}

/* ---------- 3. Surfaces en relief ---------- */
.theme-build360-2026 .card,
.theme-build360-2026 .b360-card,
.theme-build360-2026 .b360-kpi,
.theme-build360-2026 .af-entity-card,
.theme-build360-2026 .ops-card,
.theme-build360-2026 .work-action{
  border-color:rgba(var(--d-ink),.08);
  box-shadow:var(--d-shadow-1);
  transition:transform .28s var(--d-ease),box-shadow .28s ease,border-color .2s ease;
}
.theme-build360-2026 .card{background:linear-gradient(180deg,#FFFFFF 0%,#FCFDFF 100%)}
/* Seules les cartes cliquables se soulèvent : un panneau de formulaire ne doit pas bouger sous la souris. */
.theme-build360-2026 .b360-card:hover,
.theme-build360-2026 .af-entity-card:hover,
.theme-build360-2026 .ops-card:hover,
.theme-build360-2026 .work-action:hover,
.theme-build360-2026 .card.u-pointer:hover,
.theme-build360-2026 .card[onclick]:hover{
  transform:translateY(-4px);box-shadow:var(--d-shadow-2);border-color:rgba(255,179,0,.55);
}
.theme-build360-2026 .b360-card:active,
.theme-build360-2026 .af-entity-card:active{transform:translateY(-1px);transition-duration:.08s}

/* Indicateurs : plaque épaisse, pastille d'icône qui flotte, chiffre net. */
.theme-build360-2026 .kpi{
  position:relative;overflow:visible;
  background:linear-gradient(160deg,#FFFFFF 0%,#F6F8FC 100%);
  box-shadow:var(--d-edge),0 1px 2px rgba(var(--d-ink),.06),0 4px 0 -1px rgba(var(--d-ink),.07),0 16px 26px -14px rgba(var(--d-ink),.26);
}
.theme-build360-2026 .kpi__ico,
.theme-build360-2026 .b360-kpi__ico{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 12px -6px rgba(var(--d-ink),.35);
}
.theme-build360-2026 .kpi__val,
.theme-build360-2026 .b360-kpi__v{text-shadow:0 1px 0 #fff}

/* Tuiles de l'accueil : l'illustration sort de la carte au survol. */
.theme-build360-2026 .b360-card{background:linear-gradient(160deg,#FFFFFF 0%,#F5F8FD 100%);transform-style:preserve-3d}
.theme-build360-2026 .b360-card::before{content:"";position:absolute;inset:auto -20% -55% 30%;height:90%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,179,0,.20),transparent);pointer-events:none;transition:opacity .3s ease;opacity:.6}
.theme-build360-2026 .b360-card:hover::before{opacity:1}
.theme-build360-2026 .b360-card__illu{
  transition:transform .45s var(--d-ease),filter .45s ease;transform-origin:70% 100%;
  filter:drop-shadow(0 10px 10px rgba(var(--d-ink),.16));
}
.theme-build360-2026 .b360-card:hover .b360-card__illu{
  transform:translate3d(-4px,-8px,40px) scale(1.14) rotate(-2deg);
  filter:drop-shadow(0 22px 16px rgba(var(--d-ink),.26));
}
.theme-build360-2026 .b360-card__go{transition:transform .3s var(--d-ease),background-color .2s ease,border-color .2s ease}
.theme-build360-2026 .b360-card:hover .b360-card__go{transform:translateX(3px);background:var(--b360-primary);border-color:var(--b360-primary);color:var(--b360-on-primary)}
/* Inclinaison sous la souris (variables posées par js/depth.js) + reflet. */
html.b360-motion--fine .theme-build360-2026 .b360-card.is-tilting,
html.b360-motion--fine .theme-build360-2026 .b360-kpi.is-tilting{
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px);
  transition:transform .08s linear,box-shadow .2s ease;box-shadow:var(--d-shadow-2);
}
html.b360-motion--fine .theme-build360-2026 .b360-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2;
  background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),rgba(255,255,255,.75),transparent 46%);mix-blend-mode:soft-light;
}
html.b360-motion--fine .theme-build360-2026 .b360-card.is-tilting::after{opacity:1}

/* Choix rapide du chantier sur l'accueil (aucun chantier sélectionné). */
.theme-build360-2026 .b360-home__pick{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.theme-build360-2026 .b360-pick{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(var(--d-ink),.12);background:linear-gradient(180deg,#fff,#F4F7FB);color:var(--b360-text);
  font:600 13px/1 var(--b360-font-ui);cursor:pointer;
  box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(var(--d-ink),.08),0 8px 14px -10px rgba(var(--d-ink),.35);
  transition:transform .12s var(--d-ease),box-shadow .12s ease,border-color .15s ease}
.theme-build360-2026 .b360-pick:hover{transform:translateY(-2px);border-color:var(--b360-primary)}
.theme-build360-2026 .b360-pick:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(var(--d-ink),.14)}
.theme-build360-2026 .b360-pick:focus-visible{outline:3px solid rgba(255,179,0,.6);outline-offset:2px}

/* DEBUTANT-1 — bandeau « premier pas » des écrans rattachés à un chantier (société sans chantier). */
.b360-first{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px;padding:18px 20px;border-radius:16px;
  border:1px solid rgba(255,179,0,.55);background:linear-gradient(160deg,#FFFDF5 0%,#FFF3CF 100%);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(224,154,0,.35),0 18px 30px -18px rgba(224,154,0,.6)}
.b360-first__n{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:#111827;color:#FFB300;font:800 18px/1 var(--b360-font-ui,Inter,sans-serif);box-shadow:0 8px 14px -8px rgba(15,23,42,.6)}
.b360-first__t{flex:1 1 260px;min-width:0}
.b360-first__t b{display:block;font-size:16px;color:#111827}
.b360-first__t p{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:#4B5563}
.b360-pick{appearance:none}

/* ---------- 4. Commandes physiques ---------- */
.theme-build360-2026 .btn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(var(--d-ink),.08),0 2px 0 rgba(var(--d-ink),.07);
  transition:transform .12s var(--d-ease),box-shadow .12s ease,background-color .15s ease,border-color .15s ease;
}
.theme-build360-2026 .btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 rgba(var(--d-ink),.08),0 10px 18px -10px rgba(var(--d-ink),.35)}
.theme-build360-2026 .btn:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(var(--d-ink),.14)}
.theme-build360-2026 .btn--primary,
.theme-build360-2026 .af-card-btn.primary{
  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 12px 20px -10px rgba(224,154,0,.75);
}
.theme-build360-2026 .btn--primary:hover,
.theme-build360-2026 .af-card-btn.primary:hover{
  background:linear-gradient(180deg,#FFCB47 0%,#FFB81A 55%,#F5A800 100%);
  transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 4px 0 #C98A00,0 18px 26px -12px rgba(224,154,0,.85);
}
.theme-build360-2026 .btn--primary:active,
.theme-build360-2026 .af-card-btn.primary:active{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(120,80,0,.35),0 0 0 #C98A00}
.theme-build360-2026 .btn:disabled,
.theme-build360-2026 .btn[disabled]{transform:none;box-shadow:none}
.theme-build360-2026 .icon-btn{transition:transform .15s var(--d-ease),box-shadow .15s ease}
.theme-build360-2026 .icon-btn:hover{transform:translateY(-1px);box-shadow:0 8px 14px -8px rgba(var(--d-ink),.4)}
.theme-build360-2026 .icon-btn:active{transform:translateY(1px)}
/* Champs : creusés dans la surface, anneau jaune net au focus. */
.theme-build360-2026 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.theme-build360-2026 select,
.theme-build360-2026 textarea{box-shadow:inset 0 1px 2px rgba(var(--d-ink),.07);transition:box-shadow .15s ease,border-color .15s ease}
.theme-build360-2026 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
.theme-build360-2026 select:focus,
.theme-build360-2026 textarea:focus{box-shadow:inset 0 1px 2px rgba(var(--d-ink),.05),0 0 0 3px rgba(255,179,0,.32)}

/* Barres d'avancement : rail creusé, jauge bombée avec un reflet qui passe. */
.theme-build360-2026 .progress{box-shadow:inset 0 1px 2px rgba(var(--d-ink),.14);background:#E6EAF1}
.theme-build360-2026 .progress__bar{position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(var(--d-ink),.2)}
html.b360-motion .theme-build360-2026 .progress__bar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:d-sheen 3.6s ease-in-out infinite}
@keyframes d-sheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
html.b360-motion #app-content.b360-enter .progress__bar{animation:d-fill .9s var(--d-ease) both;transform-origin:0 50%}
@keyframes d-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Tableaux : la ligne survolée se détache. */
.theme-build360-2026 .tbl tbody tr{transition:background-color .15s ease,box-shadow .2s ease}
.theme-build360-2026 .tbl tbody tr:hover{background:#FFFBEF;box-shadow:inset 3px 0 0 var(--b360-primary),0 8px 18px -12px rgba(var(--d-ink),.35)}

/* Titre d'écran : trait de niveau jaune. */
.theme-build360-2026 .page-title{position:relative}
.theme-build360-2026 .page-title::after{content:"";display:block;width:44px;height:4px;margin-top:8px;border-radius:4px;
  background:linear-gradient(90deg,#FFB300,#FF6A00);box-shadow:0 4px 10px -2px rgba(255,140,0,.6)}
html.b360-motion #app-content.b360-enter .page-title::after{animation:d-rule .6s var(--d-ease) .1s both;transform-origin:0 50%}
@keyframes d-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 5. Couches flottantes : fiche latérale, fenêtres ---------- */
body.b360-connected .drawer-backdrop,
body.b360-connected .modal-backdrop{-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}
body.b360-connected .drawer{box-shadow:-30px 0 80px -20px rgba(15,23,42,.45),-1px 0 0 rgba(255,255,255,.6) inset}

/* ---------- 6. Arrivée d'un écran : les blocs se posent un à un ---------- */
html.b360-motion #app-content.b360-enter .b360-card,
html.b360-motion #app-content.b360-enter .b360-kpi,
html.b360-motion #app-content.b360-enter .af-entity-card,
html.b360-motion #app-content.b360-enter .ops-card,
html.b360-motion #app-content.b360-enter .work-action,
html.b360-motion #app-content.b360-enter > .card,
html.b360-motion #app-content.b360-enter .grid > .card{
  animation:d-rise .5s var(--d-ease) both;animation-delay:calc(var(--d-i,0) * 38ms);
}
@keyframes d-rise{
  from{opacity:0;transform:perspective(900px) translate3d(0,22px,-60px) rotateX(-10deg)}
  to{opacity:1;transform:none}
}

/* ---------- 7. Garde-fous ---------- */
@media (max-width:900px){
  #b360-ambient .amb__cube{display:none}
  #b360-ambient .amb__floor{height:60vh;opacity:.7}
  #b360-ambient .amb__glow{filter:blur(50px)}
  .theme-build360-2026 .b360-card:hover,
  .theme-build360-2026 .af-entity-card:hover,
  .theme-build360-2026 .ops-card:hover,
  .theme-build360-2026 .work-action:hover{transform:none}
  .theme-build360-2026 .b360-card:hover .b360-card__illu{transform:none}
}
@media (prefers-reduced-motion:reduce){
  #b360-ambient *{animation:none!important}
  .theme-build360-2026 *{transition-duration:.01ms!important}
  .theme-build360-2026 .b360-card:hover,.theme-build360-2026 .af-entity-card:hover,.theme-build360-2026 .btn:hover{transform:none}
}
@media print{#b360-ambient{display:none!important}}