/* Logo de la maquette 2026 (« Offre WorkDispo 2026 », « Catalogue Formations WorkDispo 2026 »), 05/10/2026.
   Carré « W » en relief qui flotte, contour lumineux qui tourne, reflet qui passe, pastille verte, puis « workdispo ».
   Valeurs recopiées de la maquette (carré 34 px, mot 20 px Space Grotesk 700). Gabarit : templates/common/_logo_2026.html.twig,
   pages à en-tête sombre seulement (body.wd-offre, body.wd-formations). Classes wdlg-*, animations wdlg*. */
#logo.wdlg-logo { overflow: visible; }
#logo.wdlg-logo a { display: inline-flex; align-items: center; height: 100%; text-decoration: none; }
.wdlg { display: flex; align-items: center; gap: 10px; color: #FFFFFF; flex-shrink: 0; }
.wdlg-carre { position: relative; display: block; width: 34px; height: 34px; flex-shrink: 0; perspective: 240px; }
.wdlg-ombre {
  position: absolute; left: 16%; right: 16%; bottom: -9px; height: 6px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30,49,192,.8), transparent); filter: blur(2px); animation: wdlgOmbre 5s ease-in-out infinite;
}
.wdlg-flotte { position: absolute; inset: 0; animation: wdlgFlotte 5s ease-in-out infinite; }
.wdlg-3d {
  position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-12deg); transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
#logo a:hover .wdlg-3d, #logo a:focus-visible .wdlg-3d { transform: rotateX(-8deg) rotateY(16deg) scale(1.1); }
.wdlg-cadre {
  position: absolute; inset: 0; border-radius: 11px; overflow: hidden; padding: 1.5px;
  background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.08) 55%, rgba(159,176,255,.5));
  box-shadow: 0 14px 26px -10px rgba(42,65,232,.95);
}
.wdlg-tour {
  position: absolute; left: 50%; top: 50%; width: 200%; height: 200%; margin: -100% 0 0 -100%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 210deg, rgba(159,176,255,.85) 285deg, #FFFFFF 318deg, transparent 360deg);
  animation: wdlgTour 3.8s linear infinite;
}
.wdlg-fond {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 9.5px; overflow: hidden;
  background: linear-gradient(160deg, #4F63FF 0%, #2A41E8 55%, #1E31C0 100%);
  box-shadow: inset 0 -7px 12px -7px rgba(10,16,48,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.wdlg-reflet { position: absolute; left: -25%; top: -62%; width: 115%; height: 95%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.42), transparent); }
.wdlg-eclat {
  position: absolute; top: -30%; bottom: -30%; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: wdlgEclat 5.2s ease-in-out infinite;
}
.wdlg-w { position: relative; display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(10,16,48,.5)); }
.wdlg-point {
  position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #12B76A; border: 2px solid #0A1030;
  transform: translateZ(16px); animation: wdlgPulse 2.4s infinite;
}
.wdlg-mot { display: flex; align-items: baseline; font: 700 20px/1 'Space Grotesk', sans-serif; letter-spacing: -.055em; color: #FFFFFF; white-space: nowrap; }
.wdlg-mot-b { color: #9FB0FF; }
.wdlg-mot-point { margin-left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #12B76A; }

@keyframes wdlgFlotte { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes wdlgOmbre { 0%, 100% { transform: scaleX(1); opacity: .95; } 50% { transform: scaleX(.68); opacity: .45; } }
@keyframes wdlgEclat { 0%, 60% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(320%) skewX(-20deg); } }
@keyframes wdlgTour { to { transform: rotate(360deg); } }
@keyframes wdlgPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(18,183,106,.5); } 50% { box-shadow: 0 0 0 7px rgba(18,183,106,0); } }

@media (prefers-reduced-motion: reduce) {
  .wdlg-ombre, .wdlg-flotte, .wdlg-tour, .wdlg-eclat, .wdlg-point { animation: none; }
  .wdlg-3d { transition: none; }
}