/* =========================================================================
   WEBCRAFT — rail-flux-menu.css · 23/10/2026 · Hugo (code / mouvement)
   1. Logo du rail : un seul, relief blanc/argent, 190 px, aucun cadre.
   2. Bas du rail : adresse, téléphone, bouton empilés, avec de l'air.
   3. Confiance : logos clients lisibles (mono clair), flux continu lent,
      reflet au survol.
   ========================================================================= */

/* ---------- 0. AUCUN PANNEAU DERRIÈRE LE LOGO --------------------------- */
/* Le « cadre sombre » vu à l'écran n'est pas le logo : c'est l'aplat + le
   halo posés par le rail lui-même derrière la marque. On les coupe
   uniquement dans la zone du logo, le reste du rail garde son fond. */
aside.rail#rail{
  background-image:none!important;
  background-color:#07080B!important;
}
aside.rail#rail::before,
aside.rail#rail::after{box-shadow:none!important;border:0!important}

/* ---------- 1. LE LOGO : NET, SANS CADRE, TAILLE DU RAIL ---------------- */
.rail__marque,
a.rail__marque{
  position:relative!important;
  display:block!important;
  width:190px!important;
  max-width:100%!important;
  padding:0!important;
  margin:0 0 clamp(16px,3vh,32px)!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.rail__marque > img{
  display:block!important;
  width:190px!important;
  height:auto!important;
  max-width:100%!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  /* lumière rasante : arête claire en haut du métal, ombre portée dessous */
  filter:brightness(1.22) contrast(1.28)
         drop-shadow(0 1px 0 rgba(255,255,255,.55))
         drop-shadow(0 -1px 1px rgba(255,255,255,.22))
         drop-shadow(0 3px 8px rgba(0,0,0,.85))!important;
}
.rail__marque .marque-vive{display:none!important}

/* le reflet qui passe DANS la forme du logo */
.rail__marque::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  background:linear-gradient(104deg,
    transparent 36%,
    rgba(247,250,255,.06) 44%,
    rgba(247,250,255,.95) 50%,
    rgba(255,255,255,.28) 55%,
    transparent 64%)!important;
  background-size:260% 100%!important;
  background-position:190% 0!important;
  -webkit-mask-image:url("images/logo-webcraft-rail-relief.png")!important;
  mask-image:url("images/logo-webcraft-rail-relief.png")!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  animation:webcraftRefletRail 7.5s cubic-bezier(.4,0,.2,1) infinite!important;
}
@keyframes webcraftRefletRail{
  0%,18%{background-position:190% 0}
  62%,100%{background-position:-120% 0}
}

/* ---------- 2. LE BAS DU RAIL : EMPILÉ, AÉRÉ --------------------------- */
.rail__pied,
aside.rail .rail__pied{
  margin-top:auto!important;
  padding-top:clamp(16px,2.4vh,24px)!important;
  border-top:1px solid rgba(220,229,242,.16)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:14px!important;
  font-size:13.5px!important;
  line-height:1.6!important;
  color:rgba(220,229,242,.82)!important;
}
.rail__pied a[href^="tel"],
aside.rail .rail__pied a[href^="tel"]{
  display:block!important;
  color:rgba(220,229,242,.82)!important;
  text-decoration:none!important;
  letter-spacing:.02em!important;
}
.rail__pied a[href^="tel"]:hover{color:#F7FAFF!important}
.rail__pied .rail__cta,
aside.rail .rail__pied .rail__cta,
a.rail__cta{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:6px 0 0!important;
  padding:13px 18px!important;
  border-radius:999px!important;
  background:#DCE5F2!important;
  background-image:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 46%,#A9B7CC 100%)!important;
  color:#0A0B0E!important;
  -webkit-text-fill-color:#0A0B0E!important;
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.9)!important;
  transition:background-image .4s ease,box-shadow .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)!important;
}
.rail__pied .rail__cta *,
a.rail__cta *{color:#0A0B0E!important;-webkit-text-fill-color:#0A0B0E!important}
a.rail__cta:hover{
  background-image:linear-gradient(135deg,#FFFFFF 0%,#EDF2FB 44%,#B9C6D9 100%)!important;
  box-shadow:0 14px 30px rgba(220,229,242,.28),inset 0 1px 0 #fff!important;
  transform:translateY(-1px)!important;
}
a.rail__cta .fleche{transition:transform .4s cubic-bezier(.2,.7,.2,1)!important}
a.rail__cta:hover .fleche{transform:translateX(4px)!important}

/* ---------- 3. « ILS NOUS ONT FAIT CONFIANCE » — LE FLUX -------------- */
.confiance{
  background:none!important;
  background-color:#07080B!important;
  border-block:1px solid rgba(220,229,242,.10)!important;
  padding-block:clamp(34px,4.2vw,58px)!important;
  overflow:hidden!important;
}
.confiance__titre,
.confiance .confiance__titre{
  font-size:11.5px!important;
  font-weight:800!important;
  letter-spacing:.26em!important;
  text-transform:uppercase!important;
  color:rgba(220,229,242,.62)!important;
  margin:0 0 clamp(22px,2.6vw,34px)!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
.confiance__titre::after{
  content:""!important;
  flex:1!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(220,229,242,.28),transparent)!important;
}

.bandeau-logos,
.confiance .bandeau-logos{
  overflow:hidden!important;
  padding-block:clamp(6px,1vw,12px)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)!important;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)!important;
}
.bandeau-logos__piste,
.confiance .bandeau-logos__piste{
  display:flex!important;
  align-items:center!important;
  width:max-content!important;
  gap:clamp(40px,5vw,88px)!important;
  animation:webcraftFluxMetal 46s linear infinite!important;
}
.bandeau-logos:hover .bandeau-logos__piste{animation-play-state:paused!important}
@keyframes webcraftFluxMetal{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.bandeau-logos__item,
.confiance .bandeau-logos__item{
  position:relative!important;
  flex:0 0 auto!important;
  padding:10px 0!important;
  font-size:clamp(14px,1.15vw,17px)!important;
  font-weight:600!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  color:rgba(220,229,242,.55)!important;
  /* relief mono clair : arête haute, ombre sous le métal */
  text-shadow:0 1px 0 rgba(255,255,255,.16),0 2px 6px rgba(0,0,0,.6)!important;
  transition:color .5s ease,text-shadow .5s ease!important;
  -webkit-box-reflect:below -6px linear-gradient(transparent 62%,rgba(220,229,242,.10))!important;
}
.bandeau-logos__item:hover,
.confiance .bandeau-logos__item:hover{
  color:#F7FAFF!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 0 18px rgba(247,250,255,.45)!important;
}
/* le reflet qui passe sur le logo survolé */
.bandeau-logos__item::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:2px!important;
  pointer-events:none!important;
  background:linear-gradient(104deg,transparent 40%,rgba(247,250,255,.85) 50%,transparent 60%)!important;
  background-size:300% 100%!important;
  background-position:180% 0!important;
  -webkit-mask-image:linear-gradient(#000,#000)!important;
  mask-image:linear-gradient(#000,#000)!important;
  mix-blend-mode:overlay!important;
  opacity:0!important;
  transition:opacity .3s ease!important;
}
.bandeau-logos__item:hover::after{
  opacity:1!important;
  animation:webcraftRefletLogo 1.15s cubic-bezier(.4,0,.2,1) infinite!important;
}
@keyframes webcraftRefletLogo{
  0%{background-position:180% 0}
  100%{background-position:-80% 0}
}

/* ---------- 4. LE PANNEAU DERRIÈRE LE LOGO : SUPPRIMÉ, PAS MASQUÉ ----- */
/* Le fichier est ensuite lu sur son fond opaque : le PNG de relief est
   détouré en masque (n'importe quel fond clair devient transparent) et la
   matière est repeinte en dégradé à l'intérieur de la forme, avec une
   ombre sous le métal. Aucun aplat ne peut donc plus apparaître.
   Plus de ::after de reflet (il réintroduisait un rectangle animé). */
.rail__marque::after{content:none!important;display:none!important}
.rail__marque > img{
  width:190px!important;
  height:76px!important;
  object-fit:none!important;
  -webkit-mask-image:url("images/logo-webcraft-rail-relief.png")!important;
  mask-image:url("images/logo-webcraft-rail-relief.png")!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  background:linear-gradient(160deg,#FFFFFF 0%,#F7FAFF 28%,#DCE5F2 52%,#8A9AB2 78%,#EAF0FA 100%)!important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 3px 9px rgba(0,0,0,.9))!important;
}
/* le reflet : une lumière qui traverse la FORME (clip sur le masque) */
.rail__marque::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%)!important;
  background-size:280% 100%!important;
  -webkit-mask-image:url("images/logo-webcraft-rail-relief.png")!important;
  mask-image:url("images/logo-webcraft-rail-relief.png")!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  animation:webcraftRefletRail 7.5s cubic-bezier(.4,0,.2,1) infinite!important;
}
/* même hauteur optique : toute la piste sur une seule ligne de base */
.bandeau-logos__item{display:inline-flex!important;align-items:center!important;min-height:1.5em!important}

@media (prefers-reduced-motion:reduce){
  .rail__marque::after,
  .bandeau-logos__item:hover::after{animation:none!important;opacity:0!important}
  .bandeau-logos__piste{animation:none!important}
}