/* ============================================================
   Modal d'authentification (connexion / inscription) — version PARTAGÉE pour les pages
   shell (Équipe, Profil, Matches, Notifs). Mêmes styles que sur le site/app.html, mais
   les classes génériques (.field, .btn, .role-*) sont scopées sous .modal-box pour ne
   PAS baver dans le reste de la page. Tokens (--surface, --flag…) fournis par theme.css.
   (Sur le site et app.html, ces styles viennent de landing.css.)
   ============================================================ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(21,19,15,.55);z-index:1000;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,.45);max-width:380px;width:100%;padding:26px;position:relative;max-height:90vh;overflow-y:auto;}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);line-height:1;}
.modal-tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.modal-tab{flex:1;background:none;border:none;padding:10px 4px;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;}
.modal-tab.active{color:var(--ink);border-bottom-color:var(--flag);}
.modal-panel{display:none;}
.modal-panel.active{display:block;}
.modal-box h2{font-size:18px;margin:0 0 14px;}
.modal-box .field{margin-bottom:12px;}
.modal-box .field label{display:block;font-size:11px;font-weight:700;margin-bottom:5px;color:var(--muted);}
.modal-box .field input,.modal-box .field select{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:14px;padding:10px 11px;font-size:14px;font-family:inherit;background:var(--surface-2);color:var(--ink);}
.modal-box .field input:focus,.modal-box .field select:focus{outline:none;border-color:var(--flag);background:var(--surface);}
.modal-box .field input::placeholder{color:var(--muted);text-transform:none;opacity:1;}
.modal-box .role-toggle{display:flex;gap:8px;margin-bottom:14px;}
.modal-box .role-toggle button{flex:1;border:1px solid var(--border);border-radius:14px;padding:9px;font-size:13px;font-weight:700;background:var(--surface-2);color:var(--muted);cursor:pointer;}
.modal-box .role-toggle button.active{background:var(--flag);color:#fff;border-color:var(--flag);}
.modal-box .role-panel{display:none;}
.modal-box .role-panel.active{display:block;}
.modal-box .consent-line{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--muted);line-height:1.35;margin:2px 0 12px;cursor:pointer;}
.modal-box .consent-line input{flex:0 0 auto;width:16px;height:16px;margin-top:1px;accent-color:var(--flag);}
.modal-box .consent-line span{flex:1;min-width:0;}
.modal-box .consent-line a{color:var(--flag);font-weight:600;text-decoration:underline;}
.modal-box .btn{width:auto;border:1px solid var(--border);border-radius:14px;padding:11px 14px;font:inherit;font-weight:700;cursor:pointer;background:var(--surface-2);color:var(--ink);}
.modal-box .btn-block{width:100%;display:block;}
.modal-box .btn-primary{background:var(--flag);color:#fff;border-color:var(--flag);}
.modal-box .btn:active{transform:scale(.97);}
.modal-box .form-error{font-size:12px;color:#c0392b;margin:-2px 0 10px;display:none;}
.modal-box .form-error.show{display:block;}
.modal-box .form-success{font-size:12px;color:#1a7a3c;margin:-2px 0 10px;display:none;}
.modal-box .form-success.show{display:block;}

/* Anti-robot a l'inscription : la case apparait au 1er clic ; au 2e clic sans l'avoir cochee, elle se
   signale (deux battements) pendant que le bouton et le message le disent aussi. */
#coachCaptcha:empty,#playerCaptcha:empty{display:none;}
.tc-cap-rappel{border-radius:6px;animation:tcCapRappel .5s ease 2;}
@keyframes tcCapRappel{
  0%,100%{box-shadow:0 0 0 0 rgba(255,90,31,0);}
  50%{box-shadow:0 0 0 3px rgba(255,90,31,.55);}
}
@media (prefers-reduced-motion:reduce){
  .tc-cap-rappel{animation:none;box-shadow:0 0 0 3px rgba(255,90,31,.55);}
}