/* Hero de la page Expertises : « une page, trois métiers » (12/10). Gabarit : template-parts/expertises/hub-anim.php,
   rythme : assets/js/hub-anim.js. Toutes les tailles en em : on règle la taille du composant d'un seul font-size
   (16 px au large, ~10 px à 390), comme une image vectorielle.
   États posés par le JS sur .lw-hb : data-scene (vitrine | ecommerce | plateforme | suivi), js-anim, is-built, is-move,
   is-click, is-done, is-out. Sans js-anim (pas de JS, moins d'animations, pause) : la scène vitrine finie, fixe. */

.lw-hb { position: relative; font-size: clamp(12px, 1.15vw, 16px); padding: 1.6em 0 3.4em; }
.lw-hb__stage { position: relative; }
.lw-hb__pause { position: absolute; left: 0; bottom: 0; z-index: 6; } /* sous la page, à gauche : en haut à droite, il couvrait la barre de la page ; à droite, il y a la notification */

/* Pastille produit, posée sur le bord haut de la page */
.lw-hb__pills { position: absolute; left: 1.4em; top: -1.25em; z-index: 3; }
.lw-hb__pill { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(.4em); transition: opacity .35s var(--lw-ease-out), transform .35s var(--lw-ease-out); }
.lw-hb__pill.lw-pill--dark { border-color: var(--lw-white); }

/* La page, à la surface du produit */
.lw-hb__page {
  --sk: var(--lw-black); --sk2: #d0d0d0; --blk: var(--lw-off-white);
  position: relative; height: 27em; border-radius: var(--lw-radius-tile); background: var(--lw-white);
  box-shadow: inset 0 0 0 2px var(--lw-black), 6px 8px 0 0 var(--lw-shadow);
  transition: background-color .45s var(--lw-ease-out), box-shadow .45s var(--lw-ease-out);
}
.lw-hb[data-scene="ecommerce"] .lw-hb__page { --sk: var(--lw-white); --sk2: #4a4a4a; background: #111; box-shadow: inset 0 0 0 2px var(--lw-black), 6px 8px 0 0 #d0d0d0; }
.lw-hb[data-scene="plateforme"] .lw-hb__page { --sk2: rgb(0 0 0 / .22); background: var(--lw-lime); }
.lw-hb[data-scene="suivi"] .lw-hb__page { background: var(--lw-off-white); }
.lw-hb__bar { display: flex; justify-content: flex-end; gap: .5em; padding: 1.4em 1.3em .9em; border-bottom: 2px solid var(--lw-black); transition: border-color .45s; }
.lw-hb__bar i { width: .8em; height: .8em; border-radius: 50%; background: var(--sk2); }
.lw-hb[data-scene="ecommerce"] .lw-hb__bar { border-color: #333; }

.lw-hb__scene { position: absolute; left: 0; right: 0; top: 3.3em; bottom: 0; padding: 1.2em 1.6em; opacity: 0; visibility: hidden; transition: opacity .35s var(--lw-ease-out), visibility 0s .35s; }
.lw-hb[data-scene="vitrine"] [data-s="vitrine"], .lw-hb[data-scene="ecommerce"] [data-s="ecommerce"],
.lw-hb[data-scene="plateforme"] [data-s="plateforme"], .lw-hb[data-scene="suivi"] [data-s="suivi"],
.lw-hb[data-scene="vitrine"] .lw-hb__pill[data-for="vitrine"], .lw-hb[data-scene="ecommerce"] .lw-hb__pill[data-for="ecommerce"],
.lw-hb[data-scene="plateforme"] .lw-hb__pill[data-for="plateforme"], .lw-hb[data-scene="suivi"] .lw-hb__pill[data-for="suivi"] {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}

/* Squelette commun (repris du Studio) */
.lw-hb__nav { display: flex; align-items: center; gap: 1em; }
.lw-hb__nav > span:not(.lw-hb__cart) { width: 3.6em; height: .6em; border-radius: .3em; background: var(--sk2); }
.lw-hb__logo { width: 5em; height: 1.3em; margin-right: auto; border-radius: .3em; background: var(--sk); }
.lw-hb__navbtn { width: 5em; height: 1.7em; border-radius: .45em; background: var(--sk); }
.lw-hb__h { display: block; width: 78%; height: 1.4em; border-radius: .3em; background: var(--sk); }
.lw-hb__h--short { width: 52%; }

/* Site vitrine */
.lw-hb__hero { display: flex; flex-direction: column; align-items: flex-start; gap: .7em; margin-top: 1.1em; padding: 1.4em 1.5em 1.5em; border-radius: var(--lw-radius); background: var(--blk); }
.lw-hb__l { width: 70%; height: .6em; margin-top: .3em; border-radius: .3em; background: #bdbdbd; }
.lw-hb__l--short { width: 46%; margin-top: 0; }
.lw-hb__cta { margin-top: .5em; padding: .65em 1.05em; border-radius: .55em; background: var(--lw-lime); box-shadow: inset 0 0 0 2px var(--lw-black), 2px 4px 0 0 var(--lw-shadow); font-weight: var(--lw-fw-semibold); font-size: 1em; line-height: 1.2; transition: transform .15s, box-shadow .15s; }
.lw-hb__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-top: 1.1em; }
.lw-hb__cards i { height: 4.2em; border-radius: var(--lw-radius); background: var(--lw-white); box-shadow: inset 0 0 0 2px #d0d0d0; }

/* Site e-commerce */
.lw-hb__cart { position: relative; display: grid; color: var(--sk); }
.lw-hb__cart svg { width: 1.5em; height: 1.5em; }
.lw-hb__badge { position: absolute; top: -.55em; right: -.7em; display: grid; place-items: center; min-width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--lw-lime); color: var(--lw-black); font-style: normal; font-weight: var(--lw-fw-bold); font-size: .8em; line-height: 1; }
.lw-hb__produits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-top: 1.4em; }
.lw-hb__produit { display: flex; flex-direction: column; gap: .55em; padding: .7em; border-radius: var(--lw-radius); background: #1c1c1c; box-shadow: inset 0 0 0 1.5px #3a3a3a; }
.lw-hb__produit i { height: 9em; border-radius: var(--lw-radius-inner); background: linear-gradient(135deg, #3d3d3d, #262626); }
.lw-hb__produit span { width: 80%; height: .6em; border-radius: .3em; background: #5a5a5a; }
.lw-hb__produit .lw-hb__prix { width: 40%; background: var(--lw-lime); }
.lw-hb__ajout { margin-top: .3em; padding: .55em 0; border-radius: .5em; background: var(--lw-white); color: var(--lw-black); font-weight: var(--lw-fw-semibold); font-size: .875em; line-height: 1.2; text-align: center; box-shadow: 2px 3px 0 0 #000; transition: transform .15s, box-shadow .15s, background-color .25s; }

/* Plateforme sur mesure */
.lw-hb__tete { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.lw-hb__h--tete { width: 38%; }
.lw-hb__auto { display: inline-flex; align-items: center; gap: .35em; padding: .45em .8em; border-radius: 999px; background: var(--lw-black); color: var(--lw-lime); font-weight: var(--lw-fw-semibold); font-size: .875em; line-height: 1; transition: box-shadow .3s; }
.lw-hb__auto svg { width: 1.1em; height: 1.1em; }

/* Plateforme : tableau de suivi des demandes en trois colonnes (13/10). La carte « Demande de M. Martin » est posée
   en absolu sur la case vide du haut de chaque colonne (.lw-hb__slot) et avance d'une colonne par translateX(100 % + gap). */
.lw-hb__board { --gap: .8em; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 1.1em; }
.lw-hb__col { display: flex; flex-direction: column; gap: .6em; min-height: 18.4em; padding: .7em; border-radius: var(--lw-radius); background: rgb(255 255 255 / .45); box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .18); }
.lw-hb__col-titre { height: 1.4em; font-weight: var(--lw-fw-bold); font-size: .875em; line-height: 1.6; }
.lw-hb__slot { display: block; height: 4.8em; flex: none; }
.lw-hb__ticket { display: flex; flex-direction: column; gap: .45em; height: 4.8em; padding: .75em; border-radius: var(--lw-radius-inner); background: var(--lw-white); box-shadow: inset 0 0 0 1.5px var(--lw-black); }
.lw-hb__ticket b { display: block; width: 80%; height: .55em; border-radius: .3em; background: #bdbdbd; }
.lw-hb__ticket b + b { width: 55%; background: #dedede; }
.lw-hb__ticket i { width: 1.3em; height: 1.3em; margin-top: auto; border-radius: 50%; background: #d0d0d0; }
.lw-hb__demande {
  position: absolute; left: .7em; top: calc(.7em + 1.225em + .6em); width: calc((100% - 2 * var(--gap)) / 3 - 1.4em); height: 4.8em; z-index: 2;
  display: flex; flex-direction: column; gap: .4em; padding: .7em .75em; border-radius: var(--lw-radius-inner); background: var(--lw-white);
  box-shadow: inset 0 0 0 2px var(--lw-black), 3px 4px 0 0 var(--lw-shadow);
  transition: transform .75s var(--lw-ease-in-out), opacity .35s var(--lw-ease-out);
}
.lw-hb__demande strong { font-weight: var(--lw-fw-bold); font-size: .8125em; line-height: 1.15; }
.lw-hb__demande > b { display: block; width: 70%; height: .5em; border-radius: .3em; background: #dedede; }
.lw-hb__demande-pied { display: flex; gap: .35em; margin-top: auto; }
.lw-hb__qui, .lw-hb__ok { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-style: normal; font-weight: var(--lw-fw-bold); font-size: .8em; line-height: 1; }
.lw-hb__qui { background: var(--lw-black); color: var(--lw-lime); }
.lw-hb__ok { background: var(--lw-lime); box-shadow: inset 0 0 0 1.5px var(--lw-black); }
.lw-hb__ok svg { width: .9em; height: .9em; }
/* Hors animation : la carte est arrivée en « Terminée ». */
.lw-hb__demande { transform: translateX(calc(2 * (100% + 1.4em + var(--gap)))); }

/* Suivi */
.lw-hb__checks { list-style: none; display: flex; flex-direction: column; gap: 1em; margin: .4em 0 0; padding: 0; }
.lw-hb__checks li { display: flex; align-items: center; gap: 1em; padding: 1.05em 1.3em; border-radius: var(--lw-radius); background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black); font-weight: var(--lw-fw-semibold); font-size: 1.0625em; line-height: 1.2; }
.lw-hb__checks li > svg { width: 1.4em; height: 1.4em; flex: none; }
.lw-hb__checks li span { margin-right: auto; }
.lw-hb__checks em { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--lw-lime); box-shadow: inset 0 0 0 2px var(--lw-black); color: var(--lw-black); transition: background-color .3s, color .3s, box-shadow .3s; }
.lw-hb__checks em svg { width: 1em; height: 1em; }

/* Curseur : position en px posée par le JS sur la cible de la scène */
.lw-hb__ptr { position: absolute; left: 86%; top: 92%; z-index: 4; display: none; pointer-events: none; transition: left 1s cubic-bezier(.77, 0, .175, 1), top 1s cubic-bezier(.77, 0, .175, 1), opacity .3s; }
.lw-hb__ptr svg { display: block; width: 2em; height: 2em; filter: drop-shadow(1px 2px 0 rgb(0 0 0 / .25)); transform-origin: 20% 10%; transition: transform .15s var(--lw-ease-out); }

/* Notification de fin de scène (même carte que le Studio) */
.lw-hb__notif {
  position: absolute; right: -.6em; bottom: -2.4em; z-index: 5; display: flex; align-items: center; gap: .9em; width: min(24em, 92%);
  padding: 1em 1.2em; border-radius: var(--lw-radius); background: var(--lw-white); color: var(--lw-black);
  box-shadow: inset 0 0 0 2px var(--lw-black), 5px 6px 0 0 var(--lw-lime);
  opacity: 0; visibility: hidden; transform: translateY(.8em) scale(.97);
  transition: opacity .35s var(--lw-ease-out), transform .35s var(--lw-ease-out), visibility 0s .35s;
}
.lw-hb[data-scene="plateforme"] .lw-hb__notif { box-shadow: inset 0 0 0 2px var(--lw-black), 5px 6px 0 0 var(--lw-shadow); } /* ombre lime invisible sur la page lime */
.lw-hb__check { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--lw-lime); box-shadow: inset 0 0 0 2px var(--lw-black); }
.lw-hb__check svg { width: 1.3em; height: 1.3em; }
.lw-hb__notif-txt { display: flex; flex-direction: column; gap: .2em; }
.lw-hb__notif-txt strong { font-weight: var(--lw-fw-bold); font-size: 1.15em; line-height: 1.2; letter-spacing: -0.01em; }
.lw-hb__notif-txt span { font-size: .9em; line-height: 1.35; color: var(--lw-grey-label); }
.lw-hb:not(.js-anim) .lw-hb__notif[data-for="vitrine"],
.lw-hb.is-done:not(.is-out)[data-scene="vitrine"] .lw-hb__notif[data-for="vitrine"],
.lw-hb.is-done:not(.is-out)[data-scene="ecommerce"] .lw-hb__notif[data-for="ecommerce"],
.lw-hb.is-done:not(.is-out)[data-scene="plateforme"] .lw-hb__notif[data-for="plateforme"],
.lw-hb.is-done:not(.is-out)[data-scene="suivi"] .lw-hb__notif[data-for="suivi"] {
  opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--lw-ease-out), transform .45s cubic-bezier(.3, 1.4, .5, 1), visibility 0s;
}

/* ---------- Animation (js-anim) : états de départ, puis étapes ---------- */
.lw-hb.js-anim .lw-hb__piece { opacity: 0; transform: translateY(.7em); transition: opacity .4s var(--lw-ease-out), transform .4s var(--lw-ease-out); }
.lw-hb.is-built .lw-hb__piece { opacity: 1; transform: none; }
.lw-hb.is-built .lw-hb__scene > .lw-hb__piece:nth-child(2), .lw-hb.is-built .lw-hb__piece:nth-child(2) { transition-delay: .12s; }
.lw-hb.is-built .lw-hb__piece:nth-child(3) { transition-delay: .24s; }
.lw-hb.is-built .lw-hb__cards .lw-hb__piece:nth-child(1) { transition-delay: .3s; }
.lw-hb.is-built .lw-hb__cards .lw-hb__piece:nth-child(2) { transition-delay: .4s; }
.lw-hb.is-built .lw-hb__cards .lw-hb__piece:nth-child(3) { transition-delay: .5s; }
.lw-hb.is-built .lw-hb__checks .lw-hb__piece { transition-delay: calc(var(--i) * .1s); }
.lw-hb__scene--reset * { transition: none !important; } /* scène qui entre : ses blocs repartent de zéro sans glisser */

.lw-hb.js-anim .lw-hb__ptr { display: block; opacity: 0; }
.lw-hb.is-move[data-scene="vitrine"] .lw-hb__ptr, .lw-hb.is-move[data-scene="ecommerce"] .lw-hb__ptr { opacity: 1; }
.lw-hb.is-click .lw-hb__ptr svg { transform: scale(.8); }
.lw-hb.is-click .lw-hb__cta { transform: translate(2px, 4px); box-shadow: inset 0 0 0 2px var(--lw-black); }
.lw-hb.is-click .lw-hb__ajout.lw-hb__target { transform: translate(2px, 3px); box-shadow: none; }
.lw-hb.is-done .lw-hb__ajout.lw-hb__target { background: var(--lw-lime); }

.lw-hb.js-anim .lw-hb__badge { transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.lw-hb.is-done .lw-hb__badge { transform: none; }


.lw-hb.js-anim .lw-hb__checks em { background: #e6e6e6; color: transparent; box-shadow: none; }
.lw-hb.is-move .lw-hb__checks em { background: var(--lw-lime); color: var(--lw-black); box-shadow: inset 0 0 0 2px var(--lw-black); transition-delay: calc(var(--i) * .45s + .2s); }

.lw-hb.is-out .lw-hb__scene { opacity: 0; transition: opacity .35s var(--lw-ease-out); }

/* Plateforme : la demande arrive dans « Reçue », un collaborateur la prend (« En cours »), puis elle passe en « Terminée ». */
.lw-hb.js-anim .lw-hb__demande { opacity: 0; transform: translateY(-.8em); }
.lw-hb.js-anim .lw-hb__qui, .lw-hb.js-anim .lw-hb__ok { transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.lw-hb.is-built .lw-hb__demande { opacity: 1; transform: none; transition-delay: .5s; }
.lw-hb.is-move .lw-hb__demande { transform: translateX(calc(100% + 1.4em + var(--gap))); transition-delay: 0s; }
.lw-hb.is-move .lw-hb__qui { transform: none; transition-delay: .75s; }
.lw-hb.is-done .lw-hb__demande { transform: translateX(calc(2 * (100% + 1.4em + var(--gap)))); }
.lw-hb.is-done .lw-hb__ok { transform: none; transition-delay: .75s; }
.lw-hb.is-done:not(.is-out)[data-scene="plateforme"] .lw-hb__notif[data-for="plateforme"] { transition-delay: .7s; } /* la notification attend que la carte soit arrivée */

/* ---------- Tablette et mobile ---------- */
@media (max-width: 1023px) {
  .lw-hb { font-size: clamp(9.5px, 2.55vw, 15px); margin-right: 6px; padding-bottom: max(3em, 46px); }
  .lw-hb__notif-txt span { display: none; }
  .lw-hb__notif-txt strong { font-size: 1.25em; }
  .lw-hb__pill { font-size: 0.875rem; }
}