/**
 * Page Détail GP — Mes Résultats
 * Mobile-first, thème 16-bits rétro cohérent avec base.css
 */

/* ---- Conteneur ---- */
.page-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* layout géré dans base.css (main-content > page-*) */
}

/* ---- Navigation breadcrumb + prev/next ---- */
.detail-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: color 0.2s, border-color 0.2s;
}

.detail-back:hover {
    color: var(--text);
    border-color: var(--color-secondary-muted);
}

.detail-nav-svg {
    display: block;
    flex-shrink: 0;
    opacity: 0.88;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.detail-back:hover .detail-nav-svg,
.btn-nav:hover .detail-nav-svg {
    opacity: 1;
}

.detail-back:hover .detail-nav-svg--back {
    transform: translateX(-2px);
}

.btn-nav:hover .detail-nav-svg--prev {
    transform: translateX(-2px);
}

.btn-nav:hover .detail-nav-svg--next {
    transform: translateX(2px);
}

.detail-prev-next {
    display: flex;
    gap: 0.5rem;
}

.btn-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-family: var(--font-title);
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.btn-nav:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--accent-soft-20);
}

/* ---- Header GP ---- */
.detail-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-header-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.detail-round {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.detail-sprint-badge {
    /* style unifié dans base.css */
    display: inline-flex;
}

.detail-race-name {
    font-family: var(--font-title-bold);
    font-size: 1.8rem;
    color: var(--text);
    line-height: 1.1;
}

@media (min-width: 768px) {
    .detail-race-name {
        font-size: 2rem;
    }
}

/* ---- Score + rank + vs avg ---- */
.detail-score-wrap {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.detail-score {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.detail-score-value {
    font-family: var(--font-title);
    font-size: 3.5rem;
    color: var(--color-secondary);
    line-height: 1;
}

@media (min-width: 768px) {
    .detail-score-value {
        font-size: 4.5rem;
    }
}

.detail-score-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.detail-score-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.35rem;
}

.detail-rank {
    font-family: var(--font-title);
    font-size: 1rem;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    line-height: 1.4;
    display: inline-block;
}

.detail-rank--top3 {
    color: #242440;
    border-color: var(--color-gold);
    background: rgb(255, 214, 79);
}

.detail-rank--top10 {
    color: var(--color-success);
    border-color: var(--color-success);
    background: rgba(107, 201, 107, 0.1);
}

.detail-vs-avg {
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-body);
    display: inline-block;
}

.detail-vs-avg--pos {
    color: var(--color-success);
    background: rgba(107, 201, 107, 0.1);
    border: 1px solid rgba(107, 201, 107, 0.3);
}

.detail-vs-avg--neg {
    color: var(--color-danger);
    background: var(--risk-bg-soft);
    border: 1px solid var(--risk-border-soft);
}

.detail-no-score {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ---- Sections génériques ---- */
.detail-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-section-title {
    font-family: var(--font-title);
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--surface-hairline);
    padding-bottom: 0.4rem;
}

/* ---- Deck (tuiles catalogue : 1 colonne mobile, 2 colonnes desktop) ---- */
.detail-deck {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    width: 100%;
}

.detail-deck .catalogue-tile {
    min-width: 0;
}

@media (min-width: 768px) {
    .detail-deck:not(.play-catalogue-view--compact) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .detail-deck:not(.play-catalogue-view--compact) .catalogue-tile {
        --tile-h: 4.5rem;
        --tile-photo-w: 3.75rem;
    }

    .detail-deck:not(.play-catalogue-view--compact) .catalogue-tile__number {
        font-size: 1.35rem;
        min-width: 1.65rem;
    }

    .detail-deck:not(.play-catalogue-view--compact) .catalogue-tile__name {
        font-size: 0.84rem;
    }

    .detail-deck:not(.play-catalogue-view--compact) .catalogue-tile__team {
        font-size: 0.62rem;
    }

    .detail-deck:not(.play-catalogue-view--compact) .catalogue-tile__value {
        min-width: 2.35rem;
        padding: 0 0.35rem;
    }

    .detail-deck:not(.play-catalogue-view--compact) .catalogue-tile__value-amount {
        font-size: 1.35rem;
    }

    .detail-deck:not(.play-catalogue-view--compact) .catalogue-tile__value-unit {
        font-size: 0.75rem;
    }

    .detail-deck:not(.play-catalogue-view--compact) .catalogue-tile__flag .country-flag-img {
        width: 1.1rem;
    }
}

.detail-deck-slot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.detail-deck-slot-choice {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
    padding: 0 0.15rem;
}

/* ---- Deck parfait ---- */
.detail-section--perfect {
    padding: 1rem;
    border: 1px solid var(--color-gold);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(255, 214, 79, 0.06) 0%, transparent 60%);
}

/* ---- Decks (tabs) ---- */
.detail-section--decks {
    padding: 1rem;
    border: 1px solid var(--color-gold);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(255, 214, 79, 0.06) 0%, transparent 60%);
}

.detail-decks-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.detail-section--decks .detail-section-title {
    margin: 0;
}

.detail-decks-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 214, 79, 0.35);
    background: rgba(0, 0, 0, 0.12);
}

.detail-decks-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.detail-decks-tab:hover {
    opacity: 1;
}

.detail-decks-tab.is-active {
    opacity: 1;
    background: rgba(255, 214, 79, 0.16);
    box-shadow: 0 0 0 1px rgba(255, 214, 79, 0.35) inset;
}

.detail-decks-panel {
    margin-top: 0.6rem;
}

/* Important : ne pas utiliser display:none (images AJAX ne chargent pas dans certains navigateurs) */
.detail-decks-panel[aria-hidden="true"] {
    position: absolute;
    left: -99999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.detail-perfect-intro {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: -0.35rem 0 0;
}

.detail-perfect-summary {
    display: flex;
    align-items: flex-end;
    padding : 1rem 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.detail-score--compact .detail-score-value {
    font-size: 2.5rem;
}

@media (min-width: 768px) {
    .detail-score--compact .detail-score-value {
        font-size: 3rem;
    }
}

.detail-perfect-gap {
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--font-body);
    display: inline-block;
}

.detail-perfect-gap--miss {
    color: var(--color-danger);
    background: var(--risk-bg-soft);
    border: 1px solid var(--risk-border-soft);
}

.detail-perfect-gap--match {
    color: var(--color-success);
    background: rgba(107, 201, 107, 0.1);
    border: 1px solid rgba(107, 201, 107, 0.3);
}

.detail-perfect-global {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 214, 79, 0.25);
}

.detail-perfect-global-title {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.detail-perfect-global-hint {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.detail-global-breakdown {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.detail-global-breakdown__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.detail-global-breakdown__main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.detail-global-breakdown__label {
    font-size: 0.82rem;
    color: var(--text);
    min-width: 0;
}

.detail-global-breakdown__value {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.detail-global-breakdown__value--pos {
    color: var(--color-success);
}

.detail-global-breakdown__value--neg {
    color: var(--color-danger);
}

.detail-global-breakdown__explain {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.detail-section--perfect-loading {
    min-height: 6rem;
}

.detail-perfect-loading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0;
}

.detail-perfect-loading-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-gold);
    opacity: 0.35;
    animation: detail-perfect-pulse 1.1s ease-in-out infinite;
}

.detail-perfect-loading-dot:nth-child(2) { animation-delay: 0.15s; }
.detail-perfect-loading-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes detail-perfect-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}

.detail-perfect-intro--error {
    color: var(--color-danger);
}

/* Détails par carte (explications) */
.deck-slot-details {
    width: 100%;
    max-width: 180px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.deck-slot-details > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--surface-hairline);
    background: var(--surface-overlay);
}

.deck-slot-details[open] > summary {
    background: var(--surface-overlay-strong);
}

.deck-slot-details-list {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.deck-slot-details-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.deck-slot-details-item--inactive .deck-slot-details-label {
    opacity: 0.6;
}

.deck-slot-details-label {
    flex: 1;
}

.deck-slot-details-pts {
    font-family: var(--font-title);
    white-space: nowrap;
}

.deck-slot-details-pts--pos {
    color: var(--color-success);
}

.deck-slot-details-pts--neg {
    color: var(--color-danger);
}

/* ---- Tableau résultats pilotes ---- */
.driver-results-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
}

.driver-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.driver-results-table th {
    padding: 0.6rem 0.75rem;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--bg-card);
    border-bottom: 1px solid var(--surface-hairline);
    white-space: nowrap;
}

.driver-results-table th:first-child,
.driver-results-table td:first-child {
    text-align: left;
    padding-left: 1rem;
}

.driver-results-table td {
    padding: 0.6rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--surface-hairline);
    background: var(--bg-card-mid);
    white-space: nowrap;
}

.driver-results-table tr:last-child td {
    border-bottom: none;
}

.driver-name-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text);
}

.driver-mini-img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* ---- Badges de position ---- */
.pos-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: var(--font-title);
    line-height: 1.4;
    min-width: 2.4em;
    text-align: center;
}

.pos--p1 {
    background: rgba(255, 213, 79, 0.2);
    color: var(--color-gold);
    border: 1px solid rgba(255, 213, 79, 0.5);
}

.pos--podium {
    background: rgba(107, 201, 107, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(107, 201, 107, 0.3);
}

.pos--points {
    background: rgba(100, 160, 255, 0.1);
    color: var(--color-secondary-muted);
    border: 1px solid rgba(100, 160, 255, 0.25);
}

.pos--out {
    color: var(--text-muted);
}

.pos--dnf {
    color: var(--color-danger);
    background: var(--risk-bg-soft);
    border: 1px solid var(--risk-border-soft);
}

.pos--none {
    color: var(--text-muted);
}

/* ---- Icônes Meilleur Tour (FL) ---- */
.fl-cell {
    text-align: center;
}

.fl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.fl-badge--yes {
    color: var(--color-success, #6bc96b);
    background: rgba(107, 201, 107, 0.15);
    border: 1px solid rgba(107, 201, 107, 0.4);
}

.fl-badge--no {
    color: var(--text-muted, #888);
    background: var(--surface-muted);
    border: 1px solid var(--border);
}

/* ---- Breakdown des points ---- */
.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.breakdown-item {
    display: grid;
    grid-template-columns: 160px 1fr 60px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 768px) {
    .breakdown-item {
        grid-template-columns: 220px 1fr 70px;
    }
}

.breakdown-item:last-of-type {
    border-bottom: none;
}

.breakdown-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breakdown-item--base .breakdown-label  { color: var(--text); }
.breakdown-item--bonus .breakdown-label,
.breakdown-item--prime .breakdown-label { color: var(--color-success-soft); }
.breakdown-item--cards .breakdown-label { color: #ce93d8; }
.breakdown-item--malus .breakdown-label { color: var(--color-error-soft); }

.breakdown-bar-wrap {
    height: 8px;
    background: var(--surface-track);
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-bar {
    height: 100%;
    width: var(--bw, 0%);
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-success) 0%, var(--color-gold) 100%);
    transition: width 0.4s ease;
}

.breakdown-item--cards .breakdown-bar {
    background: linear-gradient(90deg, #ce93d8 0%, #ab47bc 100%);
}

.breakdown-item--malus .breakdown-bar {
    background: var(--color-danger);
}

.breakdown-item--zero .breakdown-bar {
    display: none;
}

.breakdown-item--zero .breakdown-value {
    color: var(--text-muted);
}

.breakdown-value {
    font-family: var(--font-title);
    font-size: 1rem;
    text-align: right;
    white-space: nowrap;
}

.val--pos { color: var(--color-success); }
.val--neg { color: var(--color-danger); }

.breakdown-item--neg .breakdown-value {
    color: var(--color-danger);
}

/* ---- Total ---- */
.breakdown-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    border-top: 2px solid var(--border);
}

.breakdown-total-label {
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breakdown-total-value {
    font-family: var(--font-title);
    font-size: 1.6rem;
    color: var(--color-success);
    line-height: 1;
}

/* ---- Détail points (tableau cartes) ---- */
.detail-points-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    background: var(--bg-card);
}

.detail-points-table {
    width: 100%;
    min-width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.detail-points-table th,
.detail-points-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--surface-hairline);
    vertical-align: top;
}

.detail-points-table thead th {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
}

.detail-points-table thead th:nth-child(1),
.detail-points-table tbody th:nth-child(1) { width: 28%; }
.detail-points-table thead th:nth-child(2) { min-width: 80px; width: 14%; text-align: right; }
.detail-points-table thead th:nth-child(3),
.detail-points-table tbody td:nth-child(3) { width: auto; min-width: 0; }

.detail-points-table tbody td:nth-child(2) {
    text-align: right;
}

.detail-points-table tbody th {
    font-weight: normal;
    text-align: left;
    background: var(--bg-card-mid);
}

.detail-points-table tbody td {
    background: var(--bg-card);
}

/* Highlight subtle sur les lignes breakdown */
.detail-points-table tr.detail-points-row:hover th,
.detail-points-table tr.detail-points-row:hover td {
    background: var(--surface-muted);
}

.detail-points-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 100%;
    min-width: 0;
}

.detail-points-card-name {
    font-size: 0.9rem;
    color: var(--font-bold);
    font-weight: 700;
}

.detail-points-card-choice {
    font-size: 0.75rem;
    color: var(--color-secondary-muted);
    font-weight: 500;
    line-height: 1.3;
}

.detail-points-card-desc--mobile {
    display: none;
}

@media (min-width: 600px) {
    .detail-points-card-desc--mobile {
        display: none !important;
    }
}

.detail-points-desc-wrap {
    margin-top: 0.15rem;
}

.detail-points-desc-toggle {
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--color-gold);
    list-style: none;
    user-select: none;
}

.detail-points-desc-toggle::-webkit-details-marker {
    display: none;
}

.detail-points-desc-toggle::before {
    content: '▸ ';
    font-size: 0.65rem;
}

.detail-points-desc-wrap[open] .detail-points-desc-toggle::before {
    content: '▾ ';
}

.detail-points-card-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    margin-top: 0.25rem;
}

.detail-points-breakdown-label {
    font-size: 0.85rem;
    color: var(--text);
}

.detail-points-value {
    font-family: var(--font-title);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.detail-points-value--pos {
    color: var(--color-success);
}

.detail-points-value--neg {
    color: var(--color-danger);
}

.detail-points-value--zero {
    color: var(--text-muted);
}

.detail-points-explain {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.detail-points-conditions {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-points-condition {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.detail-points-condition-label {
    flex: 1;
    min-width: 0;
}

.detail-points-condition-value {
    font-size: 0.78rem;
    opacity: 0.9;
}

.detail-points-condition-pts {
    font-family: var(--font-title);
    white-space: nowrap;
}

.detail-points-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-points-icon--success,
.detail-points-condition--ok .detail-points-icon {
    color: var(--color-success);
}

.detail-points-icon--fail,
.detail-points-condition--fail .detail-points-icon {
    color: var(--text-muted);
}

.detail-points-overall {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.detail-points-overall-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.detail-points-no-explain {
    color: var(--text-muted);
}

.detail-points-breakdown-explain {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.detail-points-row--breakdown {
    background: var(--bg-card-mid);
}

.detail-points-total td,
.detail-points-total th {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top: 2px solid var(--border);
    background: var(--bg-card);
}

.detail-points-total-value {
    text-align: right;
    color: var(--color-success);
    font-size: 1.2rem;
}

/* ═══════════════════════════════════════════════════
   Mobile : layout en cartes ergonomiques (≤ 599px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 599px) {
    .detail-points-card-desc--desktop {
        display: none;
    }

    .detail-points-card-desc--mobile {
        display: block;
    }

    /* Wrapper : pas de scroll horizontal, on empile en cartes */
    .detail-points-table-wrap {
        overflow-x: visible;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .detail-points-table {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .detail-points-table thead {
        display: none;
    }

    .detail-points-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* ── Chaque ligne = une carte autonome ── */
    .detail-points-table tr.detail-points-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "card  pts"
            "expl  expl";
        gap: 0;
        padding: 0.9rem 1rem;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        background: var(--bg-card-mid);
        position: relative;
        transition: border-color 0.15s;
    }

    .detail-points-table tr.detail-points-row:active {
        border-color: var(--color-secondary-muted);
    }

    /* Accent coloré sur le bord gauche selon le résultat */
    .detail-points-table tr.detail-points-row::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: var(--radius) 0 0 var(--radius);
        background: var(--border);
        transition: background 0.2s;
    }

    /* Lignes breakdown : légèrement différenciées */
    .detail-points-table tr.detail-points-row--breakdown {
        background: var(--bg-card);
        border-style: dashed;
        border-color: var(--surface-hairline);
    }

    /* ── Cellule nom de la carte ── */
    .detail-points-table th.detail-points-card {
        grid-area: card;
        display: block;
        padding: 0;
        border: none;
        background: transparent;
        font-weight: normal;
        min-width: 0;
    }

    .detail-points-card-text {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
    }

    .detail-points-card-name {
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.3;
        display: block;
    }

    .detail-points-card-choice {
        font-size: 0.71rem;
        margin-top: 0.2rem;
        display: block;
    }

    /* ── Cellule points ── */
    .detail-points-table td.detail-points-value-cell {
        grid-area: pts;
        display: block;
        padding: 0;
        border: none;
        background: transparent;
        align-self: start;
        font-size: 1.15rem;
        font-family: var(--font-title);
        font-weight: 700;
        white-space: nowrap;
        text-align: right;
    }

    /* Accent latéral lié à la couleur des points */
    .detail-points-value-cell:has(.detail-points-value--pos) ~ * ,
    tr:has(.detail-points-value--pos)::before {
        background: rgba(107, 201, 107, 0.6);
    }

    tr:has(.detail-points-value--neg)::before {
        background: var(--risk-bar-accent);
    }

    tr:has(.detail-points-value--zero)::before {
        background: rgba(251, 191, 36, 0.4);
    }

    /* ── Cellule explication ── */
    .detail-points-table td.detail-points-explain {
        grid-area: expl;
        display: block;
        padding: 0;
        border: none;
        background: transparent;
        padding-top: 0.65rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--surface-track);
    }

    /* ── Toggle description dans la zone expl ── */
    .detail-points-table td.detail-points-explain .detail-points-desc-wrap {
        margin-bottom: 0.6rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid var(--surface-track);
    }

    /* Cacher le toggle description sur desktop (il est maintenant dans expl) */

    /* ── Toggle description de règle ── */
    .detail-points-desc-toggle {
        display: inline-block;
        margin-top: 0.35rem;
        font-size: 0.71rem;
    }

    .detail-points-desc-wrap .detail-points-card-desc {
        margin-top: 0.45rem;
        padding: 0.5rem 0.6rem;
        border-left: 2px solid var(--surface-hairline);
        font-size: 0.74rem;
        line-height: 1.45;
    }

    /* ── Conditions ── */
    .detail-points-conditions {
        gap: 0.35rem;
    }

    .detail-points-condition {
        display: grid;
        grid-template-columns: 14px 1fr auto;
        gap: 0.4rem;
        align-items: baseline;
        padding: 0.25rem 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .detail-points-condition:last-child {
        border-bottom: none;
    }

    .detail-points-condition--ok {
        opacity: 1;
    }

    .detail-points-condition--fail {
        opacity: 0.55;
    }

    .detail-points-condition-label {
        min-width: 0;
        font-size: 0.79rem;
        line-height: 1.3;
    }

    .detail-points-condition-value {
        text-align: right;
        font-size: 0.74rem;
        color: var(--text-muted);
        white-space: nowrap;
    }

    .detail-points-condition-pts {
        font-size: 0.82rem;
    }

    /* ── Résultat global (objectif atteint/non) ── */
    .detail-points-overall {
        margin-top: 0.55rem;
        padding: 0.35rem 0.6rem;
        border-radius: 4px;
        background: var(--surface-muted);
        gap: 0.4rem;
    }

    .detail-points-overall-label {
        font-size: 0.79rem;
    }

    /* ── Lignes breakdown (primes du règlement) ── */
    .detail-points-row--breakdown .detail-points-card {
        display: flex;
        align-items: center;
    }

    .detail-points-breakdown-label {
        font-size: 0.88rem;
    }

    /* ── Ligne Total ── */
    .detail-points-table tr.detail-points-total {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1rem;
        border-radius: var(--radius);
        border: 2px solid var(--border);
        background: var(--bg-card);
        margin-top: 0.25rem;
    }

    .detail-points-total td,
    .detail-points-total th {
        display: block;
        padding: 0;
        border: none;
        background: transparent;
    }

    .detail-points-total td:first-child {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .detail-points-total .detail-points-total-value {
        font-size: 1.5rem;
        text-align: right;
    }
}