* { box-sizing: border-box; }
/* L'attribut hidden l'emporte toujours, meme sur un composant qui fixe son propre display. */
[hidden] { display: none !important; }
html, body { height: 100%; }
/* Gouttiere de l'ascenseur toujours reservee : la largeur utile ne varie plus selon la
   longueur de la page (filtre "Toutes les equipes" vs une seule equipe, par exemple). */
html { overflow-y: scroll; }
body {
    margin: 0;
    background: var(--md-surface-dim);
    color: var(--md-on-surface);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--md-on-surface);
}
h1 { font-size: 1.6rem; margin: 4px 0 20px; }
h2 { font-size: 1.15rem; }

a { color: var(--md-primary); }

/* ==================== Barre de navigation (top app bar) ==================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 24px;
    background: var(--inv-surface);
    box-shadow: var(--md-elevation-2);
}
.site-brand { display: flex; align-items: center; border-radius: var(--md-radius-sm); }
.site-brand:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }
.site-logo { height: 44px; width: 44px; display: block; }

.site-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}
.site-nav-primary,
.site-nav-secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    color: var(--inv-on-surface);
    text-decoration: none;
    background: none;
    border: none;
    /* Rectangle aux coins arrondis plutot qu'une pastille : s'accorde au logo carre du club. */
    border-radius: var(--md-radius-sm);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: background-color var(--md-motion), color var(--md-motion);
}
.nav-link:hover { background-color: var(--inv-hover); color: var(--md-accent); }
.nav-link:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 1px; }

/* Bouton "Connexion" mis en avant, style Material "filled button" */
.nav-link--filled {
    background: var(--md-primary);
    color: var(--md-on-primary);
}
.nav-link--filled:hover { background: var(--md-primary-hover); color: var(--md-on-primary); }

.nav-logout-form { display: inline; }

/* Menu deroulant "Administration" (Material dropdown menu) */
.nav-menu { position: relative; }
.nav-menu > summary.nav-menu-summary {
    list-style: none;
}
.nav-menu > summary.nav-menu-summary::-webkit-details-marker { display: none; }
.nav-menu-caret {
    width: 16px;
    height: 16px;
    transition: transform var(--md-motion);
}
.nav-menu[open] .nav-menu-caret { transform: rotate(180deg); }
.nav-menu[open] > summary.nav-menu-summary {
    background-color: var(--inv-hover);
    color: var(--md-accent);
}

.nav-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-3);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: md-menu-in var(--md-motion) ease-out;
}
@keyframes md-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--md-radius-sm);
    color: var(--md-on-surface);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color var(--md-motion);
}
.nav-menu-item:hover { background-color: var(--md-surface-container-high); }
/* Icones du menu : traits fins, couleur du texte, legerement attenuees hors survol. */
.nav-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.85;
}
.nav-link:hover .nav-icon, .nav-link.is-active .nav-icon, .nav-menu-item:hover .nav-icon { opacity: 1; }
.nav-menu-item:has(.nav-icon) {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-menu-summary .nav-icon { margin-right: 2px; }
.nav-menu-item--danger { color: var(--md-error); font-weight: 600; }
.nav-menu-item--danger:hover { background-color: var(--md-error-container); }
.nav-menu-separator {
    border: none;
    border-top: 1px solid var(--md-outline-variant);
    margin: 6px 2px;
}
.nav-menu-heading {
    margin: 6px 16px 2px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
}

/* Bascule mobile (hamburger) : purement CSS via une case a cocher masquee */
.nav-toggle { display: none; }
.nav-toggle-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border-radius: var(--md-radius-sm);
    cursor: pointer;
    margin-left: auto;
}
.nav-toggle-btn span {
    display: block;
    height: 2px;
    background: var(--inv-on-surface);
    border-radius: 2px;
}
.nav-toggle-btn:hover { background-color: var(--inv-hover); }

@media (max-width: 860px) {
    .nav-toggle-btn { display: flex; }
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--inv-surface);
        box-shadow: var(--md-elevation-3);
        /* Pas de marge verticale une fois replie : elle laisserait deborder le premier lien. */
        padding: 0 16px;
        gap: 4px;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--md-motion), padding var(--md-motion);
    }
    .nav-toggle:checked ~ .site-nav { max-height: 80vh; overflow-y: auto; padding: 8px 16px 16px; }
    .site-nav-primary, .site-nav-secondary { flex-direction: column; align-items: stretch; }
    .nav-link { justify-content: flex-start; }
    .nav-menu-panel { position: static; box-shadow: none; margin-top: 4px; background: var(--inv-surface-high); }
    .nav-menu-item { color: var(--inv-on-surface); }
    .nav-menu-item:hover { background-color: var(--inv-hover); }
    /* Intitules de groupe lisibles sur le panneau sombre. */
    .nav-menu-heading { color: var(--inv-placeholder); }
}

/* ==================== Contenu ==================== */
main {
    flex: 1;
    padding: 28px 5% calc(var(--footer-height) + 24px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nowrap { white-space: nowrap; }

/* Filtres (select) au-dessus des tableaux */
.filters {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 20px;
}
.filters label { margin-left: 10px; }
.filters label:first-child { margin-left: 0; }
.filters select { min-width: 240px; }

table {
    width: auto;
    border-collapse: collapse;
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    overflow: hidden;
    box-shadow: var(--md-elevation-table);
}
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--md-outline-variant); }
thead th {
    background: var(--md-surface-container);
    color: var(--md-on-surface-variant);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
tbody tr { transition: background-color var(--md-motion); }
tbody tr:hover { background-color: var(--md-surface-container); }

#calendar-table th:first-child, #calendar-table td:first-child { text-align: center; }

/* Largeur et marges fixes : le tableau ne s'adapte plus au contenu de la pastille choisie. */
#calendar-table { width: 100%; max-width: 1100px; }
@media (min-width: 701px) {
    #calendar-table { table-layout: fixed; }
    #calendar-table td { white-space: normal; overflow-wrap: anywhere; }
    #calendar-table th:nth-child(1) { width: 8%; }
    #calendar-table th:nth-child(2) { width: 12%; }
    #calendar-table th:nth-child(3) { width: 10%; }
    #calendar-table th:nth-child(4) { width: 11%; }
    #calendar-table th:nth-child(5) { width: 19%; }
    #calendar-table th:nth-child(6) { width: 28%; }
    #calendar-table th:nth-child(7) { width: 12%; }
}

/* ---- Badge : etiquette d'etat non interactive (remplace tag, status-chip, count-pill, team-chip, badge-home/away) ----
   Variantes d'etat : --success --warning --danger --info --neutral (defaut) ; --team (couleur d'equipe) ; taille --lg. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--md-radius-full);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
}
.badge--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.badge--info { background: var(--status-info-bg); color: var(--status-info-fg); }
.badge--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge--team { background: var(--team); color: var(--team-on); }
.badge--lg { padding: 3px 12px; font-size: 0.85rem; }
.badge-group { display: inline-flex; flex-wrap: wrap; gap: 4px; }

footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background: var(--inv-surface);
    color: var(--inv-on-surface);
    font-size: 0.82rem;
    text-align: center;
}
footer > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==================== Formulaires ==================== */
label { font-weight: 500; }

.form-table { width: auto; }
.form-table td { border-bottom: none; padding: 8px 12px; }
.form-table td:first-child { text-align: left; font-weight: 600; }
.form-actions { margin-top: 16px; }

.form-card {
    width: 100%;
    max-width: 520px;
    margin: 24px 0;
    background: var(--inv-surface-high);
    color: var(--inv-on-surface);
    border-radius: var(--md-radius-lg);
    padding: 28px;
    box-shadow: var(--md-elevation-2);
}
.form-card h2,
.form-card h3 {
    margin-top: 0;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--md-accent);
    color: var(--inv-strong);
}
.form-card .form-group { margin-bottom: 18px; }
.form-card .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--inv-on-surface);
}
.form-card .form-group input,
.form-card .form-group select {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--inv-input-border);
    background: var(--inv-input-bg);
    color: var(--inv-on-surface);
    font-size: 0.95rem;
    transition: border-color var(--md-motion), box-shadow var(--md-motion);
}
.form-card .form-group select { cursor: pointer; }
.form-card .form-group input::placeholder { color: var(--inv-placeholder); }
.form-card .form-group input:focus,
.form-card .form-group select:focus {
    outline: none;
    border-color: var(--md-accent);
    box-shadow: 0 0 0 3px var(--md-focus-ring);
}

/* Controles de formulaire communs (tableaux, filtres) */
select,
table input[type="text"],
table input[type="number"],
table input[type="date"] {
    padding: 9px 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-radius-sm);
    background: var(--md-surface);
    color: var(--md-on-surface);
    font: inherit;
    font-size: 0.92rem;
    transition: border-color var(--md-motion), box-shadow var(--md-motion);
}
select { padding-right: 32px; cursor: pointer; }
select:focus,
table input[type="text"]:focus,
table input[type="number"]:focus,
table input[type="date"]:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px var(--md-primary-container);
}
table input[type="text"]:read-only,
table input[type="number"]:read-only,
table select:disabled {
    background: var(--md-surface-container);
    color: var(--md-on-surface-variant);
    cursor: default;
    opacity: 1;
}
table input[type="number"] { width: 9ch; }

/* ==================== Boutons (Material "filled button") ==================== */
button {
    padding: 10px 22px;
    border: none;
    border-radius: var(--md-radius-full);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--md-on-primary);
    background: var(--md-primary);
    box-shadow: var(--md-elevation-1);
    transition: background-color var(--md-motion), box-shadow var(--md-motion), transform var(--md-motion);
}
button:hover { background: var(--md-primary-hover); box-shadow: var(--md-elevation-2); }
button:active { transform: scale(0.98); box-shadow: var(--md-elevation-1); }
button:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
button:disabled:hover { background: var(--md-primary); box-shadow: none; }

.btn-link {
    display: inline-block;
    padding: 10px 22px;
    border-radius: var(--md-radius-full);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--md-on-primary);
    text-decoration: none;
    background: var(--md-primary);
    box-shadow: var(--md-elevation-1);
    transition: background-color var(--md-motion), box-shadow var(--md-motion), transform var(--md-motion);
}
.btn-link:hover { background: var(--md-primary-hover); box-shadow: var(--md-elevation-2); }
.btn-link:active { transform: scale(0.98); }

.player-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.player-actions form { display: inline; margin: 0; }

/* Icones du sprite SVG : taille par defaut, couleur du texte. */
.icon { width: 18px; height: 18px; flex: none; }

/* Boutons icone-seule (Material "icon button") */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    flex: none;
    border-radius: var(--md-radius-full);
    background: var(--md-surface-container-high);
    color: var(--md-on-surface-variant);
    box-shadow: none;
}
.icon-btn:hover { background: var(--md-outline-variant); color: var(--md-on-surface); box-shadow: none; }
.icon-btn .icon { width: 18px; height: 18px; }
.icon-btn.btn-danger { background: var(--md-error-container); color: var(--md-error); }
.icon-btn.btn-danger:hover { background: var(--md-error); color: var(--md-on-error); }

th[data-sort-type] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th[data-sort-type]:hover { color: var(--md-primary); }
.sort-indicator { font-size: 0.75em; }

/* ==================== Page de connexion / changement de mot de passe ==================== */
.login-card { max-width: 420px; margin-top: 8vh; }
.login-card h1 { margin-top: 0; color: var(--inv-on-surface); }
.login-card form { text-align: left; }
.login-card button { width: 100%; margin-top: 8px; }
.login-message {
    margin-top: 16px;
    margin-bottom: 0;
    color: var(--inv-warn);
    font-size: 0.9rem;
}

/* ==================== Mosaiques et formulaires en grille ==================== */
.form-card--wide { max-width: 960px; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 20px;
    align-items: end;
}
.form-grid .form-actions { margin: 0 0 18px; }

.pool-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    align-items: start;
}
.pool-card h2 { margin: 0 0 10px; }
.pool-card table { width: 100%; }

.import-grid {
    width: 100%;
    max-width: 960px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
}
.import-card {
    display: flex;
    flex-direction: column;
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-1);
    padding: 20px 24px;
}
.import-card h2 { margin-top: 0; }
.import-card p { color: var(--md-on-surface-variant); font-size: 0.92rem; }
.import-form { display: flex; flex-direction: column; flex: 1; }
.import-form .form-actions { margin-top: auto; padding-top: 16px; }
.import-form .form-table { width: 100%; }

/* ==================== Pastilles de journees ==================== */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border: 1.5px solid var(--md-outline);
    border-radius: var(--md-radius-full);
    background: var(--md-surface);
    color: var(--md-on-surface);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background-color var(--md-motion), border-color var(--md-motion), color var(--md-motion);
}
.chip:hover { background: var(--md-primary-container); border-color: var(--md-primary); box-shadow: none; color: var(--md-on-primary-container); }
.chip.is-active,
.chip.is-active:hover {
    background: var(--md-primary);
    border-color: var(--md-primary);
    color: var(--md-on-primary);
}

/* ==================== Zones de texte ==================== */
textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-radius-sm);
    background: var(--md-surface);
    color: var(--md-on-surface);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
    resize: vertical;
}
textarea:focus { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 3px var(--md-primary-container); }
textarea:read-only { background: var(--md-surface-container); color: var(--md-on-surface-variant); cursor: default; }
.form-card textarea {
    min-height: 160px;
    background: var(--inv-input-bg);
    border-color: var(--inv-input-border);
    color: var(--inv-on-surface);
}
.form-card textarea:focus { border-color: var(--md-accent); box-shadow: 0 0 0 3px var(--md-focus-ring); }
.consignes-table { width: 100%; max-width: 960px; }
.consignes-table td:nth-child(2) { width: 100%; }
.consignes-table textarea { min-height: 110px; }
.filters .chip-group { margin-bottom: 0; justify-content: flex-start; }

/* ==================== Etiquettes et alertes ==================== */

.alert {
    width: 100%;
    max-width: 960px;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-1);
}
.alert p { margin: 4px 0; }
.alert--error { background: var(--md-error-container); color: var(--md-error); border-left: 5px solid var(--md-error); }
.alert--info { background: var(--inv-overlay); border-left: 5px solid var(--md-accent); }

/* ==================== Couleurs d'equipe ==================== */
/* Une couleur franche par numero d'equipe, texte blanc lisible sur chacune (contraste >= 4.5). */
.page-subtitle { margin: -12px 0 20px; color: var(--md-on-surface-variant); text-align: center; }

/* ==================== Conditions de rencontre ==================== */
.form-card .form-intro,
.form-card .form-hint { color: var(--inv-placeholder); font-size: 0.9rem; }
.form-card .form-hint { font-style: italic; }
.form-card .form-actions { display: flex; gap: 10px; align-items: center; }
.btn-link--secondary { background: transparent; color: var(--inv-on-surface); border: 1px solid var(--inv-input-border); box-shadow: none; }
.btn-link--secondary:hover { background: var(--inv-hover); box-shadow: none; }
.btn-danger-filled { margin-top: 12px; background: var(--md-error); color: var(--md-on-error); }
.btn-danger-filled:hover { background: var(--md-error-hover); }
a.icon-btn { text-decoration: none; }
.venue-modified { border-left: 4px solid var(--md-warning); padding-left: 8px; }
.venue-remark { color: var(--md-warning); font-weight: 600; }

/* ==================== Utilitaires ==================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--md-on-surface-variant); }
.eyebrow {
    margin: 0 0 2px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-primary);
}
.hint { color: var(--md-on-surface-variant); font-size: 0.85rem; margin: 14px 2px 0; }
.btn-link--large { padding: 13px 28px; font-size: 1rem; }
.btn-tonal {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    box-shadow: none;
}
.btn-tonal:hover { background: var(--md-tonal-hover); color: var(--md-on-primary-container); box-shadow: none; }
.btn-link { display: inline-flex; align-items: center; gap: 8px; }
.btn-link--tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none; }
.btn-link--tonal:hover { background: var(--md-tonal-hover); color: var(--md-on-primary-container); box-shadow: none; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button.btn-secondary { background: transparent; color: var(--md-primary); box-shadow: inset 0 0 0 1.5px var(--md-primary); }
button.btn-secondary:hover { background: var(--md-primary-container); box-shadow: inset 0 0 0 1.5px var(--md-primary); }
.form-card button.btn-secondary { color: var(--inv-on-surface); box-shadow: inset 0 0 0 1.5px var(--inv-input-border); }
.form-card button.btn-secondary:hover { background: var(--inv-hover); box-shadow: inset 0 0 0 1.5px var(--md-accent); }
.btn-text {
    padding: 6px 10px;
    border-radius: var(--md-radius-full);
    background: none;
    border: none;
    box-shadow: none;
    color: var(--md-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn-text:hover { background: var(--md-primary-container); box-shadow: none; color: var(--md-on-primary-container); }

/* ==================== Messages de retour (toasts) ==================== */
.toast-root {
    position: fixed;
    left: 50%;
    /* Au-dessus du pied de page fixe, qu'il ne doit pas recouvrir. */
    bottom: calc(var(--footer-height) + 16px);
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}
.toast {
    padding: 12px 20px;
    border-radius: var(--md-radius-sm);
    background: var(--inv-surface-high);
    color: var(--inv-on-surface);
    box-shadow: var(--md-elevation-3);
    font-size: 0.92rem;
    font-weight: 500;
    border-left: 4px solid var(--md-success);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--error { border-left-color: var(--inv-bad); }
.toast--info { border-left-color: var(--md-accent); }

/* ==================== Accueil capitaine ==================== */
.home { gap: 24px; }
.home > * { width: 100%; max-width: 1100px; }

.onboarding {
    background: var(--md-surface);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-table);
    padding: 32px;
}
.onboarding h1 { margin-top: 0; }
.onboarding-steps { list-style: none; counter-reset: step; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.onboarding-steps li { counter-increment: step; }
.onboarding-steps a {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    padding: 14px 16px;
    border-radius: var(--md-radius-md);
    border: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
    text-decoration: none;
    transition: background-color var(--md-motion), border-color var(--md-motion);
}
.onboarding-steps a::before {
    content: counter(step);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-weight: 700;
}
.onboarding-steps a:hover { background: var(--md-primary-container); border-color: var(--md-primary); }
.onboarding-steps span { color: var(--md-on-surface-variant); font-size: 0.9rem; }

.hero-card {
    background: linear-gradient(135deg, var(--inv-surface-high), var(--inv-hero-end));
    color: var(--inv-on-surface);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-3);
    padding: 28px 32px;
}
.hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.hero-card .eyebrow { color: var(--md-accent); }
.hero-title { margin: 0; font-size: 3rem; line-height: 1.05; color: var(--inv-strong); }
.hero-date { margin: 6px 0 0; font-size: 1.05rem; color: var(--inv-on-surface); }
.countdown {
    padding: 8px 16px;
    border-radius: var(--md-radius-full);
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-weight: 700;
    white-space: nowrap;
}
.countdown.is-soon { background: var(--status-warning-bg); color: var(--status-warning-fg); }

.progress-block { margin: 24px 0 18px; }
.progress-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.progress-label strong { font-size: 1.3rem; color: var(--inv-strong); }
.progress { height: 10px; border-radius: var(--md-radius-full); background: var(--inv-overlay-2); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--md-accent), var(--md-success)); transition: width 0.4s ease; }

.team-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.team-tile {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding: 12px 14px;
    border-radius: var(--md-radius-md);
    background: var(--inv-overlay);
    border-left: 5px solid var(--team-ink);
}
.team-tile { padding: 0; transition: background 0.15s; }
.team-tile:hover, .team-tile:focus-within { background: var(--inv-overlay-2); }
.team-tile-link { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 12px 14px; color: inherit; text-decoration: none; }
.team-tile-number { font-weight: 700; color: var(--inv-strong); }
.team-tile-opponent { grid-column: 1; font-size: 0.82rem; color: var(--inv-placeholder); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-tile-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.2rem; font-weight: 700; color: var(--inv-strong); }
.team-tile.is-complete .team-tile-count { color: var(--inv-ok); }
.team-tile.is-empty .team-tile-count { color: var(--inv-bad); }
.team-tile.is-partial .team-tile-count { color: var(--inv-warn); }
.hero-actions { margin-top: 22px; display: flex; justify-content: flex-end; }
.hero-actions .btn-link { background: var(--md-accent); color: var(--inv-surface); }
.hero-actions .btn-link:hover { background: var(--md-primary-hover); }

.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; align-items: start; }
.panel {
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-table);
    padding: 20px 22px;
}
.panel h2 { margin: 0 0 12px; }
.panel-empty { color: var(--md-on-surface-variant); margin: 4px 0; }
.panel--past summary { cursor: pointer; list-style: none; }
.panel--past summary::-webkit-details-marker { display: none; }
.panel--past summary h2 { display: inline; margin: 0; }
.panel--past summary::after { content: ' ▾'; color: var(--md-on-surface-variant); }
.panel--past[open] summary { margin-bottom: 12px; }

.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alert-item {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--md-radius-sm);
    background: var(--md-surface-container);
    font-size: 0.9rem;
}
.alert-item a { font-weight: 600; font-size: 0.85rem; white-space: nowrap; text-decoration: none; }
.alert-dot { width: 10px; height: 10px; border-radius: 50%; }
.alert-item--error { background: var(--md-error-container); }
.alert-item--error .alert-dot { background: var(--md-error); }
.alert-item--warning { background: var(--status-warning-bg); }
.alert-item--warning .alert-dot { background: var(--status-warning-border); }
.alert-item--info .alert-dot { background: var(--md-primary); }

.matchday-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.matchday-row {
    display: grid;
    grid-template-columns: 48px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--md-radius-sm);
    color: var(--md-on-surface);
    text-decoration: none;
    transition: background-color var(--md-motion);
}
.matchday-row:hover { background: var(--md-surface-container); }
.matchday-round { font-weight: 800; color: var(--md-primary); }
.matchday-date { color: var(--md-on-surface-variant); font-size: 0.9rem; }
.matchday-status { font-size: 0.8rem; font-weight: 700; color: var(--md-warning); min-width: 64px; text-align: right; }
.matchday-status.is-done { color: var(--md-success-text); }
.team-dots { display: flex; gap: 4px; }
.team-dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid var(--team-ink);
    color: var(--team-ink);
    background: var(--md-surface);
}
.team-dot.is-complete { background: var(--team); color: var(--team-on); }
.team-dot.is-partial { background: linear-gradient(90deg, var(--team) 50%, var(--md-surface) 50%); color: var(--team-on); text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); }

/* ==================== Ecran Journee ==================== */
.matchday { align-items: stretch; }
.matchday-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.matchday-head h1 { margin: 0; font-size: 2.4rem; }
.matchday-dates { margin: 4px 0 0; color: var(--md-on-surface-variant); }
/* Majuscule initiale seulement : en francais, jours et mois s'ecrivent en minuscules. */
.hero-date::first-letter, .matchday-dates::first-letter, .matchday-date::first-letter { text-transform: uppercase; }
.matchday-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.matchday-nav { justify-content: flex-start; margin: 18px 0; }

.save-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--md-on-surface-variant);
}
.save-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.save-status[data-state="saved"] { color: var(--md-success-text); }
.save-status[data-state="pending"], .save-status[data-state="saving"] { color: var(--md-warning); }
.save-status[data-state="saving"]::before { animation: pulse 0.9s ease-in-out infinite; }
.save-status[data-state="error"] { color: var(--md-error); }
@keyframes pulse { 50% { opacity: 0.25; } }

.matchday-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.teams-grid { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }

.mteam {
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-table);
    border: 2px solid var(--team-ink);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--md-motion), transform var(--md-motion);
    /* la carte s'elargit pour que les noms de joueurs ne soient jamais tronques */
    flex: 1 1 280px;
}
.mteam-slots { flex: 1; }
.mteam.is-drop-ok { box-shadow: var(--md-elevation-3), 0 0 0 4px var(--md-accent); transform: translateY(-2px); }
.mteam.is-drop-ko { opacity: 0.55; }
.mteam-head { background: var(--team); color: var(--team-on); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.mteam-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mteam-title h2 { margin: 0; color: var(--team-on); font-size: 1.3rem; }
.mteam-division { font-weight: 700; font-size: 0.8rem; padding: 2px 10px; border-radius: var(--md-radius-full); background: var(--team-on-overlay); }
.mteam-opponent { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.95rem; }
.mteam-venue-kind {
    flex: none;
    padding: 1px 9px;
    border-radius: var(--md-radius-sm);
    background: var(--team-on-soft);
    color: var(--team);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mteam-versus { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mteam-date {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--team-on-line);
    font-size: 0.9rem;
    color: var(--team-on-soft);
}
.mteam-date .icon { width: 16px; height: 16px; }
.mteam-date span::first-letter { text-transform: uppercase; }
/* Bloc lieu a hauteur fixe (3 lignes) : toutes les cartes ont la meme hauteur, avec ou sans remarque. */
.mteam-place,
.mteam-nowhere {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: 84px;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--md-on-surface-variant);
    background: var(--md-surface-container);
    border-bottom: 1px solid var(--md-outline-variant);
}
.mteam-place.is-modified { background: var(--status-warning-bg); color: var(--md-on-surface); }
.mteam-nowhere { align-items: flex-start; font-style: italic; }
.mteam-venue { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mteam-venue-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md-on-surface); font-weight: 600; }
.mteam-links { display: flex; align-items: center; gap: 4px 14px; white-space: nowrap; }
.mteam-remark { min-height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md-warning); font-weight: 600; }
.mteam-remark:empty { visibility: hidden; }

.mteam-slots { list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px; }
.slot {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 8px 6px 6px;
    border-radius: var(--md-radius-sm);
}
.slot-index {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--md-surface-container-high);
    color: var(--md-on-surface-variant);
}
.slot.is-filled { background: var(--md-surface-container); cursor: grab; }
.slot.is-filled .slot-index { background: var(--team); color: var(--team-on); }
.slot.is-empty { border: 2px dashed var(--md-outline); color: var(--md-on-surface-variant); font-style: italic; }
.slot-name { flex: 1; white-space: nowrap; }
.slot-tags { display: flex; gap: 4px; }
.slot-remove {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-on-surface-variant);
    box-shadow: none;
    font-size: 1.2rem;
    line-height: 1;
}
.slot-remove:hover { background: var(--md-error-container); color: var(--md-error); box-shadow: none; }

.mteam-foot { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; padding: 4px 10px 10px; height: 46px; }
.mteam-foot .badge { margin-right: auto; font-weight: 800; }

.pool {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-table);
    padding: 16px;
}
.pool-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pool-head h2 { margin: 0; }
.pool-count { font-size: 0.8rem; color: var(--md-on-surface-variant); }
.pool-search {
    margin: 12px 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-radius-sm);
    font: inherit;
}
.pool-search:focus { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 3px var(--md-primary-container); }
.pool-options { display: flex; flex-direction: column; gap: 6px; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 400; color: var(--md-on-surface-variant); cursor: pointer; }
.toggle input { accent-color: var(--md-primary); }
.pool-list { overflow-y: auto; margin: 8px -8px 0; padding: 0 8px; }
.pool-group {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 6px 0;
    background: var(--md-surface);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-on-surface-variant);
}
.pool-group-count { margin-left: auto; font-weight: 700; }
.group-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--team); }

.prow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--md-radius-sm);
    cursor: grab;
    transition: background-color var(--md-motion);
}
.prow:hover { background: var(--md-surface-container); }
.prow.is-assigned { opacity: 0.6; }
.prow.is-assigned:hover { opacity: 1; }
.prow.is-unavailable .prow-name { text-decoration: line-through; color: var(--md-on-surface-variant); }
.prow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prow-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-history { display: flex; flex-wrap: wrap; gap: 3px; }
.prow-history:empty { display: none; }
.prow-where { font-size: 0.75rem; font-weight: 600; color: var(--md-on-surface-variant); }
.prow-actions { display: flex; gap: 4px; flex: none; }
.assign-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--team-ink);
    background: var(--md-surface);
    color: var(--team-ink);
    font-weight: 800;
    font-size: 0.82rem;
    box-shadow: none;
}
.assign-btn:hover { background: var(--team); color: var(--team-on); box-shadow: none; }
.assign-btn.is-current { background: var(--team); color: var(--team-on); }
.assign-btn:disabled { border-color: var(--md-outline-variant); color: var(--md-outline); background: var(--md-surface); opacity: 1; }
.assign-btn:disabled:hover { background: var(--md-surface); }

@media (max-width: 980px) {
    .matchday-layout { grid-template-columns: 1fr; }
    .pool { position: static; max-height: none; }
    .pool-list { overflow: visible; }
}
@media (max-width: 600px) {
    main { padding-left: 16px; padding-right: 16px; }
    .hero-card { padding: 22px 20px; }
    .hero-title { font-size: 2.4rem; }
    .matchday-row { grid-template-columns: 40px 1fr auto; }
    .matchday-row .team-dots { display: none; }
}
.back-link { align-self: flex-start; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* Entree de menu de la page courante, et separation outils du capitaine / consultation. */
.nav-link { position: relative; }
/* Le liseré passe sous la bulle (dans la marge de la barre) : le texte reste centré dans la bulle. */
.nav-link.is-active { background-color: var(--inv-hover); color: var(--md-accent); }
.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: var(--md-accent);
}
.nav-separator { width: 1px; height: 22px; margin: 0 8px; background: var(--inv-input-border); }
@media (max-width: 860px) {
    .nav-separator { width: auto; height: 1px; margin: 6px 4px; }
    .nav-link.is-active { box-shadow: inset 3px 0 0 var(--md-accent); }
    .nav-link.is-active::after { display: none; }
}
/* Hauteur du vivier reservee d'emblee sur grand ecran : il ne grandit pas en se remplissant. */
@media (min-width: 981px) {
    .pool { height: calc(100vh - 110px - var(--footer-height)); }
    .pool-list { flex: 1; }
}

/* ==================== Elements de page communs ==================== */
.page-head { width: 100%; max-width: 1100px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin-bottom: 6px; }
.page-intro { margin: 0 0 18px; color: var(--md-on-surface-variant); max-width: 70ch; }
.toolbar { width: 100%; max-width: 1100px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 14px; }
.search-input {
    min-width: 240px;
    padding: 10px 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-radius-sm);
    background: var(--md-surface);
    font: inherit;
}
.toolbar .chip-group { margin-bottom: 0; }
.toolbar .search-input, .toolbar .chip { height: 42px; }
.search-input:focus { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 3px var(--md-primary-container); }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--md-on-surface-variant); }
.legend .avail-cell { width: 20px; height: 20px; cursor: default; margin-left: 8px; }
.empty-state {
    width: 100%;
    max-width: 640px;
    text-align: center;
    padding: 36px 28px;
    background: var(--md-surface);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-1);
}
.empty-state h2 { margin-top: 0; }
.empty-state p { color: var(--md-on-surface-variant); margin-bottom: 0; }

/* ==================== Grille des disponibilites ==================== */
.avail-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-table);
    background: var(--md-surface);
}
.avail-grid { box-shadow: none; border-radius: 0; overflow: visible; width: 100%; }
.avail-grid th, .avail-grid td { padding: 8px 10px; text-align: center; white-space: nowrap; }
.avail-grid thead th { position: sticky; top: 0; z-index: 2; vertical-align: bottom; }
.avail-grid .avail-player {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    background: var(--md-surface);
    box-shadow: 1px 0 0 var(--md-outline-variant);
    /* Colonne des noms au plus juste : la place restante va aux dates. */
    width: 1%;
    min-width: 190px;
}
.avail-grid thead .avail-player { z-index: 3; background: var(--md-surface-container); }
.avail-grid tfoot th, .avail-grid tfoot td { background: var(--md-surface-container); border-bottom: none; }
.avail-grid .avail-player a { color: var(--md-on-surface); text-decoration: none; }
.avail-grid .avail-player a:hover { color: var(--md-primary); text-decoration: underline; }
.avail-grid:not(.show-past) .is-past { display: none; }
.avail-rounds { display: block; font-size: 0.95rem; font-weight: 700; color: var(--md-primary); }
.avail-date { display: block; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--md-on-surface); }
.avail-cell {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--md-radius-sm);
    box-shadow: none;
    display: inline-grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 800;
    vertical-align: middle;
}
.avail-cell.is-yes { background: var(--status-success-bg); color: var(--status-success-fg); }
.avail-cell.is-yes::before { content: '✓'; }
.avail-cell.is-no { background: var(--md-error-container); color: var(--md-error); }
.avail-cell.is-no::before { content: '✕'; }
.avail-cell:hover { box-shadow: 0 0 0 2px currentColor; }
.avail-cell.is-yes:hover { background: color-mix(in srgb, var(--status-success-border) 26%, transparent); }
.avail-cell.is-no:hover { background: var(--status-danger-bg); }
.avail-count { font-size: 0.85rem; color: var(--md-success-text); }
.avail-count.is-short { color: var(--md-error); }
/* Largeur bornee : sur un tres grand ecran, les colonnes ne s'etirent pas a l'infini. */
.avail .toolbar, .avail .page-head, .avail .avail-scroll { max-width: 1400px; }
.avail-grid th:not(.avail-player), .avail-grid td { min-width: 76px; }
/* Colonnes en alternance de teinte (classe posee par disponibilites.js sur les colonnes visibles). */
.avail-grid tbody td.is-alt { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.avail-grid thead th.is-alt, .avail-grid tfoot td.is-alt { background: var(--md-surface-alt); }

/* ==================== Joueurs ==================== */
.players-page > * { width: 100%; max-width: 960px; }
.add-player {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px;
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-elevation-1);
}
.add-player input {
    flex: 1 1 180px;
    padding: 10px 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-radius-sm);
    font: inherit;
}
.add-player input:focus { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 3px var(--md-primary-container); }
.players-table { width: 100%; }
.players-table td { vertical-align: middle; }
.players-table tr.is-editing { background: var(--md-primary-container); }
table input.inline-input {
    width: 100%;
    min-width: 8ch;
    padding: 6px 8px;
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    cursor: text;
}
table input.inline-input:hover { border-color: var(--md-outline-variant); background: var(--md-surface); }
table input.inline-input:focus { border-color: var(--md-primary); background: var(--md-surface); box-shadow: 0 0 0 3px var(--md-primary-container); }
.inline-input--strong { font-weight: 700 !important; text-transform: uppercase; }

.profile > * { width: 100%; max-width: 1000px; }
.profile-head h1 { margin-bottom: 6px; }
.profile-head .page-intro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; }
.profile h3 { margin: 22px 0 10px; font-size: 0.95rem; color: var(--md-on-surface-variant); }
.burn-status {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: var(--md-radius-sm);
    border-left: 5px solid var(--team-ink);
    background: var(--md-surface-container);
    font-size: 0.9rem;
}
.burn-status--free { border-left-color: var(--md-success); }
.match-list, .avail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.match-list li, .avail-list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.match-round { font-weight: 800; color: var(--md-primary); min-width: 2.6em; }
.match-date { color: var(--md-on-surface-variant); min-width: 8.5em; }
.match-date::first-letter { text-transform: uppercase; }
.avail-list .avail-cell { width: 30px; height: 30px; }

/* ==================== Journee : onglets sur mobile ==================== */
.mobile-tabs { display: none; }
@media (max-width: 980px) {
    .mobile-tabs {
        position: sticky;
        top: 64px;
        z-index: 15;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin: 0 0 16px;
        padding: 8px 0;
        background: var(--md-surface-dim);
        box-shadow: 0 6px 8px -8px color-mix(in srgb, var(--md-on-surface) 35%, transparent);
    }
    .mobile-tabs [role="tab"] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: var(--md-radius-sm);
        background: var(--md-surface);
        color: var(--md-on-surface);
        box-shadow: var(--md-elevation-1);
    }
    .mobile-tabs [role="tab"].is-active { background: var(--md-primary); color: var(--md-on-primary); }
    .mobile-tab-count { font-size: 0.78rem; font-weight: 700; padding: 1px 8px; border-radius: var(--md-radius-full); background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
    .mobile-tabs [role="tab"].is-active .mobile-tab-count { background: color-mix(in srgb, var(--md-on-primary) 22%, transparent); }
    .matchday-layout.view-teams .pool { display: none; }
    .matchday-layout.view-pool .teams-area { display: none; }
}

/* ==================== Itineraires ==================== */
.maps-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.maps-link::before {
    content: '';
    width: 15px;
    height: 15px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--maps-icon, none) center / contain no-repeat;
    mask: var(--maps-icon, none) center / contain no-repeat;
}
.maps-link { --maps-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.maps-link--analysis { --maps-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-5 3 3 5-7'/%3E%3C/svg%3E"); }
.maps-link:hover { text-decoration: underline; }
.mteam-place .maps-link { margin-top: 0; }
.venue-consigne { font-style: italic; }
.page-head .btn-link { white-space: nowrap; }

/* ==================== Calendrier public : cartes sur mobile ==================== */
@media (max-width: 700px) {
    #calendar-table, #calendar-table tbody { display: block; width: 100%; background: none; box-shadow: none; }
    #calendar-table thead { display: none; }
    #calendar-table tr {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 4px 12px;
        margin-bottom: 12px;
        padding: 14px 16px;
        background: var(--md-surface);
        border-radius: var(--md-radius-md);
        box-shadow: var(--md-elevation-1);
    }
    #calendar-table tr[style*="display: none"] { display: none !important; }
    #calendar-table td { display: contents; border: none; padding: 0; }
    #calendar-table td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--md-on-surface-variant);
        align-self: start;
        padding-top: 2px;
    }
    #calendar-table td > * { grid-column: 2; justify-self: start; }
    #calendar-table td.cal-venue { display: block; grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid var(--md-outline-variant); }
    #calendar-table td.cal-venue::before { display: block; margin-bottom: 4px; }
    #calendar-table td.cal-venue.venue-modified { border-left: none; padding-left: 0; }
    #calendar-table td:first-child { text-align: left; }
}

/* ==================== Tableau de composition en lecture seule ==================== */
.is-readonly .pool,
.is-readonly .slot-remove,
.is-readonly .mteam-foot,
.is-readonly .mobile-tabs,
.is-readonly #save-status { display: none !important; }
.is-readonly .matchday-layout { grid-template-columns: minmax(0, 1fr); }
.is-readonly .matchday-layout .teams-area { display: block !important; }
.is-readonly .hint { display: none !important; }
.is-readonly .slot.is-filled { cursor: default; }

/* ==================== Impression de la feuille de journee ==================== */
@media print {
    @page { margin: 12mm; }
    body { background: #fff; }
    .site-header, .footer-version, .footer-sources a, .toast-root, .matchday-tools, .matchday-nav, .mobile-tabs, .pool, .hint,
    .slot-remove, .mteam-foot, .maps-link, #matchday-errors { display: none !important; }
    main { padding: 0; }
    .matchday-layout { display: block; }
    .matchday-layout.view-pool .teams-area { display: block; }
    .teams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .mteam { box-shadow: none; break-inside: avoid; }
    .mteam, .mteam-head, .slot-index, .badge, .mteam-place { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .slot.is-empty { border-color: #bbb; }
    .matchday-head { margin-bottom: 14px; }
    /* Seule la mention des sources reste du pied de page, en bas du document imprime. */
    body > footer { position: static; background: none; color: #000; padding: 8px 0 0; font-size: 0.8rem; }
}

/* ==================== Utilitaires (ex-styles en ligne) ==================== */
.text-error { color: var(--md-error); }
.w-8ch { width: 8ch; }
.w-14ch { width: 14ch; }
.w-16ch { width: 16ch; }
.w-22ch { width: 22ch; }
.w-28ch { width: 28ch; }
.w-32ch { width: 32ch; }
td.table-empty { text-align: center; padding: 24px 16px; color: var(--md-on-surface-variant); font-style: italic; }

.profile > .back-link { align-self: center; }

.temp-password { font-size: 1.05rem; padding: 2px 8px; border-radius: var(--md-radius-sm); background: var(--md-surface-container-high); user-select: all; }

/* Equipe desistee (ecran Equipes) : ligne attenuee, la pastille "Desistee" reste lisible. */
tr.is-withdrawn td { opacity: 0.6; }
tr.is-withdrawn td .badge { opacity: 1; }
.cal-bye { font-style: italic; color: var(--md-on-surface-variant); }

/* ==================== Analyse des adversaires ==================== */
/* Une seule convention de couleur : bleu = a notre avantage, rouge = a leur avantage, gris = equilibre
   (paire lisible par les daltoniens ; le signe +/- et les libelles doublent toujours la couleur). */
.scout-page { width: 100%; max-width: 1100px; }
/* main centre ses enfants : sans largeur explicite, la grille se reduirait a une seule colonne. */
.scout-overview { width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.scout-page .panel { margin-bottom: 16px; }
.scout-intro { color: var(--md-on-surface-variant); max-width: 70ch; margin: 0 0 20px; }
.scout-freshness { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 20px; color: var(--md-on-surface-variant); }
.scout-freshness form { margin: 0; }
.scout-freshness button { padding: 6px 14px; }
.verdict {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px; border-radius: var(--md-radius-full);
    font-weight: 700; font-size: 0.9rem; color: var(--scout-ink); white-space: nowrap;
}
.verdict--favorable { background: var(--scout-pos-strong); }
.verdict--balanced { background: var(--scout-even); }
.verdict--difficult { background: var(--scout-neg-strong); }
.verdict--unknown { background: var(--scout-even); font-weight: 400; }
.scout-chances { font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 700; line-height: 1.1; margin: 14px 0 2px; font-variant-numeric: tabular-nums; }
.hero-card .scout-chances { color: var(--inv-strong); }
.scout-odds { display: flex; gap: 2px; height: 12px; border-radius: var(--md-radius-full); overflow: hidden; margin: 12px 0 6px; }
.scout-odds span { display: block; min-width: 2px; }
.scout-odds .odds-win { background: var(--scout-bar-win); }
.scout-odds .odds-draw { background: var(--scout-bar-draw); }
.scout-odds .odds-loss { background: var(--scout-bar-loss); }
.scout-odds-legend { display: flex; justify-content: space-between; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.scout-team-title { display: flex; align-items: center; gap: 10px; }
.scout-match-line { margin: 4px 0; color: var(--md-on-surface-variant); }
.scout-opponent { font-size: 1.25rem; font-weight: 700; margin: 2px 0 8px; }
.scout-players { list-style: none; margin: 0; padding: 0; }
.scout-players li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--md-outline-variant); }
.scout-players li:last-child { border-bottom: 0; }
.scout-players li > span:first-child { min-width: 45%; }
.scout-players .points { font-weight: 700; font-variant-numeric: tabular-nums; }
.scout-players .meta, .scout-meta { color: var(--md-on-surface-variant); font-size: 0.85rem; }
.scout-keypoints { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.scout-duels td, .scout-duels th { text-align: center; white-space: nowrap; }
.scout-duels th[scope=row] { text-align: left; }
.scout-duels td { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--scout-ink); }
.gap-p2 { background: var(--scout-pos-strong); }
.gap-p1 { background: var(--scout-pos); }
.gap-n0 { background: var(--scout-even); }
.gap-m1 { background: var(--scout-neg); }
.gap-m2 { background: var(--scout-neg-strong); }
.scout-legend { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8rem; margin-top: 8px; }
.scout-legend span { padding: 2px 8px; border-radius: var(--md-radius-sm); color: var(--scout-ink); }
.scout-table-wrap { overflow-x: auto; }
.scout-strength { height: 8px; border-radius: var(--md-radius-full); background: var(--md-outline); min-width: 2px; }
tr.is-us .scout-strength { background: var(--scout-bar-win); }
tr.is-us td { font-weight: 700; }
.scout-section-title { margin: 32px 0 12px; }
.scout-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }

/* Licencies du club absents de la liste des joueurs (/players) */
.licensees summary { cursor: pointer; font-weight: 600; }
.licensee-list { list-style: none; padding: 0; margin: .75rem 0; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .25rem 1rem; }
.prow-points, .slot-points { color: var(--md-on-surface-variant); font-size: .85em; margin-left: .35em; }

/* Barre complete avec icones : un peu moins de marge entre 861 et 1280 px pour tenir sur une ligne,
   et sans les icones de la barre en dessous de 1150 px (celles du menu deroulant restent). */
@media (min-width: 861px) and (max-width: 1280px) {
    .nav-link { padding: 9px 10px; gap: 5px; }
}
@media (min-width: 861px) and (max-width: 1150px) {
    .site-nav-primary .nav-icon { display: none; }
}

/* Pied de page : version, puis sources des donnees et lien vers la page « Donnees et sources ». */
.footer-sources { margin-left: 12px; }
.footer-sources > span + a { margin-left: 8px; }
.footer-sources a { color: inherit; }
@media (max-width: 600px) {
    /* Sur mobile, le pied de page garde la mention des sources plutot que la version. */
    .footer-version { display: none; }
    .footer-sources { margin-left: 0; }
}

/* Page de texte (« Donnees et sources ») : largeur de lecture confortable. */
.prose-page { max-width: 760px; }
.prose-page h2 { margin-top: 28px; }
.prose-page li { margin-bottom: 6px; }

/* ==================== Analyse : cartes de meme hauteur, actions en pied de carte ==================== */
.scout-overview { align-items: stretch; }
.scout-card { display: flex; flex-direction: column; }
.scout-card .scout-links { margin-top: auto; padding-top: 16px; }
.scout-card .scout-odds-legend { margin-bottom: 4px; }

/* ==================== Poules : une couleur par poule ==================== */
.pool-grid { align-items: stretch; }
.pool-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--md-radius-md);
    background: var(--md-surface);
    box-shadow: var(--md-elevation-table);
    border: 2px solid var(--team-ink);
    overflow: hidden;
}
.pool-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--team); color: var(--team-on); }
.pool-card-head h2 { margin: 0; color: var(--team-on); font-size: 1.2rem; }
.pool-card-number { padding: 2px 10px; border-radius: var(--md-radius-full); background: var(--team-on-overlay); font-size: 0.8rem; font-weight: 700; }
.pool-card table { flex: 1; border-radius: 0; box-shadow: none; }
.pool-card thead th { background: color-mix(in srgb, var(--team) 10%, var(--md-surface)); }
.pool-card tbody tr:last-child td { border-bottom: none; }
.pool-card tr.is-withdrawn { opacity: 0.6; }
.pool-position {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--team) 14%, var(--md-surface));
    color: var(--team-ink);
    font-weight: 800;
    font-size: 0.85rem;
}
.pool-card tbody tr:first-child .pool-position { background: var(--team); color: var(--team-on); }

/* ==================== Selecteur de fichier ==================== */
input[type="file"] {
    max-width: 100%;
    padding: 8px;
    border: 1.5px dashed var(--md-outline);
    border-radius: var(--md-radius-md);
    background: var(--md-surface-container);
    color: var(--md-on-surface-variant);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color var(--md-motion), background-color var(--md-motion);
}
input[type="file"]:hover { border-color: var(--md-primary); background: var(--md-primary-container); }
input[type="file"]:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px 8px 38px;
    border: none;
    border-radius: var(--md-radius-full);
    background-color: var(--md-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px;
    color: var(--md-on-primary);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--md-motion);
}
input[type="file"]::file-selector-button:hover { background-color: var(--md-primary-hover); }
.form-card input[type="file"],
.form-card .form-group input[type="file"] { padding: 10px; border: 1.5px dashed var(--inv-input-border); background: var(--inv-input-bg); color: var(--inv-placeholder); }
.form-card input[type="file"]:hover { border-color: var(--md-accent); background: var(--inv-hover); }
.form-card input[type="file"]::file-selector-button { background-color: var(--md-accent); color: var(--inv-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312161D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
.import-form input[type="file"] { width: 100%; }

/* ==================== Reglages : groupes de tuiles ==================== */
.settings-page { align-items: stretch; width: 100%; max-width: 1400px; margin: 0 auto; }
.settings-page > h1 { margin-bottom: 8px; }
.settings-page .page-intro { margin-bottom: 8px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sommaire collant sous la barre de navigation : toujours a portee, avec la section courante en evidence. */
.settings-toc {
    position: sticky;
    top: 64px;
    z-index: 10;
    display: flex;
    gap: 8px;
    margin: 8px -12px 0;
    padding: 10px 12px;
    background: var(--md-surface-dim);
    border-bottom: 1px solid var(--md-outline-variant);
    overflow-x: auto;
}
.settings-toc a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 7px 14px;
    border-radius: var(--md-radius-full);
    font-weight: 600;
    transition: background-color var(--md-motion), color var(--md-motion);
}
.settings-toc a .icon { width: 16px; height: 16px; }
.settings-toc a.is-active { background: var(--md-primary); color: var(--md-on-primary); }

.settings-group { margin-top: 28px; scroll-margin-top: 130px; }
.settings-group-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px;
    font-size: 1.1rem;
    white-space: nowrap;
}
.settings-group-title::after { content: ''; flex: 1; height: 1px; background: var(--md-outline); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; align-items: stretch; }
.settings-tile { display: flex; flex-direction: column; max-width: none; margin: 0; padding: 24px; }
.settings-tile--wide { grid-column: 1 / -1; }
.settings-tile h3 { margin-bottom: 16px; }
.settings-tile .form-intro { margin: 0 0 16px; }
.settings-tile .tile-form { margin: 0; }
.settings-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 0 28px; }
.tile-preview { margin-bottom: 16px; }
.tile-preview img { display: block; border: 1px solid var(--inv-input-border); background: #fff; }
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.settings-tile--danger { border: 1.5px solid var(--inv-bad); }
.settings-tile--danger h3 { border-bottom-color: var(--inv-bad); }
.settings-tile--danger .btn-danger-filled { margin-top: 0; }

/* ==================== Refonte accueil + calendrier (v0.3.1) ==================== */
.home > * { max-width: 1240px; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.home-main, .home-side { display: grid; gap: 24px; min-width: 0; }
@media (max-width: 1000px) {
    .home-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Tuiles d'equipe du hero : pastille a la couleur de l'equipe, etat en pilule. */
.team-tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.team-tile { border-left: 0; border-radius: var(--md-radius-md); box-shadow: inset 0 3px 0 var(--team-ink); background: var(--inv-overlay); }
.team-tile-link { padding: 14px 14px 12px; }
.team-tile-count {
    padding: 2px 10px;
    border-radius: var(--md-radius-full);
    font-size: 0.95rem;
    background: var(--inv-overlay-2);
}
.team-tile.is-complete .team-tile-count { background: color-mix(in srgb, var(--inv-ok) 18%, transparent); }
.team-tile.is-empty .team-tile-count { background: color-mix(in srgb, var(--inv-bad) 18%, transparent); }
.team-tile.is-partial .team-tile-count { background: color-mix(in srgb, var(--inv-warn) 18%, transparent); }
.hero-actions .btn-link { box-shadow: 0 4px 14px color-mix(in srgb, var(--md-primary) 35%, transparent); font-weight: 700; }
.hero-actions .btn-link::after { content: ' ›'; font-size: 1.2em; line-height: 1; }

/* Panneaux : coins plus doux, "A surveiller" en etat vide rassurant. */
.panel { border-radius: var(--md-radius-lg); }
.panel-empty--ok {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--md-radius-md);
    background: var(--status-success-bg);
    color: var(--md-on-surface);
}
.panel-empty--ok .icon { flex: none; width: 28px; height: 28px; color: var(--md-success-text); }
.panel-empty--ok strong { display: block; color: var(--md-success-text); }

/* Journees a venir : colonne etroite, pastille de journee et rangee entierement cliquable. */
.panel--upcoming .matchday-row { grid-template-columns: 44px 1fr; grid-template-areas: "round date" "round dots"; row-gap: 4px; padding: 10px; }
.panel--upcoming .matchday-round {
    grid-area: round;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--md-radius-sm);
    background: var(--md-primary-container);
}
.panel--upcoming .matchday-date { grid-area: date; font-weight: 600; color: var(--md-on-surface); display: flex; justify-content: space-between; gap: 8px; }
.panel--upcoming .team-dots { grid-area: dots; display: flex; }
.panel--upcoming .matchday-status { display: none; }
.panel--upcoming .matchday-row:first-child { background: var(--md-primary-container); }
.team-dot.is-empty { opacity: 0.55; }

@media (max-width: 600px) {
    .panel--upcoming .matchday-row .team-dots { display: flex; }
    .team-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* Calendrier : barre de couleur a gauche de chaque rencontre, pastille d'equipe. */
.page-head--actions { justify-content: flex-end; }
#calendar-table tr.cal-row > td:first-child { box-shadow: inset 6px 0 0 var(--team-ink); padding-left: 18px; }
#calendar-table tbody tr.cal-row:hover { background: color-mix(in srgb, var(--team-ink) 8%, transparent); }
@media (max-width: 700px) {
    #calendar-table tr.cal-row { border-left: 6px solid var(--team-ink); }
    #calendar-table tr.cal-row > td:first-child { box-shadow: none; padding-left: 0; }
}

/* Filtre d'equipe du calendrier : pastilles aux couleurs des equipes. */
.chip-group--teams .chip--team { border-color: var(--team-ink); color: var(--team-ink); }
.chip-group--teams .chip--team:hover { background: color-mix(in srgb, var(--team-ink) 12%, var(--md-surface)); border-color: var(--team-ink); color: var(--team-ink); }
.chip-group--teams .chip--team.is-active,
.chip-group--teams .chip--team.is-active:hover { background: var(--team); border-color: var(--team); color: var(--team-on); }

/* ==================== Ajustements de theme ==================== */
body { letter-spacing: -0.003em; }
.site-header { border-bottom: 1px solid var(--md-outline-variant); box-shadow: none; }
footer { border-top: 1px solid var(--md-outline-variant); }
.hero-card, .form-card { border: 1px solid var(--md-outline-variant); }
.hero-actions .btn-link { color: var(--md-on-primary); background: var(--md-primary); }
.hero-actions .btn-link:hover { background: var(--md-primary-hover); }
.countdown { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.form-card input[type="file"]::file-selector-button { color: var(--md-on-primary); }
.form-card input[type="file"]::file-selector-button:hover { background-color: var(--md-primary-hover); }

/* ==================== Bascule clair / sombre ==================== */
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--inv-on-surface);
    box-shadow: none;
    cursor: pointer;
}
.theme-toggle:hover { background: var(--inv-hover); color: var(--md-accent); box-shadow: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: inline; }
}
@media (max-width: 800px) { .theme-toggle { align-self: flex-start; } }

/* Calendrier : espacement sous le bouton d'agenda, journees passees masquees par defaut. */
.page-head--actions { margin-bottom: 20px; }
.page-head--actions + .filters { margin-top: 0; gap: 14px 20px; }
.filters .chip-group + .chip-group { margin-left: 4px; }
#round-filter:not(.show-past) .chip.is-past:not(.is-active) { display: none; }