/*
 * app.css — compléments de l'application Club de Taekwondo.
 * Chargé APRÈS the-style.css (design system TT Radmin v4) : n'utilise que ses variables
 * et ne redéfinit aucun composant rec-*. Icônes : Tabler Icons webfont.
 */
:focus-visible { outline: 2px solid var(--tt-blue); outline-offset: 2px; }
p { margin: 0 0 10px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: #f0f2f8; color: var(--tt-navy); padding: 1px 6px; border-radius: 5px; }
h3 { font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700; color: var(--tt-navy); }

/* ── Coquille : compléments ─────────────────────────────── */
.rec-nav-item i { width: 18px; text-align: center; }
.rec-foot-pack a { color: rgba(255,255,255,.45); }
.rec-foot-pack a:hover { color: #fff; }
button.rec-foot-logout { background: none; border: 0; padding: 4px; }
.rec-ph { flex-wrap: wrap; }
.rec-ph .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rec-topbar-user { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.rec-topbar-user i { font-size: 17px; }

/* ── Logo du club ───────────────────────────────────────── */
.rec-brand-logo.avec-image, .rec-login-logo.avec-image { background: #fff; overflow: hidden; padding: 3px; }
.rec-brand-logo.avec-image img, .rec-login-logo.avec-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rec-topbar-tt-img { height: 26px; max-width: 120px; object-fit: contain; display: block; }
.apercu-logo { width: 112px; height: 112px; flex: none; border: 1px dashed var(--border2); border-radius: 12px; background: #fafbfe; display: flex; align-items: center; justify-content: center; padding: 8px; }
.apercu-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.apercu-logo i { font-size: 36px; color: var(--subtle); }
.entete-impression-club { display: inline-flex; align-items: center; gap: 10px; }
.entete-impression-club img { height: 46px; width: auto; }

/* ── KPI : petits, sans bordure de couleur ──────────────── */
.rec-kpi-row { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 9px; }
.rec-kpi { padding: 9px 11px; gap: 9px; border: 1px solid var(--border); color: inherit; min-width: 0; }
a.rec-kpi:hover { text-decoration: none; }
.rec-kpi-icon { width: 30px; height: 30px; border-radius: 8px; }
.rec-kpi-icon i { font-size: 16px; }
.rec-kpi-val { font-size: 17px; font-variant-numeric: tabular-nums; }
.rec-kpi-lbl { line-height: 1.25; letter-spacing: .3px; }

/* ── Cartes ─────────────────────────────────────────────── */
.carte { padding: 18px; }
.carte > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -18px -18px 16px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: #fcfcfe;
  font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 700; color: var(--tt-navy); }
.carte > h2 > i, .carte > h2 .titre i { font-size: 17px; color: var(--tt-blue); margin-right: 7px; vertical-align: -2px; }
.carte > h2 .titre { display: inline-flex; align-items: center; }
.carte.sans-marge { padding: 0; }
.carte.sans-marge > h2 { margin: 0; }
.carte.vide { padding: 32px 18px; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.colonnes > .carte { margin-bottom: 0; }
.en-ligne { display: inline; }

/* ── Boutons, étiquettes, alertes ───────────────────────── */
.rec-btn-sm { padding: 6px 11px; }
.rec-alert { margin-bottom: 16px; }
.rec-alert.alerte-bloc { display: block; line-height: 1.55; }
.rec-alert.alerte-bloc > i:first-child { margin-right: 7px; vertical-align: -3px; }
.rec-alert ul { margin: 6px 0 0; padding-left: 20px; }
.rec-alert a { text-decoration: underline; }
.ceinture { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ceinture-pastille { width: 22px; height: 9px; border-radius: 3px; border: 1px solid rgba(26,42,94,.35); flex: none; }
.barrettes { color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.texte-discret { color: var(--muted); } .petit-texte { font-size: 12px; } .droite { text-align: right !important; } .centre { text-align: center !important; } .nowrap { white-space: nowrap; }
.gras { font-weight: 600; }

/* ── Tableaux ───────────────────────────────────────────── */
.rec-table td.actions-cellule { text-align: right; white-space: nowrap; }
.rec-table td.actions-cellule form { display: inline; }
.rec-table td input[type=text], .rec-table td input[type=number], .rec-table td input[type=time], .rec-table td select {
  padding: 6px 9px; border: 1.5px solid var(--border2); border-radius: 7px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text); background: var(--surface); max-width: 100%; }
.rec-table td input:focus, .rec-table td select:focus { outline: none; border-color: var(--tt-blue); box-shadow: 0 0 0 3px rgba(59,89,152,.12); }
.rec-table tbody tr.texte-discret td { color: var(--muted); }
.vide strong { display: block; color: var(--tt-navy); font-family: 'Cairo', sans-serif; font-size: 14px; margin-bottom: 3px; }
.rec-empty { padding: 34px 20px; font-size: 13px; }
.rec-empty i { font-size: 40px; margin-bottom: 8px; }
dl.fiche { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
dl.fiche dt { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; }
dl.fiche dd { margin: 0; overflow-wrap: anywhere; }
dl.fiche .ceinture { white-space: normal; flex-wrap: wrap; }

/* ── Formulaires ────────────────────────────────────────── */
/* Champs placés hors d'un .rec-form-group (lignes de tableau, formulaires en ligne) : même apparence. */
.rec-content input[type=text], .rec-content input[type=email], .rec-content input[type=password], .rec-content input[type=number], .rec-content input[type=date],
.rec-content input[type=time], .rec-content input[type=tel], .rec-content input[type=search], .rec-content select, .rec-content textarea {
  padding: 8px 11px; border: 1.5px solid var(--border2); border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text); background: var(--surface); max-width: 100%; }
.rec-content input:focus, .rec-content select:focus, .rec-content textarea:focus { outline: none; border-color: var(--tt-blue); box-shadow: 0 0 0 3px rgba(59,89,152,.12); }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px 16px; }
.champ { min-width: 0; }
.champ.rec-form-group { flex: initial; min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.champ.case label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text); cursor: pointer; }
.champ.case input { margin-top: 2px; accent-color: var(--tt-blue); width: 15px; height: 15px; flex: none; }
.rec-form-group input[type=color] { width: 56px !important; height: 38px; padding: 3px !important; }
.rec-form-group input[type=file] { width: 100%; font-size: 12px; padding: 7px 0; }
.rec-form-group input[disabled] { background: #f8f9fc; color: var(--muted); }
.champ.en-erreur input, .champ.en-erreur select, .champ.en-erreur textarea { border-color: var(--tt-red) !important; }
.requis { color: var(--tt-red); }
.aide { font-size: 11px; color: var(--subtle); margin: 5px 0 0; line-height: 1.45; }
label.aide { display: block; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }
.erreur { font-size: 12px; color: var(--tt-red); margin: 5px 0 0; font-weight: 600; }
.pied-formulaire { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
legend { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 14px; color: var(--tt-navy); padding: 0 0 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border); width: 100%; }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.filtres .champ { flex: 1 1 150px; max-width: 240px; }
.filtres .champ.recherche { flex: 2 1 240px; max-width: 360px; }
.filtres .champ label { margin-bottom: 5px; font-size: 10px; }
.formulaire-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.formulaire-ligne .champ { flex: 1 1 150px; }
details.repli { margin-top: 14px; border-top: 1px dashed var(--border2); padding-top: 12px; }
details.repli > summary { cursor: pointer; font-weight: 600; color: var(--tt-blue); font-size: 13px; margin-bottom: 12px; }
.secret { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.secret code { padding: 8px 11px; overflow-wrap: anywhere; user-select: all; }
pre.detail-erreur { background: #f8f9fc; border: 1px solid var(--border); padding: 12px 14px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 22rem; overflow: auto; margin: 0; }

/* ── Onglets, pagination, listes ────────────────────────── */
.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.onglets a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; color: var(--muted); font-weight: 500; font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.onglets a:hover { color: var(--tt-navy); }
.onglets a.actif { color: var(--tt-blue); border-bottom-color: var(--tt-blue); font-weight: 600; }
.onglets .compte { font-size: 10px; font-weight: 700; background: #f0f2f8; color: var(--muted); border-radius: 9px; padding: 1px 7px; }
.onglets a.actif .compte { background: #eaeefc; color: var(--tt-blue); }
.rec-pager .inactive { color: var(--subtle); }
.rec-pager .rec-pager-info { border: 0; background: none; height: auto; min-width: 0; padding: 0; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.pagination nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jauge { height: 6px; background: #f0f2f8; border-radius: 99px; overflow: hidden; min-width: 70px; margin-top: 4px; }
.jauge span { display: block; height: 100%; background: var(--tt-blue); } .jauge.pleine span { background: var(--tt-red); }
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { padding: 9px 0; border-bottom: 1px solid #f0f2f8; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.liste-simple li:last-child { border-bottom: 0; }
.controles { list-style: none; padding: 0; margin: 0; }
.controles li { padding: 5px 0 5px 24px; position: relative; font-size: 13px; }
.controles li::before { font-family: 'tabler-icons'; position: absolute; left: 0; top: 4px; font-size: 16px; line-height: 1.2; }
.controles li.oui::before { content: "\ea5e"; color: var(--tt-green); } .controles li.non::before { content: "\eb55"; color: var(--tt-red); } .controles li.neutre::before { content: "\ea06"; color: var(--tt-amber); }

/* ── Planning, présences, notes ─────────────────────────── */
.planning { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 9px; min-width: 940px; }
.jour { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-height: 150px; }
.jour.aujourdhui { border-color: var(--tt-blue); box-shadow: 0 0 0 1px var(--tt-blue); }
.jour-titre { padding: 8px 11px; border-bottom: 1px solid var(--border); font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 13px; color: var(--tt-navy); display: flex; justify-content: space-between; background: #fcfcfe; border-radius: 10px 10px 0 0; }
.jour-titre span { color: var(--subtle); font-weight: 500; font-family: 'Inter', sans-serif; font-size: 11px; }
.creneau { display: block; margin: 7px; padding: 7px 9px; border-radius: 7px; background: #eaeefc; font-size: 12px; color: var(--text); line-height: 1.45; }
a.creneau:hover { filter: brightness(.97); }
.creneau strong { display: block; font-size: 12px; }
.creneau.annulee { background: var(--tt-rose-bg); text-decoration: line-through; color: var(--muted); }
.creneau.realisee { background: var(--tt-green-bg); }
.creneau.deplacee { background: var(--tt-amber-bg); }
.creneau.theorique { background: var(--surface); border: 1px dashed var(--border2); color: var(--muted); }
.radios { display: flex; gap: 4px; flex-wrap: wrap; }
.radios label { border: 1.5px solid var(--border2); border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; background: var(--surface); color: var(--muted); font-weight: 500; }
.radios input { position: absolute; opacity: 0; width: 0; }
.radios label:has(input:checked) { background: var(--tt-navy); border-color: var(--tt-navy); color: #fff; }
.radios label:has(input:focus-visible) { outline: 2px solid var(--tt-blue); outline-offset: 1px; }
.note-saisie { width: 76px !important; text-align: right; }
.graphique { width: 100%; height: auto; max-height: 230px; }

/* ── Pages publiques ────────────────────────────────────── */
.rec-login-box.large { max-width: 780px; }
.rec-login-box .rec-form-group { margin-bottom: 14px; }
.rec-login-box .grille .rec-form-group { margin-bottom: 0; }
.rec-login-box h1 { font-family: 'Cairo', sans-serif; font-size: 18px; font-weight: 800; color: var(--tt-navy); margin-bottom: 6px; }

/* ── Impression ─────────────────────────────────────────── */
.entete-impression { display: none; }
@media print {
  html, body { background: #fff; font-size: 11pt; }
  #rec-sidebar, #rec-overlay, .rec-topbar, .rec-ph .actions, .rec-btn, .filtres, .rec-pager, .onglets, .sans-impression, .rec-alert { display: none !important; }
  #rec-main { margin-left: 0 !important; } .rec-content { padding: 0; }
  .rec-card { border: 0; margin-bottom: 14px; break-inside: avoid; overflow: visible; } .carte { padding: 0; }
  .carte > h2 { margin: 0 0 6px; padding: 0 0 4px; background: none; }
  .rec-table thead th, .rec-table tbody td { border: 1px solid #999; padding: 4px 6px; } .rec-table thead th { background: #eee !important; }
  .entete-impression { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 5px; margin-bottom: 10px; font-size: 10pt; }
  .entete-impression strong { font-size: 13pt; }
  a { color: inherit; }
  .case-signature td { height: 30px; }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .colonnes { grid-template-columns: 1fr; }
  dl.fiche { grid-template-columns: 1fr; gap: 2px; } dl.fiche dd { margin-bottom: 8px; }
  .filtres .champ, .filtres .champ.recherche { max-width: none; }
  .rec-kpi-row { grid-template-columns: 1fr 1fr; }
  .rec-topbar-date { display: none; }
  .rec-topbar .rec-topbar-tt { display: flex; margin-right: 10px; }
}
@media (max-width: 720px) {
  .rec-table.empilable thead { display: none; }
  .rec-table.empilable tr { display: block; padding: 11px 16px; border-bottom: 1px solid var(--border); }
  .rec-table.empilable tbody td { display: block; border: 0; padding: 3px 0; }
  .rec-table.empilable input[type=text], .rec-table.empilable input[type=time] { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }