/* ===========================================================
   rhil-design.css  -  langage visuel commun du site.
   Repris de la fiche joueur (ardoise #1e293b, bleu ciel #0ea5e9,
   panneaux gris clair, cartes blanches arrondies). Préfixe rh-.
   =========================================================== */
:root {
    /* Couleurs tirées du logo RHIL : bleu nuit, violet, bleu électrique */
    --rh-navy: #052767;
    --rh-navy-deep: #0b1f4d;
    --rh-violet: #3a0647;
    --rh-grad: linear-gradient(135deg, #052767 0%, #3a0647 100%);
    --rh-ink: #14213d;
    --rh-ink-2: #5b6785;
    --rh-line: #e3e8f2;
    --rh-panel: #f6f8fc;
    --rh-brand: #1f6fe5;
    --rh-brand-dark: #105090;
    --rh-slate: #0b1f4d;
    --rh-slate-line: #1c3a78;
    --rh-goal: #10b981;
    --rh-assist: #8b5cf6;
    --rh-record: #f59e0b;
    --rh-danger: #dc2626;
}

/* ---- Page ---- */
.rh-page { width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
.rh-back { display: inline-flex; align-items: center; gap: .3rem; color: var(--rh-ink-2); text-decoration: none; font-size: .9rem; margin-bottom: 1rem; }
.rh-back:hover { color: var(--rh-brand-dark); }
.rh-title { font-size: 1.9rem; font-weight: 700; color: var(--rh-ink); margin: 0 0 .15rem; }
.rh-subtitle { color: var(--rh-ink-2); font-size: .95rem; margin: 0 0 1.25rem; }

/* ---- Pastilles (saisons, filtres) : identiques à la fiche joueur ---- */
.rh-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.rh-pill { border: none; border-radius: 20px; padding: 8px 18px; font-weight: 600; font-size: .9rem; cursor: pointer;
           background: #dde4f2; color: #2a3a63; transition: all .2s ease; white-space: nowrap; flex: none; }
.rh-pill:hover { background: #cdd8ee; }
.rh-pill.is-active { background: var(--rh-brand); color: #fff; box-shadow: 0 4px 12px rgba(31,111,229,.3); }

/* ---- Panneau (section) ---- */
.rh-panel { background: var(--rh-panel); border: 1px solid var(--rh-line); border-radius: 16px; padding: 20px; margin-bottom: 1.5rem; }
.rh-panel-title { font-size: 1.15rem; font-weight: 700; color: var(--rh-ink); margin: 0 0 .75rem; }
.rh-panel-sub { font-size: .8rem; color: var(--rh-ink-2); margin: -.4rem 0 .9rem; }

/* ---- Cartes « insight » ---- */
.rh-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.rh-insight { background: #fff; border: 1px solid var(--rh-line); border-radius: 12px; padding: 16px; flex: 1; min-width: 230px; }
.rh-insight.is-link { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.rh-insight.is-link:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,.06); }
.rh-cap { font-size: .75rem; text-transform: uppercase; font-weight: 700; letter-spacing: .03em; color: var(--rh-ink-2); }
.rh-big { font-size: 1.9rem; font-weight: 800; line-height: 1.15; color: var(--rh-accent, var(--rh-brand)); }
.rh-big small { font-size: .9rem; font-weight: 600; margin-left: .25rem; }
.rh-name { font-weight: 700; color: var(--rh-ink); }
.rh-tag { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: #f1f5f9; color: var(--rh-ink); font-size: .8rem; }
.rh-meta { font-size: .8rem; color: var(--rh-ink-2); }
.rh-row + .rh-row { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #f1f5f9; }

/* ---- Tableau : même style que le tableau « cumul » de la fiche joueur ---- */
.rh-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.rh-table { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--rh-slate); text-align: center; color: var(--rh-ink); }
.rh-table th { background: var(--rh-slate); color: #fff; font-size: .85rem; padding: 10px; border: 1px solid var(--rh-slate-line); white-space: nowrap; user-select: none; }
.rh-table td { padding: 12px 10px; border: 1px solid var(--rh-line); }
.rh-table .rh-left { text-align: left; padding-left: 15px; }
.rh-table th.is-sortable { cursor: pointer; }
.rh-table th.is-sortable:hover { color: #9ec5ff; }
.rh-table th.is-active { color: #7fb2ff; }
.rh-table tbody tr:hover { background: #f4f7fd; }
.rh-table a { color: var(--rh-ink); font-weight: 700; text-decoration: none; }
.rh-table a:hover { color: var(--rh-brand-dark); }
.rh-table a.is-club { color: var(--rh-brand); font-weight: 600; }
.rh-pts { font-weight: 700; color: var(--rh-brand); }

/* ---- Rang ---- */
.rh-rank { display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 6px; font-weight: 700; font-size: .85rem; color: var(--rh-ink-2); }
.rh-rank.r1 { background: #ffc107; color: #1e293b; }
.rh-rank.r2 { background: #6c757d; color: #fff; }
.rh-rank.r3 { background: #dc3545; color: #fff; }

/* ---- Avatar ---- */
.rh-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--rh-line); color: #475569;
             display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; flex: none; }

/* ---- Badges & états ---- */
.rh-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--rh-brand); color: #fff; font-size: .7rem; font-weight: 700; }
.rh-badge.ok { background: var(--rh-goal); }
.rh-empty { padding: 1.5rem 1rem; text-align: center; color: var(--rh-ink-2); background: #fff; border: 1px dashed #cbd5e1; border-radius: 12px; }
.rh-loading { display: flex; justify-content: center; padding: 3rem 0; }

@media (max-width: 640px) {
    .rh-page { padding: 12px; }
    .rh-title { font-size: 1.5rem; }
    .rh-table td, .rh-table th { padding: 8px 6px; }
}

/* ---- Page analyses joueur (PlayerProfileGraphs) ---- */
.gx-seg { display: inline-flex; background: #e2e8f0; border-radius: 20px; padding: 3px; gap: 2px; }
.gx-seg button { border: none; background: transparent; padding: 5px 14px; border-radius: 17px; font-weight: 600; font-size: .85rem; color: #334155; cursor: pointer; }
.gx-seg button.on { background: #fff; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.gx-chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 22px; }
.gx-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.gx-bar { width: 100%; max-width: 44px; border-radius: 6px 6px 0 0; background: var(--gx-c); opacity: .35; min-height: 2px; transition: height .25s ease; }
.gx-bar.peak { opacity: 1; }
.gx-val { font-size: .8rem; font-weight: 700; color: #1e293b; height: 18px; }
.gx-lab { font-size: .7rem; color: #64748b; margin-top: 6px; white-space: nowrap; }
.gx-list-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.gx-list-row + .gx-list-row { border-top: 1px solid #f1f5f9; }
.gx-track { height: 6px; background: #f1f5f9; border-radius: 9999px; overflow: hidden; margin-top: 4px; }
.gx-fill { height: 100%; border-radius: 9999px; background: var(--gx-c); }
.gx-more { background: none; border: none; color: #0284c7; font-size: .85rem; font-weight: 600; padding: 6px 0 0; cursor: pointer; }


/* ===========================================================
   Palette logo + mobile d'abord
   =========================================================== */

/* En-tête de page (club, joueur) : bandeau dégradé du logo, compact */
.rh-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; margin-bottom: 1.25rem;
           background: var(--rh-grad); color: #fff; }
.rh-hero-main { flex: 1; min-width: 0; }
.rh-hero h1 { font-size: 1.6rem; font-weight: 800; margin: 0; letter-spacing: -.3px; line-height: 1.15; overflow-wrap: anywhere; }
.rh-hero-sub { font-size: .9rem; opacity: .8; margin-top: 2px; }
.rh-hero-avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
                  background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.4); color: #fff; font-weight: 800; font-size: 1.5rem; object-fit: cover; }
.rh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rh-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.45);
           color: #fff; font-size: .8rem; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.08); }
.rh-chip:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Statistiques clés en ligne (profil) */
.rh-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 1.25rem; }
.rh-kpi { background: #fff; border: 1px solid var(--rh-line); border-radius: 12px; padding: 10px 4px; text-align: center; }
.rh-kpi b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--rh-ink); line-height: 1.1; }
.rh-kpi span { font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--rh-ink-2); text-transform: uppercase; }
.rh-kpi.is-main b { color: var(--rh-brand); }

/* Tableaux : lignes fines, première colonne figée, indice de défilement */
.rh-table-wrap { position: relative; border-radius: 12px; border: 1px solid var(--rh-line); background: #fff;
                 background-image: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)), linear-gradient(to left, #fff 30%, rgba(255,255,255,0)),
                                   linear-gradient(to right, rgba(5,39,103,.18), rgba(5,39,103,0)), linear-gradient(to left, rgba(5,39,103,.18), rgba(5,39,103,0));
                 background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
                 background-attachment: local, local, scroll, scroll; }
.rh-table-wrap .rh-table { border: none; margin: 0; }
.rh-table td { border: none; border-bottom: 1px solid var(--rh-line); }
.rh-table tbody tr:last-child td { border-bottom: none; }
.rh-table th { border: none; border-right: 1px solid var(--rh-slate-line); }
.rh-table th:last-child { border-right: none; }
.rh-table .rh-sticky { position: sticky; left: 0; z-index: 1; background: inherit; }
.rh-table tbody .rh-sticky { background: #fff; }
.rh-table tbody tr:hover .rh-sticky { background: #f4f7fd; }
.rh-table thead .rh-sticky { background: var(--rh-slate); }
.rh-table tr.is-click { cursor: pointer; }
.rh-score { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #e8edf7; color: #2a3a63; font-weight: 700; white-space: nowrap; }
.rh-score.win { background: #dcfce7; color: #166534; }
.rh-score.loss { background: #fee2e2; color: #991b1b; }
.rh-score.draw { background: #fef9c3; color: #854d0e; }

@media (max-width: 640px) {
    .rh-pills { flex-wrap: nowrap; overflow-x: auto; margin-left: -12px; margin-right: -12px; padding: 2px 12px 8px; scrollbar-width: none; }
    .rh-pills::-webkit-scrollbar { display: none; }
    .rh-hero { padding: 14px; gap: 12px; }
    .rh-hero h1 { font-size: 1.3rem; }
    .rh-hero-avatar { width: 56px; height: 56px; font-size: 1.15rem; }
    .rh-hide-sm { display: none !important; }
    .rh-table { font-size: .85rem; }
    .rh-table td, .rh-table th { padding: 8px 5px; }
    .rh-table .rh-left { padding-left: 8px; }
    .rh-panel { padding: 14px; border-radius: 14px; }
    .rh-kpis { gap: 6px; }
    .rh-kpi b { font-size: 1.15rem; }
}

/* Bouton d'action pleine largeur */
.rh-cta { display: block; width: 100%; border: none; border-radius: 12px; padding: 13px; font-weight: 700; font-size: 1rem; color: #fff;
          background: var(--rh-grad); cursor: pointer; transition: opacity .15s ease; }
.rh-cta:hover { opacity: .92; }
@media (max-width: 640px) { .rh-cards .rh-insight { min-width: 140px; } }

/* En-tête de panneau avec action à droite (accueil) */
.rh-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: .75rem; }
.rh-panel-head .rh-panel-title { margin: 0; }
.rh-link-btn { padding: 5px 14px; border-radius: 16px; background: var(--rh-grad); color: #fff; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.rh-link-btn:hover { color: #fff; opacity: .9; }

/* Compatibilité : ancien nom utilisé par certains panneaux */
.insight-card { background: #fff; border: 1px solid var(--rh-line); border-radius: 12px; padding: 16px; flex: 1; min-width: 140px; }

a, .btn-link { color: var(--rh-brand-dark); }
.btn-primary { background-color: var(--rh-brand); border-color: var(--rh-brand-dark); }

/* ===== Recherche (PlayerSearch / ClubSearch) ===== */
.rh-search { position: relative; min-width: 0; }
.rh-search-input { width: 100%; height: 40px; padding: 0 14px 0 36px; border: 1px solid var(--rh-line); border-radius: 999px; background: var(--rh-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b6785' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; font-size: .9rem; color: var(--rh-ink); outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.rh-search-input:focus { border-color: var(--rh-brand); background-color: #fff; box-shadow: 0 0 0 3px rgba(31,111,229,.18); }
.rh-search-list { position: absolute; z-index: 1000; left: 0; right: 0; top: calc(100% + 6px); min-width: 240px; max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--rh-line); border-radius: 14px; box-shadow: 0 12px 32px rgba(11,31,77,.18); }
.rh-search-list li { margin: 0; }
.rh-search-item { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; padding: 10px 12px; border: 0; background: transparent; border-radius: 10px; text-align: left; color: var(--rh-ink); font-size: .92rem; cursor: pointer; }
.rh-search-item:hover, .rh-search-item:focus { background: var(--rh-panel); }
.rh-search-sub { color: var(--rh-ink-2); font-size: .75rem; }
.rh-search-empty { padding: 12px; text-align: center; color: var(--rh-ink-2); font-size: .85rem; }
@media (max-width: 640.98px) { .rh-topbar .rh-search:last-child .rh-search-list { left: auto; right: 0; } .rh-search-list { min-width: 80vw; } .rh-search-input { font-size: 16px; } }

/* ===== Classements : sobres, seul le podium est coloré ===== */
.rh-c-rank { width: 34px; }
.rh-table tbody tr.rh-top1 td { background: #fff8e1; }
.rh-table tbody tr.rh-top2 td { background: #f3f5f8; }
.rh-table tbody tr.rh-top3 td { background: #fff1ee; }
.rh-table tbody tr.rh-top1 .rh-sticky { background: #fff8e1; }
.rh-table tbody tr.rh-top2 .rh-sticky { background: #f3f5f8; }
.rh-table tbody tr.rh-top3 .rh-sticky { background: #fff1ee; }
@media (max-width: 640.98px) {
    .rh-panel { padding: 14px; }
    .rh-table td, .rh-table th { padding: 8px 3px; }
    .rh-table .rh-left { padding-left: 6px; }
    .rh-c-rank { width: 28px; }
    .rh-rank { min-width: 20px; padding: 1px 3px; font-size: .78rem; }
}

/* ===== Pas de retour à la ligne dans les tableaux : on fait défiler plutôt que couper ===== */
.rh-table th, .rh-table td { white-space: nowrap; }
.rh-season { font-weight: 700; line-height: 1.2; }
@media (max-width: 640.98px) {
    .rh-table { font-size: .8rem; }
    .rh-table td, .rh-table th { padding: 8px 6px; }
    .rh-table th { font-size: .72rem; }
}

/* Tableaux sans colonne figée explicite : la première colonne reste visible quand on fait défiler */
.rh-table:not(:has(.rh-sticky)) th:first-child,
.rh-table:not(:has(.rh-sticky)) td:first-child { position: sticky; left: 0; z-index: 1; }
.rh-table:not(:has(.rh-sticky)) tbody td:first-child { background: #fff; }
.rh-table:not(:has(.rh-sticky)) thead th:first-child { background: var(--rh-slate); }
.rh-table .rh-sticky { box-shadow: 6px 0 8px -6px rgba(5,39,103,.25); }
.rh-avatar { flex: none; }

/* ===== Mobile : les tableaux tiennent dans l'écran (pas de défilement, pas de retour à la ligne) ===== */
@media (max-width: 640.98px) {
    .rh-table { font-size: .74rem; table-layout: auto; }
    .rh-table th { font-size: .66rem; letter-spacing: 0; }
    .rh-table td, .rh-table th { padding: 7px 3px; }
    .rh-table .rh-left { padding-left: 5px; max-width: 33vw; overflow: hidden; text-overflow: ellipsis; }
    .rh-table .rh-left > .d-flex { min-width: 0; gap: 6px !important; }
    .rh-table .rh-left > .d-flex > a, .rh-table .rh-left .d-flex > div > a:first-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .rh-table .rh-avatar { display: none; }
    .rh-table .rh-rank { min-width: 18px; padding: 1px 3px; font-size: .7rem; }
    .rh-table .rh-badge { padding: 0 6px; font-size: .65rem; }
    .rh-sub-club { display: block; font-weight: 600; font-size: .68rem; color: var(--rh-brand); }
    .rh-sub-club a { color: var(--rh-brand) !important; font-weight: 600; }
}
.rh-sub-club { display: none; }
@media (max-width: 640.98px) { .rh-sub-club { display: block; } .rh-col-club { display: none; } }
.rh-sub-pct { display: none; }
@media (max-width: 640.98px) { .rh-col-pct { display: none; } .rh-sub-pct { display: block; font-size: .62rem; color: var(--rh-ink-2); } }

/* Bouton Partager */
.rh-share { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.1); color: #fff; font-size: .8rem; font-weight: 600; cursor: pointer; }
.rh-share:hover { background: rgba(255,255,255,.22); }