/* Parti D4 : la chaîne en panorama. Même bandeau que D2 (le ciel en fond,
   le texte réduit en haut à gauche), mais le paysage raconte le trajet d'une
   commande de gauche à droite : usine, contrôle qualité, port de départ,
   transport, port d'arrivée, livraison. Chaque poste porte son compteur. */
.lp .hero-panorama4 {
  height: clamp(680px, calc(100vh - 56px), 860px);
  background: linear-gradient(180deg, #110D2E 0%, #17123A 38%, #221A50 62%, #2A2062 74%, #17123A 100%);
}
.lp .hero-panorama4 .in { position: relative; height: 100%; }
.lp .hero-panorama4 .copy { position: absolute; z-index: 3; left: var(--gutter); top: clamp(36px, 6.5vh, 64px); max-width: 600px; }
.lp .hero-panorama4 h1 { margin-top: 0; font-size: clamp(34px, 3.3vw, 48px); line-height: 1.06; }
.lp .hero-panorama4 .lead { margin-top: 14px; font-size: 16.5px; line-height: 1.55; max-width: 31em; }
.lp .hero-panorama4 .acts { margin-top: 22px; }
.lp .hero-panorama4 .scene { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }

.pn4-sky, .pn4-world { position: absolute; inset: 0; }
.pn4-sky svg, svg.pn4-world { display: block; width: 100%; height: 100%; overflow: hidden; }

/* étiquettes des postes : une pastille, une tige jusqu'à l'élément */
.pn4-tag { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; opacity: 0; will-change: transform, opacity; }
.pn4-tag .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 9px; background: rgba(23, 18, 58, .9); border: 1px solid rgba(185, 169, 255, .34); font-size: 13.5px; color: var(--pale); white-space: nowrap; box-shadow: 0 8px 24px -10px rgba(8, 6, 24, .7); transition: border-color .4s; }
.pn4-tag .pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--lavender); }
.pn4-tag .pill i.ok { background: var(--ok-light); }
.pn4-tag .pill b { font-weight: 400; }
.pn4-tag .pill b strong { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; transition: color .5s; }
.pn4-tag .stem { width: 1px; height: 22px; background: linear-gradient(rgba(185, 169, 255, .65), rgba(185, 169, 255, .15)); }
.pn4-tag .pt { position: relative; width: 6px; height: 6px; margin-top: -1px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 0 4px rgba(185, 169, 255, .18); }
.pn4-tag .pt::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--ok-light); opacity: 0; }
/* un compteur qui avance : le chiffre passe au vert, un anneau part du point */
.pn4-tag.up .pill { border-color: rgba(111, 211, 154, .55); }
.pn4-tag.up .pill b strong { color: var(--ok-light); transition: none; }
.pn4-tag.up .pt::after { animation: pn4-ring .9s ease-out; }
@keyframes pn4-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.4); } }

/* détails animés dans les dessins */
.pn4-world .w { transition: opacity .9s ease; }
.pn4-world .w.off { opacity: .12; }
.pn4-world .puff { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pn4-puff 9s linear infinite; }
@keyframes pn4-puff {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  12% { opacity: .5; }
  100% { opacity: 0; transform: translate(-22px, -44px) scale(2.4); }
}
.pn4-world .blink { animation: pn4-blink 2.6s steps(1) infinite; }
@keyframes pn4-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
.pn4-world .shim { animation: pn4-shim 4.6s ease-in-out infinite; }
@keyframes pn4-shim { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@media (max-width: 760px) {
  .lp .hero-panorama4 { height: auto; background: linear-gradient(180deg, #110D2E 0%, #17123A 40%, #241B56 70%, #17123A 100%); }
  .lp .hero-panorama4 .in { height: auto; display: flex; flex-direction: column; }
  .lp .hero-panorama4 .copy { position: relative; left: auto; top: auto; padding: 28px 20px 0; }
  .lp .hero-panorama4 h1 { font-size: 28px; }
  .lp .hero-panorama4 .lead { margin-top: 12px; font-size: 15px; }
  .lp .hero-panorama4 .acts { margin-top: 18px; gap: 8px; flex-wrap: nowrap; }
  .lp .hero-panorama4 .acts .btn.lg { height: 40px; padding: 0 13px; font-size: 14px; border-radius: 10px; }
  .lp .hero-panorama4 .scene { position: relative; inset: auto; height: 440px; margin-top: 4px; }
  .pn4-tag .pill { font-size: 12px; padding: 5px 9px; gap: 6px; }
  .pn4-tag .stem { height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pn4-world .puff, .pn4-world .blink, .pn4-world .shim { animation: none; }
  .pn4-world .puff { opacity: .22; }
  .pn4-tag.up .pt::after { animation: none; }
}

/* Adaptation au site et à ses boutons. */
.lp .hero-panorama4 { --pale: #F1EEFB; --ok-light: #6FD39A; }
.lp .hero-panorama4 .in { display: block; padding: 0; }
.lp .hero-panorama4 .copy { padding: 0; }
.lp .hero-panorama4 .eyebrow { margin-bottom: 14px; }
.lp .hero-panorama4 .acts .buyer-entry {
 height: auto; min-height: 44px; max-width: 440px; padding: 16px 20px;
 display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
 white-space: normal; text-align: left;
}
.lp .hero-panorama4 .buyer-entry-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.lp .hero-panorama4 .buyer-entry-description { font-size: 13px; font-weight: 400; line-height: 1.5; }
@media (min-width: 761px) {
 .lp .hero-panorama4 .copy { max-width: none; width: calc(100% - 2 * var(--gutter)); }
 .lp .hero-panorama4 h1 { font-size: clamp(26px, 3.2vw, 44px); text-wrap: initial; }
 .lp .hero-panorama4 .lead { max-width: none; font-size: clamp(12px, 1.15vw, 16.5px); text-wrap: balance; }
 .lp .hero-panorama4 .hero-title-line { display: block; white-space: nowrap; }
}
@media (max-width: 760px) {
 .lp .hero-panorama4 .copy { padding: 28px 20px 0; }
 .lp .hero-panorama4 .acts { flex-wrap: wrap; }
 .lp .hero-panorama4 .acts .btn { flex: 0 1 auto; }
}
/* Sur téléphone, les deux entrées gardent la place nécessaire à leur texte. */
@media(max-width:760px){
 .lp .hero-panorama4 .acts{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 .lp .hero-panorama4 .acts .btn.buyer-entry{width:100%;max-width:none;min-width:0;height:auto;min-height:0;padding:16px 18px;white-space:normal;align-items:flex-start;justify-content:flex-start}
 .lp .hero-panorama4 .buyer-entry-title,.lp .hero-panorama4 .buyer-entry-description{max-width:100%;overflow-wrap:anywhere}
}