/* =========================================================
   Ligue IDF Manager — feuille de style
   Palette "plateau de compétition" : noir profond, acier,
   rouge d'appel, or pour les records.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@500;700&display=swap');

:root {
  --bg-main:    #14171c;
  --bg-alt:     #191d22;
  --sidebar-bg: #0f1115;
  --card-bg:    #1c2028;
  --surface-rgb: 28, 32, 40;
  --surface-2:  #242a31;
  --border:     #2a2f38;
  --text-main:  #eef0f2;
  --text-muted: #98a1ab;
  --red:        #c1272d;
  --red-dim:    #7c2029;
  --gold:       #c9a227;
  --steel:      #5b6b7a;
  --green:      #2f7d4f;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --radius: 12px;
}

/* =========================================================
   Thème FFHM — clair, inspiré du bleu/rouge tricolore de la
   fédération. Le thème "Ligue" ci-dessus (:root) reste le thème
   par défaut et n'est jamais modifié par ce bloc.
   Activé en ajoutant data-theme="ffhm" sur <html>.
   ========================================================= */
[data-theme="ffhm"] {
  --bg-main:    #f5f3ef;
  --bg-alt:     #ffffff;
  --sidebar-bg: #ffffff;
  --card-bg:    #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-2:  #eef1f5;
  --border:     #e1ddd4;
  --text-main:  #1c1b19;
  --text-muted: #5b6470;
  --red:        #c1272d;
  --red-dim:    #c62f26;
  --gold:       #a9790a;
  --steel:      #5b6b7a;
  --green:      #2f7d4f;
  --login-shell-bg: radial-gradient(circle at top, #ffffff, #dde3ea 70%);
}

* { box-sizing: border-box; }

/* =========================================================
   Scrollbar personnalisée — suit automatiquement le thème actif
   (Ligue IDF sombre ou FFHM clair) puisqu'elle est construite avec
   les mêmes variables CSS que le reste du site.
   ========================================================= */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--steel) var(--surface-2);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--surface-2); }
*::-webkit-scrollbar-thumb {
  background: var(--steel);
  border-radius: var(--radius);
  border: 2px solid var(--surface-2);
}
*::-webkit-scrollbar-thumb:hover { background: var(--red); }
*::-webkit-scrollbar-corner { background: var(--surface-2); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--steel); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.4em;
  font-weight: 600;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Barre latérale barbell (signature) ---------- */
.barbell-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 28px;
}
.barbell-rule::before,
.barbell-rule::after {
  content: '';
  height: 3px;
  flex: 1;
  background: linear-gradient(90deg, var(--red), transparent);
}
.barbell-rule::after { background: linear-gradient(270deg, var(--red), transparent); }
.barbell-rule .plate {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px var(--bg-main), 0 0 0 4px var(--red-dim);
  flex-shrink: 0;
}

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: 1180px;
  margin: 0 auto;
  flex-wrap: nowrap;
  gap: 10px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red);
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}
nav.main-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
nav.main-nav a {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: var(--radius);
}
nav.main-nav a:hover, nav.main-nav a.active {
  color: var(--text-main);
  background: var(--surface-2);
  text-decoration: none;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-main);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-nav-group { position: relative; }
.main-nav-group-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-family: var(--font-display); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 12px; border-radius: var(--radius);
  display: inline-flex; align-items: center; gap: 4px;
}
.main-nav-group-toggle:hover, .main-nav-group-toggle.active {
  color: var(--text-main); background: var(--surface-2);
}
.main-nav-group-toggle .nav-group-arrow { font-size: 0.6rem; transition: transform 0.15s ease; }
.main-nav-group-toggle[aria-expanded="true"] .nav-group-arrow { transform: rotate(180deg); }
.main-nav-group-links {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
}
.main-nav-group-links[hidden] { display: none; }
.main-nav-group-links a { padding: 9px 10px; border-radius: 6px; }

/* ---------- Hero / page header ---------- */
.page-hero {
  padding: 40px 0 8px;
}
.eyebrow {
  font-family: var(--font-mono);
  color: var(--red);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-hero h1 { font-size: 2rem; }
.page-hero p.lead { color: var(--text-muted); max-width: 640px; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } }
/* Grilles de cartes stats (tableaux de bord) : gardent 2 colonnes même sur
   mobile étroit, plutôt que de passer à 1 seule — une carte stat est courte
   (un chiffre + un titre), 2 par ligne reste lisible et réduit beaucoup le
   défilement vertical sur les tableaux de bord, qui en comptent souvent 8-12. */
@media (max-width: 560px) {
  .grid-3:has(.stat-value), .grid-4:has(.stat-value), .grid-5:has(.stat-value) {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
.actu-filtres { display: flex; gap: 14px; align-items: end; }
@media (max-width: 480px) {
  .actu-filtres { flex-direction: column; align-items: stretch; }
  .actu-filtres > div { width: auto !important; }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
}
.stat-sub { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }
.stat-carte-icone { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-icone { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; overflow: hidden; flex-shrink: 0; }
.stat-icone img { width: 100%; height: 100%; object-fit: cover; }

.category-card { border-top: 3px solid var(--steel); }
.changelog-content h2 {
  font-size: 1.05rem;
  margin: 32px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}
.changelog-content h2:first-child { margin-top: 0; }
.changelog-content p { color: var(--text-muted); font-size: 0.9rem; }
.changelog-content ul { margin: 0 0 4px; padding-left: 20px; color: var(--text-main); }
.changelog-content li { margin-bottom: 6px; line-height: 1.6; }
.changelog-content li::marker { color: var(--red); }
.changelog-content code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.theme-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--steel);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 22px;
}
.theme-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.theme-section-head h2 { font-size: 1.1rem; margin: 0; }
.club-profile-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 800px) { .club-profile-grid { grid-template-columns: 1fr; } }
.category-card.hommes { border-top-color: var(--steel); }
.category-card.femmes { border-top-color: var(--red); }
.category-card.mixte  { border-top-color: var(--gold); }
.category-card .leader-name { font-family: var(--font-display); font-size: 1.25rem; margin: 4px 0; }
.category-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 10px 0 0; font-size: 0.88rem; }
.category-card dt { color: var(--text-muted); }
.category-card dd { margin: 0; font-family: var(--font-mono); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-family: var(--font-display);
  text-align: left;
  padding: 10px 12px;
  white-space: nowrap;
}
tbody td {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr:hover { background: rgba(255,255,255,0.02); }
td.num, th.num { text-align: right; font-family: var(--font-mono); }
td.num input[type="text"], td.num input[type="number"] { text-align: right; font-family: var(--font-mono); }
td.team-name { white-space: normal; font-weight: 500; }

/* ---------- Tableaux « cartes » (classe table-cartes) ----------
   Écran large : tableau classique, mais le texte peut passer à la ligne.
   Écran étroit : chaque ligne devient une carte, le nom de chaque colonne
   (attribut data-label des cellules) rappelé au-dessus de sa valeur —
   plus aucun défilement horizontal. */
table.table-cartes tbody td { white-space: normal; }
@media (max-width: 1100px) {
  .table-wrap:has(> table.table-cartes) { border: none; overflow: visible; }
  table.table-cartes, table.table-cartes tbody, table.table-cartes tr, table.table-cartes td { display: block; width: 100%; box-sizing: border-box; }
  table.table-cartes thead { display: none; }
  table.table-cartes tr {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px 14px; margin-bottom: 12px; background: var(--card-bg);
  }
  table.table-cartes tbody tr:hover { background: var(--card-bg); }
  table.table-cartes tbody td { border-top: none; padding: 5px 0; min-width: 0 !important; }
  table.table-cartes td.num { text-align: left; }
  table.table-cartes td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted);
  }
  table.table-cartes td.td-actions { padding-top: 10px; }
}
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem;
  background: var(--surface-2); color: var(--text-muted);
}
.rank-badge.r1 { background: var(--gold); color: #14171b; }
.rank-badge.r2 { background: #b9bec5; color: #14171b; }
.rank-badge.r3 { background: #a5652f; color: #fff; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 0.72rem; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.badge.oui { background: rgba(76,154,106,0.18); color: var(--green); }
.badge.non { background: rgba(255,255,255,0.06); color: var(--text-muted); }
/* ---------- Cartes des journées (page Inscriptions) ---------- */
.cartes-journees { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 14px; }
.carte-journee {
  flex: 0 1 250px; max-width: 100%;
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s;
}
.carte-journee:hover { border-color: var(--steel); text-decoration: none; }
.carte-journee.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.carte-journee-tete {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 12px 16px; background: var(--card-bg); border-bottom: 1px solid var(--border);
}
.carte-journee-tour { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; color: var(--gold); letter-spacing: 0.02em; }
.carte-journee-date { font-family: var(--font-display); font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; white-space: nowrap; }
.carte-journee-corps {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 78px;
  padding: 14px 16px; background: var(--bg-main); font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
}
.carte-journee.active .carte-journee-corps { color: var(--text-main); }

.coach-pastille {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--gold);
  color: var(--gold); font-family: var(--font-body); font-size: 10px; font-weight: 700;
  line-height: 1; vertical-align: middle; cursor: help; box-sizing: border-box;
}
.club-logo {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted);
  overflow: hidden; vertical-align: middle; margin-right: 8px;
}
.club-logo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Section ---------- */
section.block { padding: 34px 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs a {
  padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border);
  color: var(--text-muted); font-family: var(--font-display); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.tabs a:hover { text-decoration: none; border-color: var(--steel); color: var(--text-main); }
.tabs a.active { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Calendar ---------- */
.calendar-round {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.calendar-round .round-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--surface-2);
}
.calendar-round .round-head .round-num {
  font-family: var(--font-display); font-weight: 700; color: var(--red); font-size: 0.95rem;
}
.calendar-round .round-head .round-date { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.85rem; margin-left: auto; }
.calendar-round .pools { padding: 8px 16px 14px; display: grid; gap: 8px; }
.pool-row { display: flex; gap: 10px; font-size: 0.9rem; }
.pool-row .organizer { min-width: 170px; color: var(--gold); font-weight: 600; }
.pool-row .groups { color: var(--text-muted); }

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 26px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}
footer.site-footer .inner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}

/* ---------- Forms (admin) ---------- */
.form-grid { display: grid; gap: 14px; }
label { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 5px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }
input[type=text], input[type=number], input[type=date], input[type=password], input[type=file], input[type=email], input[type=tel], input[type=url], input[type=time], input[type=datetime-local], input[type=month], input[type=week], input[type=search], select, textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 9px 11px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--steel);
  outline-offset: 1px;
}
input[type=checkbox] { width: auto; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row label { margin: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--red); color: #fff; border: none;
  padding: 10px 18px; border-radius: var(--radius);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 0.85rem; cursor: pointer;
}
.btn:hover { background: #c22532; text-decoration: none; }
.btn.secondary { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-main); }
.btn.secondary:hover { background: var(--card-bg); }
.btn.small { padding: 6px 12px; font-size: 0.75rem; }
.btn.danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn.danger:hover { background: var(--red); color: #fff; }

.actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

.flash {
  padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: 0.9rem;
}
.flash.success { background: rgba(76,154,106,0.15); color: var(--green); border: 1px solid rgba(76,154,106,0.3); }
.flash.error   { background: rgba(214,48,63,0.12); color: var(--red); border: 1px solid rgba(214,48,63,0.3); }

/* ---------- Admin layout ---------- */
.admin-shell { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }
.admin-side {
  background: var(--sidebar-bg); border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex; flex-direction: column; min-height: 100vh;
}
.admin-side #adminNav { flex: 1; overflow-y: auto; }
.admin-side .brand { padding: 0 10px 20px; }
.admin-side-header { display: flex; align-items: center; justify-content: space-between; }
.admin-side-quicklinks { display: flex; gap: 8px; padding: 0 10px 16px; }
.admin-side-quicklinks a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden;
}
.admin-side-quicklinks a:hover { background: var(--card-bg); }
.admin-side-quicklinks img { width: 100%; height: 100%; object-fit: cover; }

.admin-nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; margin-bottom: 16px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-main); font-size: 1.15rem;
  cursor: pointer; line-height: 1;
}
.admin-collapse-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  cursor: pointer; line-height: 1;
}
.admin-collapse-toggle:hover { background: var(--surface-2); color: var(--text-main); }
.admin-side nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
  color: var(--text-muted); font-family: var(--font-display); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px;
  border-left: 3px solid transparent;
}
.admin-side nav a:hover { background: var(--surface-2); color: var(--text-main); text-decoration: none; }
.admin-side nav a.active {
  background: rgba(var(--surface-rgb), 0.6); color: var(--gold); text-decoration: none;
  border-left-color: var(--gold);
}
.admin-side nav a.active .nav-icon { color: var(--gold); }
.nav-icon { flex-shrink: 0; }

/* ---------- Interrupteur de thème personnel ---------- */
.theme-perso-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: transparent; cursor: pointer; font-size: 1rem; line-height: 1;
}
.theme-perso-toggle:hover { background: var(--surface-2); }
.admin-side-quicklinks .theme-perso-toggle { width: 34px; height: 34px; }
.admin-side .muted .theme-perso-toggle { width: 22px; height: 22px; font-size: 0.75rem; }
.admin-side-theme {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 12px 10px; border-top: 1px solid var(--border);
}
.admin-side-theme-label { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); }
.admin-side-theme .theme-perso-toggle { width: 34px; height: 34px; }
html.nav-collapsed .admin-side-theme-label { display: none; }
html.nav-collapsed .admin-side-theme { justify-content: center; }

/* ---------- Recherche globale (Ctrl+K) ---------- */
.recherche-globale-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; margin: 4px 0 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-muted); font-family: var(--font-body); font-size: 0.85rem;
  cursor: pointer; text-align: left;
}
.recherche-globale-toggle:hover { color: var(--text-main); background: var(--card-bg); }
.recherche-globale-toggle .nav-label { flex: 1; text-transform: none; letter-spacing: normal; }
.recherche-globale-raccourci {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
html.nav-collapsed .recherche-globale-toggle { justify-content: center; padding: 9px 0; }
html.nav-collapsed .recherche-globale-toggle .nav-label,
html.nav-collapsed .recherche-globale-raccourci { display: none; }

.recherche-globale-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
}
.recherche-globale-modal[hidden] { display: none; }
.recherche-globale-panel {
  width: 100%; max-width: 560px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4); overflow: hidden;
}
.recherche-globale-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted);
}
.recherche-globale-input-wrap input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 1rem; color: var(--text-main); font-family: var(--font-body);
}
.recherche-globale-resultats { max-height: 50vh; overflow-y: auto; padding: 6px; }
.rg-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 8px; border: none; background: none;
  text-align: left; cursor: pointer; color: var(--text-main);
}
.rg-item:hover, .rg-item.rg-actif { background: var(--surface-2); }
.rg-item .rg-icone { font-size: 1.2rem; flex-shrink: 0; }
.rg-item .rg-texte { flex: 1; min-width: 0; }
.rg-item .rg-titre { font-weight: 500; }
.rg-item .rg-sous-titre { color: var(--text-muted); font-size: 0.82rem; }
.rg-item .rg-type {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}
.rg-vide, .rg-hint { padding: 20px 14px; color: var(--text-muted); text-align: center; font-size: 0.88rem; }


.nav-alert-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
  margin-left: 2px;
  animation: nav-alert-pulse 1.8s ease-in-out infinite;
}
@keyframes nav-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 48, 63, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(214, 48, 63, 0); }
}
.nav-group { margin-top: 6px; }
.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 10px 10px 6px;
  text-align: left;
}
.nav-group-titlewrap { display: flex; align-items: flex-start; gap: 8px; }
.nav-group-icon { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; margin-top: 1px; }
.nav-group-retour {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--text-main);
  padding: 9px 10px;
  margin: 4px 0 10px;
  text-align: left;
}
.nav-group-retour:hover { background: var(--surface-3, var(--border)); }
html.nav-collapsed .nav-group-retour span { display: none; }
html.nav-collapsed .nav-group-retour { justify-content: center; }
.nav-section-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--red);
  padding: 10px 12px 6px;
}
.nav-group-arrow {
  display: inline-block;
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}
.nav-group-toggle[aria-expanded="true"] .nav-group-arrow { transform: rotate(180deg); }
.nav-group-links { display: flex; flex-direction: column; }
.nav-group-links[hidden] { display: none; }
.admin-main { padding: 30px 34px; width: 100%; min-width: 0; }

/* ---------- Barre supérieure (topbar) ---------- */
.admin-topbar {
  display: flex; align-items: center; gap: 20px;
  height: 72px; margin: -30px -34px 26px; padding: 0 34px;
  background: var(--card-bg); border-bottom: 1px solid var(--border);
}
.admin-topbar-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.admin-topbar-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--red); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.admin-topbar-titles { display: flex; flex-direction: column; line-height: 1.2; }
.admin-topbar-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--text-main); }
.admin-topbar-subtitle { font-size: 0.72rem; color: var(--text-muted); }
.admin-topbar-recherche {
  display: flex; align-items: center; gap: 10px; flex: 1; max-width: 420px;
  padding: 9px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); font-family: var(--font-body);
  font-size: 0.85rem; cursor: pointer; text-align: left;
}
.admin-topbar-recherche:hover { color: var(--text-main); background: var(--card-bg); }
.admin-topbar-recherche span:first-of-type { flex: 1; }
.admin-topbar-recherche-raccourci {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.admin-topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.admin-topbar-version { font-family: var(--font-mono); font-size: 0.72rem; margin-right: 6px; }
.admin-topbar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius);
  color: var(--text-muted); position: relative; flex-shrink: 0;
  background: none; border: none; cursor: pointer; padding: 0; text-decoration: none;
}
.admin-topbar-icon:hover { background: var(--surface-2); color: var(--text-main); }
.admin-topbar-notif-badge {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}
.admin-topbar-notif-wrap { position: relative; }
.admin-notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 340px; max-width: calc(100vw - 32px); max-height: 420px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden;
}
.admin-notif-panel[hidden] { display: none; }
.admin-notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: 0.85rem; color: var(--text-main);
}
.admin-notif-panel-header button {
  background: none; border: none; color: var(--gold); font-size: 0.75rem;
  cursor: pointer; font-family: var(--font-body); padding: 0;
}
.admin-notif-panel-body { overflow-y: auto; }
.admin-notif-vide { padding: 24px 14px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
.admin-notif-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
}
.admin-notif-item:last-child { border-bottom: none; }
.admin-notif-item:hover { background: var(--surface-2); }
.admin-notif-item-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.admin-notif-item-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-notif-item-titre { font-size: 0.83rem; color: var(--text-main); line-height: 1.3; }
.admin-notif-item-date { font-size: 0.72rem; color: var(--text-muted); }
@media (max-width: 480px) {
  .admin-notif-panel { position: fixed; top: 64px; right: 16px; left: 16px; width: auto; }
}
.admin-topbar-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; margin-left: 8px;
  background: var(--gold); color: #14171c; font-family: var(--font-display);
  font-weight: 700; font-size: 0.9rem; flex-shrink: 0; text-decoration: none;
}
.admin-topbar-avatar:hover { opacity: 0.85; }
@media (max-width: 900px) {
  .admin-topbar-recherche, .admin-topbar-subtitle, .admin-topbar-version { display: none; }
}

/* ---------- Cartes de synthèse du tableau de bord ---------- */
.dashboard-stat-card { padding: 22px; }
.dashboard-stat-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.dashboard-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem; flex-shrink: 0;
}
.dashboard-stat-delta { font-size: 0.78rem; color: var(--green); font-weight: 700; align-self: center; }
.dashboard-stat-value { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--text-main); line-height: 1; margin-bottom: 6px; }

/* ---------- Barre latérale repliée (desktop uniquement) ---------- */
html.nav-collapsed .admin-shell { grid-template-columns: 64px 1fr; }
html.nav-collapsed .admin-side { padding: 20px 8px; }
html.nav-collapsed .admin-side-header { flex-direction: column; gap: 10px; }
html.nav-collapsed .admin-side-header-boutons { flex-direction: column; }
html.nav-collapsed .admin-side .brand { padding: 0; display: flex; justify-content: center; }
html.nav-collapsed .brand-label,
html.nav-collapsed .admin-side > .muted,
html.nav-collapsed nav a .nav-label,
html.nav-collapsed .nav-group-label,
html.nav-collapsed .nav-group-links { display: none; }
html.nav-collapsed .admin-side-quicklinks { flex-direction: column; align-items: center; padding: 0 0 16px; }
html.nav-collapsed .admin-side nav a,
html.nav-collapsed .nav-group-toggle { justify-content: center; padding: 10px 0; }
html.nav-collapsed .nav-group-toggle { padding: 10px 0 6px; }
html.nav-collapsed .nav-group-titlewrap { justify-content: center; }
html.nav-collapsed .admin-collapse-toggle svg { transform: rotate(180deg); }

@media (max-width: 800px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { padding: 14px; }
  .admin-side .brand { padding: 0; }
  .admin-side > .muted { display: none; }
  .admin-nav-toggle { display: flex; margin-bottom: 0; }
  .admin-collapse-toggle { display: none; }
  .admin-side nav {
    display: none; flex-direction: column; margin-top: 14px;
    max-height: 75vh; overflow-y: auto;
  }
  .admin-side nav.open { display: flex; }
  .admin-main { padding: 20px; }
  .admin-topbar { margin: -20px -20px 20px; padding: 0 16px; height: 60px; gap: 10px; }
  .admin-topbar-avatar, .admin-topbar-mark { width: 32px; height: 32px; }
  /* La barre repliée n'a de sens que sur desktop — jamais sur mobile, même si l'état est mémorisé */
  html.nav-collapsed .admin-shell { grid-template-columns: 1fr; }
  html.nav-collapsed .admin-side { padding: 14px; }
  html.nav-collapsed .brand-label,
  html.nav-collapsed nav a .nav-label,
  html.nav-collapsed .nav-group-label { display: inline; }
  html.nav-collapsed .nav-group-links[hidden] { display: none; }
  html.nav-collapsed .nav-group-links:not([hidden]) { display: flex; }
}

.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--login-shell-bg, radial-gradient(circle at top, #1a1f25, #0f1114 70%));
  padding: 20px; position: relative; overflow: hidden;
}
.login-bg-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.login-card {
  width: 100%; max-width: 360px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 32px;
  position: relative; z-index: 1;
}
.login-card.on-bg-image {
  background: rgba(var(--surface-rgb), var(--acces-opacite, 0.85));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.login-card .brand { justify-content: center; margin-bottom: 22px; }

.table-actions-cell { white-space: nowrap; }
.centered-thead thead th { text-align: center; }
.inline-scores-form td input { width: 76px; padding: 6px 8px; font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.small-note { color: var(--text-muted); font-size: 0.8rem; margin-top: 6px; }

@media (max-width: 700px) {
  .site-header .inner { position: relative; flex-wrap: nowrap; }
  .nav-toggle { display: flex; }
  nav.main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    z-index: 50;
  }
  nav.main-nav.open { display: flex; }
  nav.main-nav a { padding: 11px 12px; }
  .main-nav-group-toggle { width: 100%; justify-content: space-between; padding: 11px 12px; }
  .main-nav-group-links {
    position: static; box-shadow: none; border: none; background: transparent;
    padding: 0 0 4px 14px; min-width: 0;
  }
}

/* ---------- Passe responsive générale (petits écrans) ---------- */
@media (max-width: 560px) {
  .page-hero h1 { font-size: 1.5rem; }
  .page-hero { padding: 28px 0 4px; }
  section.block { padding: 24px 0; }
  .card { padding: 16px; }
  .stat-value { font-size: 1.5rem; }
  /* Cartes stats des tableaux de bord (identifiées par leur contenu
     .stat-value) : rendu plus compact spécifiquement sur mobile étroit,
     où elles se retrouvent 2 par ligne (voir règle .grid-*:has(.stat-value)
     plus haut) — padding réduit, titre sur une seule ligne tronquée plutôt
     que retourné à la ligne (ce qui agrandirait la hauteur de la carte).
     min-width:0 corrige un piège classique des grilles CSS : par défaut
     une colonne de grille a min-width:auto, ce qui empêche le contenu de
     se réduire en dessous de sa largeur intrinsèque et fait déborder la
     carte hors de sa colonne dès qu'un chiffre ou un texte est un peu long. */
  .card:has(.stat-value) {
    padding: 12px;
    min-width: 0;
    overflow: hidden;
  }
  .card:has(.stat-value) h3 {
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card:has(.stat-value) .stat-value { font-size: 1.3rem; overflow-wrap: break-word; }
  /* Les grilles à colonnes fusionnées (span 2/3) reviennent à 1 colonne pleine largeur */
  .grid-3 > div[style*="span"],
  .grid-4 > div[style*="span"] { grid-column: span 1 !important; }
  .club-profile-grid { grid-template-columns: 1fr !important; }
  .pool-row { flex-direction: column; gap: 2px; }
  .pool-row .organizer { min-width: 0; }
  .login-card { padding: 24px 20px; }
  thead th, tbody td { padding: 8px 9px; font-size: 0.85rem; }
  /* Boutons plus compacts sur mobile — hauteur tactile encore confortable
     (~40px, au-dessus des ~44px recommandés par Apple/Google pour un doigt,
     tout en restant raisonnable) mais moins large/haut que la taille
     desktop, surtout visible quand plusieurs boutons se suivent dans un
     .actions-row. */
  .btn { padding: 8px 14px; font-size: 0.78rem; }
  .btn.small { padding: 5px 10px; font-size: 0.7rem; }
}
@media (max-width: 380px) {
  .brand { font-size: 0.92rem; gap: 6px; }
  .brand .mark { width: 26px; height: 26px; font-size: 0.72rem; }
  .site-header .inner { padding: 12px 14px; }
}

/* =========================================================
   Calendrier public (calendrier.php) : onglets championnat /
   compétitions individuelles et cartes d'événements (même rendu que
   les cartes de l'administration, sans les boutons de gestion).
   ========================================================= */
.cal-onglets { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.cal-onglet {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; margin-bottom: -1px;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--text-muted); text-decoration: none;
  border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.cal-onglet:hover { color: var(--text-main); text-decoration: none; }
.cal-onglet.actif { color: var(--gold); border-bottom-color: var(--gold); }
.cal-compte { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); border-radius: 999px; padding: 2px 9px; }
.cal-onglet.actif .cal-compte { background: rgba(201, 162, 39, 0.18); color: var(--gold); }
.cal-panneau[hidden] { display: none; }

.cal-tour { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold); margin: 22px 0 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.cal-panneau > .cal-tour:first-child { margin-top: 0; }
.cal-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 20px; }
/* Championnat : chaque tour tient sur une ligne (les cartes se partagent la largeur ;
   sur un écran trop étroit, la ligne défile horizontalement au lieu de passer à la ligne). */
.cal-grille-tour { grid-template-columns: repeat(var(--n, 1), minmax(210px, 1fr)); gap: 16px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.cal-grille-tour .cal-carte { scroll-snap-align: start; }
.cal-grille-tour .cal-carte:hover { transform: none; }

.cal-carte { position: relative; display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.15s, border-color 0.15s; }
.cal-carte:hover { transform: translateY(-2px); border-color: var(--steel); }
.cal-carte.cal-prochain { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.cal-carte.cal-passee { opacity: 0.6; }
.cal-carte.cal-passee:hover { opacity: 0.85; }
.cal-bandeau { position: relative; height: 110px; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2) center / cover no-repeat; }
.cal-bandeau-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); opacity: 0.35; }
.cal-etiquette {
  position: absolute; top: 10px; right: 10px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px; background: rgba(20, 23, 28, 0.8); color: var(--text-muted);
}
.cal-etiquette-prochain { background: var(--gold); color: #14171c; animation: anim-pulse-or 2s ease-in-out infinite; }
.cal-logos { position: absolute; top: 82px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; z-index: 2; }
.cal-logos-cote { display: flex; align-items: center; gap: 6px; flex: 1; }
.cal-logos-cote:first-child { justify-content: flex-end; }
.cal-avatar, .cal-avatar-petit {
  display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--card-bg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); font-family: var(--font-display); color: var(--text-muted); text-transform: uppercase;
}
.cal-avatar { width: 60px; height: 60px; border: 3px solid var(--card-bg); }
.cal-avatar-petit { width: 38px; height: 38px; border: 2px solid var(--card-bg); font-size: 0.75rem; }
.cal-avatar img, .cal-avatar-petit img { width: 100%; height: 100%; object-fit: cover; }
.cal-sans-logo { background: var(--surface-2); }
.cal-date {
  align-self: center; margin-top: 44px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); background: var(--card-bg); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border);
}
.cal-corps { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.cal-titre { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; margin: 0; }
.cal-organisateur { font-size: 0.8rem; color: var(--text-muted); margin-top: -6px; }
.cal-badges, .cal-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-badge { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.cal-pastille { font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-main); }
.cal-infos { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: 0.8rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 5px; }
.cal-info-ligne { display: flex; align-items: center; gap: 7px; }
.cal-info-ligne svg { flex-shrink: 0; }

.cal-passes { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 16px; }
.cal-passes summary { cursor: pointer; font-family: var(--font-display); font-size: 1.05rem; color: var(--text-muted); padding: 6px 0; list-style-position: inside; }
.cal-passes summary:hover { color: var(--text-main); }
.cal-passes[open] summary { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .cal-etiquette-prochain { animation: none; } .cal-carte:hover { transform: none; } }

/* ---------- Réorganisation par glisser-déposer (assets/js/tri-glisser.js) ---------- */
.tri-poignee {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-muted);
  font-size: 18px; line-height: 1; letter-spacing: -2px; cursor: grab; touch-action: none; user-select: none;
}
.tri-poignee:hover { color: var(--text-main); border-color: var(--gold); }
.tri-poignee:active { cursor: grabbing; }
.tri-poignee:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[data-tri-ligne].tri-en-cours { opacity: 0.65; outline: 2px dashed var(--gold); outline-offset: -2px; background: var(--surface-2); }
.tri-message { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius); background: rgba(212, 175, 55, 0.14); color: var(--text-main); font-weight: 600; font-size: 0.9rem; }
body.tri-actif, body.tri-actif * { cursor: grabbing !important; user-select: none; }
[data-tri-ligne].tri-en-cours { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); position: relative; z-index: 2; }

/* ---------- Choix d'image par cercle cliquable (admin/site-public.php) ---------- */
.choix-image {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; overflow: visible; cursor: pointer; background: var(--surface-2); border: 2px dashed var(--border);
  transition: border-color 0.15s ease, transform 0.15s ease; margin: 0; text-transform: none;
}
.choix-image:hover { border-color: var(--gold); transform: scale(1.05); }
.choix-image:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.choix-image img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.choix-image-logo img { object-fit: contain; background: #fff; padding: 4px; box-sizing: border-box; }
.choix-image-vide { font-size: 24px; font-weight: 300; color: var(--text-muted); line-height: 1; }
.choix-image-fichier { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.choix-image.modifie { border-style: solid; border-color: var(--gold); }
.choix-image.modifie::after {
  content: ""; position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--card-bg);
}
.choix-image-zone { position: relative; display: inline-block; }
.choix-image-retirer {
  position: absolute; top: -6px; right: -6px; z-index: 1; width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--card-bg);
  background: var(--red); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
}
.choix-image-retirer:hover { transform: scale(1.12); }
.choix-image-retirer:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.choix-image-zone.a-retirer .choix-image img { opacity: 0.25; filter: grayscale(1); }
.choix-image-zone.a-retirer .choix-image { border-style: solid; border-color: var(--red); }
.choix-image-zone.a-retirer .choix-image-retirer { background: var(--steel); }

/* Bouton rond « × » (retirer une ligne, avec confirmation) */
.bouton-croix {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--border); background: var(--card-bg); color: var(--text-muted);
  font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bouton-croix:hover { background: var(--red); border-color: var(--red); color: #fff; }
.bouton-croix:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Pages de connexion : logo aux angles arrondis (logo par défaut sur fond blanc) */
#accesLogo { border-radius: 14px; }