/*
 * Résultats en direct — feuille de style du site public et de l'administration.
 *
 * Autonome, sans dépendance externe : un hébergement mutualisé n'a pas toujours
 * accès à un CDN, et une page de résultats doit s'afficher partout (§76).
 *
 * La charte reprend celle du prototype `Envoyer_en_ligne`, retenue par
 * l'utilisateur : bandeau bleu, cartes en grille, tableaux à entête bleu
 * collant, et un arbre de tableaux avec traits de liaison, conforme aux
 * conventions de ianseo.net (§21).
 *
 * Accessibilité (§39) : contrastes suffisants, focus visible, cibles tactiles
 * d'au moins 44 px sur les commandes, et aucune information portée par la seule
 * couleur — chaque état porte aussi un mot.
 */

:root {
    --bleu: #0254a8;
    --bleu-fonce: #01367c;
    --bleu-clair: #eef4fd;
    --vert: #17803d;
    --vert-clair: #e9f7ee;
    --orange: #b45309;
    --orange-clair: #fdf5e7;
    --rouge: #b91c1c;
    --rouge-clair: #fdeeee;
    --or: #b8860b;
    --texte: #24292c;
    --muted: #6b7075;
    --bord: #dfe2e5;
    --fond: #f6f7f9;

    /* Alias conservés pour l'administration, écrite avant ce changement de charte. */
    --fg: var(--texte);
    --fg-soft: var(--muted);
    --bg: #fff;
    --bg-soft: var(--fond);
    --line: var(--bord);
    --accent: var(--bleu);
    --ok: var(--vert);
    --warn: var(--orange);
    --err: var(--rouge);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--texte);
    background: var(--fond);
}

a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
    outline: 3px solid var(--bleu);
    outline-offset: 2px;
}

h1 { font-size: 22px; color: var(--bleu-fonce); margin: 0 0 8px; }
h2 { font-size: 17px; margin: 24px 0 8px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 24px; padding-bottom: 24px; }

.hint, .muted { color: var(--muted); font-size: 13px; }
.nowrap { white-space: nowrap; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Lien d'évitement : premier élément focusable de la page (§39). */
.skip {
    position: absolute; left: -9999px;
    background: var(--bleu-fonce); color: #fff; padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 0; top: 0; }

/* ---- En-tête, fil d'Ariane, pied ---- */
header.site { background: var(--bleu-fonce); color: #fff; padding: 14px 0; }
header.site .brand { color: #fff; display: block; }
header.site .brand:hover { text-decoration: none; }
header.site .brand b { display: block; font-size: 19px; }
header.site .brand span { display: block; font-size: 13px; opacity: .8; }

nav.crumbs {
    background: #fff; border-bottom: 1px solid var(--bord);
    padding: 9px 0; font-size: 13px;
}
nav.crumbs .sep { color: var(--muted); margin: 0 7px; }
nav.crumbs .here { color: var(--muted); }

footer.site {
    margin-top: 48px; padding: 18px 0;
    border-top: 1px solid var(--bord); background: #fff;
    color: var(--muted); font-size: 13px;
}
footer.site a { color: var(--muted); text-decoration: underline; }

/* Bandeau d'information (§37). */
.banner {
    background: var(--orange-clair);
    border-bottom: 1px solid #e0c98a;
    padding: 9px 16px; text-align: center; font-size: 14px;
}

.welcome {
    background: #fff; border: 1px solid var(--bord);
    border-left: 4px solid var(--bleu); border-radius: 0 8px 8px 0;
    padding: 14px 16px; margin-bottom: 22px;
}

/* ---- Recherche ---- */
form.search { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
form.search input[type=search] {
    flex: 1 1 260px; padding: 9px 12px; font-size: 15px;
    border: 1px solid var(--bord); border-radius: 6px;
}
form.search input:focus {
    outline: none; border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(2, 84, 168, .13);
}
form.search button {
    padding: 9px 18px; min-height: 44px; border: 0; border-radius: 6px;
    background: var(--bleu); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
form.search button:hover { background: var(--bleu-fonce); }
form.search .clear { align-self: center; font-size: 13px; color: var(--muted); }

/* ---- Cartes de compétition ---- */
.group { margin-bottom: 34px; }
.group h2 {
    font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); margin: 0 0 12px; font-weight: 600;
}
.group .more { margin: 12px 0 0; font-size: 14px; }

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.card {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fff; border: 1px solid var(--bord); border-radius: 8px;
    padding: 14px; color: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.card:hover { text-decoration: none; border-color: var(--bleu); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.card-logo { width: 52px; height: 52px; object-fit: contain; flex: none; }
.card-body { min-width: 0; }
.card h3 { margin: 0 0 4px; font-size: 15px; color: var(--bleu-fonce); }
.card-meta { margin: 0; font-size: 13px; color: var(--muted); }
.card-org { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.card-upd { margin: 6px 0 0; font-size: 11px; color: #9aa0a6; }

/* Étiquette d'état : le mot est écrit, la couleur ne fait que renforcer (§39). */
.badge {
    display: inline-block; margin-top: 7px; padding: 2px 9px;
    border-radius: 11px; font-size: 11px; font-weight: 700;
    background: #f0f2f4; color: var(--muted);
}
.badge-live { background: var(--vert-clair); color: var(--vert); }

/* Repère « fraîchement publié » (§19-A1) : astérisque + heure écrite. */
.fresh {
    display: inline-block; margin-left: 6px; padding: 1px 8px;
    border-radius: 11px; background: var(--vert-clair); color: var(--vert);
    font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* ---- Page de compétition ---- */
.comp-head {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fff; border: 1px solid var(--bord); border-radius: 8px;
    padding: 18px; margin-bottom: 20px;
}
.comp-logo { width: 76px; height: 76px; object-fit: contain; flex: none; }
.comp-head h1 { margin: 0 0 5px; }
.comp-meta { margin: 0; color: var(--muted); font-size: 14px; }
.comp-upd { margin: 8px 0 0; font-size: 12px; color: #9aa0a6; }

.page-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.btn {
    display: inline-block; padding: 9px 16px; min-height: 44px; line-height: 1.6;
    border: 1px solid var(--bord); border-radius: 6px;
    background: #fff; color: var(--texte); font: inherit; font-size: 14px; cursor: pointer;
}
.btn:hover { border-color: var(--bleu); text-decoration: none; }

/* ---- Listes de documents ---- */
.doc-group { margin-bottom: 26px; }
.doc-group h2 {
    font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); margin: 0 0 10px; font-weight: 600;
}
.doc-list {
    list-style: none; margin: 0; padding: 0; background: #fff;
    border: 1px solid var(--bord); border-radius: 8px; overflow: hidden;
}
.doc-list li + li { border-top: 1px solid var(--bord); }
.doc-list a {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 11px 14px; min-height: 44px; color: inherit;
}
.doc-list a:hover { background: var(--bleu-clair); text-decoration: none; }
.doc-title { font-weight: 500; }
.doc-upd { font-size: 12px; color: var(--muted); flex: none; }

/* ---- Page document ---- */
.doc-head { margin-bottom: 14px; }
.doc-head h1 { margin: 0 0 4px; font-size: 21px; }
.doc-meta { margin: 0; font-size: 13px; color: var(--muted); }
.doc-body { background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 16px; }
.back { margin-top: 20px; }

.section-head { margin: 22px 0 10px; }
.section-head:first-child { margin-top: 0; }
.section-head h3 { margin: 0; font-size: 17px; color: var(--bleu-fonce); }

/* ---- Tables de résultats ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; }

table.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
table.grid th, table.grid td { padding: 6px 9px; text-align: left; white-space: nowrap; }
table.grid thead th {
    background: var(--bleu); color: #fff; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0;
}
table.grid tbody tr { border-bottom: 1px solid #eceef0; }
table.grid tbody tr:hover { background: var(--bleu-clair); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .strong { font-weight: 700; }
table.grid .name { white-space: normal; min-width: 170px; font-weight: 500; }
table.grid .club { white-space: normal; color: var(--muted); font-size: 13px; }
table.grid .dist { color: var(--muted); }

/* ---- Détail des flèches (§20) ---- */
.arrows-block { margin-top: 14px; }
.arrows-block > h4 { margin: 0 0 4px; font-size: 15px; color: var(--bleu-fonce); }

details.arrows {
    background: #fff; border: 1px solid var(--bord); border-radius: 7px; margin: 6px 0;
}
details.arrows > summary {
    cursor: pointer; padding: 9px 12px; min-height: 44px;
    display: flex; align-items: center; gap: 10px; font-size: 14px;
}
details.arrows[open] > summary { border-bottom: 1px solid var(--bord); background: #fbfcfd; }
.ar-rank { min-width: 26px; color: var(--muted); font-size: 12px; }
.ar-name { flex: 1 1 auto; font-weight: 500; }
.ar-total { font-weight: 700; font-variant-numeric: tabular-nums; }

.arrow-dists { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px; }
.arrow-dist h5 { margin: 0 0 5px; font-size: 13px; color: var(--bleu-fonce); font-weight: 600; }

table.ends { border-collapse: collapse; font-size: 13px; background: #fff; }
table.ends th, table.ends td {
    border: 1px solid var(--bord); padding: 3px 7px;
    text-align: center; font-variant-numeric: tabular-nums;
}
table.ends .endno { background: #f6f7f9; color: var(--muted); font-size: 12px; }
table.ends td.arw { min-width: 30px; }
table.ends td.gold { background: #fff8dd; font-weight: 700; color: #8a6d0b; }
table.ends td.high { background: #f2f8ff; font-weight: 600; }
table.ends td.miss { color: var(--rouge); }
/* Flèche douteuse : l'astérisque porte l'information, l'italique la renforce. */
table.ends td.doubt { font-style: italic; }
table.ends td.tot { font-weight: 700; background: #f6f7f9; }

/* ---- Arbre des tableaux (§21) ----
   Chaque tour est une colonne ; les emplacements se partagent à parts égales la
   hauteur de leur colonne. Comme chaque tour compte deux fois moins de matchs
   que le précédent, le centre d'un match tombe exactement au milieu de la paire
   qui l'alimente : les traits de liaison se tracent donc en CSS pur, sans
   aucun calcul de position ni JavaScript. */

.bracket-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.bracket { display: flex; align-items: stretch; min-width: min-content; }

.round { display: flex; flex-direction: column; min-width: 250px; flex: 1 1 250px; }
/* Le premier tour porte le club : il lui faut plus de place, comme sur ianseo.net. */
.round-first { min-width: 330px; flex: 1 1 330px; }

.round-title {
    text-align: center; font-size: 12px; font-weight: 600;
    color: #fff; background: var(--bleu); border-radius: 3px;
    padding: 4px 8px; margin: 0 16px 8px 0;
}
.round:not(:first-child) .round-title { margin-left: 16px; }
.round-last .round-title { margin-right: 0; }

.round-body { flex: 1; display: flex; flex-direction: column; }

/* flex-basis auto (et non 0) : un emplacement ne peut pas devenir plus court
   que sa carte, sinon les matchs d'un même tour se chevauchent. Le tour le plus
   large impose la hauteur de l'arbre, les suivants y répartissent leurs
   emplacements — moitié moins nombreux. */
.slot {
    flex: 1 0 auto; display: flex; align-items: center;
    position: relative; padding: 6px 16px 6px 0;
}
.round:not(:first-child) .slot { padding-left: 16px; }
.round-last .slot { padding-right: 0; }

/* Trait horizontal sortant, vers le tour suivant. */
.round:not(.round-last) .slot::after {
    content: ''; position: absolute; right: 0; top: 50%;
    width: 16px; border-top: 2px solid var(--bord);
}
/* Trait vertical reliant les deux matchs d'une paire : le premier descend de
   son centre vers le bas, le second monte du haut vers son centre. */
.round:not(.round-last) .slot::before {
    content: ''; position: absolute; right: 0; border-right: 2px solid var(--bord);
}
.round:not(.round-last) .slot:nth-child(odd)::before { top: 50%; bottom: 0; }
.round:not(.round-last) .slot:nth-child(even)::before { top: 0; bottom: 50%; }
/* Trait horizontal entrant, depuis le tour précédent.
   Ancré sur .bmatch-main — les DEUX LIGNES du match — et non sur .bmatch, qui
   contient aussi la grille des volées : son milieu tomberait sous les cases. */
.round:not(:first-child) .bmatch-main::before {
    content: ''; position: absolute; left: -16px; top: 50%;
    width: 16px; border-top: 2px solid var(--bord);
}

.slot .bmatch { flex: 1 1 auto; min-width: 0; }
.slot .bmatch-main { position: relative; }

/* Match dans l'arbre : des lignes fines, pas une carte — convention ianseo. */
.brow {
    display: flex; align-items: center; gap: 7px;
    border: 1px solid var(--bleu); border-bottom: 0;
    padding: 3px 6px; font-size: 13px; background: #fff; min-height: 25px;
}
.brow:last-of-type { border-bottom: 1px solid var(--bleu); }
/* Emplacement d'exempt : conservé pour ne pas décaler l'arbre, mais sans aucun
   trait — un cadre vide semblerait annoncer un match qui n'existe pas. */
/* Le vainqueur n'est pas coloré sur ianseo.net : le gras suffit, et il reste
   lisible à l'impression comme en noir et blanc (§39). */
.brow-win .bname { font-weight: 700; }

.bseed { flex: none; min-width: 15px; font-size: 11px; color: var(--muted); text-align: right; }
/* Le nom tient sur une ligne : un retour à la ligne ferait varier la hauteur
   des matchs et désalignerait les tours. */
.bname { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Le club cède la place avant le nom : c'est le nom qu'on cherche en lisant un
   tableau, et lui seul identifie l'archer. */
.bclub { flex: 0 4 auto; min-width: 0; font-size: 11px; color: var(--muted);
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpts {
    flex: none; min-width: 20px; text-align: center; font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid var(--bleu); padding-left: 6px; margin-left: auto;
}
.bpts-bye { font-weight: 600; font-size: 11px; color: var(--muted); }

/* Petite finale : hors de l'arbre, elle ne se divise pas par deux. */
.bracket-bronze { margin: 16px 0; max-width: 420px; }
.bracket-bronze h4 {
    margin: 0 0 6px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}

/* Détail des matchs, sous l'arbre. */
details.bracket-all { margin: 18px 0 0; }
details.bracket-all > summary { cursor: pointer; padding: 10px 0; min-height: 44px; font-weight: 600; }
.match-detail { margin: 14px 0 20px; }
.match-detail h5 { margin: 0 0 5px; font-size: 14px; color: var(--bleu-fonce); }
.match-detail table.ends th { text-align: left; white-space: nowrap; }
.match-detail tr.win th { font-weight: 700; }
.setpt { color: var(--muted); font-size: .82em; }

/* ---- Bandeaux ---- */
.notice { padding: 11px 15px; border-radius: 0 7px 7px 0; margin: 12px 0; font-size: 14px; }
.notice p { margin: 4px 0; }
.notice-info { background: var(--bleu-clair); border-left: 4px solid var(--bleu); }
.notice-ok   { background: var(--vert-clair); border-left: 4px solid var(--vert); }
.notice-warn { background: var(--orange-clair); border-left: 4px solid var(--orange); }
.notice-err  { background: var(--rouge-clair); border-left: 4px solid var(--rouge); }

/* ---- Pagination ---- */
.pager { display: flex; gap: 14px; align-items: center; margin: 20px 0; font-size: 14px; }

/* ---- Formulaires (administration) ---- */
.form label { display: block; margin: 12px 0; font-weight: 600; font-size: 14px; }
.form input, .form select, .form textarea {
    display: block; width: 100%; margin-top: 4px; padding: 9px 12px;
    font: inherit; font-weight: 400;
    border: 1px solid var(--bord); border-radius: 6px; background: #fff; color: var(--texte);
}
.form-narrow { max-width: 420px; }
.form label.check { font-weight: 400; }
.form label.check input { display: inline; width: auto; margin-right: 6px; }
form.inline { display: inline; }

button {
    font: inherit; padding: 9px 16px; min-height: 44px; cursor: pointer;
    border: 1px solid var(--bleu); border-radius: 6px;
    background: var(--bleu); color: #fff; font-size: 14px; font-weight: 600;
}
button:hover { background: var(--bleu-fonce); }
button[disabled] { opacity: .5; cursor: not-allowed; }

code { background: var(--fond); padding: 1px 5px; border-radius: 3px; font-size: .92em; }
code.big { font-size: 17px; letter-spacing: .04em; }

/* ---- Petits écrans ---- */
@media (max-width: 640px) {
    .comp-head { flex-direction: column; }
    .comp-head h1 { font-size: 19px; }
    table.grid { font-size: 13px; }
    table.grid th, table.grid td { padding: 5px 7px; }
    .doc-list a { flex-direction: column; align-items: flex-start; gap: 3px; }
    .round { min-width: 205px; flex-basis: 205px; }
    .round-first { min-width: 250px; flex-basis: 250px; }
    .bclub { display: none; }
}

/* ---- Impression (§41) ----
   Ces règles servent aussi à l'export PDF via « Enregistrer au format PDF » du
   navigateur, ce qui évite d'embarquer une bibliothèque PDF sur l'hébergement. */
@media print {
    header.site, footer.site, nav.crumbs, form.search, .page-actions,
    .back, .skip, .banner, .btn { display: none !important; }

    body { background: #fff; color: #000; font-size: 11px; }
    .wrap { max-width: none; padding: 0; }
    main.wrap { padding: 0; }
    .doc-body { border: 0; padding: 0; }
    .doc-head h1 { font-size: 16px; }

    table.grid { font-size: 10px; }
    table.grid thead th { background: #e8e8e8 !important; color: #000; position: static; }
    table.grid thead { display: table-header-group; }   /* entêtes répétés par page */
    table.grid tbody tr { break-inside: avoid; }

    /* Le détail se déplie sur le papier : sinon la feuille sort vide. */
    details.arrows, details.bracket-all { border: 0; }
    details > div, details > .match-detail { display: block !important; }

    .bracket-scroll { overflow: visible !important; }
    .bracket { min-width: 0; }
    .round { min-width: 0; flex: 1 1 0; }
    .round-first { min-width: 0; flex: 1.9 1 0; }
    .round-title { background: #e8e8e8 !important; color: #000 !important; }
    .brow { border-color: #666 !important; min-height: 0; padding: 1px 4px; font-size: 10px; }
    .bpts { border-left-color: #666 !important; }
    .slot, .card, .doc-list, .match-detail { break-inside: avoid; }

    a { color: #000; text-decoration: none; }
}

/* ---- Dépliage du détail, dans le tableau ---- */
th.expander, td.expander { width: 30px; padding: 4px; text-align: center; }
button.toggle {
    width: 24px; height: 24px; min-height: 0; line-height: 1; padding: 0;
    border: 1px solid var(--bord); border-radius: 4px; background: #fff;
    color: var(--bleu); font-size: 15px; font-weight: 700; cursor: pointer;
}
button.toggle:hover { border-color: var(--bleu); background: var(--bleu-clair); }

tr.detail-row > td { background: var(--fond); padding: 12px 14px; white-space: normal; }
tr.detail-row:hover { background: var(--fond); }
.arrow-detail-head { margin-bottom: 9px; font-size: 14px; }
table.ends thead th {
    background: #eef0f2; color: var(--muted);
    font-size: 11px; font-weight: 600; position: static;
}
table.ends td.cumul { background: #f6f7f9; color: var(--muted); font-weight: 600; }
table.ends td.empty { background: #fafbfc; }

@media print {
    th.expander, td.expander { display: none !important; }
    /* Seul le détail effectivement déplié à l'écran part à l'impression. */
    tr.detail-row[hidden] { display: none; }
}

/* ---- Onglets d'une épreuve à l'autre ---- */
.doc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.doc-tabs .tab {
    padding: 7px 13px; min-height: 38px; line-height: 1.6;
    border: 1px solid var(--bord); border-radius: 16px;
    background: #fff; font-size: 13px; color: var(--texte);
}
.doc-tabs .tab:hover { border-color: var(--bleu); text-decoration: none; }
/* L'onglet courant est plein ET en gras : jamais la couleur seule (§39), et
   aria-current le dit aux lecteurs d'écran. */
.doc-tabs .tab.active {
    background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 600;
}
@media print { .doc-tabs { display: none !important; } }

/* Retour à la compétition : proposé en haut ET en bas, parce qu'une liste de
   départ fait plusieurs écrans et qu'on ne doit pas avoir à remonter. */
.btn-back { font-weight: 600; }
.page-actions-bottom { margin: 24px 0 0; }
@media print { .page-actions-bottom { display: none !important; } }

/* Scores volée par volée sous chaque match, comme sur ianseo.net : un tireur
   par ligne, une colonne par volée. On voit ainsi comment le match s'est joué,
   pas seulement qui l'a gagné. */
table.bends { border-collapse: collapse; }
table.bends td {
    border: 1px solid var(--bord); padding: 0 4px; min-width: 20px;
    text-align: center; font-size: 10px; color: var(--muted);
    font-variant-numeric: tabular-nums; line-height: 1.5;
}
/* Le numéro de licence du club : présent sur ianseo.net, mais c'est le nom
   qu'on lit — il cède donc la place en premier sur écran étroit. */
.bcode { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .bcode { display: none; } }
@media print { .bcode { display: none; } }

/* Statistiques par club : tableau croisé, entête sur deux rangs. */
.stats-cross th[scope="colgroup"] { text-align: center; border-left: 1px solid rgba(255,255,255,.35); }
.stats-cross tbody th { background: var(--fond); font-weight: 600; }
.stats-cross td.num { min-width: 2.4rem; }

/* Logos de clubs. §22 : quand un club n'en a pas, il n'y a NI emplacement vide
   NI logo générique — la balise n'est simplement pas émise. */
.club-logo { height: 16px; width: auto; max-width: 28px; object-fit: contain; vertical-align: middle; }
.bflag { flex: none; }
.stats-cross .club-logo { margin-right: 5px; }
@media print { .club-logo { max-height: 12px; } }

/* Images officielles de la compétition : logo à gauche, second à droite, et
   bandeau de pied. Elles viennent d'ianseo et priment sur l'habillage du site
   dans les rendus officiels (§22). */
.comp-head { justify-content: space-between; }
.comp-logo-right { margin-left: auto; }
.comp-banner { margin: 0 0 20px; text-align: center; }
.comp-banner img { max-width: 100%; height: auto; max-height: 90px; }
@media (max-width: 640px) { .comp-logo-right { margin-left: 0; } }

/* --- Match dans l'arbre : tireurs à gauche, volées à droite ---
   Disposition de ianseo.net : la grille des volées est POSÉE À CÔTÉ du match,
   pas dessous, ce qui laisse lire une colonne de tours d'un seul balayage. */
/* Le détail des volées se lit SOUS les deux cases du match, pas à côté.
   Placé à droite, il poussait les noms et rétrécissait les cases sur les tours
   larges ; dessous, chaque match garde sa pleine largeur et la grille se lit
   dans le prolongement des deux lignes qu'elle détaille. */
.bmatch { display: block; }
.bmatch-main { min-width: 0; }

/* Horaire programmé du match. */
.bsched {
    font-size: 10px;
    color: var(--muted);
    padding: 0 0 1px 2px;
    font-variant-numeric: tabular-nums;
}

/* Exempt : le cadre complet, avec le mot dedans. Sans trait, l'emplacement
   passait pour un match manquant. */
.brow-bye {
    color: var(--muted);
    font-style: italic;
    background: #fafbfc;
}

/* La grille des volées, sous le match qu'elle détaille. */
table.bends { margin: 2px 0 0; }

/* Emplacement d'un match PAS ENCORE JOUÉ : le CADRE reste, il est simplement
   vide. L'ancienne règle le rendait sans bordure (« border: 0 !important »), ce
   qui faisait un trou dans le tableau. À distinguer du bye (.brow-bye), qui est
   un tour sauté faute d'adversaire. */
.brow-empty { color: var(--muted); }

/* Composition d'une équipe, dans le classement des qualifications par équipes.
   Le score individuel explique le total de l'équipe : c'est la première chose
   qu'on cherche devant un classement par équipes. */
td.members { white-space: nowrap; line-height: 1.5; }
.team-members { font-size: 12px; }

/* --- Page de compétition : individuel à gauche, équipes à droite ---
   Disposition reprise de la page de compétition de ianseo.net, sur laquelle
   chaque phase se lit en deux colonnes. */
.doc-cols { display: flex; flex-wrap: wrap; gap: 0; }
.doc-col {
    flex: 1 1 50%;
    min-width: 240px;
    border-left: 1px solid var(--line);
    padding: 0 0 4px;
}
.doc-col:first-child { border-left: 0; }
.doc-col > h3 {
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--line);
    background: #fafbfc;
}
.doc-none { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 13px; }

@media (max-width: 560px) {
    .doc-col { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--line); }
    .doc-col:first-child { border-top: 0; }
}

/* --- Bandeau de prévisualisation ---
   Volontairement criard : il doit être impossible de confondre une
   prévisualisation avec la page publique, sur une capture d'écran comme sur
   un vidéoprojecteur. */
.preview-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #8a4b00;
    color: #fff;
    padding: 8px 14px;
    font-size: 14px;
    text-align: center;
}
.preview-bar a { color: #fff; text-decoration: underline; }

@media print {
    /* Le bandeau de prévisualisation n'a rien à faire sur un papier : il
       s'adresse à l'administrateur devant son écran, pas au lecteur. */
    .preview-bar { display: none; }
}