/* ==========================================================================
   Kits pédagogiques : liste des kits et composeur par nombre d'élèves.
   ========================================================================== */

/* ---------- Liste ---------- */
.kits-grille { margin-top: 0.5rem; }
.kit-carte { display: flex; flex-direction: column; overflow: hidden; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.kit-carte:hover { box-shadow: var(--ombre-2); border-color: var(--ligne-2); transform: translateY(-2px); }
.kit-carte-corps { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.35rem 1.35rem 1rem; flex: 1; }
.kit-carte-meta { margin: 0; }
.kit-carte-nom { font-size: 1.3rem; margin: 0; font-family: var(--police-titre); font-weight: 500; line-height: 1.25; }
.kit-carte-nom a { color: var(--encre); }
.kit-carte-texte { margin: 0; color: var(--encre-2); font-size: var(--texte-s); }
.kit-carte-liste { list-style: none; margin: 0.25rem 0 0; padding: 0.85rem 0 0; border-top: 1px dashed var(--ligne); display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--texte-s); color: var(--encre-2); }
.kit-carte-liste li::before { content: "·"; color: var(--sable-fonce); margin-right: 0.45rem; font-weight: 700; }
.kit-carte-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.35rem 1.35rem; background: var(--surface-2); border-top: 1px solid var(--ligne); }
.kit-carte-prix { display: flex; flex-direction: column; margin: 0; line-height: 1.25; }
.kit-carte-prix .prix-montant { font-size: 1.15rem; }
.kits-note { margin: 1.5rem 0 0; }
.kits-vide { padding-block: clamp(2rem, 6vw, 4rem); }

/* ---------- Composeur ---------- */
.kit-entete { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; align-items: start; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.kit-entete h1 { margin-bottom: 0.6rem; }
.kit-description p:last-child { margin-bottom: 0; }
.kit-effectif .champ label { font-size: 1rem; }
.kit-stepper { height: 3.1rem; width: 100%; justify-content: space-between; }
.kit-stepper input { flex: 1; width: auto; font-size: 1.15rem; }
.kit-stepper button { width: 3rem; font-size: 1.35rem; }

.kit-grille { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; align-items: start; }
.kit-table-cadre { min-width: 0; }
.kit-table td { vertical-align: middle; }
.kit-ligne { transition: opacity var(--transition); }
.kit-ligne.est-exclue td:not(.kit-ligne-inclure) { opacity: 0.42; }
.kit-ligne.est-exclue [data-total-ligne], .kit-ligne.est-exclue [data-qte-totale] { text-decoration: line-through; }
.kit-ligne-inclure { width: 2.5rem; padding-right: 0; }
.kit-produit { display: flex; align-items: center; gap: 0.85rem; min-width: 16rem; }
.kit-produit-visuel { display: block; width: 3.25rem; flex: none; aspect-ratio: 1; border-radius: var(--rayon-s); overflow: hidden; background: var(--surface-2); }
.kit-produit-visuel img { width: 100%; height: 100%; object-fit: cover; }
.kit-produit-sansimage { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--encre-3); }
.kit-produit-nom { color: var(--encre); font-weight: 600; }
.kit-produit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin: 0.2rem 0 0; font-size: var(--texte-xs); color: var(--encre-3); }
.kit-table .stepper { vertical-align: middle; }
.kit-ligne-total-qte { font-weight: 600; font-variant-numeric: tabular-nums; }

.kit-recap { position: sticky; top: 5.5rem; }
.kit-recap-carte { display: flex; flex-direction: column; gap: 0.75rem; }
.kit-recap-lignes { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.kit-recap-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.95rem; }
.kit-recap-ligne dt { color: var(--encre-2); }
.kit-recap-ligne dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.kit-recap-total { margin-top: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--ligne); }
.kit-recap-total dt { color: var(--encre); font-weight: 600; }
.kit-recap-total dd { font-family: var(--police-titre); font-size: 1.5rem; }
.kit-recap-carte p { margin: 0; }
.kit-recap-note { text-align: center; }
.kit-recap-succes { padding: 0.7rem 0.9rem; background: var(--succes-clair); color: var(--succes-texte); border-radius: var(--rayon-s); font-size: var(--texte-s); font-weight: 500; text-align: center; animation: apparait 200ms ease-out; }
.kit-recap-succes a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
#kit-ajouter.est-ajoute { transform: scale(0.98); }

@media (max-width: 1000px) {
  .kit-entete { grid-template-columns: 1fr; }
  .kit-effectif { max-width: 22rem; }
  .kit-grille { grid-template-columns: 1fr; }
  .kit-recap { position: static; }
}
@media (pointer: coarse) {
  .kit-ligne-inclure .case { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
}
/* Sous 640 px : chaque ligne du kit devient une carte (case + produit, quantité par élève, montants), l'en-tête n'est lu que par les lecteurs d'écran */
@media (max-width: 640px) {
  .kit-table-cadre { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .kit-table, .kit-table tbody { display: block; width: 100%; }
  .kit-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .kit-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.45rem 0.6rem; padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--ligne); }
  .kit-ligne:last-child { border-bottom: 0; }
  .kit-table td, .kit-table td.num { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .kit-table tbody tr:hover td { background: transparent; }
  .kit-ligne-inclure { grid-column: 1; grid-row: 1 / span 5; width: auto; align-self: start; }
  .kit-ligne-produit, .kit-ligne-par-eleve, .kit-ligne-qte, .kit-ligne-pu, .kit-ligne-total { grid-column: 2; }
  .kit-produit { min-width: 0; }
  .kit-ligne-par-eleve { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.25rem; }
  .kit-ligne-par-eleve::before { content: "Par élève"; font-size: var(--texte-xs); color: var(--encre-3); }
  .kit-ligne-qte, .kit-ligne-pu { font-size: var(--texte-s); color: var(--encre-2); font-weight: 400; }
  .kit-ligne-qte::before { content: "Quantité totale : "; color: var(--encre-3); }
  .kit-ligne-pu::before { content: "PU HT : "; color: var(--encre-3); }
  .kit-ligne-total::before { content: "Total HT : "; font-size: var(--texte-s); color: var(--encre-3); font-weight: 400; }
}