/* Galeries de photos thématiques (photos_mignons.php : /photos-chiens-mignons/, /photos-petits-chiens-mignons/)
   Chargée après main.css. */

.mignons-entete { text-align: center; margin: 0 0 18px; }
.mignons-entete h1 { font-size: 34px; line-height: 1.2; margin: 0 0 10px; }
.mignons-chapo { font-size: 16px; line-height: 1.6; color: #444; max-width: 760px; margin: 0 auto; }

/* Vignettes : hauteur proportionnelle (width/height en attributs réservent la place avant chargement) */
.galerie-mignons { margin: 0 auto 10px; }
.galerie-mignons .box img { height: auto; }
.galerie-mignons .box a { display: block; color: #333; text-decoration: none; }
.galerie-mignons .box a:hover strong { text-decoration: underline; }
.galerie-mignons .legende { display: block; padding: 8px 2px 0; font-size: 13px; line-height: 1.35; }
.galerie-mignons .legende strong { display: block; font-size: 15px; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galerie-mignons .legende .race { display: block; color: #777; font-size: 12px; }

.mignons-suite { clear: both; padding-top: 10px; }
.mignons-liens { text-align: center; font-size: 15px; line-height: 1.8; margin: 10px 0 20px; }
.mignons-bloc { clear: both; }
.mignons-bloc h2 { font-size: 22px; margin: 0 0 12px; }

/* Petites races les plus photographiées : 3 colonnes (ordinateur), 1 (téléphone) */
.mignons-races { list-style: none; margin: 0 0 12px; padding: 0; columns: 3; column-gap: 24px; }
.mignons-races li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.mignons-races .nb { display: block; font-size: 13px; color: #888; }

/* Chiots récents : 4 vignettes carrées par ligne (ordinateur), 2 (téléphone) */
.mignons-chiots { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mignons-chiots li { font-size: 13px; line-height: 1.35; min-width: 0; }
.mignons-chiots a { display: block; color: #333; }
.mignons-chiots img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 5px; border-radius: 3px; }
.mignons-chiots strong { display: block; font-size: 14px; }
.mignons-chiots span { display: block; color: #777; font-size: 12px; }

@media only screen and (max-width: 767px) {
  .mignons-entete h1 { font-size: 26px; }
  .mignons-chapo { font-size: 15px; }
  .mignons-chapo br { display: none; }
  .mignons-races { columns: 1; }
  .mignons-chiots { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Téléphone : 2 colonnes de vignettes (la largeur est fixée en JS d'après l'écran, voir photos_mignons.php) */
@media only screen and (max-width: 529px) {
  .galerie-mignons .box { margin: 4px; padding: 5px; }
  .galerie-mignons .box img { max-width: 100%; }
  .galerie-mignons .legende { padding-top: 6px; font-size: 12px; }
  .galerie-mignons .legende strong { font-size: 14px; }
  .galerie-mignons .legende .race { font-size: 11px; }
}