/* Ez Licence — thème sombre aligné sur EZShow */

:root {
    --bg: #0f1420;
    --bg-elevated: #161c2b;
    --bg-input: #1a2033;
    --bg-hover: #1f2740;

    --border: #2a3145;
    --border-strong: #3a4463;

    --text: #e6ebf5;
    --text-muted: #8a94ab;
    --text-dim: #5c667f;

    --primary: #2f6feb;
    --primary-hover: #4a83f0;
    --primary-dark: #234fb0;

    --ok: #35c26a;
    --ok-bg: rgba(53, 194, 106, 0.12);
    --off: #6b7684;
    --off-bg: rgba(107, 118, 132, 0.15);
    --warn: #f0a020;
    --danger: #ef5555;
    --danger-bg: rgba(239, 85, 85, 0.12);

    --super: #9775ff;
    --admin: #2f6feb;

    --radius: 6px;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

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

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Topbar ---------- */
.topbar {
    background: #0a0f1a;
    border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; gap: 32px; height: 56px; }
.brand { color: var(--text); font-weight: 600; font-size: 16px; }
.brand:hover { text-decoration: none; color: var(--text); }
.brand-mark {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
}
.nav { display: flex; gap: 20px; flex: 1; }
.nav a, .nav-placeholder { color: var(--text-muted); font-size: 14px; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav-placeholder { color: var(--text-dim); cursor: not-allowed; }
.userbox { display: flex; align-items: center; gap: 12px; }
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-super { background: var(--super); color: #fff; }
.badge-admin { background: var(--admin); color: #fff; }
.user { color: var(--text-muted); font-size: 13px; }
.btn-link { color: var(--text-muted); font-size: 13px; }
.btn-link:hover { color: var(--text); text-decoration: none; }

/* La déconnexion est un formulaire POST, mais doit rester visuellement un
   lien dans la barre de navigation : le formulaire ne prend pas de place et
   son bouton reprend l'apparence d'un <a>. */
.logout-form {
    display: inline;
    margin: 0;
    padding: 0;
}
button.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
button.btn-link:hover {
    text-decoration: underline;
}

/* ---------- Main ---------- */
.main { padding: 32px 24px 64px; min-height: calc(100vh - 56px - 60px); }

.page-header { margin-bottom: 24px; }
.page-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}
.page-header h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600; color: var(--text); }
.page-header .subtitle { margin: 0; color: var(--text-muted); font-size: 13px; }
.actions { display: flex; gap: 8px; }
.breadcrumb { margin-bottom: 8px; font-size: 13px; }
.breadcrumb a { color: var(--text-muted); }

/* ---------- Panels ---------- */
.panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.panel h2 {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Stats ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.stat-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.stat-value { font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 12px; color: var(--text); }
.stat-link { font-size: 13px; }
.stat-link-muted { color: var(--text-dim); }

/* ---------- Table ---------- */
.table-wrap {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.table thead th {
    background: #12182a;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom-color: var(--border-strong);
}
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-bottom: none; }

/* En-têtes triables : le lien couvre toute la cellule et hérite du style thead */
.sort-header a {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    /* Compense le padding de la cellule pour que la zone cliquable la couvre bien */
    margin: -10px -14px;
    padding: 10px 14px;
}
.sort-header a:hover {
    color: var(--text);
}
.sort-header.sort-active a {
    color: var(--text);
}
.sort-arrow {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.8;
}

/* Liste des licences : largeurs stables quelle que soit la pagination.
   table-layout: fixed force le navigateur à respecter les largeurs déclarées
   (par défaut il redistribue selon le contenu, ce qui varie avec le nombre de lignes). */
.licence-list-table { table-layout: fixed; }
/* En-têtes légèrement plus petits pour laisser rentrer le libellé + flèche sur
   les colonnes étroites (Pistes, Statut). */
.licence-list-table thead th {
    font-size: 10px;
    letter-spacing: 0.02em;
}
.licence-list-table th:nth-child(1),
.licence-list-table td:nth-child(1) { width: 40px;  }   /* checkbox */
.licence-list-table th:nth-child(2),
.licence-list-table td:nth-child(2) { width: auto;  }   /* Nom (flexible) */
.licence-list-table th:nth-child(3),
.licence-list-table td:nth-child(3) { width: 44px;  }   /* Type */
.licence-list-table th:nth-child(4),
.licence-list-table td:nth-child(4) { width: 90px; text-align: left; }   /* Pistes */
.licence-list-table th:nth-child(5),
.licence-list-table td:nth-child(5) { width: 90px;  }   /* Pays */
.licence-list-table th:nth-child(6),
.licence-list-table td:nth-child(6) { width: 160px; }   /* Ville */
.licence-list-table th:nth-child(7),
.licence-list-table td:nth-child(7) { width: 90px;  }   /* Statut */
.licence-list-table th:nth-child(8),
.licence-list-table td:nth-child(8) { width: 110px; }   /* Expire le */
.licence-list-table th:nth-child(9),
.licence-list-table td:nth-child(9) { width: 180px; }   /* Actions (2 liens) */

/* Empêcher les cellules de casser la largeur avec du texte long (nom, ville) */
.licence-list-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Sauf la colonne Nom qui peut avoir un sous-titre : on laisse le contenu se placer */
.licence-list-table td:nth-child(2) { white-space: normal; }
.row-actions { white-space: nowrap; }
.row-actions-sep { color: var(--text-muted); margin: 0 4px; }

/* Colonne Actions des tableaux en mise en page automatique (tableau de bord).
   Sans largeur declaree, le navigateur repartit l'espace disponible entre
   toutes les colonnes : la colonne Actions reste large meme quand son contenu
   se reduit. La contraindre rend l'espace aux colonnes qui en ont besoin.
   Sans effet sur .licence-list-table, qui est en table-layout: fixed et
   declare ses largeurs par nth-child. */
.col-actions { width: 180px; }

/* ---------- Definition lists ---------- */
.dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 13px;
}
.dl dt { color: var(--text-muted); }
.dl dd { margin: 0; word-break: break-word; color: var(--text); }
.dl-inline { grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr; }
@media (max-width: 700px) { .dl-inline { grid-template-columns: 140px 1fr; } }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}
.btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    text-decoration: none;
    color: var(--text);
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: rgba(255,255,255,0.05); border-color: var(--primary); color: var(--text); }

/* Bouton "outline" : bordure claire, fond transparent — pour actions secondaires
   comme "Réinitialiser". Reste visible même quand tout est vide, mais discret. */
.btn-ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-ghost:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text);
}
.btn-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-block { display: block; width: 100%; padding: 12px 14px; font-size: 14px; font-weight: 600; }

/* ---------- Pills ---------- */
.pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pill-ok  { background: var(--ok-bg);  color: var(--ok); }
.pill-off { background: var(--off-bg); color: var(--off); }

/* ---------- Utilities ---------- */
.mono { font-family: "SF Mono", Menlo, Consolas, monospace; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
code {
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    color: var(--text);
    border: 1px solid var(--border);
}

/* ---------- Empty state ---------- */
.empty {
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}
.empty-page { padding: 80px 40px; }
.empty-code {
    font-size: 64px;
    font-weight: 700;
    color: var(--text-dim);
    line-height: 1;
    margin-bottom: 16px;
}

/* ---------- Todo list ---------- */
.todo { padding-left: 18px; margin: 0; color: var(--text); }
.todo li { margin-bottom: 6px; }

/* ---------- Footer ---------- */
.footer {
    padding: 20px 24px;
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    border-top: 1px solid var(--border);
    background: #0a0f1a;
}

/* ---------- Login page (aligné sur EZShow) ---------- */
.page-login {
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrap {
    width: 100%;
    max-width: 400px;
    padding: 24px;
}
.login-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 36px 32px;
    box-shadow: var(--shadow);
}
.login-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    color: var(--text);
}
.login-subtitle {
    margin: 0 0 24px;
    font-size: 13px;
    text-align: center;
    color: var(--text-muted);
}

/* ---------- Forms ---------- */
.form .field { margin-bottom: 16px; }
.form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.form input[type="text"],
.form input[type="password"],
.form input[type="email"] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
}
.form input::placeholder { color: var(--text-dim); }
.form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.2);
}
.form-actions {
    margin-top: 24px;
    display: flex;
    gap: 8px;
}

/* ================================================================
   Formulaire d'édition d'une licence
   ================================================================ */

.edit-form .panel h2 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.edit-form .field {
    margin-bottom: 14px;
}

.edit-form .field label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 5px;
}

.edit-form .field input[type="text"],
.edit-form .field input[type="email"],
.edit-form .field input[type="number"],
.edit-form .field select {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}

.edit-form .field input:focus,
.edit-form .field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15);
}

/* Champs en erreur */
.edit-form .field-error input {
    border-color: var(--danger);
    background: rgba(239, 85, 85, 0.06);
}
.edit-form .field-msg {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--danger);
}

/* Champ lecture seule (immuable après création) */
.edit-form .field-readonly .readonly-value {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    min-height: 20px;
}

/* Checkbox stylée */
.edit-form .checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
    color: var(--text) !important;
    font-weight: normal !important;
    cursor: pointer;
}
.edit-form .checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Flash messages */
.flash {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid;
    font-size: 14px;
}
.flash-ok {
    background: rgba(72, 187, 120, 0.08);
    border-color: rgba(72, 187, 120, 0.4);
    color: #7ed6a3;
}
.flash-error {
    background: rgba(239, 85, 85, 0.08);
    border-color: rgba(239, 85, 85, 0.4);
    color: #f28585;
}
.flash-error ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}
.flash-error strong {
    color: #f5a0a0;
}

/* ---------- Alerts ---------- */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
}
.alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(239, 85, 85, 0.25);
}

/* ---------- Filter bar ---------- */
.filter-bar {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.filter-row {
    display: grid;
    gap: 12px;
    align-items: end;
}
.filter-row + .filter-row {
    margin-top: 12px;
}
/* Ligne 1 : Recherche (large) + Pays + Type + Pistes */
.filter-row-primary {
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
}
/* Ligne 2 : Statut + Distributeur + Abonnement (superadmin) */
/* Statut · Distributeur · Abonnement · Coordonnées GPS.
   L'abonnement reçoit la part la plus large : ses libellés sont les plus
   longs (« À surveiller (-90 j à +30 j) »). */
.filter-row-secondary {
    grid-template-columns: 1fr 1.5fr 2fr 1.2fr;
}
/* Sans distributeur (admin non-superadmin) : une colonne de moins */
.filter-row-secondary.no-distributor {
    grid-template-columns: 1fr 2fr 1.2fr;
}
@media (max-width: 1100px) {
    .filter-row-primary { grid-template-columns: repeat(3, 1fr); }
    .filter-row-secondary,
    .filter-row-secondary.no-distributor { grid-template-columns: repeat(2, 1fr); }
    .filter-field-grow { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .filter-row-primary,
    .filter-row-secondary,
    .filter-row-secondary.no-distributor { grid-template-columns: repeat(2, 1fr); }
    .filter-field-grow { grid-column: 1 / -1; }
    .filter-field-lanes { grid-column: 1 / -1; }
}
.filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.filter-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.filter-field input[type="text"],
.filter-field input[type="number"],
.filter-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    min-width: 0;
}
.filter-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='none' stroke='%238a94ab' stroke-width='1.5' d='M1 1l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}
.filter-field input::placeholder { color: var(--text-dim); }
.filter-field input:focus,
.filter-field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.2);
}
.filter-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.filter-range input {
    flex: 1;
    min-width: 0;
}
.filter-range-sep {
    color: var(--text-dim);
    font-size: 13px;
    flex-shrink: 0;
}
.filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    align-items: center;
    flex-wrap: wrap;
}

/* Toggle "portée de la recherche" — deux boutons radio stylés comme des .btn */
.filter-scope {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: auto; /* pousse Filtrer / Réinitialiser à droite */
}
.filter-scope-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-right: 8px;
}
.filter-scope .scope-option {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.filter-scope .scope-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.filter-scope .scope-option span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
    background: var(--bg-elevated);
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.filter-scope .scope-option:hover span {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}
.filter-scope .scope-option input[type="radio"]:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.filter-scope .scope-option input[type="radio"]:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.3);
}

/* Toggle "Auto" — même style qu'un .btn, coloré comme "Filtrer" quand actif */
.auto-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.auto-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.auto-toggle span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
    background: var(--bg-elevated);
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.auto-toggle:hover span {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}
.auto-toggle input[type="checkbox"]:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.auto-toggle input[type="checkbox"]:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.3);
}

/* Colonne numérique alignée à droite */
.col-num { text-align: right; }
.table thead th.col-num { text-align: right; }

/* Colonne pays : drapeau + code */
.col-country { white-space: nowrap; }
.flag {
    display: inline-block;
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Petit cadenas dans les labels quand un filtre est verrouillé */
.lock-icon {
    font-size: 10px;
    opacity: 0.6;
    margin-left: 2px;
    cursor: help;
}

/* Select désactivé */
.filter-field select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Colonne "Expire le" — mise en évidence des dates critiques */
.col-expire { white-space: nowrap; }
.expire-past  { color: var(--danger); font-weight: 600; }
.expire-soon  { color: var(--warn);   font-weight: 600; }

/* ================================================================
   Cadre Abonnements (formulaire d'édition licence)
   ================================================================ */

.sub-panel .sub-tools {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 16px;
}
.sub-tools-row {
    display: flex;
    align-items: end;
    gap: 16px;
    flex-wrap: wrap;
}
.sub-tools-row + .sub-tools-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.sub-tools-actions {
    gap: 8px;
}
.field-inline {
    margin-bottom: 0 !important;
    flex: 1 1 auto;
    min-width: 180px;
}
.sub-absolute-label {
    margin-bottom: 6px !important;
}
.btn-sm {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

/* Les 4 dates alignées horizontalement */
.sub-dates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 900px) {
    .sub-dates { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .sub-dates { grid-template-columns: 1fr; }
}

/* Style pour date pickers dans edit-form */
.edit-form .field input[type="date"] {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    color-scheme: dark; /* pour un calendrier natif sombre */
}

/* ================================================================
   Pagination (bas du tableau des licences)
   ================================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}

.pagination-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pg-btn {
    display: inline-block;
    min-width: 32px;
    padding: 6px 12px;
    text-align: center;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.2;
    transition: background 0.12s, border-color 0.12s;
    box-sizing: border-box;
}
/* Boutons numérotés et ellipses : largeur fixe pour que le n° de chiffres du
   texte (1 vs 13) n'influe pas sur l'alignement des autres boutons. */
.pg-btn.pg-num {
    width: 44px;
    min-width: 44px;
    padding-left: 4px;
    padding-right: 4px;
}
.pg-btn:hover:not(.pg-disabled):not(.pg-current) {
    background: rgba(255,255,255,0.05);
    border-color: var(--primary);
    color: var(--text);
}
.pg-current {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    cursor: default;
}
.pg-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Ellipse : héritée de .pg-btn.pg-num pour la largeur, on retire juste la bordure */
.pg-ellipsis {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    user-select: none;
    cursor: default;
}
.pg-ellipsis:hover {
    background: transparent !important;
    border-color: transparent !important;
}

.pagination-perpage {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}
.pagination-perpage select {
    padding: 6px 8px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

/* ================================================================
   Loader AJAX sur la liste
   ================================================================ */
#licence-list.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* ================================================================
   Sélecteur "Par page" inline dans la barre d'actions filtre
   ================================================================ */
.perpage-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}
.perpage-inline select {
    padding: 6px 8px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

/* Espacement entre la barre de pagination et le tableau */
.pagination + .table-wrap {
    margin-top: 12px;
}

/* Groupe des selects (tri + direction + quantité) alignés à droite de la barre pagination */
.pg-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Selects dans la barre pagination — même style pour tri, direction, quantité */
.pg-perpage-select,
.pg-sort-select,
.pg-dir-select {
    padding: 6px 8px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

/* ================================================================
   Sélection multi + zone Actions (modification en masse)
   ================================================================ */
.bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 0;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}
.bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bulk-count {
    margin-left: 6px;
}
.bulk-select {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}
.bulk-link {
    color: var(--primary);
    text-decoration: none;
}
.bulk-link:hover { text-decoration: underline; }
.bulk-sep { color: var(--muted); }

/* Colonne case à cocher */
.col-check {
    width: 32px;
    text-align: center;
    padding-left: 8px;
    padding-right: 4px;
}
.col-check input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

/* Ligne surlignée quand cochée */
.table-selectable tbody tr.is-selected {
    background: rgba(47, 111, 235, 0.08);
}

/* ================================================================
   Écran Options techniques
   ================================================================ */

.opt-preset-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 20px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.opt-preset-bar label {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}
.opt-preset-bar select {
    padding: 6px 10px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    min-width: 200px;
}

/* Groupes visuels d'options */
.opt-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Ligne de 4 sous-options réparties en colonnes égales */
.opt-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 24px;
}
/* Ligne "titre" : occupe naturellement la 1re colonne de sa grille */
.opt-row-title {
    /* La checkbox occupe 1/4 de la largeur, alignée avec les sous-options */
}

/* Séparateur fin entre 2 groupes */
.opt-sep {
    border-top: 0.5px solid var(--border, rgba(255,255,255,0.1));
    margin: 4px 0;
}

/* Case à cocher */
.opt-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
}
.opt-item:hover {
    background: rgba(255,255,255,0.03);
}
.opt-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Indentation des 1res sous-options pour marquer la subordination au titre */
.opt-item-indented {
    padding-left: 26px;
}

/* Responsive : sur écran plus étroit, on passe à 2 colonnes puis 1 */
@media (max-width: 900px) {
    .opt-row { grid-template-columns: repeat(2, 1fr); }
    .opt-item-indented { padding-left: 20px; }
}
@media (max-width: 500px) {
    .opt-row { grid-template-columns: 1fr; }
    .opt-item-indented { padding-left: 20px; }
}

/* ================================================================
   Notifications toast (utilisées pour les actions ajax : MAJ direct, etc.)
   ================================================================ */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    color: #fff;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
    max-width: 400px;
}
.toast-ok { background: #1f8f4a; }
.toast-error { background: #b23a3a; }
.toast-fade { opacity: 0; }

/* ================================================================
   Formulaire d'auto-activation d'une licence
   ================================================================ */
.form-activation .activation-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.form-activation .field {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}
.form-activation .field-qty {
    min-width: 70px;
    max-width: 90px;
}
.form-activation .field-qty input {
    width: 100%;
}
.form-activation .field-grow {
    flex: 1;
    min-width: 240px;
}
.form-activation .field-check {
    flex-direction: row;
    align-items: center;
    min-width: 0;
}
.form-activation .field-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}
.form-activation .field-check input[type="checkbox"] {
    margin: 0;
}
.form-activation .field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}
.form-activation .field input,
.form-activation .field select {
    padding: 8px 10px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color-scheme: dark; /* rend l'icône du date picker et son popup visibles sur fond sombre */
}
.form-activation .field input:focus,
.form-activation .field select:focus {
    outline: none;
    border-color: var(--primary);
}
.form-activation .field input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--bg-muted, rgba(255,255,255,0.02));
}
.form-activation .actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* ================================================================
   Historique des activations : badges et compteurs
   ================================================================ */
.count-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--border-strong);
    color: var(--text-muted);
    border-radius: 10px;
    font-size: 12px;
    font-weight: normal;
    margin-left: 6px;
    vertical-align: middle;
}
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-ok  { background: rgba(31,143,74,0.2); color: #4bc47a; }
.badge-off { background: rgba(178,58,58,0.2); color: #e07070; }

/* ================================================================
   Fiche licence : titre + boutons d'action alignés à gauche
   ================================================================ */
.title-with-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}
.title-with-actions h1 {
    margin: 0;
    /* Le titre garde sa taille mais le groupe d'actions vient à sa droite */
    flex: 0 0 auto;
}
.title-with-actions .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* Boutons d'action placés sous le sous-titre (GUID) de la fiche licence.
   Deux groupes : gauche (édition + fichiers) et droite (navigation abo/activation/historique). */
.actions-below {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}
.actions-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ================================================================
   Bloc géocodage (formulaire édition licence)
   ================================================================ */
.geo-block {
    margin-top: 8px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.geo-fields {
    display: flex;
    /* Aucun espacement vertical : les lignes sont déjà séparées par la marge
       basse des champs. En ajouter éloignerait les boutons de la saisie sans
       raison. L'espacement horizontal, lui, reste nécessaire. */
    gap: 0 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
/* Champs de saisie : largeur souple, mais qui peut se réduire pour laisser
   la place au bouton Coller sur la même ligne. */
.geo-fields .field {
    flex: 1 1 140px;
    min-width: 120px;
}

/* Les conteneurs de boutons portent aussi la classe .field, donc ils
   héritaient du min-width prévu pour les champs de saisie : le bouton
   occupait la largeur d'un input et poussait tout le reste à la ligne.
   Ici, chaque bouton prend exactement sa largeur de contenu. */
.geo-fields .field-actions {
    align-self: flex-end;
    flex: 0 0 auto;
    min-width: 0;

    /* Les boutons sont des inline-block posés sur une ligne de texte. Or
       « Rechercher » est un <button> et « Voir sur carte » un <a> : leurs
       métriques de ligne diffèrent de quelques pixels, ce qui décalait l'un
       par rapport à l'autre. Passer le conteneur en colonne flex supprime la
       ligne de texte, donc la différence. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Boutons placés seuls sur leur ligne : ils n'ont plus de champ de saisie
   au-dessus duquel s'aligner, donc plus de label vide. Sans marge basse non
   plus, puisque rien ne les suit dans le conteneur. */
.geo-fields .field-actions-bare {
    margin-bottom: 0;
}

/* Même hauteur pour les deux, quel que soit l'élément sous-jacent. */
.geo-fields .field-actions .btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Rupture de ligne dans .geo-fields, qui est un conteneur flex à retour
   automatique. Un élément de largeur pleine et de hauteur nulle occupe toute
   la ligne restante et repousse ce qui suit à la ligne suivante — sans
   ajouter d'espace visible.

   Objectif : garder Longitude, Latitude et le bouton Coller ensemble, et
   renvoyer Rechercher et Voir sur carte en dessous. Sans cela, la répartition
   dépend de la largeur du panneau et le bouton Coller se retrouve isolé avec
   les autres actions. */
.geo-row-break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
}
.geo-status {
    margin: 10px 0 0 0;
    min-height: 1.2em;
}
.geo-ok    { color: #4bc47a; }
.geo-error { color: #e07070; }
.geo-candidates {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.geo-candidate {
    text-align: left;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.geo-candidate:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--primary);
}
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* Petit indicateur globe dans la liste des licences pour signaler les coords GPS */
.geo-mini {
    font-size: 11px;
    text-decoration: none;
    margin-left: 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.geo-mini:hover {
    opacity: 1;
}

/* Empilement vertical de plusieurs .panel dans une colonne de .grid-2.
   La stack prend toute la hauteur de la ligne du grid (align-self: stretch
   par défaut sur les items grid) et le dernier panneau s'étire pour combler
   l'espace, alignant le bas de la colonne gauche avec le bas du panneau droit. */
.stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}
.stack > .panel:last-child {
    flex: 1;
}

/* Boîte de mise en valeur de la clé d'auto-activation (page de récap après création) */
.key-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    margin-top: 12px;
}
.key-value {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--primary);
    word-break: break-all;
}

/* ---------- Aide sous un champ de formulaire ---------- */
/* Texte explicatif discret, placé sous l'input qu'il commente. */
.edit-form .hint {
    margin: 5px 0 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Champ verrouillé (GUID après création) : visuellement inerte mais lisible. */
.edit-form .field input:disabled {
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed;
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Textarea : même habillage que les inputs du formulaire. */
.edit-form .field textarea {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}
.edit-form .field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15);
}

/* Cadenas d'un champ non modifiable. */
.edit-form .lock-icon {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 2px;
}

/* ---------- Filtre inline dans un panel (journaux d'une licence) ---------- */
/* .filter-bar porte un fond et une bordure, pensés pour un filtre en tête de
   page. Placé DANS un panel, cela empilerait deux cadres : on neutralise
   l'habillage et on ne garde que l'espacement. */
.filter-bar-inline {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 16px;
}

/* Une seule colonne de saisie, suivie des boutons. */
.filter-row-logs {
    grid-template-columns: minmax(0, 320px) auto;
    justify-content: start;
}
@media (max-width: 700px) {
    .filter-row-logs { grid-template-columns: 1fr; }
}

/* ---------- Filtres de la page Logs Events ---------- */
/* Nom de compétition extensible, puis les sélecteurs et les boutons.
   Le champ nom porte filter-field-grow, qui passe en pleine largeur sur
   mobile via la règle existante. */
.filter-row-events {
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px) minmax(0, 200px) auto;
}
@media (max-width: 1000px) {
    .filter-row-events { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .filter-row-events { grid-template-columns: 1fr; }
}

/* ---------- Licence masquée à l'extérieur (fVisible = 0) ---------- */
/* Deux signaux complémentaires : la ligne atténuée donne la lecture
   d'ensemble — on repère les masquées en balayant la liste — et la petite
   icône donne la lecture précise, avec son infobulle.

   L'opacité revient à 1 au survol : une ligne durablement pâle devient
   pénible à lire dès qu'on s'y intéresse vraiment. */
.table tbody tr.is-hidden td {
    opacity: 0.55;
    transition: opacity 0.15s;
}
.table tbody tr.is-hidden:hover td {
    opacity: 1;
}

/* Une ligne sélectionnée reste pleinement lisible : la sélection est une
   action en cours, elle prime sur l'atténuation. */
.table tbody tr.is-hidden.is-selected td {
    opacity: 1;
}

/* Icône près du nom. Reprend le gabarit de .geo-mini, déjà présent dans la
   liste des licences, pour rester cohérent. */
.hidden-mini {
    font-size: 11px;
    margin-left: 4px;
    opacity: 0.6;
    cursor: help;
    transition: opacity 0.15s;
}
.hidden-mini:hover {
    opacity: 1;
}

/* ---------- Champs du cadre « Saisie des joueurs » (fiche licence) -------- */
/* Le cadre occupe toute la largeur de la page : sans borne, trois champs en
   1fr chacun s'étireraient démesurément pour saisir deux chiffres. On les
   cale à une largeur raisonnable et on les groupe à gauche. */
.ezp-fields {
    grid-template-columns: repeat(3, minmax(0, 180px));
    justify-content: start;
    gap: 16px;
}
@media (max-width: 640px) {
    .ezp-fields { grid-template-columns: 1fr; }
}

/* La fiche n'est pas un .edit-form : ses rares champs de saisie n'héritent
   donc d'aucun style de formulaire. On reprend ici le même habillage, pour
   que ce cadre ne détonne pas au milieu d'un écran de consultation. */
.ezp-fields .field label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 5px;
}
.ezp-fields .field input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
}
.ezp-fields .field input[type="number"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15);
}

/* ============================================================================
   Liste des licences sur petit écran
   ============================================================================
   Le tableau est en table-layout: fixed avec huit colonnes à largeur fixe,
   soit 800 px au minimum. Sur un mobile de 390 px, cela impose un défilement
   horizontal permanent : on ne voit que la case à cocher et le début du nom.

   Deux paliers :

     1024 px  Type et Pistes sont masqués. Ils tiennent en un chiffre ou deux
              lettres, leur absence se compense d'un coup d'œil sur la fiche,
              et cela rend 134 px aux colonnes utiles.

      760 px  Le tableau bascule en cartes empilées. Chaque ligne devient un
              bloc autonome : le nom en titre, les autres champs en dessous
              avec leur libellé, les actions en pied. Rien n'est masqué —
              c'est la mise en forme qui change, pas le contenu.

   Le tri par en-tête disparaît en mode carte, faute de support visuel. Les
   filtres, eux, restent disponibles et couvrent le besoin.
   ============================================================================ */

@media (max-width: 1024px) {
    /* Type (3) et Pistes (4) : les moins utiles à la lecture rapide. */
    .licence-list-table th:nth-child(3),
    .licence-list-table td:nth-child(3),
    .licence-list-table th:nth-child(4),
    .licence-list-table td:nth-child(4) {
        display: none;
    }
    /* Actions resserrées : les libellés tiennent encore. */
    .licence-list-table th:nth-child(9),
    .licence-list-table td:nth-child(9) { width: 150px; }
}

@media (max-width: 760px) {
    /* Le conteneur n'a plus à défiler : plus rien ne dépasse. */
    .licence-list-wrap {
        overflow-x: visible;
        background: none;
        border: none;
    }

    /* On abandonne la mise en page tabulaire. Les rôles ARIA implicites sont
       neutralisés en même temps que l'affichage, d'où les display: block. */
    .licence-list-table,
    .licence-list-table thead,
    .licence-list-table tbody,
    .licence-list-table tr,
    .licence-list-table td {
        display: block;
        width: auto;
    }
    .licence-list-table { table-layout: auto; }

    /* L'en-tête n'a plus de sens : chaque valeur porte son propre libellé. */
    .licence-list-table thead { display: none; }

    /* Chaque ligne devient une carte. */
    .licence-list-table tbody tr {
        position: relative;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px 12px 40px;   /* place à gauche pour la case */
        margin-bottom: 10px;
    }
    .licence-list-table tbody tr:last-child { margin-bottom: 0; }
    .licence-list-table tbody tr:hover { background: var(--bg-elevated); }

    /* La case à cocher se cale en haut à gauche, hors du flux. */
    .licence-list-table td.col-check {
        position: absolute;
        top: 12px;
        left: 12px;
        width: auto;
        padding: 0;
        border: none;
    }

    /* Toutes les cellules : plus de bordure de tableau, un interligne serré. */
    .licence-list-table td {
        border: none;
        padding: 2px 0;
        white-space: normal;
    }

    /* Le nom fait office de titre. */
    .licence-list-table td.cell-name {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 6px;
        padding-top: 0;
    }
    .licence-list-table td.cell-name a { text-decoration: none; }

    /* Les autres valeurs sont précédées de leur libellé, repris de
       l'attribut data-label posé sur la cellule. */
    .licence-list-table td[data-label]::before {
        content: attr(data-label) " : ";
        color: var(--text-muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-right: 4px;
    }

    /* Une cellule sans valeur n'a pas de data-label (voir $cellLabel dans la
       vue) : elle n'a donc rien à montrer en mode carte et disparaît. Les
       cellules Nom, Statut, Expire le et Actions n'en portent pas non plus
       mais sont ciblées par leur propre classe, d'où les exceptions. */
    .licence-list-table td:not([data-label]):not(.cell-name):not(.cell-actions):not(.col-check):not(.col-expire) {
        display: none;
    }

    /* Les actions en pied de carte, séparées par un filet. */
    .licence-list-table td.cell-actions {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    /* Ligne masquée : l'atténuation porte sur la carte entière. */
    .licence-list-table tbody tr.is-hidden td { opacity: 1; }
    .licence-list-table tbody tr.is-hidden {
        opacity: 0.55;
        transition: opacity 0.15s;
    }
    .licence-list-table tbody tr.is-hidden:hover { opacity: 1; }

    /* Ligne sélectionnée : le liseré est plus lisible qu'un fond sur une carte. */
    .licence-list-table tbody tr.is-selected {
        border-color: var(--primary);
        opacity: 1;
    }
}

/* Barre d'actions groupées et pagination : empilées plutôt que serrées. */
@media (max-width: 760px) {
    .bulk-bar,
    .pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .bulk-actions,
    .pagination-nav {
        flex-wrap: wrap;
    }
}

/* ---------- Sélecteur de couleur (contour du logo) ---------- */
/* Un input[type="color"] non stylé s'affiche à la taille native du système,
   souvent minuscule et sans rapport avec les autres champs. On lui donne la
   même hauteur et le même habillage que les inputs texte du formulaire. */
.edit-form .field input[type="color"] {
    width: 100%;
    height: 38px;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.edit-form .field input[type="color"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15);
}
/* Le rectangle de couleur occupe tout l'espace intérieur, sans la bordure
   grise que les navigateurs ajoutent par défaut. */
.edit-form .field input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.edit-form .field input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}
.edit-form .field input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 2px;
}

/* ============================================================================
   Contour du logo
   ============================================================================
   Le rendu est défini ICI et nulle part ailleurs. La fiche le pose en PHP,
   le formulaire le met à jour en JavaScript : les deux se contentent de
   régler l'attribut data-border et la variable --logo-border-color. Sans
   cela, la formule serait écrite deux fois, dans deux langages, et finirait
   par diverger.

   drop-shadow épouse la transparence de l'image, contrairement à box-shadow
   qui suit le rectangle de l'élément : c'est ce qui permet à un halo ou à un
   trait de contour de suivre réellement la forme d'un logo en PNG.
   ============================================================================ */

.logo-bordered {
    --logo-border-color: #FFFFFF;
}

/* 1 — Halo : lueur diffuse, deux passes pour une retombée progressive. */
.logo-bordered[data-border="1"] {
    filter: drop-shadow(0 0 2px var(--logo-border-color))
            drop-shadow(0 0 5px var(--logo-border-color));
}

/* 2 — Pastille : fond plein derrière le logo. L'espacement évite que le
   dessin touche le bord de la pastille. */
.logo-bordered[data-border="2"] {
    background: var(--logo-border-color) !important;
    padding: 6px !important;
    border-radius: 6px;
}

/* 3 — Contour : trait net épousant la forme. Quatre décalages d'un pixel,
   sans flou, forment une bordure continue. */
.logo-bordered[data-border="3"] {
    filter: drop-shadow( 1px  0    0 var(--logo-border-color))
            drop-shadow(-1px  0    0 var(--logo-border-color))
            drop-shadow( 0    1px  0 var(--logo-border-color))
            drop-shadow( 0   -1px  0 var(--logo-border-color));
}