/* ===========================================================================
   MaPièce Auto — vitrine, VUES CATALOGUE ET PANIER :
   sous-catégories, liste de pièces, fiche produit, panier, confirmation, suivi.

   THÈME CLAIR (2026-09-21) : la vitrine n'a plus qu'un thème. L'ancienne classe
   `body.dark` et toutes ses règles ont disparu ; `body.vitrine` ne sert plus
   qu'à passer DEVANT `style.css`, chargée avant et pensée pour la boutique
   « page unique » (elle pose des couleurs en dur que la vitrine remplace par
   ses jetons — dont son gris `.muted`, qui n'atteint que 3,5:1 sur blanc).

   Aucune couleur, aucun espacement, aucun rayon n'est écrit en dur ici :
   tout vient de `vitrine-tokens.css`.
   Accueil (`#view-home`) : `vitrine-home.css` et `vitrine-home-sections.css`.
   =========================================================================== */

/* ------------------------------------------- reprise en main de style.css */
/* ATTENTION À LA SPÉCIFICITÉ : `body.vitrine button` pèse (0,1,2). Tout bouton
   qui n'est PAS plein-accent (ruban de marques, boutons fantômes, liens) doit
   donc être écrit avec au moins deux classes — d'où les préfixes `body.vitrine`
   sur `.marque`, `.back` et `.veh-effacer` dans les feuilles de l'accueil. */
body.vitrine button { background: var(--color-accent-strong); color: var(--color-on-accent); }
body.vitrine button:hover { background: var(--color-accent-deep); }
body.vitrine .muted { color: var(--color-muted); }
body.vitrine .ok { color: var(--color-ok); }
body.vitrine .ko { color: var(--color-ko); }
body.vitrine code {
  background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
}
body.vitrine input, body.vitrine select {
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
}
body.vitrine table th {
  background: var(--color-surface-2); color: var(--color-muted);
  border-bottom: 1px solid var(--color-line-strong);
}
body.vitrine table td { border-bottom: 1px solid var(--color-line); }
/* Pastilles de statut : seules celles dont le texte blanc n'atteignait pas
   4,5:1 sont reprises (ocre 3,2:1 et gris 2,9:1 de `style.css`). */
body.vitrine .badge { background: var(--color-neutral); }
body.vitrine .badge.pending_payment, body.vitrine .badge.queued {
  background: var(--color-warn);
}
body.vitrine .badge.unknown, body.vitrine .badge.purged { background: var(--color-neutral); }

/* ------------------------------------------------------- vues et panneaux */
.view.hidden { display: none; }
.tabpanel.hidden { display: none; }
.badge-count.hidden { display: none; }
.badge-count {
  border-radius: var(--radius-pill); padding: 1px 7px;
  font-size: var(--text-sm); font-weight: 800; margin-left: var(--space-1);
}
.catalog-section { padding: var(--space-6) 0; }
.catalog-section h2 { color: var(--color-text-strong); }

/* ----------------------------------------- sous-catégories d'une catégorie */
body.vitrine .back {
  background: var(--color-surface); border: 1px solid var(--color-line-strong);
  color: var(--color-muted); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); cursor: pointer; font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
body.vitrine .back:hover {
  background: var(--color-surface); color: var(--color-text-strong);
  border-color: var(--color-accent);
}
.cat-head { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-4) 0; }
.cat-head img {
  width: 96px; border-radius: var(--radius-md);
  border: 1px solid var(--color-line); box-shadow: var(--shadow-sm);
}
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-3); margin-top: var(--space-4);
}
.subcard {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer;
  text-align: left; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}
.subcard:hover {
  border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.subcard .name { font-weight: 700; font-size: var(--text-base); color: var(--color-text-strong); }
.subcard .count { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
/* Ligne de troncature : elle ferme la grille sur toute la largeur, sans casser
   le gabarit en colonnes ni ajouter d'élément au HTML. */
.subcat-truncated {
  grid-column: 1 / -1; margin: var(--space-1) 0 0;
  color: var(--color-muted); font-size: var(--text-sm); font-style: italic;
}

/* ------------------------------------------------------- liste de pièces */
.plist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3); margin-top: var(--space-4);
}
.pcard {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}
.pcard:hover {
  border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.pcard img, .pcard .imgfallback {
  width: 100%; height: 132px; object-fit: cover; display: block;
  background: var(--color-surface-2) center / contain no-repeat;
  border-bottom: 1px solid var(--color-line);
}
.pcard .body {
  padding: var(--space-3) var(--space-4); display: flex; flex-direction: column;
  gap: var(--space-1); flex: 1;
}
.pcard .ref, .pcard .idents { font-size: var(--text-sm); color: var(--color-muted); }
.pcard .title {
  font-size: var(--text-base); font-weight: 700;
  color: var(--color-text-strong); min-height: 2.4em;
}
.pcard .brand {
  font-size: var(--text-sm); color: var(--color-accent-text);
  font-weight: 800; letter-spacing: .06em;
}
.pcard .stock-ok { color: var(--color-ok); font-size: var(--text-sm); }
.pcard .stock-ko { color: var(--color-ko); font-size: var(--text-sm); }
.pcard .price {
  font-size: var(--text-lg); font-weight: 800;
  color: var(--color-text-strong); margin-top: auto;
}
.pcard .deposit { font-size: var(--text-sm); color: var(--color-muted); }
.pcard button { margin: 0 var(--space-4) var(--space-4); border-radius: var(--radius-sm); }

/* ------------------------------------------------ fiche produit détaillée */
.detail-grid {
  display: grid; grid-template-columns: 340px 1fr;
  gap: var(--space-6); margin-top: var(--space-3);
}
.detail-img {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--color-line); box-shadow: var(--shadow-md);
}
.detail-info h2 { margin: var(--space-2) 0; color: var(--color-text-strong); }
.detail-info .price { color: var(--color-text-strong); font-weight: 800; }
/* SEC2-13 : ces règles remplacent des attributs de style en ligne, pour que la
   CSP puisse se passer de `style-src 'unsafe-inline'`. */
.detail-price { font-size: var(--text-xl); }
.cta.cta-detail { max-width: 340px; }
.order-confirm { font-size: var(--text-lg); }
.row.row-spaced { margin-top: var(--space-4); }
/* Référence fabricant / EAN (données publiques : elles figurent sur la boîte). */
.detail-idents {
  font-size: var(--text-sm); color: var(--color-muted);
  margin: var(--space-1) 0 var(--space-3);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  background: var(--color-surface-2); border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}
/* Capitales par `font-variant-caps` et JAMAIS par `text-transform` : le texte
   RENDU doit rester « Description », « Véhicules compatibles », « Pièces
   équivalentes » — la recette filmée attend ces libellés tels quels
   (`text-transform` modifie ce que le navigateur restitue). */
#detail-content h3 {
  color: var(--color-accent-text); margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base); letter-spacing: .06em;
  font-variant-caps: all-small-caps; font-weight: 800;
}
#detail-content p { font-size: var(--text-base); line-height: 1.6; }

/* ------------------------------------------------------------------ panier */
.cart-table { width: 100%; margin: var(--space-3) 0; }
.cart-table input[type="number"] { width: 70px; }
body.vitrine button.link {
  background: none; color: var(--color-ko);
  padding: 2px var(--space-2); font-size: var(--text-base);
}
body.vitrine button.link:hover { background: none; text-decoration: underline; }
.totals { font-size: var(--text-base); }
h3 .muted { font-weight: 400; font-size: var(--text-sm); }
/* Action secondaire : bouton fantôme, jamais un second aplat plein qui
   entrerait en concurrence avec l'action principale. */
body.vitrine button.secondary {
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill);
}
body.vitrine button.secondary:hover {
  background: var(--color-surface); color: var(--color-text-strong);
  border-color: var(--color-accent);
}

/* -------------------------------------- devis, substitution, suivi partiel */
/* Consigne (T-77) — mention secondaire, jamais concurrente du prix de vente. */
.deposit-notice { font-size: var(--text-sm); color: var(--color-muted); margin: 2px 0 var(--space-3); }
.deposit-total { margin-top: var(--space-1); }
.substitution { color: var(--color-accent-text); }
.legal-notice { color: var(--color-muted); }
.shipments { color: var(--color-text); }
.partial-notice {
  border-left: 4px solid var(--color-ko); background: var(--color-ko-soft);
  color: var(--color-ko-ink); padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0; font-size: var(--text-base); border-radius: var(--radius-sm);
}
/* Le barré et l'opacité ne portent PAS l'information à eux seuls : la cellule
   « État de la ligne » écrit « Annulé — ne sera pas livré » (WCAG 1.4.1). */
tr.line-canceled td { opacity: .7; }
tr.line-canceled td:last-child { opacity: 1; }

@media (width < 760px) { .detail-grid { grid-template-columns: 1fr; } }