@charset "UTF-8";
/* Pages "races de chiens par taille et par caractere" (races_criteres.php), chargees apres main.css */

.page-pilier .chapo { font-size: 16px; line-height: 1.6; }
.page-pilier h2 { margin-top: 28px; }
.page-pilier .nb { color: #888; font-size: 13px; font-weight: normal; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tableau des races */
.tableau-races { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; }
.table-races { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.table-races th, .table-races td { padding: 6px 8px; vertical-align: middle; text-align: left; }
.table-races thead th { background: #f4f4f4; font-size: 13px; line-height: 1.3; white-space: normal; }
.table-races tbody tr { border-top: 1px solid #e6e6e6; }
.table-races tbody tr:nth-child(even) { background: #fafafa; }
.table-races td.col-photo, .table-races th.col-photo { width: 76px; padding-right: 4px; }
.table-races td.col-photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; display: block; }
.table-races .col-race { min-width: 130px; }
.table-races .selon { display: block; font-size: 12px; color: #888; white-space: nowrap; }
.table-races button.tri { background: none; border: 0; padding: 0 14px 0 0; margin: 0; font: inherit; font-weight: bold; color: #222; cursor: pointer; text-align: left; position: relative; line-height: 1.3; }
.table-races button.tri:after { content: "\2195"; position: absolute; right: 0; top: 0; color: #aaa; font-weight: normal; }
.table-races th[aria-sort="ascending"] button.tri:after { content: "\25B2"; color: #2ba6cb; font-size: 10px; top: 2px; }
.table-races th[aria-sort="descending"] button.tri:after { content: "\25BC"; color: #2ba6cb; font-size: 10px; top: 2px; }
.table-races button.tri:hover, .table-races button.tri:focus { color: #2ba6cb; }
label.tri-mobile { display: none; }

/* Petits ecrans : une fiche par race */
@media only screen and (max-width: 640px) {
  label.tri-mobile { display: block; font-size: 14px; margin: 0 0 8px; }
  label.tri-mobile select.tri-mobile { display: inline-block; width: auto; max-width: 70%; margin: 0 0 0 4px; font-size: 14px; }
  .tableau-races { overflow: visible; }
  .table-races, .table-races tbody, .table-races tr, .table-races td { display: block; width: auto; }
  .table-races thead { display: none; }
  .table-races tbody tr { position: relative; padding: 10px 6px 10px 84px; min-height: 84px; border: 1px solid #e6e6e6; border-radius: 4px; margin-bottom: 10px; background: #fff; }
  .table-races tbody tr:nth-child(even) { background: #fff; }
  .table-races td { padding: 1px 0; font-size: 13px; border: 0; }
  .table-races td.col-photo { position: absolute; left: 8px; top: 10px; width: 64px; padding: 0; }
  .table-races td.col-race { font-size: 16px; margin-bottom: 3px; min-width: 0; }
  .table-races td[data-label]:before { content: attr(data-label) " : "; color: #777; }
  .table-races .selon { display: inline; margin-left: 4px; }
}

/* Note de methode */
.note-methode { background: #f7f9fa; border: 1px solid #e3e8eb; padding: 10px 14px; margin: 20px 0; font-size: 14px; }
.note-methode h2 { font-size: 18px; margin: 4px 0 8px; }
.note-methode p:last-child { margin-bottom: 0; }

/* Grille de photos */
.grille-photos-races { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.grille-photos-races li { margin: 0; }
.grille-photos-races a { display: block; color: #333; }
.grille-photos-races img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; background: #eee; }
.grille-photos-races .nom { display: block; font-weight: bold; font-size: 14px; margin-top: 4px; line-height: 1.2; }
.grille-photos-races .race { display: block; font-size: 12px; color: #777; line-height: 1.3; }
@media only screen and (max-width: 400px) {
  .grille-photos-races { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Liens du pilier */
.liens-piliers { list-style: none; margin: 0 0 10px; padding: 0; -webkit-columns: 3 220px; columns: 3 220px; }
.liens-piliers li { margin: 0 0 6px; break-inside: avoid; }
.liens-piliers.grands li { font-size: 15px; }

/* Hub : classes de taille */
.classe-taille { border-top: 1px solid #e6e6e6; padding-top: 10px; margin-bottom: 14px; }
.classe-taille h3 { font-size: 20px; margin: 4px 0 10px; }
.exemples-races { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.exemples-races li { margin: 0; text-align: center; }
.exemples-races a { display: block; color: #333; font-size: 13px; line-height: 1.3; }
.exemples-races img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; margin-bottom: 4px; background: #eee; }
@media only screen and (max-width: 767px) { .exemples-races { grid-template-columns: repeat(3, 1fr); } }
@media only screen and (max-width: 400px) { .exemples-races { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.classe-taille h3 .nb { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin-left: 4px; }

/* Bloc de liens : deux groupes */
.page-pilier h3.titre-liens { font-size: 16px; margin: 12px 0 8px; }

/* Pages par pays : races sans photo */
.races-sans-photo { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.races-sans-photo li { margin: 0; border: 1px solid #e6e6e6; border-radius: 4px; padding: 10px 12px; background: #fff; font-size: 14px; }
.races-sans-photo h3 { font-size: 18px; margin: 0 0 6px; }
.races-sans-photo .autre-nom { font-size: 13px; color: #888; font-weight: normal; }
.races-sans-photo p { margin: 0 0 6px; line-height: 1.5; }
.races-sans-photo .faits { font-size: 13px; color: #555; }
.races-sans-photo .ajout { margin: 0; font-size: 13px; }

/* Hub par pays */
.sommaire-pays { font-size: 14px; line-height: 1.8; }
.exemples-races .vignette-vide, .mini-races .vignette-vide { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #f0f0f0; color: #999; font-size: 12px; border-radius: 4px; margin-bottom: 4px; }
.autres-races { font-size: 14px; margin-bottom: 6px; }
.liste-sans-photo { margin: 0 0 10px 18px; font-size: 14px; }
.liste-sans-photo li { margin-bottom: 4px; }
.pays-compacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 10px; }
.pays-compact { border: 1px solid #e6e6e6; border-radius: 4px; padding: 8px 10px; }
.pays-compact h3 { font-size: 16px; margin: 0 0 6px; }
.mini-races { list-style: none; margin: 0; padding: 0; }
.mini-races li { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mini-races a { display: flex; align-items: center; gap: 8px; color: #333; font-size: 14px; line-height: 1.3; }
.mini-races img, .mini-races .vignette-vide { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 4px; margin: 0; }
.exemples-races li { font-size: 13px; line-height: 1.3; color: #333; }
.exemples-races li > span { display: block; }
@media only screen and (max-width: 400px) { .classe-taille[id^="pays-"] .exemples-races { grid-template-columns: repeat(3, 1fr); gap: 6px; } .classe-taille[id^="pays-"] .exemples-races li, .classe-taille[id^="pays-"] .exemples-races a { font-size: 12px; } }

/* Pages par couleur : hub (4 photos par couleur) et galerie */
.exemples-couleur { grid-template-columns: repeat(4, 1fr); }
.exemples-couleur li > a > span { display: block; }
.exemples-couleur em { display: block; font-style: normal; font-size: 12px; color: #777; }
@media only screen and (max-width: 767px) { .exemples-couleur { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
@media only screen and (max-width: 400px) { .exemples-couleur { grid-template-columns: repeat(2, 1fr); } }
.grille-couleur { margin-bottom: 16px; }