/* CSS spécifique Sports */

/* Grille de sports */
.sports-grille { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
@media (max-width:640px){ .sports-grille { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } }

/* Modal fiche sport */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; }
.modal.visible { display:flex; }
.modal__dialog { width: min(560px, 92%); background: rgba(255,255,255,0.9); border: 2px solid #e7ecf7; border-radius: var(--radius); padding: 18px 18px 12px; box-shadow: var(--shadow-2); max-height: 80vh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; }
.modal__media { width: calc(100% + 36px); margin: -18px -18px 12px; aspect-ratio: 16/9; overflow: hidden; border-radius: 16px 16px 0 0; background: #f3f5f9; }
.modal__media img { width:100%; height:100%; object-fit:cover; display:block; }
.modal__head { display:flex; align-items:center; gap:10px; }
.modal__emoji { font-size:28px; line-height:1; }
@media (max-width:480px){ .modal__dialog { padding:14px; } .modal__media { width: calc(100% + 28px); margin: -14px -14px 10px; } }
.modal__close { position: fixed; top: 20px; right: 30px; border: 0; background: transparent; font-size: 40px; cursor: pointer; }
.modal__details { margin:12px 0 0; }
.modal__row { display:grid; grid-template-columns: 1fr 2fr; gap:10px; padding:8px 0; border-top:1px solid #eef2f9; }
.modal__row:first-child { border-top:0; }
.modal__row dt { font-weight:700; color: var(--ccl-blue); }
.modal__row dd { margin:0; }



/* Bouton détails sur les tuiles */
.btn-details {
  margin-top: 8px;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 2px solid var(--ccl-blue);
  background: #fff;
  color: var(--ccl-blue);
  cursor: pointer;
}
.btn-details:hover {
  background: var(--muted);
}