/* =========================================================================
   WEBCRAFT — rail-logo-propre.css · 23/10/2026 · Hugo
   Un SEUL logo dans le rail : le relief blanc/argent, ~190 px de large,
   sans cadre ni barre. Le reflet qui passe est découpé dans sa forme.
   (+ filigranes 01/02/03 ramenés dans la colonne de contenu)
   ========================================================================= */

/* ---------- 1. Un seul logo : on retire le SVG superposé ---------- */
.rail__marque .marque-vive{display:none!important}

/* ---------- 2. Le relief, à sa taille : ~190 px de large ---------- */
.rail__marque{
  position:relative!important;
  display:block!important;
  width:min(190px,100%)!important;
  max-width:190px!important;
  margin:0 0 clamp(18px,3.4vh,36px)!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.rail__marque > img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
}
/* --rail-occupe vaut 228 à 296 px : 190 px de logo tiennent sans forcer. */

/* ---------- 3. Le reflet passe DANS le logo, dans sa forme ---------- */
.rail__marque::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  background:linear-gradient(100deg,
    transparent 34%,
    rgba(247,250,255,.10) 44%,
    rgba(247,250,255,.95) 50%,
    rgba(220,229,242,.14) 57%,
    transparent 66%)!important;
  background-size:280% 100%!important;
  background-position:200% 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:railRefletPropre 7.5s cubic-bezier(.45,.05,.55,.95) infinite!important;
}
@keyframes railRefletPropre{
  0%,62% {background-position:200% 0;opacity:0}
  69%    {opacity:.9}
  100%   {background-position:-100% 0;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .rail__marque::after{animation:none!important;opacity:0!important}
}

/* ---------- 4. Filigranes 01/02/03 : dans la colonne de contenu ---------- */
/* Cause : ils étaient posés en absolu sur le bord droit de la section, que le
   menu fixe et élargi recouvre. On les ramène dans le flux de la colonne de
   contenu, à droite, derrière le texte et jamais sous le menu. */
.bloc > .filigrane{
  position:absolute!important;
  top:clamp(10px,1.4vw,26px)!important;
  right:clamp(12px,3vw,54px)!important;
  left:auto!important;
  z-index:0!important;
  font-size:clamp(64px,7.4vw,132px)!important;
  line-height:.86!important;
  color:rgba(12,12,16,.05)!important;
  pointer-events:none!important;
}
.bloc > .enveloppe{position:relative!important;z-index:1!important}