/* =====================================================================
   WorkDispo — pop-up « Rejoignez-nous » (maquette Claude Design du 22/09/2026)
   Feuille chargée uniquement par templates/search/missions.html.twig (listes d'offres).
   Toutes les règles portent sur #fullscreenModal.wdjoin ou des classes wdjoin-* :
   rien d'autre sur la page n'est touché. Le déclencheur (.open-modal, visiteurs non
   connectés) et le JS (display: flex / none sur #fullscreenModal) sont inchangés.
   ===================================================================== */

/* Voile : reprend la position fixe / display de .modal-overlay (page), change fond, flou et centrage défilable. */
#fullscreenModal.wdjoin {
  align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; box-sizing: border-box;
  background: rgba(9,14,32,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#fullscreenModal.wdjoin *, #fullscreenModal.wdjoin *::before, #fullscreenModal.wdjoin *::after { box-sizing: border-box; }

.wdjoin-card {
  position: relative; width: 100%; max-width: 470px; margin: auto; display: flex; flex-direction: column;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  border-radius: 28px; background: #fff; box-shadow: 0 40px 90px rgba(9,14,32,.45); overflow: hidden;
  font-family: 'IBM Plex Sans', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: left;
  animation: wdjoinPop .26s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes wdjoinPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wdjoin-card { animation: none; } }

.wdjoin-close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; padding: 0; margin: 0;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.16); color: #fff;
  font: 700 17px/1 'IBM Plex Sans', Helvetica, Arial, sans-serif; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .16s ease;
}
.wdjoin-close:hover { background: rgba(255,255,255,.3); color: #fff; }
.wdjoin-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Bandeau bleu */
.wdjoin-head { position: relative; flex-shrink: 0; padding: 34px 32px 30px; overflow: hidden; background: linear-gradient(160deg, #2436CE 0%, #2A41E8 48%, #4F86F5 100%); }
.wdjoin-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 40px 40px; }
.wdjoin-glow { position: absolute; top: -90px; right: -60px; width: 260px; height: 260px; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 68%); }
.wdjoin-head-in { position: relative; display: flex; align-items: center; gap: 18px; }
.wdjoin-illu { flex-shrink: 0; width: 92px; height: 92px; padding: 6px; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; }
.wdjoin-illu img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.wdjoin-head-text { min-width: 0; }
.wdjoin-head-text h2 { margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: #fff; text-transform: none; }
.wdjoin-head-text p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #DDE5FF; }

/* Corps */
.wdjoin-body { min-height: 0; overflow-y: auto; padding: 26px 32px 30px; }
.wdjoin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.wdjoin-list li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: #0F1836; }
.wdjoin-check { flex-shrink: 0; position: relative; width: 24px; height: 24px; border-radius: 8px; background: #EEF0FE; border: 1px solid #DCE1F8; }
.wdjoin-check::before { content: ''; position: absolute; top: 6px; left: 6px; width: 9px; height: 5px; border-left: 2.2px solid #2A41E8; border-bottom: 2.2px solid #2A41E8; transform: rotate(-45deg); }

.wdjoin-cta {
  margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 24px; border-radius: 15px;
  font-family: 'Space Grotesk', 'IBM Plex Sans', Helvetica, Arial, sans-serif; font-size: 16.5px; font-weight: 600; line-height: 1.2; color: #fff !important;
  background: linear-gradient(180deg, #4055F0, #2436CE); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 26px rgba(42,65,232,.36);
  text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.wdjoin-cta span { font-size: 18px; line-height: 1; }
.wdjoin-cta:hover { background: linear-gradient(180deg, #2F45E4, #1B2BB5); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 14px 30px rgba(42,65,232,.42); color: #fff !important; }
.wdjoin-cta:focus-visible { outline: 2px solid #2A41E8; outline-offset: 3px; }

.wdjoin-login { margin: 16px 0 0; text-align: center; font-size: 14.5px; line-height: 1.5; color: #5A6685; }
.wdjoin-login a { font-weight: 700; color: #2A41E8; text-decoration: none; }
.wdjoin-login a:hover { color: #1E31C0; text-decoration: underline; }
.wdjoin-note { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid #EEF1F8; text-align: center; font-size: 13px; line-height: 1.5; color: #5A6685; }

/* Mobile : lisible et fermable sur un écran étroit, bandeau et corps resserrés, croix à portée de pouce. */
@media (max-width: 480px) {
  #fullscreenModal.wdjoin { padding: 14px; }
  .wdjoin-card { border-radius: 22px; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); }
  .wdjoin-head { padding: 26px 20px 22px; }
  .wdjoin-head-in { gap: 14px; }
  .wdjoin-illu { width: 72px; height: 72px; border-radius: 18px; }
  .wdjoin-head-text h2 { font-size: 22px; }
  .wdjoin-head-text p { font-size: 14px; }
  .wdjoin-close { top: 12px; right: 12px; }
  .wdjoin-body { padding: 20px 20px 22px; }
  .wdjoin-list li { font-size: 14.5px; }
  .wdjoin-cta { padding: 15px 20px; font-size: 16px; }
}