/* ==========================================================================
   CFC — Boutique (compléments, tenues, accessoires)
   Cartes simples, même grammaire visuelle que la galerie et les exercices.
   ========================================================================== */
.bout-cat + .bout-cat{ margin-top:clamp(40px,5vw,64px); }
.bout-cat__title{
  font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:14px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.bout-grid{ display:grid; gap:24px; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .bout-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .bout-grid{ grid-template-columns:repeat(4,1fr); } }

.bout-card{ display:flex; flex-direction:column; }
.bout-card__img{ width:100%; aspect-ratio:1/1; background:var(--paper-2,var(--bone)); overflow:hidden; border-radius:var(--radius); }
.bout-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.bout-card:hover .bout-card__img img{ transform:scale(1.03); }
.bout-card__body{ padding-top:14px; display:flex; flex-direction:column; gap:6px; }
.bout-card__body h3{ font-size:.9375rem; line-height:1.2; }
.bout-card__body p{ font-size:.8125rem; color:var(--ink-2); }
/* Sélecteur aligné sur celui de la description (0,1,1) : sinon `.bout-card__body p`
   l'emportait et le prix héritait de la taille et du gris de la description. */
.bout-card__body p.bout-card__price{
  font-family:var(--ff-mono); font-size:.9375rem; font-weight:500; letter-spacing:.03em;
  color:var(--ink); font-variant-numeric:tabular-nums;
  margin-top:4px; margin-bottom:10px;
}
.bout-card .btn{ min-height:44px; padding:9px 14px; font-size:.8125rem; justify-content:center; }

/* --- Déclinaison sombre ----------------------------------------------------
   La grille produits est passée en .sec--dark : les gris encre deviennent
   illisibles et `.sec--dark h2` l'emporterait sur l'étiquette de catégorie
   (0,1,1 contre 0,1,0), qui doit rester une étiquette, pas un titre plein. */
.sec--dark .bout-cat__title{ color:#AEB4BB; }
.sec--dark .bout-card__img{
  background:rgba(251,250,248,.06);
  border:1px solid rgba(251,250,248,.12);
}
.bout-card__img--empty{
  display:grid; place-items:center;
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.13em; text-transform:uppercase;
}
.bout-card__img--empty::after{ content:"Photo à venir"; }
.sec--dark .bout-card__img--empty{ color:#AEB4BB; }
.sec--dark .bout-card__body p{ color:#B7BCC2; }
.sec--dark .bout-card__body p.bout-card__price{ color:var(--milk); }