/* GNS Industrial Supply — styles complémentaires */
:root{ --navy:#0E2445; --flame:#F4511E; }

html{ scroll-padding-top:84px }
::selection{ background:var(--flame); color:#fff }

/* apparition au défilement */
[data-reveal]{ opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1) }
[data-reveal].is-in{ opacity:1; transform:none }

/* diaporama */
.slide{ pointer-events:none }
.slide.is-active{ opacity:1 !important; pointer-events:auto }
.dot.is-active{ background:var(--flame) }

/* champs de formulaire */
.champ{ width:100%; min-height:48px; padding:0 1rem; background:#EDF0F4;
  border:1px solid #C7D0DC; border-radius:4px; font:inherit; color:var(--navy) }
.champ:focus{ outline:none; border-color:var(--flame); box-shadow:0 0 0 3px rgba(244,81,30,.25) }
textarea.champ{ min-height:auto }

/* barre basse type application */
.appbar-item{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:9px 4px calc(9px + env(safe-area-inset-bottom));
  font-size:11px; color:var(--navy); border-right:1px solid #E3E8EF }
.appbar-item:last-child{ border-right:0 }
.appbar-item.appbar-cta{ background:var(--flame); color:#fff }
.appbar-item:active{ background:#E3E8EF }
.appbar-item.appbar-cta:active{ background:#D63F10 }

@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
  .slide{ transition:none }
}

/* invitation a installer l'application */
#pwa-banner:not(.hidden){ animation:pwa-up .45s cubic-bezier(.2,.7,.3,1) both }
@keyframes pwa-up{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ #pwa-banner:not(.hidden){ animation:none } }

/* icones de secteurs : respiration continue + reaction au survol */
.icon-badge{
  animation: badge-float 4.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transition: background-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.icon-badge svg{
  transition: transform .45s cubic-bezier(.2,.7,.3,1), stroke-width .3s ease;
}
.group:hover .icon-badge{ background:var(--flame); transform:translateY(-4px) }
.group:hover .icon-badge svg{ color:#fff; transform:scale(1.12) }

/* trace des icones au premier affichage */
.icon-badge svg path{
  stroke-dasharray: 90; stroke-dashoffset: 90;
  animation: badge-draw 1.4s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: calc(var(--d, 0s) + .2s);
}
@keyframes badge-draw{ to{ stroke-dashoffset:0 } }
@keyframes badge-float{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-5px) }
}

@media (prefers-reduced-motion:reduce){
  .icon-badge, .icon-badge svg path{ animation:none }
  .icon-badge svg path{ stroke-dashoffset:0 }
}