/* ==========================================================================
   CATALOGUE — le PDF de la saison, les familles (Meat & Doria),
   les présentations techniques (S.I.D.A.T.)
   ========================================================================== */

.catalogue__sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }

/* ------------------------------------------------------------ catalogue PDF */
.catalogue-pdf {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: var(--e-6);
  padding: var(--e-7); border-radius: var(--rayon-2);
}
.catalogue-pdf::before {
  content: ""; position: absolute; z-index: -1; inset: -40% -10% -40% 35%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--marque) 30%, transparent), transparent);
}
.catalogue-pdf .surtitre { color: var(--clair-sur-nuit); }
.catalogue-pdf h2 { margin-bottom: var(--e-3); font-size: var(--t-6); }
.catalogue-pdf__details { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--clair-sur-nuit); font-family: var(--f-mono); font-size: var(--t-1); }
.catalogue-pdf__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.catalogue-pdf__visuel { margin: 0; }
.catalogue-pdf__visuel img { width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .45)); }
@media (max-width: 900px) {
  .catalogue-pdf { grid-template-columns: 1fr; padding: var(--e-6) var(--e-5); }
  .catalogue-pdf__visuel { order: -1; }
}

/* ------------------------------------------------ appel à la recherche */
.astuce {
  display: flex; align-items: center; gap: var(--e-5); padding: var(--e-5) var(--e-6);
  background: var(--marque-voile); border: var(--trait-1) solid var(--marque-trait); border-radius: var(--rayon-2);
}
.astuce__icone { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--md-papier); color: var(--md-encre); box-shadow: var(--ombre-1); }
.astuce__icone .icone { width: 24px; height: 24px; }
.astuce__texte { flex: 1; }
.astuce h2 { margin: 0 0 var(--e-1); font-size: var(--t-4); }
.astuce p { margin: 0; color: var(--md-encre-2); }
@media (max-width: 700px) { .astuce { flex-wrap: wrap; } .astuce .bouton { width: 100%; } }

/* ----------------------------------------------------------------- familles */
.familles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e-4); }
.famille {
  display: flex; flex-direction: column;
  background: var(--md-papier); border: var(--trait-1) solid var(--md-trait); border-radius: var(--rayon-2);
  box-shadow: inset 0 3px 0 var(--marque);
  transition: border-color var(--duree-2) var(--courbe), box-shadow var(--duree-2) var(--courbe);
}
.famille:hover { border-color: var(--md-trait-2); box-shadow: inset 0 3px 0 var(--marque), var(--ombre-1); }
.famille__entete {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-4); border-bottom: var(--trait-1) solid var(--md-trait);
  color: var(--md-encre); text-decoration: none;
}
.famille__nom { margin: 0; font-size: var(--t-4); }
.famille__entete:hover .famille__nom { text-decoration: underline; text-decoration-color: var(--marque); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.famille__n { flex: none; font-family: var(--f-mono); font-size: var(--t-1); font-weight: 700; color: var(--md-encre-3); white-space: nowrap; }
/* photo de la meilleure vente de la catégorie (total_sales WooCommerce) */
.famille__vedette {
  position: relative; display: block; padding: var(--e-4) var(--e-5) var(--e-3);
  border-bottom: var(--trait-1) solid var(--md-trait); background: var(--md-papier-2); text-decoration: none;
}
.famille__vedette img { display: block; width: 100%; height: 150px; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--duree-3) var(--courbe); }
.famille__vedette:hover img { transform: scale(1.04); }
.famille__vedette-legende { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-3); }
.famille__vedette-ref { font-family: var(--f-mono); font-size: var(--t-0); font-weight: 700; color: var(--md-encre-2); }
.famille__vedette:hover .famille__vedette-ref { color: var(--md-encre); text-decoration: underline; text-decoration-color: var(--marque); }
.famille__liste { flex: 1; padding: var(--e-2) var(--e-3); list-style: none; }
.famille__liste a {
  display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-2);
  border-radius: var(--rayon-1); color: var(--md-encre-2); text-decoration: none; font-size: var(--t-1);
}
.famille__liste a:hover { background: var(--marque-voile); color: var(--md-encre); }
.famille__sous-n { font-family: var(--f-mono); font-size: var(--t-0); color: var(--md-encre-3); }
.famille__autres {
  display: flex; align-items: center; gap: var(--e-2); margin: 0 var(--e-5) var(--e-4); padding-top: var(--e-3);
  border-top: var(--trait-1) dashed var(--md-trait); color: var(--md-encre); font-size: var(--t-1); font-weight: 700; text-decoration: none;
}
.famille__autres .icone { width: 16px; height: 16px; }
.famille__autres:hover { text-decoration: underline; text-decoration-color: var(--marque); text-decoration-thickness: 2px; }

/* ------------------------------------------------- présentations techniques */
.documents { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-3); list-style: none; }
.document {
  display: flex; align-items: center; gap: var(--e-3); height: 100%; padding: var(--e-3) var(--e-4);
  background: var(--md-papier); border: var(--trait-1) solid var(--md-trait); border-radius: var(--rayon-2);
  color: var(--md-encre); text-decoration: none; font-weight: 600;
  transition: border-color var(--duree-1) var(--courbe), box-shadow var(--duree-1) var(--courbe);
}
.document:hover { border-color: var(--md-encre); box-shadow: var(--ombre-1); color: var(--md-encre); }
.document__icone { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rayon-1); background: var(--marque-voile); color: var(--md-encre); }
.document__titre { flex: 1; font-size: var(--t-1); line-height: 1.35; }
.document__format { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--md-encre-3); }

.catalogue__vide { margin: var(--e-4) 0 0; color: var(--md-encre-3); }

/* site réel : sélecteur de marque dans l'encart de recherche */
.astuce__marque { flex: none; width: min(260px, 100%); }
@media (max-width: 700px) { .astuce__marque { width: 100%; } }

/* ---------------------------------------------- marques automobiles */
.marques__initiales { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.marques__initiales a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--rayon-1); color: var(--md-encre); font-weight: 800; text-decoration: none; }
.marques__initiales a:hover { background: var(--marque-voile); }
.marques__groupe { padding-top: var(--e-4); border-top: var(--trait-1) solid var(--md-trait); }
.marques__groupe + .marques__groupe { margin-top: var(--e-4); }
.marques__initiale { margin: 0 0 var(--e-3); font-family: var(--f-mono); font-size: var(--t-3); color: var(--md-encre-3); }
.marques__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-2); list-style: none; }
.marque { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: var(--trait-1) solid var(--md-trait); border-radius: var(--rayon-2); background: var(--md-papier); color: var(--md-encre); font-weight: 700; text-decoration: none; }
.marque:hover { border-color: var(--md-encre); box-shadow: var(--ombre-1); color: var(--md-encre); }
.marque__n { font-family: var(--f-mono); font-size: var(--t-0); font-weight: 700; color: var(--md-encre-3); }
.recherche-page .grille-produits { margin-top: 0; }

/* ---------------------------------------------- marques automobiles */
.marques .page-entete { padding-top: 0; }
.marques__initiales { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.marques__initiales a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--rayon-1); color: var(--md-encre); font-weight: 800; text-decoration: none; }
.marques__initiales a:hover { background: var(--marque-voile); }
.marques__groupe { padding-top: var(--e-4); border-top: var(--trait-1) solid var(--md-trait); }
.marques__groupe + .marques__groupe { margin-top: var(--e-4); }
.marques__groupe:not(:has(li:not([hidden]))) { display: none; }
.marques__initiale { margin: 0 0 var(--e-3); font-family: var(--f-mono); font-size: var(--t-3); color: var(--md-encre-3); }
.marques__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-2); list-style: none; }
.marque { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: var(--trait-1) solid var(--md-trait); border-radius: var(--rayon-2); background: var(--md-papier); color: var(--md-encre); font-weight: 700; text-decoration: none; }
.marque:hover { border-color: var(--md-encre); box-shadow: var(--ombre-1); color: var(--md-encre); }
.marque__n { font-family: var(--f-mono); font-size: var(--t-0); font-weight: 700; color: var(--md-encre-3); }