/* ================================================================
   /assets/css/vehicle-brand.css (12/09/2026)
   Fichier a part : ses regles redefinissent des selecteurs (.ep-checkout-*,
   .ep-kit-row, .ep-model-search...) avec des valeurs DIFFERENTES d'autres
   pages. Un fichier commun aurait fait gagner la derniere definition sur
   toutes les pages. Un fichier par page = rendu identique a l'inline.
   ================================================================ */

/* ================================================================
   Deplace depuis app/views/vehicle_brand.php (12/09/2026) — CSS inchange, ordre conserve.
   ================================================================ */
.ep-brand-desc {
        font-size: 15px;
        line-height: 1.6;
        color: var(--ep-text, #1A1A1A);
        margin: 0 0 18px;
      }
      @media (max-width: 600px) { .ep-brand-desc { font-size: 14px; } }

/* ============================================================
   Page marque — refonte 05/08/2026

   DUPLICATION ASSUMEE : ce bloc est IDENTIQUE a celui de
   views/vehicle_model.php. Les deux partiront dans components.css
   lors de la revue CSS generale (avec .ep-catalog-search de
   vehicle_model_catalog.php). Toute modification ici doit etre
   reportee dans vehicle_model.php tant que la consolidation
   n'est pas faite.
   ============================================================ */

/* ─── Kit d'entretien : ligne pleine largeur ─────────────── */
/* BLEU et non rouge : le kit est un produit construit en interne,
   nature differente d'un lien de navigation. Bleu + rouge sont deja
   dans la palette (flag-strip-fr), rappel du drapeau francais. */
.ep-kit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 18px;
  background: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-blue, #0055A4);
  border-left: 4px solid var(--ep-blue, #0055A4);
  border-radius: var(--ep-radius, 6px);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease, box-shadow .15s ease;
}
a.ep-kit-row:hover {
  background: #F4F8FC;
  box-shadow: 0 1px 10px rgba(0, 85, 164, .10);
}
/* Kit absent : on retire toute la couleur. La ligne reste visible
   mais ne doit pas attirer l'oeil comme une offre. */
.ep-kit-row.is-empty {
  border-color: var(--ep-border, #E5E5E5);
  border-left-color: var(--ep-border, #E5E5E5);
  background: var(--ep-bg-soft, #FAFAFA);
}
.ep-kit-label {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--ep-blue, #0055A4);
}
.ep-kit-row.is-empty .ep-kit-label {
  font-weight: 600;
  color: var(--ep-text-muted, #6B6B6B);
}
.ep-kit-count {
  /* min-width supprime : la pastille porte desormais un libelle
     ("14 kits"), sa largeur est dictee par le contenu. */
  padding: 3px 10px;
  white-space: nowrap;
  border-radius: 12px;
  background: var(--ep-blue, #0055A4);
  color: var(--ep-white, #FFFFFF);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.ep-kit-arrow {
  color: var(--ep-blue, #0055A4);
  font-size: 20px;
  font-weight: 700;
}
.ep-kit-ask {
  font-size: 13px;
  font-weight: 600;
  color: var(--ep-red, #f80405);
  text-decoration: underline;
}

/* ─── CTA principal (rouge) ──────────────────────────────── */
/* Identique a .ep-catalog-cta de vehicle_model.php. La couleur
   marque l'action principale, elle ne decore pas : les compteurs
   de categorie restent gris, les cartes restent neutres. */
.ep-catalog-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  margin: 22px 0 8px;
  background: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-red, #f80405);
  border-left: 4px solid var(--ep-red, #f80405);
  border-radius: var(--ep-radius, 6px);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease, box-shadow .15s ease;
}
.ep-catalog-cta:hover {
  background: #FFF5F5;
  box-shadow: 0 1px 10px rgba(248, 4, 5, .10);
}
.ep-catalog-cta-main {
  flex: 1;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ep-red, #f80405);
}
.ep-catalog-cta-count {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--ep-red, #f80405);
  color: var(--ep-white, #FFFFFF);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.ep-catalog-cta-arrow {
  color: var(--ep-red, #f80405);
  font-size: 20px;
  font-weight: 700;
}

/* ─── Categories : grille 5 colonnes ─────────────────────── */
.ep-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.ep-cat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 12px 14px;
  background: var(--ep-white, #FFFFFF);
  border: 1px solid var(--ep-border, #E5E5E5);
  border-radius: var(--ep-radius, 6px);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ep-cat-card:hover {
  border-color: var(--ep-text, #1A1A1A);
  transform: translateY(-1px);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.ep-cat-card-label {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ep-text, #1A1A1A);
}
.ep-cat-card-count {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--ep-bg-section, #F5F5F5);
  color: var(--ep-text-muted, #6B6B6B);
  font-size: 12px;
  font-weight: 700;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ep-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .ep-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .ep-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ep-cat-card { min-height: 48px; padding: 10px 12px; }
  .ep-cat-card-label { font-size: 12.5px; }
  .ep-catalog-cta { flex-wrap: wrap; }
  .ep-catalog-cta-count { flex: 1 1 100%; }
}

/* ================================================================
   Deplace depuis app/views/vehicle_brand_models.php (12/09/2026) — CSS inchange, ordre conserve.
   ================================================================ */
/* Filtre de la grille (01/09/2026).
   Les cartes existent toutes dans le HTML : le JS ne fait que poser
   ou retirer cette classe. !important parce que .ep-card-model-v1
   peut poser un display: flex qui gagnerait sinon.
   L'attribut [hidden] natif n'est PAS utilise pour la meme raison. */
.ep-grid-models .is-filtered-out { display: none !important; }