/* =====================================================================
   Styles du composant SectionCatalogue (grille de costumes d'exemple).
   ===================================================================== */
.section-catalogue{background:var(--fond)}
.onglets-categories{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:36px;
}
.onglet-categorie{
  font:inherit;font-size:14px;cursor:pointer;
  padding:8px 18px;border-radius:20px;border:1px solid var(--trait);
  background:var(--papier);color:var(--encre);
}
.onglet-categorie:hover{border-color:var(--accent)}
.onglet-categorie.actif{background:var(--accent);border-color:var(--accent);color:#fff}
.grille-costumes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:26px;
}
.carte-costume{
  display:block;background:var(--papier);border:1px solid var(--trait);border-radius:6px;
  overflow:hidden;transition:box-shadow .15s, transform .15s;
  text-decoration:none;color:inherit;
}
.carte-costume:hover{box-shadow:0 8px 22px rgba(32,26,20,.14);transform:translateY(-3px)}
/* Les photos sont des portraits en pied très hauts : centrer le
   recadrage coupe la tête. On ancre plutôt en haut, quitte à couper les
   pieds plutôt que le visage. */
.carte-costume img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top}
.carte-costume-info{padding:16px}
.carte-costume-categorie{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-fonce);font-weight:700;
}
.carte-costume-info h3{font-size:19px;margin:4px 0 2px}
.carte-costume-info p{margin:0 0 12px;color:var(--texte-attenue);font-size:14px}

/* Sous 640px, la grille passerait naturellement à une seule colonne (les
   cartes ont un minimum de 220px) ; on force plutôt deux colonnes, plus
   étroites, pour garder un aperçu du catalogue en un coup d'œil sur
   téléphone. */
@media (max-width:640px){
  .grille-costumes{grid-template-columns:repeat(2, 1fr);gap:14px}
  .carte-costume-info{padding:10px}
  .carte-costume-info h3{font-size:15px}
  .carte-costume-info p{font-size:12.5px;margin-bottom:0}
}