/* ============================================================
   style.css — Styles communs MyGolfSchool
   Full responsive. Tous les patterns réutilisables.
   Les styles inline dans les pages doivent utiliser ces classes.
   ============================================================ */

/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* ============================================================
   BASE
   ============================================================ */

body {
  font-family: var(--font-main);
  background: var(--bg-page);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-main); }

/* ============================================================
   LAYOUT
   ============================================================ */

.app {
  display: flex;
  min-height: 100vh;
}

.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

.page-body {
  padding: var(--space-xl) var(--space-lg);
  flex: 1;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform var(--transition);
}

.sidebar-brand {
  padding: 0px 0px 14px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-brand-icon {
  width: 220px; height: 100px;
  background: linear-gradient(135deg, var(--green-main), var(--green-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 50px;
  margin-bottom: 8px;
}

.sidebar-brand-logo {
  display: block;
  height: 100px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 8px;
}

.sidebar-brand h2 {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  line-height: 1.2;
}

.sidebar-brand span {
  font-size: var(--text-xs);
  color: var(--sidebar-section);
  text-align: center;
  display: block;
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-section {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sidebar-section);
  padding: 12px 8px 5px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--sidebar-item);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.sidebar-item:hover {
  background: var(--sidebar-item-hover);
  color: rgba(255,255,255,0.9);
}

.sidebar-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  font-weight: 600;
}

.sidebar-item-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}



/* ============================================================
   LAYOUT
   ============================================================ */

/* ============================================================
   SIDEBAR
   ============================================================ */



.btn-admin-gear {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: var(--gear-bg);
  border: 1px solid var(--gear-border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--gear-color);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  font-family: var(--font-main);
}

.btn-admin-gear:hover {
  background: rgba(168,200,232,0.18);
  color: #c8dff0;
}

.btn-sidebar-back {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  font-family: var(--font-main);
}

.btn-sidebar-back:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
}

/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.topbar-title {
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
}

.btn-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  transition: background var(--transition);
}

/* ============================================================
   TOPBAR
   ============================================================ */

.btn-hamburger:hover { background: var(--bg-subtle); }

/* ============================================================
   TOPBAR AIDE — icône ? mise en évidence
   ============================================================ */

.btn-aide-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--btn-radius);
    background: var(--aide-btn-help-bg);
    color: var(--aide-btn-help-color);
    border: 1px solid var(--aide-btn-help-border);
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.btn-aide-help:hover {
    background: var(--aide-btn-help-active-bg);
}

.btn-aide-help.is-active {
    background: var(--aide-accent);
    color: #ffffff;
    border-color: var(--aide-accent);
}

/* ============================================================
   SUBNAV
   ============================================================ */

.subnav-wrap {
  background: var(--subnav-bg);
  border-bottom: 1px solid var(--subnav-border);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  position: sticky;
  top: var(--topbar-h);
  z-index: 99;
  flex-shrink: 0;
}

.subnav {
  height: var(--subnav-h);
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

/* ============================================================
   SUBNAV
   ============================================================ */

.subnav::-webkit-scrollbar { display: none; }

.subnav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--subnav-text);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font-main);
}

.subnav-item:hover {
  color: var(--subnav-active);
  background: var(--subnav-active-bg);
}

.subnav-item.active {
  color: var(--subnav-active);
  border-bottom-color: var(--subnav-indicator);
  font-weight: 600;
}

.subnav-count {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: var(--text-xs);
  font-weight: 700;
}

.subnav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 0;
  flex-shrink: 0;
  margin-left: var(--space-md);
}/* ============================================================
   DASHBOARD
   ============================================================ */

.dashboard-saisons {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.dashboard-saison-tag {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.dashboard-saison-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-main);
  flex-shrink: 0;
}

/* ── Alertes ── */

.dashboard-alertes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.dashboard-alerte-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--card-padding-sm);
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
  background: var(--bg-card);
}

.dashboard-alerte-card:hover {
  box-shadow: var(--card-shadow);
  transform: translateY(-1px);
}

.dashboard-alerte-warning {
  border-left: 3px solid var(--badge-warning-text);
}

.dashboard-alerte-info {
  border-left: 3px solid var(--green-main);
}

.dashboard-alerte-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.dashboard-alerte-body {
  flex: 1;
}

.dashboard-alerte-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.dashboard-alerte-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.dashboard-alerte-arrow {
  color: var(--text-light);
  font-size: var(--text-md);
  flex-shrink: 0;
}

/* ── Stats ── */

.dashboard-stats {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--card-padding);
  background: var(--bg-subtle);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.dashboard-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.dashboard-stat-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--green-main);
  font-family: var(--font-title);
}

.dashboard-stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.dashboard-stat-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Compétitions ── */

.dashboard-comps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dashboard-comp-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.dashboard-comp-item:last-child {
  border-bottom: none;
}

.dashboard-comp-date {
  text-align: center;
  min-width: 36px;
  flex-shrink: 0;
}

.dashboard-comp-date-num {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-title);
}

.dashboard-comp-date-mois {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.dashboard-comp-body {
  flex: 1;
}

.dashboard-comp-nom {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.dashboard-comp-dl {
  font-size: var(--text-xs);
  color: var(--badge-warning-text);
  margin-top: 2px;
}

.dashboard-comp-dl-urgent {
  color: var(--badge-error-text);
}

/* ── Activité récente ── */

.dashboard-activite-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-activite-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm);
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition: background var(--transition);
}

.dashboard-activite-item:hover {
  background: var(--bg-subtle);
}

.dashboard-activite-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.activite-eleve {
  background: var(--green-pale);
}

.activite-inscription {
  background: var(--alert-info-bg);
}

.dashboard-activite-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.dashboard-activite-nom {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-activite-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.dashboard-activite-date {
  flex-shrink: 0;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
}

.card-sm { padding: var(--card-padding-sm); }
/* Tableau dans une card : contenu ne peut pas déborder */
.card.table-to-cards { overflow: hidden; }


.card-title {
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-radius);
  font-family: var(--font-main);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   CARDS
   ============================================================ */

/* ============================================================
   BOUTONS
   ============================================================ */

.btn:hover  { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-primary   { background: var(--btn-primary-bg);   color: var(--btn-primary-text);   border-color: var(--btn-primary-bg); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); }
.btn-danger    { background: var(--btn-danger-bg);    color: var(--btn-danger-text);    border-color: var(--btn-danger-border); }
.btn-warning   { background: var(--btn-warning-bg);   color: var(--btn-warning-text);   border-color: var(--btn-warning-border); }
.btn-dark      { background: var(--btn-dark-bg);      color: var(--btn-dark-text);      border-color: var(--btn-dark-bg); }
.btn-ghost     { background: var(--btn-ghost-bg);     color: var(--btn-ghost-text);     border-color: var(--btn-ghost-border); }

.btn-primary:hover   { background: var(--btn-primary-hover);   border-color: var(--btn-primary-hover); }
.btn-secondary:hover { background: var(--btn-secondary-hover); }
.btn-danger:hover    { background: var(--btn-danger-hover); }
.btn-warning:hover   { background: var(--btn-warning-hover); }
.btn-dark:hover      { background: var(--btn-dark-hover); }
.btn-ghost:hover     { background: var(--btn-ghost-hover); }

.btn-sm   { height: var(--btn-h-sm);  padding: 0 var(--btn-px-sm); font-size: var(--btn-font-sm); }
.btn-m    { height: var(--btn-h-sm);  padding: 0 var(--btn-px-sm); font-size: var(--btn-font-sm); }
.btn-lg   { height: var(--btn-h-lg);  padding: 0 var(--btn-px-lg); font-size: var(--btn-font-lg); }

/* Taille bouton icône standard — plus généreux */

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.btn-full { width: 100%; }

.btn-add::before    { content: '+'; margin-right: 5px; font-weight: 800; }
.btn-edit::before   { content: '✏'; margin-right: 5px; }
.btn-delete::before { content: "×"; font-weight: 800; font-size: 16px; line-height: 1; }
.btn-icon.btn-delete::before { margin-right: 0; }

.btn-back::before   { content: '←'; margin-right: 5px; }
.btn-pdf::before    { content: '↓'; margin-right: 5px; font-weight: 700; }
.btn-insc::before   { content: '📋'; font-size: 14px; }

/* ── Input file stylisé ──────────────────────────────────────── */
input[type="file"] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
input[type="file"]::file-selector-button {
    height: var(--btn-h-sm);
    padding: 0 var(--btn-px-sm);
    background: var(--btn-secondary-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
    font-size: var(--btn-font-sm);
    font-weight: var(--btn-weight);
    font-family: var(--font-main);
    cursor: pointer;
    margin-right: var(--space-sm);
    transition: background var(--transition), border-color var(--transition);
}
input[type="file"]::file-selector-button:hover {
    background: var(--btn-secondary-hover);
    border-color: var(--border-strong);
}

/* ============================================================
   FORMULAIRES
   ============================================================ */

.form-grid   { display: grid; grid-template-columns: 1fr 1fr;     gap: var(--form-gap); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--form-gap); }
.form-group  { display: flex; flex-direction: column; gap: 5px; }
.form-full   { grid-column: 1 / -1; }

/* ============================================================
   FORMULAIRES
   ============================================================ */

label {
  font-size: var(--label-font);
  font-weight: var(--label-weight);
  color: var(--label-color);
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: 0 12px;
  height: var(--input-h);
  font-family: var(--font-main);
  font-size: var(--input-font);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  width: 100%;
}

textarea       { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
input:focus,
select:focus,
textarea:focus { border-color: var(--input-focus); background: #fff; }

input[type="color"] {
  width: 44px; height: var(--input-h);
  padding: 2px; border-radius: var(--input-radius);
  cursor: pointer; border: 1px solid var(--input-border);
}

input[type="checkbox"] {
  width: 16px; height: 16px;
  cursor: pointer; accent-color: var(--green-main);
}

input::placeholder { color: var(--text-light); }

.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

/* ============================================================
   TABLEAUX
   ============================================================ */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   TABLEAUX
   ============================================================ */

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: var(--table-th-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--table-th-color);
  padding: var(--space-sm) var(--table-padding-x);
  border-bottom: 2px solid var(--table-th-border);
  white-space: nowrap;
}

td {
  padding: var(--table-padding-y) var(--table-padding-x);
  border-bottom: 1px solid var(--table-td-border);
  font-size: var(--table-td-font);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td                           { background: var(--table-row-hover); }
.table-to-cards tr:hover td            { background: var(--bg-card) !important; }
.table-to-cards tbody tr:hover         { background: var(--bg-card) !important; }

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font);
  font-weight: var(--badge-weight);
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-error   { background: var(--badge-error-bg);   color: var(--badge-error-text);   }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); border-color: var(--badge-neutral-border); }
.badge-info { background: var(--badge-index-bg); color: var(--badge-index-text); border: 1px solid var(--badge-index-border); }

/* ============================================================
   BADGE GROUPE
   Affichage normalisé : [Jour Heure] Nom · Type
   ============================================================ */

.groupe-badge {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--btn-radius);
  overflow: hidden;
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  background: var(--bg-card);
  max-width: 100%;
}

.groupe-badge-slot {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-subtle);
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.groupe-badge-heure {
  color: var(--green-main);
  font-weight: 600;
}

.groupe-badge-jour-long  { display: inline; }
.groupe-badge-jour-court { display: none; }

.groupe-badge-sep {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.groupe-badge-nom {
  padding: 4px 10px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.groupe-badge-sm .groupe-badge-slot {
  padding: 3px 8px;
  font-size: 11px;
}

.groupe-badge-sm .groupe-badge-nom {
  padding: 3px 8px;
  font-size: 12px;
}

/* ============================================================
   ALERTES
   ============================================================ */

.alert {
  padding: var(--alert-padding);
  border-radius: var(--alert-radius);
  font-size: var(--alert-font);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  border: 1px solid transparent;
}

.alert-success { background: var(--alert-success-bg); border-color: var(--alert-success-border); color: var(--alert-success-text); }
.alert-error   { background: var(--alert-error-bg);   border-color: var(--alert-error-border);   color: var(--alert-error-text);   }
.alert-warning { background: var(--alert-warning-bg); border-color: var(--alert-warning-border); color: var(--alert-warning-text); }
.alert-info    { background: var(--alert-info-bg);    border-color: var(--alert-info-border);    color: var(--alert-info-text);    }

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

/* ============================================================
   BADGES
   ============================================================ */

/* ============================================================
   ALERTES
   ============================================================ */

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay.open { display: flex; }

.modal {
  background: var(--modal-bg);
  border-radius: var(--modal-radius);
  padding: var(--modal-padding);
  width: 100%;
  max-width: var(--modal-max-w);
  box-shadow: var(--modal-shadow);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-title {
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--text);
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Bouton isolé à gauche dans une modal (ex: Supprimer) */
.modal-actions .btn-actions-left {
  margin-right: auto;
}

/* ============================================================
   INFOBULLE CLIQUABLE
   ============================================================ */

.tooltip-wrap { position: relative; display: inline-block; }

.tooltip-bubble {
  display: none;
  position: absolute;
  z-index: 200;
  right: 0; top: 100%;
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  border-radius: var(--tooltip-radius);
  padding: var(--tooltip-padding);
  font-size: var(--tooltip-font);
  line-height: 1.5;
  width: var(--tooltip-width);
  text-align: left;
  white-space: normal;
  box-shadow: var(--tooltip-shadow);
}

/* ============================================================
   INFOBULLE CLIQUABLE
   ============================================================ */

.tooltip-bubble.open { display: block; }

/* ============================================================
   STATS ROW
   ============================================================ */

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  padding: var(--stat-padding);
  text-align: center;
}

.stat-value {
  font-family: var(--font-title);
  font-size: var(--stat-value-font);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: var(--stat-label-font);
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================================
   LIST-CARDS
   ============================================================ */

.list-section { margin-bottom: var(--space-xl); }

.list-section-title {
  font-family: var(--font-title);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--border);
}

.list-cards {
  display: flex;
  flex-direction: column;
  gap: var(--list-card-gap);
}

.list-card {
  background: var(--card-bg);
  border-radius: var(--list-card-radius);
  border: 1px solid var(--card-border);
  box-shadow: 0 1px 3px rgba(13,51,32,0.05);
  padding: var(--list-card-padding);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  transition: box-shadow var(--transition);
}

/* ============================================================
   STATS ROW
   ============================================================ */

/* ============================================================
   LIST-CARDS
   ============================================================ */

.list-card:hover { box-shadow: 0 3px 10px rgba(13,51,32,0.1); }

.list-card-accent {
  border-left-width: var(--list-card-accent);
  border-left-style: solid;
}

.list-card-date { min-width: 56px; text-align: center; flex-shrink: 0; }

.list-card-date-num {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.list-card-date-day {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

.list-card-body  { flex: 1; min-width: 160px; }

.list-card-title {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--text);
  margin-bottom: 3px;
}

.list-card-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-card-side {
  text-align: right;
  min-width: 120px;
  flex-shrink: 0;
}

.list-card-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* ============================================================
   FICHE HEADER
   ============================================================ */

.fiche-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.fiche-header-left { display: flex; align-items: center; gap: var(--space-md); }

.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--avatar-radius);
  background: var(--avatar-bg);
  color: var(--avatar-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--avatar-font);
  flex-shrink: 0;
  font-family: var(--font-title);
}

.avatar-sm {
  width: var(--avatar-sm-size);
  height: var(--avatar-sm-size);
  font-size: var(--avatar-sm-font);
}

.fiche-name {
  font-family: var(--font-title);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.fiche-name-accent { color: var(--green-main); }

.fiche-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: 4px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ============================================================
   INFO BLOCK
   ============================================================ */

.info-block { display: flex; flex-direction: column; gap: var(--space-sm); }

.info-item {
  padding: var(--space-md);
  background: var(--bg-subtle);
  border-radius: 10px;
}

.info-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-width: 0;
  margin-bottom: var(--space-sm);
}

.info-item-name  { font-weight: 700; font-size: var(--text-base); color: var(--text); min-width: 0; overflow-wrap: anywhere; }

.info-item-line  {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* ============================================================
   FICHE HEADER
   ============================================================ */

/* ============================================================
   INFO BLOCK
   ============================================================ */

.info-item-line a:hover { color: var(--green-main); }

.info-item-address {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
  line-height: 1.5;
}

/* ============================================================
   FILTER BAR
   ============================================================ */

.filter-bar {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ============================================================
   FILTER BAR
   ============================================================ */

.filter-bar .form-group { margin-bottom: 0; }
.filter-bar input,
.filter-bar select { height: 36px; font-size: var(--text-sm); }

/* ============================================================
   SAISON TABS
   ============================================================ */

.saison-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.saison-tab {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ============================================================
   SAISON TABS
   ============================================================ */

.saison-tab.active {
  background: var(--green-main);
  color: white;
  border-color: var(--green-main);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-muted);
}

.empty-state-icon { font-size: 40px; margin-bottom: var(--space-sm); }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state p    { font-size: var(--text-sm); margin-bottom: var(--space-md); }

/* ============================================================
   FRATRIE ITEM
   ============================================================ */

.fratrie-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-subtle);
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--transition);
}

/* ============================================================
   FRATRIE ITEM
   ============================================================ */

.fratrie-item:hover      { background: var(--border); }
.fratrie-item-info       { flex: 1; }
.fratrie-item-name       { font-weight: 600; font-size: var(--text-sm); color: var(--text); }
.fratrie-item-groupe     { font-size: var(--text-xs); color: var(--text-muted); }

/* ============================================================
   SAISON BLOCK (historique dans une fiche)
   ============================================================ */

.saison-block {
  padding: var(--space-md);
  border-radius: 10px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
}

/* ============================================================
   SAISON BLOCK (historique dans une fiche)
   ============================================================ */

.saison-block.active {
  background: var(--green-pale);
  border-color: var(--border);
}

.saison-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.saison-block-title   { font-family: var(--font-title); font-weight: 700; font-size: var(--text-md); color: var(--text); }
.saison-block-encours {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--green-main);
  background: white;
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: var(--space-sm);
}

.saison-block-meta { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 4px; }

/* ============================================================
   GRILLES
   ============================================================ */

.grid-2    { display: grid; grid-template-columns: 1fr 1fr;         gap: var(--space-lg); }
.grid-3    { display: grid; grid-template-columns: 1fr 1fr 1fr;     gap: var(--space-lg); }
.grid-comm-apercu { display: grid; grid-template-columns: 30% 1fr; gap: var(--space-lg); align-items: start; }
.col-stack { display: flex;  flex-direction: column;                  gap: var(--space-lg); }

/* ============================================================
   UTILITAIRES
   ============================================================ */

.text-accent { color: var(--green-main); }
.text-muted  { color: var(--text-muted); }
.text-light  { color: var(--text-light); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.font-bold   { font-weight: 700; }
.font-title  { font-family: var(--font-title); }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col	 { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.gap-xs 	 { gap: var(--space-xs); }
.gap-sm      { gap: var(--space-sm); }
.gap-md      { gap: var(--space-md); }
.gap-lg      { gap: var(--space-lg); }
.mb-sm       { margin-bottom: var(--space-sm); }
.mb-md       { margin-bottom: var(--space-md); }
.mb-lg       { margin-bottom: var(--space-lg); }
.mt-md       { margin-top: var(--space-md); }
.mt-lg       { margin-top: var(--space-lg); }
.w-full      { width: 100%; }
.opacity-60  { opacity: 0.6; }/* ============================================================
   RESPONSIVE — Tablette 1024px
   ============================================================ */

@media (max-width: 1024px) {
:root { --sidebar-w: 200px; }

.page-body { padding: var(--space-md); }

.topbar       { padding: 0 var(--space-md); }

.subnav-wrap { flex-direction: column; padding: 0; align-items: stretch; }

.sidebar { transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,0.2); width: 220px; }

.sidebar.open         { transform: translateX(0); }

.sidebar-overlay.open { display: block; }

.main-content         { margin-left: 0; }

.btn-hamburger        { display: flex; }

.topbar-title { font-size: var(--text-base); }

.subnav      { padding: 0 var(--space-sm); min-height: 48px; border-bottom: 1px solid var(--subnav-border); }

.subnav-item { padding: 0 10px; font-size: var(--text-xs); }

.subnav-actions {
    padding: 10px var(--space-md);
    margin-left: 0;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: flex-end;
    border-bottom: 1px solid var(--subnav-border);
  }

.grid-2, .grid-3, .grid-comm-apercu, .form-grid, .form-grid-3 { grid-template-columns: 1fr; }

.form-full { grid-column: 1; }

.groupe-badge-jour-long  { display: none; }

.groupe-badge-jour-court { display: inline; }

.groupe-badge-nom-custom { display: none; }

.groupe-badge-slot { min-width: 70px; }

.card { padding: var(--card-padding-sm); }

.stats-row { grid-template-columns: repeat(2, 1fr); }

.list-card      { gap: var(--space-sm); }

.list-card-side { text-align: left; min-width: auto; }

.table-wrap { margin: 0 calc(-1 * var(--space-md)); padding: 0 var(--space-md); }

.modal { padding: var(--space-lg); }

.fiche-header { flex-direction: column; align-items: flex-start; }

/* Neutraliser le wrapper .card */
  .table-to-cards,
  .table-to-cards.card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

.table-to-cards table,
  .table-to-cards thead,
  .table-to-cards tbody,
  .table-to-cards th,
  .table-to-cards td,
  .table-to-cards tr {
    display: block;
  }

.table-to-cards thead { display: none; }

.table-to-cards tbody tr {
    background: var(--bg-card);
    border-radius: var(--list-card-radius);
    border: 1px solid var(--card-border);
    box-shadow: 0 1px 3px rgba(13,51,32,0.05);
    padding: var(--space-md);
    margin-bottom: var(--list-card-gap);
    cursor: default;
  }

.table-to-cards tbody tr:hover { background: var(--bg-card) !important; }

.table-to-cards td {
    border: none;
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

.table-to-cards td.show-label[data-label]::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 120px;
    flex-shrink: 0;
  }

.table-to-cards td:last-child {
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
  }

td:last-child { padding-right: var(--space-md); }

.filter-bar form[style*="grid"] {
    grid-template-columns: 1fr !important;
  }

.user-actions select { max-width: 160px; }

.card-hide  { display: none !important; }

.table-hide { display: block; }

.btn-voir {
    width: 100%;
    justify-content: center;
    padding: 0 var(--btn-px);
  }

.btn-voir-icon  { display: none; }

.btn-voir-label { display: inline; }

.table-to-cards td.td-actions {
    display: flex;
    justify-content: center;
    padding-top: var(--space-sm);
  }

/* ── table-to-list : forme "rangées de liste" (mobile) ──────────
   Enveloppe commune destinée à remplacer table-to-cards à terme.
   Filet coloré à gauche : couleur par défaut --green-main,
   surchargeable en inline par la couleur du jour (style="--row-accent:#xxx").
   La forme ne fait aucune hypothèse sur le contenu interne des rangées. */
.table-to-list,
  .table-to-list.card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

.table-to-list table,
  .table-to-list thead,
  .table-to-list tbody,
  .table-to-list th,
  .table-to-list td,
  .table-to-list tr {
    display: block;
  }

.table-to-list thead { display: none; }

.table-to-list tbody tr {
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-left: var(--list-card-accent) solid var(--row-accent, var(--green-main));
    border-bottom: none;
    padding: var(--space-md);
    cursor: default;
  }

.table-to-list tbody tr:first-child {
    border-top-left-radius: var(--list-card-radius);
    border-top-right-radius: var(--list-card-radius);
  }

.table-to-list tbody tr:last-child {
    border-bottom: 1px solid var(--card-border);
    border-bottom-left-radius: var(--list-card-radius);
    border-bottom-right-radius: var(--list-card-radius);
  }

.table-to-list tbody tr:hover { background: var(--bg-card) !important; }

.table-to-list td {
    border: none;
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

.table-to-list td.show-label[data-label]::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 120px;
    flex-shrink: 0;
  }

.table-to-list td.td-actions {
    display: flex;
    justify-content: center;
    padding-top: var(--space-sm);
  }

/* Bouton note en mode card : poussé à droite, aligné en haut de la rangée */
.card-note-btn {
    margin-left: auto;
    align-self: flex-start;
    flex-shrink: 0;
  }

.config-table-header { display: none; }

/* ── table-to-rows : tableau responsive générique ────────────────
   Gabarit UNIQUE pour transformer un <table> classique en rangées
   empilées sur mobile/tablette, sans passer par des "cards" figées.

   Structure attendue par <tr> :
     - une cellule .cell-main    (identité, ligne 1 gauche)
     - une cellule .cell-status  (badge statut, ligne 1 droite) — optionnelle
     - des cellules .cell-row-2, .cell-row-3, ... (contenu, groupées
       par numéro de ligne, affichées en grid horizontal)
     - une cellule .cell-actions (dernière ligne, alignée à droite) — optionnelle

   Le NOMBRE de lignes n'est pas limité : ajouter .cell-row-4, .cell-row-5...
   ne nécessite aucune modification de ce bloc.

   Les PROPORTIONS de chaque .cell-row-N (grid-template-columns) sont
   définies par page via une classe de scope sur le conteneur, ex :
     .reglements-table .cell-row-3 { grid-template-columns: 1fr 1fr 1fr; }
   Sans déclaration spécifique, une cell-row-N avec une seule cellule
   occupe naturellement toute la largeur (1fr par défaut ci-dessous).

   Ajouter un nouveau gabarit plus tard (table-to-rows-XXX) n'impacte
   pas ce bloc : il reste un bloc CSS autonome, sans dépendance croisée. */
.table-to-rows,
  .table-to-rows.card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

.table-to-rows table,
  .table-to-rows thead,
  .table-to-rows tbody,
  .table-to-rows th,
  .table-to-rows td,
  .table-to-rows tr {
    display: block;
  }

.table-to-rows thead { display: none; }

.table-to-rows tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-left: var(--list-card-accent) solid var(--row-accent, var(--green-main));
    border-bottom: none;
    padding: var(--space-md);
    cursor: default;
  }

.table-to-rows tbody tr:first-child {
    border-top-left-radius: var(--list-card-radius);
    border-top-right-radius: var(--list-card-radius);
  }

.table-to-rows tbody tr:last-child {
    border-bottom: 1px solid var(--card-border);
    border-bottom-left-radius: var(--list-card-radius);
    border-bottom-right-radius: var(--list-card-radius);
  }

.table-to-rows tbody tr:hover { background: var(--bg-card) !important; }
.table-to-rows tbody tr:hover td { background: transparent !important; }

.table-to-rows td {
    border: none;
    padding: 0;
  }

/* Ligne 1 : identité (gauche, flexible) + statut (droite, fixe) */
.table-to-rows .cell-main {
    font-weight: 600;
    min-width: 0;
    flex: 1 1 auto;
  }

.table-to-rows .cell-status { flex-shrink: 0; }

/* Lignes de contenu : flex-basis 100% → toujours sur leur propre ligne,
   grid horizontal interne, proportions définies par page */
.table-to-rows [class*="cell-row-"] {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    align-items: center;
  }

.table-to-rows [class*="cell-row-"] > * { min-width: 0; }

.table-to-rows .show-label[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }

/* Dernière ligne : actions, alignées à droite, sur leur propre ligne */
.table-to-rows .cell-actions {
    flex-basis: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
  }


/* ── table-to-rows : proportions par page ────────────────────────
   Chaque page ajoute ici ses grid-template-columns spécifiques,
   sans toucher au bloc générique ci-dessus. */

.reglements-table .cell-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.reglements-table .cell-row-3.text-right { text-align: left; }

.mescomp-table .cell-row-2 { grid-template-columns: 1fr 2fr 1fr; }

.eleves-table .cell-row-2 { grid-template-columns: 1fr 2fr; }

/* cell-row-3 : exception flex-wrap (badges en nombre variable,
   un alignement en grille n'aurait pas de sens). Les deux <td>
   .cell-row-3 partagent une même ligne (flex:1, pas de flex-basis:100%
   individuel) ; leur contenu se mélange dans un flux flex-wrap continu. */
.eleves-table .cell-row-3 {
    flex: 1 1 auto;
    flex-basis: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
  }

/* Catégorie : en mode rows (cell-row-3), les badges FR/intl
   passent en ligne pour tenir sur la même ligne que Niveau.
   Règle desktop (column) définie hors media query, voir plus bas. */
.eleves-table .cell-row-3 .cat-badges-wrap { flex-direction: row; }


.config-serie-ligne {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
        padding: var(--space-sm);
        border-radius: 8px;
        border: 1px solid var(--border-light);
        margin-bottom: 4px;
    }

.config-drag-handle,
    .config-col-actions { grid-column: span 2; }

.fd-layout { grid-template-columns: 1fr; }

.fd-liste  { max-height: 250px; }

.fd-btn-placer { opacity: 1; }

.page-actions {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

/* Les extras passent en première ligne, pleine largeur */
  .page-actions-extras {
    order: 1;
    width: 100%;
    margin-left: 0;
  }

/* Chaque bouton extra prend la place disponible équitablement */
  .page-actions-extras .btn {
    flex: 1;
    justify-content: center;
  }

/* Retour et Principal passent en dernière ligne, 50/50 */
  .page-actions-back {
    order: 2;
    flex: 1;
    justify-content: center;
  }

.page-actions-main {
    order: 2;
    flex: 1;
    margin-left: 0;
    justify-content: center;
  }

/* Sans bouton Retour : Principal prend 100% */
  .page-actions-main:first-child,
  .page-actions-main:not(.page-actions-back ~ .page-actions-main) {
    flex: 1 1 100%;
  }

.pdf-gen-layout { grid-template-columns: 1fr; }

.pdf-gen-left   { position: static; }

.comm-wizard-layout {
        grid-template-columns: 1fr;
    }

.comm-liste-eleves {
        max-height: 360px;
    }

.first-run-page {
    padding: var(--space-lg) var(--space-md);
  }

.perso-couleurs-layout {
    grid-template-columns: 1fr;
  }

.perso-preview-iframe {
    height: 400px;
  }
}

/* ── table-to-rows : hover desktop (lignes non cliquables) ──────── */
.mescomp-table tr:hover td { background: transparent !important; }

/* ── eleves-table : badges catégorie empilés en desktop ──────────
   (en mode rows, voir .eleves-table .cell-row-3 .cat-badges-wrap
   qui repasse en ligne) */
.cat-badges-wrap { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }

/* ============================================================
   RESPONSIVE — Petit mobile 480px
   ============================================================ */

@media (max-width: 480px) {
.stats-row    { grid-template-columns: 1fr 1fr; }

.topbar-title { font-size: var(--text-sm); }

.list-card    { padding: var(--space-md); }

.groupe-cards { grid-template-columns: 1fr; }

.topbar-notif-dropdown { width: calc(100vw - 16px); right: -8px; }
}

/* ── Stats row — variante 3 colonnes fixes ───────────────── */
.stats-row-3 { grid-template-columns: repeat(3, 1fr); }

/* ── Nom élève dans tableau (flex + badges) ──────────────── */
.eleve-nom-wrap {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Note affichée en mode card ──────────────────────────── */
.note-inline-card {
  background: var(--bg-subtle);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-left: 3px solid var(--border-strong);
}


/* ── Bouton note (bulle commentaire) ─────────────────────── */
.btn-note {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
  line-height: 1;
  display: inline-block;
}

/* ── Utilitaire text-center ──────────────────────────────── */

/* ── Bouton icône avec tooltip au survol ─────────────────── */
.btn-icon-wrap {
  position: relative;
  display: inline-flex;
}

/* ── Bouton note (bulle commentaire) ─────────────────────── */

/* ── Utilitaire text-center ──────────────────────────────── */

/* ── Bouton icône avec tooltip au survol ─────────────────── */

.btn-icon-wrap .btn-icon-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
  box-shadow: var(--tooltip-shadow);
  z-index: 300;
}

.btn-icon-wrap:hover .btn-icon-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip alignée à droite pour les boutons en fin de ligne */
.btn-icon-wrap.tooltip-left .btn-icon-label {
  left: auto;
  right: 0;
  transform: translateY(4px);
}
.btn-icon-wrap.tooltip-left:hover .btn-icon-label {
  transform: translateY(0);
}

/* Taille bouton icône standard — plus généreux */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 16px;
  border-radius: var(--btn-radius);
}

/* ── Actions utilisateurs (colonne select + boutons) ──────── */
.user-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

/* ── Colonnes masquées sur tablette (tableau visible mais allégé) ── */
@media (min-width: 1025px) and (max-width: 1200px) {
.hide-tablet { display: none; }
}

/* ── Colonnes masquées sur tablette (tableau visible mais allégé) ── */
@media (min-width: 900px) and (max-width: 1300px) {

.groupe-badge-nom-custom { display: none; }
}


/* ── Visibilité selon le mode tableau/card ───────────────── */
/* .card-hide  : visible en tableau, masqué en card          */
/* .table-hide : masqué en tableau, visible en card          */

.table-hide { display: none; }


/* ── Bouton voir : icône sur desktop, texte sur mobile ───── */
.btn-voir { gap: 6px; }
.btn-voir-label { display: none; }

/* ============================================================
   FORMULAIRE PUBLIC D'INSCRIPTION
   ============================================================ */

.insc-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.insc-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* ============================================================
   FORMULAIRE PUBLIC D'INSCRIPTION
   ============================================================ */

.insc-header h1 {
  font-family: var(--font-title);
  font-size: var(--text-xl);
  color: var(--green-deep);
  margin-bottom: var(--space-xs);
}
.insc-header p {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.insc-steps {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}
.insc-step {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}

.insc-step.active { background: var(--green-main); }
.insc-step.done   { background: var(--green-light); }

.recap-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
  gap: var(--space-md);
}

.recap-row:last-child { border-bottom: none; }
.recap-label { color: var(--text-muted); flex-shrink: 0; }
.recap-val   { color: var(--text); font-weight: 600; text-align: right; }

.voeu-card {
  display: block;
  border: 2px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.voeu-card:hover { border-color: var(--green-light); background: var(--green-xpale); }
.voeu-card.selected { border-color: var(--green-main); background: var(--green-pale); }
.voeu-card.complet  { opacity: 0.5; cursor: not-allowed; }
.voeu-card input[type=radio] { display: none; }
.voeu-card-label { font-weight: 600; color: var(--text); }

.modif-badge {
  display: inline-block;
  background: var(--badge-warning-bg);
  color: var(--badge-warning-text);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}

.insc-code-input {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  font-family: monospace;
}

.btn-suppr-contact {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 20px;
  line-height: 1;
  padding: 0;
  transition: color var(--transition);
}

.btn-suppr-contact:hover { color: var(--badge-error-text); }

.fratrie-check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  user-select: none;
}

.fratrie-check-item:hover { border-color: var(--green-light); background: var(--green-xpale); }
.fratrie-check-item.selected { border-color: var(--green-main); background: var(--green-pale); }

/* ============================================================
   MICRO CARDS GROUPES (modal assignation)
   ============================================================ */
   
   /* ── Version compacte des groupe-cards (modal avec textarea) */
.groupe-cards-sm {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: var(--space-md);
}@media (max-width: 560px) {
.groupe-cards-sm { grid-template-columns: 1fr 1fr; }
}
.groupe-cards-sm .groupe-card {
  padding: 6px 10px;
  border-radius: 8px;
}
.groupe-cards-sm .groupe-card-jour {
  font-size: var(--text-sm);
  margin-bottom: 1px;
}
.groupe-cards-sm .groupe-card-meta {
  font-size: 10px;
}
.groupe-cards-sm .groupe-card-places {
  margin-top: 2px;
  font-size: 10px;
  padding: 1px 5px;
}

/* ── Section mail dans les modals */
.modal-mail-section {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
}

/* ── Section mail dans les modals */

.modal-mail-section label.form-check {
  margin-bottom: var(--space-sm);
  font-weight: 600;
}
.modal-mail-section textarea {
  font-size: var(--text-sm);
  line-height: 1.6;
  resize: vertical;
}

.groupe-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.groupe-card {
  display: block;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  text-align: left;
}

.groupe-card:hover  { border-color: var(--green-light); background: var(--green-xpale); }
.groupe-card.selected { border-color: var(--green-main); background: var(--green-pale); }
.groupe-card.complet  { opacity: 0.45; cursor: not-allowed; }
.groupe-card input[type=radio] { display: none; }

.groupe-card-jour {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: 2px;
}
.groupe-card-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
.groupe-card-places {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--green-pale);
  color: var(--green-mid);
}

.groupe-card.complet .groupe-card-places {
  background: var(--badge-neutral-bg);
  color: var(--text-muted);
}

.eleve-recap-assign {
  background: var(--bg-subtle);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}

.eleve-recap-assign strong { color: var(--text); }
.eleve-recap-assign .cat-badge {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-mid);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}

/* ── Card tableau sans overflow:hidden (pour tooltips visibles) */
.card-table {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 0;
  overflow: visible;
}

/* ── Card tableau sans overflow:hidden (pour tooltips visibles) */

.card-table table {
  width: 100%;
}
.card-table table thead tr:first-child th:first-child { border-radius: var(--card-radius) 0 0 0; }
.card-table table thead tr:first-child th:last-child  { border-radius: 0 var(--card-radius) 0 0; }
.card-table table tbody tr:last-child td:first-child  { border-radius: 0 0 0 var(--card-radius); }
.card-table table tbody tr:last-child td:last-child   { border-radius: 0 0 var(--card-radius) 0; }

/* ── Card title repliable ─────────────────────────────────── */
.card-title-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  padding: 0;
  margin-bottom: var(--space-md);
  text-align: left;
}

/* ── Card title repliable ─────────────────────────────────── */

.card-title-toggle:hover { color: var(--green-main); }
.card-title-toggle .toggle-icon {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 400;
}

/* ============================================================
   Import CSV — à ajouter dans style.css
   ============================================================ */

/* ── Stepper ──────────────────────────────────────────────── */
.import-stepper {
    display: flex;
    align-items: center;
    gap: 0;
}
.import-step {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-light);
}

/* ============================================================
   Import CSV — à ajouter dans style.css
   ============================================================ */

/* ── Stepper ──────────────────────────────────────────────── */

.import-step.active { color: var(--green-main); font-weight: 600; }
.import-step.done   { color: var(--badge-success-text); }
.import-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-subtle);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
}

.import-step.active .import-step-num {
    background: var(--green-pale);
    border-color: var(--green-main);
    color: var(--green-main);
}
.import-step.done .import-step-num {
    background: var(--badge-success-bg);
    border-color: var(--badge-success-text);
    color: var(--badge-success-text);
}
.import-step-label { font-size: var(--text-sm); }
.import-step-sep {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 var(--space-sm);
    min-width: 24px;
}

/* ── Zone de dépôt ────────────────────────────────────────── */
.import-drop-zone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--card-radius);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    transition: border-color var(--transition), background var(--transition);
    cursor: default;
}

/* ── Zone de dépôt ────────────────────────────────────────── */

.import-drop-zone.drag-over {
    border-color: var(--green-main);
    background: var(--green-xpale);
}
.import-drop-icon  { font-size: 36px; margin-bottom: var(--space-sm); }
.import-drop-label { font-weight: 600; color: var(--text); margin-bottom: var(--space-xs); }
.import-drop-sub   { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-xs) 0; }

/* ── Liste des colonnes attendues ─────────────────────────── */
.import-cols-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.import-col-item {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-family: monospace;
}
.import-col-required {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
    border-color: var(--badge-success-text);
}

/* ── En-tête de section du tableau ───────────────────────── */
.import-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--card-padding);
    background: var(--green-xpale);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--green-mid);
}
.import-section-nouveau {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
    border-bottom-color: var(--badge-warning-border);
}

/* ── Liste des colonnes attendues ─────────────────────────── */

/* ── En-tête de section du tableau ───────────────────────── */

/* ── Ligne modifiée ───────────────────────────────────────── */
.import-row-changed td:first-child {
    border-left: 3px solid var(--badge-warning-text);
}
.import-val-avant {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: var(--text-xs);
}
.import-val-apres {
    color: var(--badge-success-text);
    font-weight: 600;
    font-size: var(--text-sm);
}
.import-arrow {
    color: var(--text-light);
    margin: 0 var(--space-xs);
    font-size: var(--text-xs);
}

/* ── Aperçu drapeau dans editer.php ──────────────────────── */
.drapeau-preview {
    display: none;
    margin-top: calc(-1 * var(--space-xs));
}

/* ── Aperçu drapeau dans editer.php ──────────────────────── */

.drapeau-preview.visible { display: block; }
.drapeau-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--badge-padding);
    border-radius: var(--badge-radius);
    font-size: var(--badge-font);
    font-weight: var(--badge-weight);
    border: 1px solid;
}


/* ============================================================
   Configurations de compétition (admin/configurations.php)
   ============================================================ */

/* Ligne active dans la liste des configurations */
.config-active-row { background: var(--green-xpale); }

/* Tableau des séries — en-tête et lignes */
.config-table-header,
.config-serie-ligne {
    display: grid;
    grid-template-columns: 20px 1fr 140px 90px 1fr 65px 1fr 32px;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
}
.config-table-header {
    background: var(--bg-subtle);
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.config-serie-ligne {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-top: none;
}
.config-serie-ligne:last-child  { border-radius: 0 0 8px 8px; }
.config-serie-ligne:hover       { background: var(--green-xpale); }@media (max-width: 1200px) {
.config-table-header,
    .config-serie-ligne {
        grid-template-columns: 20px 1fr 120px 80px 1fr 55px 1fr 32px;
    }
}

/* Poignée de drag */
.config-drag-handle {
    cursor: grab;
    user-select: none;
    font-size: 16px;
}

/* Pastilles couleur (drapeau + départ) */
.config-drap-dot,
.config-dep-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

/* Colonnes flex */
.config-col-drapeau,
.config-col-index,
.config-col-depart  { display: flex; align-items: center; gap: var(--space-xs); }
.config-col-actions { display: flex; align-items: center; justify-content: center; }

/* Inputs compacts de l'index (max 54) */
.config-select-op  { width: 70px; flex-shrink: 0; }
.config-input-num  { width: 48px !important; flex-shrink: 0; font-size: var(--text-sm); padding: 0 var(--space-xs); }

/* Input color départ */
.config-color-input {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 5px;
    cursor: pointer;
    padding: 0;
    border: 1px solid var(--border);
}

/* ── Sélecteur drapeau actuel → suivant ─────────────────── */
.serie-drapeau-selector {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--card-radius);
    padding: var(--space-md);
    border: 1px solid var(--border);
}
.serie-drapeau-bloc {
    flex: 1;
    text-align: center;
}
.serie-drapeau-arrow {
    font-size: 24px;
    color: var(--green-main);
    font-weight: 700;
    flex-shrink: 0;
}
.serie-drapeau-suivant {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.serie-drapeau-pastille {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border);
    margin: 0 auto;
}

/* ── Critères drapeaux (admin/drapeaux_criteres.php) ─────── */
.critere-ligne {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: var(--space-sm);
}
.critere-select-type { width: 140px; flex-shrink: 0; }
.critere-valeur-wrap { display: flex; align-items: center; gap: var(--space-xs); }


/* ============================================================
   Événements EDG — Stepper (mes_competitions/evenement.php)
   ============================================================ */

.evt-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding-bottom: var(--space-xs);
}
.evt-step {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-light);
    text-decoration: none;
    white-space: nowrap;
}
.evt-step.active         { color: var(--green-main); font-weight: 600; }
.evt-step.done           { color: var(--badge-success-text); }
.evt-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-subtle);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); font-weight: 700; flex-shrink: 0;
}
.evt-step.active 

.evt-step.done 

.evt-step-label { font-size: var(--text-sm); }
.evt-step-sep {
    flex: 1; height: 2px;
    background: var(--border);
    margin: 0 var(--space-xs);
    min-width: 16px;
}

/* ── Input numérique compact ─────────────────────────────── */
.input-num {
    width: 48px !important;
    flex-shrink: 0;
    font-size: var(--text-sm);
    padding: 0 var(--space-xs);
    text-align: center;
}

/* ── Select compact (opérateurs) ─────────────────────────── */
.select-op {
    width: 70px;
    flex-shrink: 0;
}


/* ============================================================
   Événements EDG — Stepper (mes_competitions/evenement.php)
   ============================================================ */

.evt-step:hover          { color: var(--text-muted); }

.evt-step.active 

.evt-step.done 

/* ============================================================
   Événements EDG — Stepper (mes_competitions/evenement.php)
   ============================================================ */

.evt-step:hover          { color: var(--text-muted); }

.evt-step.active 

.evt-step.done 

/* ============================================================
   Feuilles de départs — étape 5 (fd-*)
   ============================================================ */

.fd-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-lg);
    align-items: flex-start;
}
.fd-liste-col,
.fd-tableau-col { min-width: 0; }

.fd-liste {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 600px;
    overflow-y: auto;
    padding: var(--space-xs);
    background: var(--bg-subtle);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.fd-joueur {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 5px 8px;
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    background: var(--bg-card);
    transition: box-shadow var(--transition);
}
.fd-joueur:hover  { box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.fd-joueur:active { cursor: grabbing; }
.fd-disponible    { border: 1px solid var(--border-light); }
.fd-place {
  font-weight: 600; font-size: var(--text-sm); user-select: none; cursor: grab;
}

.fd-tee-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.15);
    display: inline-block;
}
.fd-nom {
    flex: 1;
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fd-idx { font-size: var(--text-xs); flex-shrink: 0; }

.fd-disponible > * { pointer-events: none; }
.fd-disponible > .fd-btn-placer { pointer-events: auto; }

.fd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.fd-vide {
    opacity: 0.25;
    pointer-events: none;
    cursor: default;
}

.fd-thead { background: var(--bg-subtle); }
.fd-th {
    padding: 6px 8px;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.fd-th-n      { width: 36px; }
.fd-th-hr     { width: 60px; }
.fd-th-nom    { }
.fd-th-idx    { width: 50px; }
.fd-th-tee    { width: 36px; text-align: center; }
.fd-th-action { width: 60px; }

.fd-td-n      { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
.fd-td-hr     { white-space: nowrap; }
.fd-td-tee    { text-align: center; }
.fd-td-action { white-space: nowrap; }

.fd-cr-num   { font-size: var(--text-xs); color: var(--text-muted); font-weight: 700; }
.fd-cr-heure {
    font-weight: 700;
    color: var(--text);
    background: var(--bg-subtle);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: var(--text-sm);
}

.fd-row-empty        { background: var(--bg-card); }

.fd-row-empty:hover  { background: var(--green-xpale); }
.fd-row-occupied     { background: var(--bg-card); }

.fd-row-sep td       { padding: 2px 0; background: var(--bg-page); border: none; }

.fd-empty-label { color: var(--text-light); font-size: var(--text-xs); }

.fd-btn-retirer { font-size: var(--text-xs); padding: 0 6px; height: 24px; }
.fd-btn-del-cr  { width: 24px; height: 24px; font-size: 14px; }

/* ============================================================
   Configurations de compétition (admin/configurations.php)
   ============================================================ */

/* Ligne active dans la liste des configurations */

/* Tableau des séries — en-tête et lignes */
.config-table-header,

.config-serie-ligne:last-child  { border-radius: 0 0 8px 8px; }

/* Poignée de drag */

/* Pastilles couleur (drapeau + départ) */
.config-drap-dot,

/* Colonnes flex */
.config-col-drapeau,
.config-col-index,

/* Inputs compacts de l'index (max 54) */

/* Input color départ */

/* ── Sélecteur drapeau actuel → suivant ─────────────────── */

/* ── Critères drapeaux (admin/drapeaux_criteres.php) ─────── */

/* ============================================================
   Feuilles de départs — étape 5 (fd-*)
   ============================================================ */

.fd-liste-col,

.fd-joueur:hover  { box-shadow: 0 2px 6px rgba(0,0,0,.08); }

.fd-td {
	height: 38px;
	overflow: hidden;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

/* Hauteur fixe des lignes tableau départs */

/* Input heure — style cohérent avec les autres inputs */
.fd-heure-input {
    font-family: var(--font-main);
    font-size: var(--input-font);
    height: var(--input-h);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: 0 10px;
    color: var(--text);
    width: 120px;
    transition: border-color var(--transition);
}
.fd-heure-input:focus {
    outline: none;
    border-color: var(--input-focus);
}

/* Bouton Placer sur chaque joueur de la liste */
.fd-btn-placer {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    padding: 0 6px;
    height: 22px;
    opacity: 0;
    transition: opacity var(--transition);
}
.fd-joueur:hover .fd-btn-placer { opacity: 1; }
.fd-vide .fd-btn-placer { display: none; }
.fd-btn-vider-cr { width: 24px; height: 24px; font-size: 14px; }

/* Boutons du bas — grille 2x2 sur mobile */
.fd-actions-bas {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-lg);
}
@media (max-width: 600px) {
    .fd-actions-bas {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .fd-actions-bas .btn { justify-content: center; }
}

/* ── Flash message dans le subnav ──────────────────────────────────────── */
.subnav-flash {
  width: 100%;
  padding: 8px var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  border-top: 1px solid transparent;
}
.subnav-flash-success {
  background: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-text);
}
.subnav-flash-error {
  background: var(--alert-error-bg);
  border-color: var(--alert-error-border);
  color: var(--alert-error-text);
}
.subnav-flash-warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}
.subnav-flash-info {
  background: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-text);
}

/* ── Flash message dans la topbar ──────────────────────────────────────── */
.topbar-flash {
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  max-width: 420px;
  width: auto;
  padding: 7px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.topbar-flash-success {
  background: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-text);
}
.topbar-flash-error {
  background: var(--alert-error-bg);
  border-color: var(--alert-error-border);
  color: var(--alert-error-text);
}
.topbar-flash-warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}
.topbar-flash-info {
  background: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-text);
}

/* ============================================================
   BADGES ÉLÈVE — catégorie, index, drapeau
   ============================================================ */

/* Catégorie française */
.badge-cat-fr {
  background: var(--badge-cat-fr-bg);
  color:      var(--badge-cat-fr-text);
  border:     1px solid var(--badge-cat-fr-border);
}

/* Catégorie internationale */
.badge-cat-intl {
  background: var(--badge-cat-intl-bg);
  color:      var(--badge-cat-intl-text);
  border:     1px solid var(--badge-cat-intl-border);
}

/* Index */
.badge-index {
  background: var(--badge-index-bg);
  color:      var(--badge-index-text);
  border:     1px solid var(--badge-index-border);
}

/* Drapeau — couleur dynamique via style inline, pastille incluse */
.badge-drapeau {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  min-width:       80px;
}
.badge-drapeau-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  display:       inline-block;
  flex-shrink:   0;
}

/* ============================================================
   PAGE ACTIONS — Barre de boutons en bas de page/formulaire
   Convention :
     - "Retour"  toujours à gauche  → .page-actions-back
     - Extras    au centre-droite   → .page-actions-extras
     - Principal toujours à droite  → .page-actions-main

   HTML type :
   <div class="page-actions">
     <a href="..." class="btn btn-secondary btn-back page-actions-back">Retour</a>
     <div class="page-actions-extras">
       <button class="btn btn-dark btn-pdf">Aperçu PDF</button>
     </div>
     <button class="btn btn-primary page-actions-main">Enregistrer</button>
   </div>

   Sans retour :
   <div class="page-actions">
     <button class="btn btn-primary page-actions-main">Enregistrer</button>
   </div>
   ============================================================ */

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Le bouton principal est toujours poussé à droite */
.page-actions-main {
  margin-left: auto;
}

/* Les extras se placent juste avant le bouton principal */
.page-actions-extras {
  display: flex;
  gap: var(--space-sm);
  margin-left: auto;
}

/* Si extras ET main : main reprend son margin-left auto depuis extras */
.page-actions-extras + .page-actions-main {
  margin-left: 0;
}


/* ── Golf autocomplete ───────────────────────────────────── */
.golf-results {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--input-radius) var(--input-radius);
    background: var(--bg-card);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: var(--card-shadow);
}
.golf-result-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    gap: 2px;
}
.golf-result-item:hover { background: var(--green-xpale); }
.golf-result-nom  { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.golf-result-lieu { font-size: var(--text-xs); color: var(--text-muted); }
.golf-selected {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 12px;
    height: var(--input-h);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--input-radius);
    font-size: var(--text-base);
    color: var(--text);
}
.golf-clear-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1;
    padding: 0 4px;
}
.golf-clear-btn:hover { color: var(--text); }
.hidden { display: none !important; }


/* ── PDF générateur ─────────────────────────────────────── */
.pdf-gen-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: var(--space-lg);
    align-items: start;
}
.pdf-gen-left  { position: sticky; top: calc(var(--topbar-h) + var(--subnav-h) + 16px); }
.pdf-gen-right { min-width: 0; }

.pdf-pill { border: 1px solid var(--border); color: var(--text-muted); background: none; }
.pdf-pill.active { background: var(--text); color: var(--text-white); border-color: var(--text); }

.pdf-comp-row {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 8px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border-light); background: var(--bg-card);
    transition: background var(--transition);
}
.pdf-comp-row:hover  { background: var(--green-xpale); }
.pdf-comp-passee     { background: var(--bg-subtle); opacity: 0.7; }
.pdf-comp-unchecked  { opacity: 0.35; }

.pdf-list-header    { display:flex; align-items:center; justify-content:space-between; }
.pdf-liste-comps    { display:flex; flex-direction:column; gap:6px; }
.pdf-comp-dot       { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.pdf-comp-info      { flex:1; }
.pdf-badge-passee   { font-size:10px; padding:1px 6px; margin-right:4px; }
.pdf-label-check    { cursor:pointer; }

/* Ligne cliquable */
.tr-clickable { cursor: pointer; }
.tr-clickable:hover td { background: var(--table-row-hover); }

/* Cards élève — lignes internes */
.card-niveau-row { display: none; }
.card-groupe-row { display: none; }
.card-meta-row   { display: none; }

/* Niveau tableau */
.eleve-niveau-wrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

@media (max-width: 1023px) {
  .card-niveau-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
  .card-groupe-row { display: block; margin-top: 3px; }
  .card-meta-row   { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
}

/* Pills filtre */
.filter-pills-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.filter-pills-label { font-size: 11px; color: var(--text-muted); min-width: 68px; line-height: 28px; }

#filtres {
  scroll-margin-top: calc(var(--topbar-h) + var(--subnav-h) + 16px);
}

.pill-cat {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--bg-card);
  color: var(--text-muted); transition: var(--transition);
}
.pill-cat:hover  { border-color: var(--green-main); color: var(--green-main); }
.pill-cat.active { border-color: var(--green-main); background: var(--green-pale); color: var(--green-main); }
.pill-cat-intl   { font-style: italic; }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ----------------------------------------------------------
   Communication — badges variables cliquables
---------------------------------------------------------- */
.comm-vars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.comm-var-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--badge-radius);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    color: var(--green-mid);
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: monospace;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    line-height: 1.6;
}

.comm-var-badge:hover {
    background: var(--green-pale);
    border-color: var(--green-light);
}


/* ----------------------------------------------------------
   Communication — titre de section dans une card
---------------------------------------------------------- */
.comm-section-title {
    font-family: var(--font-title);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
}

/* ----------------------------------------------------------
   Communication — bloc aperçu message
---------------------------------------------------------- */
.comm-apercu-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comm-apercu-corps {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: var(--space-md);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
}

/* ----------------------------------------------------------
   Communication — confirmation (état 2)
---------------------------------------------------------- */
.comm-confirm-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.comm-confirm-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* ----------------------------------------------------------
   Communication — détail modal
---------------------------------------------------------- */
.comm-detail-meta {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.comm-detail-erreurs {
    background: var(--alert-error-bg);
    border: 1px solid var(--alert-error-border);
    border-radius: var(--alert-radius);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.comm-erreur-ligne {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--alert-error-border);
}

.comm-erreur-ligne:last-child {
    border-bottom: none;
}

/* ============================================================
   PATCH style.css — Communication v2
   À AJOUTER EN FIN DE FICHIER (après le bloc comm v1 existant)
   ============================================================ */

/* ----------------------------------------------------------
   Communication — layout wizard 2 colonnes (étape 1)
---------------------------------------------------------- */


/* Index min/max côte à côte */
.comm-idx-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

/* ----------------------------------------------------------
   Communication — ligne élève cochable (étape 1)
---------------------------------------------------------- */
.comm-liste-eleves {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 520px;
    overflow-y: auto;
}

/* ----------------------------------------------------------
   Communication — en-tête liste droite
---------------------------------------------------------- */
.comm-destins-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

/* ----------------------------------------------------------
   Communication — barre recap (étapes 2 et 3)
---------------------------------------------------------- */
.comm-destins-recap-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

/* ----------------------------------------------------------
   Communication — aperçu sujet (étape 2)
---------------------------------------------------------- */
.comm-apercu-sujet {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
}

.comm-apercu-pour {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-main);
    font-weight: 400;
}

/* ----------------------------------------------------------
   Communication — liste récap destinataires (étape 3)
---------------------------------------------------------- */
.comm-liste-recap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.comm-recap-ligne {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
}

.comm-recap-ligne:last-child {
    border-bottom: none;
}

.comm-destins-reste {
    display: none;
}

/* ----------------------------------------------------------
   Communication — case déduplication (étape 3)
---------------------------------------------------------- */
.comm-dedup-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 1px solid var(--border);
}

/* ----------------------------------------------------------
   Communication — séparation visuelle checkbox / compteurs
---------------------------------------------------------- */

 
/* Badge ? pour l'infobulle déduplication */
.comm-dedup-help {
    cursor: default;
    font-weight: 700;
    min-width: 0;
    padding: 2px 7px;
    user-select: none;
}

/* ============================================================
   TOGGLE SWITCH
   ============================================================ */

.toggle-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: fit-content;
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle-slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background: var(--border-strong);
  border-radius: 11px;
  transition: background var(--transition);
  flex-shrink: 0;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--transition);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--green-main);
}

.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(18px);
}
/* ============================================================
   INSCRIPTIONS COMPÉTITIONS (competitions/inscriptions.php)
   ============================================================ */

/* En-tête compétition */
.insc-comp-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.insc-comp-header-body { flex: 1; min-width: 0; }

.insc-comp-nom {
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.insc-comp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Stats en-tête */
.insc-comp-stats {
  display: flex;
  gap: var(--space-lg);
  flex-shrink: 0;
}

.insc-stat {
  text-align: center;
  min-width: 48px;
}

.insc-stat-val {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.insc-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 3px;
}

/* Note parent dans le tableau */
.insc-note-parent {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 220px;
}

/* Badge auto-inséré */
.insc-badge-auto {
  margin-left: var(--space-xs);
  font-size: 10px;
  padding: 1px 6px;
}

/* Cellule actions */
.insc-actions-cell {
  white-space: nowrap;
}

.insc-actions-cell .btn-icon-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-right: var(--space-xs);
}

@media (max-width: 768px) {
  .insc-comp-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .insc-comp-stats {
    width: 100%;
    justify-content: space-around;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
  }
  .insc-note-parent {
    max-width: 100%;
  }
}

/* Badge compteur sur bouton Inscriptions (liste.php) */
.insc-badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--btn-danger-text);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast-container {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.layout-toast {
  pointer-events: all;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px 14px 16px;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  min-width: 260px;
  max-width: 520px;
  position: relative;
  overflow: hidden;
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.layout-toast-success {
  background: var(--alert-success-bg);
  color: var(--alert-success-text);
  border: 1px solid var(--alert-success-border);
}
.layout-toast-error {
  background: var(--alert-error-bg);
  color: var(--alert-error-text);
  border: 1px solid var(--alert-error-border);
}
.layout-toast-warning {
  background: var(--alert-warning-bg);
  color: var(--alert-warning-text);
  border: 1px solid var(--alert-warning-border);
}
.layout-toast-info {
  background: var(--alert-info-bg);
  color: var(--alert-info-text);
  border: 1px solid var(--alert-info-border);
}

.layout-toast-msg  { flex: 1; line-height: 1.5; }

.layout-toast-close {
  width: 20px; height: 20px;
  border-radius: 4px; border: none;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.5; font-size: 18px; flex-shrink: 0;
  color: inherit; line-height: 1;
  transition: opacity var(--transition);
  padding: 0;
}
.layout-toast-close:hover { opacity: 1; }

.layout-toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 100%;
  border-radius: 0 0 10px 10px;
}
.layout-toast-success .layout-toast-progress { background: var(--alert-success-text); opacity: 0.4; }
.layout-toast-error   .layout-toast-progress { background: var(--alert-error-text);   opacity: 0.4; }
.layout-toast-warning .layout-toast-progress { background: var(--alert-warning-text); opacity: 0.4; }
.layout-toast-info    .layout-toast-progress { background: var(--alert-info-text);    opacity: 0.4; }

/* ============================================================
   CLOCHE NOTIFICATIONS TOPBAR
   ============================================================ */

.topbar-notif-wrap {
  position: relative;
}

.topbar-bell-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.topbar-bell-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--text);
}
.topbar-bell-btn.has-notif {
  border-color: var(--btn-danger-text);
  background: #fef2f2;
  color: var(--btn-danger-text);
}
.topbar-bell-btn.has-notif:hover {
  background: #fee2e2;
}

.topbar-bell-icon {
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

.topbar-bell-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--btn-danger-text);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
  pointer-events: none;
  border: 1.5px solid var(--bg-card);
}

.topbar-notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--modal-shadow);
  z-index: 500;
  overflow: hidden;
}
.topbar-notif-dropdown.open { display: block; }

.topbar-notif-header {
  padding: 10px 14px 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-light);
}

.topbar-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  transition: background var(--transition);
}
.topbar-notif-item:last-child { border-bottom: none; }
.topbar-notif-item:hover { background: var(--bg-subtle); }

.topbar-notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 4px; flex-shrink: 0;
}
.topbar-notif-dot-warning { background: var(--badge-warning-text); }
.topbar-notif-dot-info    { background: var(--admin-accent); }
.topbar-notif-dot-error   { background: var(--btn-danger-text); }

.topbar-notif-body  { flex: 1; }
.topbar-notif-label { font-size: var(--text-sm); font-weight: 600; color: var(--text); line-height: 1.4; }
.topbar-notif-meta  { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

.topbar-notif-empty {
  padding: 16px 14px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ============================================================
   TOPBAR — Dropdown utilisateur
   ============================================================ */

.topbar-user-wrap {
  position: relative;
}

.topbar-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-xpale);
  border: 1.5px solid var(--green-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--green-main);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition);
  user-select: none;
}
.topbar-avatar:hover {
  border-color: var(--green-main);
  background: var(--green-pale);
}

.topbar-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--badge-radius);
  font-size: var(--text-xs);
  font-weight: var(--badge-weight);
}
@media (max-width: 768px) {
  .topbar-role-badge { display: none; }
}

.topbar-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--modal-shadow);
  z-index: 500;
  overflow: hidden;
}
.topbar-user-dropdown.open { display: block; }

.topbar-user-dropdown-header {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border-light);
}
.topbar-user-dropdown-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.topbar-user-dropdown-email {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-user-dropdown-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.topbar-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}
.topbar-user-dropdown-item:last-child { border-bottom: none; }
.topbar-user-dropdown-item:hover { background: var(--bg-subtle); }
.topbar-user-dropdown-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.topbar-user-dropdown-sep {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.topbar-user-dropdown-item.item-danger {
  color: var(--btn-danger-text);
}
.topbar-user-dropdown-item.item-danger svg {
  color: var(--btn-danger-text);
}

.sa-badge-dropdown {
  display: inline-flex;
  margin: 8px 14px 6px;
  border-radius: 20px;
}

/* ============================================================
   PAGE SMTP (admin/communication_smtp.php)
   ============================================================ */

.smtp-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-lg);
  align-items: start;
}

.smtp-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.smtp-info-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.smtp-info-row:last-child { border-bottom: none; }

.smtp-info-row dt {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 90px;
  flex-shrink: 0;
}

.smtp-info-row dd {
  font-size: var(--text-sm);
  color: var(--text);
  margin: 0;
  word-break: break-all;
}@media (max-width: 900px) {
.smtp-layout {
    grid-template-columns: 1fr;
  }

.smtp-col-info { order: -1; }

.reglement-layout { grid-template-columns: 1fr !important; }

.reglement-col-side { order: -1; }
}

/* ============================================================
   RÈGLEMENTS
   ============================================================ */

/* Layout deux colonnes */
.reglement-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-lg);
  align-items: start;
}

/* En-tête fiche avec actions */
.card-header-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.card-header-with-action .card-title { margin-bottom: 0; }

/* Table règlement */
.reglement-table {
  width: 100%;
  border-collapse: collapse;
}
.reglement-table th {
  font-size: var(--table-th-font);
  color: var(--table-th-color);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--table-padding-y) var(--table-padding-x);
  border-bottom: 1px solid var(--table-th-border);
}
.reglement-table td {
  font-size: var(--table-td-font);
  padding: var(--table-padding-y) var(--table-padding-x);
  border-bottom: 1px solid var(--table-td-border);
  vertical-align: middle;
}
.reglement-table tfoot td {
  border-top: 2px solid var(--border);
  border-bottom: none;
  padding-top: var(--space-sm);
}
.reglement-table tbody tr:hover td { background: var(--table-row-hover); }

.reglement-total-row td { font-weight: 600; }
.reglement-ligne-nom { font-weight: 500; }
.reglement-sous-ligne {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  padding-left: var(--space-sm);
}
.reglement-ajuste { color: var(--badge-warning-text); font-weight: 600; }

/* Récap financier */
.reglement-recap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.reglement-recap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.reglement-recap-row:last-of-type { border-bottom: none; }
.reglement-recap-total {
  font-size: var(--text-md);
  font-weight: 700;
  padding-top: var(--space-sm);
  margin-top: var(--space-xs);
  border-top: 2px solid var(--border);
  border-bottom: none;
}

/* Options disponibles */
.reglement-options-wrap {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-md);
}
.reglement-ou {
  text-align: center;
  margin: var(--space-sm) 0;
}

/* Couleurs statut */
.text-danger { color: var(--badge-error-text); }
.text-success { color: var(--badge-success-text); }

/* ============================================================
   BADGES RÔLE
   ============================================================ */

.role-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--badge-radius);
  font-size: var(--badge-font);
  font-weight: var(--badge-weight);
}

.role-badge-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.role-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0,0,0,.08);
}


.input-mono {
  font-family: monospace;
}

.fw-600 { font-weight: 600; }

.select-sm {
  font-size: 12px;
  height: 32px;
  border-radius: 6px;
  padding: 0 8px;
  max-width: 140px;
}


/* ── Inscriptions compétitions — vue globale ── */

.insc-global-card {
  padding: 0;
  overflow: hidden;
}

.insc-global-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--card-padding-sm);
  transition: background var(--transition);
}

.insc-global-header:hover {
  background: var(--bg-subtle);
}

.insc-global-header-body {
  flex: 1;
}

.insc-global-nom {
  font-weight: 600;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.insc-global-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
}

.insc-global-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.insc-global-toggle {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.insc-global-table {
  border-top: 1px solid var(--border-light);
  padding: 0 var(--card-padding-sm) var(--card-padding-sm);
}

.insc-global-table table {
  width: 100%;
  margin-top: var(--space-sm);
}

/* ============================================================
   FIRST RUN — Layout standalone (ajout à style.css)
   ============================================================ */

.first-run-body {
  background: var(--bg-page);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.first-run-page {
  width: 100%;
  max-width: 680px;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.first-run-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.first-run-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.first-run-brand-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--green-main), var(--green-light));
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.first-run-brand-name {
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--text);
}

.first-run-stepper {
  display: flex;
  align-items: center;
}

.first-run-content {
  display: flex;
  flex-direction: column;
}


/* ── Profil utilisateur ─────────────────────────────────────── */
.profil-wrap {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.profil-role-wrap {
  display: flex;
  align-items: center;
  height: var(--input-h);
}

.profil-config-card-warning {
  border-color: var(--alert-warning-border);
}



/* ── Blocs d'accueil rubrique ────────────────────────────────── */
.rubrique-bloc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* ── Blocs d'accueil rubrique ────────────────────────────────── */

.rubrique-bloc:hover {
  border-color: var(--green-light);
  box-shadow: 0 2px 8px rgba(13,51,32,0.08);
}

.rubrique-bloc-icon {
  font-size: 28px;
}

.rubrique-bloc-label {
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
}

.rubrique-bloc-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.rubrique-bloc-alert {
  border-color: var(--badge-warning-border);
  background: var(--badge-warning-bg);
}

.rubrique-bloc-alert:hover {
  border-color: var(--badge-warning-text);
}

/* ============================================================
   AJOUT style.css — Profil utilisateur
   Uniquement les classes qui n'existent pas encore.
   ============================================================ */

/* ── Champ mot de passe avec bouton œil ─────────────────── */

.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pw-wrap input {
  padding-right: 44px;
}

.pw-eye {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: var(--input-h);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  padding: 0;
  transition: color var(--transition);
}

.pw-eye:hover { color: var(--text); }
.pw-eye::before { content: '👁'; font-size: 14px; line-height: 1; }
.pw-eye.pw-eye-on::before { content: '🙈'; }

/* ── Barre de force mot de passe ─────────────────────────── */

.force-bar {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}

.force-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.3s ease, background 0.3s ease;
}

.force-fill.f1 { background: #ef4444; }
.force-fill.f2 { background: #f97316; }
.force-fill.f3 { background: #eab308; }
.force-fill.f4 { background: #22c55e; }
.force-fill.f5 { background: #16a34a; }

.force-label {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 3px;
}

.force-label.f1 { color: #ef4444; }
.force-label.f2 { color: #f97316; }
.force-label.f3 { color: #eab308; }
.force-label.f4 { color: #22c55e; }
.force-label.f5 { color: #16a34a; }



/* ============================================================
   DASHBOARD — Additions (bloc compétitions enrichi + saison)
   ============================================================ */

/* ── Lien "Voir tout" ───────────────────────────────────────── */
.dashboard-voir-tout {
  font-size: var(--text-xs);
  color: var(--green-main);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}
.dashboard-voir-tout:hover { color: var(--green-mid); }

/* ── Méta compétition (lieu · trous · mode) ─────────────────── */
.dashboard-comp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.dashboard-comp-meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
  display: inline-block;
}

/* ── Côté droit de la ligne compétition ─────────────────────── */
.dashboard-comp-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* ── Badge type compétition (couleur dynamique via style inline) */
.dashboard-comp-type-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Inscrits + en attente ──────────────────────────────────── */
.dashboard-comp-inscrits {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.dashboard-comp-inscrits-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.dashboard-comp-inscrits-attente {
  font-size: var(--text-xs);
  color: var(--badge-warning-text);
  white-space: nowrap;
}

/* ── Bloc droit vide ─────────────────────────────────────────── */
.dashboard-bloc-empty {
  padding: var(--space-md) 0;
}

/* ── Sections du bloc saison ─────────────────────────────────── */
.dashboard-saison-section {
  padding: var(--space-sm) 0 var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.dashboard-saison-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dashboard-saison-section-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

/* ── Ligne de données ────────────────────────────────────────── */
.dashboard-saison-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 4px 0;
}

.dashboard-saison-row-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-saison-row-badge {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ── Jauge de remplissage ────────────────────────────────────── */
.dashboard-saison-jauge-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.dashboard-saison-jauge {
  width: 72px;
  height: 4px;
  background: var(--bg-subtle);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.dashboard-saison-jauge-fill {
  height: 100%;
  background: var(--green-main);
  border-radius: 2px;
  transition: width var(--transition);
}

.dashboard-saison-jauge-val {
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
}

/* ============================================================
   PERSONNALISATION CLUB
   ============================================================ */

/* ── Logo preview ────────────────────────────────────────────── */
.club-logo-preview {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: 6px;
}

.club-logo-fallback {
  width: 80px;
  height: 80px;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

/* ── Layout couleurs (form gauche + iframe droite) ───────────── */
.perso-couleurs-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.perso-couleurs-form {
  min-width: 0;
}

.perso-couleurs-preview {
  min-width: 0;
}

.perso-preview-label {
  margin-bottom: var(--space-xs);
}

.perso-preview-iframe {
  width: 100%;
  height: 500px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--bg-subtle);
}

/* ── Crop logo ───────────────────────────────────────────────── */
.logo-crop-wrap {
  margin-bottom: var(--space-md);
}

.logo-crop-area {
  max-height: 300px;
  overflow: hidden;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.logo-crop-area img {
  display: block;
  max-width: 100%;
}

/* ============================================================
   ÉDITEUR RICHE COMMUNICATION
   À ajouter à la fin de style.css
   ============================================================ */

/* ── Toolbar ─────────────────────────────────────────────── */
.comm-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--input-radius) var(--input-radius) 0 0;
    flex-wrap: wrap;
}
.comm-editor-toolbar-sm {
    padding: 4px 8px;
}

.comm-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    transition: background var(--transition), border-color var(--transition);
}
.comm-editor-btn:hover,
.comm-editor-btn.active {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}

.comm-editor-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Pastilles couleur ───────────────────────────────────── */
.comm-editor-colors {
    display: flex;
    align-items: center;
    gap: 4px;
}
.comm-editor-color {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition);
}
.comm-editor-color:hover {
    transform: scale(1.2);
    border-color: var(--border-strong);
}
.comm-editor-color-white {
    border-color: var(--border) !important;
}

/* ── Picker emoji ────────────────────────────────────────── */
.comm-editor-emoji-wrap {
    position: relative;
}
.comm-editor-emoji-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    padding: 8px;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    z-index: 200;
    width: 180px;
}
.comm-editor-emoji-panel.open {
    display: grid;
}
.comm-editor-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition);
}
.comm-editor-emoji:hover {
    background: var(--bg-subtle);
}

/* ── Zone éditable ───────────────────────────────────────── */
.comm-editor-area {
    min-height: 200px;
    padding: 12px 14px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-top: none;
    border-radius: 0 0 var(--input-radius) var(--input-radius);
    font-size: var(--input-font);
    line-height: 1.65;
    color: var(--text);
    outline: none;
    word-break: break-word;
    transition: border-color var(--transition);
}
.comm-editor-area:focus {
    border-color: var(--input-focus);
}
.comm-editor-area-sm {
    min-height: 72px;
}
/* Placeholder via CSS */
.comm-editor-area.comm-editor-empty:before {
    content: attr(data-placeholder);
    color: var(--text-light);
    pointer-events: none;
}
/* Liens dans l'éditeur */
.comm-editor-area a {
    color: var(--green-mid);
}
.comm-var-badge-code {
    background: var(--green-pale);
    color: var(--green-deep);
    border-color: var(--green-light);
    font-weight: 700;
}
.comm-var-badge-code:hover {
    background: var(--green-light);
}


 
/* ── Spinner envoi en cours ──────────────────────────────── */
.comm-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--alert-info-border);
    border-top-color: var(--alert-info-text);
    border-radius: 50%;
    animation: comm-spin 0.7s linear infinite;
    flex-shrink: 0;
    margin-right: 8px;
}
@keyframes comm-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   TIMELINE SAISONS (admin/saisons.php — ctx jeunes)
   ============================================================ */
.saison-tl {
    display: flex;
    flex-direction: column;
    max-width: 620px;
}
.saison-tl-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.saison-tl-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 36px;
    flex-shrink: 0;
}
.saison-tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-card);
    margin-top: 18px;
    flex-shrink: 0;
}
.saison-tl-dot--active {
    background: var(--green-main);
    border-color: var(--green-main);
}
.saison-tl-dot--open {
    background: var(--badge-index-text);
    border-color: var(--badge-index-text);
}
.saison-tl-line {
    width: 2px;
    background: var(--border-light);
    flex: 1;
    min-height: 12px;
}
.saison-tl-content {
    flex: 1;
    padding: var(--space-sm) 0 var(--space-lg) var(--space-md);
}
.saison-tl-nom {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-sm);
}
.saison-tl-nom--muted {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}
.saison-tl-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}
.saison-tl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}