/* =============================================================================
   assets/spot-archives-2027.css - turf.bzh
   -----------------------------------------------------------------------------
   L'HISTORIQUE DES SYNTHESES, A LA CHARTE 2027

   Le tableau des archives etait reste a l'ancienne charte : boutons verts pleins,
   pastilles saturees, en-tete bleu nuit, medailles or et argent sur les trois
   premieres lignes. Il jurait avec le reste de la page et, plus grave, il faisait
   croire a un palmares la ou il n'y a qu'un ordre de tri.

   TROIS PARTIS PRIS.

   1. LA COULEUR PORTE UNE INFORMATION, JAMAIS UNE DECORATION. Le vert ne marque
      que les paris reellement touches, l'ambre l'attente, le gris la perte. Une
      ligne n'est jamais coloree par son rang dans le tri.

   2. DATATABLES EST HABILLE, PAS COMBATTU. On surcharge ses classes plutot que
      de reecrire son gabarit : une mise a jour de la bibliotheque ne doit pas
      casser la page.

   3. LE TABLEAU DEBORDE HORIZONTALEMENT PLUTOT QUE DE COMPRIMER SES COLONNES.
      Une arrivee de quinte sur trois lignes ne se lit pas ; une barre de
      defilement, si.

   Portee : tout est prefixe .qs-archives-section pour ne rien toucher ailleurs.
   ========================================================================== */

.qs-archives-section{
  --ar-acc:#0a7c91; --ar-acc-d:#075c6c; --ar-acc-l:#e3f1f4;
  --ar-ink:#0d2126; --ar-ink2:#3a565e; --ar-mut:#6b858d;
  --ar-bd:#dbe5e8; --ar-bd2:#c2d3d8; --ar-bg:#f1f6f7;
  --ar-ok:#0b7a5e; --ar-ok-bg:#ecf7f3; --ar-ok-bd:#a8dcc9;
  --ar-wa:#a8560a; --ar-wa-bg:#fdf4ea; --ar-wa-bd:#f0d3ae;
  --ar-r:10px; --ar-r-s:6px;

  font-variant-numeric:tabular-nums;
  color:var(--ar-ink);
}

/* ------------------------------------------------------------------ titre -- */
.qs-archives-section .qs-section-title{
  font-size:1.25rem; font-weight:800; letter-spacing:-.01em;
  color:var(--ar-ink); margin:0 0 .25rem; border:0; padding:0;
}
.qs-archives-section .qs-section-subtitle{
  font-size:.9rem; color:var(--ar-ink2); margin:0 0 1rem; max-width:62ch;
}

/* ----------------------------------------------------------------- filtres -- */
.qs-archives-section .qs-filters-bar{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:flex-end;
  padding:.7rem .8rem; margin:0 0 .8rem;
  background:var(--ar-bg); border:1px solid var(--ar-bd); border-radius:var(--ar-r);
}
.qs-archives-section .qs-filter-group{
  display:flex; flex-direction:column; gap:.2rem; min-width:0;
}
.qs-archives-section .qs-filter-group label{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ar-mut);
}
.qs-archives-section .qs-select{
  font:inherit; font-size:.86rem; font-weight:600; color:var(--ar-ink);
  background:#fff; border:1px solid var(--ar-bd2); border-radius:var(--ar-r-s);
  padding:.4rem .6rem; min-height:2.4rem; min-width:9rem; max-width:100%;
}
.qs-archives-section .qs-select:focus-visible{
  outline:2px solid var(--ar-acc); outline-offset:1px;
}

/* ----------------------------------------- barre d'outils de DataTables -- */
.qs-archives-section .dt-buttons{ display:flex; flex-wrap:wrap; gap:.4rem; }
.qs-archives-section .dt-button,
.qs-archives-section button.dt-button{
  font:inherit; font-size:.82rem; font-weight:700; cursor:pointer;
  color:#fff; background:var(--ar-acc-d);
  border:1px solid var(--ar-acc-d); border-radius:var(--ar-r-s);
  padding:.42rem .8rem; min-height:2.4rem;
  background-image:none; box-shadow:none; text-shadow:none;
}
.qs-archives-section .dt-button:hover,
.qs-archives-section button.dt-button:hover:not(.disabled){
  background:var(--ar-acc); border-color:var(--ar-acc); background-image:none;
}
.qs-archives-section .dt-button:focus-visible{ outline:2px solid var(--ar-acc); outline-offset:2px; }

/* ------------------------------------------------------- champ de recherche */
.qs-archives-section .dt-search,
.qs-archives-section .dataTables_filter{ margin:.4rem 0; }
.qs-archives-section .dt-search label,
.qs-archives-section .dataTables_filter label{
  font-size:.8rem; font-weight:600; color:var(--ar-ink2);
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}
.qs-archives-section .dt-search input,
.qs-archives-section .dataTables_filter input{
  font:inherit; font-size:.86rem; color:var(--ar-ink);
  background:#fff; border:1px solid var(--ar-bd2); border-radius:var(--ar-r-s);
  padding:.4rem .6rem; min-height:2.4rem; margin:0; max-width:100%;
}
.qs-archives-section .dt-search input:focus-visible,
.qs-archives-section .dataTables_filter input:focus-visible{
  outline:2px solid var(--ar-acc); outline-offset:1px;
}
.qs-archives-section .dt-length select,
.qs-archives-section .dataTables_length select{
  font:inherit; font-size:.84rem; border:1px solid var(--ar-bd2);
  border-radius:var(--ar-r-s); padding:.25rem .4rem; background:#fff;
}
.qs-archives-section .dt-info,
.qs-archives-section .dataTables_info{ font-size:.8rem; color:var(--ar-mut); padding-top:.6rem; }

/* ------------------------------------------------------------------ table -- */
/* La table deborde plutot que de comprimer : une arrivee ne se lit pas sur
   trois lignes. */
.qs-archives-section .qs-datatable-wrapper{
  background:#fff; border:1px solid var(--ar-bd); border-radius:var(--ar-r);
  padding:.7rem .8rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.qs-archives-section table.dataTable{
  width:100% !important; border-collapse:collapse; font-size:.86rem;
  border-spacing:0; margin:.4rem 0 !important;
}
.qs-archives-section table.dataTable thead th{
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ar-mut); text-align:left; background:#fff;
  border-bottom:2px solid var(--ar-bd2); padding:.5rem .55rem; white-space:nowrap;
}
.qs-archives-section table.dataTable tbody td{
  padding:.5rem .55rem; border-bottom:1px solid var(--ar-bd);
  color:var(--ar-ink); vertical-align:middle;
}
/* ---------------------------------------------- fonds de lignes et cascade --
   L'ORDRE DE CES REGLES EST LE SUJET. DataTables pose ses fonds avec des
   selecteurs a quatre classes (« table.dataTable.stripe > tbody > tr:nth-child
   (odd) > * ») ; les neutraliser demande au moins autant de poids, et ce poids
   ecrase alors les regles utiles si elles sont ecrites plus simplement. Les
   quatre regles ci-dessous sont donc taillees a la meme specificite, et celles
   qui doivent gagner excluent explicitement les cas qu'elles ne visent pas.

   Ce qui doit rester visible, dans cet ordre de priorite :
     1. le survol,
     2. la journee pas encore courue, en ambre,
     3. rien d'autre : pas de zebrure, pas de colonne de tri grisee, pas de
        medaille sur les trois premieres lignes. */

/* 1. Les fonds de DataTables, retires partout sauf sur les lignes en attente. */
.qs-archives-section table.dataTable.stripe > tbody > tr:nth-child(odd):not(.qs-row-pending) > *,
.qs-archives-section table.dataTable.display > tbody > tr:nth-child(odd):not(.qs-row-pending) > *,
.qs-archives-section table.dataTable.order-column > tbody > tr:not(.qs-row-pending) > .sorting_1,
.qs-archives-section table.dataTable.order-column > tbody > tr:not(.qs-row-pending) > .sorting_2,
.qs-archives-section table.dataTable.order-column > tbody > tr:not(.qs-row-pending) > .sorting_3,
.qs-archives-section table.dataTable.display > tbody > tr:not(.qs-row-pending) > .sorting_1,
.qs-archives-section table.dataTable.display > tbody > tr:not(.qs-row-pending) > .sorting_2,
.qs-archives-section table.dataTable.display > tbody > tr:not(.qs-row-pending) > .sorting_3,
.qs-archives-section table.dataTable.hover > tbody > tr:not(:hover):not(.qs-row-pending) > *{
  box-shadow:none; background-color:transparent;
}

/* 2. La journee pas encore courue. Meme poids que la regle ci-dessus, posee
      apres elle, et elle couvre aussi la colonne triee. */
.qs-archives-section table.dataTable.display > tbody > tr.qs-row-pending > *,
.qs-archives-section table.dataTable.stripe > tbody > tr.qs-row-pending > *,
.qs-archives-section table.dataTable.order-column > tbody > tr.qs-row-pending > *,
.qs-archives-section table.dataTable > tbody > tr.qs-row-pending > *{
  box-shadow:none; background-color:var(--ar-wa-bg); color:var(--ar-ink2);
}

/* 3. Le survol passe devant tout le reste. */
.qs-archives-section table.dataTable.display > tbody > tr:hover > *,
.qs-archives-section table.dataTable.stripe > tbody > tr:hover > *,
.qs-archives-section table.dataTable.order-column > tbody > tr:hover > *,
.qs-archives-section table.dataTable.hover > tbody > tr:hover > *,
.qs-archives-section table.dataTable > tbody > tr:hover > *{
  box-shadow:none; background-color:var(--ar-acc-l);
}

/* 4. Aucune medaille : le rang dans le tri n'est pas une performance. */
.qs-archives-section table.dataTable > tbody > tr:nth-child(-n+3) > td{ background-image:none; }

/* La colonne du depliage responsive ne porte pas de donnee : elle ne prend que
   la place de sa poignee. */
.qs-archives-section table.dataTable td.dtr-control,
.qs-archives-section table.dataTable th.dtr-control{
  width:1.4rem; padding-left:.2rem; padding-right:.2rem;
}
.qs-archives-section table.dataTable td.col-synthese{
  font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap;
}
/* Les chevaux trouves, en vert de la charte et non en vert d'origine. */
.qs-archives-section table.dataTable td.col-synthese strong{
  color:var(--ar-ok) !important; font-weight:800;
}
.qs-archives-section .qs-discipline-short{ display:none; }

/* --------------------------------------------------------------- pastilles -- */
.qs-archives-section .qs-badge{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.01em;
  padding:.2rem .55rem; border-radius:999px; white-space:nowrap;
  border:1px solid transparent; background:var(--ar-bg); color:var(--ar-ink2);
}
.qs-archives-section .qs-badge-success,
.qs-archives-section .qs-badge-success-dark{
  color:var(--ar-ok); background:var(--ar-ok-bg); border-color:var(--ar-ok-bd);
}
.qs-archives-section .qs-badge-success-dark{ color:#fff; background:var(--ar-ok); border-color:var(--ar-ok); }
.qs-archives-section .qs-badge-pending{
  color:var(--ar-wa); background:var(--ar-wa-bg); border-color:var(--ar-wa-bd);
}
.qs-archives-section .qs-badge-neutral{
  color:var(--ar-mut); background:var(--ar-bg); border-color:var(--ar-bd);
}

/* ------------------------------------------------------------- pagination -- */
.qs-archives-section .dt-paging .dt-paging-button,
.qs-archives-section .dataTables_paginate .paginate_button{
  font:inherit !important; font-size:.82rem !important; font-weight:700 !important;
  color:var(--ar-ink2) !important; background:#fff !important;
  border:1px solid var(--ar-bd2) !important; border-radius:var(--ar-r-s) !important;
  padding:.3rem .6rem !important; margin:0 .15rem !important; min-height:2.2rem;
  box-shadow:none !important; background-image:none !important;
}
.qs-archives-section .dt-paging .dt-paging-button.current,
.qs-archives-section .dataTables_paginate .paginate_button.current{
  color:#fff !important; background:var(--ar-acc-d) !important;
  border-color:var(--ar-acc-d) !important;
}
.qs-archives-section .dt-paging .dt-paging-button.disabled,
.qs-archives-section .dataTables_paginate .paginate_button.disabled{
  color:var(--ar-bd2) !important; background:#fff !important; cursor:default;
}

/* ------------------------------------------------------------------ alerte -- */
.qs-archives-section .qs-alert-error{
  font-size:.86rem; font-weight:600; color:#8f1030;
  background:#fdf0f3; border:1px solid #f3bfcd; border-radius:var(--ar-r-s);
  padding:.5rem .7rem; margin:0 0 .6rem;
}

/* ------------------------------------------------------------- telephone -- */
@media (max-width:640px){
  .qs-archives-section .qs-section-title{ font-size:1.1rem; }
  .qs-archives-section .qs-filters-bar{ gap:.5rem; }
  .qs-archives-section .qs-filter-group{ flex:1 1 9rem; }
  .qs-archives-section .qs-select{ min-width:0; width:100%; }
  .qs-archives-section .qs-datatable-wrapper{ padding:.5rem .55rem; }
  .qs-archives-section table.dataTable{ font-size:.8rem; }
  .qs-archives-section .qs-discipline-full{ display:none; }
  .qs-archives-section .qs-discipline-short{ display:inline; }
}