:root {
    --bg: #161108;
    --bg-soft: #24190c;
    --panel: rgba(38, 27, 13, 0.94);
    --panel-strong: rgba(31, 22, 10, 0.98);
    --line: rgba(210, 172, 86, 0.2);
    --gold: #d5a654;
    --gold-soft: #f5d89b;
    --olive: #7b8a29;
    --olive-bright: #9fbb33;
    --text: #f3ead5;
    --muted: #bda884;
    --shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    --radius: 18px;
}

.messages-list__item--system {
    border-color: rgba(214, 179, 95, 0.18);
    background: linear-gradient(180deg, rgba(148, 110, 34, 0.12), rgba(0, 0, 0, 0.1));
}

.messages-list__item--player {
    background: rgba(0, 0, 0, 0.12);
}

.messages-list__entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.messages-list__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.messages-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(214, 179, 95, 0.22);
    background: rgba(0, 0, 0, 0.18);
    color: var(--gold-soft);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.messages-chip--system {
    background: rgba(179, 128, 42, 0.18);
}

.messages-chip--player {
    background: rgba(141, 163, 45, 0.18);
}

.messages-reader--system {
    background: linear-gradient(180deg, rgba(90, 62, 14, 0.18), rgba(0, 0, 0, 0.12));
    border-color: rgba(214, 179, 95, 0.22);
}

.messages-reader__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.messages-reader__body {
    line-height: 1.75;
}

.messages-reply-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Un seul bouton depuis le retrait de « Reprendre dans le composeur » : sans
   flex-end, space-between le renverrait a gauche, la ou personne ne l'attend. */
.messages-reply-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 980px) {
    .messages-layout {
        grid-template-columns: 1fr;
    }

    .messages-list__entry {
        grid-template-columns: 1fr;
    }

    .messages-list__delete-form {
        justify-content: flex-end;
        position: static;
        margin-top: 8px;
        transform: none;
    }

    .recruitment-market-card {
        flex-direction: column;
    }

    .recruitment-market-card__link {
        width: 100%;
    }

    .recruitment-market-card__side {
        min-width: 0;
        width: 100%;
        justify-items: start;
    }

    .sales-card__countdown {
        text-align: left;
    }
}

.messages-list__item.is-unread {
    border-color: rgba(214, 179, 95, 0.34);
    background: linear-gradient(180deg, rgba(214, 179, 95, 0.14), rgba(127, 144, 39, 0.12));
    box-shadow: inset 4px 0 0 rgba(214, 179, 95, 0.75);
}

.messages-list__item.is-read {
    opacity: 0.82;
}

.messages-list__item.is-unread .horse-list__content strong {
    color: #fff6d1;
}

.messages-list__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.messages-chip--state {
    border-color: rgba(255, 255, 255, 0.12);
}

.messages-chip--unread {
    background: rgba(214, 179, 95, 0.24);
    color: #fff1bf;
}

.messages-chip--read {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 248, 226, 0.72);
}

.messages-reader--unread {
    box-shadow: inset 4px 0 0 rgba(214, 179, 95, 0.75);
}

.messages-list__delete-form {
    display: flex;
    align-items: center;
}

.messages-list__delete-button {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 0;
    padding-bottom: 0;
}

.messages-thread {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.messages-thread__list {
    display: grid;
    gap: 12px;
}

.messages-thread__item {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.14);
}

.messages-thread__item--outgoing {
    background: rgba(127, 144, 39, 0.12);
    border-color: rgba(141, 163, 45, 0.2);
}

.messages-thread__item--incoming {
    background: rgba(214, 179, 95, 0.08);
    border-color: rgba(214, 179, 95, 0.16);
}

.messages-thread__item.is-current {
    box-shadow: inset 4px 0 0 rgba(214, 179, 95, 0.75);
}

.messages-thread__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: rgba(255, 248, 226, 0.8);
}

.messages-thread__meta strong {
    color: var(--gold-soft);
}

.messages-thread__body {
    line-height: 1.7;
}

.recruitment-overview-grid,
.recruitment-roster-grid {
    margin-bottom: 18px;
}

.recruitment-roster-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 0.8fr);
    align-items: start;
}

.recruitment-anchor-nav,
.recruitment-subanchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.recruitment-anchor-nav {
    padding: 16px 18px;
}

.recruitment-anchor-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.recruitment-anchor-nav__link:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    border-color: rgba(255, 220, 150, 0.24);
}

.recruitment-anchor-nav__count {
    color: var(--gold-soft);
    font-family: "Cinzel", serif;
    font-size: 0.9rem;
}

/* HISTORIQUES, a droite de la barre d'ancres.
   `margin-left: auto` absorbe l'espace restant : les deux boutons se collent au
   bord droit sans qu'aucune largeur ne soit figee. La barre pouvant s'enrouler,
   le groupe reste solidaire et passe a la ligne d'un bloc plutot que de se
   couper en deux. */
.recruitment-anchor-nav__aside {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

/* Ces deux boutons N'ONT PAS LA MEME NATURE que les liens d'ancre voisins : ils
   n'amenent pas plus bas dans la page, ils ouvrent une consultation. D'ou une
   couleur propre a chacun, qui les detache de l'or des ancres et les distingue
   entre eux — bleu pour les jockeys, violet pour leurs entraineurs. */
.history-chip {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.history-chip--jockeys {
    background: rgba(90, 140, 210, 0.2);
    border-color: rgba(150, 190, 240, 0.42);
    color: #cfe4ff;
}

.history-chip--jockeys:hover,
.history-chip--jockeys:focus-visible {
    background: rgba(90, 140, 210, 0.34);
    border-color: rgba(150, 190, 240, 0.7);
}

.history-chip--trainers {
    background: rgba(150, 110, 205, 0.2);
    border-color: rgba(196, 165, 240, 0.42);
    color: #e0d0ff;
}

.history-chip--trainers:hover,
.history-chip--trainers:focus-visible {
    background: rgba(150, 110, 205, 0.34);
    border-color: rgba(196, 165, 240, 0.7);
}

/* MARCHES : ventes conclues en vert d'eau, reclamations en ambre. Une reclamation
   ne se joue pas sur le marche mais en course — deux mecaniques distinctes, deux
   teintes distinctes, lisibles avant meme d'avoir lu le libelle. */
.history-chip--sales {
    background: rgba(60, 160, 140, 0.2);
    border-color: rgba(120, 210, 190, 0.42);
    color: #c6efe4;
}

.history-chip--sales:hover,
.history-chip--sales:focus-visible {
    background: rgba(60, 160, 140, 0.34);
    border-color: rgba(120, 210, 190, 0.7);
}

.history-chip--claiming {
    background: rgba(205, 130, 60, 0.2);
    border-color: rgba(240, 180, 120, 0.42);
    color: #ffdcbb;
}

.history-chip--claiming:hover,
.history-chip--claiming:focus-visible {
    background: rgba(205, 130, 60, 0.34);
    border-color: rgba(240, 180, 120, 0.7);
}

@media (max-width: 720px) {
    /* Sur mobile la barre est deja sur plusieurs lignes : coller a droite n'a
       plus de sens, les deux boutons prennent toute la largeur disponible. */
    .recruitment-anchor-nav__aside {
        margin-left: 0;
        width: 100%;
    }

    .recruitment-anchor-nav__aside .history-chip {
        flex: 1 1 100%;
    }
}

.recruitment-anchor-target {
    scroll-margin-top: 92px;
}

.breeding-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 310px;
    gap: 18px;
    align-items: start;
}

.breeding-layout > * {
    min-width: 0;
}

.breeding-column {
    display: grid;
    gap: 18px;
    align-content: start;
    min-width: 0;
}

.breeding-column--left {
    grid-column: 1;
}

.breeding-column--center {
    grid-column: 2;
}

.breeding-column--right {
    grid-column: 3;
}

.breeding-panel {
    min-height: 190px;
}

.breeding-panel .panel__header--stacked {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.breeding-panel__summary {
    margin-bottom: 14px;
    color: rgba(255, 248, 226, 0.82);
    text-align: center;
}

.breeding-panel--feature {
    min-height: 250px;
}

.breeding-stallion-list {
    gap: 12px;
}

.breeding-select-card {
    appearance: none;
    width: 100%;
    border: 1px solid rgba(127, 144, 39, 0.14);
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.breeding-select-card.is-selected {
    border-color: rgba(214, 179, 95, 0.45);
    background: rgba(127, 144, 39, 0.18);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.breeding-stallion-meta {
    color: rgba(255, 248, 226, 0.74);
    font-size: 0.82rem;
}

.breeding-covering-meta {
    color: rgba(206, 226, 164, 0.82);
    font-size: 0.74rem;
    line-height: 1.3;
}

.breeding-stallion-detail {
    color: rgba(255, 248, 226, 0.66);
    font-size: 14px;
    line-height: 1.45;
}

.breeding-stallion-detail strong {
    color: var(--gold-soft);
    font-size: 14px;
    font-weight: 700;
}

.breeding-select-card {
    position: relative;
}

.breeding-select-card--cover-right {
    border-color: rgba(175, 198, 96, 0.18);
    background:
        linear-gradient(180deg, rgba(72, 88, 24, 0.24), rgba(20, 19, 9, 0.5)),
        rgba(0, 0, 0, 0.12);
}

.breeding-select-card .horse-list__content {
    gap: 3px;
}

.breeding-select-card .horse-list__content strong {
    line-height: 1.15;
}

.breeding-card-hover {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 20;
    display: grid;
    gap: 4px;
    min-width: 320px;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(214, 179, 95, 0.22);
    background: rgba(24, 16, 8, 0.96);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    text-align: left;
}

.breeding-card-hover::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-left: 1px solid rgba(214, 179, 95, 0.22);
    border-bottom: 1px solid rgba(214, 179, 95, 0.22);
    background: rgba(24, 16, 8, 0.96);
    transform: translateY(-50%) rotate(45deg);
}

.breeding-select-card:hover .breeding-card-hover,
.breeding-select-card:focus-visible .breeding-card-hover {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.breeding-column--right .breeding-card-hover {
    left: auto;
    right: calc(100% + 10px);
    transform: translateY(-50%) translateX(6px);
}

.breeding-column--right .breeding-card-hover::before {
    left: auto;
    right: -8px;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid rgba(214, 179, 95, 0.22);
    border-top: 1px solid rgba(214, 179, 95, 0.22);
}

.breeding-column--right .breeding-select-card:hover .breeding-card-hover,
.breeding-column--right .breeding-select-card:focus-visible .breeding-card-hover {
    transform: translateY(-50%) translateX(0);
}

.breeding-planner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 18px;
}

.breeding-planner__horse {
    display: grid;
    gap: 8px;
    min-height: 180px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    background: linear-gradient(180deg, rgba(126, 90, 43, 0.18), rgba(24, 17, 10, 0.46));
}

.breeding-planner__horse--stallion {
    border-color: rgba(118, 170, 214, 0.28);
    background:
        radial-gradient(circle at top left, rgba(103, 157, 214, 0.22), transparent 58%),
        linear-gradient(180deg, rgba(39, 68, 98, 0.34), rgba(17, 16, 21, 0.52));
}

.breeding-planner__horse--broodmare {
    border-color: rgba(214, 132, 164, 0.28);
    background:
        radial-gradient(circle at top right, rgba(226, 143, 181, 0.22), transparent 58%),
        linear-gradient(180deg, rgba(106, 47, 74, 0.34), rgba(21, 15, 18, 0.52));
}

.breeding-planner__horse strong {
    font-size: 1.15rem;
    color: var(--gold-soft);
}

.breeding-planner__horse > span {
    color: rgba(255, 248, 226, 0.76);
    line-height: 1.5;
}

.breeding-planner__details {
    display: grid;
    gap: 6px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.breeding-planner__details span {
    color: rgba(255, 248, 226, 0.7);
    font-size: 10px;
    line-height: 1.5;
}

.breeding-planner__details strong {
    color: var(--gold-soft);
    font-size: 10px;
    font-weight: 700;
}

.breeding-planner__union {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.breeding-union-button {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(214, 179, 95, 0.24);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(112, 75, 33, 0.42), rgba(29, 19, 10, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.breeding-union-button:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.04);
    border-color: rgba(214, 179, 95, 0.42);
}

.breeding-union-button:disabled {
    opacity: 0.46;
    cursor: not-allowed;
}

.breeding-union-button img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.breeding-union-button__hint,
.breeding-reproduction-status {
    color: rgba(255, 248, 226, 0.76);
    text-align: center;
    line-height: 1.5;
}

.breeding-reproduction-status {
    margin-top: 14px;
}

.breeding-reproduction-status.is-ready {
    color: var(--gold-soft);
}

.breeding-reproduction-status.is-confirmed {
    color: #c7e28b;
}

.breeding-confirm-genealogy {
    display: grid;
    gap: 12px;
    margin-top: 4px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(214, 179, 95, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.14));
}

.breeding-confirm-genealogy__title {
    margin: 14px 0 8px;
    color: var(--gold-soft);
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
}

.breeding-confirm-genealogy--pedigree {
    display: grid;
    grid-template-columns: minmax(120px, 1.5fr) minmax(18px, 0.2fr) minmax(140px, 1.75fr) minmax(18px, 0.2fr) minmax(140px, 1.75fr) minmax(18px, 0.2fr) minmax(140px, 1.75fr);
    grid-template-rows: repeat(21, 18px);
    column-gap: 8px;
    row-gap: 0;
    align-items: stretch;
}

.breeding-confirm-genealogy__column {
    display: contents;
}

.breeding-confirm-genealogy__link-column {
    position: relative;
    display: block;
    min-width: 0;
}

.breeding-confirm-genealogy__link-column--c2 {
    grid-column: 2;
    grid-row: 1 / span 21;
}

.breeding-confirm-genealogy__link-column--c4 {
    grid-column: 4;
    grid-row: 1 / span 21;
}

.breeding-confirm-genealogy__link-column--c6 {
    grid-column: 6;
    grid-row: 1 / span 21;
}

.breeding-confirm-genealogy__link {
    position: absolute;
    display: block;
    background: rgba(214, 179, 95, 0.45);
}

.breeding-confirm-genealogy__link--c2-vertical {
    left: 50%;
    top: calc(((5 - 1) * 18px) + 9px);
    height: calc(((17 - 5) * 18px));
    width: 1px;
    transform: translateX(-50%);
}

.breeding-confirm-genealogy__link--c2-left {
    left: 0;
    top: calc(((11 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c2-top-right {
    right: 0;
    top: calc(((5 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c2-bottom-right {
    right: 0;
    top: calc(((17 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c4-top-vertical {
    left: 50%;
    top: calc(((2 - 1) * 18px) + 9px);
    height: calc(((8 - 2) * 18px));
    width: 1px;
    transform: translateX(-50%);
}

.breeding-confirm-genealogy__link--c4-top-left {
    left: 0;
    top: calc(((5 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c4-top-right-top {
    right: 0;
    top: calc(((2 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c4-top-right-bottom {
    right: 0;
    top: calc(((8 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c4-bottom-vertical {
    left: 50%;
    top: calc(((14 - 1) * 18px) + 9px);
    height: calc(((20 - 14) * 18px));
    width: 1px;
    transform: translateX(-50%);
}

.breeding-confirm-genealogy__link--c4-bottom-left {
    left: 0;
    top: calc(((17 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c4-bottom-right-top {
    right: 0;
    top: calc(((14 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c4-bottom-right-bottom {
    right: 0;
    top: calc(((20 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g1-vertical {
    left: 50%;
    top: calc(((1 - 1) * 18px) + 9px);
    height: calc(((3 - 1) * 18px));
    width: 1px;
    transform: translateX(-50%);
}

.breeding-confirm-genealogy__link--c6-g1-left {
    left: 0;
    top: calc(((2 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g1-right-top {
    right: 0;
    top: calc(((1 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g1-right-bottom {
    right: 0;
    top: calc(((3 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g2-vertical {
    left: 50%;
    top: calc(((7 - 1) * 18px) + 9px);
    height: calc(((9 - 7) * 18px));
    width: 1px;
    transform: translateX(-50%);
}

.breeding-confirm-genealogy__link--c6-g2-left {
    left: 0;
    top: calc(((8 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g2-right-top {
    right: 0;
    top: calc(((7 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g2-right-bottom {
    right: 0;
    top: calc(((9 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g3-vertical {
    left: 50%;
    top: calc(((13 - 1) * 18px) + 9px);
    height: calc(((15 - 13) * 18px));
    width: 1px;
    transform: translateX(-50%);
}

.breeding-confirm-genealogy__link--c6-g3-left {
    left: 0;
    top: calc(((14 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g3-right-top {
    right: 0;
    top: calc(((13 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g3-right-bottom {
    right: 0;
    top: calc(((15 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g4-vertical {
    left: 50%;
    top: calc(((19 - 1) * 18px) + 9px);
    height: calc(((21 - 19) * 18px));
    width: 1px;
    transform: translateX(-50%);
}

.breeding-confirm-genealogy__link--c6-g4-left {
    left: 0;
    top: calc(((20 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g4-right-top {
    right: 0;
    top: calc(((19 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__link--c6-g4-right-bottom {
    right: 0;
    top: calc(((21 - 1) * 18px) + 9px);
    width: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.breeding-confirm-genealogy__branch,
.breeding-confirm-genealogy__pair {
    display: contents;
}

.breeding-confirm-genealogy-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    width: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(214, 179, 95, 0.16);
    background: rgba(0, 0, 0, 0.16);
    align-self: center;
}

.breeding-confirm-genealogy-card--foal {
    width: 100%;
    text-align: center;
    background: linear-gradient(180deg, rgba(120, 87, 42, 0.32), rgba(31, 22, 13, 0.76));
}

.breeding-confirm-genealogy-card--slot-foal { grid-column: 1; grid-row: 11; }
.breeding-confirm-genealogy-card--slot-sire { grid-column: 3; grid-row: 5; }
.breeding-confirm-genealogy-card--slot-dam { grid-column: 3; grid-row: 17; }
.breeding-confirm-genealogy-card--slot-ss { grid-column: 5; grid-row: 2; }
.breeding-confirm-genealogy-card--slot-sd { grid-column: 5; grid-row: 8; }
.breeding-confirm-genealogy-card--slot-ds { grid-column: 5; grid-row: 14; }
.breeding-confirm-genealogy-card--slot-dd { grid-column: 5; grid-row: 20; }
.breeding-confirm-genealogy-card--slot-sss { grid-column: 7; grid-row: 1; }
.breeding-confirm-genealogy-card--slot-ssd { grid-column: 7; grid-row: 3; }
.breeding-confirm-genealogy-card--slot-sds { grid-column: 7; grid-row: 7; }
.breeding-confirm-genealogy-card--slot-sdd { grid-column: 7; grid-row: 9; }
.breeding-confirm-genealogy-card--slot-dss { grid-column: 7; grid-row: 13; }
.breeding-confirm-genealogy-card--slot-dsd { grid-column: 7; grid-row: 15; }
.breeding-confirm-genealogy-card--slot-dds { grid-column: 7; grid-row: 19; }
.breeding-confirm-genealogy-card--slot-ddd { grid-column: 7; grid-row: 21; }

.breeding-confirm-genealogy-card__name {
    color: #f8f4e7;
    font-size: 0.68rem;
    line-height: 1.3;
    white-space: nowrap;
}

.breeding-confirm-genealogy-card__link {
    display: inline-block;
    max-width: none;
    color: #f8f4e7;
    text-decoration: none;
    width: 100%;
    white-space: nowrap;
}

.breeding-confirm-genealogy-card__link:hover {
    color: #fff6df;
    text-decoration: underline;
    text-decoration-color: rgba(214, 179, 95, 0.5);
    text-underline-offset: 2px;
}

.breeding-confirm-genealogy-card__link.is-disabled {
    color: #f8f4e7;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.breeding-confirm-genealogy-card__meta {
    color: rgba(255, 248, 226, 0.68);
    font-size: 0.66rem;
}

.breeding-feature-callouts {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.breeding-gestation-list {
    display: grid;
    gap: 12px;
}

.breeding-gestation-card {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(214, 179, 95, 0.16);
    background: rgba(0, 0, 0, 0.16);
}

.breeding-gestation-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.breeding-gestation-card__title {
    display: block;
    color: #fff4dd;
    font-size: 1rem;
}

.breeding-gestation-card__meta {
    margin: 4px 0 0;
    color: rgba(255, 248, 226, 0.68);
    font-size: 0.82rem;
    line-height: 1.45;
}

.breeding-gestation-card__status {
    white-space: nowrap;
}

.breeding-gestation-card__status.is-active {
    border-color: rgba(151, 177, 49, 0.28);
    background: rgba(151, 177, 49, 0.16);
    color: #ebf5c1;
}

.breeding-gestation-card__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.breeding-gestation-card__grid div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.breeding-gestation-card__label {
    color: var(--gold-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.breeding-gestation-card__grid strong {
    color: #f8f4e7;
    font-size: 0.92rem;
    line-height: 1.35;
}

.breeding-gestation-card__progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.breeding-gestation-card__progress span {
    color: rgba(255, 248, 226, 0.76);
    font-size: 0.8rem;
    font-weight: 700;
}

.breeding-gestation-card__progress-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.breeding-gestation-card__progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--olive), var(--olive-bright));
}

.breeding-gestation-card__note {
    margin: 0;
    color: rgba(255, 248, 226, 0.68);
    font-size: 0.8rem;
    line-height: 1.45;
}

.breeding-feature-callout {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(214, 179, 95, 0.16);
    background: rgba(0, 0, 0, 0.16);
}

.breeding-feature-callout strong {
    color: var(--gold-soft);
    font-size: 0.94rem;
    letter-spacing: 0.02em;
}

.breeding-feature-callout span {
    color: rgba(255, 248, 226, 0.78);
    line-height: 1.55;
}

.recruitment-metrics {
    margin: 0;
    display: grid;
    gap: 12px;
}

.recruitment-metrics div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.recruitment-metrics div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.recruitment-metrics dt {
    color: var(--muted);
}

.recruitment-metrics dd {
    margin: 0;
    color: var(--gold-soft);
    font-weight: 700;
    text-align: right;
}

.recruitment-card {
    color: inherit;
    text-decoration: none;
}

.recruitment-roster-group + .recruitment-roster-group {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.recruitment-roster-group__header {
    margin-bottom: 12px;
}

.recruitment-roster-group__header h3 {
    margin: 0;
}

.recruitment-backtotop {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1180px) {
    .recruitment-roster-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recruitment-roster-grid > :last-child {
        grid-column: 1 / -1;
    }
}

.recruitment-market-list {
    display: grid;
    gap: 12px;
}

.recruitment-market-card {
    display: block;
}

.recruitment-market-card .sales-card__line {
    grid-template-columns: minmax(260px, 2.1fr) minmax(460px, 3.3fr) minmax(120px, 0.85fr) minmax(140px, 0.95fr);
}

.recruitment-market-card__horselink {
    color: inherit;
    text-decoration: none;
}

.recruitment-market-card__side {
    min-width: 0;
}

.recruitment-market-card__side form {
    margin: 0;
}

.recruitment-market-card__cancel {
    white-space: nowrap;
}

.recruitment-market-card__stats {
    grid-template-columns: minmax(0, 2.2fr) 64px minmax(120px, 1fr) minmax(112px, 0.95fr);
}

.recruitment-market-card__stats div:first-child {
    grid-column: span 1;
}

.recruitment-market-card__stats div:nth-child(2) {
    justify-items: center;
}

.recruitment-market-card__stats dd {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.recruitment-market-card__stats div:first-child dd {
    font-size: 0.78rem;
    line-height: 1.2;
}

.recruitment-market-card__stats div {
    align-content: start;
}

.recruitment-market-panel + .recruitment-market-panel {
    margin-top: 22px;
}

@media (max-width: 1520px) {
    .recruitment-market-card .sales-card__line {
        grid-template-columns: minmax(240px, 2fr) minmax(400px, 3fr) minmax(108px, 0.8fr) minmax(132px, 0.9fr);
    }
}

.recruitment-rating-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: 44px;
}

.sales-card__countdown {
    display: grid;
    gap: 4px;
    text-align: right;
}

.sales-card__countdown span {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sales-card__countdown strong {
    color: var(--gold-soft);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Barlow", "Trebuchet MS", sans-serif;
    background:
        radial-gradient(circle at top, rgba(128, 138, 44, 0.12), transparent 32%),
        linear-gradient(180deg, #050402 0%, #161108 16%, #2d220f 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent);
}

a {
    color: inherit;
    text-decoration: none;
}

.site-shell {
    width: min(1440px, calc(100% - 28px));
    margin: 18px auto 32px;
}

.site-shell--windowed {
    width: min(1440px, calc(100% - 18px));
    margin-top: 10px;
}

.page--windowed {
    padding-top: 12px;
}

.topbar {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    background:
        linear-gradient(180deg, rgba(114, 79, 25, 0.9), rgba(47, 31, 12, 0.96)),
        linear-gradient(120deg, rgba(166, 124, 49, 0.18), transparent 45%);
    box-shadow: var(--shadow);
}

.topbar__corner {
    position: absolute;
    top: 12px;
    right: 18px;
    z-index: 2;
    display: grid;
    justify-items: end;
    gap: 8px;
}

.topbar__datetime {
    justify-self: end;
}

.header-notices {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
}

.header-notice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    width: 42px;
    padding: 7px 10px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 220, 150, 0.12);
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.04);
    font-size: 0.83rem;
    line-height: 1.25;
    transition: width 0.22s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.header-notice:hover,
.header-notice:focus-visible {
    width: 320px;
    transform: translateY(-1px);
    border-color: rgba(255, 220, 150, 0.24);
    background: rgba(0, 0, 0, 0.28);
}

.header-notice.is-unread {
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 205, 0.08),
        0 0 0 1px rgba(255, 220, 150, 0.12);
}

.header-notice.is-unread .header-notice__icon {
    animation: header-notice-pulse 0.9s ease-in-out infinite;
}

.header-notice--system {
    color: #dce4f0;
}

.header-notice--player {
    color: #f1dfb4;
}

.header-notice__icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.header-notice__text {
    min-width: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.header-notice:hover .header-notice__text,
.header-notice:focus-visible .header-notice__text {
    opacity: 1;
    transform: translateX(0);
}

.header-notice__icon--system {
    background: linear-gradient(180deg, #e9eff7, #8c9cb5);
    color: #213042;
}

.header-notice__icon--player {
    background: linear-gradient(180deg, #ffe7aa, #c88b1c);
    color: #51320a;
}

@keyframes header-notice-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(255, 220, 150, 0.18),
            0 0 10px rgba(255, 220, 150, 0.12);
    }

    50% {
        transform: scale(1.18);
        box-shadow:
            0 0 0 4px rgba(255, 220, 150, 0.12),
            0 0 22px rgba(255, 220, 150, 0.52);
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand__logo-wrap {
    display: grid;
    place-items: center;
    width: min(520px, 38vw);
    aspect-ratio: 2.68 / 1;
    min-width: 340px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 220, 150, 0.1);
    background: rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 230, 180, 0.04);
    overflow: hidden;
}

.brand__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 47%;
}

.topbar__status {
    display: grid;
    gap: 10px;
}

.status-block {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.status-block--full {
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

.status-label,
.eyebrow {
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
}

.status-inline,
.status-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.95rem;
}

.status-inline {
    margin-top: 2px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 220, 150, 0.12);
    background: rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.04);
}

.status-pill--stable {
    align-items: stretch;
    gap: 0;
    padding-inline: 16px;
}

.status-pill__meta {
    display: grid;
    gap: 8px;
    align-content: center;
}

.status-meta-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    column-gap: 18px;
    min-width: min(360px, 100%);
}

.status-meta-item__label {
    color: var(--gold-soft);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: left;
}

.status-meta-item__value {
    color: #f3ead5;
    font-weight: 700;
    text-align: left;
}

.status-pill__label {
    color: var(--gold-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.status-pill__value {
    color: #f3ead5;
    font-weight: 700;
}

.status-pill__value--stable {
    font-size: 1.02rem;
}

.live-datetime {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #d6dde8;
    font-weight: 700;
}

.live-datetime__date {
    color: #f3ead5;
}

.live-datetime__separator {
    color: rgba(255, 240, 205, 0.35);
}

.live-datetime__time {
    color: #7fc0ff;
}

.currency-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f3ead5;
    font-weight: 700;
}

.currency-inline__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    background: transparent;
    border-radius: 50%;
    clip-path: circle(41% at 50% 50%);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.season-chip {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 220, 150, 0.18);
    background: rgba(0, 0, 0, 0.16);
}

.action-button,
.panel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid rgba(181, 212, 80, 0.15);
    background: linear-gradient(180deg, #88a42f, #627816);
    color: #f8f4e7;
    font-weight: 700;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.action-button:hover,
.panel-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.action-button--secondary {
    background: linear-gradient(180deg, #6a5330, #47351d);
}

/* ==========================================================================
   RECHERCHE GLOBALE
   ========================================================================== */

/* Le champ occupe une rangee a lui seul, aligne a droite : il se pose au bas de
   l'en-tete, juste au-dessus du menu, sans jamais chevaucher le bloc d'etat ni
   le coin superieur (positionne en absolu, lui). */
.topbar__search {
    grid-column: 1 / -1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 380px);
}

.topbar__search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.topbar__search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.7;
    pointer-events: none;
}

.topbar__search input[type="search"] {
    width: 100%;
    /* 16px minimum : en deca, Safari mobile zoome automatiquement a la mise au
       point et le joueur se retrouve avec une page decadree. */
    font-size: 16px;
    padding: 9px 12px 9px 32px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
}

.topbar__search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.topbar__search input[type="search"]:focus {
    outline: none;
    border-color: rgba(141, 163, 45, 0.75);
    background: rgba(0, 0, 0, 0.4);
}

.topbar__search-submit {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(141, 163, 45, 0.22);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.topbar__search-submit:hover,
.topbar__search-submit:focus {
    background: rgba(141, 163, 45, 0.36);
}

/* Libelle reserve aux lecteurs d'ecran : le champ est identifie par son icone
   pour les voyants, mais une zone de saisie sans nom est inutilisable au clavier
   comme au lecteur vocal. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* GRILLE et non flex : le champ etait ecrase a une largeur nulle. Un <label> en
   flex se dimensionne sur son contenu, or son seul contenu est un input en
   width:100% — la largeur se definissait par elle-meme et retombait a zero. Une
   piste `minmax(0, 1fr)` fixe la largeur AVANT que l'input ne la lise. */
.search-page-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.search-page-form__field {
    display: block;
    min-width: 0;
}

.search-page-form input[type="search"] {
    width: 100%;
    font-size: 16px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
}

.search-page-form input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-page-form input[type="search"]:focus {
    outline: none;
    border-color: rgba(141, 163, 45, 0.75);
}

/* La marge haute de .panel-button--accent est prevue pour un bouton en fin de
   formulaire vertical ; ici elle desalignerait le bouton de son champ. */
.search-page-form .panel-button {
    margin-top: 0;
}

/* Les resultats occupent toute la largeur disponible : sept colonnes serrees
   dans un panneau de 480 px obligeaient a faire defiler pour lire une ligne. */
.search-panel--wide {
    grid-column: 1 / -1;
}

/* .content-grid espace ses panneaux INTERNES (gap: 18px) mais ne prevoit rien
   entre deux sections successives : les blocs se touchaient. Meme valeur que le
   gap, pour que le rythme vertical de la page reste regulier. */
.search-section {
    margin-bottom: 18px;
}

.search-section:last-child {
    margin-bottom: 0;
}

/* Un tableau large ne doit jamais elargir la page : il defile dans son cadre. */
.search-table-wrap {
    overflow-x: auto;
}

.search-table {
    width: 100%;
    border-collapse: collapse;
}

.search-table th,
.search-table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    white-space: nowrap;
}

.search-table th {
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.search-table__num {
    text-align: right;
}

/* Les origines sont la seule colonne qui peut etre longue : elle absorbe la
   place disponible et se coupe, plutot que de pousser les autres dehors. */
.search-table__origins {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-count {
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.search-note {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.9rem;
}

.search-muted {
    color: var(--muted);
}

.search-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.search-badge--active {
    background: rgba(141, 163, 45, 0.22);
    color: #d8e9a2;
}

.search-badge--pasture {
    background: rgba(90, 140, 210, 0.2);
    color: #cfe4ff;
}

/* Archives : volontairement terne. Ces 36 000 ancetres servent la genealogie,
   ils ne doivent pas attirer l'oeil comme un cheval disponible. */
.search-badge--archive {
    background: rgba(255, 255, 255, 0.07);
    color: var(--muted);
}

.search-badge--self {
    margin-left: 8px;
    background: rgba(232, 200, 116, 0.2);
    color: #f0d79a;
}

/* ==========================================================================
   SAILLIES EN STOCK : destruction contre remboursement
   ========================================================================== */

/* La carte de saillie est un <button> (elle selectionne l'etalon pour le
   croisement) : le formulaire de destruction ne peut pas y etre imbrique, il se
   place dessous dans cette enveloppe. */
.breeding-cover-entry {
    display: grid;
    gap: 4px;
}

.breeding-cover-burn {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 6px;
}

/* Rouge sourd, et volontairement discret : detruire une saillie est irreversible,
   l'action ne doit pas attirer le clic — juste rester trouvable. */
.breeding-cover-burn__button {
    padding: 4px 11px;
    border: 1px solid rgba(200, 100, 100, 0.32);
    border-radius: 999px;
    background: rgba(200, 100, 100, 0.12);
    color: #e8b3b3;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.breeding-cover-burn__button:hover,
.breeding-cover-burn__button:focus-visible {
    background: rgba(200, 100, 100, 0.26);
    border-color: rgba(240, 160, 160, 0.6);
    color: #ffd7d7;
}

/* Option verrouillee (septembre, etalon de joueur) : montree grisee avec le motif
   au survol. La masquer laisserait croire a un bug. */
.breeding-cover-burn__button--disabled {
    display: inline-block;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    cursor: help;
}

/* Casaque cliquable : elle mene a l'ecurie proprietaire, dont elle porte les
   couleurs. Le curseur et un leger relief au survol signalent qu'il y a un lien —
   sans quoi une image reste une image. */
.courses-runners-table__silk-link {
    display: inline-flex;
    border-radius: 6px;
    line-height: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.courses-runners-table__silk-link:hover,
.courses-runners-table__silk-link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(214, 179, 95, 0.55);
}

/* ==========================================================================
   MUSIQUE DU CHEVAL (7 dernieres courses) + acces a son historique de ventes
   ========================================================================== */

.horse-music {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    /* Chiffres a chasse fixe : la musique se lit comme une suite, les rangs
       doivent s'aligner d'une ligne a l'autre. */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.horse-music__run {
    padding: 1px 7px;
    /* Meme habillage que .messages-chip, la pastille standard du jeu : fond sombre
       et lisere dore. Le fond blanc translucide d'origine virait au gris sale sur le
       brun des panneaux — c'etait lui, et non le survol, qui jurait. */
    border-radius: 999px;
    border: 1px solid rgba(214, 179, 95, 0.22);
    background: rgba(0, 0, 0, 0.2);
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* Victoire en or, podium en olive : la carriere se lit d'un coup d'oeil. */
.horse-music__run--win {
    background: rgba(232, 200, 116, 0.2);
    border-color: rgba(232, 200, 116, 0.45);
    color: #f5dda0;
}

.horse-music__run--place {
    background: rgba(141, 163, 45, 0.18);
    border-color: rgba(141, 163, 45, 0.45);
    color: #d8e9a2;
}

/* SURVOL : soulignement et accent dore, la convention du jeu pour une course
   cliquable (cf .horse-record-course-link). Chaque pastille garde SA teinte,
   simplement plus soutenue : perdre la couleur du resultat au survol reviendrait a
   effacer l'information au moment meme ou le joueur la designe. */
a.horse-music__run:hover,
a.horse-music__run:focus-visible {
    background: rgba(214, 179, 95, 0.2);
    border-color: var(--gold-soft);
    color: var(--gold-soft);
    text-decoration: underline;
}

a.horse-music__run--win:hover,
a.horse-music__run--win:focus-visible {
    background: rgba(232, 200, 116, 0.36);
    border-color: rgba(232, 200, 116, 0.7);
    color: #f8e7ba;
}

a.horse-music__run--place:hover,
a.horse-music__run--place:focus-visible {
    background: rgba(141, 163, 45, 0.32);
    border-color: rgba(141, 163, 45, 0.7);
    color: #e6f3bd;
}

/* INFOBULLE MAISON au survol d'une course.
   Reprise a l'identique de .stable-help-tooltip (les « ? » de la fiche ecurie) :
   meme cadre dore, meme fond, meme fleche. L'attribut `title` a ete abandonne
   parce qu'il declenche l'infobulle du NAVIGATEUR — blanche, imposee par le
   systeme, impossible a habiller.
   Elle s'ancre a GAUCHE de la pastille et s'ouvre vers la droite : centree, elle
   deborderait du panneau sur la premiere course de la ligne. */
.horse-music__run[data-tooltip] {
    position: relative;
}

.horse-music__run[data-tooltip]::before,
.horse-music__run[data-tooltip]::after {
    position: absolute;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.horse-music__run[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 12px);
    width: max-content;
    max-width: 260px;
    padding: 10px 12px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(72, 45, 12, 0.45),
        inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    letter-spacing: 0;
    transform: translateY(6px);
}

.horse-music__run[data-tooltip]::after {
    content: "";
    bottom: calc(100% + 7px);
    left: 12px;
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(236, 194, 105, 0.68);
    border-bottom: 1px solid rgba(236, 194, 105, 0.68);
    background: rgba(27, 18, 8, 0.995);
    transform: translateY(6px) rotate(45deg);
}

.horse-music__run[data-tooltip]:hover::before,
.horse-music__run[data-tooltip]:hover::after,
.horse-music__run[data-tooltip]:focus-visible::before,
.horse-music__run[data-tooltip]:focus-visible::after {
    opacity: 1;
}

.horse-music__run[data-tooltip]:hover::before,
.horse-music__run[data-tooltip]:focus-visible::before {
    transform: translateY(0);
}

.horse-music__run[data-tooltip]:hover::after,
.horse-music__run[data-tooltip]:focus-visible::after {
    transform: translateY(0) rotate(45deg);
}

/* Millesime : c'est un separateur, pas un resultat — il ne doit pas se lire
   comme une course de plus. */
.horse-music__year {
    color: var(--muted);
    font-size: 0.85em;
    font-style: italic;
    opacity: 0.85;
}

.horse-music__empty {
    color: var(--muted);
}

.horse-stats-panel__links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* Le bouton doit passer pour un lien : c'est un <button> parce qu'il declenche
   une action, pas parce qu'il doit s'en donner l'apparence. */
.horse-sales-history-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ==========================================================================
   COUTS SALARIAUX : formule + part de gains par jockey
   ========================================================================== */

.recruitment-subscription {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recruitment-subscription__logo {
    height: 22px;
    width: auto;
    flex: 0 0 auto;
}

.recruitment-jockey-shares {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.recruitment-jockey-shares__title {
    margin: 0 0 6px;
    font-size: 0.86rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.recruitment-jockey-shares__list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

/* Nom a gauche, pourcentage cale a droite : la colonne de chiffres se lit d'un
   seul balayage vertical, ce qui est tout l'interet d'une liste de couts. */
.recruitment-jockey-share {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.recruitment-jockey-share__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.06);
}

.recruitment-jockey-share__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recruitment-jockey-share__percent {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #d8e9a2;
}

/* ==========================================================================
   HISTORIQUE DES CONTRATS (pop-up de la page recrutement)
   ========================================================================== */

/* Vignette du jockey : c'est ce qui distingue cet historique de celui des ventes.
   Jockeys et entraineurs ont un visage, autant s'en servir pour les reconnaitre
   d'un coup d'oeil. */
.contracts-history__jockey {
    white-space: nowrap;
}

.contracts-history__avatar {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.06);
}

.contracts-history__state {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.contracts-history__state--active {
    background: rgba(141, 163, 45, 0.22);
    color: #d8e9a2;
}

/* Contrat arrive a son terme : neutre, ce n'est pas un incident. */
.contracts-history__state--past {
    background: rgba(255, 255, 255, 0.07);
    color: var(--muted);
}

/* Contrat rompu avant terme : signale, sans dramatiser. */
.contracts-history__state--ended {
    background: rgba(200, 100, 100, 0.18);
    color: #f0b8b8;
}

/* Logo « Infinite » accole au nom d'ecurie. Hauteur calee sur la ligne de texte :
   il signale l'abonnement sans voler la vedette au nom, qui reste l'information
   que le joueur est venu chercher. */
.search-infinite {
    height: 22px;
    width: auto;
    margin-left: 8px;
    vertical-align: middle;
}

.menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 5px auto;
    background: var(--text);
}

.main-nav {
    display: flex;
    gap: 2px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-top: 0;
    background: linear-gradient(180deg, rgba(93, 66, 23, 0.95), rgba(55, 39, 15, 0.98));
    overflow: visible;
}

.main-nav__item {
    position: relative;
    flex: 1 0 auto;
    padding-bottom: 8px;
    margin-bottom: -8px;
}

.main-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 1 0 auto;
    padding: 14px 16px;
    color: #dfd0b1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.main-nav__group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.main-nav__icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.main-nav__link:hover,
.main-nav__link.is-active {
    color: #fff6dc;
    background: rgba(143, 167, 49, 0.16);
}

.main-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--olive), var(--gold));
}

.main-nav__submenu {
    position: absolute;
    left: 8px;
    top: calc(100% - 2px);
    z-index: 50;
    display: grid;
    gap: 6px;
    min-width: 250px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    background: linear-gradient(180deg, rgba(63, 45, 18, 0.98), rgba(36, 24, 8, 0.98));
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.main-nav__item--has-submenu:hover .main-nav__submenu,
.main-nav__item--has-submenu:focus-within .main-nav__submenu,
.main-nav__item--has-submenu.is-open .main-nav__submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.main-nav__sublink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #eadfca;
    text-decoration: none;
}

.main-nav__sublink:hover,
.main-nav__sublink.is-active {
    background: rgba(214, 179, 95, 0.12);
    color: #fff4dd;
}

.page {
    padding: 22px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 22px 22px;
    background:
        linear-gradient(180deg, rgba(21, 15, 7, 0.94), rgba(26, 18, 8, 0.98)),
        linear-gradient(120deg, rgba(255, 228, 167, 0.03), transparent 40%);
    box-shadow: var(--shadow);
}

.hero-panel,
.content-hero {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    margin-bottom: 22px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(77, 88, 28, 0.24), rgba(19, 15, 9, 0.4) 45%),
        radial-gradient(circle at top right, rgba(220, 175, 95, 0.16), transparent 28%),
        var(--panel);
}

.hero-panel h1,
.content-hero h1,
.panel__header h2,
.session-card h3,
.zone-card h3,
.horse-profile h3,
.attributes-card h3 {
    margin: 0;
    font-family: "Cinzel", serif;
}

.hero-copy,
.content-hero p {
    max-width: 720px;
    color: var(--muted);
    line-height: 1.6;
}

.stable-intro {
    justify-content: center;
    text-align: center;
}

.stable-intro__inner {
    width: 100%;
    max-width: 1180px;
}

.stable-intro__inner h1 {
    text-align: center;
}

.stable-intro__inner p {
    max-width: none;
    margin: 14px auto 0;
}

.hero-panel__focus {
    display: grid;
    gap: 12px;
    min-width: 310px;
}

.focus-card {
    padding: 16px 18px;
    border: 1px solid rgba(214, 179, 95, 0.14);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.16);
}

.focus-card__label {
    display: block;
    margin-bottom: 6px;
    color: var(--gold-soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.auth-highlights {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.auth-highlights article {
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(214, 179, 95, 0.12);
}

.auth-highlights p,
.auth-footer p,
.alert p {
    margin: 6px 0 0;
    color: var(--muted);
}

.auth-panel {
    align-self: start;
}

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.auth-tab {
    padding: 12px 14px;
    text-align: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-weight: 700;
}

.auth-tab.is-active {
    background: rgba(141, 163, 45, 0.18);
    color: #fff;
}

.auth-form {
    display: grid;
    gap: 14px;
}

/* « Mot de passe oublie ? » : discret sous le bouton, mais assez espace pour
   rester atteignable au pouce — trois quarts des joueurs sont sur mobile. */
.auth-forgot {
    margin: 2px 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.auth-forgot a {
    color: var(--muted);
    text-decoration: underline;
}

.auth-forgot a:hover,
.auth-forgot a:focus {
    color: #fff;
}

.auth-hint {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.auth-hint a {
    color: var(--muted);
    text-decoration: underline;
}

/* Page « mot de passe oublie » : un seul panneau, centre, jamais etale sur
   toute la largeur d'un ecran de bureau. */
/* Double classe volontaire : plus loin dans la feuille, une requete media repasse
   .content-grid a trois colonnes. A specificite egale, c'est la derniere regle qui
   gagne — il faut donc peser plus lourd qu'elle, pas seulement arriver avant. */
.content-grid.content-grid--single {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
}

.auth-panel--standalone {
    align-self: start;
}

.auth-form label {
    display: grid;
    gap: 8px;
}

.auth-form span {
    color: var(--gold-soft);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--text);
    font: inherit;
}

/* Menu deroulant ouvert : le fond translucide ci-dessus ne s'applique qu'a la case fermee,
   la liste qui se deploie est dessinee par le systeme. Sans fond OPAQUE ni "color-scheme",
   Windows la rend en gris sur gris. Meme traitement que les listes des engagements. */
.auth-form select {
    color-scheme: dark;
    background-color: #24180d;
}

.auth-form select option,
.auth-form select optgroup {
    background: #24180d;
    color: #fff8e6;
}

.auth-form textarea {
    min-height: 140px;
    padding: 12px 14px;
    resize: vertical;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
    outline: 2px solid rgba(159, 187, 51, 0.35);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   PRESENTATION D'ECURIE (bloc-note)
   Saisie en bas de la page ecurie, lecture sur la fiche publique.
--------------------------------------------------------------------------- */
.stable-note-panel { margin-top: 18px; }

.stable-note-form { gap: 14px; }
.stable-note-form textarea { min-height: 170px; }

.stable-note-hint {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.78rem;
}

/* Le texte vient du joueur : il est echappe a l'affichage, seuls les sauts de
   ligne sont restitues. "overflow-wrap" evite qu'une suite de caracteres sans
   espace (une URL collee) n'elargisse le panneau sur mobile. */
.stable-note-body {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.65;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Mention discrete sous un champ de saisie (limite de caracteres). */
.messages-field-note {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
}

.messages-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 18px;
}

.messages-main {
    display: grid;
    gap: 18px;
}

.messages-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.messages-list__item {
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.messages-list__item:hover,
.messages-list__item:focus-visible,
.messages-list__item.is-active {
    transform: translateY(-1px);
    border-color: rgba(214, 179, 95, 0.26);
    background: rgba(127, 144, 39, 0.12);
}

.messages-list__item.is-unread strong::before {
    content: "• ";
    color: var(--gold-soft);
}

.messages-reader {
    min-height: 220px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.16);
    line-height: 1.65;
    white-space: normal;
}

.auth-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.alert {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
}

.alert--success {
    background: rgba(83, 131, 34, 0.15);
    border-color: rgba(140, 194, 75, 0.3);
}

.alert--warning {
    background: rgba(167, 112, 40, 0.14);
    border-color: rgba(214, 179, 95, 0.24);
}

.alert--error {
    background: rgba(120, 35, 25, 0.16);
    border-color: rgba(194, 96, 81, 0.28);
}

.breeding-flash {
    margin-top: 16px;
}

.breeding-flash p {
    margin: 0;
    line-height: 1.55;
}

.breeding-flash--danger {
    background: rgba(142, 28, 28, 0.28);
    border-color: rgba(214, 92, 92, 0.45);
    color: #ffe5e0;
}

#stable-feedback {
    margin-bottom: 10px;
}

.stable-confirm-dialog {
    width: min(420px, calc(100% - 24px));
    border: 1px solid rgba(214, 179, 95, 0.28);
    border-radius: 20px;
    padding: 0;
    background: linear-gradient(180deg, rgba(44, 30, 14, 0.98), rgba(18, 13, 7, 0.995));
    color: var(--text);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}

.stable-confirm-dialog::backdrop {
    background: rgba(8, 6, 4, 0.62);
}

.stable-confirm-dialog__inner {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.stable-confirm-dialog__inner h3 {
    margin: 0;
    color: var(--gold-soft);
}

.stable-confirm-dialog__inner p {
    margin: 0;
    line-height: 1.5;
}

.stable-confirm-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.breeding-confirm-dialog {
    width: min(760px, calc(100vw - 24px)) !important;
    max-width: 760px;
}

.breeding-confirm-dialog .horse-popup-dialog__inner {
    gap: 12px;
    padding: 18px 20px;
    overflow-x: visible;
}

.training-flash-dialog .horse-record-dialog__section,
.training-flash-dialog .panel__header,
.training-flash-dialog .panel-note {
    text-align: center;
}

.training-flash-dialog .panel__header h3 {
    width: 100%;
    text-align: center;
}

.dashboard-grid,
.content-grid {
    display: grid;
    gap: 18px;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    gap: 18px;
}

.admin-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(197, 156, 82, 0.12), transparent 32%),
        linear-gradient(180deg, #191109 0%, #0c0905 100%);
}

.admin-page {
    max-width: 1240px;
    margin: 0 auto;
}

.admin-shell {
    margin-top: 28px;
}

.admin-intro {
    min-height: 100%;
}

.admin-dashboard {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.admin-dashboard__hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.admin-dashboard__hero h1 {
    margin-bottom: 10px;
}

.admin-dashboard__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.admin-stat-card {
    display: grid;
    gap: 10px;
}

.admin-stat-card strong {
    font-size: 2rem;
    font-family: "Cinzel", serif;
    color: #fff2cf;
}

.admin-panels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-panels-grid--wide {
    grid-template-columns: 1.15fr 0.85fr;
}

.admin-cron-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.admin-cron-grid > .is-hidden {
    display: none;
}

.admin-cron-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-cron-checkbox input {
    width: auto;
}

.admin-cron-pre {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #f8edd1;
}

.admin-cron-history {
    display: grid;
    gap: 12px;
}

.admin-cron-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-cron-actions form {
    margin: 0;
}

.admin-cron-table th a {
    color: inherit;
    text-decoration: none;
}

.admin-cron-table code {
    font-size: 0.85rem;
}

.admin-avatar-list {
    display: grid;
    gap: 12px;
}

.admin-avatar-card code {
    font-size: 0.82rem;
}

.admin-avatar-pre {
    margin-top: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-avatar-preview {
    margin-top: 10px;
}

.admin-avatar-preview img {
    display: block;
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.16);
}

.admin-avatar-error {
    margin-top: 10px;
    margin-bottom: 0;
}

.dashboard-grid {
    grid-template-columns: 280px minmax(0, 1fr) 310px;
}

.dashboard-grid > .panel--full-width {
    grid-column: 1 / -1;
}

.content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Credits : on garde les 3 colonnes de .content-grid pour que la rangee s'aligne sur celle
   des formules — « Acheter » occupe 1 colonne (comme « Votre formule ») et « Convertir »
   s'etend sur 2 (comme Premium + Infinite reunis). */
.finance-credits-grid > .finance-credits-convert {
    grid-column: span 2;
}

.training-summary-grid {
    margin-bottom: 18px;
    align-items: stretch;
}

.training-summary-grid > .panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.stable-horses-panel {
    margin-top: 18px;
}

.stable-horses-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.stable-overview-grid {
    display: grid;
    grid-template-columns: 254px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.stable-left-column {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    align-self: stretch;
    width: 254px;
}

.silk-builder-panel {
    position: relative;
    z-index: 5;
    overflow: visible;
    width: 254px;
    max-width: 254px;
}

.stable-profile-panel {
    position: relative;
    z-index: 1;
}

.stable-silk {
    position: relative;
    width: 218px;
    min-height: 292px;
    overflow: hidden;
    transition: none;
}

.stable-silk.is-open {
    overflow: visible;
}

.stable-silk__heading {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.stable-silk__title {
    color: var(--gold-soft);
    font-family: "Cinzel", serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stable-silk__iframe {
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 3;
    display: block;
    width: 200px;
    height: 250px;
    margin-left: 0;
    border: none;
    background: transparent;
    transition: width 0.34s ease;
}

.stable-silk__iframe.is-open {
    width: 730px;
}

.stable-silk--readonly {
    min-height: 292px;
}

.stable-silk__static-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 250px;
    margin-top: 4px;
    border-radius: 18px;
    border: 1px solid rgba(255, 220, 150, 0.12);
    background:
        radial-gradient(circle at top, rgba(255, 220, 150, 0.16), transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.06));
}

.stable-silk__static-preview > img {
    display: block;
    width: 200px;
    height: 250px;
    object-fit: contain;
}

.stable-silk-preview-art {
    position: relative;
    width: 200px;
    height: 250px;
    overflow: hidden;
}

.stable-silk-preview-art__layer {
    position: absolute;
    display: block;
    image-rendering: auto;
}

.stable-silk-preview-art__layer--silk-bg,
.stable-silk-preview-art__layer--silk-color,
.stable-silk-preview-art__layer--silk-pattern,
.stable-silk-preview-art__layer--sleeve-bg,
.stable-silk-preview-art__layer--sleeve-color,
.stable-silk-preview-art__layer--sleeve-pattern,
.stable-silk-preview-art__layer--sleeve-fg,
.stable-silk-preview-art__layer--silk-fg {
    top: 14px;
    left: 1px;
    width: 198px;
    height: 185px;
}

.stable-silk-preview-art__layer--cask-bg,
.stable-silk-preview-art__layer--cask-color,
.stable-silk-preview-art__layer--cask-pattern,
.stable-silk-preview-art__layer--cask-fg {
    top: 0;
    left: 120px;
    width: 77px;
    height: 84px;
}

.stable-silk__static-fallback {
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.stable-silk__toggle {
    position: absolute;
    top: 50px;
    left: 8px;
    z-index: 4;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.stable-silk__toggle::before,
.stable-silk__toggle::after {
    position: absolute;
    left: 2px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.stable-silk__toggle::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 12px);
    padding: 8px 11px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(72, 45, 12, 0.45),
        inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.stable-silk__toggle::after {
    content: "";
    bottom: calc(100% + 6px);
    left: 18px;
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(236, 194, 105, 0.68);
    border-bottom: 1px solid rgba(236, 194, 105, 0.68);
    background: rgba(27, 18, 8, 0.995);
    transform: translateY(6px) rotate(45deg);
}

.stable-silk__toggle:hover::before,
.stable-silk__toggle:hover::after,
.stable-silk__toggle:focus-visible::before,
.stable-silk__toggle:focus-visible::after {
    opacity: 1;
}

.stable-silk__toggle:hover::before,
.stable-silk__toggle:focus-visible::before {
    transform: translateY(0);
}

.stable-silk__toggle:hover::after,
.stable-silk__toggle:focus-visible::after {
    transform: translateY(0) rotate(45deg);
}

.stable-silk__toggle img {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.stable-advice {
    height: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 220, 150, 0.12);
    background: rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.04);
}

.stable-advice-panel {
    align-self: stretch;
    width: 254px;
    max-width: 254px;
    min-height: 0;
}

.stable-overview-grid > .stable-advice-panel {
    display: none;
}

.stable-advice__label {
    display: block;
    margin-bottom: 8px;
    color: var(--gold-soft);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.stable-advice p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 0.94rem;
}

.stable-horse-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sales-hero {
    align-items: center;
}

.sales-hero--cover .stable-intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 18px;
    align-items: center;
}

.sales-hero--cover .stable-intro__inner h1,
.sales-hero--cover .stable-intro__inner p {
    grid-column: 1;
}

.sales-hero__focus {
    display: grid;
    gap: 10px;
    justify-items: end;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: max-content;
}

.sales-hero__badge {
    width: 100px;
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.34));
}

.sales-hero__anchor {
    transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.sales-hero__anchor:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    border-color: rgba(255, 220, 150, 0.24);
}

.sales-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.sales-commitments-panel {
    margin-bottom: 28px;
}

.sales-commitments-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sales-commitment-card {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 220, 150, 0.12);
    background:
        linear-gradient(180deg, rgba(61, 43, 18, 0.4), rgba(22, 16, 9, 0.48)),
        rgba(0, 0, 0, 0.12);
}

.sales-commitment-card__main,
.sales-commitment-card__meta,
.sales-commitment-card__actions {
    min-width: 0;
}

.sales-commitment-card__main {
    display: grid;
    gap: 2px;
}

.sales-commitment-card__main strong,
.sales-commitment-card__main span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-commitment-card__main span {
    color: var(--muted);
    font-size: 0.8rem;
}

.sales-commitment-card__meta {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    color: #fff4dc;
    font-weight: 700;
    white-space: nowrap;
}

.sales-commitment-card__meta strong {
    color: var(--gold-soft);
    font-family: "Cinzel", serif;
    font-size: 1rem;
}

.sales-commitment-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.sales-cancel-button {
    color: #f0c4bb;
    border-color: rgba(194, 96, 81, 0.28);
    background: rgba(120, 35, 25, 0.16);
}

.sales-cancel-button:hover {
    background: rgba(120, 35, 25, 0.24);
    border-color: rgba(194, 96, 81, 0.38);
}

.sales-column {
    display: grid;
    gap: 14px;
    align-content: start;
}

.sales-list {
    display: grid;
    gap: 10px;
}

/* Formulaire reduit a un bouton, glisse la ou la fiche attend un simple lien :
   il ne doit occuper aucune place propre. */
.horse-sheet-inline-form {
    display: inline;
    margin: 0;
}

.horse-sheet-inline-form button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* Delai avant poulinage, en retrait discret derriere la date : c'est un reperage,
   pas l'information principale. */
.horse-foaling-countdown {
    margin-left: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
}

/* --- Barre de filtres et de tri du marche ------------------------------------- */
.sales-filter__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    /* La rangee d'onglets qui precedait a disparu (le type est devenu un menu) :
       plus rien a decoller au-dessus. Largeur pleine pour que la ligne de resultat
       passe dessous quoi qu'il arrive. */
    flex: 1 1 100%;
}

.sales-filter__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sales-filter__field > span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* color-scheme + fond OPAQUE : sans cela le systeme dessine la liste deroulante
   ouverte en gris sur gris (meme correctif que les autres selects du jeu). */
.sales-filter__field select {
    color-scheme: dark;
    background-color: #24180d;
    color: var(--text);
    border: 1px solid rgba(214, 179, 95, 0.22);
    border-radius: 10px;
    padding: 6px 10px;
    font: inherit;
    font-size: 0.85rem;
}

.sales-filter__field select option {
    background: #24180d;
    color: #fff8e6;
}

.sales-filter__reset {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(214, 179, 95, 0.28);
    background: rgba(0, 0, 0, 0.22);
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.sales-filter__reset:hover {
    color: var(--text);
    border-color: var(--gold-soft);
}

.sales-filter__result {
    flex: 1 1 100%;
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

@media (max-width: 720px) {
    /* Mobile : deux champs par ligne plutot qu'une file illisible. */
    .sales-filter__field { flex: 1 1 calc(50% - 5px); }
    .sales-filter__reset { flex: 1 1 100%; }
}

/* Le filtre du marche masque les cartes avec l'attribut `hidden`. Sans cette regle, le
   `display: block` ci-dessous l'emporte sur la feuille de style du navigateur et les
   cartes restaient VISIBLES : cliquer sur « Étalons » n'ecartait rien. */
.sales-card[hidden],
.sales-commitment-card[hidden] {
    display: none;
}

.sales-card {
    display: block;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 220, 150, 0.12);
    background:
        linear-gradient(180deg, rgba(61, 43, 18, 0.4), rgba(22, 16, 9, 0.48)),
        rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.04);
}

.sales-card__line {
    display: grid;
    grid-template-columns: minmax(300px, 2.3fr) minmax(360px, 2.6fr) minmax(120px, 0.9fr) minmax(116px, 0.95fr);
    gap: 10px;
    align-items: center;
}

.sales-card__horse {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.sales-card__avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(180deg, #7b5b2b, #35230f);
    color: #f5dfb0;
    font-family: "Cinzel", serif;
}

.sales-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sales-card__identity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sales-card__identity h3,
.sales-card__identity p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-card__identity h3 {
    font-family: "Cinzel", serif;
    font-size: 1rem;
}

/* LIGNE DES ORIGINES (« Par X et Y »).
   Les autres lignes d'identite sont en nowrap + ellipse, ce qui coupait presque
   toujours le nom de la mere. Ici on autorise le retour a la ligne, borne a deux
   lignes pour que les cartes gardent des hauteurs comparables.
   Selecteurs descendants obligatoires : ".sales-card__identity p" et
   ".sales-commitment-card__main span" sont plus specifiques qu'une simple classe
   et l'emporteraient sinon. Les deux blocs sont vises : cartes de vente ET
   « offres en cours », qui ont des structures differentes. */
.sales-card__identity .sales-card__origin,
.sales-commitment-card__main .sales-card__origin {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    line-height: 1.35;
}

.sales-card__identity p,
.sales-card__countdown span,
.sales-card__stats dt {
    color: var(--muted);
}

/* NOM DU CHEVAL CLIQUABLE (cartes du marche et blocs d'engagements).
   Le nom garde son apparence de titre : pas de couleur d'accent ni de soulignement
   permanent, qui feraient de chaque carte un sapin de Noel. Le signal d'interaction
   n'apparait qu'au survol, et le curseur suffit a l'annoncer. */
.sales-card__name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.sales-card__name-link:hover,
.sales-card__name-link:focus-visible {
    color: #fff0cf;
    border-bottom-color: rgba(255, 240, 207, 0.5);
}

.sales-origin-link {
    color: #f1d49a;
    text-decoration: none;
    border-bottom: 1px solid rgba(241, 212, 154, 0.22);
    transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.sales-origin-link:hover {
    color: #fff0cf;
    border-color: rgba(255, 240, 207, 0.5);
}

.sales-card__owner {
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-card__countdown {
    display: grid;
    gap: 2px;
    justify-items: center;
    text-align: center;
    min-width: 0;
}

.sales-card__countdown strong {
    color: var(--gold-soft);
    font-family: "Cinzel", serif;
    font-size: 1rem;
}

.sales-card__stats {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

/* CINQ CASES (ventes par tirage, depuis l'ajout du nombre de participants).
   Les deux premieres portent des montants en Oros et gardent la place ; les trois
   suivantes n'affichent que deux ou trois caracteres et se resserrent, pour que la
   ligne tienne sans passer a la ligne.
   Le variant est declare AVANT la regle mobile (2 colonnes), qui reste prioritaire
   sur petit ecran : a cette largeur, une seule ligne serait illisible. */
.sales-card__stats--five {
    grid-template-columns:
        minmax(0, 1.3fr) minmax(0, 1.3fr)
        minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
}

.sales-card__stats div {
    display: grid;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 0;
}

.sales-card__stats dt {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.sales-card__stats dd {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff4dc;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
}

.sales-card__actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.sales-card__actions--stacked {
    display: grid;
    gap: 6px;
    justify-items: end;
    justify-content: end;
    align-items: center;
}

.sales-card__actions--stacked form {
    margin: 0;
}

.sales-card__actions--stacked .horse-sheet-choice,
.sales-card__actions--stacked .sales-action-button {
    white-space: nowrap;
}

.sales-action-button {
    min-width: 0;
    min-height: 32px;
    padding: 0 12px;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sales-action-button[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.15);
    transform: none;
}

.sales-action-button--ended {
    border-color: rgba(255, 178, 87, 0.42);
    background:
        linear-gradient(180deg, rgba(210, 126, 28, 0.96), rgba(134, 73, 13, 0.98)),
        rgba(0, 0, 0, 0.12);
    color: #fff3dc;
    opacity: 1;
    filter: none;
}

.sales-confirm-dialog {
    width: min(430px, calc(100% - 24px));
}

.stable-horses-empty {
    margin: 0;
    min-height: 84px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--muted);
    line-height: 1.6;
}

.panel {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(47, 34, 17, 0.96), rgba(28, 21, 12, 0.98)),
        var(--panel-strong);
}

.panel__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.panel__header--stacked {
    align-items: start;
}

.panel__header--spaced {
    margin-top: 24px;
}

.panel-note {
    color: var(--muted);
    font-size: 0.88rem;
    text-align: right;
}

.horse-list {
    display: grid;
    gap: 12px;
}

/* ============================================================================
   ENVELOPPE D'UNE LIGNE DE CHEVAL PLACE (ligne + bouton de reprise).

   `display: contents` EFFACE cette boite : ses deux enfants — la ligne et le
   bloc d'action — redeviennent enfants directs de la grille `.horse-list`,
   exactement comme avant son introduction. Le rendu du bureau est donc
   inchange, au pixel pres.

   Sous 860 px, elle reprend corps pour reunir les deux en une seule carte :
   le bouton « Reprendre mon cheval » flottait sous la ligne sans lui etre
   visiblement rattache, et on ne savait plus de quel cheval il parlait.
   ============================================================================ */
.horse-list__entry {
    display: contents;
}

.horse-list__item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(127, 144, 39, 0.08);
    border: 1px solid rgba(127, 144, 39, 0.14);
}

/* Ligne de fiche cheval portant PLUSIEURS choix (ex. « Placer au pré » + « Placer aux haras »). */
/* PLUSIEURS CHOIX EMPILES dans la meme cellule d'action (« Placer au pré » +
   « Placer aux haras » sur la ligne Statut).
   Double classe volontaire : `.horse-sheet-data__action` est declaree bien plus bas
   dans cette feuille et, a specificite egale, imposait son `align-items: center`.
   En disposition COLONNE, align-items regit l'axe HORIZONTAL — les deux choix se
   retrouvaient donc centres, seuls de leur espece, quand tous les autres sont cales
   a droite. Il fallait peser plus lourd que la regle de base, pas seulement passer
   avant elle. */
.horse-sheet-data__action.horse-sheet-data__action--stacked {
    flex-direction: column;
    align-items: flex-end;   /* axe horizontal : cale a droite */
    justify-content: center; /* axe vertical : centre dans la ligne */
    gap: 2px;
}

/* Entraineur de jockey, presente au-dessus du tri dans « Jockeys maison ». */
.stable-jockey-trainer {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.stable-jockey-trainer__label {
    margin: 0 0 8px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

.stable-jockey-card--trainer {
    border-color: rgba(213, 166, 84, .35);
    background: rgba(213, 166, 84, .08);
}

/* Liste laterale des chevaux : intertitres de groupe (« Chevaux actifs », « Chevaux actifs placés »). */
.horse-list__group {
    margin: 14px 0 6px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

.horse-list__group:first-child {
    margin-top: 0;
}

/* Precision sous le nom d'un cheval place (« Chez X »). */
.horse-list__note {
    font-size: .78rem;
    font-style: italic;
    color: var(--muted);
}

/* PROCHAINE SEANCE, a la place de la jauge de forme.
   Le jour d'abord, l'exercice ensuite : le joueur balaie sa liste par dates. */
.horse-list__training {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--text);
}

.horse-list__training-day {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--gold);
}

.horse-list__training-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* « Standard » n'est pas une seance choisie : c'est ce qui se passe quand rien
   n'a ete demande. Meme traitement discret que « Rien de prevu », pour que le
   joueur repere d'un coup d'oeil les journees qui lui restent a garnir. */
.horse-list__training--standard .horse-list__training-label,
.horse-list__training--none {
    color: var(--muted);
    font-style: italic;
}

.horse-list__training--none {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
}

/* Programme consulte en lecture seule (cheval confie a un entraineur externe). */
.training-planner-panel__readonly {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(213, 166, 84, .1);
    color: var(--gold-soft);
    font-size: .92rem;
}

/* Statut d'entraineur sur la fiche ecurie : logo de l'abonnement devant le libelle. */
.stable-trainer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stable-trainer-status__logo {
    height: 34px;
    width: auto;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* ---- Abonnements & credits (page Finances) ---- */
/* Respiration entre la rangee des formules et celle des credits (hors media query : vaut
   aussi bien en 2 colonnes qu'en pile sur mobile). */
.finance-credits-grid {
    margin-top: 28px;
}

/* Les 3 blocs (formule en cours + les 2 offres) gardent la MEME hauteur et alignent leur bouton en bas. */
.finance-plans-grid > .panel,
.finance-credits-grid > .panel {
    display: flex;
    flex-direction: column;
}

.finance-plans-grid > .panel > form:last-child,
.finance-plans-grid > .panel > .horse-sheet-choice:last-child {
    margin-top: auto;
}

.finance-plan-card .panel__header {
    justify-content: center;
    min-height: 74px;
    margin-bottom: 10px;
}

.finance-plan__logo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: -8px 0 -4px;
    line-height: 1;
}

.finance-plan__logo {
    display: block;
    width: min(100%, 270px);
    max-height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

.finance-plan__logo--current {
    width: min(100%, 210px);
    max-height: 72px;
}

.finance-plan__current {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-soft);
    margin: 0 0 6px;
}

.finance-plan__current--logo {
    display: flex;
    align-items: center;
    margin: -8px 0 4px;
    min-height: 64px;
}

.finance-plan__price {
    font-size: 1.15rem;
    color: var(--gold-soft);
}

/* Avantages de la formule : puces dorees, texte compact (les cartes restent de meme hauteur). */
.finance-plan__features {
    list-style: none;
    margin: 10px 0 14px;
    padding: 0;
    display: grid;
    gap: 7px;
}

.finance-plan__features li {
    position: relative;
    padding-left: 20px;
    font-size: .92rem;
    line-height: 1.4;
}

.finance-plan__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gold);
    font-weight: 700;
}

.finance-credits__balance {
    font-size: 1.05rem;
}

/* Paliers d'achat : une grille reguliere, chaque bouton montre le montant ET les credits obtenus. */
.finance-credits__packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 12px 0 0;
}

.finance-credits__pack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    line-height: 1.2;
    padding: 10px 12px;
}

.finance-credits__pack-amount {
    font-size: 1.05rem;
    font-weight: 800;
}

.finance-credits__pack-credits {
    font-size: .78rem;
    opacity: .85;
    white-space: nowrap;
}

/* Grille de conversion : une ligne par palier, lisible sur mobile comme sur desktop. */
.finance-convert__tiers {
    display: grid;
    gap: 10px;
}

/* Chaque palier tient sur une ligne (credits -> Oros ... bouton) et renvoie le taux
   a la ligne suivante : reste lisible meme dans une demi-colonne. */
.finance-convert__tier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .14);
}

.finance-convert__tier form,
.finance-convert__tier .horse-sheet-choice {
    margin-left: auto;   /* bouton colle a droite */
}

.finance-convert__tier.is-disabled {
    opacity: .5;
}

.finance-convert__credits {
    font-weight: 700;
}

.finance-convert__arrow {
    color: var(--gold);
}

.finance-convert__oros {
    font-weight: 700;
    color: var(--gold-soft);
}

.finance-convert__rate {
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
}

/* Sur petit ecran, la grille repasse en 1 colonne (regle .content-grid de base). */
@media (max-width: 720px) {
    .finance-convert__arrow {
        display: none;
    }
}

/* Occupation reelle des boxes internes (chevaux + poulains a naitre, dont le box est reserve
   des la saillie). Affichee sous le compteur de la cour interieure. */
.stable-yard__occupancy {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    opacity: 0.85;
}

/* Fin de placement chez un entraineur : bouton de preavis / rappel du preavis en cours, sous la carte. */
.stable-placement-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: -4px 0 10px;
    padding: 0 12px;
}

.stable-placement-note--notice {
    color: #b4531d;
    font-style: italic;
}

/* Cheval visible mais indisponible (ex. yearling au pre avant le 1er septembre) : grise, non cliquable,
   motif au survol via l'attribut title. */
.horse-list__item--locked {
    opacity: 0.45;
    filter: grayscale(1);
    cursor: not-allowed;
}

.stable-jockey-card {
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.stable-jockey-card:hover,
.stable-jockey-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(214, 179, 95, 0.28);
    background: rgba(127, 144, 39, 0.12);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.horse-list__avatar,
.horse-profile__portrait {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #7b5b2b, #35230f);
    color: #f5dfb0;
    font-family: "Cinzel", serif;
}

.horse-list__avatar {
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    overflow: hidden;
}

.horse-list__avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.horse-profile__portrait {
    position: relative;
    overflow: hidden;
    width: 94px;
    height: 94px;
    margin-bottom: 14px;
    font-size: 1.5rem;
}

.horse-profile__portrait-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.horse-list__content {
    width: 100%;
    display: grid;
    gap: 6px;
}

.horse-sheet-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.horse-sheet-hero--windowed {
    grid-template-columns: minmax(0, 1fr);
}

.horse-sheet-hero__portrait-card,
.horse-stats-panel,
.horse-sheet-layout {
    display: grid;
    gap: 18px;
}

.horse-sheet-hero__portrait-card {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: stretch;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at top left, rgba(215, 172, 85, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(47, 34, 17, 0.96), rgba(28, 21, 12, 0.98));
}

.horse-sheet-hero__portrait {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, #7b5b2b, #35230f);
    border: 1px solid rgba(255, 220, 150, 0.12);
}

.horse-sheet-hero__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.horse-sheet-hero__portrait span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #f5dfb0;
    font-family: "Cinzel", serif;
    font-size: 4rem;
}

.horse-sheet-hero__identity {
    display: grid;
    align-content: center;
    gap: 12px;
}

.horse-sheet-hero__identity h1 {
    margin: 0;
    font-family: "Cinzel", serif;
    font-size: clamp(2rem, 3vw, 2.7rem);
}

.horse-sheet-hero__identity p {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
}

.horse-sheet-hero__origins {
    color: var(--gold-soft);
    font-size: 0.98rem;
    line-height: 1.35;
}

.horse-sheet-hero__owner {
    color: rgba(245, 216, 155, 0.82);
    font-size: 0.95rem;
}

.horse-popup-link {
    color: var(--gold-soft);
    text-decoration: underline;
    text-decoration-color: rgba(245, 216, 155, 0.35);
    text-underline-offset: 3px;
}

.horse-popup-dialog {
    width: min(560px, calc(100% - 24px));
}

.horse-popup-dialog__inner {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 22px;
}

.horse-popup-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.horse-popup-dialog__hero {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.horse-popup-dialog__hero.horse-popup-dialog__hero--jockey {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 12px;
    align-items: start;
}

.horse-popup-dialog__avatar {
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, #7b5b2b, #35230f);
    border: 1px solid rgba(255, 220, 150, 0.12);
}

.horse-popup-dialog__avatar img,
.horse-popup-dialog__avatar span {
    width: 100%;
    height: 100%;
}

.horse-popup-dialog__avatar img {
    object-fit: cover;
}

.horse-popup-dialog__avatar--jockey {
    width: 132px;
    height: 132px;
    border-radius: 22px;
}

.horse-popup-dialog__identity--jockey {
    align-self: start;
    width: 100%;
}

.horse-popup-dialog__avatar span {
    display: grid;
    place-items: center;
    color: #f5dfb0;
    font-family: "Cinzel", serif;
    font-size: 2rem;
}

.horse-popup-dialog__identity {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.horse-popup-dialog__identity h3,
.horse-popup-dialog__identity p {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.horse-popup-dialog__identity p {
    color: var(--muted);
}

.horse-popup-dialog__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

@media (max-width: 640px) {
    .horse-popup-dialog__hero.horse-popup-dialog__hero--jockey {
        grid-template-columns: 1fr;
    }
}

.horse-popup-dialog__details {
    margin: 0;
    display: grid;
    gap: 10px;
}

.horse-popup-dialog__details div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.horse-popup-dialog__details dt {
    color: var(--gold-soft);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.horse-popup-dialog__details dd {
    margin: 0;
}

.horse-popup-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.sales-horse-popup-dialog {
    width: min(1100px, calc(100% - 24px));
}

.sales-horse-popup-dialog__inner {
    max-height: min(90vh, 980px);
    overflow: auto;
    padding-right: 18px;
}

.sales-horse-popup__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sales-horse-popup__grid .panel__header,
.sales-horse-popup__genealogy-panel .panel__header,
.sales-horse-popup__record-panel .panel__header {
    margin-bottom: 12px;
}

.sales-horse-popup__grid h3,
.sales-horse-popup__genealogy-panel h3,
.sales-horse-popup__record-panel h3 {
    margin: 0;
    font-family: "Cinzel", serif;
    color: var(--gold-soft);
}

.sales-horse-popup__data div {
    grid-template-columns: 118px minmax(0, 1fr);
}

.sales-horse-popup__genealogy .horse-genealogy__cards {
    min-height: auto;
}

.sales-horse-popup__genealogy .horse-genealogy__generation--1 .horse-genealogy__cards {
    padding-top: 140px;
}

.sales-horse-popup__genealogy .horse-genealogy__generation--2 .horse-genealogy__cards {
    padding-top: 58px;
    gap: 136px;
}

.sales-horse-popup__genealogy .horse-genealogy__generation--3 .horse-genealogy__cards {
    padding-top: 18px;
    gap: 42px;
}

.sales-horse-popup__genealogy .horse-genealogy__generation--4 .horse-genealogy__cards {
    padding-top: 0;
    gap: 10px;
}

.sales-horse-popup__record-panel {
    margin-top: 0;
}

.horse-record-dialog {
    width: min(920px, calc(100% - 24px));
}

.horse-record-dialog__inner {
    max-height: min(86vh, 940px);
    overflow: auto;
    padding-right: 18px;
}

.horse-record-dialog__hero {
    align-items: start;
}

.horse-record-dialog__section {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 220, 150, 0.12);
    background:
        linear-gradient(180deg, rgba(61, 43, 18, 0.4), rgba(22, 16, 9, 0.48)),
        rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.04);
}

.horse-record-dialog__section .panel__header {
    margin-bottom: 0;
}

.horse-record-dialog__section h3 {
    margin: 0;
    font-family: "Cinzel", serif;
    color: var(--gold-soft);
}

.horse-record-dialog__highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.horse-record-dialog__highlight {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 220, 150, 0.12);
    background: rgba(0, 0, 0, 0.18);
}

.horse-record-dialog__highlight strong,
.horse-record-dialog__result-main strong {
    color: #fff4dc;
}

.horse-record-dialog__highlight p,
.horse-record-dialog__highlight small {
    margin: 0;
}

.horse-record-dialog__highlight p,
.horse-record-dialog__result-main span,
.horse-record-dialog__result-details {
    color: var(--muted);
}

.horse-record-dialog__highlight-badge,
.horse-record-dialog__result-place {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(214, 179, 95, 0.22);
    background: linear-gradient(180deg, rgba(145, 107, 44, 0.34), rgba(67, 45, 16, 0.3));
    color: var(--gold-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.horse-record-dialog__highlight-result {
    color: #fff2cf;
    font-size: 1.1rem;
    font-weight: 700;
}

.horse-record-dialog__results {
    display: grid;
    gap: 16px;
}

.horse-record-dialog__year-group {
    display: grid;
    gap: 10px;
}

.horse-record-dialog__year-heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.horse-record-dialog__year-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(213, 166, 84, 0.35), rgba(213, 166, 84, 0));
}

.horse-record-dialog__year-heading span {
    color: var(--gold-soft);
    font-family: "Cinzel", serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.horse-record-dialog__result-list {
    display: grid;
    gap: 8px;
}

.horse-record-dialog__result {
    display: grid;
    grid-template-columns: 74px minmax(0, 1.7fr) 70px minmax(180px, 1.4fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.16);
}

.horse-record-dialog__result-date {
    color: var(--gold-soft);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.horse-record-dialog__result-main {
    display: grid;
    gap: 3px;
}

.horse-record-dialog__result-place {
    justify-self: start;
    min-width: 56px;
}

.horse-record-dialog__result-details {
    font-size: 0.92rem;
    line-height: 1.4;
}

/* LA LIGNE DE DETAIL DU PALMARES (poids, VH, jockey, gains, proprietaire).
   Ces declarations vivaient dans un attribut `style=""` sur le <div>. UN STYLE
   EN LIGNE BAT TOUTE FEUILLE DE STYLE : aucune media query ne pouvait le
   reduire, et la ligne gardait sa taille de bureau sur telephone. Valeurs
   reprises telles quelles, le rendu du bureau est inchange. */
.horse-record-dialog__result-meta {
    grid-column: 1 / -1;
    flex-basis: 100%;
    width: 100%;
    font-size: 0.82em;
    color: #8a8f98;
    margin-top: 0.35rem;
}

.horse-sale-dialog {
    width: min(860px, calc(100% - 24px));
}

.horse-sale-dialog__inner {
    max-height: min(86vh, 940px);
    overflow: auto;
    padding-right: 18px;
}

.horse-sale-dialog__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.horse-sale-dialog__form {
    display: grid;
    gap: 14px;
}

.horse-sale-dialog__submit {
    justify-self: start;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow:
        0 7px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.horse-sale-dialog__submit:hover {
    transform: translateY(-1px);
}

.horse-sale-dialog__option {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 220, 150, 0.12);
    background:
        linear-gradient(180deg, rgba(61, 43, 18, 0.4), rgba(22, 16, 9, 0.48)),
        rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.04);
}

.horse-sale-dialog__option-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.horse-sale-dialog__option-header h4,
.horse-sale-dialog__option p,
.horse-sale-dialog__note {
    margin: 0;
}

.horse-sale-dialog__option-header h4 {
    font-family: "Cinzel", serif;
    color: #fff4dc;
    font-size: 1.08rem;
}

.horse-sale-dialog__option-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(214, 179, 95, 0.22);
    background: linear-gradient(180deg, rgba(145, 107, 44, 0.34), rgba(67, 45, 16, 0.3));
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 700;
}

.horse-sale-dialog__option p,
.horse-sale-dialog__note,
.horse-sale-dialog__fixed-price span {
    color: var(--muted);
    line-height: 1.5;
}

.horse-sale-dialog__field {
    display: grid;
    gap: 8px;
}

.horse-sale-dialog__field span {
    color: var(--gold-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.horse-sale-dialog__field input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--text);
    font: inherit;
}

.horse-sale-dialog__field input::-webkit-outer-spin-button,
.horse-sale-dialog__field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.horse-sale-dialog__field input[type=number] {
    -moz-appearance: textfield;
}

.horse-sale-dialog__stepper {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
}

.horse-sale-dialog__stepper .horse-sale-dialog__field input,
.horse-sale-dialog__stepper input {
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.horse-sale-dialog__arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(214, 179, 95, 0.24);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(118, 87, 34, 0.9), rgba(54, 35, 14, 0.96)),
        rgba(0, 0, 0, 0.15);
    color: #ffe9bf;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.horse-sale-dialog__arrow:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    border-color: rgba(255, 228, 168, 0.4);
}

.horse-sale-dialog__arrow span {
    display: block;
    font-family: "Cinzel", serif;
    font-size: 1.5rem;
    line-height: 1;
    transform: translateY(-1px);
}

.horse-sale-dialog__fixed-price {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.horse-sale-dialog__fixed-price strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff4dc;
    font-size: 1.1rem;
}

.horse-sale-dialog__blocked {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(194, 96, 81, 0.28);
    background: rgba(120, 35, 25, 0.16);
}

.horse-sale-dialog__blocked h4,
.horse-sale-dialog__blocked p,
.horse-sale-dialog__reasons {
    margin: 0;
}

.horse-sale-dialog__blocked h4 {
    font-family: "Cinzel", serif;
    color: #ffe3d8;
}

.horse-sale-dialog__blocked p,
.horse-sale-dialog__reasons {
    color: #e8c3bb;
}

.horse-sale-dialog__reasons {
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

@media (max-width: 900px) {
    .sales-hero--cover .stable-intro__inner {
        grid-template-columns: 1fr;
    }

    .sales-hero__focus {
        grid-column: 1;
        grid-row: auto;
        justify-items: center;
    }

    .sales-hero__badge {
        width: min(100%, 100px);
    }

    .sales-grid {
        grid-template-columns: 1fr;
    }

    .sales-commitment-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .sales-commitments-list {
        grid-template-columns: 1fr;
    }

    .sales-commitment-card__meta,
    .sales-commitment-card__actions {
        justify-items: start;
        justify-content: flex-start;
    }

    .sales-card__line {
        grid-template-columns: 1fr;
    }

    .sales-card__countdown,
    .sales-card__actions--stacked {
        justify-items: start;
        justify-content: start;
        text-align: left;
    }

    .sales-card__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-horse-popup__grid {
        grid-template-columns: 1fr;
    }

    .sales-horse-popup__genealogy {
        grid-template-columns: repeat(4, minmax(180px, 1fr));
        overflow-x: auto;
    }

    .sales-horse-popup__genealogy .horse-genealogy__cards {
        min-height: 0;
    }

    .horse-record-dialog__highlights {
        grid-template-columns: 1fr;
    }

    .horse-record-dialog__result {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .horse-record-dialog__result-place,
    .horse-record-dialog__result-details {
        grid-column: 2;
    }

    .horse-sale-dialog__options {
        grid-template-columns: 1fr;
    }
}

.horse-sheet-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.horse-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 220, 150, 0.14);
    background: rgba(0, 0, 0, 0.18);
    color: var(--gold-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.horse-chip--value {
    gap: 8px;
}

.horse-stats-block {
    padding: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.horse-stats-block .stable-stats-table-wrap {
    overflow: hidden;
}

.horse-stats-table {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.horse-stats-table th,
.horse-stats-table td {
    padding: 9px 4px;
}

.horse-stats-table th {
    font-size: 0.63rem;
    letter-spacing: 0.02em;
}

.horse-stats-table td {
    font-size: 0.88rem;
}

.horse-stats-table th:first-child,
.horse-stats-table td:first-child {
    width: 20%;
}

.horse-stats-table th:nth-child(2),
.horse-stats-table td:nth-child(2),
.horse-stats-table th:nth-child(3),
.horse-stats-table td:nth-child(3),
.horse-stats-table th:nth-child(4),
.horse-stats-table td:nth-child(4) {
    width: 14%;
}

.horse-stats-table th:nth-child(5),
.horse-stats-table td:nth-child(5) {
    width: 16%;
}

.horse-stats-table th,
.horse-stats-table td {
    white-space: nowrap;
}

.horse-stats-table .stable-stats-earnings {
    gap: 3px;
}

.horse-stats-table .stable-stats-earnings__icon {
    width: 13px;
    height: 13px;
}

.horse-stats-panel .panel__header h2 {
    font-size: 1.2rem;
}

.horse-sheet-layout {
    grid-template-columns: 290px minmax(0, 1fr);
    align-items: start;
}

.horse-sheet-layout--solo {
    grid-template-columns: minmax(0, 1fr);
}

.horse-sheet-hero--windowed .horse-stats-panel,
.horse-sheet-hero--windowed .horse-sheet-hero__portrait-card {
    width: 100%;
}

.horse-sheet-sidebar__list {
    display: grid;
    gap: 10px;
}

/* Le bloc « Votre effectif » remonte en haut de page est une reponse au
   telephone : au bureau, le menu lateral affiche ses cartes a droite et ce
   doublon n'a pas lieu d'etre. */
.horse-sheet-picker-panel,
.jockey-picker-panel {
    display: none;
}

.horse-sheet-sidebar__sections {
    display: grid;
    gap: 18px;
}

.horse-sheet-sidebar__group {
    display: grid;
    gap: 10px;
}

.horse-sheet-sidebar__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.horse-sheet-sidebar__group-header strong {
    color: #fff2d3;
    font-size: 0.9rem;
}

.horse-sheet-sidebar__group-header span {
    color: var(--gold-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.horse-sheet-sidebar__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.horse-sheet-sidebar__item:hover,
.horse-sheet-sidebar__item.is-active {
    transform: translateY(-1px);
    border-color: rgba(159, 187, 51, 0.28);
    background: rgba(127, 144, 39, 0.08);
}

.horse-sheet-sidebar__avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(180deg, #7b5b2b, #35230f);
    color: #f5dfb0;
    font-family: "Cinzel", serif;
}

.horse-sheet-sidebar__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.horse-sheet-sidebar__text {
    display: grid;
    gap: 4px;
}

.horse-sheet-sidebar__text span {
    color: var(--muted);
    font-size: 0.84rem;
}

.horse-sheet-main,
.horse-sheet-grid {
    display: grid;
    gap: 18px;
}

.engagements-page {
    display: grid;
    gap: 18px;
}

.engagements-hero__header {
    align-items: center;
}

.engagements-hero__summary {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.engagements-search-panel__header {
    align-items: start;
}

.engagements-search-panel__intro {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.engagements-search-form {
    display: grid;
    gap: 18px;
}

.engagements-search-state-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.engagements-search-state-card--filters {
    margin-bottom: 18px;
}

.engagements-search-state-card__copy {
    display: grid;
    gap: 6px;
}

.engagements-search-state-card__copy strong {
    color: #fff2d3;
}

.engagements-search-state-card__copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.engagements-search-state-card__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.engagements-search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.engagements-search-field {
    display: grid;
    gap: 7px;
}

.engagements-search-field--wide {
    grid-column: span 3;
}

.engagements-search-field span {
    color: #f3ddb0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.engagements-search-field input,
.engagements-search-field select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #fff8e6;
    font: inherit;
}

.engagements-search-field select,
.engagement-course-card__field select {
    color-scheme: dark;
    background-color: #24180d;
}

.engagements-search-field select option,
.engagements-search-field select optgroup,
.engagement-course-card__field select option,
.engagement-course-card__field select optgroup {
    background: #24180d;
    color: #fff8e6;
}

.engagements-search-field input::placeholder {
    color: rgba(255, 248, 230, 0.42);
}

.engagements-search-field input:focus,
.engagements-search-field select:focus {
    outline: none;
    border-color: rgba(159, 187, 51, 0.5);
    box-shadow: 0 0 0 2px rgba(159, 187, 51, 0.12);
}

.engagements-search-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.mount-page .horse-sheet-sidebar__avatar img {
    object-fit: cover;
}

.mount-panel {
    display: grid;
    gap: 18px;
}

.mount-flash {
    margin: 0;
}

.mount-flash.is-hidden {
    display: none;
}

.mount-form {
    display: grid;
    gap: 18px;
}

.mount-choice-panel.is-collapsed {
    display: none;
}

.mount-collapse-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mount-collapse-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(223, 188, 113, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: #f6dfb3;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.mount-page #mount-requests .engagements-result-row__action-cell {
    justify-items: stretch;
    gap: 8px;
}

.mount-page #mount-requests .engagements-result-row__action {
    gap: 8px;
}

.mount-page #mount-requests .engagements-result-row__status {
    text-align: left;
}

.mount-page #mount-confirmed .engagements-results-table {
    gap: 8px;
}

.mount-page #mount-confirmed .engagements-result-row {
    padding: 9px 12px;
    gap: 10px;
}

.mount-page #mount-confirmed .engagements-result-row__info {
    gap: 2px;
}

.mount-page #mount-confirmed .engagements-result-row__info > strong {
    font-size: 0.94rem;
    line-height: 1.18;
}

.mount-page #mount-confirmed .engagements-result-row__line {
    font-size: 0.86rem;
    line-height: 1.22;
}

.mount-page #mount-confirmed .engagements-result-row__action-cell {
    justify-items: end;
    gap: 6px;
}

.mount-days-grid {
    display: grid;
    gap: 12px;
}

.mount-day-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(223, 188, 113, 0.18);
    background: linear-gradient(180deg, rgba(72, 48, 19, 0.7), rgba(40, 27, 11, 0.82));
}

.mount-day-card.is-locked {
    border-color: rgba(194, 157, 84, 0.28);
    box-shadow: inset 0 0 0 1px rgba(194, 157, 84, 0.1);
}

.mount-day-card.is-saving {
    opacity: 0.72;
    pointer-events: none;
}

.mount-day-card__date {
    min-height: 100%;
}

.mount-day-card__content {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.mount-day-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    color: #cbb287;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mount-day-card__lock-note {
    min-width: 0;
    color: #f0d8ac;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mount-day-card__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.mount-option-card {
    position: relative;
    display: block;
    cursor: pointer;
    min-width: 0;
}

.mount-option-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.mount-option-card__body {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(223, 188, 113, 0.18);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.mount-option-card__body strong {
    color: #fff3d7;
    font-size: 0.8rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mount-option-card__body small {
    color: #ccb58b;
    font-size: 0.68rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mount-option-card:hover .mount-option-card__body,
.mount-option-card input:focus-visible + .mount-option-card__body {
    border-color: rgba(223, 188, 113, 0.42);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.mount-option-card input:checked + .mount-option-card__body {
    border-color: rgba(164, 206, 98, 0.78);
    background: linear-gradient(180deg, rgba(114, 145, 42, 0.32), rgba(52, 82, 14, 0.36));
    box-shadow: 0 0 0 1px rgba(164, 206, 98, 0.22) inset;
}

.mount-option-card.is-disabled {
    cursor: not-allowed;
}

.mount-option-card.is-disabled .mount-option-card__body {
    opacity: 0.72;
}

.mount-option-card--empty input:checked + .mount-option-card__body {
    border-color: rgba(196, 158, 83, 0.52);
    background: linear-gradient(180deg, rgba(113, 83, 36, 0.28), rgba(64, 46, 17, 0.34));
    box-shadow: none;
}

.mount-form__actions {
    display: flex;
    justify-content: flex-end;
}

.engagements-planned-panel {
    display: grid;
    gap: 16px;
}

.engagements-planned-panel__header {
    align-items: start;
}

.engagements-window-notice {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    background: linear-gradient(180deg, rgba(108, 77, 33, 0.18), rgba(0, 0, 0, 0.16));
}

.engagements-window-notice strong {
    color: var(--gold-soft);
}

.engagements-window-notice p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.engagements-window-notice__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: #f6ecd9;
}

.engagements-empty-state {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed rgba(214, 179, 95, 0.18);
    background: rgba(255, 255, 255, 0.03);
}

.engagements-empty-state strong {
    color: #fff2d3;
}

.engagements-empty-state p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.engagements-planned-list {
    display: grid;
    gap: 12px;
}

.engagements-search-results {
    display: grid;
    gap: 14px;
}

.engagement-course-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.engagement-course-card.is-open {
    border-color: rgba(159, 187, 51, 0.26);
    background: linear-gradient(180deg, rgba(127, 144, 39, 0.1), rgba(0, 0, 0, 0.14));
}

.engagement-course-card__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.engagement-course-card__identity {
    display: grid;
    gap: 4px;
}

.engagement-course-card__identity strong {
    color: #fff2d3;
}

.engagement-course-card__identity span,
.engagement-course-card__meta span {
    color: var(--muted);
}

.engagement-course-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(214, 179, 95, 0.22);
    background: rgba(214, 179, 95, 0.12);
    color: var(--gold-soft);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.engagement-course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.engagements-results-table {
    display: grid;
    gap: 10px;
}

.engagements-results-head,
.engagements-result-row {
    display: grid;
    grid-template-columns: 92px 150px minmax(0, 1fr) 240px;
    gap: 14px;
    align-items: start;
}

.engagements-results-head {
    padding: 0 8px 2px;
    color: #d8c18e;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.engagements-result-row {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.engagements-result-row.is-open {
    border-color: rgba(159, 187, 51, 0.24);
}

.engagements-result-row__date {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 1px;
    min-height: 100%;
    padding: 8px 6px;
    border-radius: 14px;
    background: rgba(214, 179, 95, 0.14);
    color: #fff4d3;
    text-align: center;
}

.engagements-result-row__date strong {
    font-size: 1.65rem;
    line-height: 1;
}

.engagements-result-row__date span {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.engagements-result-row__date small {
    margin-top: 6px;
    font-size: 0.72rem;
    color: #edd8a5;
}

.engagements-result-row__hippodrome {
    display: grid;
    gap: 6px;
    align-content: start;
}

.engagements-result-row__hippodrome > span {
    color: #c7b07c;
    font-size: 0.82rem;
    line-height: 1.35;
}

.engagements-result-row__info {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.engagements-result-row__info > strong {
    color: #f7df9f;
    font-size: 1rem;
    line-height: 1.25;
}

.engagements-course-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 216, 155, 0.26);
    transition: color 160ms ease, border-color 160ms ease;
}

.engagements-course-link:hover,
.engagements-course-link:focus-visible {
    color: #fff1c9;
    border-color: rgba(245, 216, 155, 0.72);
}

.engagements-course-link--button {
    padding: 0;
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.engagements-result-row__line {
    color: #f4ead2;
    line-height: 1.42;
}

.engagements-result-row__line--conditions {
    color: #d9d0bc;
    font-size: 0.92rem;
}

.engagements-result-row__warning {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid rgba(199, 72, 72, 0.36);
    background: linear-gradient(180deg, rgba(120, 18, 18, 0.22), rgba(72, 10, 10, 0.18));
}

.engagements-result-row__warning p {
    margin: 0;
    color: #ffb8b8;
    font-size: 0.82rem;
    line-height: 1.35;
}

.engagements-result-row__action {
    display: grid;
    gap: 10px;
    align-content: center;
    justify-items: end;
}

/* Ordres tactiques (bloc engagement definitif) */
.engagements-orders-link {
    font-size: 0.82rem;
    color: var(--gold-soft, #e6c66a);
    text-decoration: none;
    border-bottom: 1px dashed rgba(236, 194, 105, 0.5);
    padding-bottom: 1px;
    cursor: pointer;
}

.engagements-orders-link.has-orders {
    color: #2ecc71;
    border-bottom-color: rgba(46, 204, 113, 0.5);
}

.tactical-orders-dialog {
    max-width: 460px;
}

.tactical-orders-form {
    display: grid;
    gap: 14px;
    margin-top: 6px;
}

.tactical-orders-field {
    display: grid;
    gap: 7px;
}

.tactical-orders-field > span {
    color: #f3ddb0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tactical-orders-field small,
.tactical-orders-artifices small {
    color: rgba(255, 248, 230, 0.55);
    font-size: 0.76rem;
    line-height: 1.35;
}

.tactical-orders-field select,
.tactical-orders-field input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #fff8e6;
    font: inherit;
}

.tactical-orders-field select {
    color-scheme: dark;
    background-color: #24180d;
}

.tactical-orders-field select option,
.tactical-orders-field select optgroup {
    background: #24180d;
    color: #fff8e6;
}

.tactical-orders-field input::placeholder {
    color: rgba(255, 248, 230, 0.42);
}

.tactical-orders-field select:focus,
.tactical-orders-field input:focus {
    outline: none;
    border-color: rgba(159, 187, 51, 0.5);
    box-shadow: 0 0 0 2px rgba(159, 187, 51, 0.12);
}

.tactical-orders-artifices {
    border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
    border-radius: 10px;
    padding: 10px 12px;
    display: grid;
    gap: 6px;
    margin: 0;
}

.tactical-orders-artifices legend {
    font-weight: 600;
    font-size: 0.86rem;
    padding: 0 6px;
}

.tactical-orders-artifice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
}

.tactical-orders-locked {
    color: #e67e22;
    font-size: 0.82rem;
    margin: 0 0 4px;
}

.tactical-orders-artifices__price {
    font-weight: 400;
    font-size: 0.74rem;
    color: rgba(255, 248, 230, 0.55);
    text-transform: none;
    letter-spacing: 0;
}

.tactical-orders-cost {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: #f1c40f;
}

.tactical-orders-cost.is-refund {
    color: #2ecc71;
}

.tactical-orders-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.engagements-result-row__action-cell {
    display: grid;
    gap: 12px;
    align-content: start;
    justify-items: end;
}

.engagements-result-row__action--stack {
    width: 100%;
    justify-items: stretch;
    align-content: start;
}

.engagements-result-row__preferences-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
}

.engagements-result-row__pref-card {
    display: grid;
    gap: 6px;
    align-content: start;
}

.engagements-result-row__pref-card--empty {
    visibility: hidden;
}

.engagements-result-row__pref-label {
    color: #f3ddb0;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.engagements-result-row__pref-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #fff8e6;
    font-size: 1rem;
    font-weight: 700;
}

.engagements-result-row__pref-value.is-negative {
    color: #d8f5c0;
}

.engagements-result-row__pref-value.is-positive {
    color: #ffe0bf;
}

.engagements-result-row__weight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

.engagements-result-row__weight-summary {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.engagements-result-row__weight-label {
    color: #f3ddb0;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.engagements-result-row__weight-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(197, 156, 73, 0.28), rgba(115, 79, 18, 0.34));
    color: #fff8e6;
    font-size: 0.96rem;
    font-weight: 700;
    white-space: nowrap;
}

.engagements-result-row__weight-value--tooltip {
    position: relative;
    cursor: help;
}

.engagements-result-row__weight-value--tooltip::before,
.engagements-result-row__weight-value--tooltip::after {
    position: absolute;
    top: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.engagements-result-row__weight-value--tooltip::before {
    content: attr(data-total-weight-tooltip);
    right: calc(100% + 12px);
    width: 300px;
    max-width: 300px;
    padding: 10px 12px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(72, 45, 12, 0.45),
        inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: pre-line;
    text-transform: none;
    letter-spacing: 0;
    transform: translate(-6px, -50%);
}

.engagements-result-row__weight-value--tooltip::after {
    content: "";
    right: calc(100% + 7px);
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(236, 194, 105, 0.68);
    border-top: 1px solid rgba(236, 194, 105, 0.68);
    background: rgba(27, 18, 8, 0.995);
    transform: translate(-6px, -50%) rotate(45deg);
}

.engagements-result-row__weight-value--tooltip:hover::before,
.engagements-result-row__weight-value--tooltip:hover::after,
.engagements-result-row__weight-value--tooltip:focus-visible::before,
.engagements-result-row__weight-value--tooltip:focus-visible::after {
    opacity: 1;
}

.engagements-result-row__weight-value--tooltip:hover::before,
.engagements-result-row__weight-value--tooltip:focus-visible::before {
    transform: translate(0, -50%);
}

.engagements-result-row__weight-value--tooltip:hover::after,
.engagements-result-row__weight-value--tooltip:focus-visible::after {
    transform: translate(0, -50%) rotate(45deg);
}

#engagement-planned .engagements-result-row__action-cell {
    gap: 8px;
}

#engagement-planned .engagements-result-row__action {
    gap: 8px;
}

#engagement-planned .engagements-result-row__preferences-grid {
    gap: 8px 10px;
}

#engagement-planned .engagements-result-row__pref-card {
    gap: 4px;
}

#engagement-planned .engagements-result-row__pref-label {
    font-size: 0.71rem;
}

#engagement-planned .engagements-result-row__pref-value {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.92rem;
}

#engagement-planned .engagements-result-row__weight-summary {
    padding: 6px 10px;
    border-radius: 10px;
}

#engagement-planned .engagements-result-row__weight-label {
    font-size: 0.71rem;
}

#engagement-planned .engagements-result-row__weight-value {
    min-width: 96px;
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.88rem;
}

#engagement-planned .engagement-course-card__field select {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.88rem;
}

#engagement-planned .action-button {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 0.88rem;
}

#engagement-planned .stable-help-tooltip {
    width: 16px;
    height: 16px;
    font-size: 0.66rem;
}

.engagements-result-row__status {
    color: #d8c18e;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.engagements-result-row__mount-status {
    justify-self: start;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.engagements-result-row__mount-status--none {
    background: rgba(118, 104, 82, 0.28);
    color: #d5c4a0;
}

.engagements-result-row__mount-status--pending {
    background: rgba(168, 99, 18, 0.28);
    color: #ffd48b;
}

.engagements-result-row__mount-status--confirmed {
    background: rgba(52, 126, 56, 0.28);
    color: #d8f7c5;
}

.engagements-result-row__mount-status--rejected {
    background: rgba(130, 41, 41, 0.28);
    color: #ffbaba;
}

.engagements-result-row__action select:disabled,
.engagements-result-row__action button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.engagements-result-row__type {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(206, 165, 83, 0.26), rgba(110, 78, 24, 0.2));
    border: 1px solid rgba(223, 188, 113, 0.38);
    color: #ffe4a3;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.engagements-result-row__price {
    display: inline-flex;
    margin-left: 10px;
    color: #f2e3bf;
    font-weight: 600;
}

.engagements-result-row__claiming {
    width: 100%;
    max-width: 160px;
}

.engagement-course-card__details {
    display: grid;
    gap: 10px;
    margin: 0;
}

.engagement-course-card__details > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.engagement-course-card__details > div:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.engagement-course-card__details dt {
    margin: 0;
    color: #f3ddb0;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.engagement-course-card__details dd {
    margin: 0;
    color: #fff6df;
    line-height: 1.55;
    white-space: pre-line;
}

.engagement-course-card__form {
    display: grid;
    gap: 12px;
}

.engagement-course-card__fields {
    display: grid;
    grid-template-columns: minmax(0, 260px);
    gap: 12px;
}

.engagement-course-card__field {
    display: grid;
    gap: 7px;
}

.engagement-course-card__field span {
    color: #f3ddb0;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.engagement-course-card__field input,
.engagement-course-card__field select {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #fff8e6;
    font: inherit;
}

.engagement-course-card__field input:disabled {
    opacity: 0.78;
}

.engagement-course-card__actions {
    display: flex;
    justify-content: flex-end;
}

.engagement-course-card__disabled-trigger {
    display: inline-flex;
    position: relative;
    cursor: help;
    width: 100%;
    justify-content: flex-end;
}

.engagement-course-card__disabled-trigger .action-button[disabled] {
    pointer-events: none;
    opacity: 1;
    color: rgba(255, 242, 211, 0.55);
    background: linear-gradient(180deg, rgba(88, 72, 54, 0.9), rgba(52, 41, 28, 0.96));
    border-color: rgba(191, 165, 118, 0.22);
    box-shadow: none;
    filter: saturate(0.4);
}

.engagement-course-card__disabled-trigger::before,
.engagement-course-card__disabled-trigger::after {
    position: absolute;
    top: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 30;
}

.engagement-course-card__disabled-trigger::before {
    content: attr(data-tooltip);
    right: calc(100% + 14px);
    width: 300px;
    max-width: 300px;
    padding: 10px 12px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(72, 45, 12, 0.45),
        inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    transform: translate(-6px, -50%);
}

.engagement-course-card__disabled-trigger::after {
    content: "";
    right: calc(100% + 9px);
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(236, 194, 105, 0.68);
    border-top: 1px solid rgba(236, 194, 105, 0.68);
    background: rgba(27, 18, 8, 0.995);
    transform: translate(-6px, -50%) rotate(45deg);
}

.engagement-course-card__disabled-trigger:hover::before,
.engagement-course-card__disabled-trigger:hover::after,
.engagement-course-card__disabled-trigger:focus-within::before,
.engagement-course-card__disabled-trigger:focus-within::after {
    opacity: 1;
}

.engagement-course-card__disabled-trigger:hover::before,
.engagement-course-card__disabled-trigger:focus-within::before {
    transform: translate(0, -50%);
}

.engagement-course-card__disabled-trigger:hover::after,
.engagement-course-card__disabled-trigger:focus-within::after {
    transform: translate(0, -50%) rotate(45deg);
}

.engagements-planned-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.engagements-planned-card.is-open {
    border-color: rgba(159, 187, 51, 0.3);
    background: linear-gradient(180deg, rgba(127, 144, 39, 0.12), rgba(0, 0, 0, 0.14));
}

.engagements-planned-card__topline {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.engagements-planned-card__topline strong {
    color: #fff2d3;
}

.engagements-planned-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(214, 179, 95, 0.22);
    background: rgba(214, 179, 95, 0.12);
    color: var(--gold-soft);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.engagements-planned-card__date {
    color: var(--gold-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.engagements-planned-card__meta,
.engagements-planned-card__window {
    color: var(--muted);
    line-height: 1.5;
}

.engagements-planned-card__window--inactive {
    color: #d7b5a7;
}

@media (max-width: 980px) {
    .engagements-search-state-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .engagements-search-state-card__actions {
        justify-content: flex-start;
    }

    .engagements-results-head,
    .engagements-result-row {
        grid-template-columns: 86px 140px minmax(0, 1fr) 140px;
        gap: 12px;
    }

    .engagements-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .engagements-search-field--wide {
        grid-column: span 2;
    }

    .engagement-course-card__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mount-day-card {
        grid-template-columns: 1fr;
    }

    .mount-day-card__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .mount-day-card__lock-note {
        text-align: left;
    }

    .mount-day-card__options {
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .engagements-results-head {
        display: none;
    }

    .engagements-result-row {
        grid-template-columns: 1fr;
    }

    .engagements-result-row__date,
    .engagements-result-row__action {
        justify-items: start;
    }

    .engagements-result-row__claiming {
        max-width: none;
    }

    .engagements-search-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .engagements-search-field--wide {
        grid-column: span 1;
    }

    .engagements-search-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .engagement-course-card__header,
    .engagement-course-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .engagement-course-card__fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.training-overview {
    display: grid;
    gap: 18px;
}

.training-overview__top {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.training-overview__portrait-panel {
    display: grid;
    height: 100%;
}

.training-overview__portrait {
    height: 100%;
    min-height: 260px;
}

.training-overview__identity {
    display: grid;
    gap: 6px;
    text-align: center;
}

.training-overview__identity h3 {
    margin: 0;
    font-family: "Cinzel", serif;
    font-size: 1.3rem;
}

.training-overview__identity p {
    margin: 0;
    color: var(--muted);
}

.training-overview__content {
    display: grid;
    gap: 18px;
}

.training-plan-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.training-plan-form {
    display: block;
}

.training-plan-layout > * {
    min-width: 0;
}

.training-plan-stack {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.training-planner-panel__intro,
.training-history-panel__empty {
    margin: 0 0 14px;
    color: var(--muted);
}

.training-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.training-history-item {
    padding: 12px 14px;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
    border-radius: 10px;
    background: var(--surface-2, rgba(148, 163, 184, 0.06));
}

.training-history-item--cancelled {
    opacity: 0.7;
    border-style: dashed;
}

.training-history-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 6px;
}

.training-history-item__date {
    font-size: 0.82rem;
    color: var(--muted);
    min-width: 150px;
}

.training-history-item__title {
    font-weight: 600;
}

.training-history-item__stars {
    margin-left: auto;
    color: #f1c40f;
    letter-spacing: 1px;
    position: relative;
    cursor: help;
}

/* Pop-up d'info au survol des etoiles (meme format que .stable-help-tooltip), positionne a GAUCHE (etoiles a droite). */
.training-history-item__stars[data-tooltip]::before,
.training-history-item__stars[data-tooltip]::after {
    position: absolute;
    top: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.training-history-item__stars[data-tooltip]::before {
    content: attr(data-tooltip);
    right: calc(100% + 12px);
    width: 280px;
    max-width: 280px;
    padding: 10px 12px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(72, 45, 12, 0.45),
        inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: pre-line;
    letter-spacing: 0;
    transform: translate(-6px, -50%);
}

.training-history-item__stars[data-tooltip]::after {
    content: "";
    right: calc(100% + 7px);
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(236, 194, 105, 0.68);
    border-top: 1px solid rgba(236, 194, 105, 0.68);
    background: rgba(27, 18, 8, 0.995);
    transform: translate(-6px, -50%) rotate(45deg);
}

.training-history-item__stars[data-tooltip]:hover::before,
.training-history-item__stars[data-tooltip]:hover::after,
.training-history-item__stars[data-tooltip]:focus-visible::before,
.training-history-item__stars[data-tooltip]:focus-visible::after {
    opacity: 1;
}

.training-history-item__stars[data-tooltip]:hover::before,
.training-history-item__stars[data-tooltip]:focus-visible::before {
    transform: translate(0, -50%);
}

.training-history-item__stars[data-tooltip]:hover::after,
.training-history-item__stars[data-tooltip]:focus-visible::after {
    transform: translate(0, -50%) rotate(45deg);
}

.training-history-item__basic {
    margin: 0;
    color: var(--muted);
}

.training-history-item__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 18px;
}

.training-history-item__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
}

.training-history-item__lines--main {
    flex: 1 1 220px;
    min-width: 0;
}

/* Colonne de droite : Forme / Mental. */
.training-history-item__lines--condition {
    flex: 0 0 auto;
    align-content: start;
    gap: 4px;
    padding-left: 16px;
    border-left: 1px solid var(--border, rgba(148, 163, 184, 0.25));
    text-align: right;
}

.training-history-line {
    font-size: 0.9rem;
}

.training-history-line--fm {
    color: #2ecc71;
}

.training-history-line--bonus {
    color: #3498db;
}

.training-history-line--error {
    color: var(--danger, #e74c3c);
}

.training-history-line--top-header {
    margin-top: 3px;
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    list-style: none;
}

.training-history-line--regress {
    color: #e67e22;
}

/* Espace entre les criteres principaux (top-N) et les criteres secondaires (elargis). */
.training-history-line.is-spaced {
    margin-top: 10px;
}

.training-history-item__appreciation {
    margin: 6px 0 0;
    font-style: italic;
    color: var(--muted);
}

.training-empty-state {
    margin: 0;
    color: var(--muted);
}

.training-empty-state--sidebar {
    padding: 14px 0 4px;
}

.training-empty-state--main {
    display: grid;
    place-items: center;
    min-height: 420px;
    padding: 32px 24px;
    text-align: center;
}

.training-empty-state--main h3 {
    margin: 0 0 10px;
    font-family: "Cinzel", serif;
    color: #fff2d3;
}

.training-empty-state--main p {
    margin: 0;
    max-width: 420px;
}

.training-planner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.training-planner-panel__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.training-day-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.training-day-card--form {
    margin: 0;
}

.training-day-card.is-planned {
    border-color: rgba(184, 214, 89, 0.28);
    background:
        linear-gradient(180deg, rgba(98, 114, 34, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(220, 238, 154, 0.05);
}

.training-day-card__head {
    display: block;
}

.training-day-card__head strong {
    color: #fff2d3;
    font-size: 0.95rem;
    line-height: 1.35;
}

.training-day-card__field {
    display: grid;
    gap: 6px;
}

.training-day-card__field[hidden] {
    display: none;
}

.training-day-card__field span {
    color: var(--gold-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.training-day-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    align-items: center;
}

/* ------------------------------------------------------------------
   VALIDATION GROUPEE : les autres chevaux, et le bouton des 14 jours.
   ------------------------------------------------------------------ */
.training-plan-bulk {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.training-plan-bulk__horses > summary {
    cursor: pointer;
    font-weight: 600;
}

.training-plan-bulk__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 12px;
    margin-top: 10px;
    min-width: 0;
}

.training-plan-bulk__horse {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.training-plan-bulk__horse > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* « Tout selectionner » ouvre la liste : il se detache des noms. */
.training-plan-bulk__horse--all {
    grid-column: 1 / -1;
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* BARRE DE VALIDATION COLLEE AU BAS DE L'ECRAN.
   Elle reste atteignable pendant qu'on parcourt les quatorze journees. Son
   parent est le formulaire, qui couvre toute la grille : c'est ce qui lui
   permet de suivre le defilement du premier au dernier jour. Elle reprend sa
   place normale des qu'on atteint le bas.
   `env(safe-area-inset-bottom)` tient compte de la barre de navigation des
   telephones sans bouton physique, sinon le bouton passe dessous. */
.training-plan-bulk__actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    margin: 10px -4px 0;
    padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0px));
    /* Teinte du panneau (--panel-strong), en degrade vers sa version
       transparente : les cartes qui passent dessous s'estompent au lieu de
       venir buter net sous le bouton. Les deux bornes sont ecrites en clair
       car un degrade a besoin de la meme couleur a alpha 0. */
    background: linear-gradient(to top, rgba(31, 22, 10, 0.97) 62%, rgba(31, 22, 10, 0));
}

.training-plan-bulk__actions > .action-button {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Modeles : deux rangees, choisir/appliquer puis nommer/enregistrer. */
.training-plan-bulk__templates > summary {
    cursor: pointer;
    font-weight: 600;
}

.training-plan-templates__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-width: 0;
}

.training-plan-templates__select,
.training-plan-templates__name {
    flex: 1 1 180px;
    min-width: 0;
}

.training-plan-templates__days {
    flex: 0 0 auto;
}

.training-plan-templates__hint {
    margin: 8px 0 0;
}

/* Retour d'enregistrement, en lieu et place du message de page : la
   validation ne recharge plus, il faut donc repondre SUR PLACE. */
.training-plan-bulk__feedback {
    margin: 0;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.35;
    border: 1px solid transparent;
}

/* Memes teintes que `.alert--success` / `.alert--warning` : le joueur doit
   reconnaitre le code couleur qu'il voit partout ailleurs dans le jeu. */
.training-plan-bulk__feedback.is-success {
    background: rgba(83, 131, 34, 0.15);
    border-color: rgba(140, 194, 75, 0.3);
}

.training-plan-bulk__feedback.is-warning {
    background: rgba(167, 112, 40, 0.14);
    border-color: rgba(214, 179, 95, 0.24);
}

.training-side-stack {
    display: grid;
    gap: 12px;
}

.training-side-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.training-side-card strong {
    color: #fff2d3;
    font-size: 1rem;
}

.training-side-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.training-side-card--facility {
    background:
        linear-gradient(180deg, rgba(98, 114, 34, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
    border-color: rgba(184, 214, 89, 0.18);
}

.training-side-card--shop {
    background:
        linear-gradient(180deg, rgba(120, 84, 31, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
    border-color: rgba(227, 189, 108, 0.18);
}

.training-track-grid {
    display: grid;
    gap: 12px;
}

.training-track-grid--infrastructure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.training-shop-grid {
    display: grid;
    gap: 12px;
}

@media (max-width: 720px) {
    .training-track-grid--infrastructure {
        grid-template-columns: minmax(0, 1fr);
    }
}

.training-shop-section + .training-shop-section {
    margin-top: 1rem;
}

.courses-layout {
    align-items: start;
}

.courses-date-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, auto) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.55rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.courses-date-band__meta {
    display: contents;
}

.courses-date-band__label {
    color: var(--gold-soft);
    font-size: 0.95rem;
    text-align: right;
    width: 100%;
    grid-column: 3;
    grid-row: 1;
}

.courses-date-band__selected {
    color: #fff1cd;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    width: 100%;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
}

.courses-date-band__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    grid-column: 3;
    grid-row: 2;
}

@media (max-width: 820px) {
    .courses-date-band {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .courses-date-band__label,
    .courses-date-band__links,
    .courses-date-band__selected {
        grid-column: auto;
        grid-row: auto;
    }

    .courses-date-band__label,
    .courses-date-band__links {
        justify-content: center;
        text-align: center;
    }
}

.courses-date-band__links a {
    color: #f6d28b;
    text-decoration: none;
    border-bottom: 1px solid rgba(246, 210, 139, 0.32);
}

.courses-date-band__links a.is-active {
    color: #fff3d4;
    font-weight: 700;
    border-bottom-color: rgba(255, 243, 212, 0.68);
}

.courses-date-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
}

.courses-date-help__icon {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.courses-date-help__tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.45rem);
    transform: translateX(-50%) translateY(0.2rem);
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(246, 210, 139, 0.38);
    background:
        linear-gradient(180deg, rgba(111, 80, 31, 0.96), rgba(54, 37, 14, 0.98)),
        rgba(40, 25, 10, 0.98);
    color: #fff2cf;
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 30;
}

.courses-date-help__tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0.65rem;
    height: 0.65rem;
    transform: translateX(-50%) rotate(45deg);
    border-right: 1px solid rgba(246, 210, 139, 0.32);
    border-bottom: 1px solid rgba(246, 210, 139, 0.32);
    background: rgba(54, 37, 14, 0.98);
}

.courses-date-help:hover .courses-date-help__tooltip,
.courses-date-help:focus-visible .courses-date-help__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.courses-day-layout {
    display: block;
}

.courses-day-meeting {
    background:
        linear-gradient(180deg, rgba(120, 84, 31, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
}

.courses-program-block > .panel__header,
.courses-hippodrome-panel > .panel__header {
    justify-content: center;
    text-align: center;
}

.courses-program-panel {
    width: 100%;
}

.courses-program-panel > .panel__header {
    justify-content: center;
    text-align: center;
}

.courses-hippodrome-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(246, 210, 139, 0.26);
}

.courses-hippodrome-link:hover,
.courses-hippodrome-link:focus-visible {
    color: #fff1cd;
    border-bottom-color: rgba(255, 241, 205, 0.58);
}

.courses-detail-shell {
    display: grid;
    gap: 1rem;
}

.courses-popup-dialog {
    width: min(1120px, calc(100% - 24px));
}

.courses-popup-dialog__inner {
    max-height: min(92vh, 980px);
    overflow: auto;
    padding-right: 18px;
}

.mount-course-popup {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    place-items: center;
    padding: 12px;
}

.mount-course-popup:target {
    display: grid;
}

.mount-course-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 4, 0.62);
}

.mount-course-popup__dialog {
    position: relative;
    z-index: 1;
    max-width: min(1120px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: hidden;
}

.courses-hippodrome-dialog {
    width: min(920px, calc(100% - 24px));
}

.courses-hippodrome-dialog__hero {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: center;
    margin-bottom: 1rem;
}

.courses-hippodrome-dialog__media {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(230, 195, 118, 0.2);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.courses-hippodrome-dialog__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.courses-hippodrome-dialog__hero-copy {
    min-width: 0;
}

.courses-hippodrome-dialog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.courses-hippodrome-dialog__section p {
    margin: 0;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .courses-hippodrome-dialog__hero {
        grid-template-columns: 1fr;
    }

    .courses-hippodrome-dialog__grid {
        grid-template-columns: 1fr;
    }
}

.courses-popup-detail-hero {
    margin: 0;
}

.courses-detail-back {
    margin: 0;
}

.courses-detail-back a {
    color: #f6d28b;
    text-decoration: none;
    border-bottom: 1px solid rgba(246, 210, 139, 0.32);
}

.courses-detail-hero {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
}

.courses-detail-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.courses-detail-hero__top h2 {
    margin: 0;
    color: #fff4dd;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.courses-detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    color: #d8c39a;
    font-size: 0.95rem;
}

.courses-detail-hero__meta span {
    padding-right: 1rem;
    border-right: 1px solid rgba(246, 210, 139, 0.18);
}

.courses-detail-hero__meta span:last-child {
    padding-right: 0;
    border-right: 0;
}

.courses-detail-hero__facts {
    display: grid;
    gap: 0.35rem;
    color: #f4ead0;
}

.courses-detail-hero__facts p {
    margin: 0;
    line-height: 1.45;
}

.courses-detail-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

.courses-detail-link {
    color: #fff0cb;
    text-decoration: none;
    border-bottom: 1px solid rgba(246, 210, 139, 0.32);
}

.courses-replay-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff0cb;
    text-decoration: none;
    font-weight: 700;
}

.courses-replay-link__icon {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.courses-detail-conditions {
    display: grid;
    gap: 0.45rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(246, 210, 139, 0.14);
}

.courses-detail-conditions h3,
.courses-detail-body__placeholder h3 {
    margin: 0;
    color: #fff0cb;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.courses-detail-conditions p {
    margin: 0;
    color: #eadfc5;
    line-height: 1.6;
    white-space: pre-line;
}

.courses-detail-body {
    padding: 1.35rem;
    border-radius: 24px;
    border: 1px solid rgba(77, 54, 18, 0.12);
    background: linear-gradient(180deg, rgba(255, 252, 244, 0.98), rgba(244, 236, 222, 0.98));
    min-height: 340px;
}

.courses-detail-body--runners {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    min-height: 0;
}

.courses-runners-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(210, 172, 86, 0.08);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(47, 34, 17, 0.96), rgba(28, 21, 12, 0.98)),
        var(--panel-strong);
    box-shadow: var(--shadow);
}

.courses-runners-card h3 {
    margin: 0;
    color: var(--gold-soft);
    font-family: "Cinzel", serif;
    font-size: 1.18rem;
    letter-spacing: 0.03em;
}

.courses-runners-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(210, 172, 86, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(62, 44, 20, 0.72), rgba(36, 26, 12, 0.8));
    box-shadow:
        inset 0 1px 0 rgba(214, 179, 98, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

.courses-runners-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.courses-runners-table thead th {
    padding: 12px 14px;
    background: linear-gradient(180deg, #6f5224, #4f3815);
    color: #fff3d5;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    white-space: nowrap;
}

.courses-runners-table tbody td {
    padding: 14px;
    border-top: 1px solid rgba(181, 145, 71, 0.12);
    background: rgba(67, 43, 17, 0.76);
    color: #f3dfb3;
    font-size: 0.9rem;
    vertical-align: middle;
}

.courses-runners-table tbody tr:nth-child(even) td {
    background: rgba(84, 55, 22, 0.78);
}

.courses-runners-table__horse {
    display: grid;
    gap: 4px;
}

.courses-runners-table__horse strong {
    color: #fff2d0;
    font-size: 0.95rem;
}

.courses-runners-table__horse span {
    color: #c5a66a;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.courses-runners-table__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(123, 92, 38, 0.32);
    background: linear-gradient(180deg, #7e612e, #5d431a);
    color: #fff1cf;
    font-size: 0.82rem;
    font-weight: 700;
}

/* --- Fiche course : casaque, artifices, VH/poids, musique, cote, place, photo finish --- */
.courses-runners-table__silk-cell {
    width: 46px;
    text-align: center;
}

.courses-runners-table__silk {
    display: inline-block;
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 6px;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.courses-runners-table__silk--empty {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px dashed rgba(210, 172, 86, 0.28);
    background: rgba(0, 0, 0, 0.18);
}

.courses-runners-table__artifice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 4px;
    border-radius: 5px;
    border: 1px solid rgba(123, 92, 38, 0.45);
    background: linear-gradient(180deg, #8a6a31, #5d431a);
    color: #fff1cf;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
    cursor: help;
}

.courses-runners-table__vh {
    display: grid;
    gap: 3px;
    justify-items: start;
}

.courses-runners-table__vh span:last-child {
    color: #c5a66a;
    font-size: 0.8rem;
}

.courses-runners-table__musique {
    font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
    letter-spacing: 0.06em;
    color: #ecd7a4;
    font-size: 0.86rem;
    white-space: nowrap;
}

.courses-runners-table__odds {
    text-align: center;
    color: #b79a63;
    font-weight: 700;
}

.courses-runners-table__gap {
    color: #ecd7a4;
    font-size: 0.86rem;
    white-space: nowrap;
}

.courses-runners-table__horse-link,
.courses-runners-table__stable-link,
.courses-runners-table__jockey-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(210, 172, 86, 0.5);
    transition: color 0.15s ease;
    cursor: pointer;
}

.courses-runners-table__horse-link:hover,
.courses-runners-table__stable-link:hover,
.courses-runners-table__jockey-link:hover {
    color: #ffe9b8;
    border-bottom-color: #ffe9b8;
}

/* ===== Fiche jockey (pop-up in-page) ===== */
.horse-chip--owner {
    background: linear-gradient(180deg, #8a6a31, #5d431a);
    color: #fff1cf;
    border-color: rgba(210, 172, 86, 0.5);
}

.jockey-fiche__hint {
    color: #b79a63;
    font-size: 0.78rem;
    font-style: italic;
}

.jockey-fiche__confidence {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.jockey-fiche__confidence-score {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff2d0;
    min-width: 3.5rem;
    text-align: center;
}

.jockey-fiche__confidence p {
    margin: 0;
    color: #d8bd82;
    line-height: 1.45;
}

.jockey-fiche__confidence strong {
    color: #ffbfa0;
    display: block;
    margin-top: 0.15rem;
}

/* fiche jockey elargie pour loger 4 mini-blocs de criteres par ligne (le modal de base ne fait que 560px) */
.horse-popup-dialog.jockey-fiche-dialog {
    width: min(1040px, calc(100% - 24px));
}

/* mini-blocs de criteres : 3 par ligne (responsive) */
.jockey-fiche__criteria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0.4rem 0.6rem;
}

/* dans chaque bloc, les infos en COLONNES alignees ; non-proprio : label | grade */
.jockey-fiche__criterion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    column-gap: 0.5rem;
    padding: 5px 9px;
    border-radius: 10px;
    background: rgba(67, 43, 17, 0.55);
    border: 1px solid rgba(181, 145, 71, 0.14);
}

/* proprio : label | grade | valeur% | potentiel (4 colonnes) */
.jockey-fiche__criteria.is-owner .jockey-fiche__criterion {
    grid-template-columns: minmax(0, 1fr) 30px 2.8rem 5rem;
}

.jockey-fiche__criterion-label {
    color: #ecd7a4;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jockey-fiche__criterion-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jockey-fiche__grade-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.jockey-fiche__criterion-value {
    color: #fff2d0;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
}

.jockey-fiche__criterion-potential {
    color: #b79a63;
    font-size: 0.7rem;
    font-style: italic;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jockey-fiche__criterion-potential.is-max {
    color: #ffe9a6;
    font-style: normal;
    font-weight: 700;
}

/* Repli lettre (tant que les icones de grade dediees ne sont pas creees) */
.jockey-fiche__grade-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.9rem;
    color: #1a1206;
}

.jockey-fiche__grade-letter--e { background: #9a6b5f; }
.jockey-fiche__grade-letter--d { background: #b08a52; }
.jockey-fiche__grade-letter--c { background: #c9a85e; }
.jockey-fiche__grade-letter--b { background: #d9c06a; }
.jockey-fiche__grade-letter--a { background: #ecd77f; }
.jockey-fiche__grade-letter--s {
    background: linear-gradient(180deg, #ffe9a6, #e9c65c);
    color: #5d3f12;
    box-shadow: 0 0 0 1px rgba(255, 233, 166, 0.6);
}

.horse-record-dialog__result-place.is-win {
    color: #ffe9a6;
    font-weight: 800;
}

/* --- Cartes d'apercu jockey (monte/ecurie) : meta + tri --- */
.jockey-sort-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    color: #b79a63;
    font-size: 0.78rem;
}

.jockey-sort-btn {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(210, 172, 86, 0.28);
    background: rgba(67, 43, 17, 0.5);
    color: #ecd7a4;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.jockey-sort-btn:hover {
    border-color: rgba(210, 172, 86, 0.55);
}

.jockey-sort-btn.is-active {
    background: linear-gradient(180deg, #8a6a31, #5d431a);
    color: #fff1cf;
    border-color: rgba(210, 172, 86, 0.6);
    font-weight: 700;
}

.jockey-card-meta {
    display: block;
    color: #c5a66a;
    font-size: 0.78rem;
    margin-top: 2px;
}

.jockey-card-meta > span {
    margin-right: 0.25rem;
}

.jockey-card-meta__top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    margin-top: 3px;
}

.jockey-card-meta__crit {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #ecd7a4;
    font-size: 0.74rem;
}

.jockey-card-meta__crit .jockey-fiche__grade-icon {
    width: 20px;
    height: 20px;
}

.jockey-card-meta__crit .jockey-fiche__grade-letter {
    width: 18px;
    height: 18px;
    font-size: 0.72rem;
}

/* ===== Rapport de tracking ===== */
.tracking-report {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem clamp(0.75rem, 3vw, 2rem);
}

.tracking-report__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(210, 172, 86, 0.2);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(62, 44, 20, 0.72), rgba(36, 26, 12, 0.85));
}

.tracking-report__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tracking-report__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(180deg, #8a6a31, #5d431a);
    color: #fff1cf;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.tracking-report__brand-name {
    color: #ecd7a4;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.tracking-report__title {
    flex: 1 1 260px;
    text-align: center;
}

.tracking-report__eyebrow {
    margin: 0;
    color: #c5a66a;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
}

.tracking-report__title h1 {
    margin: 0.2rem 0;
    color: #fff2d0;
    font-size: 1.35rem;
}

.tracking-report__sub {
    margin: 0.1rem 0;
    color: #c5a66a;
    font-size: 0.88rem;
}

.tracking-report__redk {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(210, 172, 86, 0.3);
    background: rgba(0, 0, 0, 0.18);
}

.tracking-report__redk-label {
    color: #c5a66a;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tracking-report__redk-value {
    color: #fff2d0;
    font-size: 1.2rem;
    font-weight: 800;
}

.tracking-report__empty {
    display: grid;
    justify-items: start;
    gap: 1rem;
    padding: 2rem;
    border: 1px dashed rgba(210, 172, 86, 0.3);
    border-radius: 16px;
    color: #c5a66a;
}

.tracking-report__legend {
    margin: 0;
    color: #b79a63;
    font-size: 0.82rem;
    line-height: 1.5;
}

.tracking-report-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(210, 172, 86, 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(62, 44, 20, 0.72), rgba(36, 26, 12, 0.8));
}

.tracking-report-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 0.82rem;
}

.tracking-report-table thead th {
    padding: 8px 10px;
    background: linear-gradient(180deg, #6f5224, #4f3815);
    color: #fff3d5;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border-left: 1px solid rgba(0, 0, 0, 0.18);
}

.tracking-report-table tbody td {
    padding: 8px 10px;
    border-top: 1px solid rgba(181, 145, 71, 0.12);
    border-left: 1px solid rgba(181, 145, 71, 0.08);
    background: rgba(67, 43, 17, 0.76);
    color: #f3dfb3;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.tracking-report-table tbody tr:nth-child(even) td {
    background: rgba(84, 55, 22, 0.78);
}

.tracking-report-table__tron-label {
    font-size: 0.72rem;
    color: #fff3d5;
}

.tracking-report-table__tron-meta {
    font-size: 0.68rem;
    font-weight: 600;
    color: #d8bd82;
}

.tracking-report-table__tron-code {
    font-size: 0.72rem;
    color: #d8bd82;
}

.tracking-report-table__stack {
    display: grid;
    gap: 1px;
    justify-items: center;
}

.tracking-report-table__stack .tracking-report-table__sub {
    color: #c5a66a;
    font-size: 0.74rem;
}

.tracking-report-table__stack sup {
    color: #ffd98a;
    font-size: 0.62rem;
    margin-left: 2px;
}

.tracking-report-table__horse {
    display: grid;
    gap: 2px;
    justify-items: start;
    text-align: left;
}

.tracking-report-table__horse strong {
    color: #fff2d0;
}

.tracking-report-table__horse a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(210, 172, 86, 0.5);
}

.tracking-report-table__horse a:hover {
    color: #ffe9b8;
}

.tracking-report-table__horse span {
    color: #c5a66a;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tracking-report-table__rank strong {
    color: #fff2d0;
    font-size: 0.95rem;
}

/* colonnes d'identite (Partant + Cheval) : fond legerement distinct */
.tracking-report-table tbody td.tracking-report-table__sticky,
.tracking-report-table tbody td.tracking-report-table__sticky2 {
    background: #3a2610;
}

.tracking-report-table tbody tr:nth-child(even) td.tracking-report-table__sticky,
.tracking-report-table tbody tr:nth-child(even) td.tracking-report-table__sticky2 {
    background: #47300f;
}

.tracking-report-table__sticky strong {
    color: #fff2d0;
}

.tracking-report-table__sticky span {
    color: #c5a66a;
    font-size: 0.78rem;
    margin-left: 3px;
}

.courses-runners-table__place {
    text-align: center;
    white-space: nowrap;
}

.courses-runners-table__place strong {
    color: #fff2d0;
    font-size: 0.95rem;
}

.courses-runners-table--results {
    min-width: 1040px;
}

.courses-photo-finish {
    margin-bottom: 1rem;
    border-radius: 16px;
    overflow: hidden;
}

.courses-photo-finish img {
    display: block;
    width: 100%;
    height: auto;
}

.courses-photo-finish--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border: 1px dashed rgba(210, 172, 86, 0.32);
    background:
        repeating-linear-gradient(135deg, rgba(62, 44, 20, 0.5) 0 14px, rgba(36, 26, 12, 0.6) 14px 28px);
}

.courses-photo-finish__label {
    color: #c5a66a;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

.courses-detail-body__placeholder {
    display: grid;
    gap: 0.5rem;
    color: #5b4728;
}

.courses-detail-body__placeholder p {
    margin: 0;
    color: #6d5938;
    line-height: 1.55;
}

.courses-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.courses-status-chip.is-open {
    color: #ebf5c1;
    background: rgba(151, 177, 49, 0.18);
    border: 1px solid rgba(151, 177, 49, 0.28);
}

.courses-status-chip.is-closed {
    color: #ffe4b5;
    background: rgba(181, 129, 56, 0.18);
    border: 1px solid rgba(181, 129, 56, 0.28);
}

.courses-status-chip.is-upcoming {
    color: #dce8ff;
    background: rgba(99, 126, 188, 0.18);
    border: 1px solid rgba(99, 126, 188, 0.28);
}

.courses-status-chip.is-paid {
    color: #ffd7cc;
    background: rgba(187, 95, 74, 0.18);
    border: 1px solid rgba(187, 95, 74, 0.28);
}

.courses-status-chip.is-neutral {
    color: #f5ead0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(246, 210, 139, 0.18);
}

.courses-program-stack {
    display: grid;
    gap: 1rem;
}

.courses-program-block {
    padding: 1rem;
}

.courses-hippodrome-stack {
    display: grid;
    gap: 1rem;
}

.courses-meeting-stack {
    display: grid;
    gap: 1rem;
}

.courses-meeting-panel {
    padding: 1rem;
}

.courses-hippodrome-panel {
    background:
        linear-gradient(180deg, rgba(120, 84, 31, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
}

.courses-meeting-card {
    text-decoration: none;
}

.courses-meeting-card.is-active {
    border-color: rgba(214, 176, 84, 0.7);
    box-shadow: 0 0 0 1px rgba(214, 176, 84, 0.3) inset;
}

.courses-meeting-meta {
    margin-bottom: 1rem;
}

.courses-weather-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.courses-race-list {
    gap: 0.9rem;
}

.courses-race-table {
    display: grid;
    gap: 0.8rem;
}

.courses-race-row {
    display: grid;
    grid-template-columns: 70px 92px minmax(0, 1fr) 130px 150px;
    gap: 0.8rem;
    align-items: center;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(230, 195, 118, 0.16);
    background: rgba(255, 255, 255, 0.035);
}

.courses-race-row__cell {
    min-width: 0;
}

.courses-race-row__cell--number strong,
.courses-race-row__cell--time strong,
.courses-race-row__cell--status strong {
    color: #fff2cf;
    font-size: 1rem;
}

.courses-race-row__cell--number,
.courses-race-row__cell--time,
.courses-race-row__cell--status,
.courses-race-row__cell--action {
    text-align: center;
}

.courses-race-row__cell--info {
    display: grid;
    gap: 0.28rem;
}

.courses-race-row__cell--info strong {
    color: #fff4dd;
}

.courses-race-row__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(246, 210, 139, 0.22);
}

.courses-race-row__link:hover {
    color: #fff7e7;
    border-bottom-color: rgba(246, 210, 139, 0.52);
}

.courses-race-row__cell--info span {
    color: #d8c39a;
    font-size: 0.9rem;
    line-height: 1.35;
}

.courses-bets-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.65rem;
    min-height: 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(184, 214, 89, 0.25);
    background: rgba(184, 214, 89, 0.08);
    color: #e9f4bd;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.courses-tv-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    border: 1px solid rgba(246, 210, 139, 0.24);
    background: rgba(255, 255, 255, 0.05);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.courses-tv-link:hover {
    transform: translateY(-1px);
    border-color: rgba(246, 210, 139, 0.46);
    background: rgba(255, 255, 255, 0.08);
}

.courses-tv-link__icon {
    display: block;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.courses-weather-label {
    display: grid;
    place-items: center;
}

.courses-weather-label__icon {
    width: 2.9rem;
    height: 2.9rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.courses-weather-label__icon--terrain {
    width: 3.35rem;
    height: 3.35rem;
}

.courses-weather-grid .stable-stat-card {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.4rem;
    text-align: center;
}

.courses-weather-grid .stable-stat-card > span,
.courses-weather-grid .stable-stat-card > strong {
    display: block;
    width: 100%;
    text-align: center;
}

@media (max-width: 860px) {
    .courses-weather-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .courses-race-row {
        grid-template-columns: 58px 80px minmax(0, 1fr);
    }

    .courses-race-row__cell--status,
    .courses-race-row__cell--action {
        grid-column: span 3;
        text-align: left;
    }

    .courses-detail-hero__top {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .courses-weather-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .courses-race-row {
        grid-template-columns: 48px 74px minmax(0, 1fr);
        gap: 0.65rem;
        padding: 0.8rem;
    }
}

#courses-calendar-dialog {
    width: max-content;
    max-width: calc(100% - 24px);
}

.courses-calendar-dialog {
    width: max-content;
    max-width: calc(100vw - 48px);
    padding-right: 20px;
}

.courses-calendar-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.8rem;
}

.courses-calendar-nav__title {
    text-align: center;
    color: #fff2d3;
    font-family: "Cinzel", serif;
    font-size: 1.05rem;
}

.courses-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.28rem;
}

.courses-calendar-grid__head {
    text-align: center;
    color: var(--gold-soft);
    font-size: 0.78rem;
    font-weight: 700;
    padding-bottom: 0.12rem;
}

.courses-calendar-grid__day {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(230, 195, 118, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #fff1d0;
    text-decoration: none;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.1rem;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.courses-calendar-grid__day:hover {
    transform: translateY(-1px);
    border-color: rgba(246, 210, 139, 0.42);
    background: rgba(255, 255, 255, 0.07);
}

.courses-calendar-grid__day small {
    color: #b7dc6c;
    font-size: 0.64rem;
}

.courses-calendar-grid__day.is-outside {
    opacity: 0.42;
}

.courses-calendar-grid__day.is-selected {
    border-color: rgba(214, 176, 84, 0.7);
    box-shadow: 0 0 0 1px rgba(214, 176, 84, 0.3) inset;
    background: rgba(214, 176, 84, 0.12);
}

.courses-calendar-grid__day.has-meetings {
    background:
        linear-gradient(180deg, rgba(132, 152, 40, 0.16), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.05);
}

.courses-calendar-grid__day.is-today {
    border-color: rgba(121, 198, 255, 0.6);
    background:
        linear-gradient(180deg, rgba(72, 138, 190, 0.22), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(121, 198, 255, 0.18) inset;
}

.courses-calendar-grid__day.is-all-closed {
    border-color: rgba(213, 143, 92, 0.46);
    background:
        linear-gradient(180deg, rgba(120, 70, 42, 0.24), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
}

.training-track-card {
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(184, 214, 89, 0.18);
    background:
        linear-gradient(180deg, rgba(98, 114, 34, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.training-track-card:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 216, 155, 0.28);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2);
}

.training-track-card__media {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.16);
}

.training-track-card--shop .training-track-card__media {
    min-height: 72px;
}

.training-track-card--shop {
    gap: 8px;
    padding: 8px;
}

.training-track-card--shop .training-track-card__body strong {
    font-size: 0.9rem;
}

.training-track-card--shop .training-track-card__body span {
    font-size: 0.76rem;
}

.training-track-card__media img,
.training-track-dialog__media img {
    display: block;
    width: 100%;
    height: auto;
}

.training-track-card__body {
    display: grid;
    gap: 4px;
}

.training-track-card__body strong {
    color: #fff2d3;
    font-size: 0.98rem;
}

.training-track-card__body span {
    color: var(--gold-soft);
    font-size: 0.8rem;
}

.training-track-dialog__media {
    overflow: hidden;
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.16);
}

.training-track-dialog__summary {
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.training-track-dialog__maxed {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-soft, #e6c66a);
}

.training-infra-agenda {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.training-infra-agenda__day {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.training-infra-agenda__day strong {
    color: #fff2d3;
    font-size: 0.88rem;
    line-height: 1.35;
}

.training-infra-agenda__day span {
    color: var(--gold-soft);
    font-size: 0.8rem;
}

.training-select {
    position: relative;
}

.training-day-card__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    min-height: 46px;
    padding: 0 42px 0 14px;
    border-radius: 18px;
    border: 1px solid rgba(227, 189, 108, 0.26);
    background:
        linear-gradient(180deg, rgba(72, 52, 26, 0.96), rgba(39, 27, 13, 0.98)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23f2ddb2' d='M7 9 .6 1.7A1 1 0 0 1 1.35 0h11.3a1 1 0 0 1 .75 1.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right 14px center;
    background-size: auto, 14px 9px;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.08),
        0 10px 18px rgba(0, 0, 0, 0.18);
    color: #fff3d2;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.training-day-card__select:hover {
    border-color: rgba(245, 216, 155, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.1),
        0 12px 22px rgba(0, 0, 0, 0.22);
}

.training-day-card__select:focus {
    outline: none;
    border-color: rgba(184, 214, 89, 0.82);
    box-shadow:
        0 0 0 3px rgba(184, 214, 89, 0.14),
        inset 0 1px 0 rgba(255, 245, 220, 0.12),
        0 12px 22px rgba(0, 0, 0, 0.24);
}

.training-day-card__select:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    color: rgba(255, 234, 194, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(55, 43, 30, 0.8), rgba(32, 24, 17, 0.88)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%239f8d6d' d='M7 9 .6 1.7A1 1 0 0 1 1.35 0h11.3a1 1 0 0 1 .75 1.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right 14px center;
    background-size: auto, 14px 9px;
}

.training-day-card__select option {
    background: #2c1f11;
    color: #fff1d0;
}

.training-day-card__select.is-native-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.training-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(227, 189, 108, 0.26);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(72, 52, 26, 0.96), rgba(39, 27, 13, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.08),
        0 10px 18px rgba(0, 0, 0, 0.18);
    color: #fff3d2;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.training-select__trigger:hover {
    border-color: rgba(245, 216, 155, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.1),
        0 12px 22px rgba(0, 0, 0, 0.22);
}

.training-select__trigger:focus {
    outline: none;
    border-color: rgba(184, 214, 89, 0.82);
    box-shadow:
        0 0 0 3px rgba(184, 214, 89, 0.14),
        inset 0 1px 0 rgba(255, 245, 220, 0.12),
        0 12px 22px rgba(0, 0, 0, 0.24);
}

.training-select.is-open .training-select__trigger {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.training-select.has-value .training-select__trigger {
    border-color: rgba(184, 214, 89, 0.38);
    background: linear-gradient(180deg, rgba(76, 83, 26, 0.96), rgba(40, 34, 14, 0.98));
}

.training-select.has-value .training-select__label {
    color: #eef6c6;
}

.training-select.is-standard-default .training-select__trigger {
    border-color: rgba(227, 189, 108, 0.42);
    background: linear-gradient(180deg, rgba(92, 72, 22, 0.96), rgba(52, 38, 12, 0.98));
}

.training-select.is-standard-default .training-select__label {
    color: #ffe39a;
}

.training-select__label {
    overflow: hidden;
    color: #fff3d2;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-select__caret {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #f2ddb2;
    transition: transform 0.18s ease;
}

.training-select.is-open .training-select__caret {
    transform: rotate(180deg);
}

.training-select__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(227, 189, 108, 0.24);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(56, 38, 18, 0.98), rgba(29, 20, 10, 0.99));
    box-shadow:
        0 20px 38px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 245, 220, 0.08);
}

.training-select.is-open .training-select__menu {
    display: grid;
    gap: 4px;
}

.training-select__option {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #fff1d0;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
}

.training-select__option:hover,
.training-select__option:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.training-select__option.is-current {
    background: rgba(255, 255, 255, 0.08);
    color: #fbf7e7;
}

.training-select__option.is-saved-selected {
    background: rgba(184, 214, 89, 0.14);
    color: #fbf7e7;
}

.training-select__option.is-disabled {
    position: relative;
    color: rgba(255, 232, 193, 0.42);
    cursor: not-allowed;
}

.training-select__option.is-disabled:hover,
.training-select__option.is-disabled:focus {
    background: rgba(255, 255, 255, 0.04);
}

.training-select__option.is-disabled::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 6px);
    padding: 8px 10px;
    border: 1px solid rgba(236, 194, 105, 0.48);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(55, 36, 15, 0.96), rgba(18, 12, 5, 0.98));
    color: var(--gold-soft);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    z-index: 30;
}

.training-select__option.is-disabled:hover::after,
.training-select__option.is-disabled:focus::after {
    opacity: 1;
    transform: translateY(0);
}

.training-select__option.is-disabled[data-value="demi_train"]::after,
.training-select__option.is-disabled[data-value="bout_vite"]::after,
.training-select__option.is-disabled[data-value="cote_a_cote"]::after,
.training-select__option.is-disabled[data-value="sollicitation"]::after,
.training-select__option.is-disabled[data-value="2000m_fractionne"]::after,
.training-select__option.is-disabled[data-value="2500m_fractionne"]::after,
.training-select__option.is-disabled[data-value="psf_colline"]::after,
.training-select__option.is-disabled[data-value="herbe_colline"]::after {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(4px);
}

.training-select__option.is-disabled[data-value="demi_train"]:hover::after,
.training-select__option.is-disabled[data-value="demi_train"]:focus::after,
.training-select__option.is-disabled[data-value="bout_vite"]:hover::after,
.training-select__option.is-disabled[data-value="bout_vite"]:focus::after,
.training-select__option.is-disabled[data-value="cote_a_cote"]:hover::after,
.training-select__option.is-disabled[data-value="cote_a_cote"]:focus::after,
.training-select__option.is-disabled[data-value="sollicitation"]:hover::after,
.training-select__option.is-disabled[data-value="sollicitation"]:focus::after,
.training-select__option.is-disabled[data-value="2000m_fractionne"]:hover::after,
.training-select__option.is-disabled[data-value="2000m_fractionne"]:focus::after,
.training-select__option.is-disabled[data-value="2500m_fractionne"]:hover::after,
.training-select__option.is-disabled[data-value="2500m_fractionne"]:focus::after,
.training-select__option.is-disabled[data-value="psf_colline"]:hover::after,
.training-select__option.is-disabled[data-value="psf_colline"]:focus::after,
.training-select__option.is-disabled[data-value="herbe_colline"]:hover::after,
.training-select__option.is-disabled[data-value="herbe_colline"]:focus::after {
    transform: translateY(0);
}

.training-select.is-disabled .training-select__trigger {
    opacity: 0.7;
    cursor: not-allowed;
    color: rgba(255, 234, 194, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(55, 43, 30, 0.8), rgba(32, 24, 17, 0.88));
}

.training-select.is-disabled .training-select__label {
    color: rgba(255, 234, 194, 0.55);
}

.training-select.is-disabled .training-select__caret {
    border-top-color: #9f8d6d;
}

.training-plan-stack .training-profile-course .horse-attribute-row {
    grid-template-columns: 88px minmax(0, 1fr) 42px 0;
    gap: 10px;
}

.training-plan-stack .training-profile-course .horse-attribute-row__meta {
    display: none;
}

.horse-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.horse-sheet-data {
    margin: 0;
    display: grid;
    gap: 10px;
}

.horse-sheet-data div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) minmax(0, 180px);
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* LIGNE SANS COLONNE D'ACTION.
   Les lignes de cette liste reservent 180 px a droite pour un bouton (mettre en
   vente, placer...). Une ligne qui n'en porte aucun n'a pas a payer cette reserve :
   sa valeur s'etend jusqu'au bord. C'est ce qui permet a la musique de tenir sur
   une seule ligne au lieu de se replier faute de place.
   Specificite volontairement renforcee : `.horse-sheet-data div` imposerait sinon
   ses trois colonnes. */
.horse-sheet-data div.horse-sheet-data__row--full {
    grid-template-columns: 140px minmax(0, 1fr);
}

.horse-sheet-data--compact div {
    grid-template-columns: 120px minmax(0, 1fr);
}

/* Préférences : 2 colonnes (intitulé étroit + valeur/barre pleine largeur). */
.horse-sheet-data--solo div {
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
}

.horse-sheet-data dt {
    color: var(--gold-soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.horse-sheet-data dd {
    margin: 0;
    color: var(--text);
}

.horse-sheet-data__currency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.horse-sheet-data__action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 24px;
}

.horse-sheet-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 220, 150, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: var(--gold-soft);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.horse-sheet-choice--link {
    text-decoration: none;
    cursor: pointer;
}

.horse-sheet-choice--link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 220, 150, 0.24);
}

.horse-sheet-choice--disabled {
    opacity: 0.45;
    cursor: help;
    color: #b79a63;
    filter: grayscale(0.3);
}

.horse-sheet-inline-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.horse-sheet-inline-form--block {
    justify-content: flex-start;
    margin-top: 8px;
}

.horse-sheet-inline-select {
    min-width: 180px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 220, 150, 0.16);
    background: rgba(19, 14, 9, 0.92);
    color: var(--text);
}

.horse-sheet-link {
    color: var(--gold-soft);
    text-decoration: underline;
    text-decoration-color: rgba(245, 216, 155, 0.35);
    text-underline-offset: 3px;
}

.horse-attribute-list {
    display: grid;
    gap: 12px;
}

.horse-attribute-row {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr) 48px 96px;
    gap: 10px;
    align-items: center;
}

.horse-attribute-row--small {
    grid-template-columns: 108px minmax(0, 1fr);
}

.horse-attribute-row--stacked {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

/* Abonnement "sans" : 2 colonnes (intitulé + graphe pleine largeur). */
.horse-attribute-list--solo .horse-attribute-row {
    grid-template-columns: 142px minmax(0, 1fr);
}

/* Abonnements "premium"/"infinite" : 3 colonnes (icône + intitulé + i | barres | % ou icône potentiel). */
.horse-attribute-list--trio .horse-attribute-row {
    grid-template-columns: 158px minmax(0, 1fr) 48px;
}

.horse-attribute-row__help {
    margin-left: 2px;
}

/* Tempérament (tier "sans") : 1re colonne élargie pour loger le bouton d'aide. */
.horse-attribute-row--help-room {
    grid-template-columns: 132px minmax(0, 1fr);
}

.courses-pmu-form {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.courses-pmu-form__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.courses-pmu-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--muted);
}

.courses-pmu-form__field select,
.courses-pmu-form__field input {
    padding: 8px 10px;
    border: 1px solid rgba(236, 194, 105, 0.4);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
    font-size: 0.9rem;
}

.courses-pmu-form__submit {
    align-self: flex-end;
}

.courses-pmu-form__cap {
    margin: 8px 0 0;
    font-size: 0.76rem;
    color: var(--gold-soft);
}

.courses-pmu-form__note {
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: var(--muted);
}

.courses-pmu-bets {
    margin-top: 14px;
}

.courses-pmu-bets h4 {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: var(--gold-soft);
}

.courses-pmu-bets__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.courses-pmu-bets__table th,
.courses-pmu-bets__table td {
    padding: 5px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.courses-pmu-bets__table tfoot td {
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.courses-couple {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.courses-couple h4 {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--gold-soft);
}

.courses-couple-horses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 8px 0;
    font-size: 0.82rem;
}

.courses-couple-horses label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.courses-couple-cost {
    margin: 6px 0;
    font-size: 0.8rem;
    color: var(--gold-soft);
    font-weight: 600;
}

/* ---- Panneau PMU (pastilles + bulletin réactif + table de paris sous « Simple ») ---- */
.pmu-bet-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 0.86rem;
}

.pmu-bet-table thead th {
    text-align: left;
    padding: 4px 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pmu-bet-table__odds-h,
.pmu-bet-table__bet-h {
    text-align: center;
}

.pmu-bet-table tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.pmu-bet-table__name {
    font-weight: 600;
}

.pmu-bet-table__odds {
    text-align: center;
    font-weight: 700;
    color: var(--gold-soft, #ecc269);
    white-space: nowrap;
}

.pmu-bet-table__cell {
    text-align: center;
    width: 82px;
}

.pmu-bet-table__cell input {
    width: 66px;
    padding: 6px;
    border: 1px solid rgba(236, 194, 105, 0.35);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-size: 0.86rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.pmu-bet-table__cell input::placeholder {
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.76rem;
}

.pmu-bet-table__cell input:hover {
    border-color: var(--gold-soft, #ecc269);
}

.pmu-bet-table__cell input.is-active {
    background: rgba(236, 194, 105, 0.18);
    border-color: var(--gold-soft, #ecc269);
    color: var(--gold-soft, #ecc269);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(236, 194, 105, 0.4);
}

.pmu-panel {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pmu-panel__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pmu-panel__pills-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-right: 4px;
}

.pmu-pill,
.pmu-fpill,
.pmu-tfpill,
.pmu-ofpill {
    padding: 7px 14px;
    border: 1px solid rgba(236, 194, 105, 0.45);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pmu-pill:hover,
.pmu-fpill:hover,
.pmu-tfpill:hover,
.pmu-ofpill:hover {
    border-color: var(--gold-soft, #ecc269);
}

.pmu-pill.is-active {
    background: var(--gold-soft, #ecc269);
    border-color: var(--gold-soft, #ecc269);
    color: #1a1205;
}

/* Paris prestige de la course support (Tiercé/Quarté/Quinté) */
.pmu-pill--tqq {
    border-color: rgba(120, 200, 140, 0.6);
    box-shadow: inset 0 0 0 1px rgba(120, 200, 140, 0.25);
}

.pmu-pill--tqq.is-active {
    background: #78c88c;
    border-color: #78c88c;
    color: #0d2413;
}

.pmu-fpill.is-active,
.pmu-tfpill.is-active,
.pmu-ofpill.is-active {
    background: rgba(236, 194, 105, 0.2);
    border-color: var(--gold-soft, #ecc269);
    color: var(--gold-soft, #ecc269);
}

/* Combiné ordonné : badge de rang sur le chip */
.pmu-chip--ord {
    position: relative;
}

.pmu-chip--ord .pmu-chip__rank:not(:empty) {
    position: absolute;
    top: -7px;
    left: -7px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #1a1205;
    color: var(--gold-soft, #ecc269);
    border: 1px solid var(--gold-soft, #ecc269);
    font-size: 0.68rem;
    line-height: 15px;
    text-align: center;
    font-weight: 700;
}

/* Champ positionnel ordonné : cases de position */
.pmu-oz {
    margin-top: 6px;
}

.pmu-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.pmu-slots label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.pmu-slots select {
    padding: 7px 9px;
    border: 1px solid rgba(236, 194, 105, 0.4);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-size: 0.9rem;
}

.pmu-oseq {
    margin: 8px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-soft, #ecc269);
}

.pmu-slip {
    border: 1px solid rgba(236, 194, 105, 0.28);
    border-radius: 12px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pmu-slip__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold-soft, #ecc269);
}

.pmu-slip__hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.pmu-slip__rows-head,
.pmu-slip__row {
    display: grid;
    grid-template-columns: 1fr 88px 88px;
    gap: 8px;
    align-items: center;
}

.pmu-slip__rows-head {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    margin-bottom: 4px;
}

.pmu-slip__row {
    padding: 4px 0;
}

.pmu-slip__row-name {
    font-size: 0.86rem;
    font-weight: 600;
}

.pmu-slip__row input,
.pmu-slip__unit input,
.pmu-slip__ordre input,
.pmu-slip__ordre select {
    padding: 7px 9px;
    border: 1px solid rgba(236, 194, 105, 0.4);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-size: 0.9rem;
}

.pmu-slip__row input:disabled {
    opacity: 0.35;
}

.pmu-slip__formulas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pmu-cz {
    margin-top: 4px;
}

.pmu-cz[hidden] {
    display: none;
}

.pmu-cz--split {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.pmu-cz__col {
    flex: 1;
    min-width: 160px;
}

.pmu-cz__label {
    margin: 0 0 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.pmu-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pmu-chip {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid rgba(236, 194, 105, 0.45);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.pmu-chip:hover {
    border-color: var(--gold-soft, #ecc269);
}

.pmu-chip.is-on {
    background: var(--gold-soft, #ecc269);
    border-color: var(--gold-soft, #ecc269);
    color: #1a1205;
}

.pmu-slip__unit,
.pmu-slip__ordre label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--muted);
    max-width: 150px;
}

.pmu-slip__ordre {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.pmu-slip__recap {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(76, 175, 80, 0.16);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: #cdeccb;
    font-size: 0.85rem;
    font-weight: 600;
}

.pmu-slip__warn {
    margin: 0;
    min-height: 1em;
    font-size: 0.8rem;
    color: #e7a14b;
    font-weight: 600;
}

.pmu-slip__warn.is-visible {
    color: #ef6b6b;
}

.pmu-slip__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.pmu-slip__total strong {
    font-size: 1.15rem;
    color: var(--gold-soft, #ecc269);
}

.pmu-slip__submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pmu-slip__note {
    margin: 0;
    font-size: 0.74rem;
    color: var(--muted);
}

.sales-claiming-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sales-claiming-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(236, 194, 105, 0.5);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
    font-size: 0.9rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.horse-attribute-upsell {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--gold-soft);
    font-size: 0.82rem;
    font-style: italic;
    text-align: center;
}

.horse-attribute-row span,
.horse-attribute-row em {
    color: var(--muted);
    font-size: 0.84rem;
    font-style: normal;
}

.horse-attribute-row__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.horse-attribute-row__label span {
    min-width: 0;
}

.horse-grade-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
    filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.34));
}

.horse-grade-icon--a {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    filter:
        drop-shadow(0 7px 11px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 8px rgba(236, 198, 74, 0.34));
}

.horse-grade-icon--s {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 11px rgba(255, 218, 82, 0.48));
}

.horse-attribute-row__meta.is-hidden {
    display: none;
}

.horse-attribute-row strong {
    text-align: right;
}

.horse-attribute-row__value.is-hidden {
    display: none;
}

.horse-attribute-row__bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.horse-attribute-row__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--olive), var(--olive-bright));
}

.horse-attribute-row__segments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.horse-attribute-row__segment {
    position: relative;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.horse-attribute-row__segment-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--olive), var(--olive-bright));
}

.horse-attribute-row__segments.is-stage-1 .horse-attribute-row__segment-fill {
    background: linear-gradient(90deg, #c43a2f, #e05a4e);
}

.horse-attribute-row__segments.is-stage-2 .horse-attribute-row__segment-fill {
    background: linear-gradient(90deg, #dcbc61, #f2de96);
}

.horse-attribute-row__segments.is-stage-3 .horse-attribute-row__segment-fill {
    background: linear-gradient(90deg, var(--olive), var(--olive-bright));
}

/* Conteneur "3 barres + flèche de tendance" : occupe la colonne des barres sans changer la grille. */
.horse-attribute-row__progress {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.horse-attribute-row__progress .horse-attribute-row__segments {
    flex: 1 1 auto;
    min-width: 0;
}

/* Flèche de tendance de maturation : ▲ vert = progression, ▼ rouge = régression. */
.horse-attribute-row__progress .horse-attribute-row__trend {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    font-size: 0.8rem;
    line-height: 1;
    font-weight: 700;
    cursor: help;
}

.horse-attribute-row__progress .horse-attribute-row__trend.is-empty {
    visibility: hidden;
}

.horse-attribute-row__progress .horse-attribute-row__trend--up {
    color: #49b24f;
}

.horse-attribute-row__progress .horse-attribute-row__trend--down {
    color: #e05a4e;
}

.training-profile-course .horse-attribute-row {
    grid-template-columns: 108px 92px 56px 88px;
    gap: 12px;
}

.training-profile-course .horse-attribute-row span:first-child {
    color: #f2ddb2;
}

.training-profile-course .horse-attribute-row__value {
    color: #fff4d7;
    font-size: 0.95rem;
    font-weight: 700;
}

.training-profile-course .horse-attribute-row__meta {
    color: #e7c98b;
    font-size: 0.9rem;
}

.training-profile-course .horse-attribute-row__bar,
.training-profile-course .horse-attribute-row__segment {
    background: rgba(78, 62, 40, 0.82);
}

.training-profile-course .horse-attribute-row__segments {
    gap: 8px;
}

.training-profile-course .horse-attribute-row__segment,
.training-profile-course .horse-attribute-row__bar {
    height: 10px;
}

.horse-temperament-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
}

.horse-temperament-block {
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.horse-temperament-block.is-active {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 0 16px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.horse-temperament-block.is-tier-1 {
    background: linear-gradient(180deg, #a81d1d, #7d1212);
}

.horse-temperament-block.is-tier-2 {
    background: linear-gradient(180deg, #df6a6a, #be4c4c);
}

.horse-temperament-block.is-tier-3 {
    background: linear-gradient(180deg, #4f83d8, #2f5ea9);
}

.horse-temperament-block.is-tier-4 {
    background: linear-gradient(180deg, #9fd64d, #7fb338);
}

.horse-temperament-block.is-tier-5 {
    background: linear-gradient(180deg, #49b24f, #2d8a39);
}

/* Cellule tempérament : barème + valeur éventuelle (infinite) */
.horse-temperament-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.horse-temperament-cell .horse-temperament-scale {
    flex: 1 1 auto;
}

.horse-temperament-scale--tri {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.horse-temperament-value {
    flex: 0 0 auto;
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Icône de potentiel (plafond) — abonnement infinite, 3e colonne. */
.horse-attribute-row__peak {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    min-width: 0;
}

.horse-attribute-row__peak.is-empty {
    display: none;
}

.horse-grade-icon--peak {
    opacity: 0.9;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.32)) grayscale(0.12);
}

/* Ancrage des icônes de grade (actuel / potentiel) pour l'infobulle stylée. */
.horse-attribute-row__grade {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.horse-attribute-row__peak {
    position: relative;
}

/* Infobulle dorée (format des "i") au survol des icônes de grade, au-dessus. */
.horse-attribute-row__grade[data-tooltip],
.horse-attribute-row__peak[data-tooltip] {
    cursor: help;
}

.horse-attribute-row__grade[data-tooltip]::before,
.horse-attribute-row__grade[data-tooltip]::after,
.horse-attribute-row__peak[data-tooltip]::before,
.horse-attribute-row__peak[data-tooltip]::after {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.horse-attribute-row__grade[data-tooltip]::before,
.horse-attribute-row__peak[data-tooltip]::before {
    content: attr(data-tooltip);
    width: max-content;
    max-width: 200px;
    padding: 8px 11px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(72, 45, 12, 0.45),
        inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    transform: translate(-50%, 6px);
}

.horse-attribute-row__grade[data-tooltip]::after,
.horse-attribute-row__peak[data-tooltip]::after {
    content: "";
    bottom: calc(100% + 3px);
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(236, 194, 105, 0.68);
    border-bottom: 1px solid rgba(236, 194, 105, 0.68);
    background: rgba(27, 18, 8, 0.995);
    transform: translate(-50%, 6px) rotate(45deg);
}

.horse-attribute-row__grade[data-tooltip]:hover::before,
.horse-attribute-row__grade[data-tooltip]:hover::after,
.horse-attribute-row__grade[data-tooltip]:focus-visible::before,
.horse-attribute-row__grade[data-tooltip]:focus-visible::after,
.horse-attribute-row__peak[data-tooltip]:hover::before,
.horse-attribute-row__peak[data-tooltip]:hover::after,
.horse-attribute-row__peak[data-tooltip]:focus-visible::before,
.horse-attribute-row__peak[data-tooltip]:focus-visible::after {
    opacity: 1;
}

.horse-attribute-row__grade[data-tooltip]:hover::before,
.horse-attribute-row__grade[data-tooltip]:focus-visible::before,
.horse-attribute-row__peak[data-tooltip]:hover::before,
.horse-attribute-row__peak[data-tooltip]:focus-visible::before {
    transform: translate(-50%, 0);
}

.horse-attribute-row__grade[data-tooltip]:hover::after,
.horse-attribute-row__grade[data-tooltip]:focus-visible::after,
.horse-attribute-row__peak[data-tooltip]:hover::after,
.horse-attribute-row__peak[data-tooltip]:focus-visible::after {
    transform: translate(-50%, 0) rotate(45deg);
}

/* Barre de préférence : 3 zones (gauche | polyvalent | droite) écrites sur la barre + curseur.
   Spécificité renforcée (.horse-sheet-data ...) car sinon `.horse-sheet-data div` impose sa
   grille et sa bordure à ces div imbriqués (c'était la cause de la barre tassée). */
.horse-sheet-data .horse-pref-scale {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    gap: 0;
}

.horse-sheet-data .horse-pref-scale__track {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(79, 131, 216, 0.5), rgba(255, 255, 255, 0.1), rgba(159, 214, 77, 0.5));
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.horse-pref-scale__zone {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
    padding: 0 4px;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    border-left: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.07);
}

.horse-pref-scale__zone:first-child {
    border-left: 0;
    box-shadow: none;
}

.horse-pref-scale__zone--mid {
    color: var(--gold-soft, #ecc64a);
    font-weight: 700;
    padding: 0;
    cursor: help;
}

.horse-pref-scale__zone[data-tooltip] {
    cursor: help;
}

/* Zones nombreuses (terrain, 10 états) : texte compact. */
.horse-pref-scale--dense .horse-pref-scale__zone {
    font-size: 0.58rem;
    padding: 0 1px;
}

/* État de terrain préféré du cheval : mis en évidence. */
.horse-pref-scale__zone.is-active {
    background: rgba(236, 194, 105, 0.32);
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* Infobulle dorée (pas blanche) sur le repère "P." (Polyvalent), au-dessus. */
.horse-pref-scale__zone[data-tooltip]::before,
.horse-pref-scale__zone[data-tooltip]::after {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.horse-pref-scale__zone[data-tooltip]::before {
    content: attr(data-tooltip);
    width: max-content;
    max-width: 180px;
    padding: 7px 10px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-shadow: none;
    transform: translate(-50%, 6px);
}

.horse-pref-scale__zone[data-tooltip]::after {
    content: "";
    bottom: calc(100% + 3px);
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(236, 194, 105, 0.68);
    border-bottom: 1px solid rgba(236, 194, 105, 0.68);
    background: rgba(27, 18, 8, 0.995);
    transform: translate(-50%, 6px) rotate(45deg);
}

.horse-pref-scale__zone[data-tooltip]:hover::before,
.horse-pref-scale__zone[data-tooltip]:hover::after,
.horse-pref-scale__zone[data-tooltip]:focus-visible::before,
.horse-pref-scale__zone[data-tooltip]:focus-visible::after {
    opacity: 1;
}

.horse-pref-scale__zone[data-tooltip]:hover::before,
.horse-pref-scale__zone[data-tooltip]:focus-visible::before {
    transform: translate(-50%, 0);
}

.horse-pref-scale__zone[data-tooltip]:hover::after,
.horse-pref-scale__zone[data-tooltip]:focus-visible::after {
    transform: translate(-50%, 0) rotate(45deg);
}

.horse-pref-scale__marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--gold-soft, #ecc64a);
    transform: translateX(-50%);
    z-index: 3;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
}

.horse-pref-scale__marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold-soft, #ecc64a);
    border: 2px solid #0d0d0d;
    transform: translate(-50%, -50%);
}

/* Survol des jetons de placement (abonnés) : infobulle au format doré des "i", positionnée au-dessus. */
.horse-placement-token[data-tooltip] {
    cursor: help;
}

.horse-placement-token[data-tooltip]::before,
.horse-placement-token[data-tooltip]::after {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.horse-placement-token[data-tooltip]::before {
    content: attr(data-tooltip);
    width: max-content;
    max-width: 200px;
    padding: 8px 11px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(72, 45, 12, 0.45),
        inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    transform: translate(-50%, 6px);
}

.horse-placement-token[data-tooltip]::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(236, 194, 105, 0.68);
    border-bottom: 1px solid rgba(236, 194, 105, 0.68);
    background: rgba(27, 18, 8, 0.995);
    transform: translate(-50%, 6px) rotate(45deg);
    margin-bottom: -5px;
}

.horse-placement-token[data-tooltip]:hover::before,
.horse-placement-token[data-tooltip]:hover::after,
.horse-placement-token[data-tooltip]:focus-visible::before,
.horse-placement-token[data-tooltip]:focus-visible::after {
    opacity: 1;
}

.horse-placement-token[data-tooltip]:hover::before,
.horse-placement-token[data-tooltip]:focus-visible::before {
    transform: translate(-50%, 0);
}

.horse-placement-token[data-tooltip]:hover::after,
.horse-placement-token[data-tooltip]:focus-visible::after {
    transform: translate(-50%, 0) rotate(45deg);
}

.horse-pref-scale__ends {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--muted);
}

.horse-placement-scale {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.horse-placement-token {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 86px;
    padding: 0;
}

.training-placement-scale {
    gap: 6px;
}

.training-placement-token {
    min-height: 52px;
    padding: 4px;
}

.training-placement-token__image {
    width: 42px;
    max-width: 100%;
    height: auto;
}

.training-placement-labels {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.training-placement-labels span {
    font-size: 0.72rem;
}

.horse-placement-token__image {
    display: block;
    width: min(100%, 166px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.22));
}

.horse-placement-labels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.horse-placement-labels span {
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

.panel--genealogy {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(30, 20, 10, 0.68), rgba(20, 14, 9, 0.76)),
        url("../img/ui/horse-genealogy-bg.png") center/cover no-repeat;
}

.panel--genealogy::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(18, 13, 8, 0.32), rgba(18, 13, 8, 0.08) 28%, rgba(18, 13, 8, 0.08) 72%, rgba(18, 13, 8, 0.32)),
        radial-gradient(circle at top left, rgba(255, 227, 168, 0.2), transparent 42%);
    pointer-events: none;
}

.panel--genealogy > * {
    position: relative;
    z-index: 1;
}

.horse-offspring-panel {
    display: grid;
    gap: 16px;
}

.horse-offspring-seasons {
    display: grid;
    gap: 18px;
}

.horse-offspring-season {
    display: grid;
    gap: 10px;
}

.horse-offspring-season__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.horse-offspring-season__header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text);
}

.horse-offspring-season__header span {
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.horse-offspring-table-wrap {
    overflow-x: auto;
}

.horse-offspring-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(52, 37, 20, 0.92), rgba(28, 20, 12, 0.94));
    overflow: hidden;
    /* Sur la fiche d'un etalon, chaque saison a SON tableau. En largeur automatique,
       chacun se dimensionnait sur son propre contenu : les colonnes ne s'alignaient pas
       d'une annee a l'autre et l'oeil ne pouvait plus comparer. Largeurs fixes ci-dessous
       -> tous les tableaux de la page se superposent exactement. */
    table-layout: fixed;
}

/* Cheval | Père (ou père de mère) | Sexe | Âge | Gains | Courses | Victoires | Places.
   Les deux premieres portent des noms, les six autres des valeurs courtes. */
.horse-offspring-table th:nth-child(1),
.horse-offspring-table td:nth-child(1) { width: 22%; }
.horse-offspring-table th:nth-child(2),
.horse-offspring-table td:nth-child(2) { width: 22%; }
.horse-offspring-table th:nth-child(3),
.horse-offspring-table td:nth-child(3) { width: 10%; }
.horse-offspring-table th:nth-child(4),
.horse-offspring-table td:nth-child(4) { width: 8%; }
.horse-offspring-table th:nth-child(5),
.horse-offspring-table td:nth-child(5) { width: 14%; }
.horse-offspring-table th:nth-child(n + 6),
.horse-offspring-table td:nth-child(n + 6) { width: 8%; }

/* PASTILLE « REPRODUCTEUR » dans la liste des produits (♂ etalon / ♀ pouliniere).
   Volontairement discrete : elle accompagne le nom, elle ne le concurrence pas. */
.horse-offspring-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    border-radius: 50%;
    font-size: 0.72rem;
    line-height: 1;
    vertical-align: middle;
}

.horse-offspring-badge--etalon {
    color: #cfe4ff;
    background: rgba(90, 140, 210, 0.22);
    border: 1px solid rgba(150, 190, 240, 0.45);
}

.horse-offspring-badge--pouliniere {
    color: #ffd7e6;
    background: rgba(200, 100, 150, 0.2);
    border: 1px solid rgba(240, 160, 200, 0.45);
}

/* Ancien reproducteur : meme signe, en sourdine — il a fait souche mais n'est plus au pre. */
.horse-offspring-badge.is-past {
    opacity: 0.55;
    border-style: dashed;
}

/* Un nom trop long ne doit plus elargir sa colonne : il se coupe proprement. */
.horse-offspring-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.horse-offspring-table th,
.horse-offspring-table td {
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    white-space: nowrap;
}

.horse-offspring-table th {
    color: rgba(245, 216, 155, 0.82);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(0, 0, 0, 0.12);
}

.horse-offspring-table td {
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.15;
}

.horse-offspring-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.horse-offspring-table tbody tr:last-child td {
    border-bottom: none;
}

.horse-offspring-table__horse-link {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.horse-offspring-table__horse-link:hover,
.horse-offspring-table__horse-link:focus-visible {
    text-decoration: underline;
}

.horse-genealogy {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 6px;
}

.horse-genealogy__generation {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.horse-genealogy__generation-header {
    display: grid;
    gap: 2px;
}

.horse-genealogy__generation-header span {
    color: rgba(245, 216, 155, 0.72);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.horse-genealogy__generation-header strong {
    color: var(--text);
    font-size: 0.94rem;
}

.horse-genealogy__cards {
    display: flex;
    flex-direction: column;
    min-height: 822px;
    gap: 10px;
}

.horse-genealogy__generation--1 .horse-genealogy__cards {
    padding-top: 322px;
}

.horse-genealogy__generation--2 .horse-genealogy__cards {
    padding-top: 129px;
    gap: 297px;
}

.horse-genealogy__generation--3 .horse-genealogy__cards {
    padding-top: 32px;
    gap: 104px;
}

.horse-genealogy__generation--4 .horse-genealogy__cards {
    padding-top: 0;
    gap: 10px;
}

.horse-genealogy-card {
    display: grid;
    gap: 4px;
    min-height: 79px;
    flex: 0 0 79px;
    align-content: start;
    padding: 7px 10px 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(46, 33, 18, 0.9), rgba(25, 19, 11, 0.92));
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18);
}

.horse-genealogy-card.is-root {
    background: linear-gradient(180deg, rgba(90, 65, 24, 0.92), rgba(43, 30, 14, 0.94));
    border-color: rgba(245, 216, 155, 0.22);
}

.horse-genealogy-card.is-partial {
    border-style: dashed;
}

.horse-genealogy-card.is-empty {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(34, 25, 15, 0.62), rgba(20, 15, 10, 0.7));
}

.horse-genealogy-card__role {
    color: rgba(245, 216, 155, 0.78);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.horse-genealogy-card__body {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.horse-genealogy-card__avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(180deg, #7b5b2b, #35230f);
}

.horse-genealogy-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.horse-genealogy-card__avatar.is-placeholder {
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(78, 57, 29, 0.6), rgba(38, 28, 17, 0.8));
    color: rgba(245, 216, 155, 0.6);
    font-family: "Cinzel", serif;
    font-size: 1.15rem;
}

.horse-genealogy-card__content {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.horse-genealogy-card__name {
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.15;
    text-decoration: none;
}

a.horse-genealogy-card__name:hover {
    color: var(--gold-soft);
}

.horse-genealogy-card__meta,
.horse-genealogy-card__empty {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.05;
}

.horse-genealogy-card__meta.is-placeholder {
    opacity: 0;
}

@media (max-width: 1080px) {
    .horse-sheet-hero,
    .horse-sheet-layout,
    .training-overview,
    .training-overview__top,
    .training-plan-layout,
    .horse-sheet-grid {
        grid-template-columns: 1fr;
    }

    .horse-genealogy {
        grid-template-columns: repeat(4, minmax(190px, 1fr));
    }

    .horse-genealogy__generation--1 .horse-genealogy__cards,
    .horse-genealogy__generation--2 .horse-genealogy__cards,
    .horse-genealogy__generation--3 .horse-genealogy__cards,
    .horse-genealogy__generation--4 .horse-genealogy__cards {
        min-height: 0;
        padding-top: 0;
    }

    .horse-genealogy__cards {
        gap: 10px;
    }

    .horse-sheet-hero__portrait-card {
        grid-template-columns: 180px minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .horse-sheet-hero__portrait-card {
        grid-template-columns: 1fr;
    }

    .horse-sheet-hero__portrait {
        min-height: 220px;
    }

    .horse-placement-scale,
    .horse-placement-labels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .horse-genealogy {
        grid-template-columns: 1fr;
    }

    .horse-sheet-data div,
    .horse-attribute-row,
    .horse-attribute-row--small {
        grid-template-columns: 1fr;
    }

    .horse-attribute-row strong {
        text-align: left;
    }

    .training-profile-course .horse-attribute-row__value,
    .training-profile-course .horse-attribute-row__meta {
        text-align: left;
    }
}

.meter {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 0.82rem;
    color: var(--muted);
}

.meter__track,
.attribute-row__bar {
    position: relative;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.meter__value,
.attribute-row__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--olive), var(--olive-bright));
}

.panel-button {
    width: 100%;
    margin-top: 14px;
}

.panel-button--accent {
    margin-top: 22px;
}

.horse-profile p,
.session-card p,
.zone-card p,
.progress-card p,
.next-steps,
.chart-legend,
.content-grid p {
    color: var(--muted);
}

.stats-list {
    margin: 0;
    display: grid;
    gap: 10px;
}

.stats-list div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tabs__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
}

.tabs__item.is-active {
    color: #fff;
    background: rgba(141, 163, 45, 0.18);
}

.feature-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 18px;
}

.horse-stage {
    padding: 14px;
    border-radius: 16px;
    background: rgba(143, 167, 49, 0.08);
    border: 1px solid rgba(143, 167, 49, 0.15);
}

.horse-stage__badge {
    display: inline-grid;
    gap: 2px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
}

.horse-stage__visual {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(122, 168, 197, 0.7), rgba(110, 161, 114, 0.15) 52%, rgba(74, 101, 27, 0.75) 53%, rgba(68, 86, 25, 0.96) 100%);
}

.horse-stage__visual--portrait {
    display: grid;
    place-items: center;
}

.horse-stage__sun {
    position: absolute;
    top: 28px;
    right: 48px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 223, 160, 0.92), rgba(255, 223, 160, 0.15) 70%, transparent 72%);
}

.horse-stage__track {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 38px;
    height: 74px;
    border-radius: 50%;
    border: 8px solid rgba(213, 168, 94, 0.55);
    transform: rotate(-5deg);
}

.horse-stage__horse {
    position: absolute;
    left: 50%;
    bottom: 64px;
    width: 220px;
    height: 140px;
    transform: translateX(-50%);
}

.horse-stage__portrait {
    position: relative;
    z-index: 1;
    width: min(250px, 62%);
    max-height: 240px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
}

.horse-body,
.horse-head,
.horse-leg {
    position: absolute;
    display: block;
    background: linear-gradient(180deg, #24170e, #040302);
}

.horse-body {
    left: 52px;
    top: 34px;
    width: 120px;
    height: 52px;
    border-radius: 44px 46px 32px 26px;
}

.horse-head {
    left: 140px;
    top: 12px;
    width: 52px;
    height: 28px;
    border-radius: 18px 24px 12px 10px;
    transform: rotate(-18deg);
    box-shadow: -16px 12px 0 10px #090705;
}

.horse-leg {
    top: 82px;
    width: 12px;
    height: 58px;
    border-radius: 10px;
}

.horse-leg--front {
    left: 76px;
    transform: rotate(12deg);
    box-shadow: 58px 4px 0 0 #060403;
}

.horse-leg--back {
    left: 112px;
    transform: rotate(-7deg);
    box-shadow: 52px -2px 0 0 #090604;
}

.horse-stage__footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    color: var(--muted);
}

.attributes-card {
    padding: 18px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(214, 179, 95, 0.12);
}

.attribute-row {
    display: grid;
    grid-template-columns: 92px 1fr 32px;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    font-size: 0.95rem;
}

.star-rating {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--gold-soft);
}

.zone-grid,
.session-grid,
.planning-grid {
    display: grid;
    gap: 12px;
}

.zone-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.session-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.planning-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.zone-card,
.session-card,
.planning-day {
    border-radius: 16px;
    overflow: hidden;
}

.zone-card {
    min-height: 156px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.zone-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.zone-card--1::before {
    background: linear-gradient(180deg, rgba(131, 164, 90, 0.2), rgba(50, 60, 18, 0.7)), radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 24%), linear-gradient(135deg, #758d39, #314314);
}

.zone-card--2::before {
    background: linear-gradient(180deg, rgba(193, 171, 120, 0.18), rgba(76, 55, 26, 0.75)), linear-gradient(135deg, #8f7347, #4c3317);
}

.zone-card--3::before {
    background: linear-gradient(180deg, rgba(110, 159, 91, 0.22), rgba(46, 67, 23, 0.78)), linear-gradient(135deg, #688543, #314018);
}

.zone-card--4::before {
    background: linear-gradient(180deg, rgba(108, 145, 91, 0.18), rgba(44, 57, 28, 0.82)), linear-gradient(135deg, #6d7f46, #283119);
}

.zone-card--5::before {
    background: linear-gradient(180deg, rgba(103, 170, 189, 0.2), rgba(30, 66, 86, 0.8)), linear-gradient(135deg, #5390a5, #24475a);
}

.zone-card__overlay {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    padding: 14px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.65));
}

.zone-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #f4e6c4;
    font-size: 0.85rem;
}

.session-card {
    padding: 16px;
    background: rgba(127, 144, 39, 0.08);
    border: 1px solid rgba(127, 144, 39, 0.14);
}

.planning-day {
    min-height: 88px;
    padding: 14px 10px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.planning-day span {
    display: block;
    margin-bottom: 10px;
    color: var(--gold-soft);
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

.progress-card,
.chart-card {
    padding: 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.meter--large {
    grid-template-columns: auto 1fr auto;
}

.status-good {
    color: #b9dc59;
    font-weight: 700;
    margin-bottom: 4px;
}

.status-note {
    margin: 0;
}

.chart {
    position: relative;
    min-height: 180px;
    border-radius: 12px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 25%, 12.5% 100%;
}

.chart-line {
    position: absolute;
    inset: auto 0 0 0;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.chart-line--one {
    background-image: linear-gradient(135deg, transparent 0 10%, rgba(163, 214, 63, 0.9) 10% 13%, transparent 13% 22%, rgba(163, 214, 63, 0.9) 22% 25%, transparent 25% 36%, rgba(163, 214, 63, 0.9) 36% 39%, transparent 39% 51%, rgba(163, 214, 63, 0.9) 51% 54%, transparent 54% 66%, rgba(163, 214, 63, 0.9) 66% 69%, transparent 69% 82%, rgba(163, 214, 63, 0.9) 82% 85%, transparent 85%);
}

.chart-line--two {
    background-image: linear-gradient(135deg, transparent 0 12%, rgba(96, 164, 228, 0.9) 12% 15%, transparent 15% 24%, rgba(96, 164, 228, 0.9) 24% 27%, transparent 27% 38%, rgba(96, 164, 228, 0.9) 38% 41%, transparent 41% 55%, rgba(96, 164, 228, 0.9) 55% 58%, transparent 58% 71%, rgba(96, 164, 228, 0.9) 71% 74%, transparent 74% 88%, rgba(96, 164, 228, 0.9) 88% 91%, transparent 91%);
}

.chart-line--three {
    background-image: linear-gradient(135deg, transparent 0 18%, rgba(232, 183, 63, 0.9) 18% 21%, transparent 21% 29%, rgba(232, 183, 63, 0.9) 29% 32%, transparent 32% 45%, rgba(232, 183, 63, 0.9) 45% 48%, transparent 48% 62%, rgba(232, 183, 63, 0.9) 62% 65%, transparent 65% 77%, rgba(232, 183, 63, 0.9) 77% 80%, transparent 80%);
}

.chart-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 0.85rem;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.legend-dot--one {
    background: #a3d63f;
}

.legend-dot--two {
    background: #60a4e4;
}

.legend-dot--three {
    background: #e8b73f;
}

.next-steps {
    margin: 0;
    padding-left: 18px;
    line-height: 1.7;
}

.silk-builder {
    position: relative;
}

.silk-builder--compact {
    min-height: 520px;
}

.silk-preview-card {
    position: relative;
    z-index: 2;
    width: 340px;
    max-width: 100%;
}

.silk-preview-card__canvas {
    position: relative;
    min-height: 430px;
    padding: 18px 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(182, 163, 109, 0.26);
    background: linear-gradient(180deg, #f5f2ea 0%, #efebe1 100%);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.silk-preview-card__topline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.silk-preview-card__topline::before {
    content: "";
    width: 18px;
    height: 16px;
    background: linear-gradient(180deg, #b6be51, #8b9531);
    clip-path: polygon(10% 100%, 0 18%, 16% 0, 48% 0, 50% 18%, 52% 0, 84% 0, 100% 18%, 90% 100%);
}

.silk-preview-card__title {
    color: #9ca93b;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.05rem;
}

.silk-paint-toggle {
    position: absolute;
    left: 16px;
    top: 78px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(180deg, #c6c57b, #aeb061);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.14);
    cursor: pointer;
}

.silk-paint-toggle__icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.silk-paint-toggle__icon::before,
.silk-paint-toggle__icon::after {
    content: "";
    position: absolute;
    background: #f7f6f0;
}

.silk-paint-toggle__icon::before {
    left: 2px;
    top: 8px;
    width: 14px;
    height: 3px;
    border-radius: 999px;
    transform: rotate(-45deg);
}

.silk-paint-toggle__icon::after {
    left: 10px;
    top: 2px;
    width: 4px;
    height: 8px;
    border-radius: 2px 2px 0 0;
    transform: rotate(-45deg);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.silk-stage {
    position: relative;
    min-height: 380px;
}

.silk-stage--compact {
    min-height: 280px;
}

.silk-composite {
    position: relative;
    z-index: 1;
    width: min(100%, 320px);
    aspect-ratio: 220 / 190;
    margin: 16px auto 0;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
}

.silk-composite__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.silk-summary {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}

.silk-summary div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(147, 133, 90, 0.08);
    border: 1px solid rgba(125, 109, 64, 0.12);
}

.silk-summary span {
    color: #8f9860;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.76rem;
}

.silk-summary strong {
    color: #4e4938;
    text-align: right;
}

.silk-drawer {
    position: absolute;
    top: 20px;
    left: 278px;
    right: -18px;
    z-index: 4;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(214, 179, 95, 0.16);
    background: linear-gradient(180deg, rgba(47, 34, 17, 0.98), rgba(23, 18, 12, 0.98));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-18px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.silk-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.silk-drawer__header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

.silk-drawer__header h3 {
    margin: 4px 0 0;
    font-family: "Cinzel", serif;
}

.silk-drawer__close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(214, 179, 95, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.silk-controls {
    display: grid;
    gap: 16px;
}

.silk-control-group {
    padding: 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.silk-control-group__header h3 {
    margin: 0;
    font-family: "Cinzel", serif;
}

.silk-control-group__header p {
    margin: 6px 0 0;
    color: var(--muted);
}

.silk-swatch-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.silk-swatch {
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 240, 205, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)),
        rgba(18, 14, 9, 0.92);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.silk-swatch--image {
    background-image: var(--swatch-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78%;
}

.silk-swatch:hover,
.silk-swatch.is-active {
    transform: translateY(-1px);
    border-color: rgba(245, 216, 155, 0.65);
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 245, 220, 0.18);
}

.silk-select-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.silk-select-row label {
    display: grid;
    gap: 8px;
}

.silk-select-row span {
    color: var(--gold-soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.silk-select-row select {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    background: rgba(18, 14, 9, 0.92);
    color: var(--text);
    font: inherit;
}

.stable-profile-card__label,
.stable-profile-table span {
    display: block;
    color: var(--gold-soft);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stable-profile-card strong,
.stable-profile-table strong {
    display: block;
    margin-top: 6px;
}

.stable-profile-card p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.stable-profile-table {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.stable-profile-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 180px;
    gap: 16px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.stable-profile-row__label {
    margin: 0;
}

.stable-profile-row__label--with-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.stable-profile-row__label--with-help > span {
    display: inline;
}

.stable-section-title-with-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stable-section-title-with-help h2 {
    margin: 0;
}

.stable-infinity-symbol {
    display: inline-block;
    font-size: 2rem;
    line-height: 0.7;
    vertical-align: -0.2em;
}

.stable-profile-row__value {
    margin: 0;
    color: var(--text);
}

.stable-help-tooltip {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(88, 58, 21, 0.98), rgba(35, 22, 9, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 238, 195, 0.12);
    color: var(--gold-soft);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    cursor: help;
    vertical-align: middle;
}

.stable-help-tooltip::before,
.stable-help-tooltip::after {
    position: absolute;
    top: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.stable-help-tooltip::before {
    content: attr(data-tooltip);
    left: calc(100% + 12px);
    width: 300px;
    max-width: 300px;
    padding: 10px 12px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(72, 45, 12, 0.45),
        inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    transform: translate(6px, -50%);
    z-index: 20;
}

.stable-help-tooltip::after {
    content: "";
    left: calc(100% + 7px);
    width: 10px;
    height: 10px;
    border-left: 1px solid rgba(236, 194, 105, 0.68);
    border-bottom: 1px solid rgba(236, 194, 105, 0.68);
    background: rgba(27, 18, 8, 0.995);
    transform: translate(6px, -50%) rotate(45deg);
    z-index: 20;
}

.stable-help-tooltip:hover::before,
.stable-help-tooltip:hover::after,
.stable-help-tooltip:focus-visible::before,
.stable-help-tooltip:focus-visible::after {
    opacity: 1;
}

.stable-help-tooltip:hover::before,
.stable-help-tooltip:focus-visible::before {
    transform: translate(0, -50%);
}

.stable-help-tooltip:hover::after,
.stable-help-tooltip:focus-visible::after {
    transform: translate(0, -50%) rotate(45deg);
}

.stable-help-tooltip--multiline::before {
    width: 360px;
    max-width: 360px;
    white-space: pre-line;
}

.stable-profile-row__action {
    justify-self: end;
    min-height: 20px;
    color: var(--muted);
    font-size: 0.92rem;
    text-align: right;
}

.stable-profile-row__action--link {
    color: var(--gold-soft);
    text-decoration: underline;
    text-decoration-color: rgba(245, 216, 155, 0.35);
    text-underline-offset: 3px;
}

.external-training-request-form {
    display: grid;
    gap: 14px;
}

.external-training-request-form__field {
    display: grid;
    gap: 8px;
}

.external-training-request-form__field span {
    color: var(--gold-soft);
    font-size: 0.88rem;
    font-weight: 600;
}

.external-training-request-form__field select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid rgba(236, 194, 105, 0.3);
    border-radius: 12px;
    background: rgba(255, 248, 236, 0.94);
    color: #4f4330;
    font: inherit;
}

.stable-placement-requests-panel {
    margin-top: 22px;
}

.stable-placement-request-list {
    display: grid;
    gap: 14px;
}

.stable-placement-request-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid rgba(236, 194, 105, 0.14);
    border-radius: 18px;
    background: rgba(255, 248, 236, 0.03);
}

.stable-placement-request-card__horse {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.stable-placement-request-card__content {
    display: grid;
    gap: 4px;
}

.stable-placement-request-card__content strong {
    color: var(--text);
}

.stable-placement-request-card__content span,
.stable-placement-note {
    color: var(--muted);
    font-size: 0.9rem;
}

.recruitment-market-card__participants {
    text-align: right;
}

.recruitment-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.recruitment-inline-action {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.82rem;
}

.recruitment-dismiss-form {
    margin-top: 18px;
}

.recruitment-skill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stable-placement-request-card__side {
    display: grid;
    justify-items: end;
    gap: 12px;
}

.stable-placement-request-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.stable-yard-block {
    margin-top: 22px;
    padding: 20px 18px 18px;
    border: 1px solid rgba(214, 179, 95, 0.14);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(236, 194, 105, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(44, 30, 14, 0.96), rgba(18, 13, 7, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 209, 0.05),
        0 12px 28px rgba(0, 0, 0, 0.22);
}

.stable-stats-panel {
    margin-top: 22px;
    padding: 20px 18px 18px;
    border: 1px solid rgba(214, 179, 95, 0.14);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(236, 194, 105, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(40, 28, 14, 0.96), rgba(18, 13, 7, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 209, 0.05),
        0 12px 28px rgba(0, 0, 0, 0.22);
}

.stable-stats-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.stable-stats-split--stacked {
    grid-template-columns: 1fr;
    margin-top: 24px;
}

.stable-stats-split--standalone {
    margin-top: 22px;
}

.stable-stats-split .stable-stats-panel {
    margin-top: 0;
}

.stable-stats-panel__header {
    margin-bottom: 14px;
}

.stable-yard-block__header {
    margin-bottom: 14px;
}

.stable-yard-block__total {
    color: var(--gold-soft);
    font-size: 0.9rem;
    font-weight: 700;
}

/* ============================================================================
   RECAPITULATIF DES BOXES — AFFICHAGE MOBILE UNIQUEMENT.

   Masque par defaut : sur grand ecran, la cour illustree (.stable-yard) reste
   le seul affichage. Le bloc n'apparait que sous 860 px, ou il PREND LA PLACE
   de la cour interne — voir @media (max-width: 860px).

   C'est une regle NEUVE sur un element NEUF : elle ne modifie donc aucun rendu
   existant du bureau.
   ============================================================================ */
.stable-yard-recap {
    display: none;
}

/* ============================================================================
   LIBELLE LONG / LIBELLE COURT.

   ATTENTION A LA SPECIFICITE : ces regles s'ecrivent `span.action-label-...`
   et non `.action-label-...`. Dans le tableau d'informations d'ecurie, la regle
   `.stable-profile-table span` (une classe + un type) impose `display: block` a
   tous les <span> ; une simple classe ne fait pas le poids et les DEUX libelles
   s'affichaient l'un sous l'autre. En qualifiant par le type on egalise, et la
   position plus basse dans le fichier tranche.

   Le CSS ne sait pas reecrire un texte : quand un lien doit se raccourcir sur
   mobile, les DEUX versions sont rendues et l'on masque celle qui ne convient
   pas. Ici, la version courte reste cachee — c'est le grand ecran par defaut ;
   la media query inverse la regle.
   ============================================================================ */
span.action-label-short {
    display: none;
}

/* LES LIBELLES NE SONT PAS DES INTITULES DE COLONNE. Etant des <span>, ils
   heritaient de `.stable-profile-table span` : majuscules, 0,76 rem, dore et
   interlettrage large — le style des libelles de gauche. « MODIFIER » sortait
   donc en capitales quand « Afficher le palmares », simple texte dans son lien,
   restait en minuscules. On annule cet heritage : ces spans ne sont que le
   contenu du lien qui les porte. */
span.action-label-full,
span.action-label-short {
    color: inherit;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.stable-yard {
    position: relative;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(91, 67, 31, 0.12), rgba(20, 15, 9, 0.28)),
        repeating-linear-gradient(
            -35deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 10px,
            transparent 10px,
            transparent 24px
        );
    overflow: visible;
}

.stable-yard::after {
    content: "";
    position: absolute;
    inset: auto 12px 12px 12px;
    height: 28px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.18), transparent 72%);
    filter: blur(10px);
    pointer-events: none;
}

.stable-yard__meta {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    margin-bottom: 14px;
}

.stable-yard__label {
    display: block;
    color: var(--gold-soft);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stable-yard__count {
    display: block;
    margin-top: 6px;
    color: var(--text);
}

.stable-yard__hint {
    max-width: 320px;
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
    text-align: right;
}

.stable-yard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 14px;
    align-items: end;
}

.stable-yard__grid--external {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.stable-box-slot-form {
    display: block;
    margin: 0;
}

.stable-box-slot {
    position: relative;
    display: block;
    min-height: 118px;
    aspect-ratio: 1.1 / 1;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.stable-box-slot:hover,
.stable-box-slot:focus-visible {
    transform: translateY(-4px);
    filter: brightness(1.05);
}

.stable-box-slot::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 2px;
    height: 16px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.28), transparent 72%);
    filter: blur(6px);
}

.stable-box-slot__roof,
.stable-box-slot__side,
.stable-box-slot__front,
.stable-box-slot__door,
.stable-box-slot__opening,
.stable-box-slot__window,
.stable-box-slot__horse-head {
    position: absolute;
    display: block;
}

.stable-box-slot__roof {
    inset: 8% 12% 50% 10%;
    border-radius: 6px;
    clip-path: polygon(0 70%, 26% 12%, 100% 12%, 100% 54%, 74% 82%);
    background:
        linear-gradient(180deg, rgba(255, 221, 161, 0.3), transparent 30%),
        linear-gradient(135deg, #b77529, #915716 54%, #704113);
    box-shadow:
        inset 0 2px 0 rgba(255, 238, 202, 0.28),
        0 8px 16px rgba(0, 0, 0, 0.18);
}

.stable-box-slot__roof::before {
    content: "";
    position: absolute;
    inset: 12% 8% 16% 10%;
    clip-path: inherit;
    background:
        linear-gradient(90deg, rgba(255, 232, 189, 0.2), transparent 40%),
        repeating-linear-gradient(
            90deg,
            rgba(116, 69, 23, 0.55) 0,
            rgba(116, 69, 23, 0.55) 10px,
            rgba(167, 110, 52, 0.28) 10px,
            rgba(167, 110, 52, 0.28) 16px
        );
}

.stable-box-slot__side {
    inset: 31% 44% 10% 12%;
    clip-path: polygon(0 17%, 30% 0, 100% 0, 100% 100%, 0 82%);
    background:
        linear-gradient(180deg, rgba(255, 235, 198, 0.12), transparent 28%),
        repeating-linear-gradient(
            180deg,
            rgba(164, 106, 41, 0.94) 0,
            rgba(164, 106, 41, 0.94) 7px,
            rgba(145, 88, 28, 0.96) 7px,
            rgba(145, 88, 28, 0.96) 14px
        );
    box-shadow:
        inset 2px 0 0 rgba(255, 231, 185, 0.12),
        inset 0 -2px 0 rgba(77, 42, 13, 0.28);
}

.stable-box-slot__front {
    inset: 31% 10% 10% 48%;
    border-radius: 2px 2px 6px 6px;
    background:
        linear-gradient(180deg, rgba(255, 233, 190, 0.16), transparent 24%),
        repeating-linear-gradient(
            180deg,
            rgba(181, 118, 48, 0.98) 0,
            rgba(181, 118, 48, 0.98) 7px,
            rgba(159, 98, 32, 0.98) 7px,
            rgba(159, 98, 32, 0.98) 14px
        );
    box-shadow:
        inset 2px 0 0 rgba(255, 237, 202, 0.24),
        inset 0 -3px 0 rgba(99, 58, 22, 0.24);
}

.stable-box-slot__door {
    inset: 58% 18% 12% 56%;
    border-radius: 2px 2px 6px 6px;
    background:
        linear-gradient(180deg, rgba(255, 242, 213, 0.08), transparent 18%),
        repeating-linear-gradient(
            90deg,
            rgba(151, 92, 30, 0.94) 0,
            rgba(151, 92, 30, 0.94) 3px,
            rgba(176, 116, 48, 0.96) 3px,
            rgba(176, 116, 48, 0.96) 6px
        );
    border: 1px solid rgba(122, 69, 23, 0.48);
}

.stable-box-slot__door::before,
.stable-box-slot__door::after {
    content: "";
    position: absolute;
    width: 10%;
    height: 10%;
    border-radius: 2px;
    background: linear-gradient(180deg, #dfd8c6, #9d9482);
    box-shadow: 0 0 0 1px rgba(72, 52, 27, 0.28);
}

.stable-box-slot__door::before {
    left: 6%;
    top: 10%;
}

.stable-box-slot__door::after {
    left: 78%;
    top: 44%;
}

.stable-box-slot__opening {
    inset: 38% 20% 42% 55%;
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(42, 24, 9, 0.34), transparent 18%),
        linear-gradient(180deg, rgba(28, 15, 6, 0.98), rgba(12, 7, 3, 0.98));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28);
}

.stable-box-slot__window {
    inset: 40% 12% 46% 78%;
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(26, 16, 7, 0.96), rgba(12, 7, 3, 0.96));
    border: 1px solid rgba(87, 53, 20, 0.42);
}

.stable-box-slot__horse-head {
    inset: 43% 30% 34% 58%;
    opacity: 0;
    transform: translateX(-2px);
}

.stable-box-slot__horse-head::before,
.stable-box-slot__horse-head::after {
    content: "";
    position: absolute;
    background: linear-gradient(180deg, #7b7066, #574d46);
}

.stable-box-slot__horse-head::before {
    inset: 0 24% 10% 0;
    border-radius: 48% 55% 38% 44%;
    transform: rotate(-12deg);
}

.stable-box-slot__horse-head::after {
    top: 8%;
    left: 6%;
    width: 20%;
    height: 26%;
    border-radius: 30% 10% 60% 20%;
    transform: rotate(-30deg);
}

.stable-box-slot--built .stable-box-slot__horse-head {
    opacity: 1;
}

.stable-box-slot--available .stable-box-slot__roof,
.stable-box-slot--available .stable-box-slot__side,
.stable-box-slot--available .stable-box-slot__front,
.stable-box-slot--available .stable-box-slot__door,
.stable-box-slot--available .stable-box-slot__opening,
.stable-box-slot--available .stable-box-slot__window {
    background:
        linear-gradient(135deg, rgba(255, 218, 150, 0.12), rgba(155, 98, 34, 0.05)),
        rgba(73, 51, 23, 0.28);
    border: 2px dashed rgba(245, 216, 155, 0.48);
    box-shadow: none;
}

.stable-box-slot--available::after {
    content: "+";
    position: absolute;
    inset: 10% 0 0 0;
    display: grid;
    place-items: center;
    color: rgba(255, 240, 209, 0.92);
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.stable-box-slot--locked {
    cursor: not-allowed;
    filter: saturate(0.7) brightness(0.86);
}

.stable-box-slot--locked .stable-box-slot__roof,
.stable-box-slot--locked .stable-box-slot__side,
.stable-box-slot--locked .stable-box-slot__front,
.stable-box-slot--locked .stable-box-slot__door,
.stable-box-slot--locked .stable-box-slot__opening,
.stable-box-slot--locked .stable-box-slot__window {
    background:
        linear-gradient(135deg, rgba(131, 111, 80, 0.28), rgba(72, 56, 35, 0.18)),
        rgba(43, 31, 17, 0.42);
    border: 2px solid rgba(198, 171, 121, 0.18);
    box-shadow: none;
}

.stable-box-slot--locked::after {
    content: "plein";
    position: absolute;
    inset: auto 0 8px 0;
    color: rgba(255, 231, 183, 0.74);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.stable-box-slot--external .stable-box-slot__roof {
    background:
        linear-gradient(180deg, rgba(235, 242, 248, 0.24), transparent 30%),
        linear-gradient(135deg, #878d94, #6e757d 54%, #565e67);
}

.stable-box-slot--external .stable-box-slot__side {
    background:
        linear-gradient(180deg, rgba(255, 238, 210, 0.08), transparent 26%),
        repeating-linear-gradient(
            180deg,
            rgba(160, 108, 52, 0.9) 0,
            rgba(160, 108, 52, 0.9) 7px,
            rgba(138, 88, 37, 0.92) 7px,
            rgba(138, 88, 37, 0.92) 14px
        );
}

.stable-box-slot--external.stable-box-slot--available .stable-box-slot__roof,
.stable-box-slot--external.stable-box-slot--available .stable-box-slot__side,
.stable-box-slot--external.stable-box-slot--available .stable-box-slot__front,
.stable-box-slot--external.stable-box-slot--available .stable-box-slot__door,
.stable-box-slot--external.stable-box-slot--available .stable-box-slot__opening,
.stable-box-slot--external.stable-box-slot--available .stable-box-slot__window {
    background:
        linear-gradient(135deg, rgba(224, 231, 239, 0.1), rgba(117, 129, 145, 0.05)),
        rgba(60, 53, 42, 0.28);
    border-color: rgba(213, 224, 238, 0.46);
}

/* Image-driven stable visuals */
.stable-yard {
    background:
        linear-gradient(180deg, rgba(32, 22, 11, 0.34), rgba(15, 10, 5, 0.48)),
        url("../img/stable/stable-yard-scene-farm.png") center center / cover no-repeat;
    border-color: rgba(255, 243, 213, 0.14);
    min-height: 280px;
    box-shadow:
        inset 0 1px 0 rgba(255, 246, 225, 0.08),
        0 14px 26px rgba(0, 0, 0, 0.2);
}

.stable-yard--external {
    margin-top: 14px;
    background:
        linear-gradient(180deg, rgba(24, 26, 28, 0.36), rgba(12, 14, 16, 0.52)),
        url("../img/stable/stable-yard-scene-farm.png") center center / cover no-repeat;
}

.stable-yard__grid {
    display: grid;
    grid-template-columns: repeat(8, 82px);
    justify-content: center;
    align-content: start;
    width: fit-content;
    margin: -68px auto 0 70px;
    padding: 0 18px 8px;
    position: relative;
    z-index: 1;
}

.stable-box-slot-form {
    display: flex;
}

.stable-box-slot-form--next {
    transform: translate(18px, 20px);
}

.stable-yard__grid > *,
.stable-yard__grid--external > * {
    width: 150px;
    margin-left: 0;
    position: relative;
    z-index: 1;
}

.stable-yard__grid > *:nth-child(8n + 1),
.stable-yard__grid--external > *:nth-child(8n + 1) {
    margin-left: 0;
}

.stable-yard__grid > *:nth-child(8n + 1),
.stable-yard__grid--external > *:nth-child(8n + 1) {
    z-index: 8;
}

.stable-yard__grid > *:nth-child(8n + 2),
.stable-yard__grid--external > *:nth-child(8n + 2) {
    z-index: 7;
}

.stable-yard__grid > *:nth-child(8n + 3),
.stable-yard__grid--external > *:nth-child(8n + 3) {
    z-index: 6;
}

.stable-yard__grid > *:nth-child(8n + 4),
.stable-yard__grid--external > *:nth-child(8n + 4) {
    z-index: 5;
}

.stable-yard__grid > *:nth-child(8n + 5),
.stable-yard__grid--external > *:nth-child(8n + 5) {
    z-index: 4;
}

.stable-yard__grid > *:nth-child(8n + 6),
.stable-yard__grid--external > *:nth-child(8n + 6) {
    z-index: 3;
}

.stable-yard__grid > *:nth-child(8n + 7),
.stable-yard__grid--external > *:nth-child(8n + 7) {
    z-index: 2;
}

.stable-yard__grid > *:nth-child(8n),
.stable-yard__grid--external > *:nth-child(8n) {
    z-index: 1;
}

.stable-yard__grid > *:nth-child(n + 9),
.stable-yard__grid--external > *:nth-child(n + 9) {
    margin-top: -56px;
}

.stable-box-slot {
    min-height: 204px;
    aspect-ratio: 1 / 1;
    background: url("../img/stable/stable-box-wooden.png") center bottom / 118% auto no-repeat;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.28));
    text-decoration: none;
}

.stable-box-slot::before {
    display: none;
}

.stable-box-slot__roof,
.stable-box-slot__side,
.stable-box-slot__front,
.stable-box-slot__door,
.stable-box-slot__opening,
.stable-box-slot__window,
.stable-box-slot__horse-head {
    display: none;
}

.stable-box-slot__plaque {
    position: absolute;
    left: 50%;
    bottom: 18px;
    max-width: 108px;
    padding: 4px 8px;
    border: 1px solid rgba(146, 104, 50, 0.58);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(240, 214, 164, 0.96), rgba(214, 181, 128, 0.96));
    color: #4d3114;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 247, 225, 0.62);
}

.stable-box-slot--horse-link {
    cursor: pointer;
}

.stable-box-slot--horse-link:hover,
.stable-box-slot--horse-link:focus-visible {
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.34)) brightness(1.02);
}

.stable-box-slot--horse-link::after {
    content: attr(data-horse-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% - 12px);
    min-width: 160px;
    max-width: 190px;
    padding: 7px 10px;
    border: 1px solid rgba(236, 194, 105, 0.48);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(55, 36, 15, 0.96), rgba(18, 12, 5, 0.98));
    color: var(--gold-soft);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    white-space: pre-line;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    z-index: 25;
}

.stable-box-slot--horse-link:hover::after,
.stable-box-slot--horse-link:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.stable-yard__grid--compact {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: min(100%, 700px);
    margin: -18px auto 0;
    gap: 10px;
    padding: 0 8px 8px;
}

.stable-yard__grid--compact > * {
    width: auto;
    margin: 0;
}

.stable-yard__grid--compact > *:nth-child(n) {
    z-index: auto;
}

.stable-yard__grid--compact > *:nth-child(n + 9) {
    margin-top: 0;
}

.stable-box-compact {
    position: relative;
    display: grid;
    gap: 3px;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid rgba(143, 97, 45, 0.46);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(232, 194, 133, 0.96), rgba(191, 143, 84, 0.96)),
        repeating-linear-gradient(
            90deg,
            rgba(156, 104, 51, 0.16) 0,
            rgba(156, 104, 51, 0.16) 8px,
            rgba(222, 183, 126, 0.08) 8px,
            rgba(222, 183, 126, 0.08) 16px
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 243, 215, 0.5),
        0 8px 14px rgba(0, 0, 0, 0.18);
    color: #4d3114;
    text-decoration: none;
}

.stable-box-compact__slot {
    color: rgba(77, 49, 20, 0.74);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stable-box-compact__name {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.stable-box-compact--horse-link {
    cursor: pointer;
}

.stable-box-compact--horse-link::after {
    content: attr(data-horse-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    min-width: 160px;
    max-width: 190px;
    padding: 7px 10px;
    border: 1px solid rgba(236, 194, 105, 0.48);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(55, 36, 15, 0.96), rgba(18, 12, 5, 0.98));
    color: var(--gold-soft);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    white-space: pre-line;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    z-index: 25;
}

.stable-box-compact--horse-link:hover::after,
.stable-box-compact--horse-link:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.stable-box-compact--available {
    border-style: dashed;
    background:
        linear-gradient(180deg, rgba(237, 204, 150, 0.72), rgba(178, 139, 92, 0.62)),
        rgba(191, 143, 84, 0.9);
}

.stable-box-compact--external {
    background:
        linear-gradient(180deg, rgba(227, 216, 196, 0.96), rgba(171, 153, 126, 0.96)),
        rgba(183, 165, 140, 0.92);
    border-color: rgba(122, 113, 95, 0.4);
}

.stable-box-slot-form--compact {
    transform: none;
}

.stable-box-slot--available {
    min-height: 132px;
    aspect-ratio: 1 / 1;
    opacity: 0.72;
    background:
        linear-gradient(180deg, rgba(245, 220, 165, 0.16), rgba(245, 220, 165, 0.04)),
        url("../img/stable/stable-box-wooden.png") center center / 86% auto no-repeat;
    outline: 2px dashed rgba(255, 236, 196, 0.82);
    outline-offset: -8px;
    border-radius: 18px;
}

.stable-box-slot--available:hover,
.stable-box-slot--available:focus-visible {
    opacity: 0.96;
}

.stable-pasture-block {
    margin-top: 22px;
    padding: 20px 18px 18px;
    border: 1px solid rgba(188, 152, 88, 0.14);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(198, 228, 164, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(27, 25, 13, 0.96), rgba(15, 12, 6, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 246, 225, 0.05),
        0 12px 28px rgba(0, 0, 0, 0.22);
}

.stable-pasture-block__header {
    margin-bottom: 14px;
}

.stable-pasture-block__total {
    color: #dfeab5;
    font-size: 0.9rem;
    font-weight: 700;
}

.stable-pasture-yard {
    position: relative;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(35, 52, 20, 0.18), rgba(10, 18, 8, 0.26)),
        url("../img/stable/stable-yard-scene.png") center center / cover no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(247, 255, 228, 0.08),
        0 14px 26px rgba(0, 0, 0, 0.2);
    overflow: visible;
}

.stable-pasture-yard__meta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
}

.stable-pasture-yard__label {
    display: block;
    color: #e4efb8;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stable-pasture-yard__count {
    display: block;
    margin-top: 6px;
    color: #fff8ea;
}

.stable-pasture-yard__hint {
    max-width: 320px;
    margin: 0;
    color: rgba(248, 247, 229, 0.88);
    font-size: 0.88rem;
    line-height: 1.45;
    text-align: right;
}

.stable-pasture-yard__grid {
    --pasture-slot-overlap: 17px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(10, 86px);
    justify-content: start;
    gap: 0;
    width: fit-content;
    margin: -30px 0 0 104px;
    padding: 8px var(--pasture-slot-overlap) 6px 0;
    isolation: isolate;
}

.stable-pasture-yard__grid > * {
    position: relative;
    min-width: 0;
    width: 110px;
    margin-left: 0;
}

.stable-pasture-yard__grid > *:nth-child(10n + 1) {
    left: 0;
    z-index: 10;
}

.stable-pasture-yard__grid > *:nth-child(10n + 2) {
    left: calc(var(--pasture-slot-overlap) * -1);
    z-index: 9;
}

.stable-pasture-yard__grid > *:nth-child(10n + 3) {
    left: calc(var(--pasture-slot-overlap) * -2);
    z-index: 8;
}

.stable-pasture-yard__grid > *:nth-child(10n + 4) {
    left: calc(var(--pasture-slot-overlap) * -3);
    z-index: 7;
}

.stable-pasture-yard__grid > *:nth-child(10n + 5) {
    left: calc(var(--pasture-slot-overlap) * -4);
    z-index: 6;
}

.stable-pasture-yard__grid > *:nth-child(10n + 6) {
    left: calc(var(--pasture-slot-overlap) * -5);
    z-index: 5;
}

.stable-pasture-yard__grid > *:nth-child(10n + 7) {
    left: calc(var(--pasture-slot-overlap) * -6);
    z-index: 4;
}

.stable-pasture-yard__grid > *:nth-child(10n + 8) {
    left: calc(var(--pasture-slot-overlap) * -7);
    z-index: 3;
}

.stable-pasture-yard__grid > *:nth-child(10n + 9) {
    left: calc(var(--pasture-slot-overlap) * -8);
    z-index: 2;
}

.stable-pasture-yard__grid > *:nth-child(10n) {
    left: calc(var(--pasture-slot-overlap) * -9);
    z-index: 1;
}

.stable-pasture-slot,
.stable-pasture-slot:link,
.stable-pasture-slot:visited {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    min-height: 122px;
    width: calc(100% + var(--pasture-slot-overlap));
    max-width: none;
    padding: 14px 8px 12px;
    border: 0;
    background:
        url("../img/stable/pasture-slot-wooden-v3.png") center center / 100% 100% no-repeat;
    color: #553718;
    text-decoration: none;
    cursor: default;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

.stable-pasture-slot--occupied {
    cursor: pointer;
    overflow: visible;
}

.stable-pasture-slot__horse {
    position: absolute;
    left: 50%;
    bottom: 35px;
    width: 96px;
    max-width: 86%;
    transform: translateX(-50%);
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.24));
    pointer-events: none;
    user-select: none;
}

.stable-pasture-slot__badge {
    position: absolute;
    top: 8px;
    left: 50%;
    max-width: 96px;
    padding: 3px 8px;
    border: 1px solid rgba(136, 106, 59, 0.48);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(249, 236, 203, 0.95), rgba(223, 202, 161, 0.95));
    color: #63401d;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}

.stable-pasture-slot--available .stable-pasture-slot__badge {
    max-width: 106px;
    font-size: 0.58rem;
    letter-spacing: 0.02em;
}

.stable-pasture-slot__label {
    position: relative;
    z-index: 1;
    padding: 4px 10px;
    border: 1px solid rgba(141, 107, 52, 0.54);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(245, 225, 189, 0.96), rgba(216, 188, 143, 0.96));
    color: #5f3d1b;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    max-width: 82px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 248, 229, 0.6);
}

.stable-box-slot-form--pasture {
    display: block;
    margin: 0;
    width: 100%;
    overflow: visible;
    transform: translateX(30px);
}

.stable-pasture-slot--available {
    width: calc(100% + var(--pasture-slot-overlap));
    opacity: 0.86;
    cursor: pointer;
}

.stable-pasture-slot--available::after {
    content: "+";
    position: absolute;
    inset: 34px 0 auto;
    text-align: center;
    color: rgba(255, 247, 222, 0.94);
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

.stable-pasture-slot--available .stable-pasture-slot__label {
    background: linear-gradient(180deg, rgba(237, 245, 212, 0.96), rgba(198, 216, 162, 0.96));
    color: #45551f;
}

.stable-pasture-slot--available:hover,
.stable-pasture-slot--available:focus-visible {
    opacity: 1;
    transform: translateY(-3px);
}

.stable-pasture-slot--horse-link {
    cursor: pointer;
}

.stable-pasture-slot--horse-link:hover,
.stable-pasture-slot--horse-link:focus-visible {
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.26)) brightness(1.03);
}

.stable-pasture-slot--horse-link:hover .stable-pasture-slot__horse,
.stable-pasture-slot--horse-link:focus-visible .stable-pasture-slot__horse {
    transform: translateX(-50%) translateY(-2px);
}

.stable-pasture-slot--horse-link::after {
    content: attr(data-horse-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% - 10px);
    min-width: 160px;
    max-width: 190px;
    padding: 7px 10px;
    border: 1px solid rgba(236, 194, 105, 0.48);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(55, 36, 15, 0.96), rgba(18, 12, 5, 0.98));
    color: var(--gold-soft);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    white-space: pre-line;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    z-index: 25;
}

.stable-pasture-slot--horse-link:hover::after,
.stable-pasture-slot--horse-link:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 720px) {
    .stable-pasture-yard__grid {
        --pasture-slot-overlap: 13px;
        grid-template-columns: repeat(4, 78px);
        width: fit-content;
        margin: -40px 0 0 48px;
    }

    .stable-pasture-yard__grid > * {
        width: 94px;
    }

    .stable-box-slot-form--pasture {
        transform: none;
    }

    .stable-pasture-slot__horse {
        width: 82px;
        bottom: 37px;
    }

    .stable-pasture-yard__grid > *:nth-child(4n + 1) {
        left: 0;
        z-index: 4;
    }

    .stable-pasture-yard__grid > *:nth-child(4n + 2) {
        left: calc(var(--pasture-slot-overlap) * -1);
        z-index: 3;
    }

    .stable-pasture-yard__grid > *:nth-child(4n + 3) {
        left: calc(var(--pasture-slot-overlap) * -2);
        z-index: 2;
    }

    .stable-pasture-yard__grid > *:nth-child(4n) {
        left: calc(var(--pasture-slot-overlap) * -3);
        z-index: 1;
    }
}

.stable-box-slot--available::after {
    inset: auto 0 10px 0;
    width: 42px;
    height: 42px;
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(24, 16, 8, 0.72);
    border: 1px solid rgba(255, 235, 196, 0.56);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.stable-box-slot--locked {
    opacity: 0.45;
    filter: grayscale(0.45) saturate(0.72);
}

.stable-box-slot--locked::after {
    inset: auto 0 14px 0;
    font-size: 0.7rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.stable-stats-block {
    margin-top: 16px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.stable-stats-table-wrap {
    overflow-x: auto;
}

.stable-stats-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.stable-stats-table th,
.stable-stats-table td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.stable-stats-table th:first-child,
.stable-stats-table td:first-child {
    text-align: left;
}

.stable-stats-table th {
    color: var(--gold-soft);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.stable-stats-table td {
    color: var(--text);
}

.stable-stats-earnings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.stable-stats-earnings__icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
    clip-path: circle(41% at 50% 50%);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

.stable-stats-table tbody tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.025);
}

@media (max-width: 1180px) {
    .breeding-layout {
        grid-template-columns: 1fr;
    }

    /* ------------------------------------------------------------------
       ORDRE DES BLOCS UNE FOIS EMPILES : on choisit AVANT de composer.

       Au bureau, les trois colonnes se lisent d'un coup d'oeil : etalons a
       gauche, planificateur au centre, poulinieres a droite. Empilees, elles
       se lisent dans l'ordre du document — et le planificateur se retrouvait
       AVANT les poulinieres, donc avant d'avoir de quoi le remplir. On remet
       les deux listes de selection en tete, le planificateur en dernier.

       AU PASSAGE, UN DEFAUT CORRIGE : seul `--right` voyait son `grid-column`
       neutralise ici. `--left` gardait `grid-column: 1` et surtout `--center`
       gardait `grid-column: 2` — dans une grille qui n'a plus qu'UNE colonne
       explicite, cela creait une seconde colonne implicite et decalait le bloc
       central vers la droite. Les trois sont desormais remis en `auto`.
       ------------------------------------------------------------------ */
    .breeding-column--left,
    .breeding-column--center,
    .breeding-column--right {
        grid-column: auto;
    }

    .breeding-column--left {
        order: 1;
    }

    .breeding-column--right {
        order: 2;
    }

    .breeding-column--center {
        order: 3;
    }

    .breeding-planner {
        grid-template-columns: 1fr;
    }

    .breeding-confirm-genealogy--pedigree {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 12px;
    }

    .breeding-confirm-genealogy__column {
        display: grid;
        gap: 12px;
    }

    .breeding-confirm-genealogy__link-column {
        display: none;
    }

    .breeding-confirm-genealogy__branch,
    .breeding-confirm-genealogy__pair {
        display: grid;
        gap: 12px;
    }

    .breeding-confirm-genealogy-card--slot-foal,
    .breeding-confirm-genealogy-card--slot-sire,
    .breeding-confirm-genealogy-card--slot-dam,
    .breeding-confirm-genealogy-card--slot-ss,
    .breeding-confirm-genealogy-card--slot-sd,
    .breeding-confirm-genealogy-card--slot-ds,
    .breeding-confirm-genealogy-card--slot-dd,
    .breeding-confirm-genealogy-card--slot-sss,
    .breeding-confirm-genealogy-card--slot-ssd,
    .breeding-confirm-genealogy-card--slot-sds,
    .breeding-confirm-genealogy-card--slot-sdd,
    .breeding-confirm-genealogy-card--slot-dss,
    .breeding-confirm-genealogy-card--slot-dsd,
    .breeding-confirm-genealogy-card--slot-dds,
    .breeding-confirm-genealogy-card--slot-ddd {
        grid-column: auto;
        grid-row: auto;
    }

    .breeding-gestation-card__top,
    .breeding-gestation-card__grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .breeding-column--left,
    .breeding-column--center,
    .breeding-column--right {
        grid-column: auto;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .auth-shell,
    .content-grid,
    .zone-grid,
    .session-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stable-overview-grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .stable-left-column,
    .silk-builder-panel,
    .stable-advice-panel {
        width: 100%;
        max-width: none;
    }

    .stable-horse-list {
        grid-template-columns: 1fr;
    }

    .stable-horses-grid {
        grid-template-columns: 1fr;
    }

    .planning-grid,
    .feature-layout {
        grid-template-columns: 1fr;
    }

    .stable-profile-row {
        grid-template-columns: 130px minmax(0, 1fr) 150px;
    }

    .stable-yard__meta {
        align-items: start;
        flex-direction: column;
    }

    .stable-yard__hint {
        max-width: none;
        text-align: left;
    }

    .stable-silk {
        width: 100%;
        min-height: 292px;
        overflow: hidden;
        transition: min-height 0.34s ease;
    }

    .stable-silk.is-mobile-open {
        min-height: 980px;
    }

    .stable-silk__iframe {
        position: absolute;
        top: 42px;
        left: 0;
        width: 100%;
        height: 250px;
        margin-left: 0;
        transition: height 0.34s ease;
    }

    .stable-silk__iframe.is-open {
        width: 100%;
        height: 940px;
    }
}

@media (max-width: 860px) {
    .site-shell {
        width: min(100% - 16px, 1440px);
        margin-top: 8px;
    }

    /* ------------------------------------------------------------------
       LE TABLEAU DE STATISTIQUES DEFORMAIT TOUTE LA PAGE ECURIE.

       `.stable-stats-table` porte `min-width: 620px`. Sur un telephone de
       370 px, ce minimum ne reste pas dans son coin : un element de grille a
       pour minimum automatique la largeur minimale de son contenu. La piste
       `1fr` passait donc a 692 px, le document devenait plus large que
       l'ecran, et le navigateur affichait la page entiere en zoom arriere —
       bandeau et panneaux compris, reduits a 53 % de la largeur utile.

       Le `overflow-x: auto` du conteneur, lui, etait bien la : il n'a jamais
       eu l'occasion de defiler, faute d'avoir ete contraint a retrecir.

       On rend donc leur droit au retrecissement aux elements de la chaine
       (min-width: 0), puis on COMPACTE le tableau au lieu de le faire
       defiler : sur un ecran de telephone, un tableau qui glisse sous le
       doigt se lit mal. C'est la recette deja appliquee a la fiche cheval
       (.horse-stats-table), qui avait rencontre le meme mur.
       ------------------------------------------------------------------ */
    .stable-overview-grid > *,
    .stable-stats-split > *,
    .stable-stats-panel,
    .stable-stats-block,
    .stable-stats-table-wrap {
        min-width: 0;
    }

    .stable-stats-table {
        min-width: 0;
        table-layout: fixed;
        width: 100%;
    }

    /* LARGEURS PAR COLONNE, ET NON SIX PARTS EGALES. `table-layout: fixed`
       partage par defaut la largeur en parts identiques : la periode
       (« Annee en cours ») etouffait dans la meme case qu'un « 1 ». On donne
       donc a chaque colonne ce que son contenu demande vraiment.
       Ordre des colonnes : periode, courues/montes, victoires, places, gains,
       classement. */
    .stable-stats-table th:nth-child(1),
    .stable-stats-table td:nth-child(1) { width: 27%; }
    .stable-stats-table th:nth-child(2),
    .stable-stats-table td:nth-child(2),
    .stable-stats-table th:nth-child(3),
    .stable-stats-table td:nth-child(3),
    .stable-stats-table th:nth-child(4),
    .stable-stats-table td:nth-child(4) { width: 11%; }
    .stable-stats-table th:nth-child(5),
    .stable-stats-table td:nth-child(5) { width: 26%; }
    .stable-stats-table th:nth-child(6),
    .stable-stats-table td:nth-child(6) { width: 14%; }

    .stable-stats-table th,
    .stable-stats-table td {
        padding: 6px 3px;
    }

    /* Les en-tetes sont de longs mots uniques (« Classement », « Victoires »)
       dans des colonnes etroites : on les autorise a se couper avec un trait
       d'union plutot qu'a deborder. `hyphens` a besoin de la langue, declaree
       sur <html lang="fr">. */
    .stable-stats-table th {
        font-size: 0.5rem;
        letter-spacing: 0;
        line-height: 1.15;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    /* LES CHIFFRES NE SE COUPENT JAMAIS. Sans cela, « 11 000 » se lisait
       « 11 / 0 / 0 / 0 » sur quatre lignes : l'espace des milliers est un
       point de coupure comme un autre pour le navigateur. */
    .stable-stats-table td {
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* La periode, elle, est du texte : elle a le droit de passer a la ligne. */
    .stable-stats-table td:nth-child(1) {
        white-space: normal;
        line-height: 1.2;
    }

    /* Le jeton d'Oros est un ornement : dans une colonne de 26 %, il prend la
       place du montant qu'il illustre. Le titre de colonne dit deja « Gains ». */
    .stable-stats-earnings__icon {
        display: none;
    }

    .stable-stats-earnings {
        gap: 0;
    }

    /* ------------------------------------------------------------------
       LE VIDE AU-DESSUS DES TITRES DE STATISTIQUES.

       Il ne venait pas d'une seule regle mais de trois, empilees : les 24 px
       de `.panel__header--spaced`, les 20 px de rembourrage haut du panneau,
       et ses 22 px de marge — pres de 70 px de noir avant le premier mot, sur
       un ecran ou chaque ligne compte. On les ramene a l'essentiel : de quoi
       separer les deux panneaux, rien de plus.
       ------------------------------------------------------------------ */
    /* LES 24 PX DE `.panel__header--spaced`, PARTOUT. Cette classe sert une
       douzaine de fois dans le jeu (tableau de bord, ecurie, fiche cheval) et
       ajoute a chaque fois une respiration pensee pour le grand ecran. Sur
       mobile elle s'ajoute au rembourrage du panneau ET a sa marge : on la
       ramene a zero une fois pour toutes, plutot que bloc par bloc. */
    .panel__header--spaced {
        margin-top: 0;
    }

    .stable-stats-panel,
    .stable-yard-block,
    .stable-pasture-block {
        margin-top: 12px;
        padding: 12px 12px 14px;
    }

    .stable-stats-panel__header.panel__header--spaced,
    .stable-yard-block__header.panel__header--spaced,
    .stable-pasture-block__header.panel__header--spaced {
        margin-bottom: 8px;
    }

    .stable-stats-panel .panel__header h2 {
        font-size: 1.05rem;
        line-height: 1.12;
    }

    /* Le lien debordait du panneau : il garde `white-space: nowrap` — le
       couper en « Afficher le / palmares » serait pire — mais assez petit
       pour tenir a cote d'un titre sur deux lignes. */
    .stable-stats-panel__record-link {
        font-size: 0.66rem;
    }

    .stable-stats-panel .panel__header {
        gap: 8px;
        align-items: start;
    }

    /* ------------------------------------------------------------------
       LES BOXES : UN TABLEAU A LA PLACE DE LA COUR DESSINEE.

       La cour interne aligne un box illustre par cheval. Sur un telephone,
       cela donnait trois colonnes tronquees et un defilement sans fin pour
       une information qui tient en six lignes. On echange donc les deux :
       la cour disparait, le recapitulatif prend sa place.

       Les TROIS enclos sont concernes : les deux cours de boxes et la prairie.
       ------------------------------------------------------------------ */
    .stable-yard--internal,
    .stable-yard--external,
    .stable-pasture-yard {
        display: none;
    }

    .stable-yard-recap {
        display: block;
        margin-top: 12px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(91, 67, 31, 0.14), rgba(20, 15, 9, 0.3));
    }

    .stable-yard-recap__table {
        width: 100%;
        border-collapse: collapse;
    }

    .stable-yard-recap__table th,
    .stable-yard-recap__table td {
        padding: 7px 2px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        font-size: 0.82rem;
        font-weight: 500;
        text-align: left;
    }

    .stable-yard-recap__table td {
        width: 4.5rem;
        text-align: right;
        white-space: nowrap;
    }

    /* Les postes de detail sont subordonnes a « Occupes » : le retrait et la
       nuance disent la hierarchie mieux qu'un titre intermediaire. */
    .stable-yard-recap__detail th {
        padding-left: 14px;
        color: var(--muted);
        font-size: 0.76rem;
        font-weight: 400;
    }

    .stable-yard-recap__detail td {
        color: var(--muted);
        font-size: 0.76rem;
    }

    .stable-yard-recap__free th,
    .stable-yard-recap__free td {
        border-bottom: 0;
        color: var(--gold-soft);
        font-weight: 700;
    }

    .stable-yard-recap__action {
        margin-top: 12px;
    }

    .stable-yard-recap__action .action-button {
        width: 100%;
    }

    .stable-yard-recap__hint {
        margin: 8px 0 0;
        color: var(--muted);
        font-size: 0.74rem;
        line-height: 1.35;
    }

    /* ------------------------------------------------------------------
       LE CHEVAL PLACE ET SON BOUTON DE REPRISE : UNE SEULE CARTE.

       L'enveloppe reprend corps (elle est en `display: contents` sur grand
       ecran, donc invisible). On soude ensuite les deux morceaux : la ligne
       perd son bord et ses arrondis du bas, le bloc d'action reprend le
       meme fond et ferme la carte. Sans cela, le bouton semblait flotter
       entre deux chevaux — et on ne savait plus lequel il reprendrait.
       ------------------------------------------------------------------ */
    .horse-list__entry {
        display: block;
        border-radius: 14px;
        background: rgba(127, 144, 39, 0.08);
        border: 1px solid rgba(127, 144, 39, 0.14);
    }

    .horse-list__entry .horse-list__item {
        border: 0;
        border-radius: 14px 14px 0 0;
        background: transparent;
    }

    /* Le bloc d'action ne porte plus sa marge negative : il n'est plus un
       voisin qu'il fallait rapprocher, il est a l'interieur. */
    .horse-list__entry .stable-placement-actions {
        margin: 0;
        padding: 0 12px 12px;
        justify-content: stretch;
    }

    /* Bouton pleine largeur : sur un telephone, une cible au pouce vaut mieux
       qu'un bouton aligne a droite. */
    .horse-list__entry .stable-placement-actions form,
    .horse-list__entry .stable-placement-actions .action-button {
        width: 100%;
    }

    .horse-list__entry .stable-placement-note {
        text-align: left;
    }

    /* ------------------------------------------------------------------
       INFORMATIONS D'ECURIE : UNE LIGNE PAR INFORMATION.

       La grille de trois colonnes (libelle | valeur | action) devenait, en
       dessous de 640 px, trois LIGNES empilees : le libelle, puis la valeur,
       puis le lien — trois lignes pour lire « Entraîneur : Laurent Tardif ».

       On passe donc en flex : le libelle et sa valeur se suivent sur une
       meme ligne, et l'action seule bascule dessous. Le `flex-wrap` protege
       les valeurs longues, qui reviendront a la ligne plutot que de deborder.
       ------------------------------------------------------------------ */
    .stable-profile-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
    }

    .stable-profile-row__label,
    .stable-profile-row__value {
        margin: 0;
    }

    .stable-profile-row__value {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Le deux-points est pose par le style, pas par le texte : les libelles
       restent utilisables ailleurs sans lui. Sur les libelles a infobulle,
       il se glisse APRES le mot et AVANT le « ? » grace a `order` — sinon on
       lisait « Statut ? : ». */
    .stable-profile-row__label:not(.stable-profile-row__label--with-help)::after,
    .stable-profile-row__label--with-help > span:first-child::after {
        content: ' :';
    }

    .stable-profile-row__label--with-help {
        white-space: normal;
    }

    .stable-profile-row__label--with-help > span:first-child {
        order: 1;
    }

    .stable-profile-row__label--with-help > .stable-help-tooltip {
        order: 2;
    }

    /* L'ACTION SUIT LA VALEUR TANT QU'IL Y A LA PLACE.
       Elle etait forcee sur sa propre ligne (`flex-basis: 100%`) : « Modifier »
       restait donc en dessous meme quand il tenait a cote du logo. On la laisse
       au fil du texte — `flex-wrap` la renverra a la ligne d'elle-meme, et
       seulement si necessaire. */
    .stable-profile-row__action {
        flex: 0 1 auto;
        /* CALEE A DROITE, QUELLE QUE SOIT LA LIGNE. Sur la ligne « Abonnement »,
           c'est la valeur qui pousse le lien au bord en occupant l'espace libre ;
           les lignes « Palmares eleveur » et « Achats / ventes » n'ont pas de
           valeur affichee, leur lien collait donc au libelle. `margin-left: auto`
           mange l'espace restant dans les deux cas — et fonctionne aussi bien
           quand le lien est passe a la ligne suivante. */
        margin-left: auto;
    }

    .stable-profile-row__action:empty {
        display: none;
    }

    /* DEUX LIGNES N'ONT PAS DE VRAIE VALEUR : « Palmarès éleveur » et
       « Achats / ventes » affichent « Consulter les performances » et
       « Consulter l'historique », qui ne disent rien de plus que le lien
       juste apres. Sur grand ecran ils remplissent la colonne du milieu ;
       sur mobile ils coutent une ligne pour rien. On les efface, et le lien
       remonte a cote du libelle. */
    .stable-profile-row--link-only .stable-profile-row__value {
        display: none;
    }

    /* Interlignes resserres : ces informations se lisent d'un bloc, pas une
       par une. On gagne pres d'un tiers de la hauteur du panneau. */
    .stable-profile-table {
        gap: 6px;
        margin-top: 10px;
        padding-top: 10px;
    }

    .stable-profile-row {
        padding-bottom: 6px;
    }

    /* ------------------------------------------------------------------
       LES INFOBULLES « ? » DISPARAISSENT SUR MOBILE.

       Elles s'ouvrent en position absolue a droite de leur badge, largeur
       fixe : sur un ecran de 370 px, la bulle sort de l'ecran. Et elles
       reposent sur le SURVOL, geste qui n'existe pas au doigt — un appui
       les ouvre par `:focus-visible`, mais sans moyen evident de les fermer.

       On retire donc le badge lui-meme, pas seulement la bulle : un « ? »
       qui ne repond pas est pire que pas de « ? » du tout.
       ------------------------------------------------------------------ */
    .stable-help-tooltip {
        display: none;
    }

    /* Le libelle n'a plus de badge a cadrer : il redevient du texte simple. */
    .stable-profile-row__label--with-help,
    .stable-section-title-with-help {
        display: inline;
    }

    /* Le logo Premium / Infinite passe de 34 a 22 px : c'est lui qui poussait
       le lien a la ligne suivante. Reduit, la valeur et son action tiennent
       ensemble — « Abonnement : [logo] Modifier ». */
    .stable-trainer-status__logo {
        height: 22px;
    }

    /* Les liens passent a leur libelle court : « Modifier » plutot que
       « Modifier l'abonnement », qui ne tenait pas a cote de son libelle. */
    span.action-label-full {
        display: none;
    }

    span.action-label-short {
        display: inline;
    }

    /* ------------------------------------------------------------------
       BANDEAU MOBILE — SIX RANGEES, DANS CET ORDRE :
         1. le logo
         2. le bloc ecurie / licence / oros / credits, pleine largeur
         3. la deconnexion, a droite
         4. la messagerie, a droite
         5. la date et l'heure, a droite
         6. le menu et la recherche, cote a cote

       Les rangees 3 a 5 vivent dans `.topbar__corner`, un bloc qui flotte en
       absolu sur grand ecran : on le remet dans le flux et on empile ses trois
       elements. Seule la derniere rangee se sert des deux colonnes, d'ou
       `auto minmax(0, 1fr)` : le menu prend sa largeur, la recherche le reste.

       ORDRE PAR `order`, PAS PAR `grid-row`. Les placements explicites en
       rangee figeaient la disposition et resistaient au reordonnancement ;
       on les remet a `auto` partout. */
    .topbar {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        border-radius: 18px 18px 0 0;
        padding-top: 14px;
        gap: 10px;
    }

    .topbar__status {
        grid-column: 1 / -1;
        grid-row: auto;
        order: 2;
        width: 100%;
    }

    /* PLEINE LARGEUR JUSQU'AU BOUT DE LA CHAINE. Le bloc, la pastille et la
       liste des quatre informations doivent tous s'etirer : il suffit que l'un
       d'eux garde sa largeur naturelle pour que l'ensemble reste centre et
       etroit, comme avant. */
    .topbar__status .status-block--full,
    .topbar__status .status-pill--stable,
    .topbar__status .status-pill__meta {
        width: 100%;
    }

    /* LES QUATRE INFORMATIONS SUR UNE SEULE RANGEE. Elles tenaient sur deux,
       ce qui coutait une ligne d'ecran pour quatre chiffres courts. En les
       serrant et en reduisant la fonte, la rangee unique passe meme sur les
       ecrans etroits ; l'intitule reste au-dessus de sa valeur. */
    .topbar__status .status-pill__meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0 6px;
    }

    .topbar__status .status-meta-item {
        min-width: 0;
        row-gap: 1px;
    }

    .topbar__status .status-meta-item__label {
        font-size: 0.5rem;
        letter-spacing: 0.04em;
    }

    .topbar__status .status-meta-item__value,
    .topbar__status .currency-inline {
        font-size: 0.72rem;
    }

    .topbar__status .currency-inline__icon {
        width: 11px;
        height: 11px;
    }

    /* RECHERCHE SUR MOBILE : pleine largeur, entre le bloc d'etat et la rangee
       du menu. C'est la position demandee — « au-dessus des menus » — et la
       seule ou le champ reste atteignable au pouce sans deplier le menu. */
    .topbar__search {
        grid-column: 2;
        grid-row: auto;
        order: 5;
        justify-self: stretch;
        width: 100%;
    }

    .menu-toggle {
        display: block;
        grid-column: 1;
        grid-row: auto;
        order: 4;
        justify-self: start;
        align-self: center;
    }

    .main-nav {
        display: none;
        flex-direction: column;
        overflow: hidden;
        padding: 8px;
    }

    .main-nav.is-open {
        display: flex;
    }

    .main-nav__link {
        border-radius: 10px;
    }

    .main-nav__item {
        width: 100%;
    }

    .main-nav__submenu {
        position: static;
        display: none;
        min-width: 0;
        margin-top: 6px;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
    }

    .main-nav__item--has-submenu:hover .main-nav__submenu,
    .main-nav__item--has-submenu.is-active .main-nav__submenu {
        display: none;
    }

    .main-nav__item--has-submenu.is-open .main-nav__submenu {
        display: grid;
    }

    .hero-panel,
    .content-hero,
    .auth-shell,
    .stable-overview-grid,
    .content-grid {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-panel__focus {
        min-width: 0;
    }

    /* TABLEAUX DE RESULTATS SUR MOBILE : sept colonnes ne tiennent pas sur un
       telephone, et un defilement lateral fait manquer des informations. Chaque
       ligne devient donc une fiche, chaque cellule portant son intitule via son
       attribut data-label. */
    .search-table thead {
        display: none;
    }

    .search-table,
    .search-table tbody,
    .search-table tr,
    .search-table td {
        display: block;
        width: 100%;
    }

    .search-table tr {
        margin-bottom: 12px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.18);
    }

    .search-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 5px 0;
        border-bottom: none;
        white-space: normal;
        text-align: left;
    }

    .search-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--muted);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Le nom du cheval ou de l'ecurie ouvre la fiche : c'est le titre de la
       carte, pas une ligne parmi d'autres. */
    .search-table td:first-child {
        margin-bottom: 4px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        font-size: 1.02rem;
        font-weight: 700;
    }

    .search-table td:first-child::before {
        display: none;
    }

    .search-table__origins {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    .search-table__num {
        text-align: left;
    }

    /* UNE SEULE RANGEE : date et heure a gauche, puis la messagerie, puis la
       deconnexion. La pastille de date, poussee a gauche, sert de contrepoids
       aux trois boutons — la rangee est pleine sans etre encombree. */
    .topbar__corner {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        grid-column: 1 / -1;
        grid-row: auto;
        order: 3;
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .topbar__corner .header-notices {
        order: 2;
        flex: 0 0 auto;
    }

    /* LA DECONNEXION DEVIENT UNE ICONE.
       Le mot occupait a lui seul le tiers de la rangee. On le masque en
       annulant sa taille de police — il reste dans le document, donc annonce
       par les lecteurs d'ecran, et `aria-label` le repete — et on affiche un
       symbole d'alimentation a la place. */
    .topbar__logout {
        position: relative;
        order: 3;
        flex: 0 0 auto;
        min-width: 34px;
        min-height: 30px;
        margin-top: 0;
        padding: 6px 9px;
        font-size: 0;
        line-height: 1.1;
        text-align: center;
    }

    .topbar__logout::before {
        content: "⏻";
        font-size: 0.95rem;
        line-height: 1;
    }

    /* L'INFOBULLE S'OUVRE VERS LA GAUCHE. Ancree par son bord droit (`right: 0`),
       elle se deploie vers l'interieur de l'ecran ; ancree a gauche, elle
       sortirait par la droite — le bouton touche deja le bord. */
    .topbar__logout::after {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 30;
        width: max-content;
        max-width: 60vw;
        padding: 6px 10px;
        border: 1px solid rgba(236, 194, 105, 0.68);
        border-radius: 9px;
        background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.99));
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
        color: var(--gold-soft);
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: 0;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.16s ease;
    }

    .topbar__logout:hover::after,
    .topbar__logout:focus-visible::after {
        opacity: 1;
    }

    .brand {
        grid-column: 1 / -1;
        order: 1;
        justify-content: center;
    }

    .brand__logo-wrap {
        width: min(360px, 86vw);
        min-width: 0;
    }

    .status-block {
        justify-content: center;
    }

    .status-block--full {
        gap: 10px;
    }

    .status-pill--stable {
        gap: 12px;
        justify-content: center;
    }

    .status-pill__meta,
    .status-meta-item {
        justify-items: center;
        text-align: center;
    }

    .status-meta-item {
        grid-template-columns: 1fr;
        min-width: 0;
        row-gap: 3px;
    }

    .status-inline {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .status-actions {
        justify-content: center;
    }

    .status-pill {
        min-height: 42px;
        padding: 7px 10px;
    }

    .topbar__status .status-block {
        order: 1;
    }

    .topbar__status .status-inline {
        order: 2;
    }

    .topbar__status .status-actions {
        order: 3;
    }

    .header-notices {
        width: auto;
        justify-content: flex-end;
    }

    /* DATE ET HEURE : UNE SEULE LIGNE, AU GABARIT DES ENVELOPPES.
       « Vendredi 28 aout | 15:36 » se cassait sur deux ou trois lignes et
       gonflait la rangee. On interdit le retour a la ligne, on descend la
       fonte a 0,58 rem et on resserre l'ecart interne de 10 a 5 px. La
       hauteur minimale (30 px) et le rembourrage reprennent ceux des
       enveloppes de messagerie voisines, pour que les trois blocs s'alignent
       exactement. */
    .topbar__datetime {
        order: 1;
        display: inline-flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        min-height: 30px;
        margin-right: auto;
        padding: 4px 9px;
        gap: 5px;
        justify-self: start;
        font-size: 0.58rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* Les trois morceaux heritent de la taille du bloc : sans cela, chacun
       garderait la sienne et la ligne se casserait a nouveau. */
    .topbar__datetime .live-datetime__date,
    .topbar__datetime .live-datetime__separator,
    .topbar__datetime .live-datetime__time {
        font-size: inherit;
    }

    .header-notice {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 0.76rem;
    }

    .header-notice:hover,
    .header-notice:focus-visible {
        width: min(280px, calc(100vw - 42px));
    }

    .topbar__status {
        display: grid;
        gap: 10px;
    }

    /* ==================================================================
       CARTES DE VENTE AUX ENCHERES — VERSION COMPACTE (mobile).

       La carte faisait cinq a six lignes : nom, race/age/sexe, origines sur
       deux lignes, vendeur, puis les prix, le chronometre et le bouton. Avec
       plusieurs dizaines de ventes, la page devenait interminable.

       On la ramene a trois bandes, dans une grille de trois colonnes :
         [ portrait ]  [ nom / signalement / prix + chrono ]  [ bouton ]
       Le portrait et le bouton s'etendent sur toute la hauteur, la colonne
       du milieu porte le texte. RIEN N'EST PERDU : origines et vendeur sont
       ramasses sur la ligne de signalement, tronquee si elle deborde.

       `display: contents` sur le conteneur du cheval : sa boite disparait
       pour que le portrait et le bloc d'identite deviennent enfants directs
       de la grille et puissent etre places separement.
       ================================================================== */
    .sales-card {
        padding: 8px 10px;
    }

    .sales-card__line {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 4px 8px;
        align-items: center;
    }

    .sales-card__horse {
        display: contents;
    }

    .sales-card__avatar {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .sales-card__identity {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 5px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    /* Le nom occupe sa propre ligne ; le reste du signalement se met a la
       suite, separe par des points mediens poses en CSS. */
    .sales-card__identity h3 {
        flex-basis: 100%;
        font-size: 0.78rem;
        line-height: 1.2;
    }

    .sales-card__identity p,
    .sales-card__identity .sales-card__owner {
        font-size: 0.7rem;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Les origines etaient bridees a deux lignes : une seule suffit ici. */
    .sales-card__identity .sales-card__origin {
        display: inline;
        -webkit-line-clamp: none;
        white-space: nowrap;
    }

    .sales-card__identity p + p::before,
    .sales-card__identity .sales-card__owner::before {
        content: "· ";
        color: var(--muted);
    }

    /* Prix et chronometre partagent la troisieme bande, en petits caracteres. */
    /* LES QUATRE PRIX SUR UNE SEULE LIGNE, SANS BULLES.
       Chaque poste etait une pastille : fond, bordure et 7 px de rembourrage,
       empilee sur deux lignes faute de place. En les rendant a du texte simple
       et en supprimant le retour a la ligne, les quatre tiennent d'affilee ;
       si la place manque vraiment, la ligne se tronque au lieu de grandir. */
    /* UNE SEULE BANDE, TOUTE LA LARGEUR. Coincee dans la colonne du milieu,
       elle disputait sa place au signalement et au bouton : les montants se
       chevauchaient. Sous la carte, elle dispose du bord gauche au bord droit
       et les quatre postes s'y rangent sans se marcher dessus. */
    .sales-card__stats {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0 8px;
        min-width: 0;
        margin-top: 2px;
        overflow: hidden;
        font-size: 0.62rem;
    }

    .sales-card__stats > div {
        display: flex;
        align-items: baseline;
        gap: 3px;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        white-space: nowrap;
    }

    .sales-card__stats dt {
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0;
    }

    .sales-card__stats dd {
        margin: 0;
        font-size: 0.64rem;
    }

    /* Le jeton d'Oros est un ornement : a cette taille il vaut une colonne. */
    .sales-card__stats dd img {
        display: none;
    }

    /* LE CHRONO SOUS LE BOUTON. Il accompagne le geste — « il me reste combien
       de temps pour enchérir ? » — et n'a rien a faire au milieu des prix. */
    .sales-card__countdown {
        grid-column: 3;
        grid-row: 2;
        display: block;
        text-align: right;
        line-height: 1.15;
    }

    /* « TEMPS RESTANT » DISPARAIT. Ces deux mots imposaient leur largeur a
       toute la colonne de droite, au detriment du nom et du signalement. Le
       chiffre qui defile se comprend sans legende. */
    .sales-card__countdown span {
        display: none;
    }

    .sales-card__countdown strong {
        font-size: 0.72rem;
    }

    /* LE BOUTON A DROITE, SUR TOUTE LA HAUTEUR. C'est le geste de la page :
       il doit tomber sous le pouce sans chercher. */
    /* LA PASTILLE DE TYPE SE REDUIT A UNE LETTRE.
       « Poulinière » ou « Cheval de course » a cote du nom prenait la moitie
       de la ligne et poussait le nom a la troncature. On masque le libelle en
       annulant sa taille de police et on affiche une initiale a la place :
       P pour poulinière, E pour étalon, C pour cheval de course.

       Le texte reste dans le document — il n'est pas supprime, seulement
       reduit a zero — donc les lecteurs d'ecran continuent de l'annoncer en
       entier. La couleur de chaque type, elle, est conservee. */
    /* SELECTEURS QUALIFIES, ET NON `.sales-type-chip` SEUL.
       La regle de base de la pastille est declaree plus BAS dans le fichier
       (vers la ligne 15240). Or une media query n'ajoute aucun poids : a
       specificite egale, c'est la derniere ecrite qui l'emporte. La taille de
       police revenait donc a 0,66 rem et le libelle restait visible a cote de
       l'initiale — d'ou le « PPOULINIERE » du 28/08/2026.
       Deux classes suffisent a passer devant. */
    .sales-card__identity .sales-type-chip {
        min-width: 1.35rem;
        margin-left: 5px;
        padding: 1px 0;
        font-size: 0;
        letter-spacing: 0;
        text-align: center;
    }

    .sales-card__identity .sales-type-chip::before {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .sales-card__identity .sales-type--pouliniere::before { content: "P"; }
    .sales-card__identity .sales-type--etalon::before     { content: "E"; }
    .sales-card__identity .sales-type--course::before     { content: "C"; }

    /* FORME ET MENTAL DISPARAISSENT DE LA BANDE DE PRIX (tirages).
       La carte de tirage porte cinq postes la ou l'enchere en a quatre :
       valeur, offre, participants, forme, mental. Les deux derniers sont des
       indications de confort, pas des elements de decision d'achat — et ce
       sont eux qui faisaient deborder la bande. Ils restent lisibles sur la
       fiche du cheval. */
    .sales-card__stats--five > div:nth-child(4),
    .sales-card__stats--five > div:nth-child(5) {
        display: none;
    }

    .sales-card__actions {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }

    .sales-card__actions .action-button,
    .sales-card__actions .horse-sheet-choice {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 0.72rem;
        white-space: nowrap;
    }

}

@media (max-width: 640px) {
    .page {
        padding: 14px;
    }

    .brand__logo-wrap {
        width: min(320px, 72vw);
        aspect-ratio: 2.52 / 1;
        min-width: 0;
    }

    .hero-panel,
    .content-hero,
    .panel {
        padding: 16px;
    }

    .content-grid,
    .zone-grid,
    .session-grid {
        grid-template-columns: 1fr;
    }

    .stable-profile-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .stable-yard-block {
        padding: 16px 14px 14px;
    }

    .stable-yard {
        padding: 14px;
    }

    .stable-yard__grid,
    .stable-yard__grid--external {
        display: grid;
        grid-template-columns: repeat(3, 72px);
        width: fit-content;
        margin-top: -56px;
        row-gap: 0;
        padding: 12px 10px 6px;
    }

    .stable-yard__grid > *,
    .stable-yard__grid--external > * {
        width: 104px;
        margin-left: 0;
    }

    .stable-yard__grid > *:nth-child(3n + 1),
    .stable-yard__grid--external > *:nth-child(3n + 1) {
        margin-left: 0;
    }

    .stable-yard__grid > *:nth-child(3n + 1),
    .stable-yard__grid--external > *:nth-child(3n + 1) {
        z-index: 3;
    }

    .stable-yard__grid > *:nth-child(3n + 2),
    .stable-yard__grid--external > *:nth-child(3n + 2) {
        z-index: 2;
    }

    .stable-yard__grid > *:nth-child(3n),
    .stable-yard__grid--external > *:nth-child(3n) {
        z-index: 1;
    }

    .stable-yard__grid > *:nth-child(n + 4),
    .stable-yard__grid--external > *:nth-child(n + 4) {
        margin-top: -42px;
    }

    .stable-box-slot {
        min-height: 156px;
        background-size: 116% auto;
    }

    .stable-box-slot--available {
        min-height: 104px;
        background-size: 82% auto;
    }

    .stable-box-slot-form--next {
        transform: translate(10px, 12px);
    }

    .stable-yard__grid--compact,
    .stable-yard__grid--external.stable-yard__grid--compact {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        margin-top: -20px;
    }

    .stable-profile-row__action {
        justify-self: start;
        text-align: left;
    }

    .stable-placement-request-card {
        grid-template-columns: 1fr;
    }

    .stable-placement-request-card__side {
        justify-items: start;
    }

    .stable-placement-request-card__actions {
        justify-content: flex-start;
    }

    .stable-stats-split {
        grid-template-columns: 1fr;
    }

    .silk-swatch-grid,
    .silk-select-row {
        grid-template-columns: 1fr 1fr;
    }

    .silk-preview-card__canvas {
        min-height: 392px;
    }

    .silk-paint-toggle {
        top: 70px;
    }

    .silk-stage {
        min-height: 320px;
    }

    .planning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .training-planner-grid {
        grid-template-columns: 1fr;
    }

    .attribute-row {
        grid-template-columns: 1fr;
    }

    .horse-stage__visual {
        min-height: 260px;
    }

    .horse-stage__horse {
        transform: translateX(-50%) scale(0.82);
        transform-origin: center bottom;
    }
}

.replay-hero-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.replay-hero-panel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.replay-hero-panel__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    background: rgba(0, 0, 0, 0.14);
    color: var(--gold-soft);
    font-size: 0.82rem;
}

.replay-hero-panel__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.replay-viewer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
    gap: 18px;
}

.replay-viewer-stage-wrap {
    display: grid;
    gap: 14px;
}

.replay-viewer-stage {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border-radius: 24px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    background: #2b1d0d;
    box-shadow: var(--shadow);
}

.replay-viewer-stage__sky {
    display: none;
}

.replay-viewer-stage__embankment {
    display: none;
}

.replay-viewer-stage__track {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
}

.replay-viewer-stage__surface {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: url("../img/replay/texture_h.jpg");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 50%;
    box-shadow: none;
}

.replay-viewer-stage__lane-band {
    position: absolute;
    left: 0;
    right: 0;
    border: 0;
    background: transparent;
}

.replay-viewer-stage__lane-band span {
    position: absolute;
    left: 16px;
    top: 8px;
    color: rgba(255, 246, 221, 0.58);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.replay-viewer-stage__lane-band--inside {
    top: 10%;
    height: 18%;
}

.replay-viewer-stage__lane-band--middle {
    top: 30%;
    height: 22%;
}

.replay-viewer-stage__lane-band--outside {
    top: 54%;
    height: 28%;
}

.replay-viewer-stage__rail {
    display: none;
}

.replay-viewer-stage__rail--inside {
    top: 8%;
}

.replay-viewer-stage__rail--outer {
    top: 82%;
}

.replay-viewer-stage__finish {
    position: absolute;
    top: 7%;
    bottom: 8%;
    left: 88%;
    width: 11px;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(250, 248, 239, 0.95) 0 12px,
            rgba(66, 48, 22, 0.96) 12px 24px
        );
    box-shadow: 0 0 18px rgba(245, 216, 155, 0.22);
    opacity: 0;
    transition: opacity 140ms ease;
}

.replay-viewer-stage__markers {
    position: absolute;
    left: 0;
    right: 0;
    top: 2%;
    height: 10%;
    pointer-events: none;
}

.replay-viewer-stage__marker {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    color: rgba(255, 248, 229, 0.7);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

.replay-viewer-stage__stalls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.replay-viewer-stage__stall {
    position: absolute;
    width: 238px;
    height: 108px;
    transform: translateY(-50%);
}

.replay-viewer-stage__stall img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

.replay-viewer-stage__horses {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.replay-viewer-stage__countdown {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 247, 224, 0.96);
    font-size: 4.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}

.replay-horse {
    position: absolute;
    z-index: 2;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -50%) scale(var(--replay-depth-scale, 1)) rotate(calc(var(--replay-heading-deg, 0) * 1deg));
    transform-origin: center center;
    transition: transform 120ms ease, filter 120ms ease;
    pointer-events: auto;
}

.replay-horse.is-leader {
    filter: drop-shadow(0 0 10px rgba(247, 220, 150, 0.34));
}

.replay-horse.is-finish-drive {
    transform: translate(-50%, -50%) scale(var(--replay-depth-scale, 1)) rotate(calc(var(--replay-heading-deg, 0) * 1deg));
}

.replay-horse.is-breaking {
    filter: saturate(1.05) brightness(1.03);
}

.replay-horse.is-in-stall {
    filter: none;
}

.replay-horse.is-in-stall .replay-horse__shadow {
    opacity: 0;
}

.replay-horse__sprite-wrap {
    position: absolute;
    inset: 0;
    transition: transform 80ms linear;
}

.replay-horse__shadow {
    position: absolute;
    left: 32px;
    right: 12px;
    bottom: 10px;
    height: 10px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.02) 72%);
    transform: skewX(-16deg);
}

.replay-horse__sprite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
    pointer-events: none;
}

.replay-horse__number {
    position: absolute;
    left: 45px;
    top: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: rgba(18, 18, 18, 0.9);
    color: #f8e9bb;
    border: 1px solid rgba(228, 196, 96, 0.9);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
    pointer-events: none;
}

.replay-horse__name {
    display: none;
}

.replay-viewer-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.replay-viewer-controls__speed {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    background: rgba(0, 0, 0, 0.14);
}

.replay-viewer-controls__speed select {
    border: 0;
    background: transparent;
    color: var(--text);
}

.replay-viewer-timeline {
    display: grid;
    gap: 10px;
}

.replay-viewer-timeline__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.replay-viewer-timeline input[type="range"] {
    width: 100%;
}

.replay-sidecard {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(214, 179, 95, 0.14);
    background: linear-gradient(180deg, rgba(46, 33, 16, 0.95), rgba(23, 16, 8, 0.92));
}

.replay-viewer-sidebar {
    display: grid;
    gap: 14px;
}

.replay-sidecard h3 {
    margin: 0 0 14px;
}

.replay-sidecard__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.replay-sidecard__grid span,
.replay-sidecard__event p,
.replay-live-board__horse span {
    color: var(--muted);
    font-size: 0.82rem;
}

.replay-sidecard__grid strong,
.replay-sidecard__event strong {
    display: block;
    margin-top: 4px;
}

.replay-live-board {
    display: grid;
    gap: 8px;
}

.replay-live-board__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.replay-live-board__place {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(214, 179, 95, 0.16);
    color: #fff0c7;
    font-weight: 700;
}

.replay-live-board__horse {
    min-width: 0;
}

.replay-live-board__horse strong,
.replay-live-board__horse span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.replay-results-panel {
    margin-top: 18px;
}

.replay-results-table-wrap {
    overflow-x: auto;
}

.replay-results-table {
    width: 100%;
    border-collapse: collapse;
}

.replay-results-table th,
.replay-results-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(214, 179, 95, 0.12);
    text-align: left;
}

.replay-results-table thead th {
    color: var(--gold-soft);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 1080px) {
    .replay-viewer-layout {
        grid-template-columns: 1fr;
    }

    .replay-hero-panel__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .replay-hero-panel__head {
        flex-direction: column;
    }

    .replay-hero-panel__stats,
    .replay-sidecard__grid {
        grid-template-columns: 1fr;
    }

    .replay-viewer-stage {
        min-height: 380px;
    }

    .replay-horse {
        width: 110px;
        height: 72px;
    }
}

/* ==========================================================================
   Entrainement des jockeys (page entrainement_jockeys)
   ========================================================================== */
.jockey-training-headcard {
    margin-bottom: 16px;
}
.jockey-training-headcard__id {
    display: flex;
    align-items: center;
    gap: 16px;
}
.jockey-training-headcard__avatar,
.horse-sheet-sidebar__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.jockey-training-headcard__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--olive), var(--gold));
    color: var(--bg);
    font-weight: 700;
    font-size: 1.5rem;
}
.jockey-training-headcard__id h2 {
    margin: 0 0 4px;
}

/* Onglets */
.jockey-training-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
}
.jockey-training-tab {
    padding: 9px 16px;
    border-radius: 12px 12px 0 0;
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.94rem;
    transition: background 0.15s, color 0.15s;
}
.jockey-training-tab:hover {
    color: var(--text);
    background: rgba(210, 172, 86, 0.08);
}
.jockey-training-tab.is-active {
    color: var(--gold-soft);
    background: rgba(210, 172, 86, 0.14);
    box-shadow: inset 0 -2px 0 var(--gold);
}

/* Barres de criteres */
.jockey-crit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px 22px;
}
.jockey-crit-list {
    display: grid;
    gap: 14px;
}
.jockey-crit__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
    gap: 8px;
}
.jockey-crit__label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.92rem;
}
.jockey-crit__tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bg);
    background: var(--olive-bright);
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
}
.jockey-crit__num {
    font-variant-numeric: tabular-nums;
    color: var(--gold-soft);
    font-weight: 700;
    white-space: nowrap;
}
.jockey-crit__peak {
    color: var(--muted);
    font-weight: 500;
}
.jockey-crit__track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
    border: 1px solid var(--line);
}
.jockey-crit__value {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--olive), var(--gold));
}
.jockey-crit__peakmark {
    position: absolute;
    top: -2px;
    width: 2px;
    height: calc(100% + 4px);
    background: var(--gold-soft);
    opacity: 0.7;
    z-index: 2;
}
.jockey-crit--trained .jockey-crit__track {
    box-shadow: 0 0 0 1px var(--olive-bright);
}
.jockey-crit__gain {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--olive-bright);
    font-weight: 600;
}

/* Note generaliste (sans coach) */
.jockey-generalist-note {
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    background: rgba(123, 138, 41, 0.08);
}
.jockey-generalist-note p {
    margin: 0 0 8px;
}
.jockey-generalist-note p:last-child {
    margin-bottom: 0;
}

/* Cartes d'exercice (planification) */
.jockey-exercise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.jockey-exercise-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.jockey-exercise-card:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
}
.jockey-exercise-card.is-selected {
    border-color: var(--gold);
    background: rgba(210, 172, 86, 0.14);
    box-shadow: inset 0 0 0 1px var(--gold);
}
.jockey-exercise-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.jockey-exercise-card__title {
    font-weight: 700;
    color: var(--gold-soft);
}
.jockey-exercise-card__crits {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jockey-exercise-card__crit {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--text);
}
.jockey-exercise-card__crit em {
    font-style: normal;
    color: var(--olive-bright);
    font-weight: 600;
    white-space: nowrap;
}
.jockey-exercise-card--none .jockey-exercise-card__crit {
    color: var(--muted);
}
.jockey-exercise-form__actions {
    display: flex;
    justify-content: flex-end;
}

/* Cartes coach */
.jockey-coach-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.jockey-coach-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
}
.jockey-coach-card__peaks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.jockey-coach-card__peak {
    font-size: 0.8rem;
    color: var(--text);
    background: rgba(210, 172, 86, 0.12);
    border-radius: 999px;
    padding: 2px 9px;
}
.jockey-coach-card__peak em {
    font-style: normal;
    color: var(--gold-soft);
    font-weight: 700;
}

/* Indice de potentiel (fiche jockey) — remplace l'affichage chiffre du peak */
.jockey-crit__pot {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold-soft);
    background: rgba(210, 172, 86, 0.14);
    padding: 1px 8px;
    border-radius: 999px;
    vertical-align: middle;
}
.jockey-crit__pot--max {
    color: var(--bg);
    background: var(--olive-bright);
}
.jockey-crit__value--max {
    background: linear-gradient(90deg, var(--olive-bright), var(--gold-soft));
}

/* Planification 14 jours (jockeys) */
.jockey-exercise-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px 16px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.15);
}
.jockey-exercise-legend__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.84rem;
}
.jockey-exercise-legend__title {
    font-weight: 700;
    color: var(--gold-soft);
}
.jockey-exercise-legend__crits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--muted);
}
.jockey-exercise-legend__crits em {
    font-style: normal;
    color: var(--olive-bright);
    font-weight: 600;
}
.jockey-plan-bulk {
    margin-bottom: 12px;
}
.jockey-plan-bulk label {
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.jockey-plan-bulk select,
.jockey-plan-day select {
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 9px;
    font: inherit;
}
.jockey-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.jockey-plan-day {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.16);
}
.jockey-plan-day.is-today {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px var(--gold);
}
.jockey-plan-day__label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.86rem;
}
.jockey-plan-day__label em {
    font-style: normal;
    color: var(--gold-soft);
}
.jockey-plan-day select {
    width: 100%;
}

/* Badge regression / entretien (fiche jockey) */
.jockey-crit__pot--warn {
    color: #2a0f0f;
    background: #e8896f;
}
.jockey-crit__pot--kept {
    color: var(--bg);
    background: var(--gold-soft);
}
.jockey-crit__value--warn {
    background: linear-gradient(90deg, #b5482f, #e8896f);
}

/* Fiche entraineur de jockey (recrutement) */
.jockey-trainer-peaks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 14px;
}
.jockey-trainer-peak {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.88rem;
}
.jockey-trainer-peak__label { color: var(--text); }
.jockey-trainer-peak__val {
    color: var(--gold-soft);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.jockey-trainer-peak__grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--bg);
    background: var(--muted);
}
.jockey-trainer-peak__grade--s { background: #e8c15a; }
.jockey-trainer-peak__grade--a { background: #9fbb33; }
.jockey-trainer-peak__grade--b { background: #6fae7c; }
.jockey-trainer-peak__grade--c { background: #6f9dae; }
.jockey-trainer-peak__grade--d { background: #a98a6a; }
.jockey-trainer-peak__grade--e { background: #b06a6a; }
.jockey-trainer-apport {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 16px;
}
.jockey-trainer-apport__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.84rem;
}
.jockey-trainer-apport__title { font-weight: 700; color: var(--gold-soft); }
.jockey-trainer-apport__crits { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); }
.jockey-trainer-apport__crit em { font-style: normal; color: var(--olive-bright); font-weight: 600; }
.jockey-trainer-apport__crit.is-none em { color: var(--muted); }

/* Renommage poulain (fiche cheval) — aligne sur le style des champs de dialog du site */
.horse-rename-form__field {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}
.horse-rename-form__field span {
    color: var(--gold-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.horse-rename-form__field input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(214, 179, 95, 0.18);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--text);
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.horse-rename-form__field input::placeholder {
    color: var(--muted);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}
.horse-rename-form__field input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(0, 0, 0, 0.3);
}

/* Effets de la castration (dialog) */
.horse-castrate-effects {
    list-style: none;
    margin: 14px 0;
    padding: 0;
    display: grid;
    gap: 7px;
}
.horse-castrate-effects li {
    position: relative;
    padding-left: 24px;
    font-size: 0.9rem;
    line-height: 1.4;
}
.horse-castrate-effects li::before { position: absolute; left: 0; top: 0; }
.horse-castrate-effects .is-plus::before { content: "\2714"; color: var(--olive-bright); }
.horse-castrate-effects .is-minus::before { content: "\26A0"; }
.horse-castrate-effects .is-minus { color: #e8896f; }

/* ============================ Page Finances (comptabilité) ============================ */
.finance-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 4px 0 18px;
}
/* Barre ne portant que le lien de retour (vue abonnements) : sans le badge de niveau,
   c'est lui qui doit prendre le "margin-left: auto" pour rester cale a droite. */
.finance-toolbar--end { justify-content: flex-end; }
.finance-currency-switch { display: inline-flex; gap: 6px; }
.finance-chip {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(236, 194, 105, 0.4);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.finance-chip:hover { border-color: var(--gold-soft); }
.finance-chip.is-active { background: var(--gold-soft); border-color: var(--gold-soft); color: #1a1205; }
.finance-tier-badge {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(236, 194, 105, 0.35);
    color: var(--gold-soft);
    background: rgba(236, 194, 105, 0.08);
}
.finance-tier-badge--infinite { border-color: rgba(120, 200, 140, 0.5); color: #9fe0b2; background: rgba(120, 200, 140, 0.1); }

.finance-balances .finance-balance-card { text-align: left; }
.finance-balance-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--gold-soft);
    margin: 4px 0 0;
}
.finance-balance-value span { font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.finance-net { font-size: 1.9rem; font-weight: 800; margin: 4px 0 2px; }
.finance-net span { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.finance-net-detail { margin: 0; font-size: 0.85rem; color: var(--muted); }

.finance-wide { grid-column: 1 / -1; }

.is-pos { color: #7fd39b; }
.is-neg { color: #e88b7d; }

.finance-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.finance-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.finance-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: relative; vertical-align: middle; }
.finance-table td.finance-amount-col, .finance-amount-col { text-align: right; white-space: nowrap; font-weight: 700; }
.finance-bar {
    display: block;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
    opacity: 0.75;
}
.finance-bar--in { background: #7fd39b; }
.finance-bar--out { background: #e88b7d; }
.finance-poste-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.76rem;
    background: rgba(236, 194, 105, 0.12);
    color: var(--gold-soft);
    border: 1px solid rgba(236, 194, 105, 0.25);
}

/* Histogramme mensuel */
.finance-monthly {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 160px;
    padding: 8px 4px 0;
}
.finance-monthly__col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.finance-monthly__bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.finance-monthly__bar { width: 10px; border-radius: 3px 3px 0 0; min-height: 2px; }
.finance-monthly__bar--in { background: linear-gradient(180deg, #7fd39b, #4f9e6d); }
.finance-monthly__bar--out { background: linear-gradient(180deg, #e88b7d, #b85a4c); }
.finance-monthly__label { margin-top: 6px; font-size: 0.68rem; color: var(--muted); }
.finance-legend { margin-top: 10px; font-size: 0.8rem; color: var(--muted); }
.finance-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.finance-dot--in { background: #7fd39b; }
.finance-dot--out { background: #e88b7d; }

/* Rentabilité par activité (infinite) */
.finance-roi { list-style: none; margin: 0 0 8px; padding: 0; }
.finance-roi__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.finance-roi__label { font-weight: 600; }
.finance-roi__value { font-weight: 800; font-size: 1.05rem; }

.finance-barcell { width: 34%; }
.finance-barcell .finance-bar { height: 8px; margin-top: 0; border-radius: 4px; opacity: 0.85; }

/* Stats avancées (infinite) : courbe solde, ROI, rendement, cheptel */
.finance-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .finance-stats-grid { grid-template-columns: 1fr; } }

.finance-chart { margin: 6px 0 4px; }
.finance-spark { width: 100%; height: 90px; display: block; overflow: visible; }
.finance-spark__area { fill: rgba(245, 216, 155, 0.10); stroke: none; }
.finance-spark__line { fill: none; stroke: var(--gold-soft); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.finance-spark.is-pos .finance-spark__area { fill: rgba(127, 211, 155, 0.12); }
.finance-spark.is-pos .finance-spark__line { stroke: #7fd39b; }
.finance-spark.is-neg .finance-spark__area { fill: rgba(232, 139, 125, 0.12); }
.finance-spark.is-neg .finance-spark__line { stroke: #e88b7d; }
.finance-chart__axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.finance-chart__caption { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); }
.finance-chart__caption strong { color: var(--gold-soft); }
.finance-chart__caption strong.is-pos { color: #7fd39b; }
.finance-chart__caption strong.is-neg { color: #e88b7d; }

.finance-statrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
.finance-stat {
    flex: 1 1 90px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.finance-stat--hero { flex-basis: 130px; background: rgba(245, 216, 155, 0.06); border-color: rgba(245, 216, 155, 0.18); }
.finance-stat__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.finance-stat__val { font-size: 1.2rem; font-weight: 800; color: var(--gold-soft); }
.finance-stat--hero .finance-stat__val { font-size: 1.45rem; }
.finance-stat__val.is-pos { color: #7fd39b; }
.finance-stat__val.is-neg { color: #e88b7d; }

.finance-yield td a { color: var(--gold-soft); text-decoration: none; }
.finance-yield td a:hover { text-decoration: underline; }

/* ===== Classements (page Palmarès → Classements) ===== */
.rank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rank-panel--wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .rank-grid { grid-template-columns: 1fr; } .rank-panel--wide { grid-column: auto; } }

.rank-panel__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rank-full-btn {
    background: none; border: none; cursor: pointer;
    color: var(--gold-soft); font: inherit; font-size: 0.82rem; font-weight: 600;
    padding: 2px 0; white-space: nowrap;
}
.rank-full-btn:hover { text-decoration: underline; }

.rank-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 10px; }
.rank-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: rgba(255, 255, 255, 0.03); border-radius: 9px; padding: 3px; }
.rank-tab {
    background: none; border: none; cursor: pointer; font: inherit;
    color: var(--muted); font-size: 0.78rem; font-weight: 600;
    padding: 5px 10px; border-radius: 7px; transition: background 0.15s, color 0.15s;
}
.rank-tab:hover { color: var(--text); }
.rank-tab.is-active { background: var(--gold-soft); color: #1a1205; }
.rank-tabs--cat { background: rgba(245, 216, 155, 0.05); }

.rank-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.rank-sort select {
    font: inherit; font-size: 0.8rem; color: var(--text);
    background-color: #241a0d; border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px; padding: 4px 8px; cursor: pointer;
}
/* Options du menu déroulant : fond sombre (pas de blanc illisible) */
.rank-sort select option { background-color: #241a0d; color: var(--text); }

.rank-table-wrap { position: relative; overflow-x: auto; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.rank-table th {
    text-align: right; padding: 6px 8px; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 700;
}
.rank-table th.rank-pos, .rank-table th.rank-name { text-align: left; }
/* Colonne de TEXTE : a poser sur le <th> ET sur le <td>. Les en-tetes de ce tableau
   sont alignes a droite par defaut (herite des classements, ou tout est chiffre) ;
   sans cette classe, le titre d'une colonne de texte se retrouve a droite tandis que
   ses valeurs restent a gauche. */
.rank-table th.rank-left, .rank-table td.rank-left { text-align: left; }
.rank-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; }
/* Survol de ligne en accent dore, comme partout ailleurs : un lavis blanc sur le
   fond brun des panneaux tire vers le gris et jure avec la palette. */
.rank-table tbody tr:hover { background: rgba(214, 179, 95, 0.08); }

.rank-pos { width: 34px; text-align: center; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-pos--top1 { color: #f7d774; }
.rank-pos--top2 { color: #d8dbe0; }
.rank-pos--top3 { color: #d3a06a; }
.rank-name { font-weight: 600; }
.rank-name a { color: var(--gold-soft); text-decoration: none; }
.rank-name a:hover { text-decoration: underline; }
.rank-name__meta { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 400; }
.rank-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank-num.is-pos { color: #7fd39b; font-weight: 700; }
.rank-num.is-neg { color: #e88b7d; font-weight: 700; }
/* Colonnes écurie / patron */
.rank-table th.rank-ecurie { text-align: left; }
.rank-ecurie { text-align: left; }
.rank-ecurie a { color: var(--gold-soft); text-decoration: none; }
.rank-ecurie a:hover { text-decoration: underline; }
.rank-ecurie--system { color: #8fb3c8; font-style: italic; } /* haras système (dumps) : couleur distincte */
.rank-ecurie--free { color: var(--muted); }
.rank-empty td { color: var(--muted); text-align: center; padding: 18px 8px; font-style: italic; }
.rank-note { margin: 8px 0 0; font-size: 0.76rem; color: var(--muted); }

tbody[data-rank-body].is-loading { opacity: 0.4; transition: opacity 0.1s; }
.rank-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.rank-loader[hidden] { display: none; }
.rank-loader span {
    width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid rgba(245, 216, 155, 0.25); border-top-color: var(--gold-soft);
    animation: rank-spin 0.7s linear infinite;
}
@keyframes rank-spin { to { transform: rotate(360deg); } }

/* Pop-up classement complet */
.rank-dialog {
    width: min(720px, calc(100vw - 24px));
    max-height: min(84vh, 900px);
    border: 1px solid rgba(214, 179, 95, 0.28); border-radius: 18px; padding: 0;
    background: linear-gradient(180deg, rgba(44, 30, 14, 0.98), rgba(18, 13, 7, 0.995));
    color: var(--text); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); overflow: hidden;
}
.rank-dialog::backdrop { background: rgba(8, 6, 4, 0.62); }
.rank-dialog__inner { display: flex; flex-direction: column; max-height: min(84vh, 900px); }
.rank-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 6px; }
.rank-dialog__header h2 { margin: 0; color: var(--gold-soft); font-size: 1.1rem; }
.rank-dialog__close { background: none; border: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.rank-dialog__close:hover { color: var(--text); }
.rank-dialog__sub { margin: 0; padding: 0 20px 10px; font-size: 0.8rem; color: var(--muted); }
.rank-dialog__body { flex: 1; overflow-y: auto; padding: 0 20px 20px; }
.rank-dialog__body thead th { position: sticky; top: 0; background: rgba(30, 21, 10, 0.98); z-index: 1; }

/* Fiche jockey en page (ouverte en fenêtre depuis les classements) */
.jockey-fiche-page { max-width: 680px; margin: 0 auto; }
.jockey-fiche-page .horse-popup-dialog__inner { padding: 0; gap: 14px; }

/* Lien « Afficher le palmarès » dans l'en-tête des tableaux de statistiques d'écurie */
.stable-stats-panel__record-link {
    color: var(--gold-soft); text-decoration: none; font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.stable-stats-panel__record-link:hover { text-decoration: underline; }

/* ===== Hall of Fame (page Palmarès → Hall of Fame) ===== */
.hof-section { margin: 26px 0; }
.hof-section__header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hof-section__header::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(245, 216, 155, 0.35), transparent); }
.hof-section__header h2 { margin: 0; color: var(--gold-soft); font-family: "Cinzel", serif; font-size: 1.25rem; white-space: nowrap; }

.hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.hof-card {
    position: relative;
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 16px 16px 14px;
    border: 1px solid rgba(245, 216, 155, 0.14);
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(50, 35, 16, 0.55), rgba(20, 14, 8, 0.7));
    overflow: hidden;
}
.hof-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(245, 216, 155, 0.25); }
.hof-card--rank1::before { background: linear-gradient(180deg, #f7d774, #c99a3a); }
.hof-card--rank2::before { background: linear-gradient(180deg, #d8dbe0, #9aa0aa); }
.hof-card--rank3::before { background: linear-gradient(180deg, #d3a06a, #a6743f); }

.hof-card__medal { display: flex; flex-direction: column; align-items: center; min-width: 30px; }
.hof-card__trophy { font-size: 1.1rem; line-height: 1; }
.hof-card__rank { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.hof-card--rank1 .hof-card__rank { color: #f7d774; }
.hof-card--rank2 .hof-card__rank { color: #d8dbe0; }
.hof-card--rank3 .hof-card__rank { color: #d3a06a; }

.hof-card__avatar {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245, 216, 155, 0.1); border: 1px solid rgba(245, 216, 155, 0.22);
    color: var(--gold-soft); font-family: "Cinzel", serif; font-weight: 700; font-size: 1.2rem;
}
.hof-card__avatar--img { padding: 0; overflow: hidden; background: rgba(0, 0, 0, 0.25); }
.hof-card__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hof-card__body { flex: 1; min-width: 0; }
.hof-card__name { margin: 0 0 2px; font-size: 1.02rem; }
.hof-card__name a { color: var(--text); text-decoration: none; }
.hof-card__name a:hover { color: var(--gold-soft); text-decoration: underline; }
.hof-card__meta { margin: 0 0 8px; font-size: 0.76rem; color: var(--muted); }

.hof-card__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.hof-chip {
    font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.05); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.08);
}
.hof-chip--g1 { background: rgba(247, 215, 116, 0.16); border-color: rgba(247, 215, 116, 0.4); color: #f7d774; }
.hof-chip--muted { color: var(--muted); }

.hof-card__gains { margin: 0; font-size: 0.82rem; color: var(--gold-soft); font-weight: 700; }
.hof-card__sep { color: var(--muted); font-weight: 400; }
.hof-card__stable { color: var(--muted); font-weight: 600; text-decoration: none; }
a.hof-card__stable:hover { text-decoration: underline; color: var(--gold-soft); }
.hof-card__stable--system { color: #8fb3c8; font-style: italic; }

.hof-loader { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.85rem; padding: 12px 0; }
.hof-loader span {
    width: 18px; height: 18px; border-radius: 50%;
    border: 3px solid rgba(245, 216, 155, 0.25); border-top-color: var(--gold-soft);
    animation: rank-spin 0.7s linear infinite;
}
.hof-empty { color: var(--muted); font-style: italic; padding: 8px 0; }
.hof-soon { padding: 18px 20px; }
.hof-soon p { margin: 0; line-height: 1.55; color: var(--muted); }
.hof-soon strong { color: var(--gold-soft); }

/* ===== Ventes : barre de filtres + pastille (course / poulinière / étalon) ===== */
.sales-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }

/* ============================================================================
   RETOUR EN HAUT, AU PIED DE CHAQUE BLOC DE VENTE.

   Les listes font plusieurs dizaines de cartes : arrive en bas, le joueur
   n'avait plus qu'a remonter au doigt. Le lien renvoie vers #sales-top, ou se
   trouve la navigation entre categories — il peut donc enchainer sur une autre
   liste plutot que de simplement revenir a son point de depart.

   PC ET MOBILE : c'est un manque des deux cotes.
   ============================================================================ */
.sales-column__top {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    text-align: right;
}

.sales-column__top a {
    color: var(--gold-soft);
    font-size: 0.8rem;
    text-decoration: none;
}

.sales-column__top a:hover,
.sales-column__top a:focus-visible {
    text-decoration: underline;
}

.sales-type-chip {
    display: inline-block; vertical-align: middle; margin-left: 6px;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.sales-type--course { color: #8fc0e0; background: rgba(143, 192, 224, 0.12); border-color: rgba(143, 192, 224, 0.35); }
.sales-type--pouliniere { color: #e8a6c8; background: rgba(232, 166, 200, 0.12); border-color: rgba(232, 166, 200, 0.35); }
.sales-type--etalon { color: #f5d89b; background: rgba(245, 216, 155, 0.12); border-color: rgba(245, 216, 155, 0.4); }

/* Lien « nom de course » cliquable dans le palmarès d'une fiche cheval (ouvre la fiche course en pop-up) */
.horse-record-course-link { color: var(--gold-soft); text-decoration: none; cursor: pointer; }
.horse-record-course-link:hover { text-decoration: underline; }

/* ============================================================
   PAGE D'ACCUEIL (auth.php) : présentation marketing + emplacements images + chrono d'ouverture
   ============================================================ */

/* Liste des points forts */
.landing-features {
    list-style: none;
    margin: 20px 0 4px;
    padding: 0;
    display: grid;
    gap: 10px;
}
.landing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gold-soft);
    font-size: 0.98rem;
}
.landing-features__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.05rem;
    background: rgba(123, 138, 41, 0.18);
    border: 1px solid rgba(159, 187, 51, 0.35);
}

/* Vitrine d'images (emplacements à remplir) */
.landing-showcase {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.landing-media {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.landing-media--wide { grid-column: 1 / -1; }
.landing-media__placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(213, 166, 84, 0.5);
    background:
        linear-gradient(135deg, rgba(159, 187, 51, 0.10), rgba(213, 166, 84, 0.08)),
        var(--bg-soft);
    color: var(--muted);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.landing-media--wide .landing-media__placeholder { aspect-ratio: 21 / 9; }
/* quand l'emplacement reçoit une vraie <img>, elle remplace le placeholder */
.landing-media img {
    width: 100%;
    border-radius: 14px;
    display: block;
    border: 1px solid rgba(213, 166, 84, 0.25);
}
.landing-media figcaption {
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

/* Bloc chrono (remplace temporairement le formulaire connexion/inscription) */
.landing-countdown-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.landing-countdown-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.landing-countdown-block__title {
    margin: 0;
    color: var(--gold-soft);
    text-transform: capitalize;
}
.landing-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 4px;
    flex-wrap: wrap;
}
.landing-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    padding: 14px 10px;
    border-radius: 14px;
    background: var(--panel-strong);
    border: 1px solid rgba(213, 166, 84, 0.30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.landing-countdown__value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.landing-countdown__label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.landing-countdown__sep {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(213, 166, 84, 0.55);
    align-self: flex-start;
    margin-top: 12px;
}
.landing-countdown__note {
    margin: 4px 0 0;
    color: var(--muted);
    max-width: 42ch;
}
.landing-countdown__admin {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.landing-countdown__admin:hover { opacity: 1; color: var(--gold-soft); text-decoration: underline; }

@media (max-width: 640px) {
    .landing-showcase { grid-template-columns: 1fr; }
    .landing-media__placeholder,
    .landing-media--wide .landing-media__placeholder { aspect-ratio: 16 / 9; }
    .landing-countdown__unit { min-width: 60px; padding: 10px 8px; }
    .landing-countdown__value { font-size: 1.8rem; }
    .landing-countdown__sep { font-size: 1.4rem; margin-top: 8px; }
}

/* Icônes de menu utilisées dans la liste des points forts de la page d'accueil */
.landing-features__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

/* Bloc de bienvenue visiteur (header, hors connexion) — mis en avant, agrandi */
.status-block--welcome {
    gap: 6px;
}
.status-block--welcome .status-label {
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}
.status-block--welcome strong {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.12;
    color: var(--gold-soft);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Colonne droite de l'accueil : chrono (ou formulaires) + galerie des 4 photos, empilés */
.auth-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: start;
    min-width: 0;
    /* Cible de l'ancre #inscription : un peu d'air au-dessus, sinon le formulaire
       arrive colle au bord haut de l'ecran et parait tronque sur mobile. */
    scroll-margin-top: 16px;
}
/* Galerie 2×2 des vignettes sous le compte à rebours */
.landing-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.landing-gallery .landing-media figcaption { font-size: 0.8rem; }
@media (max-width: 640px) {
    .landing-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dans la colonne droite (flex column), le panneau chrono doit s'étirer sur toute la largeur
   comme la galerie (sinon align-self:start du .auth-panel le rétrécit à son contenu). */
.auth-aside .auth-panel { align-self: stretch; }

.landing-share-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: 100%;
    min-height: 44px;
    margin: 6px 0 18px;
    padding: 0 18px 0 4px;
    border: 1px solid rgba(245, 216, 155, 0.24);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        linear-gradient(135deg, rgba(36, 54, 20, 0.98), rgba(95, 83, 32, 0.96) 58%, rgba(132, 115, 43, 0.95));
    color: var(--gold-soft);
    box-shadow: 0 14px 28px rgba(22, 17, 8, 0.26);
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}

.landing-share-link:hover {
    transform: translateY(-1px);
    filter: saturate(1.06) brightness(1.05);
    border-color: rgba(245, 216, 155, 0.38);
    box-shadow: 0 18px 34px rgba(22, 17, 8, 0.34);
}

.landing-share-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(245, 216, 155, 0.24), rgba(245, 216, 155, 0.09));
    border: 1px solid rgba(245, 216, 155, 0.26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.landing-share-link__icon svg {
    width: 18px;
    height: 18px;
    fill: var(--gold-soft);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
}

.landing-share-link__label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

/* Lien vers le guide depuis l.accueil */
.landing-guide-link{margin:.2rem 0 1rem;padding-top:10px;}
.landing-guide-link a{display:inline-flex;align-items:center;gap:.5rem;color:#c9a24b;text-decoration:none;font-weight:600;border:1px solid rgba(201,162,75,.4);border-radius:999px;padding:.5rem .95rem;transition:background .15s,border-color .15s;}
.landing-guide-link a:hover{background:rgba(201,162,75,.12);border-color:#c9a24b;}
.landing-guide-link__icon img{width:22px;height:22px;display:block;}

/* ============================================================
   « Ce qu'il transmet » — patrimoine génétique d'un reproducteur.
   Aucune valeur chiffrée n'est affichée, quel que soit l'abonnement :
   la mise en forme doit rester lisible sans chiffre d'appui.
   ============================================================ */
.horse-transmit__note,
.horse-transmit__upsell {
    margin: 0 0 0.85rem;
    color: rgba(233, 226, 214, 0.62);
    font-size: 0.82rem;
    line-height: 1.45;
}

.horse-transmit__upsell {
    margin: 0.85rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(201, 162, 75, 0.16);
    font-style: italic;
}

/* Le niveau de prépotence : pastille discrète, jamais en concurrence avec le type transmis. */
.horse-transmit__level {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.08rem 0.5rem;
    border: 1px solid rgba(201, 162, 75, 0.32);
    border-radius: 999px;
    color: var(--gold-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: help;
}

/* L'étendue des possibles (Infinite) : passe à la ligne, ton plus effacé que le type exprimé. */
.horse-transmit__range {
    display: block;
    margin-top: 0.18rem;
    color: rgba(233, 226, 214, 0.55);
    font-size: 0.78rem;
    font-style: italic;
}

.horse-transmit__details {
    margin: 0.45rem 0 0;
    padding: 0.45rem 0 0 0.8rem;
    border-top: 1px dashed rgba(201, 162, 75, 0.16);
    list-style: none;
}

.horse-transmit__details li {
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
}

.horse-transmit__details li:last-child {
    margin-bottom: 0;
}

.horse-transmit__details-label {
    display: inline-block;
    min-width: 108px;
    color: rgba(233, 226, 214, 0.6);
    font-size: 0.78rem;
}

.horse-transmit__details .horse-transmit__range {
    margin-left: 108px;
}

@media (max-width: 640px) {
    .horse-transmit__details-label {
        min-width: 0;
        margin-right: 0.4rem;
    }
    .horse-transmit__details .horse-transmit__range {
        margin-left: 0;
    }
}

/* Infobulle des niveaux de prépotence : même dorure que celle des barres de préférence
   (.horse-pref-scale__zone), pour ne pas introduire un second style d'infobulle sur la fiche.

   ANCRAGE SUR LA LIGNE, PAS SUR LA PASTILLE. Centrée sur une pastille étroite et placée en
   fin de ligne, l'infobulle débordait du panneau. On laisse donc la pastille en position
   statique : les pseudo-éléments se calent alors sur le premier ancêtre positionné, ici la
   ligne (dd ou li), et s'étirent d'un bord à l'autre. Le débordement devient impossible,
   quelle que soit la longueur du texte ou la largeur de l'écran. */
.horse-transmit dd,
.horse-transmit__details li {
    position: relative;
}

.horse-transmit__level[data-tooltip]::before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
    content: attr(data-tooltip);
    width: auto;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(236, 194, 105, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(70, 46, 18, 0.98), rgba(18, 12, 5, 0.995));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 238, 195, 0.15);
    color: var(--gold-soft);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    text-shadow: none;
    transform: translateY(6px);
}

/* Pas de fleche : l'infobulle couvre desormais toute la ligne, une pointe centree ne
   designerait plus la pastille survolee. */

.horse-transmit__level[data-tooltip]:hover::before,
.horse-transmit__level[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

/* Message de repli quand le patrimoine génétique est absent : séparé des lignes de saison. */
.horse-transmit__note--sep {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(201, 162, 75, 0.16);
    font-style: italic;
}

/* Fiche lad : etat du lien avec un cheval (verrouille un an, cf. TRAINING_LAD_LOCK_YEARS). */
.recruitment-lad-link {
    display: block;
    margin-top: 0.15rem;
    color: rgba(233, 226, 214, 0.55);
    font-size: 0.78rem;
    font-style: italic;
}

.recruitment-lad-link--free {
    color: rgba(146, 200, 138, 0.85);
    font-style: normal;
}

.recruitment-lad-hint {
    margin: 0.7rem 0 0;
    color: rgba(233, 226, 214, 0.5);
    font-size: 0.8rem;
}

/* Page élevage : le nom du reproducteur sélectionné ouvre sa fiche complète en fenêtre.
   Reprend l'aspect du <strong> qu'il remplace — il doit rester un titre, pas ressembler
   à un lien de navigation ordinaire. */
.breeding-selected-name {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dotted rgba(201, 162, 75, 0.45);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.breeding-selected-name:hover,
.breeding-selected-name:focus-visible {
    color: var(--gold-soft);
    border-bottom-color: var(--gold-soft);
}

/* Sans sélection, le libellé reste un simple texte : ni curseur main, ni soulignement. */
.breeding-selected-name.is-disabled {
    border-bottom: 0;
    pointer-events: none;
    cursor: default;
}

/* ============================================================
   Page élevage — bloc « Mes naissances ».
   Une carte par poulain né, groupée par année, ouvrant sa fiche en fenêtre.
   ============================================================ */
.breeding-births-year {
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(201, 162, 75, 0.18);
    color: var(--gold-soft);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.breeding-births-year:first-of-type {
    margin-top: 0.3rem;
}

.breeding-births-year span {
    margin-left: 0.5rem;
    color: rgba(233, 226, 214, 0.5);
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
}

.breeding-births-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.6rem;
}

.breeding-birth-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(201, 162, 75, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

a.breeding-birth-card:hover,
a.breeding-birth-card:focus-visible {
    border-color: rgba(201, 162, 75, 0.55);
    background: rgba(201, 162, 75, 0.08);
}

/* Poulain dont la fiche n'existe plus : carte inerte, sans effet de survol. */
.breeding-birth-card--gone {
    opacity: 0.55;
    cursor: default;
}

.breeding-birth-card__portrait {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(201, 162, 75, 0.12);
    color: var(--gold-soft);
    font-weight: 700;
}

.breeding-birth-card__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.breeding-birth-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}

.breeding-birth-card__body strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breeding-birth-card__meta,
.breeding-birth-card__parents {
    color: rgba(233, 226, 214, 0.55);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breeding-birth-card__parents {
    color: rgba(233, 226, 214, 0.4);
}

.breeding-birth-card__date {
    color: rgba(201, 162, 75, 0.55);
    font-size: 0.72rem;
}

/* Poulain né chez nous mais parti depuis : consultable en vue externe, signalé par un liseré discret. */
.breeding-birth-card--sold {
    border-style: dashed;
}

/* ============================================================
   PIED DE PAGE DU SITE — présent sur toutes les pages.
   Les liens légaux doivent rester atteignables partout, y compris déconnecté.
   ============================================================ */
.site-footer {
    margin-top: 42px;
    padding: 26px 0 32px;
    border-top: 1px solid var(--line);
    background: rgba(19, 15, 9, 0.35);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.site-footer__brand:hover,
.site-footer__brand:focus-visible {
    opacity: 0.8;
}

.site-footer__brand:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__brand strong {
    font-family: "Cinzel", serif;
    color: var(--gold-soft);
    letter-spacing: 0.04em;
}

.site-footer__brand span {
    color: var(--muted);
    font-size: 0.78rem;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.site-footer__links a {
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
    color: var(--gold-soft);
    border-bottom-color: rgba(201, 162, 75, 0.5);
}

.site-footer__legal {
    flex-basis: 100%;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(201, 162, 75, 0.12);
    color: rgba(233, 226, 214, 0.42);
    font-size: 0.76rem;
}

@media (max-width: 720px) {
    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Pages légales : mentions légales et règlement du jeu.
   ============================================================ */
.legal-page {
    max-width: 900px;
    margin: 0 auto;
}

.legal-block {
    margin-bottom: 18px;
}

.legal-block p {
    margin: 0 0 12px;
    color: rgba(233, 226, 214, 0.82);
    line-height: 1.65;
}

.legal-block p:last-child {
    margin-bottom: 0;
}

/* Articles porteurs d'un enjeu juridique (valeur des Oros, paris) : mis en évidence. */
.legal-block--key {
    border-color: rgba(201, 162, 75, 0.42);
    background: linear-gradient(180deg, rgba(201, 162, 75, 0.07), transparent 60%), var(--panel);
}

.legal-ul {
    margin: 0 0 12px;
    padding-left: 1.2rem;
    color: rgba(233, 226, 214, 0.82);
    line-height: 1.65;
}

.legal-ul li {
    margin-bottom: 6px;
}

.legal-list div {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(201, 162, 75, 0.1);
}

.legal-list div:last-child {
    border-bottom: 0;
}

.legal-list dt {
    color: var(--gold-soft);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.legal-list dd {
    margin: 0;
    color: rgba(233, 226, 214, 0.85);
}

/* Emplacement restant à remplir par l'éditeur : volontairement très visible, pour qu'aucun
   ne parte en production par inadvertance. */
.legal-todo {
    display: inline-block;
    padding: 2px 8px;
    border: 1px dashed #c98b3a;
    border-radius: 6px;
    background: rgba(201, 139, 58, 0.12);
    color: #e8b56d;
    font-size: 0.85rem;
}

.legal-note {
    margin-top: 10px;
    color: rgba(233, 226, 214, 0.5);
    font-size: 0.8rem;
    font-style: italic;
}

.legal-updated {
    margin: 6px 0 0;
    color: rgba(233, 226, 214, 0.42);
    font-size: 0.8rem;
    text-align: right;
}

@media (max-width: 640px) {
    .legal-list div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* Mention légale devant sauter aux yeux (franchise de TVA, par exemple). */
.legal-highlight {
    padding: 10px 14px;
    border-left: 3px solid var(--gold-soft);
    border-radius: 0 8px 8px 0;
    background: rgba(201, 162, 75, 0.08);
}

/* ============================================================
   Page Finances — consentement préalable à tout achat.
   ============================================================ */
.finance-consent {
    margin-bottom: 18px;
}

.finance-consent__label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    line-height: 1.55;
}

.finance-consent__label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--gold-soft);
    cursor: pointer;
}

.finance-consent__label span {
    color: rgba(233, 226, 214, 0.85);
    font-size: 0.9rem;
}

.finance-consent__label a {
    color: var(--gold-soft);
}

.finance-consent__tva {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(201, 162, 75, 0.14);
    color: rgba(233, 226, 214, 0.5);
    font-size: 0.8rem;
}

/* Case oubliée : le bloc se signale sans bloquer la lecture. */
.finance-consent.is-missing {
    border-color: #c98b3a;
    box-shadow: 0 0 0 1px rgba(201, 139, 58, 0.35);
}

.finance-consent.is-missing .finance-consent__label span {
    color: #e8b56d;
}

/* ============================================================================
   CHOIX DU JOCKEY (page engagements) — bouton + pop-up.

   Un TABLEAU d'une ligne par jockey : le choix se fait en comparant des
   chiffres, et rien ne se compare mieux que des colonnes alignees. Sur
   telephone le tableau defile horizontalement dans son cadre, plutot que de
   pousser la page entiere.
   ============================================================================ */

/* Le bouton qui remplace le menu deroulant : meme gabarit qu'un champ, pour ne
   pas casser l'alignement de la carte d'engagement. */
.jockey-picker__trigger {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2, rgba(255, 255, 255, 0.04));
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.jockey-picker__trigger:hover:not(:disabled) {
    border-color: var(--accent, #c8a15a);
}

.jockey-picker__trigger:disabled {
    cursor: default;
    opacity: 0.6;
}

/* Aucun jockey retenu : la mention reste lisible sans se faire passer pour un choix. */
.jockey-picker__trigger.is-empty {
    color: var(--muted);
}

.jockey-picker-dialog {
    width: min(1040px, 96vw);
    max-height: 88vh;
}

.jockey-picker-dialog__inner {
    max-height: 88vh;
    overflow-y: auto;
}

.jockey-picker__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.jockey-picker__filter {
    display: grid;
    gap: 4px;
    font-size: 0.85rem;
}

.jockey-picker__filter span {
    color: var(--muted);
}

/* LE FOND BLANC VENAIT D'ICI — ou plutot de nulle part : sans regle, un <select>
   prend le style du systeme, blanc sur fond sombre. On l'habille comme les
   autres champs du jeu. */
.jockey-picker__filter select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2, rgba(255, 255, 255, 0.04));
    color: inherit;
    font: inherit;
}

.jockey-picker__filter select option {
    background: var(--surface, #16181d);
    color: inherit;
}

.jockey-picker__table-wrap {
    overflow-x: auto;
}

.jockey-picker__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    white-space: nowrap;
}

.jockey-picker__table th,
.jockey-picker__table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.jockey-picker__table th {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.jockey-picker__row:hover {
    background: var(--surface-2, rgba(255, 255, 255, 0.04));
}

/* Le jockey deja retenu se repere sans avoir a lire la derniere colonne. */
.jockey-picker__row.is-selected {
    background: rgba(200, 161, 90, 0.12);
}

/* Filtre : une CLASSE, pas l'attribut `hidden`, dont la regle navigateur se fait
   battre par la moindre declaration de mise en page (cf. assets/js/jockey-picker.js). */
.jockey-picker__row.is-filtered-out {
    display: none;
}

.jockey-picker__cell-name a {
    font-weight: 600;
}

.jockey-picker__cell-name .jockey-picker__level {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
}

.jockey-picker__allowance.is-negative {
    color: #7fd1a3;
}

.jockey-picker__allowance.is-positive {
    color: #e8b56d;
}

.jockey-picker__cell-action {
    text-align: right;
}

/* Un petit bouton, pas un pave : l'action est evidente, elle n'a pas besoin de
   crier plus fort que les chiffres qu'on est venu comparer. */
.jockey-picker__choose {
    padding: 4px 10px;
    border: 1px solid var(--accent, #c8a15a);
    border-radius: 6px;
    background: transparent;
    color: var(--accent, #c8a15a);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.jockey-picker__choose:hover {
    background: var(--accent, #c8a15a);
    color: #14161a;
}

.jockey-picker__row.is-selected .jockey-picker__choose {
    border-color: var(--muted);
    color: var(--muted);
}

.jockey-picker__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Compte rendu du programme d'un cheval confie (page entrainement, lecture seule).
   Ni champ ni bouton : le proprietaire lit ce que son entraineur a prevu. */
.training-day-card--readonly {
    display: grid;
    gap: 6px;
    align-content: start;
}

.training-day-card__readonly-type {
    margin: 0;
    font-weight: 600;
}

.training-day-card__readonly-line {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.training-day-card__readonly-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* ============================================================================
   BANDE DE SELECTION DE DATE (page Courses) — TOUT SUR UNE LIGNE.

   « Veille · Aujourd'hui · Lendemain · Calendrier » plus l'icone ne tenaient
   pas sur la largeur d'un telephone : `flex-wrap` renvoyait l'icone seule a la
   ligne suivante, ce qui donnait une bande de trois etages pour une seule
   action.

   On interdit le retour a la ligne, on resserre l'ecart et on reduit la fonte
   et l'icone. A 0,72 rem, les quatre libelles et le pictogramme tiennent dans
   340 px — la largeur utile d'un ecran de 393 px, rembourrage deduit.

   PLACE EN FIN DE FICHIER, VOLONTAIREMENT. Les regles de base de ces classes
   sont declarees APRES le bloc @media existant (ligne ~6994) : une media query
   n'ajoutant aucun poids, elles l'emportaient a specificite egale. Ecrire ici
   met ces declarations hors d'atteinte.
   ============================================================================ */
@media (max-width: 820px) {
    .courses-date-band__links {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.45rem;
        font-size: 0.72rem;
    }

    .courses-date-band__links a {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* L'icone garde ses proportions mais cede quelques pixels : c'est elle qui
       faisait basculer la ligne. */
    .courses-date-help {
        flex: 0 0 auto;
        width: 1.5rem;
        height: 1.5rem;
    }

    .courses-date-help__icon {
        width: 1.35rem;
        height: 1.35rem;
    }

    .courses-date-band__label {
        font-size: 0.8rem;
    }
}

/* ============================================================================
   BLOCS « MATIN » / « APRES-MIDI » (page Courses) — SANS LE VIDE AUTOUR DU TITRE.

   Le titre etait entoure de trois espaces cumules : le rembourrage du panneau
   (1 rem au-dessus), la marge basse de son en-tete (14 px), puis l'ecart entre
   les deux blocs (1 rem). Sur un telephone, cela faisait pres de 50 px de noir
   pour un mot de six lettres.

   On les ramene a l'essentiel. Le titre reste centre et lisible, mais la liste
   des hippodromes commence tout de suite dessous.

   EN FIN DE FICHIER : les regles de base de ces classes sont declarees plus
   haut, mais hors media query — a specificite egale, la derniere ecrite gagne,
   et c'est celle-ci.
   ============================================================================ */
@media (max-width: 860px) {
    .courses-program-block {
        padding: 8px 10px 10px;
    }

    .courses-program-block > .panel__header {
        margin-bottom: 6px;
    }

    .courses-program-block > .panel__header h3 {
        margin: 0;
        line-height: 1.2;
    }

    .courses-program-stack {
        gap: 10px;
    }
}

/* ============================================================================
   METEO DES REUNIONS (page Courses) — QUATRE CARTES SUR UNE RANGEE.

   Sur grand ecran, les quatre indications — meteo, temperature, terrain,
   statut — tiennent cote a cote : trois lignes en tout, intitule, valeur,
   pictogramme. Sur mobile elles passaient a deux colonnes sous 860 px, puis a
   UNE SEULE sous 560 px : quatre cartes empilees, douze lignes, et cela pour
   chaque hippodrome de la journee.

   On retablit la rangee de quatre partout, en payant le prix en taille : les
   pictogrammes passent de 2,9 a 1,7 rem, les intitules a 0,52 rem, les valeurs
   a 0,68. Sur 393 px de large, chaque carte dispose d'environ 88 px — de quoi
   loger « Temperature » et « Previsionnel » sans troncature.

   EN FIN DE FICHIER, car deux blocs @media anterieurs (lignes ~8250 et ~8270)
   imposent le contraire : a specificite egale, c'est la derniere declaration
   qui l'emporte, media query ou non.
   ============================================================================ */
@media (max-width: 860px) {
    .courses-weather-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem;
        margin-bottom: 0.6rem;
    }

    .courses-weather-grid .stable-stat-card {
        gap: 0.15rem;
        padding: 6px 3px;
        min-width: 0;
    }

    .courses-weather-grid .stable-stat-card > span {
        font-size: 0.52rem;
        letter-spacing: 0;
        line-height: 1.15;
    }

    .courses-weather-grid .stable-stat-card > strong {
        font-size: 0.68rem;
        line-height: 1.15;
    }

    .courses-weather-label__icon {
        width: 1.7rem;
        height: 1.7rem;
    }

    /* Le pictogramme de terrain est nativement plus grand : on garde l'ecart. */
    .courses-weather-label__icon--terrain {
        width: 1.95rem;
        height: 1.95rem;
    }
}

/* ============================================================================
   LIGNES DE COURSE (page Courses) — TROIS RANGEES SUR MOBILE.

     1. le nom de la course, centre, pleine largeur
     2. distance, piste, corde et allocation, centres, pleine largeur
     3. numero, horaire, paris et television, en quatre colonnes egales

   Le nom et les informations vivent dans la MEME cellule cote serveur. Pour
   les repartir sur deux rangees distinctes, `display: contents` efface la
   boite qui les contient : le <strong> et le <span> deviennent enfants directs
   de la grille et se placent independamment.

   Ces deux rangees disposant desormais de toute la largeur, on leur rend
   quelques dixiemes de police : le nom etait tronque pour tenir dans un tiers
   d'ecran, il ne l'est plus.

   EN FIN DE FICHIER : deux blocs @media anterieurs (lignes ~8250 et ~8270)
   imposent trois colonnes et une bascule en pleine largeur.
   ============================================================================ */
@media (max-width: 860px) {
    /* COLONNES INEGALES SUR LA TROISIEME RANGEE.
       Le numero et l'horaire ont une largeur connue et courte. Le statut
       (« Engagements ouverts ») prend ce qu'il lui faut. Tout le reste va a la
       DERNIERE colonne, qui porte selon l'etat de la course soit la liste des
       paris — quatre libelles a caser —, soit une icone de 26 px.
       C'est l'inverse du decoupage precedent, qui donnait 32 px aux paris et
       les empilait a la verticale, un par ligne.
       Les deux premieres rangees s'etendent sur `1 / -1` et ne sont pas
       concernees par ce decoupage. */
    .courses-race-row {
        grid-template-columns: 22px 46px auto minmax(0, 1fr);
        gap: 2px 6px;
        padding: 8px;
        border-radius: 12px;
        text-align: center;
    }

    /* La boite disparait, ses deux enfants prennent sa place dans la grille. */
    .courses-race-row__cell--info {
        display: contents;
    }

    .courses-race-row__cell--info > strong {
        grid-column: 1 / -1;
        grid-row: 1;
        min-width: 0;
        font-size: 0.82rem;
        line-height: 1.25;
        text-align: center;
    }

    .courses-race-row__cell--info > span {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        font-size: 0.66rem;
        line-height: 1.3;
        text-align: center;
    }

    /* Troisieme rangee : les quatre reperes, un par colonne. */
    .courses-race-row__cell--number { grid-column: 1; grid-row: 3; }
    .courses-race-row__cell--time   { grid-column: 2; grid-row: 3; }
    .courses-race-row__cell--status { grid-column: 3; grid-row: 3; }
    .courses-race-row__cell--action { grid-column: 4; grid-row: 3; }

    .courses-race-row__cell--number,
    .courses-race-row__cell--time,
    .courses-race-row__cell--status,
    .courses-race-row__cell--action {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        margin-top: 3px;
        text-align: center;
    }

    .courses-race-row__cell--number strong,
    .courses-race-row__cell--time strong {
        font-size: 0.7rem;
        line-height: 1.15;
    }

    /* Le statut a le droit de passer a la ligne : « Engagements ouverts » sur
       deux lignes coute moins de place qu'une colonne taillee pour le contenir
       d'un seul tenant. */
    .courses-race-row__cell--status strong {
        display: block;
        max-width: 5.6rem;
        font-size: 0.6rem;
        line-height: 1.15;
        white-space: normal;
    }

    /* LA PASTILLE DE PARIS S'ETALE SUR DEUX LIGNES.
       Elle perd son gabarit de bouton — elle n'est pas cliquable, seulement
       informative — et surtout son `white-space` par defaut : c'est en
       autorisant le retour a la ligne qu'elle passe de quatre lignes a deux. */
    .courses-bets-chip {
        display: block;
        width: 100%;
        min-height: 0;
        padding: 2px 4px;
        font-size: 0.58rem;
        line-height: 1.25;
        white-space: normal;
    }

    .courses-tv-link {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }

    .courses-tv-link__icon {
        width: 18px;
        height: 18px;
    }
}

/* ============================================================================
   FICHE COURSE (pop-up) — LA LIGNE DE REPERES SUR UN SEUL NIVEAU.

   « Course 1 | Classe 2 | Vendredi 28 aout 2026 | 11:00 | DEAUVILLE » se
   cassait sur deux ou trois lignes : cinq mentions a 0,95 rem, separees par
   1 rem d'ecart PLUS 1 rem de rembourrage a droite de chacune — soit deux
   centimetres perdus en separateurs.

   On divise l'ecart par quatre, on descend la fonte a 0,58 rem et on interdit
   la coupure a l'interieur d'une mention : c'est entre elles que la ligne doit
   respirer, jamais au milieu d'une date.

   `overflow-x: auto` en filet de securite : sur un tres petit ecran, ou avec
   un nom d'hippodrome a rallonge, la ligne glissera plutot que de deborder.
   ============================================================================ */
@media (max-width: 860px) {
    .courses-detail-hero__meta {
        flex-wrap: nowrap;
        gap: 0 0.25rem;
        overflow-x: auto;
        font-size: 0.58rem;
        line-height: 1.2;
    }

    .courses-detail-hero__meta span {
        flex: 0 0 auto;
        padding-right: 0.25rem;
        white-space: nowrap;
    }
}

/* ============================================================================
   FICHE COURSE (pop-up) — LA LIGNE DE CARACTERISTIQUES SUR DEUX LIGNES MAX.

   « Plat, 1900 metres, corde a droite, PSF (standard) » suivi de l'allocation :
   deux paragraphes qui prenaient chacun leur interligne complet. On resserre la
   fonte et l'interligne, et on colle les deux paragraphes l'un sous l'autre.
   ============================================================================ */
@media (max-width: 860px) {
    .courses-detail-hero__facts {
        gap: 0;
        font-size: 0.68rem;
        line-height: 1.3;
    }

    .courses-detail-hero__facts p {
        margin: 0;
    }
}

/* ============================================================================
   FICHE COURSE (pop-up) — LE BLOC DE CONDITIONS, TITRE PLUS TROIS LIGNES.

   Le titre etait a 1,1 rem et le texte a un interligne de 1,6 : deux fois plus
   gros que la ligne de reperes juste au-dessus, alors qu'il s'agit d'un renvoi
   reglementaire qu'on lit une fois. La hierarchie etait a l'envers.

   On l'aligne sur les deux lignes precedentes : titre a 0,68 rem, texte a
   0,62, interligne a 1,3. Le paragraphe passe ainsi de six ou sept lignes a
   deux ou trois sur un ecran de telephone.

   `white-space: pre-line` est CONSERVE : les conditions comportent des retours
   a la ligne voulus, poses par coursesRenderConditionsDetail(). Les supprimer
   collerait les alineas les uns aux autres.
   ============================================================================ */
@media (max-width: 860px) {
    .courses-detail-conditions {
        gap: 0.2rem;
        padding-top: 0.45rem;
    }

    .courses-detail-conditions h3 {
        font-size: 0.68rem;
        letter-spacing: 0.02em;
    }

    .courses-detail-conditions p {
        font-size: 0.62rem;
        line-height: 1.3;
    }
}

/* ============================================================================
   FICHE COURSE (pop-up) — L'EN-TETE SUR UNE RANGEE.

   Un bloc @media anterieur (ligne ~8264) passe cet en-tete en colonne : la
   pastille d'etat — « Resultats », « Paris ouverts » — descendait donc sous le
   titre, ou elle occupait une ligne entiere pour deux mots. On revient a la
   rangee, alignee EN HAUT : la pastille se cale ainsi a hauteur de « Fiche
   course », et non au milieu du titre.

   LE NOM DE COURSE S'ADAPTE A LA LARGEUR. `clamp()` le fait varier entre 0,78
   et 1,5 rem selon l'ecran (5,2 % de sa largeur) : sur 393 px cela donne un peu
   plus de 20 px, de quoi loger la plupart des noms d'une traite. Les plus longs
   se tronquent proprement plutot que de passer a la ligne — le nom complet
   reste dans le document, et l'infobulle native du navigateur l'affiche.

   La valeur d'origine, `clamp(2rem, 4vw, 3rem)`, ne descendait jamais sous
   32 px : c'est ce plancher qui imposait deux ou trois lignes.
   ============================================================================ */
@media (max-width: 860px) {
    /* GRILLE PLUTOT QUE RANGEE FLEX.
       « Fiche course » et la pastille d'etat partagent la premiere rangee ; le
       NOM DE LA COURSE occupe la seconde, sur toute la largeur. En flex, il
       partageait la ligne avec la pastille et se tronquait aux deux tiers,
       alors qu'il est l'information principale de la fiche.

       `display: contents` sur le div interne : sa boite disparait pour que
       l'intitule et le titre deviennent enfants directs de la grille et se
       placent independamment. */
    .courses-detail-hero__top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 2px 0.5rem;
    }

    .courses-detail-hero__top > div {
        display: contents;
    }

    .courses-detail-hero__top .eyebrow {
        grid-column: 1;
        grid-row: 1;
    }

    .courses-detail-hero__top h2 {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .courses-status-chip {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    /* `min-width: 0` SUR TOUTE LA CHAINE, ET `max-width: 100%`.
       Un titre en `nowrap` a pour largeur minimale sa longueur entiere : il
       suffit qu'un seul ancetre garde sa largeur naturelle pour que toute la
       fiche s'elargisse et deborde vers la droite. C'est ce qui s'est produit
       le 28/08/2026. La troncature n'opere que si la boite est reellement
       bornee — d'ou `display: block` et `width: 100%` ici. */
    .courses-detail-hero__top h2 {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        font-size: clamp(0.82rem, 5.8vw, 1.6rem);
        line-height: 1.15;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .courses-detail-hero__top .eyebrow {
        margin-bottom: 1px;
        font-size: 0.55rem;
    }

    /* La pastille se contente du gabarit d'un repere, pas d'un bouton. */
    .courses-status-chip {
        flex: 0 0 auto;
        padding: 3px 8px;
        font-size: 0.56rem;
        letter-spacing: 0.02em;
    }
}

/* ============================================================================
   FICHE COURSE (pop-up) — AUCUN DEBORDEMENT LATERAL.

   Filet de securite pose apres l'incident du 28/08/2026 : le titre passe en
   `nowrap` avait elargi toute la fiche, et le texte des conditions se
   retrouvait coupe a droite.

   On borne la boite a la largeur disponible et on interdit tout defilement
   horizontal a son niveau. Seule la ligne de reperes garde le droit de glisser,
   parce qu'elle est concue pour cela.

   `overflow-wrap: anywhere` sur les conditions : le texte reglementaire
   comporte des dates et des references qui ne se coupent pas naturellement.
   ============================================================================ */
@media (max-width: 860px) {
    /* ------------------------------------------------------------------
       LE BUDGET DE LARGEUR DE LA FICHE COURSE, SUR UN ECRAN DE 393 PX.

       Les onze colonnes du tableau de resultats en demandent 346. Avant cette
       correction, il n'en restait que 297, manges par des rembourrages empiles :

           393  ecran
         - 24   .courses-popup-dialog : width: calc(100% - 24px)   -> 369
         - 34   .horse-popup-dialog__inner : 22 px a gauche, 12 a droite -> 335
         - 36   .courses-runners-card : 18 px de chaque cote       -> 299
         -  2   bordure de .courses-runners-table-wrap             -> 297

       On ramene donc tout ce qui est HORIZONTAL a 1 px :

           393  ecran
         -  8   .courses-popup-dialog : width: calc(100% - 8px)    -> 385
         -  2   bordure du dialogue                                -> 383
         -  2   .courses-popup-dialog__inner : 1 px de chaque cote -> 381
         -  2   .courses-runners-card : 1 px de chaque cote        -> 379
         -  2   bordure de .courses-runners-table-wrap             -> 377

       377 px disponibles pour 346 px de colonnes : 31 px de marge. La colonne
       Cote, derniere du tableau, cessait d'etre rognee a partir de 351 px, mais
       de justesse : le tableau est en `table-layout: fixed` a `width: 100%`,
       donc quand le total demande depasse le contenant, le navigateur NE
       DEBORDE PAS — il reduit toutes les colonnes au prorata. Le rognage ne se
       voit alors que sur la plus etroite, la derniere lue.

       Le rembourrage VERTICAL reste a 14 px : la fiche ne manque pas de hauteur.

       ATTENTION A LA PORTEE : `.horse-popup-dialog__inner` est partage par la
       fiche cheval et le palmares. On ne le touche PAS — on ecrit sur la classe
       `.courses-popup-dialog__inner`, portee par le meme element mais propre a
       la fiche course. Meme poids (0,1,0), ecrite plus loin dans le fichier :
       elle gagne, et elle seule.
       ------------------------------------------------------------------ */
    .courses-popup-dialog {
        width: calc(100% - 8px);
        max-width: calc(100% - 8px);
    }

    .courses-popup-dialog__inner {
        max-width: 100%;
        overflow-x: hidden;
        padding: 14px 1px;
    }

    .courses-detail-body--runners .courses-runners-card {
        padding: 1px;
    }

    .courses-popup-detail-hero,
    .courses-popup-detail-hero > * {
        min-width: 0;
        max-width: 100%;
    }

    .courses-detail-conditions p,
    .courses-detail-hero__facts p {
        overflow-wrap: anywhere;
    }
}

/* ============================================================================
   TABLEAU DES PARTANTS ET DE L'ARRIVEE (fiche course) — TENIR SUR L'ECRAN.

   Onze colonnes et un `min-width: 980px` : sur un telephone, le tableau
   depassait de deux tiers et le joueur ne voyait que « Place, N°, Casaque,
   Cheval » — le reste hors champ, sans indice qu'il fallait faire glisser.

   On leve le plancher de 980 px et on comprime tout : fonte a 0,55 rem,
   rembourrage a 3 px, casaque a 22 px, en-tetes autorises a passer a la ligne.
   Chaque colonne reprend alors la largeur de son contenu reel — un numero de
   corde n'a pas besoin de 14 px de marge de chaque cote.

   LA MUSIQUE SUR DEUX LIGNES : c'est la seule donnee longue et sans espace
   (« 1p3p2p4p5p »). On la borne en largeur et on l'autorise a se couper
   n'importe ou, faute de quoi elle imposerait sa longueur a toute la colonne.

   `overflow-x: auto` est CONSERVE sur le conteneur : filet de securite pour
   les cas extremes — un nom de cheval a rallonge, une allocation a sept
   chiffres. Mieux vaut un glissement residuel qu'un debordement.
   ============================================================================ */
@media (max-width: 860px) {
    .courses-runners-table {
        min-width: 0;
        font-size: 0.55rem;
    }

    /* ------------------------------------------------------------------
       « MES CHEVAUX » : LA DEROULANTE REMPLACE LES CARTES.

       Les quatre groupes de cartes s'empilent AU-DESSUS de la fiche : sur un
       effectif de seize chevaux, il fallait faire defiler tout le menu lateral
       avant d'apercevoir la moindre information. La deroulante tient sur une
       ligne et la fiche commence juste en dessous.

       Les cartes ne sont pas supprimees du document, seulement masquees : le
       bureau les garde telles quelles, et rien de ce qui les concerne n'a ete
       touche.
       ------------------------------------------------------------------ */
    /* Le bloc « Votre effectif » vit tout en haut de la page, avant la fiche :
       c'est la premiere chose que le joueur voit, et il porte la deroulante.
       LE MENU LATERAL ENTIER DISPARAIT — pas seulement ses cartes : sinon il
       restait un second panneau « Votre effectif », vide, sous la fiche. */
    .horse-sheet-picker-panel {
        display: block;
        margin-bottom: 10px;
    }

    .horse-sheet-picker-panel .panel__header {
        margin-bottom: 8px;
    }

    .horse-sheet-picker-panel__count {
        font-size: 0.7rem;
        color: #c5a66a;
    }

    /* REGRESSION CORRIGEE : cette regle etait ecrite SANS prefixe, alors que
       `.horse-sheet-sidebar` sert aussi aux pages MONTE, ENGAGEMENTS et
       ENTRAINEMENT DES JOCKEYS. Elle y faisait disparaitre le menu lateral —
       sur la page monte, les jockeys devenaient donc inaccessibles. Le
       remplacement par une deroulante n'existe que sur la fiche cheval : le
       masquage doit y etre limite. */
    .page--horse .horse-sheet-sidebar {
        display: none;
    }

    /* ------------------------------------------------------------------
       PAGE RECRUTEMENT : LES CARTES DE MARCHE DEBORDAIENT.

       LA CAUSE. `.sales-card__line` a bien une mise en page mobile (une seule
       colonne a 900 px, trois colonnes serrees a 860 px). Mais la carte de
       recrutement la REDEFINIT :

           .recruitment-market-card .sales-card__line {
               grid-template-columns: minmax(260px, ...) minmax(460px, ...) ... }

       Deux classes contre une : cette regle l'emporte sur toutes les regles
       mobiles de `.sales-card__line`, qui n'en ont qu'une. Elle exigeait donc
       980 px de large (880 px sous 1520 px) jusque sur un telephone — d'ou les
       noms tronques et le debordement a droite.

       On retablit la mise en page mobile AVEC LE MEME POIDS (deux classes) et
       plus loin dans le fichier : a poids egal, c'est la derniere ecrite qui
       gagne. Pas de prefixe de page ici : le defaut appartient au composant,
       et se corrige partout ou il sert.
       ------------------------------------------------------------------ */
    /* DEUX RANGEES, TROIS COLONNES :
           rangee 1 : [img] NOM ............................. [ Tirage ]
           rangee 2 : AGE | SALAIRE 1450 O/mois | PART. 13 .... 00:30:21

       PIEGE A CONNAITRE : `.sales-card__horse` (le lien qui entoure l'avatar et
       le nom) passe en `display: contents` sous 860 px. Il n'est donc PLUS un
       element de grille — placer quoi que ce soit dessus n'a aucun effet, et ce
       sont ses ENFANTS, l'avatar et l'identite, qui deviennent les elements de
       la grille. C'est ce qui faisait chevaucher le nom et les chiffres : les
       deux atterrissaient dans la meme cellule. On place donc les enfants. */
    .recruitment-market-card .sales-card__line {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 2px 8px;
        align-items: center;
    }

    .recruitment-market-card .sales-card__avatar {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .recruitment-market-card .sales-card__identity {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        display: block;
    }

    .recruitment-market-card .sales-card__identity h3 {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Les trois chiffres sur une seule ligne, sous le nom. */
    .recruitment-market-card .sales-card__stats {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
        justify-content: flex-start;
    }

    .recruitment-market-card .sales-card__stats > div {
        display: flex;
        align-items: baseline;
        gap: 3px;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        white-space: nowrap;
    }

    /* Le salaire est le seul qui peut retrecir : les deux autres sont courts. */
    .recruitment-market-card .sales-card__stats > div:nth-child(3) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .recruitment-market-card__side {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
        width: auto;
        justify-items: end;
    }

    .recruitment-market-card .sales-card__countdown {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        text-align: right;
        min-width: 0;
    }

    /* ALLEGEMENT DE LA CARTE (mobile seulement).
       Quatre informations suffisent a decider : le nom, l'age, le salaire et le
       nombre de candidats. Le reste encombrait une carte de 370 px :
         - la ligne sous le nom (« Peut suivre 2 chevaux ») ;
         - la ligne de statut, qui REPETAIT le salaire et le nombre de
           candidatures deja affiches dans les cases ;
         - la case « Type », identique pour toutes les cartes d'une meme section
           — dont le titre l'annonce deja.
       Rien n'est retire du document : le bureau, plus large, les garde toutes. */
    .recruitment-market-card .sales-card__identity p,
    .recruitment-market-card .sales-card__owner,
    .recruitment-market-card__stats > div:first-child {
        display: none;
    }

    /* Les bords, comme sur les autres pages deja traitees. */
    .page--recruitment {
        padding: 6px 4px;
    }

    .page--recruitment .panel {
        padding: 8px 6px;
    }

    .page--recruitment .recruitment-market-card {
        padding: 8px 6px;
    }

    /* ------------------------------------------------------------------
       PAGE MONTE : LA PHRASE DE JOURNEE VERROUILLEE, ET LES BORDS.

       LA PHRASE. « Monte validee dans PRIX MACHIN : hippodrome verrouille pour
       cette journee. » fait une bonne soixantaine de caracteres, et elle etait
       posee en :

           white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;

       Sur un telephone, cela donnait « Monte validee dans PRIX DE… » : le motif
       du verrouillage — le seul interet de la phrase — etait coupe. Elle
       s'ecrit desormais sur plusieurs lignes, alignee a gauche comme le reste
       de la carte. Le voisin « 1 hippodrome maximum » n'a pas de `min-width: 0`
       et ne peut donc pas retrecir : on autorise le retour a la ligne du
       conteneur plutot que de compter sur la place restante.

       LES BORDS, comme sur la fiche cheval :
           393 ecran - 8 (.page--mount) - 2 bordure - 12 (.panel) - 2 = 369 px
       contre 329 auparavant.
       ------------------------------------------------------------------ */
    .page--mount {
        padding: 6px 4px;
    }

    .page--mount .panel {
        padding: 8px 6px;
    }

    .page--mount .mount-panel,
    .page--mount .mount-form,
    .page--mount .mount-days-grid {
        gap: 8px;
    }

    .mount-day-card__meta {
        flex-wrap: wrap;
        gap: 2px 8px;
        font-size: 0.6rem;
    }

    .mount-day-card__lock-note {
        flex: 1 1 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        text-align: left;
        font-size: 0.6rem;
        line-height: 1.25;
    }

    .page--mount .mount-day-card {
        padding: 6px;
        gap: 6px;
    }

    .page--mount .mount-option-card__body {
        padding: 5px 8px;
    }

    /* PAGE MONTE : meme traitement que « Mes chevaux ». La portee passe par
       `.mount-page`, deja presente sur cette page — aucune nouvelle accroche a
       poser, et surtout aucun effet sur les autres pages qui partagent
       `.horse-sheet-sidebar` (engagements, entrainement des jockeys).
       Le style du menu deroulant lui-meme est deja global
       (`.horse-sheet-sidebar__picker-select`), il n'y a rien a dupliquer. */
    .jockey-picker-panel {
        display: block;
        margin-bottom: 10px;
    }

    .jockey-picker-panel .panel__header {
        margin-bottom: 8px;
    }

    .mount-page .horse-sheet-sidebar {
        display: none;
    }

    /* LA LISTE OUVERTE EST DESSINEE PAR LE SYSTEME, PAS PAR CETTE REGLE.
       Le controle ferme prenait bien le fond sombre, mais le menu deroulant
       qu'il ouvre est un widget natif : il retombait sur la palette CLAIRE du
       telephone, en gardant la couleur de texte claire heritee d'ici — d'ou
       l'ecriture pale sur fond blanc, illisible.

       `color-scheme: dark` est ce qui manquait : il dit au navigateur de
       dessiner le widget natif dans sa palette sombre. Les couleurs posees sur
       `option` et `optgroup` prennent le relais la ou il ne l'honore pas, et le
       fond du controle devient OPAQUE pour qu'aucun blanc ne transparaisse. */
    .horse-sheet-sidebar__picker-select {
        width: 100%;
        max-width: 100%;
        min-height: 34px;
        padding: 0 8px;
        border: 1px solid rgba(214, 179, 95, 0.28);
        border-radius: 10px;
        background: #2b1d08;
        color: #f3dfb3;
        font-size: 0.72rem;
        color-scheme: dark;
    }

    .horse-sheet-sidebar__picker-select option {
        background-color: #2b1d08;
        color: #f3dfb3;
    }

    .horse-sheet-sidebar__picker-select optgroup {
        background-color: #1c1206;
        color: #d6b35f;
        font-weight: 700;
    }

    /* ------------------------------------------------------------------
       LA FICHE CHEVAL SUR MOBILE : LES BORDS, PUIS LES TROIS COLONNES.

       BUDGET DE LARGEUR, sur un ecran de 393 px. Avant :

           393  ecran
         - 28   .page : 14 px de chaque cote                        -> 365
         -  2   bordure de .page                                    -> 363
         - 32   .panel : 16 px de chaque cote                       -> 331
         -  2   bordure du panneau                                  -> 329

       Or la ligne d'identite est une grille `140px | 1fr | 180px` avec 14 px de
       gouttiere : 140 + 14 + 14 + 180 = 348 px de fixe, pour 329 disponibles.
       La colonne du milieu — la VALEUR — etait donc ecrasee a zero, et tout
       partait a la ligne. Ce n'etait pas un choix de mise en page mobile : c'est
       la grille du BUREAU qui s'appliquait telle quelle, faute de regle ici.

       Apres :

           393  ecran
         -  8   .page--horse : 4 px de chaque cote                  -> 385
         -  2   bordure de .page                                    -> 383
         - 12   .panel : 6 px de chaque cote                        -> 371
         -  2   bordure du panneau                                  -> 369

       369 px, contre 329. La grille passe a `76px | 1fr | auto` avec 6 px de
       gouttiere : 88 px de fixe, le reste a la valeur et a l'action.

       LA PORTEE EST LIMITEE A CETTE PAGE : `page--horse` est posee par
       header.php sur `?page=cheval` seulement. Les rembourrages generaux de
       `.page` et `.panel` ne bougent pas — les autres ecrans ont ete valides un
       par un et n'ont pas a etre repris ici.
       ------------------------------------------------------------------ */
    .page--horse {
        padding: 6px 4px;
    }

    .page--horse .panel {
        padding: 8px 6px;
    }

    .page--horse .horse-sheet-layout,
    .page--horse .horse-sheet-grid,
    .page--horse .horse-sheet-hero {
        gap: 8px;
    }

    .page--horse .horse-sheet-hero {
        margin-bottom: 8px;
    }

    .page--horse .horse-sheet-hero__portrait-card {
        padding: 8px 6px;
    }

    /* LES TROIS COLONNES, TENUES SUR UNE LIGNE.
       La troisieme est en `auto` et non en largeur fixe : une ligne sans action
       (la plupart) rend toute la place a la valeur, au lieu de reserver 180 px
       de vide comme le faisait `minmax(0, 180px)`. */
    .page--horse .horse-sheet-data {
        gap: 4px;
    }

    .page--horse .horse-sheet-data div {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        gap: 6px;
        padding-bottom: 5px;
        align-items: center;
    }

    .page--horse .horse-sheet-data div.horse-sheet-data__row--full,
    .page--horse .horse-sheet-data--compact div,
    .page--horse .horse-sheet-data--solo div {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .page--horse .horse-sheet-data dt {
        font-size: 0.52rem;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }

    .page--horse .horse-sheet-data dd {
        font-size: 0.62rem;
        line-height: 1.25;
    }

    /* L'action reste sur sa ligne : pas de retour, et une ellipse plutot qu'un
       debordement si un libelle depassait malgre tout. */
    .page--horse .horse-sheet-data__action {
        min-height: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .page--horse .horse-sheet-data__action .horse-sheet-choice,
    .page--horse .horse-sheet-data__action .action-button,
    .page--horse .horse-sheet-data__action button {
        min-height: 0;
        max-width: 100%;
        overflow: hidden;
        padding: 3px 5px;
        font-size: 0.55rem;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* ------------------------------------------------------------------
       LES INFOBULLES DE LA FICHE CHEVAL : LA VRAIE CAUSE DU DEBORDEMENT.

       La fiche porte 41 infobulles (musique, notes de criteres, echelle de
       preferences, placement ideal). Chacune est un pseudo-element :

           position: absolute;  width: max-content;  max-width: 200 a 260px;
           left: 50%  (ou left: 0 pour la musique);  opacity: 0;

       `opacity: 0` les rend INVISIBLES, mais elles restent MISES EN PAGE :
       un element positionne en absolu compte dans le debordement du document.
       Celles proches du bord droit poussaient donc la largeur bien au-dela de
       l'ecran — d'ou `innerWidth` qui repondait 536 sur un telephone de 393, et
       toute la page, palmares compris, calculee sur cette largeur faussee.

       POURQUOI JE NE LES AI PAS VUES PLUS TOT : mon extrait de console listait
       `querySelectorAll('*')`, qui N'ENUMERE PAS les pseudo-elements. Il ne
       pouvait donc rien signaler, et j'en ai conclu a tort que la page etait
       saine. Une infobulle en `::before` est invisible aux deux sens du terme.

       On les masque sur mobile, comme les bulles « ? » de la page ecurie
       (`.stable-help-tooltip`, deja `display: none` ici) : sur un ecran tactile
       il n'y a pas de survol, elles etaient de toute facon inatteignables.

       PORTEE VOLONTAIREMENT GLOBALE : ces classes servent aussi ailleurs
       (entrainement, monte, ventes), et le meme piege s'y applique.
       On vise `[data-tooltip]::before` / `::after` UNIQUEMENT, pour ne pas
       toucher aux pseudo-elements decoratifs (curseur de l'echelle, etc.).
       ------------------------------------------------------------------ */
    .horse-music__run[data-tooltip]::before,
    .horse-music__run[data-tooltip]::after,
    .horse-attribute-row__grade[data-tooltip]::before,
    .horse-attribute-row__grade[data-tooltip]::after,
    .horse-attribute-row__peak[data-tooltip]::before,
    .horse-attribute-row__peak[data-tooltip]::after,
    .horse-pref-scale__zone[data-tooltip]::before,
    .horse-pref-scale__zone[data-tooltip]::after,
    .horse-placement-token[data-tooltip]::before,
    .horse-placement-token[data-tooltip]::after {
        display: none;
    }

    /* LE PALMARES (dialogue « Afficher le palmares ») SUR MOBILE.

       PORTEE : PAS de prefixe `.page--horse` ici, volontairement.
       `.horse-record-dialog` est un composant PARTAGE — il est rendu depuis
       douze fichiers (fiche cheval, ecurie, courses, engagements, entrainement,
       monte, recrutement, tableau de bord, fiches jockey...). Le debordement
       est donc un defaut partout, pas une question de densite propre a une
       page : le corriger sous `.page--horse` l'aurait laisse intact ailleurs.

       LE DEBORDEMENT. `.horse-record-dialog__inner` porte `overflow: auto` :
       quand son contenu depasse, il ne deborde pas du dialogue, il se coupe au
       bord droit avec une barre de defilement interne — ce qui se lit
       exactement comme « ca deborde a droite ». Deux causes cumulees :
         - aucun `max-width: 100%` ni `min-width: 0` sur la chaine, donc les
           enfants imposaient leur largeur minimale de contenu ;
         - un rembourrage de 22 px + 18 px dans le dialogue, plus 18 px de
           chaque cote dans chaque section, sur un ecran de 393 px.
       Meme correction que la fiche course, qui souffrait du meme defaut.

       BUDGET, sur 393 px :
           393  ecran
         -  8   dialogue : width: calc(100% - 8px)          -> 385
         -  2   bordure du dialogue                         -> 383
         -  2   rembourrage interieur, 1 px de chaque cote   -> 381
         - 12   section : 6 px de chaque cote               -> 369
         -  2   bordure de section                          -> 367
       ------------------------------------------------------------------ */
    .horse-record-dialog {
        width: calc(100% - 8px);
        max-width: calc(100% - 8px);
    }

    .horse-record-dialog__inner {
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        padding: 14px 1px;
    }

    .horse-record-dialog__section {
        min-width: 0;
        padding: 8px 6px;
    }

    /* Toute la chaine doit pouvoir passer sous sa largeur de contenu : sans
       `min-width: 0`, un seul descendant suffit a rouvrir le debordement. */
    .horse-record-dialog__results,
    .horse-record-dialog__year-group,
    .horse-record-dialog__result-list,
    .horse-record-dialog__result,
    .horse-record-dialog__result-main,
    .horse-record-dialog__result-details,
    .horse-record-dialog__highlights,
    .horse-record-dialog__highlight {
        min-width: 0;
        max-width: 100%;
    }

    /* FILET DE SECURITE. Les regles ci-dessus visent les maillons connus ; il
       suffit d'UN descendant oublie, ou ajoute demain, pour rouvrir le
       debordement. Cette regle universelle borne tout le sous-arbre a la
       largeur du dialogue, sans rien imposer d'autre. */
    .horse-record-dialog *,
    .horse-record-dialog *::before,
    .horse-record-dialog *::after {
        max-width: 100%;
        min-width: 0;
    }

    .horse-record-dialog__result {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 9px;
    }

    .horse-record-dialog__result-date {
        font-size: 0.6rem;
        letter-spacing: 0.02em;
    }

    .horse-record-dialog__result-main strong,
    .horse-record-course-link {
        font-size: 0.72rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .horse-record-dialog__result-details,
    .horse-record-dialog__result-meta {
        font-size: 0.62rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .horse-record-dialog__result-place {
        min-width: 0;
        min-height: 22px;
        padding: 0 7px;
        font-size: 0.62rem;
    }

    .horse-record-dialog__year-heading span {
        font-size: 0.78rem;
    }

    .horse-record-dialog__highlight {
        padding: 8px;
    }

    /* Le portrait de 96 px prenait un quart de la largeur utile. */
    .horse-record-dialog .horse-popup-dialog__hero {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 10px;
    }

    .horse-record-dialog .horse-popup-dialog__avatar {
        width: 56px;
        height: 56px;
    }

    /* LA GENEALOGIE SUR MOBILE : UNE LISTE PAR GENERATION, A PLAT.

       CE QUI N'ALLAIT PAS. A 720 px, les quatre generations passent bien en
       colonne unique — mais elles gardent l'ESPACEMENT D'ARBRE du bureau :

           .horse-genealogy__cards               { min-height: 822px; }
           .horse-genealogy__generation--1 ...   { padding-top: 322px; }
           .horse-genealogy__generation--2 ...   { padding-top: 129px; gap: 297px; }
           .horse-genealogy__generation--3 ...   { padding-top:  32px; gap: 104px; }

       Ces valeurs existent pour aligner les cartes en eventail QUAND les
       generations sont cote a cote. Empilees, elles ne produisent plus qu'un
       vide de plusieurs milliers de pixels : quatre colonnes de 822 px de haut
       pour 15 cartes de 79 px. D'ou le rendu illisible.

       CE QU'ON FAIT. On neutralise l'espacement d'arbre et chaque generation
       redevient un simple bloc titre. Les generations 2, 3 et 4 passent sur
       DEUX colonnes : 1 + 1 + 2 + 4 = 8 rangees au lieu de 15, sans rien
       masquer et sans defilement lateral.

       Hauteur : environ 560 px, contre plus de 3 300 auparavant.

       Le selecteur porte trois classes (0,3,0) : il l'emporte franchement sur
       les regles d'arbre en (0,2,0), sans dependre de l'ordre des fichiers. */
    .page--horse .horse-genealogy {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .page--horse .horse-genealogy__generation .horse-genealogy__cards {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
        padding-top: 0;
        gap: 6px;
    }

    .page--horse .horse-genealogy__generation--2 .horse-genealogy__cards,
    .page--horse .horse-genealogy__generation--3 .horse-genealogy__cards,
    .page--horse .horse-genealogy__generation--4 .horse-genealogy__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page--horse .horse-genealogy__generation {
        gap: 5px;
    }

    .page--horse .horse-genealogy__generation-header span {
        font-size: 0.5rem;
    }

    .page--horse .horse-genealogy__generation-header strong {
        font-size: 0.62rem;
    }

    /* Les cartes gardent leur fond et leur bordure : c'est ce qui distingue les
       quinze entrees les unes des autres. Elles perdent seulement leur hauteur
       imposee, qui servait a l'alignement de l'arbre. */
    .page--horse .horse-genealogy-card {
        min-height: 0;
        flex: none;
        padding: 5px 6px;
        gap: 2px;
    }

    .page--horse .horse-genealogy-card__role {
        font-size: 0.48rem;
        letter-spacing: 0.04em;
    }

    .page--horse .horse-genealogy-card__body {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 5px;
    }

    .page--horse .horse-genealogy-card__avatar {
        width: 30px;
        height: 30px;
    }

    .page--horse .horse-genealogy-card__name {
        font-size: 0.6rem;
        line-height: 1.15;
    }

    .page--horse .horse-genealogy-card__meta,
    .page--horse .horse-genealogy-card__empty {
        font-size: 0.5rem;
        line-height: 1.15;
    }

    /* LE BLOC « PLACEMENT IDEAL » : QUATRE TRIANGLES SUR UNE SEULE LIGNE.

       Une regle a `@media (max-width: 720px)` passait DELIBEREMENT les deux
       grilles a deux colonnes :

           .horse-placement-scale,
           .horse-placement-labels { grid-template-columns: repeat(2, ...); }

       D'ou le 2 x 2, et surtout des legendes qui ne sont plus sous leur
       triangle : les images et les libelles vivent dans DEUX conteneurs
       separes, `-scale` et `-labels`. Ils ne s'alignent que parce que les deux
       grilles ont le meme nombre de colonnes — c'est ainsi que le bureau
       obtient la legende sous chaque triangle, et il suffit de retablir quatre
       colonnes des deux cotes pour retrouver ce rendu.

       On ne modifie pas la regle de 720 px (elle sert peut-etre aux tablettes
       ailleurs) : `.page--horse` ajoute une classe, donc plus de poids, et
       l'emporte quel que soit l'ordre des media queries.

       Place disponible : 369 px dans le panneau, moins 3 gouttieres de 6 px,
       soit environ 87 px par colonne. Le triangle est ramene a 72 px et la
       legende a 0,52 rem — « Dans le dos », la plus longue, y tient. */
    .page--horse .horse-placement-scale,
    .page--horse .horse-placement-labels {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .page--horse .horse-placement-scale {
        margin-top: 6px;
    }

    .page--horse .horse-placement-token {
        min-height: 0;
    }

    .page--horse .horse-placement-token__image {
        width: min(100%, 72px);
        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
    }

    .page--horse .horse-placement-labels {
        margin-top: 4px;
    }

    .page--horse .horse-placement-labels span {
        font-size: 0.52rem;
        line-height: 1.2;
    }

    /* LE BLOC « LAD ATTITRE ».
       Il n'avait AUCUNE regle de taille : son texte restait a la fonte du corps
       (1 rem) pendant que le reste de la page etait descendu a 0,52-0,62 rem.
       D'ou un pave deux fois plus gros que tout ce qui l'entoure.

       `--stacked` et `horse-sheet-lad-lock` ne servent qu'ici (verifie : une
       seule occurrence dans tout le site), la portee est donc exacte — les
       autres blocs en `horse-attribute-row` ne sont pas touches.

       Le menu deroulant perd aussi son `min-width: 180px` : dans un panneau qui
       fait 369 px de large, une largeur minimale fixe n'a plus de sens. */
    .page--horse .horse-attribute-row--stacked {
        gap: 5px;
    }

    .page--horse .horse-attribute-row--stacked > strong {
        font-size: 0.68rem;
        line-height: 1.25;
        text-align: left;
    }

    .page--horse .horse-sheet-lad-lock {
        margin: 0;
        font-size: 0.55rem;
        line-height: 1.3;
    }

    .page--horse .horse-sheet-lad-lock strong {
        font-size: inherit;
    }

    .page--horse .horse-attribute-row--stacked .horse-sheet-inline-form {
        gap: 5px;
        margin-top: 5px;
    }

    .page--horse .horse-sheet-inline-select {
        min-width: 0;
        width: 100%;
        min-height: 28px;
        padding: 0 6px;
        font-size: 0.6rem;
    }

    .page--horse .horse-attribute-row--stacked .horse-sheet-choice {
        min-height: 0;
        padding: 4px 7px;
        font-size: 0.55rem;
        line-height: 1.2;
    }

    /* « Reprendre mon cheval (preavis 1 mois) » fait 37 caracteres : le seul
       libelle assez long pour casser la regle d'une ligne. On sert les deux
       versions cote PHP et on masque la longue ici — le mot complet reste dans
       le document pour les lecteurs d'ecran. */
    .page--horse .horse-sheet-data__action .horse-sheet-inline-form {
        max-width: 100%;
    }

    /* ------------------------------------------------------------------
       LES ONZE COLONNES, AUX LARGEURS FIXEES PAR LE PROPRIETAIRE DU JEU.

         1  P.        12 px  centre        7  VH/Poids  30 px  centre, 2 lignes
         2  N°        12 px  centre        8  Ecart     40 px  centre, 2 lignes
         3  Ca.       25 px  centre        9  Mus.      40 px  centre, 6 perfs
         4  Cheval    90 px  gauche       10  Alloc.    35 px  centre
            3 lignes : cheval/jockey/ent. 11  Cote      25 px  centre
         5  S/A       25 px  centre
         6  Co.       12 px  centre       Total : 346 px

       TROIS REGLES DE BASE DEVAIENT SAUTER, sans quoi rien de ce qui suit ne
       s'applique :
         .courses-runners-table--results { min-width: 1040px }  le tableau
             refusait de descendre sous 1040 px, largeurs fixees ou non ;
         .courses-runners-table tbody td { padding: 14px }  28 px de rembourrage
             dans une colonne qui en fait 12 ;
         .courses-runners-table__value { min-width: 52px }  la pastille de
             valeur handicap, a elle seule, depassait sa colonne de 30 px.
       Chaque selecteur ci-dessous est donc qualifie `thead th` / `tbody td`
       pour peser AUTANT que la regle de base : a poids egal c'est le dernier
       ecrit qui gagne, et une media query n'ajoute aucun poids.

       LES EN-TETES SONT ABREGES EN CSS, pas dans le HTML : le mot complet reste
       dans le document et les lecteurs d'ecran l'annoncent.
       ------------------------------------------------------------------ */
    .courses-runners-table--results {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }

    .courses-runners-table-wrap:has(.courses-runners-table--results) {
        overflow-x: hidden;
    }

    .courses-runners-table--results thead th,
    .courses-runners-table--results tbody td {
        padding: 4px 1px;
        overflow: hidden;
        vertical-align: middle;
    }

    .courses-runners-table--results thead th:nth-child(1),
    .courses-runners-table--results tbody td:nth-child(1) { width: 12px; text-align: center; }
    .courses-runners-table--results thead th:nth-child(2),
    .courses-runners-table--results tbody td:nth-child(2) { width: 12px; text-align: center; }
    .courses-runners-table--results thead th:nth-child(3),
    .courses-runners-table--results tbody td:nth-child(3) { width: 25px; text-align: center; }
    .courses-runners-table--results thead th:nth-child(4),
    .courses-runners-table--results tbody td:nth-child(4) { width: 90px; text-align: left; }
    .courses-runners-table--results thead th:nth-child(5),
    .courses-runners-table--results tbody td:nth-child(5) { width: 25px; text-align: center; }
    .courses-runners-table--results thead th:nth-child(6),
    .courses-runners-table--results tbody td:nth-child(6) { width: 12px; text-align: center; }
    .courses-runners-table--results thead th:nth-child(7),
    .courses-runners-table--results tbody td:nth-child(7) { width: 30px; text-align: center; }
    .courses-runners-table--results thead th:nth-child(8),
    .courses-runners-table--results tbody td:nth-child(8) { width: 40px; text-align: center; }
    .courses-runners-table--results thead th:nth-child(9),
    .courses-runners-table--results tbody td:nth-child(9) { width: 40px; text-align: center; }
    .courses-runners-table--results thead th:nth-child(10),
    .courses-runners-table--results tbody td:nth-child(10) { width: 35px; text-align: center; }
    .courses-runners-table--results thead th:nth-child(11),
    .courses-runners-table--results tbody td:nth-child(11) { width: 25px; text-align: center; }

    .courses-runners-table--results thead th {
        font-size: 0;
        letter-spacing: 0;
        line-height: 1.1;
        white-space: pre-line;
    }

    .courses-runners-table--results thead th::before {
        font-size: 0.46rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .courses-runners-table--results thead th:nth-child(1)::before { content: "P."; }
    .courses-runners-table--results thead th:nth-child(2)::before { content: "N°"; }
    .courses-runners-table--results thead th:nth-child(3)::before { content: "Ca."; }
    .courses-runners-table--results thead th:nth-child(4)::before { content: "Cheval"; }
    .courses-runners-table--results thead th:nth-child(5)::before { content: "S/A"; }
    .courses-runners-table--results thead th:nth-child(6)::before { content: "Co."; }
    .courses-runners-table--results thead th:nth-child(7)::before { content: "VH\APoids"; }
    .courses-runners-table--results thead th:nth-child(8)::before { content: "Écart"; }
    .courses-runners-table--results thead th:nth-child(9)::before { content: "Mus."; }
    .courses-runners-table--results thead th:nth-child(10)::before { content: "Alloc."; }
    .courses-runners-table--results thead th:nth-child(11)::before { content: "Cote"; }

    .courses-runners-table--results tbody td {
        font-size: 0.5rem;
        line-height: 1.2;
    }

    /* Colonne 4 : cheval, jockey et entraineur, un par ligne. Le separateur
       oblique est balise cote PHP justement pour pouvoir disparaitre ici. */
    .courses-runners-table--results .courses-runners-table__sep {
        display: none;
    }

    .courses-runners-table--results .courses-runners-table__horse {
        display: block;
        gap: 0;
    }

    .courses-runners-table--results .courses-runners-table__horse > strong,
    .courses-runners-table--results .courses-runners-table__horse > span,
    .courses-runners-table--results .courses-runners-table__horse > span > a,
    .courses-runners-table--results .courses-runners-table__horse > span > button {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 0.5rem;
        line-height: 1.25;
        letter-spacing: 0;
        text-transform: none;
    }

    .courses-runners-table--results .courses-runners-table__horse > span > a,
    .courses-runners-table--results .courses-runners-table__horse > span > button {
        border-bottom: 0;
    }

    .courses-runners-table--results .courses-runners-table__artifice {
        min-width: 0;
        height: auto;
        margin-left: 2px;
        padding: 0 1px;
        font-size: 0.4rem;
    }

    /* Colonne 3 : la casaque tient dans ses 25 px. */
    .courses-runners-table--results tbody td .courses-runners-table__silk,
    .courses-runners-table--results tbody td .courses-runners-table__silk--empty {
        width: 21px;
        height: 21px;
    }

    /* Colonne 7 : valeur handicap au-dessus, poids en dessous. La pastille perd
       sa largeur minimale et son rembourrage. */
    .courses-runners-table--results .courses-runners-table__vh {
        gap: 0;
        justify-items: center;
    }

    .courses-runners-table--results .courses-runners-table__value {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 0.5rem;
        line-height: 1.15;
    }

    .courses-runners-table--results .courses-runners-table__vh span:last-child {
        font-size: 0.48rem;
        line-height: 1.15;
    }

    /* Colonne 8 : l'ecart s'autorise deux lignes.
       NE JAMAIS METTRE `display: block` ICI : `.courses-runners-table__gap` est
       porte par le <td> lui-meme, pas par un <span> interieur. Le passer en bloc
       le sort du modele de tableau, il n'est alors plus une cellule de sa ligne
       et perd le fond alterne -> la colonne s'eclaircit une ligne sur deux. */
    .courses-runners-table--results tbody td.courses-runners-table__gap {
        font-size: 0.48rem;
        line-height: 1.15;
        white-space: normal;
    }

    /* Colonne 9 : les six dernieres performances, sur deux lignes. */
    .courses-runners-table--results .courses-runners-table__musique {
        display: block;
        font-size: 0.48rem;
        letter-spacing: 0;
        line-height: 1.15;
        white-space: normal;
        word-break: break-all;
    }

    /* Colonne 11 : la cote. */
    .courses-runners-table--results tbody td.courses-runners-table__odds {
        font-size: 0.48rem;
    }

    /* Colonne 1 : la place. */
    .courses-runners-table--results tbody td .courses-runners-table__place strong,
    .courses-runners-table--results tbody td.courses-runners-table__place strong,
    .courses-runners-table--results tbody td:nth-child(1) strong {
        font-size: 0.5rem;
    }

    /* ------------------------------------------------------------------
       LES TABLEAUX DE PARTANTS DES ETATS 1, 2 ET 3.

       Ces trois tableaux portaient TOUS la classe `.courses-runners-table`,
       sans distinction : aucun `nth-child` ne pouvait viser une forme sans
       toucher les deux autres. Pire, les etats 2 et 3 partagent le MEME
       tableau — les colonnes N°, Corde et Cote n'apparaissent que si les paris
       sont ouverts. Trois modificateurs ont donc ete ajoutes cote PHP :
       `--partants`, `--pmu` (ajoute a `--partants` quand le PMU est la) et
       `--engagements`. L'etat 2 se lit alors `--partants:not(--pmu)`.

       Largeur utile : 377 px (voir le budget plus haut).
         etat 3 : 8 colonnes, 349 px    etat 1 : 10 colonnes, 373 px
         etat 2 : 6 colonnes, 355 px

       L'etat 1 est le plus dense : proprietaire, entraineur ET jockey y ont
       chacun leur colonne, la ou l'etat 4 les empile sous le nom du cheval.
       Leurs 52 px n'affichent pas « Laurent Tardif » d'un trait, alors ces
       trois colonnes-la s'autorisent DEUX LIGNES au lieu de couper au milieu
       d'un nom.
       ------------------------------------------------------------------ */
.courses-runners-table--partants,
    .courses-runners-table--engagements {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }

.courses-runners-table--partants thead th,
    .courses-runners-table--engagements thead th,
    .courses-runners-table--partants tbody td,
    .courses-runners-table--engagements tbody td {
        padding: 4px 1px;
        overflow: hidden;
        vertical-align: middle;
    }

.courses-runners-table--partants tbody td,
    .courses-runners-table--engagements tbody td {
        font-size: 0.5rem;
        line-height: 1.2;
    }

    /* Comme a l'etat 4 : le mot complet reste dans le document pour les
       lecteurs d'ecran, seul l'affichage est abrege. */
.courses-runners-table--partants thead th,
    .courses-runners-table--engagements thead th {
        font-size: 0;
        letter-spacing: 0;
        line-height: 1.1;
        white-space: pre-line;
    }

.courses-runners-table--partants thead th::before,
    .courses-runners-table--engagements thead th::before {
        font-size: 0.46rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    /* Colonne du cheval : nom, puis jockey et entraineur (etats 2 et 3) ou
       race (etat 1), un par ligne. */
.courses-runners-table--partants .courses-runners-table__sep,
    .courses-runners-table--engagements .courses-runners-table__sep {
        display: none;
    }

.courses-runners-table--partants .courses-runners-table__horse,
    .courses-runners-table--engagements .courses-runners-table__horse {
        display: block;
        gap: 0;
    }

.courses-runners-table--partants .courses-runners-table__horse > strong,
    .courses-runners-table--partants .courses-runners-table__horse > span,
    .courses-runners-table--partants .courses-runners-table__horse > span > a,
    .courses-runners-table--partants .courses-runners-table__horse > span > button,
    .courses-runners-table--engagements .courses-runners-table__horse > strong,
    .courses-runners-table--engagements .courses-runners-table__horse > span,
    .courses-runners-table--engagements .courses-runners-table__horse > span > a,
    .courses-runners-table--engagements .courses-runners-table__horse > span > button {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 0.5rem;
        line-height: 1.25;
        letter-spacing: 0;
        text-transform: none;
        border-bottom: 0;
    }

.courses-runners-table--partants .courses-runners-table__artifice,
    .courses-runners-table--engagements .courses-runners-table__artifice {
        min-width: 0;
        height: auto;
        margin-left: 2px;
        padding: 0 1px;
        font-size: 0.4rem;
    }

.courses-runners-table--partants tbody td .courses-runners-table__silk,
    .courses-runners-table--partants tbody td .courses-runners-table__silk--empty,
    .courses-runners-table--engagements tbody td .courses-runners-table__silk,
    .courses-runners-table--engagements tbody td .courses-runners-table__silk--empty {
        width: 21px;
        height: 21px;
    }

    /* La pastille de valeur handicap perd sa largeur minimale de 52 px : elle
       depassait a elle seule sa colonne. */
.courses-runners-table--partants .courses-runners-table__vh,
    .courses-runners-table--engagements .courses-runners-table__vh {
        gap: 0;
        justify-items: center;
    }

.courses-runners-table--partants .courses-runners-table__value,
    .courses-runners-table--engagements .courses-runners-table__value {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 0.5rem;
        line-height: 1.15;
    }

.courses-runners-table--partants .courses-runners-table__vh span:last-child,
    .courses-runners-table--engagements .courses-runners-table__vh span:last-child {
        font-size: 0.48rem;
        line-height: 1.15;
    }

.courses-runners-table--partants .courses-runners-table__musique,
    .courses-runners-table--engagements .courses-runners-table__musique {
        display: block;
        font-size: 0.48rem;
        letter-spacing: 0;
        line-height: 1.15;
        white-space: normal;
        word-break: break-all;
    }

.courses-runners-table--partants tbody td.courses-runners-table__odds,
    .courses-runners-table--engagements tbody td.courses-runners-table__odds {
        font-size: 0.48rem;
    }

    /* ETAT 3 : partants avec PMU (8 colonnes, 349 px) */
    .courses-runners-table--pmu thead th:nth-child(1),
    .courses-runners-table--pmu tbody td:nth-child(1) { width: 12px; text-align: center; }
    .courses-runners-table--pmu thead th:nth-child(2),
    .courses-runners-table--pmu tbody td:nth-child(2) { width: 25px; text-align: center; }
    .courses-runners-table--pmu thead th:nth-child(3),
    .courses-runners-table--pmu tbody td:nth-child(3) { width: 165px; text-align: left; }
    .courses-runners-table--pmu thead th:nth-child(4),
    .courses-runners-table--pmu tbody td:nth-child(4) { width: 25px; text-align: center; }
    .courses-runners-table--pmu thead th:nth-child(5),
    .courses-runners-table--pmu tbody td:nth-child(5) { width: 12px; text-align: center; }
    .courses-runners-table--pmu thead th:nth-child(6),
    .courses-runners-table--pmu tbody td:nth-child(6) { width: 30px; text-align: center; }
    .courses-runners-table--pmu thead th:nth-child(7),
    .courses-runners-table--pmu tbody td:nth-child(7) { width: 55px; text-align: center; }
    .courses-runners-table--pmu thead th:nth-child(8),
    .courses-runners-table--pmu tbody td:nth-child(8) { width: 25px; text-align: center; }

    .courses-runners-table--pmu thead th:nth-child(1)::before { content: "N°"; }
    .courses-runners-table--pmu thead th:nth-child(2)::before { content: "Ca."; }
    .courses-runners-table--pmu thead th:nth-child(3)::before { content: "Cheval"; }
    .courses-runners-table--pmu thead th:nth-child(4)::before { content: "S/A"; }
    .courses-runners-table--pmu thead th:nth-child(5)::before { content: "Co."; }
    .courses-runners-table--pmu thead th:nth-child(6)::before { content: "VH\APoids"; }
    .courses-runners-table--pmu thead th:nth-child(7)::before { content: "Mus."; }
    .courses-runners-table--pmu thead th:nth-child(8)::before { content: "Cote"; }

    /* ETAT 2 : partants sans PMU (6 colonnes, 355 px) */
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(1),
    .courses-runners-table--partants:not(.courses-runners-table--pmu) tbody td:nth-child(1) { width: 25px; text-align: center; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(2),
    .courses-runners-table--partants:not(.courses-runners-table--pmu) tbody td:nth-child(2) { width: 180px; text-align: left; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(3),
    .courses-runners-table--partants:not(.courses-runners-table--pmu) tbody td:nth-child(3) { width: 25px; text-align: center; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(4),
    .courses-runners-table--partants:not(.courses-runners-table--pmu) tbody td:nth-child(4) { width: 30px; text-align: center; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(5),
    .courses-runners-table--partants:not(.courses-runners-table--pmu) tbody td:nth-child(5) { width: 55px; text-align: center; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(6),
    .courses-runners-table--partants:not(.courses-runners-table--pmu) tbody td:nth-child(6) { width: 40px; text-align: center; }

    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(1)::before { content: "Ca."; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(2)::before { content: "Cheval"; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(3)::before { content: "S/A"; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(4)::before { content: "VH\APoids"; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(5)::before { content: "Mus."; }
    .courses-runners-table--partants:not(.courses-runners-table--pmu) thead th:nth-child(6)::before { content: "Gains"; }

    /* ETAT 1 : engagements (10 colonnes, 373 px) */
    .courses-runners-table--engagements thead th:nth-child(1),
    .courses-runners-table--engagements tbody td:nth-child(1) { width: 12px; text-align: center; }
    .courses-runners-table--engagements thead th:nth-child(2),
    .courses-runners-table--engagements tbody td:nth-child(2) { width: 25px; text-align: center; }
    .courses-runners-table--engagements thead th:nth-child(3),
    .courses-runners-table--engagements tbody td:nth-child(3) { width: 75px; text-align: left; }
    .courses-runners-table--engagements thead th:nth-child(4),
    .courses-runners-table--engagements tbody td:nth-child(4) { width: 22px; text-align: center; }
    .courses-runners-table--engagements thead th:nth-child(5),
    .courses-runners-table--engagements tbody td:nth-child(5) { width: 26px; text-align: center; }
    .courses-runners-table--engagements thead th:nth-child(6),
    .courses-runners-table--engagements tbody td:nth-child(6) { width: 22px; text-align: center; }
    .courses-runners-table--engagements thead th:nth-child(7),
    .courses-runners-table--engagements tbody td:nth-child(7) { width: 52px; text-align: left; }
    .courses-runners-table--engagements thead th:nth-child(8),
    .courses-runners-table--engagements tbody td:nth-child(8) { width: 52px; text-align: left; }
    .courses-runners-table--engagements thead th:nth-child(9),
    .courses-runners-table--engagements tbody td:nth-child(9) { width: 52px; text-align: left; }
    .courses-runners-table--engagements thead th:nth-child(10),
    .courses-runners-table--engagements tbody td:nth-child(10) { width: 35px; text-align: center; }

    .courses-runners-table--engagements thead th:nth-child(1)::before { content: "N°"; }
    .courses-runners-table--engagements thead th:nth-child(2)::before { content: "Ca."; }
    .courses-runners-table--engagements thead th:nth-child(3)::before { content: "Cheval"; }
    .courses-runners-table--engagements thead th:nth-child(4)::before { content: "S/A"; }
    .courses-runners-table--engagements thead th:nth-child(5)::before { content: "Poids"; }
    .courses-runners-table--engagements thead th:nth-child(6)::before { content: "Val."; }
    .courses-runners-table--engagements thead th:nth-child(7)::before { content: "Prop."; }
    .courses-runners-table--engagements thead th:nth-child(8)::before { content: "Entr."; }
    .courses-runners-table--engagements thead th:nth-child(9)::before { content: "Jockey"; }
    .courses-runners-table--engagements thead th:nth-child(10)::before { content: "Gains"; }

    /* Proprietaire, entraineur et jockey : 52 px chacun ne suffisent pas a
       « Laurent Tardif » sur une ligne. On coupe entre les mots, sur deux
       lignes, plutot qu'au milieu d'un nom. */
    .courses-runners-table--engagements tbody td:nth-child(7),
    .courses-runners-table--engagements tbody td:nth-child(8),
    .courses-runners-table--engagements tbody td:nth-child(9) {
        font-size: 0.46rem;
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .courses-runners-table--results .courses-runners-table__horse,
    .courses-runners-table--results .courses-runners-table__horse > strong,
    .courses-runners-table--results .courses-runners-table__horse > span,
    .courses-runners-table--results .courses-runners-table__horse > span > a,
    .courses-runners-table--results .courses-runners-table__horse > span > button {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .courses-runners-table--results .courses-runners-table__horse {
        font-size: 0.5rem;
        line-height: 1.25;
    }

    .courses-runners-table__silk-cell {
        width: 26px;
    }

    .courses-runners-table__silk,
    .courses-runners-table__silk--empty {
        width: 22px;
        height: 22px;
    }

    /* Le nom reste lisible, ce qui l'accompagne — jockey, ecurie — s'efface. */
    .courses-runners-table__horse-link {
        font-size: 0.6rem;
    }

    .courses-runners-table__jockey-link,
    .courses-runners-table__stable-link {
        font-size: 0.48rem;
        line-height: 1.15;
    }

    /* `break-all` coupait la musique caractere par caractere : « 5p » se
       retrouvait seul sur sa ligne. `anywhere` laisse le navigateur privilegier
       les points de coupure naturels et ne trancher qu'en dernier recours. */
    .courses-runners-table__musique {
        display: block;
        max-width: none;
        line-height: 1.2;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .courses-runners-table__place strong,
    .courses-runners-table__vh,
    .courses-runners-table__value,
    .courses-runners-table__gap,
    .courses-runners-table__odds {
        font-size: 0.55rem;
        white-space: nowrap;
    }

    .courses-runners-table-wrap {
        border-radius: 12px;
    }
}