/* =========================================================================
   WEBCRAFT — rail-fix.css · 23/10/2026 · Hugo (code)
   Trois défauts du menu de gauche relevés par Raphaël, rien d'autre.
   ========================================================================= */

/* ---------- 1. UN SEUL LOGO : LE RELIEF, LE REFLET DEDANS ----------------- */
/* Cause du doublon : le relief (PNG) et le SVG vif sont deux images
   empilées (le SVG, plus petit, donnait le « mini Web » dans un cadre sombre).
   On efface le SVG en calque et on fait passer le reflet PAR-DESSUS le même
   logo, découpé dans la forme du relief par un masque. */
.rail__marque{position:relative!important}
.rail__marque .marque-vive{display:none!important}

.rail__marque > img{
  width:auto!important;
  height:clamp(30px,2.9vw,40px)!important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))!important;
}

.rail__marque::after{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;
  width:100%!important;
  height:clamp(30px,2.9vw,40px)!important;
  pointer-events:none!important;
  background:linear-gradient(100deg,
    transparent 30%,
    rgba(247,250,255,.06) 42%,
    rgba(247,250,255,.85) 50%,
    rgba(220,229,242,.10) 58%,
    transparent 70%)!important;
  background-size:260% 100%!important;
  background-position:180% 0!important;
  -webkit-mask-image:url("images/logo-webcraft-relief-blanc.png")!important;
  mask-image:url("images/logo-webcraft-relief-blanc.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:railReflet 7.5s cubic-bezier(.45,.05,.55,.95) infinite!important;
}
@keyframes railReflet{
  0%,62%   {background-position:180% 0;opacity:0}
  68%      {opacity:.95}
  100%     {background-position:-80% 0;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .rail__marque::after{animation:none!important;opacity:0!important}
}

.rail__marque .rail__lieu{margin-top:6px!important}

/* Le pied de page réutilise .rail__marque : on n'y applique NI le reflet
   animé NI la hauteur clouée, sinon le logo et « Poitiers » se superposent. */
.pied .rail__marque::after{content:none!important;display:none!important}
.pied .rail__marque{position:static!important;display:inline-flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
.pied .rail__marque > img{height:clamp(22px,2.1vw,30px)!important;width:auto!important;filter:none!important}
.pied .rail__marque .rail__nom{padding:0!important;line-height:1.1!important}
.pied__col{position:relative!important;gap:8px!important}

/* ---------- 2. LE BOUTON DU RAIL : TEXTE NUIT SUR MERCURE CLAIR ---------- */
/* .atelier-corrections.css impose color:#fff !important sur .rail__cta : on
   reprend la main sur le fond et sur le texte. */
.rail__cta,
a.rail__cta{
  background:#DCE5F2!important;
  background-image:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 46%,#8A9AB2 100%)!important;
  color:#0A0B0E!important;
  -webkit-text-fill-color:#0A0B0E!important;
  font-weight:600!important;
  box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.rail__cta *,
a.rail__cta *{
  color:#0A0B0E!important;
  -webkit-text-fill-color:#0A0B0E!important;
  stroke:#0A0B0E!important;
}
a.rail__cta:hover{
  background-image:linear-gradient(135deg,#FFFFFF 0%,#EAF0FA 50%,#A9B7CC 100%)!important;
  box-shadow:0 10px 28px rgba(220,229,242,.3),inset 0 1px 0 #fff!important;
}
a.rail__cta:focus-visible{outline:2px solid #F7FAFF!important;outline-offset:3px!important}

/* ---------- 3. LE RAIL RESTE SUR TOUTE LA HAUTEUR DE L'ÉCRAN ------------ */
/* .mise-en-page.css remet .shell > .rail en position:sticky : le rail partait
   avec la page et laissait une bande vide dessous. */
.shell > .rail.rail,
.shell > aside#rail,
aside.rail#rail{
  position:fixed!important;
  top:0!important;
  left:0!important;
  bottom:0!important;
  height:100vh!important;
  max-height:100vh!important;
  min-height:100vh!important;
  align-self:auto!important;
  overflow-y:auto!important;
  z-index:200!important;
}

@media (max-width:980px){
  .shell > .rail.rail,
  .shell > aside#rail,
  aside.rail#rail{
    position:static!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
  }
}