/* ════════════════════════════════════════════════════════════════
 * IT'S RUGBY — CSS commun front admin
 *
 * Couvre tous les espaces utilisateurs côté front qui combinent
 * tableau + sticky bar + formulaire ACF :
 *   - Espace gérant bar          (préfixe .rz-*)
 *   - Espace annonces            (préfixe .its-*)
 *   - Toute future page espace   (utiliser .rz-* ou .its-*)
 *
 * Style brand :
 *   teal #1C3D34 / vanilla #F2E5D2 / sage #ABC8A2 / g-bright #8ED968
 *
 * Variables CSS issues de itsrugby-common.css.
 * ════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------
 * 1) Layout
 *    Sur les pages espace gérant / annonces, on casse les
 *    contraintes du thème (.article-body 720px, .container 1200px)
 *    parents UNIQUEMENT, pour laisser le .page-hero s'étaler
 *    edge-to-edge. Le body est wrappé côté shortcode dans un
 *    .rz-page-wrap (1200px max, centré) — distinct du .container
 *    du thème pour éviter le conflit du :has().
 * --------------------------------------------------------- */
.container:has(.rz-page-body),
.container:has(.its-fadm-body),
.article-body:has(.rz-page-body),
.article-body:has(.its-fadm-body) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

.rz-page-wrap,
.its-fadm-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 64px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .rz-page-wrap,
    .its-fadm-wrap { padding: 16px 12px 48px; }
}
/* Détection : ces pages contiennent un marker .rz-page-body (espace gérant)
   ou .its-fadm-body (annonces). Dans ces cas-là, on :
   1) cache le H1 thème (le shortcode rend son propre .page-hero),
   2) casse les contraintes de largeur du thème pour que .page-hero
      soit edge-to-edge,
   3) renforce le trait flashy de .page-hero (glow vert plus marqué). */
body .article-body:has(.rz-page-body) > h1:first-child,
body .article-body:has(.its-fadm-body) > h1:first-child {
    display: none !important;
}

/* Trait flashy plus visible sur les pages espace */
.article-body:has(.rz-page-body) .page-hero::after,
.article-body:has(.its-fadm-body) .page-hero::after {
    width: 80px !important;
    height: 4px !important;
    box-shadow: 0 0 12px rgba(142, 217, 104, 0.6);
}

/* Lien clair dans la description du hero (sur fond gradient teal) */
.page-hero .its-link-light {
    color: var(--g-bright, #8ED968);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page-hero .its-link-light:hover {
    color: #B5E699;
}

/* ---------------------------------------------------------
 * 2) Box / card (.rz-box / .its-box)
 * --------------------------------------------------------- */
.rz-box,
.its-box {
    background: var(--white, #fff);
    border: 1px solid var(--border, #C4C4C4);
    box-shadow: 0 2px 12px rgba(28, 61, 52, 0.06);
    overflow: hidden;
}
.rz-head,
.its-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--teal, #1C3D34);
    color: #fff;
    padding: 16px 20px;
    gap: 14px;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--g-bright, #8ED968);
}

/* ---------------------------------------------------------
 * 3) Onglets (.rz-tabs / .its-tabs)
 * --------------------------------------------------------- */
.rz-tabs,
.its-tabs {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.rz-tab,
.its-tab {
    font-weight: 800;
    color: var(--vanilla-d, #E8D8C0);
    padding: 6px 0 10px;
    border-bottom: 3px solid transparent;
    text-decoration: none !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.15s, border-color 0.15s;
}
.rz-tab:hover,
.its-tab:hover { color: #fff; }
.rz-tab.active,
.its-tab.active {
    color: #fff;
    border-bottom-color: var(--g-bright, #8ED968);
}

/* ---------------------------------------------------------
 * 4) Tableaux (.rz-table / .its-table)
 * --------------------------------------------------------- */
.rz-table,
.its-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.rz-table thead th,
.its-table thead th {
    background: #fff;
    color: var(--teal, #1C3D34);
    border-bottom: 2px solid var(--teal, #1C3D34);
    padding: 12px 14px;
    text-align: left;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rz-table td,
.its-table td {
    background: #fff;
    border-bottom: 1px solid var(--border, #C4C4C4);
    padding: 14px;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    color: var(--teal, #1C3D34);
}
.rz-table td strong,
.its-table td strong {
    color: var(--teal, #1C3D34);
    font-weight: 800;
}
.rz-table tr:last-child td,
.its-table tr:last-child td { border-bottom: none; }
/* Cache la thead quand la table n'a pas de vraies données à colonner :
   - correction list (formulaire field-by-field)
   - search-fiche (recherche)
   - état vide (uniquement td[colspan])
   La thead n'est pertinente que pour les tableaux avec ≥ 4 colonnes de data. */
.rz-table:has(.its-correction-list) thead,
.its-table:has(.its-correction-list) thead,
.rz-table:has(.its-search-fiche) thead,
.its-table:has(.its-search-fiche) thead,
/* Aucune ligne de données réelle (que des tr > td[colspan]) → thead inutile */
.rz-table:has(tbody > tr:only-child > td[colspan]) thead,
.its-table:has(tbody > tr:only-child > td[colspan]) thead {
    display: none;
}
/* Le td des cas spéciaux (correction / search) ne doit pas avoir de padding excessif */
.rz-table:has(.its-correction-list) tbody > tr > td,
.its-table:has(.its-correction-list) tbody > tr > td,
.rz-table:has(.its-search-fiche) tbody > tr > td,
.its-table:has(.its-search-fiche) tbody > tr > td {
    padding: 0;
    border: none;
}
/* Pas de hover sur les lignes — comportement statique partout */
.rz-table tbody tr:hover td,
.its-table tbody tr:hover td { background: #fff; }
.rz-table a,
.its-table a,
.rz-table a:hover,
.rz-table a:focus,
.its-table a:hover,
.its-table a:focus {
    color: var(--teal, #1C3D34);
    font-weight: 700;
    text-decoration: none !important;
}

/* ---------------------------------------------------------
 * 5) Badges (.rz-badge / .its-badge)
 * --------------------------------------------------------- */
.rz-badge,
.its-badge {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--border, #C4C4C4);
    background: #f3f3f3;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rz-badge.ok,
.its-badge.ok {
    background: var(--sage-lt, #D7EAE2);
    border-color: var(--sage, #ABC8A2);
    color: var(--teal, #1C3D34);
}
.rz-badge.wait,
.its-badge.wait {
    background: #FFF7E6;
    border-color: #FFD27A;
    color: var(--yellow, #C47D08);
}
.its-badge.draft {
    background: #f0f0f0;
    border-color: #ccc;
    color: var(--muted, #6B6B6B);
}
.its-badge.closed {
    background: var(--red-lt, #FDECEA);
    border-color: #E5A0A0;
    color: #8B1A1A;
}

/* ---------------------------------------------------------
 * 6) Boutons (.rz-btn / .its-btn)
 * --------------------------------------------------------- */
.rz-btn,
.its-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: none;
    background: var(--teal, #1C3D34);
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(28, 61, 52, 0.15);
}
.rz-btn:hover,
.its-btn:hover {
    background: var(--teal-dk, #172713);
    box-shadow: 0 2px 6px rgba(28, 61, 52, 0.25);
}
.rz-btn.rz-btn-outline,
.its-btn.its-btn-outline {
    background: #fff;
    color: var(--teal, #1C3D34) !important;
    border: 1px solid var(--teal, #1C3D34);
    padding: 10px 18px;
}
.rz-btn.rz-btn-outline:hover,
.its-btn.its-btn-outline:hover {
    background: var(--vanilla, #F2E5D2);
    color: var(--teal-dk, #172713) !important;
}
/* Boutons compacts pour les tables d'actions */
.its-btn.its-btn-sm,
.rz-btn.rz-btn-sm {
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: 0.3px;
    box-shadow: none;
}
.its-btn.its-btn-sm.its-btn-outline,
.rz-btn.rz-btn-sm.rz-btn-outline {
    padding: 5px 12px;
}
.its-actions-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Cartes de fiches gérées (équipe / joueur / staff …) */
.its-fiche-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.its-fiche-card {
    display: flex;
    gap: 16px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #C4C4C4);
    padding: 16px 20px;
    transition: box-shadow .15s, border-color .15s;
}
.its-fiche-card:hover {
    border-color: var(--g-bright, #8ED968);
    box-shadow: 0 2px 12px rgba(28, 61, 52, .12);
}
.its-fiche-card-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--vanilla, #F2E5D2);
    border: 1px solid var(--border, #C4C4C4);
}
.its-fiche-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.its-fiche-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.its-fiche-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
    margin: 0;
    line-height: 1.3;
}
.its-fiche-card-meta {
    font-size: 12px;
    color: var(--muted, #6B6B6B);
    margin: 0;
}
.its-fiche-card-actions {
    margin-top: 4px;
}
@media (max-width: 600px) {
    /* Logo flottant à gauche, titre + badge « Fiche gérée » à côté ; méta et
       actions repassent en pleine largeur dessous (clear). En flex-row, la
       petite vignette poussait tout le contenu dans une colonne étroite à
       droite → « décalé, pas aligné ». */
    .its-fiche-card {
        display: block;
        padding: 14px;
    }
    .its-fiche-card-thumb {
        float: left;
        width: 56px;
        height: 56px;
        margin: 0 12px 8px 0;
    }
    .its-fiche-card-body {
        display: block;
    }
    .its-fiche-card-head {
        min-height: 56px;
        flex-direction: column;
        justify-content: center;
    }
    .its-fiche-card-meta {
        clear: left;
        margin-top: 8px;
    }
    .its-fiche-card-actions {
        clear: left;
        margin-top: 8px;
    }
}

/* Lien direct dans la sidebar (pas une section routable) */
.its-account-nav-link {
    /* hérite de its-account-nav-item, juste un petit indicateur visuel */
    position: relative;
}
.its-account-nav-link::after {
    content: "↗";
    margin-left: 6px;
    font-size: 11px;
    color: var(--muted, #6B6B6B);
}

/* ---------------------------------------------------------
 * 7) Sticky bar (.rz-stickybar / .its-stickybar)
 * --------------------------------------------------------- */
.rz-stickybar,
.its-stickybar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    border-left: 4px solid var(--g-bright, #8ED968);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(28, 61, 52, 0.08);
}

/* ---------------------------------------------------------
 * 8) Wrapper formulaire ACF — .rz-form-wrap / .its-form-wrap
 * --------------------------------------------------------- */
.rz-form-wrap,
.its-form-wrap {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    box-shadow: 0 2px 12px rgba(28, 61, 52, 0.06);
    padding: 28px 32px;
    margin-bottom: 32px;
}
.rz-form-wrap .acf-fields,
.its-form-wrap .acf-fields {
    border: none !important;
}

/* Onglets ACF — flex-basis 100% pour spanner toute la largeur du grid */
.rz-form-wrap .acf-tab-wrap,
.its-form-wrap .acf-tab-wrap {
    flex: 0 0 100% !important;
    max-width: none !important;
    width: 100% !important;
    background: var(--vanilla, #F2E5D2);
    border: none !important;
    border-bottom: 1px solid var(--border, #C4C4C4) !important;
    border-radius: 0 !important;
    margin: 0 -32px 24px !important;
    padding: 0 32px !important;
    box-sizing: content-box;
}
/* Champ "Titre" (qui précède les onglets) : retire la bordure basse pour
   éviter le double trait noir au-dessus de la nav d'onglets */
.rz-form-wrap .acf-fields > .acf-field[data-name="_post_title"],
.rz-form-wrap .acf-fields > .acf-field[data-name="post_title"],
.its-form-wrap .acf-fields > .acf-field[data-name="_post_title"],
.its-form-wrap .acf-fields > .acf-field[data-name="post_title"] {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}
.rz-form-wrap .acf-tab-group,
.its-form-wrap .acf-tab-group {
    border: none !important;
    padding-top: 8px !important;
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap;
    list-style: none !important;
    margin: 0 !important;
}
.rz-form-wrap .acf-tab-group > li,
.its-form-wrap .acf-tab-group > li {
    flex: 1 1 0 !important;
    margin: 0 !important;
    list-style: none !important;
    text-align: center;
    min-width: 140px;
}
.rz-form-wrap .acf-tab-group > li > .acf-tab-button,
.its-form-wrap .acf-tab-group > li > .acf-tab-button {
    width: 100% !important;
    display: block !important;
}
.rz-form-wrap .acf-tab-button,
.its-form-wrap .acf-tab-button {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    color: var(--muted, #6B6B6B) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 14px 10px !important;
    margin: 0 !important;
    transition: color 0.15s, border-color 0.15s;
}
.rz-form-wrap .acf-tab-button:hover,
.its-form-wrap .acf-tab-button:hover {
    color: var(--teal, #1C3D34) !important;
}
.rz-form-wrap .acf-tab-button.selected,
.rz-form-wrap li.active .acf-tab-button,
.its-form-wrap .acf-tab-button.selected,
.its-form-wrap li.active .acf-tab-button {
    color: var(--teal, #1C3D34) !important;
    border-bottom-color: var(--g-bright, #8ED968) !important;
    background: transparent !important;
}

/* Champs — layout 2 colonnes flexbox sur desktop.
   Flexbox (vs grid) : ignore display:none correctement, donc
   pas de trous quand ACF masque les champs des autres tabs. */
.rz-form-wrap .acf-fields,
.its-form-wrap .acf-fields {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0 24px;
}
.rz-form-wrap .acf-fields > .acf-field,
.its-form-wrap .acf-fields > .acf-field {
    flex: 0 0 100%;
    max-width: 100%;
    border-bottom: 1px solid var(--border, #C4C4C4);
    border-top: none !important;
    padding: 18px 0 !important;
    box-sizing: border-box;
}
.rz-form-wrap .acf-fields > .acf-field:last-child,
.its-form-wrap .acf-fields > .acf-field:last-child { border-bottom: none; }

/* Sur viewport large : champs courts en 2 colonnes ; les autres en pleine largeur */
@media (min-width: 1100px) {
    /* Tous les types courts par défaut → 2 colonnes */
    .rz-form-wrap .acf-fields > .acf-field-text,
    .rz-form-wrap .acf-fields > .acf-field-email,
    .rz-form-wrap .acf-fields > .acf-field-url,
    .rz-form-wrap .acf-fields > .acf-field-number,
    .rz-form-wrap .acf-fields > .acf-field-select,
    .rz-form-wrap .acf-fields > .acf-field-radio,
    .rz-form-wrap .acf-fields > .acf-field-true_false,
    .rz-form-wrap .acf-fields > .acf-field-date_picker,
    .rz-form-wrap .acf-fields > .acf-field-time_picker,
    .rz-form-wrap .acf-fields > .acf-field-color_picker,
    .rz-form-wrap .acf-fields > .acf-field-user,
    .its-form-wrap .acf-fields > .acf-field-text,
    .its-form-wrap .acf-fields > .acf-field-email,
    .its-form-wrap .acf-fields > .acf-field-url,
    .its-form-wrap .acf-fields > .acf-field-number,
    .its-form-wrap .acf-fields > .acf-field-select,
    .its-form-wrap .acf-fields > .acf-field-radio,
    .its-form-wrap .acf-fields > .acf-field-true_false,
    .its-form-wrap .acf-fields > .acf-field-date_picker,
    .its-form-wrap .acf-fields > .acf-field-time_picker,
    .its-form-wrap .acf-fields > .acf-field-color_picker,
    .its-form-wrap .acf-fields > .acf-field-user {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
    /* Le titre du post reste pleine largeur */
    .rz-form-wrap .acf-fields > .acf-field[data-name="_post_title"],
    .rz-form-wrap .acf-fields > .acf-field[data-name="post_title"],
    .its-form-wrap .acf-fields > .acf-field[data-name="_post_title"],
    .its-form-wrap .acf-fields > .acf-field[data-name="post_title"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ACF inline width → on neutralise pour laisser flex gérer */
.rz-form-wrap .acf-fields > .acf-field[data-width],
.its-form-wrap .acf-fields > .acf-field[data-width] {
    width: auto !important;
}

.rz-form-wrap .acf-label label,
.its-form-wrap .acf-label label {
    color: var(--teal, #1C3D34) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px !important;
}
.rz-form-wrap .acf-label .description,
.rz-form-wrap .acf-input .description,
.its-form-wrap .acf-label .description,
.its-form-wrap .acf-input .description {
    color: var(--muted, #6B6B6B) !important;
    font-size: 12px !important;
    font-style: normal !important;
    margin-top: 4px !important;
}

/* Inputs */
.rz-form-wrap input[type="text"],
.rz-form-wrap input[type="email"],
.rz-form-wrap input[type="url"],
.rz-form-wrap input[type="tel"],
.rz-form-wrap input[type="number"],
.rz-form-wrap input[type="time"],
.rz-form-wrap input[type="date"],
.rz-form-wrap select,
.rz-form-wrap textarea,
.its-form-wrap input[type="text"],
.its-form-wrap input[type="email"],
.its-form-wrap input[type="url"],
.its-form-wrap input[type="tel"],
.its-form-wrap input[type="number"],
.its-form-wrap input[type="time"],
.its-form-wrap input[type="date"],
.its-form-wrap select,
.its-form-wrap textarea {
    width: 100%;
    border: 1px solid var(--border, #C4C4C4) !important;
    background: #fff !important;
    color: var(--ink, #1A1A1A) !important;
    padding: 10px 12px !important;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rz-form-wrap input:focus,
.rz-form-wrap input:focus-visible,
.rz-form-wrap select:focus,
.rz-form-wrap select:focus-visible,
.rz-form-wrap textarea:focus,
.rz-form-wrap textarea:focus-visible,
.its-form-wrap input:focus,
.its-form-wrap input:focus-visible,
.its-form-wrap select:focus,
.its-form-wrap select:focus-visible,
.its-form-wrap textarea:focus,
.its-form-wrap textarea:focus-visible {
    border-color: var(--g-bright, #8ED968) !important;
    box-shadow: 0 0 0 3px rgba(142, 217, 104, 0.25) !important;
    outline: none !important;
    outline-offset: 0 !important;
}

/* Override global du focus-visible noir hérité pour TOUS les champs des espaces front */
.rz-page-body input,
.rz-page-body select,
.rz-page-body textarea,
.its-fadm-body input,
.its-fadm-body select,
.its-fadm-body textarea {
    outline: none !important;
    border-color: var(--border, #C4C4C4) !important;
}
.rz-page-body input:hover,
.rz-page-body select:hover,
.rz-page-body textarea:hover,
.its-fadm-body input:hover,
.its-fadm-body select:hover,
.its-fadm-body textarea:hover {
    border-color: var(--sage, #ABC8A2) !important;
}
.rz-page-body input:focus,
.rz-page-body input:focus-visible,
.rz-page-body select:focus,
.rz-page-body select:focus-visible,
.rz-page-body textarea:focus,
.rz-page-body textarea:focus-visible,
.its-fadm-body input:focus,
.its-fadm-body input:focus-visible,
.its-fadm-body select:focus,
.its-fadm-body select:focus-visible,
.its-fadm-body textarea:focus,
.its-fadm-body textarea:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    border-color: var(--g-bright, #8ED968) !important;
    box-shadow: 0 0 0 3px rgba(142, 217, 104, 0.25) !important;
}
/* Override autofill borders (Chrome injecte parfois une bordure sombre) */
.rz-page-body input:-webkit-autofill,
.its-fadm-body input:-webkit-autofill {
    -webkit-text-fill-color: var(--ink, #1A1A1A) !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    border-color: var(--border, #C4C4C4) !important;
    transition: background-color 9999s ease-in-out 0s;
}
.rz-form-wrap textarea,
.its-form-wrap textarea { min-height: 96px; resize: vertical; }

/* Repeater */
.rz-form-wrap .acf-repeater,
.its-form-wrap .acf-repeater {
    border: 1px solid var(--border, #C4C4C4) !important;
    background: var(--vanilla, #F2E5D2);
    padding: 4px;
}
.rz-form-wrap .acf-repeater table.acf-table,
.its-form-wrap .acf-repeater table.acf-table {
    background: #fff;
    border-collapse: separate !important;
}
.rz-form-wrap .acf-repeater table.acf-table > thead > tr > th,
.its-form-wrap .acf-repeater table.acf-table > thead > tr > th {
    background: var(--teal, #1C3D34) !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none !important;
    padding: 10px 12px !important;
}
.rz-form-wrap .acf-repeater table.acf-table > tbody > tr > td,
.its-form-wrap .acf-repeater table.acf-table > tbody > tr > td {
    border-bottom: 1px solid var(--border, #C4C4C4) !important;
    padding: 10px !important;
    background: #fff;
}
.rz-form-wrap .acf-repeater .acf-row-handle,
.its-form-wrap .acf-repeater .acf-row-handle {
    background: var(--vanilla-d, #E8D8C0) !important;
    color: var(--teal, #1C3D34) !important;
}
.rz-form-wrap .acf-repeater .acf-actions,
.its-form-wrap .acf-repeater .acf-actions {
    background: transparent !important;
    padding: 8px 4px !important;
}
.rz-form-wrap .acf-repeater .acf-button.button,
.its-form-wrap .acf-repeater .acf-button.button {
    background: var(--teal, #1C3D34) !important;
    border-color: var(--teal, #1C3D34) !important;
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 14px !important;
}
.rz-form-wrap .acf-repeater .acf-button.button:hover,
.its-form-wrap .acf-repeater .acf-button.button:hover {
    background: var(--teal-dk, #172713) !important;
    border-color: var(--teal-dk, #172713) !important;
}

/* Gallery — toolbar bas (ACF natif), boutons brand */
.rz-form-wrap .acf-gallery,
.its-form-wrap .acf-gallery {
    border: 1px solid var(--border, #C4C4C4) !important;
    background: #fff;
    /* ACF impose height:400px inline → on l'override pour s'adapter au contenu */
    height: auto !important;
    min-height: 200px !important;
}
.rz-form-wrap .acf-gallery .acf-gallery-main,
.its-form-wrap .acf-gallery .acf-gallery-main {
    background: #fff;
    min-height: auto !important;
    height: auto !important;
}
.rz-form-wrap .acf-gallery .acf-gallery-attachments,
.its-form-wrap .acf-gallery .acf-gallery-attachments {
    min-height: auto !important;
    padding: 16px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-content: flex-start !important;
}
.rz-form-wrap .acf-gallery .acf-gallery-attachment,
.its-form-wrap .acf-gallery .acf-gallery-attachment {
    margin: 0 !important;
}
/* État vide : afficher message + dashed border */
.rz-form-wrap .acf-gallery .acf-gallery-attachments:empty::before,
.its-form-wrap .acf-gallery .acf-gallery-attachments:empty::before {
    content: "Aucune photo. Cliquez sur « Ajouter à la galerie » pour commencer.";
    display: block;
    text-align: center;
    color: var(--muted, #6B6B6B);
    font-size: 13px;
    padding: 32px 16px;
    border: 2px dashed var(--border, #C4C4C4);
    width: 100%;
}

/* Toolbar bas — fond neutre (plus de bloc teal "collé"), juste un séparateur fin */
.rz-form-wrap .acf-gallery .acf-gallery-toolbar,
.its-form-wrap .acf-gallery .acf-gallery-toolbar {
    background: #fff !important;
    border: none !important;
    border-top: 1px solid var(--border, #C4C4C4) !important;
    padding: 14px 16px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
}
.rz-form-wrap .acf-gallery .acf-gallery-toolbar h3,
.its-form-wrap .acf-gallery .acf-gallery-toolbar h3 {
    color: var(--teal, #1C3D34) !important;
    margin: 0 !important;
    font-size: 13px;
    font-weight: 700;
}

/* Boutons gallery — alignés sur le style .its-btn / .its-btn-outline */
.rz-form-wrap .acf-gallery .acf-gallery-add,
.its-form-wrap .acf-gallery .acf-gallery-add {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 11px 18px !important;
    border: none !important;
    background: var(--teal, #1C3D34) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(28, 61, 52, 0.15);
    height: auto !important;
    text-decoration: none !important;
}
.rz-form-wrap .acf-gallery .acf-gallery-add:hover,
.its-form-wrap .acf-gallery .acf-gallery-add:hover {
    background: var(--teal-dk, #172713) !important;
    box-shadow: 0 2px 6px rgba(28, 61, 52, 0.25);
}
.rz-form-wrap .acf-gallery .acf-gallery-add:focus,
.its-form-wrap .acf-gallery .acf-gallery-add:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(142, 217, 104, 0.35) !important;
}

/* Dropdown "Actions de groupe" — version outline (cohérent avec .its-btn-outline) */
.rz-form-wrap .acf-gallery .acf-gallery-toolbar select,
.its-form-wrap .acf-gallery .acf-gallery-toolbar select,
.rz-form-wrap .acf-gallery select,
.its-form-wrap .acf-gallery select {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 10px 36px 10px 16px !important;
    border: 1px solid var(--teal, #1C3D34) !important;
    background-color: #fff !important;
    color: var(--teal, #1C3D34) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231C3D34' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 7px !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(28, 61, 52, 0.08);
}
.rz-form-wrap .acf-gallery .acf-gallery-toolbar select:hover,
.its-form-wrap .acf-gallery .acf-gallery-toolbar select:hover {
    background-color: var(--vanilla, #F2E5D2) !important;
    border-color: var(--teal-dk, #172713) !important;
    color: var(--teal-dk, #172713) !important;
}
.rz-form-wrap .acf-gallery .acf-gallery-toolbar select:focus,
.its-form-wrap .acf-gallery .acf-gallery-toolbar select:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(142, 217, 104, 0.25) !important;
}
.rz-form-wrap .acf-gallery select option,
.its-form-wrap .acf-gallery select option {
    background: #fff;
    color: var(--ink, #1A1A1A);
    font-weight: 600;
}

/* Image / file uploader */
.rz-form-wrap .acf-image-uploader,
.rz-form-wrap .acf-file-uploader,
.its-form-wrap .acf-image-uploader,
.its-form-wrap .acf-file-uploader {
    border: 1px solid var(--border, #C4C4C4);
    padding: 12px;
    background: var(--vanilla, #F2E5D2);
}
.rz-form-wrap .acf-image-uploader .acf-actions a,
.rz-form-wrap .acf-file-uploader .acf-actions a,
.its-form-wrap .acf-image-uploader .acf-actions a,
.its-form-wrap .acf-file-uploader .acf-actions a {
    background: rgba(28, 61, 52, 0.85) !important;
    color: #fff !important;
    border: none !important;
}

/* Checkboxes / radios */
.rz-form-wrap .acf-checkbox-list,
.rz-form-wrap .acf-radio-list,
.its-form-wrap .acf-checkbox-list,
.its-form-wrap .acf-radio-list { margin: 0; }
.rz-form-wrap .acf-checkbox-list li,
.rz-form-wrap .acf-radio-list li,
.its-form-wrap .acf-checkbox-list li,
.its-form-wrap .acf-radio-list li { margin: 0 12px 8px 0 !important; }
.rz-form-wrap .acf-checkbox-list label,
.rz-form-wrap .acf-radio-list label,
.its-form-wrap .acf-checkbox-list label,
.its-form-wrap .acf-radio-list label {
    color: var(--ink, #1A1A1A) !important;
    font-size: 14px;
}

/* Submit ACF (sécurité, on a déjà le sticky bar) */
.rz-form-wrap .acf-form-submit,
.its-form-wrap .acf-form-submit {
    border-top: 1px solid var(--border, #C4C4C4);
    padding-top: 20px;
    margin-top: 16px;
}
.rz-form-wrap .acf-form-submit .button,
.its-form-wrap .acf-form-submit .button {
    background: var(--teal, #1C3D34) !important;
    border-color: var(--teal, #1C3D34) !important;
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 24px !important;
    font-size: 14px;
}

/* ---------------------------------------------------------
 * 9) Cards d'annonces (.annonces-grid / .annonce-card)
 *    Repris du plugin annonces (style commun).
 * --------------------------------------------------------- */
.annonces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    align-items: start;
}
.annonce-card {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    padding: 16px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    display: block;
}
.annonce-card:hover {
    border-color: var(--teal, #1C3D34);
    box-shadow: 0 2px 12px rgba(28, 61, 52, 0.1);
}
.annonce-cat {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid currentColor;
    display: inline-block;
    margin-bottom: 8px;
}
.annonce-cat.joueur { color: var(--teal, #1C3D34); }
.annonce-cat.coach { color: var(--blue, #1A3A8F); }
.annonce-cat.benevole { color: var(--yellow, #C47D08); }
.annonce-cat.event { color: var(--red, #C0392B); }
.annonce-cat.materiel,
.annonce-cat.autre { color: var(--muted, #6B6B6B); }
.annonce-cat.emploi { color: #2980B9; }
.annonce-title { font-size: 13px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.annonce-meta { font-size: 11px; color: var(--muted, #6B6B6B); }
.annonce-loc {
    font-size: 10px;
    color: var(--muted, #6B6B6B);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.annonce-new {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 6px;
    background: var(--g-bright, #8ED968);
    color: var(--teal-dk, #172713);
}

/* ---------------------------------------------------------
 * 10) Single annonce (compatibilité .its-annonce-*)
 * --------------------------------------------------------- */
.its-annonce-single .its-table th { background: #f9f9f9; }
.its-annonce-paywall .its-btn { margin-top: 4px; }
.its-oembed iframe { max-width: 100%; }

/* ---------------------------------------------------------
 * 11) Boutons d'action inline (Fermer / Rouvrir / Supprimer)
 *     dans le tableau "Mes annonces"
 * --------------------------------------------------------- */
.rz-action-form,
.its-action-form {
    display: inline;
    margin: 0;
}
.rz-action-btn,
.its-action-btn {
    background: none;
    border: none;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rz-action-btn--danger,
.its-action-btn--danger {
    color: var(--red, #C0392B);
}
.rz-action-btn--danger:hover,
.its-action-btn--danger:hover {
    color: #8B1A1A;
}
.rz-action-btn--success,
.its-action-btn--success {
    color: #27AE60;
}
.rz-action-btn--success:hover,
.its-action-btn--success:hover {
    color: #1E8449;
}

/* ---------------------------------------------------------
 * 12) Single annonce (page publique d'une annonce)
 * --------------------------------------------------------- */
.its-annonce-header {
    margin-bottom: 20px;
}
.its-annonce-header h1 {
    margin: 0 0 8px;
}
.its-annonce-header-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.its-annonce-highlight-flag {
    margin-bottom: 8px;
}
.its-badge--highlight {
    background: var(--teal, #1C3D34) !important;
    border-color: var(--teal, #1C3D34) !important;
    color: #fff !important;
}

/* Espace box avec espacement bas (filtres / résumé) */
.its-box--spaced {
    margin-bottom: 20px;
}

/* Single annonce — métadonnées date sous le titre */
.its-annonce-meta-date {
    color: var(--muted, #6B6B6B);
    font-size: 13px;
}

/* Single annonce — bloc contenu (table des champs ACF) */
.its-annonce-content {
    margin-top: 16px;
}
.its-annonce-content > .its-table {
    margin-bottom: 0;
}
.its-annonce-content > .its-table th {
    width: 35%;
    white-space: nowrap;
}
.its-annonce-content img {
    max-width: 300px;
    height: auto;
}

/* Single annonce — paywall (contenu réservé) */
.its-annonce-paywall {
    margin-top: 20px;
    padding: 24px;
    border: 2px dashed var(--border, #C4C4C4);
    background: #FAFAFA;
    text-align: center;
}
.its-annonce-paywall-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink, #1A1A1A);
}
.its-annonce-paywall-text {
    color: var(--muted, #6B6B6B);
    margin: 0 0 14px;
}

/* Single annonce — barre d'actions propriétaire */
.its-annonce-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--border, #C4C4C4);
}
.its-annonce-actions .its-action-form {
    margin: 0;
}

/* ---------------------------------------------------------
 * 13) Cellule "Titre + Photo" dans les tables
 *     (espace arbitre/staff/joueur quand on a une vignette)
 * --------------------------------------------------------- */
.rz-cell-with-photo,
.its-cell-with-photo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rz-cell-photo,
.its-cell-photo {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid var(--border, #C4C4C4);
    background: var(--vanilla, #F2E5D2);
}
.rz-cell-meta,
.its-cell-meta {
    font-size: 11px;
    color: var(--muted, #6B6B6B);
    margin-top: 2px;
}

/* Pile d'actions inline (séparées par un séparateur) */
.rz-actions-inline,
.its-actions-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rz-actions-sep,
.its-actions-sep {
    color: var(--border, #C4C4C4);
    font-weight: 400;
}

/* Bloc d'actions stickybar : titre + libellé secondaire */
.rz-stickybar-title,
.its-stickybar-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.rz-stickybar-title strong,
.its-stickybar-title strong {
    font-weight: 800;
    color: var(--teal, #1C3D34);
}
.rz-stickybar-role,
.its-stickybar-role {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    background: var(--vanilla, #F2E5D2);
    color: var(--teal, #1C3D34);
}

/* État vide (placeholder) inline, pour "Aucune annonce..." etc.
   En général on utilise <td colspan>, mais utile pour panneaux libres */
.rz-empty,
.its-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted, #6B6B6B);
    font-size: 13px;
    background: #fafafa;
    border: 1px solid var(--border, #C4C4C4);
}

/* Formulaire correction (espace arbitre) */
.rz-correction-form,
.its-correction-form {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    padding: 24px;
    margin-top: 16px;
}
.rz-correction-form label,
.its-correction-form label {
    display: block;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--teal, #1C3D34);
    margin: 12px 0 6px;
}
.rz-correction-form input[type="text"],
.rz-correction-form select,
.rz-correction-form textarea,
.its-correction-form input[type="text"],
.its-correction-form select,
.its-correction-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border, #C4C4C4);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}
.rz-correction-form textarea,
.its-correction-form textarea {
    min-height: 96px;
    resize: vertical;
}
.rz-correction-form-help,
.its-correction-form-help {
    color: var(--muted, #6B6B6B);
    font-size: 12px;
    margin-bottom: 14px;
}
.rz-msg-ok,
.its-msg-ok {
    padding: 10px 14px;
    background: var(--sage-lt, #D7EAE2);
    border: 1px solid var(--sage, #ABC8A2);
    color: var(--teal, #1C3D34);
    font-size: 13px;
    margin-bottom: 14px;
}
.rz-msg-err,
.its-msg-err {
    padding: 10px 14px;
    background: var(--red-lt, #FDECEA);
    border: 1px solid #E5A0A0;
    color: #8B1A1A;
    font-size: 13px;
    margin-bottom: 14px;
}

/* Bloc Live (espace club) — formulaire diffusion vidéo
   (un panneau par équipe gérée, intégré dans .rz-page-body) */
.rz-live-block,
.its-live-block {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    margin-bottom: 16px;
}
.rz-live-block-head,
.its-live-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #C4C4C4);
    gap: 12px;
    flex-wrap: wrap;
}
.rz-live-block-body,
.its-live-block-body {
    padding: 18px;
}
.rz-live-match-info,
.its-live-match-info {
    background: var(--vanilla, #F2E5D2);
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.rz-live-match-info-label,
.its-live-match-info-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--muted, #6B6B6B);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rz-live-match-title,
.its-live-match-title {
    font-weight: 700;
}
.rz-live-match-meta,
.its-live-match-meta {
    font-size: 12px;
    color: var(--muted, #6B6B6B);
}
.rz-live-form,
.its-live-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rz-live-form label,
.its-live-form label {
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--teal, #1C3D34);
}
.rz-live-form-row,
.its-live-form-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.rz-live-form-row input[type="url"],
.its-live-form-row input[type="url"] {
    flex: 1 1 240px;
    padding: 10px 12px;
    border: 1px solid var(--border, #C4C4C4);
    font-family: inherit;
    font-size: 13px;
}
.rz-live-form-row select,
.its-live-form-row select {
    padding: 10px;
    border: 1px solid var(--border, #C4C4C4);
    font-family: inherit;
    font-size: 13px;
}
.rz-live-actions,
.its-live-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.rz-btn--danger,
.its-btn--danger {
    background: var(--red, #C0392B) !important;
}
.rz-btn--danger:hover,
.its-btn--danger:hover {
    background: #8B1A1A !important;
}
.rz-live-help,
.its-live-help {
    font-size: 11px;
    color: var(--muted, #6B6B6B);
    margin: 0;
}

/* ---------------------------------------------------------
 * 14) Responsive
 * --------------------------------------------------------- */
@media (max-width: 768px) {
    .rz-page,
    .its-fadm-page { margin-top: 12px; padding: 0 12px; }
    .rz-form-wrap,
    .its-form-wrap { padding: 16px; }
    .rz-form-wrap .acf-tab-wrap,
    .its-form-wrap .acf-tab-wrap { margin: 0 -16px 16px !important; padding: 0 16px !important; }
    .rz-head,
    .its-head { padding: 12px 16px; gap: 8px; }
    .rz-tabs,
    .its-tabs { gap: 12px; }
    .rz-tab,
    .its-tab { font-size: 12px; }
    .rz-stickybar,
    .its-stickybar { padding: 10px 12px; }
    .rz-table thead,
    .its-table thead { display: none; }
    .rz-table, .rz-table tbody, .rz-table tr, .rz-table td,
    .its-table, .its-table tbody, .its-table tr, .its-table td {
        display: block;
        width: 100%;
    }
    .rz-table tr,
    .its-table tr {
        border: 1px solid var(--border, #C4C4C4);
        margin-bottom: 10px;
        padding: 8px;
    }
    .rz-table td,
    .its-table td {
        border: none;
        padding: 6px 0;
    }
    .rz-table td:first-child,
    .its-table td:first-child { font-weight: 800; }
}

/* =========================================================
 * Recherche de fiche (espaces front-admin)
 * Affiché quand l'utilisateur ne gère aucune fiche
 * ========================================================= */
.its-search-fiche {
    padding: 24px;
    background: var(--vanilla, #F2E5D2);
    border-left: 3px solid var(--g-bright, #8ED968);
    margin: 0;
}
.its-search-fiche-help {
    font-size: 14px;
    color: var(--ink, #1A1A1A);
    margin: 0 0 14px;
}
.its-search-fiche-form {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.its-search-fiche-form input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 10px 14px;
    border: 1px solid var(--border, #C4C4C4);
    background: #fff;
    font-size: 14px;
    font-family: inherit;
}
.its-search-fiche-form input[type="text"]:focus {
    outline: none;
    border-color: var(--g-bright, #8ED968);
    box-shadow: 0 0 0 3px rgba(142, 217, 104, 0.25);
}
.its-search-fiche-form button {
    padding: 10px 20px;
    border: none;
    background: var(--teal, #1C3D34);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s;
}
.its-search-fiche-form button:hover {
    background: var(--teal-dk, #172713);
}
.its-search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.its-search-result-card {
    background: #fff;
    padding: 14px;
    border: 1px solid var(--border, #C4C4C4);
}
.its-search-result-card h4 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
}
.its-search-result-card .its-search-result-meta {
    margin: -4px 0 8px;
    color: var(--muted, #6B6B6B);
    font-size: 12px;
}
.its-search-result-card .actions a {
    color: var(--teal, #1C3D34);
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
}
.its-search-no-result {
    color: var(--muted, #6B6B6B);
    font-size: 13px;
    padding: 8px 0;
}

/* =========================================================
 * Onglet "Mon compte" (5 espaces front-admin)
 * ========================================================= */
.its-account-block,
.rz-account-block {
    padding: 24px;
    background: #fff;
}
.its-account-help,
.rz-account-help {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--ink, #1A1A1A);
}
.its-account-actions,
.rz-account-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================================================
 * Mon compte — layout 2 colonnes (nav + contenu)
 * ========================================================= */
.its-account-layout {
    display: flex;
    background: #fff;
    min-height: 400px;
}
.its-account-nav {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--border, #C4C4C4);
    padding: 12px 0;
    display: flex;
    flex-direction: column;
}
.its-account-nav-item {
    display: block;
    padding: 12px 20px;
    color: var(--ink, #1A1A1A);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.its-account-nav-item:hover {
    background: rgba(28, 61, 52, 0.06);
    color: var(--teal, #1C3D34);
}
.its-account-nav-item.active {
    background: rgba(28, 61, 52, 0.04);
    color: var(--teal, #1C3D34);
    border-left-color: var(--g-bright, #8ED968);
    font-weight: 800;
}
/* Séparateur cliquable : déclenche le repli du groupe (button, pas h2) */
.its-account-nav-sep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px 6px;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted, #6B6B6B);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border, #C4C4C4);
    margin: 8px 0 0;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
/* Premier séparateur : pas de trait ni d'espace en haut (nav commence direct) */
.its-account-nav > .its-account-nav-sep:first-child,
.its-account-nav > .its-account-nav-sep:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 8px;
}
.its-account-nav-sep:hover {
    color: var(--teal, #1C3D34);
    background: rgba(28, 61, 52, 0.03);
}
.its-account-nav-sep-label {
    flex: 1;
    min-width: 0;
}
.its-account-nav-sep-chev {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
    margin: -4px 0 0 8px;
    flex-shrink: 0;
}
.its-account-nav-sep[aria-expanded="false"] .its-account-nav-sep-chev {
    transform: rotate(-45deg);
    margin-top: 0;
}
/* Focus visible (RGAA 10.7) — anneau lisible sur les items et le bouton-séparateur */
.its-account-nav-item:focus-visible,
.its-account-nav-sep:focus-visible {
    outline: 2px solid var(--g-bright, #8ED968);
    outline-offset: -2px;
    z-index: 1;
}
.its-account-nav-group[hidden] {
    display: none;
}
/* Respect prefers-reduced-motion (RGAA 13.8) — désactive l'anim du chevron */
@media (prefers-reduced-motion: reduce) {
    .its-account-nav-sep-chev {
        transition: none;
    }
}
/* Pied de nav : liens transverses (sortie de l'espace) + déconnexion.
 * Fond blanc volontaire — le body de la page peut être vanilla, on évite
 * la collision "vanilla sur vanilla". La séparation est portée par
 * border-top + typo désaturée. */
.its-account-nav-foot {
    margin-top: auto;
    /* Garantit un gap visuel même quand le contenu est court (pas de space
     * disponible pour margin-top:auto) — évite le "Se déconnecter" qui
     * semble collé sous Mon réseau. */
    padding-top: 14px;
    border-top: 1px solid var(--border, #C4C4C4);
    background: #fff;
    display: flex;
    flex-direction: column;
}
/* Force une séparation minimale (les groupes au-dessus peuvent finir
 * sans border si fermés — on garantit l'espace). */
.its-account-nav-group + .its-account-nav-foot,
.its-account-nav-sep + .its-account-nav-foot {
    margin-top: 16px;
}
.its-account-nav-foot .its-account-nav-item {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #6B6B6B);
    border-left: 0;
    padding: 9px 20px;
}
.its-account-nav-foot .its-account-nav-item:hover {
    color: var(--teal, #1C3D34);
    background: rgba(28, 61, 52, 0.04);
}
.its-account-nav-footlink::after {
    content: " \2197";
    font-size: 10px;
    color: var(--muted, #6B6B6B);
    margin-left: 4px;
}
/* Utilitaire RGAA : texte visible uniquement par les lecteurs d'écran */
.its-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Déconnexion : bouton outlined visible, rouge au hover.
 * Avant : link discret, indistingable des autres items → on le ratait.
 * Maintenant : pseudo-bouton centré avec bordure + uppercase + icône,
 * clairement identifiable comme action sortante. */
.its-account-nav-logout {
    color: var(--muted, #6B6B6B) !important;
    border-top: 1px solid var(--border, #C4C4C4);
}
.its-account-nav-foot .its-account-nav-logout {
    /* Override : on traite le logout comme un bouton outlined dans le pied,
     * pas comme un nav-item. Forme un cluster visuel séparé en bas de sidebar. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 14px 4px;
    padding: 10px 14px;
    border: 1px solid var(--border, #C4C4C4);
    border-radius: 4px;
    background: var(--white, #fff);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted, #6B6B6B) !important;
    transition: border-color .15s, color .15s, background .15s;
}
.its-account-nav-foot .its-account-nav-logout::before {
    /* Petite icône power/logout SVG inline — pas de dépendance externe. */
    content: '';
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex-shrink: 0;
}
.its-account-nav-foot .its-account-nav-footlink + .its-account-nav-logout {
    /* Si un footer-link précède le logout, on ajoute un petit gap visuel. */
    margin-top: 8px;
}
.its-account-nav-foot .its-account-nav-logout:hover,
.its-account-nav-foot .its-account-nav-logout:focus-visible {
    color: var(--red, #C0392B) !important;
    background: var(--red-lt, #FDECEA);
    border-color: var(--red, #C0392B);
}
.its-account-nav-cta {
    display: block;
    margin: 12px 16px 4px;
    text-align: center;
    text-decoration: none !important;
}
.its-account-nav-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: var(--vanilla, #F2E5D2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--teal, #1C3D34);
    line-height: 1.4;
}
.its-account-nav-item.active .its-account-nav-count {
    background: var(--g-bright, #8ED968);
    color: var(--teal, #1C3D34);
}

.its-account-content {
    flex: 1;
    padding: 28px 32px;
    background: #fff;
}
.its-account-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
    margin: 0 0 8px;
    letter-spacing: 0.3px;
}
.its-account-section-help {
    font-size: 13px;
    color: var(--muted, #6B6B6B);
    margin: 0 0 22px;
}

.its-account-form {
    max-width: 480px;
}
.its-account-form-row {
    margin-bottom: 16px;
}
/* Séparateur visuel entre les sous-formulaires d'un même pane
   (ex: pane "Mes infos perso" = profil + email). */
.its-account-form-sep {
    max-width: 480px;
    margin: 28px 0;
    border: 0;
    border-top: 1px solid var(--border, #C4C4C4);
}
.its-account-phone-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.its-account-phone-code {
    flex: 0 0 180px;
    width: 180px;
    max-width: 180px;
    min-width: 0;
    padding: 10px 32px 10px 12px;
    border: 1px solid var(--border, #C4C4C4);
    background: #fff;
    color: var(--teal, #1C3D34);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231C3D34' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
}
.its-account-phone-num {
    flex: 1 1 200px;
    min-width: 180px;
    padding: 10px 12px;
    border: 1px solid var(--border, #C4C4C4);
    background: #fff;
    color: var(--teal, #1C3D34);
    font-size: 14px;
    font-family: inherit;
}
.its-account-phone-code:focus,
.its-account-phone-num:focus {
    outline: none;
    border-color: var(--g-bright, #8ED968);
    box-shadow: 0 0 0 3px rgba(142, 217, 104, 0.25);
}
@media (max-width: 520px) {
    .its-account-phone-row { flex-direction: column; }
    .its-account-phone-code { min-width: 0; width: 100%; }
}
.its-account-form label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.its-account-form input[type="text"],
.its-account-form input[type="email"],
.its-account-form input[type="password"],
.its-account-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border, #C4C4C4);
    background: #fff;
    color: var(--ink, #1A1A1A);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}
.its-account-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231C3D34' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;
    padding-right: 36px;
    cursor: pointer;
}
.its-account-form input:focus,
.its-account-form select:focus {
    outline: none;
    border-color: var(--g-bright, #8ED968);
    box-shadow: 0 0 0 3px rgba(142, 217, 104, 0.25);
}
.its-account-form-actions {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.its-account-readonly {
    padding: 10px 12px;
    background: var(--vanilla, #F2E5D2);
    border: 1px solid var(--vanilla-d, #E8D8C0);
    color: var(--ink, #1A1A1A);
    font-size: 14px;
}

.its-account-msg-ok {
    padding: 10px 14px;
    background: var(--sage-lt, #D7EAE2);
    border-left: 3px solid var(--sage, #ABC8A2);
    color: var(--teal, #1C3D34);
    font-size: 13px;
    margin-bottom: 16px;
}
.its-account-msg-err {
    padding: 10px 14px;
    background: var(--red-lt, #FDECEA);
    border-left: 3px solid var(--red, #C0392B);
    color: #8B1A1A;
    font-size: 13px;
    margin-bottom: 16px;
}

.its-account-avatar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.its-account-avatar img {
    border-radius: 0;
    border: 1px solid var(--border, #C4C4C4);
}
.its-account-avatar-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
}
.its-account-avatar-email {
    font-size: 13px;
    color: var(--muted, #6B6B6B);
}

.its-account-sub-info {
    background: var(--vanilla, #F2E5D2);
    padding: 18px 22px;
    margin: 0 0 18px;
    border-left: 3px solid var(--g-bright, #8ED968);
}
.its-account-sub-info dt {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted, #6B6B6B);
    margin-bottom: 2px;
}
.its-account-sub-info dd {
    font-size: 15px;
    font-weight: 700;
    color: var(--teal, #1C3D34);
    margin: 0 0 12px;
}
.its-account-sub-info dd:last-child {
    margin-bottom: 0;
}
.its-account-sub-info dd code {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    background: #fff;
    padding: 2px 6px;
    border: 1px solid var(--border, #C4C4C4);
    color: var(--muted, #6B6B6B);
    font-weight: 500;
}
.its-account-sub-meta {
    color: var(--muted, #6B6B6B);
    font-weight: 400;
    font-size: 12px;
}
.its-account-section-subtitle {
    font-size: 14px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #C4C4C4);
}
.its-account-rgpd-help {
    margin: 8px 0 12px;
    line-height: 1.5;
}
.its-account-rgpd-revoke-form {
    margin: 0;
}
.its-badge--rgpd-revoked {
    background: var(--red-lt, #FDECEA);
    border-color: #E5A0A0;
    color: #8B1A1A;
}
.its-account-rgpd-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}
.its-account-rgpd-option {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    border-left: 3px solid var(--teal, #1C3D34);
}
.its-account-rgpd-option--danger {
    border-left-color: var(--red, #C0392B);
    background: #FFFAFA;
}
.its-account-rgpd-option-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.its-account-rgpd-option-head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.its-account-rgpd-option--danger .its-account-rgpd-option-head h4 {
    color: var(--red, #C0392B);
}
.its-account-rgpd-option p {
    margin: 6px 0 12px;
    line-height: 1.55;
}

.its-account-orders-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.its-account-orders-table th,
.its-account-orders-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, #C4C4C4);
    font-size: 13px;
    color: var(--ink, #1A1A1A);
}
.its-account-orders-table th {
    background: var(--vanilla, #F2E5D2);
    color: var(--teal, #1C3D34);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
}

@media (max-width: 768px) {
    .its-account-layout {
        flex-direction: column;
    }
    .its-account-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border, #C4C4C4);
    }
    .its-account-nav-item {
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    .its-account-nav-item.active {
        border-left: none;
        border-bottom-color: var(--g-bright, #8ED968);
    }
    .its-account-nav-logout {
        margin-top: 0;
        border-top: none;
    }
    .its-account-nav-cta {
        margin: 12px 16px;
    }
    .its-account-content {
        padding: 20px 16px;
    }
}

/* ════════════════════════════════════════════════════════════════
 * Demande de correction — liste des champs (champ par champ)
 * ════════════════════════════════════════════════════════════════ */
.its-correction-list {
    display: block;
}
.its-correction-field {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    padding: 14px 18px;
    margin-bottom: 10px;
}
.its-correction-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.its-correction-field-label {
    font-weight: 800;
    color: var(--teal, #1C3D34);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.its-correction-field-label code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--muted, #6B6B6B);
    background: var(--vanilla, #F2E5D2);
    padding: 1px 6px;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.its-correction-field-value {
    font-size: 14px;
    color: var(--ink, #1A1A1A);
    line-height: 1.5;
    word-break: break-word;
}
.its-correction-empty {
    color: var(--muted, #6B6B6B);
    font-style: normal;
    font-size: 13px;
}
.its-correction-thumb {
    max-width: 80px;
    height: auto;
    border: 1px solid var(--border, #C4C4C4);
}
.its-correction-field-form {
    margin-top: 12px;
    padding: 14px;
    background: var(--vanilla, #F2E5D2);
    border-left: 3px solid var(--g-bright, #8ED968);
}
.its-correction-field-form label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--teal, #1C3D34);
    margin: 8px 0 4px;
}
.its-correction-field-form label:first-child { margin-top: 0; }
.its-correction-field-form input[type="text"],
.its-correction-field-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border, #C4C4C4);
    background: #fff;
    font-size: 14px;
    font-family: inherit;
}
.its-correction-field-form textarea { min-height: 64px; resize: vertical; }
.its-correction-field-form input:focus,
.its-correction-field-form textarea:focus {
    outline: none;
    border-color: var(--g-bright, #8ED968);
    box-shadow: 0 0 0 3px rgba(142, 217, 104, 0.25);
}
.its-correction-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    flex-wrap: wrap;
}
.its-correction-field-success {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--sage-lt, #D7EAE2);
    border-left: 3px solid var(--sage, #ABC8A2);
    color: var(--teal, #1C3D34);
    font-size: 13px;
}

/* Formulaire "Autre demande" texte libre — bas de la correction list */
.its-correction-free {
    margin-top: 24px;
    padding: 22px 24px;
    background: var(--vanilla, #F2E5D2);
    border-left: 3px solid var(--g-bright, #8ED968);
}
.its-correction-free-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.its-correction-free-form {
    margin-top: 14px;
}
.its-correction-free-form label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--teal, #1C3D34);
    margin: 12px 0 4px;
}
.its-correction-free-form label:first-child { margin-top: 0; }
.its-correction-free-form input[type="text"],
.its-correction-free-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border, #C4C4C4);
    background: #fff;
    color: var(--ink, #1A1A1A);
    font-size: 14px;
    font-family: inherit;
}
.its-correction-free-form textarea {
    min-height: 90px;
    resize: vertical;
}
.its-correction-free-form input:focus,
.its-correction-free-form textarea:focus {
    outline: none !important;
    border-color: var(--g-bright, #8ED968) !important;
    box-shadow: 0 0 0 3px rgba(142, 217, 104, 0.25) !important;
}
.its-correction-form-help {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--muted, #6B6B6B);
    line-height: 1.5;
}

/* Espace supporter — sélection courante club / équipe */
.its-supporter-current {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 20px;
    background: var(--vanilla, #F2E5D2);
    border-left: 3px solid var(--g-bright, #8ED968);
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.its-supporter-current-thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    flex-shrink: 0;
}
.its-supporter-current-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 180px;
}
.its-search-result-thumb {
    width: 100%;
    height: 80px;
    object-fit: contain;
    background: #fff;
    margin-bottom: 8px;
}
.its-supporter-current-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted, #6B6B6B);
}
.its-supporter-current-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
}
.its-supporter-current-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Espace supporter — favoris multiples (bars / joueurs) */
.its-supporter-counter {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--teal, #1C3D34);
    letter-spacing: 0.5px;
}
.its-supporter-favs-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted, #6B6B6B);
    margin-bottom: 8px;
}
.its-supporter-favs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.its-supporter-fav-item {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #C4C4C4);
    border-left: 3px solid var(--g-bright, #8ED968);
    flex-wrap: wrap;
    transition: box-shadow .15s, border-color .15s;
}
.its-supporter-fav-item:hover {
    border-color: var(--g-bright, #8ED968);
    box-shadow: 0 2px 12px rgba(28,61,52,.12);
}
.its-supporter-form-inline {
    display: inline;
}
.its-supporter-search-wrap {
    margin-top: 18px;
}
.its-btn-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Espace supporter — Mon fil (flux unifié articles + annonces) */
.its-supporter-fil-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.its-supporter-fil-card {
    display: flex;
    gap: 16px;
    padding: 12px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #C4C4C4);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s;
}
.its-supporter-fil-card:hover {
    border-color: var(--g-bright, #8ED968);
    box-shadow: 0 2px 12px rgba(28,61,52,.12);
}
.its-supporter-fil-card-img {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    overflow: hidden;
    background: var(--vanilla, #F2E5D2);
}
.its-supporter-fil-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.its-supporter-fil-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.its-supporter-fil-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: var(--muted, #6B6B6B);
}
.its-supporter-fil-card-meta time {
    margin-left: auto;
}
.its-supporter-fil-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--teal, #1C3D34);
    margin: 0;
}
.its-supporter-fil-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 2px;
}
.its-supporter-fil-badge.is-article {
    background: var(--teal, #1C3D34);
    color: #fff;
}
.its-supporter-fil-badge.is-annonce {
    background: var(--g-bright, #8ED968);
    color: var(--teal, #1C3D34);
}
.its-supporter-fil-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    color: var(--muted, #6B6B6B);
    border-radius: 2px;
}
.its-supporter-fil-pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}
.its-supporter-fil-pagination .its-pagination-link {
    display: inline-block;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    color: var(--teal, #1C3D34);
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
}
.its-supporter-fil-pagination .its-pagination-link.active {
    background: var(--teal, #1C3D34);
    color: #fff;
    border-color: var(--teal, #1C3D34);
}
@media (max-width: 600px) {
    .its-supporter-fil-card-img {
        width: 90px;
        height: 60px;
    }
    .its-supporter-fil-card-meta time {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* Espace supporter — Prochains matchs */
.its-supporter-fil-matches {
    margin-bottom: 24px;
}
.its-supporter-fil-section-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted, #6B6B6B);
    margin: 0 0 10px;
}
.its-supporter-fil-matches-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.its-supporter-fil-match-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #C4C4C4);
    border-left: 3px solid var(--g-bright, #8ED968);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s;
}
.its-supporter-fil-match-card:hover {
    border-color: var(--g-bright, #8ED968);
    box-shadow: 0 2px 12px rgba(28,61,52,.12);
}
.its-supporter-fil-match-date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 4px 6px;
    background: var(--vanilla, #F2E5D2);
    border-radius: 2px;
}
.its-supporter-fil-match-day {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--teal, #1C3D34);
    line-height: 1.2;
}
.its-supporter-fil-match-time {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted, #6B6B6B);
    line-height: 1.2;
    margin-top: 2px;
}
.its-supporter-fil-match-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.its-supporter-fil-match-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--teal, #1C3D34);
}
.its-supporter-fil-match-compet {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted, #6B6B6B);
}

/* Espace président — classes utilisées par le rendu sidebar */
.its-president-photo-wrap {
    margin-bottom: 12px;
}
.its-president-photo {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid var(--border, #C4C4C4);
}
.its-president-meta-row {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted, #6B6B6B);
}
.its-president-help {
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--muted, #6B6B6B);
}

/* ════════════════════════════════════════════════
 * Mon actu — page dédiée (/mon-actu/)
 * ════════════════════════════════════════════════ */

/* Neutralise les wrappers theme `itsrugby` (page.php enveloppe tout dans
 * .article-content-wrap > .container.its-page-container > .article-body) */
body.its-mon-actu-page .article-content-wrap,
body.its-mon-actu-page .its-page-container,
body.its-mon-actu-page .container.its-page-container,
body.its-mon-actu-page .its-page-article,
body.its-mon-actu-page article.its-page-article {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    background: transparent !important;
}
/* Le titre WP de la page ("Mon actu") est doublonné avec le hero du shortcode */
body.its-mon-actu-page .its-page-title,
body.its-mon-actu-page .entry-header,
body.its-mon-actu-page .page-header {
    display: none !important;
}
/* Wrappers WP standard (au cas où) */
body.its-mon-actu-page .site-main,
body.its-mon-actu-page .entry-content,
body.its-mon-actu-page .page-content,
body.its-mon-actu-page #content,
body.its-mon-actu-page .hentry,
body.its-mon-actu-page article.page {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Largeur 90% — strictement aligné avec la home (.home-bento + .matchs-grid + .annonces-grid) */
.its-mon-actu .page-hero .container,
.its-mon-actu .section-title,
.its-mon-actu .matchs-grid,
.its-mon-actu .annonces-grid,
.its-mon-actu .its-mon-actu-stats-grid {
    max-width: 90%;
    margin: 0 auto;
}
.its-mon-actu .section-title {
    margin-bottom: 20px;
}
/* .home-bento garde déjà max-width:90% du CSS home (itsrugby-home.css) */

/* Empty state du bento (aucun article taggué sur les favoris) */
.its-mon-actu-empty-bento {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    background: var(--teal, #1C3D34);
    color: var(--vanilla, #F2E5D2);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 200px;
}
.its-mon-actu-empty-bento p {
    margin: 4px 0;
    color: var(--vanilla, #F2E5D2);
}
.its-mon-actu-empty-bento .its-mon-actu-empty-help {
    font-size: 13px;
    opacity: 0.7;
}

/* Liste compacte des matchs dans le sidebar bento */
.its-mon-actu-matches-list {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    gap: 10px;
    max-height: 100%;
    overflow-y: auto;
}
.its-mon-actu-match {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--vanilla, #F2E5D2);
    text-decoration: none !important;
    transition: background 0.15s;
    border-left: 3px solid var(--g-bright, #8ED968);
}
.its-mon-actu-match:hover {
    background: rgba(255, 255, 255, 0.12);
}
.its-mon-actu-match-date {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--g-bright, #8ED968);
}
.its-mon-actu-match-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}
.its-mon-actu-match-compet {
    font-size: 10px;
    color: rgba(242, 229, 210, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* (its-mon-actu-grid/-card supprimés — annonces utilisent désormais .annonces-grid + .annonce-card du commun) */

/* Brèves dans la sidebar bento (style home, mais SSR) */
.sidebar-breve {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none !important;
    color: var(--vanilla, #F2E5D2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.15s;
}
.sidebar-breve:last-child { border-bottom: none; }
.sidebar-breve:hover { background: rgba(255, 255, 255, 0.06); }
.sidebar-breve-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}
.sidebar-breve-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sidebar-breve-date {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--g-bright, #8ED968);
}
.sidebar-breve-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0;
}
.sidebar-breve-empty {
    padding: 14px;
    font-size: 12px;
    color: rgba(242, 229, 210, 0.6);
    text-align: center;
}

/* (Classes anciennes its-mon-actu-result(s)/upcoming/matches-* supprimées —
   on utilise désormais .match-card et .annonce-card du CSS commun) */

/* Card joueur — style fiche premium */
.its-mon-actu-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 16px;
}
.its-player-card {
    background: var(--white, #fff);
    border: 1px solid var(--border, #C4C4C4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.its-player-card-head {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--teal, #1C3D34) 0%, #254D42 100%);
    color: var(--vanilla, #F2E5D2) !important;
    text-decoration: none !important;
    align-items: center;
    transition: background 0.2s;
}
.its-player-card-head:hover {
    background: linear-gradient(135deg, #254D42 0%, var(--teal, #1C3D34) 100%);
}
.its-player-card-photo {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid var(--g-bright, #8ED968);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.its-player-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.its-player-card-photo-fallback {
    font-size: 32px;
    font-weight: 900;
    color: var(--vanilla, #F2E5D2);
    text-transform: uppercase;
}
.its-player-card-id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.its-player-card-name {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.its-player-card-job {
    display: inline-block;
    width: fit-content;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: var(--g-bright, #8ED968);
    color: var(--teal, #1C3D34);
    padding: 3px 8px;
    margin-top: 2px;
}
.its-player-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 11px;
    color: rgba(242, 229, 210, 0.85);
    margin-top: 4px;
}
.its-player-card-team {
    font-weight: 700;
    color: #fff;
}
.its-player-card-comp,
.its-player-card-saison {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--g-bright, #8ED968);
}

/* KPIs : on réutilise .stat-kpi-grid + .stat-kpi du commun, juste adapter le grid 4-5 cols */
.its-player-card-kpis {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    margin: 0;
    padding: 12px;
    gap: 8px;
}
.its-player-card-kpis .stat-kpi {
    border: none;
    background: var(--vanilla, #F2E5D2);
    padding: 12px 8px;
    text-align: center;
}
.its-player-card-kpis .stat-kpi-val {
    font-size: 22px;
}
.its-player-card-kpis .stat-kpi-lbl {
    font-size: 9px;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .its-mon-actu-stats-grid {
        grid-template-columns: 1fr;
    }
    .its-player-card-photo {
        width: 64px;
        height: 64px;
    }
    .its-player-card-name {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .its-mon-actu .page-hero .container,
    .its-mon-actu .home-bento,
    .its-mon-actu .its-mon-actu-grid,
    .its-mon-actu .its-mon-actu-results,
    .its-mon-actu .its-mon-actu-stats-grid,
    .its-mon-actu .section-title {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================================
   Notifications compte — bandeau en tête d'espace membre
   (its_account_notices_render / its-space-layout.php)
   Charte It's : angles droits, teal/sage/vanilla.
   ========================================================= */
.its-account-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--sage-l, #E6EFE2);
    border: 1px solid var(--sage, #ABC8A2);
    border-left: 4px solid var(--g-bright, #8ED968);
    color: var(--teal, #1C3D34);
}
.its-account-notice-body {
    flex: 1 1 auto;
    min-width: 0;
}
.its-account-notice-title {
    display: block;
    margin-bottom: 3px;
    font-weight: 700;
    color: var(--teal, #1C3D34);
}
.its-account-notice-body p {
    margin: 0;
    line-height: 1.45;
    color: var(--teal, #1C3D34);
}
.its-account-notice-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 20px;
    text-decoration: none;
    color: var(--teal, #1C3D34);
    background: transparent;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}
.its-account-notice-close:hover,
.its-account-notice-close:focus {
    background: var(--vanilla, #F2E5D2);
    border-color: var(--sage, #ABC8A2);
    color: var(--teal, #1C3D34);
}