/**
 * Catalogue local — feuille autonome.
 *
 * Comme ayo-import-url.css : ses propres jetons, tout scopé sous
 * .ayo-catalogue, pour tenir sur n'importe quel gabarit (Astra, Elementor)
 * sans que les styles WooCommerce du thème ne reprennent la main.
 */

.ayo-catalogue {
  --ayo-red: #ff5555;
  --ayo-red-fort: #ed4545;
  --ayo-navy: #17233b;
  --ayo-muted: #718096;
  --ayo-line: #e7ebf1;
  --ayo-soft: #f7f9fc;
  --ayo-green: #20a55a;
  --ayo-radius: 18px;

  /* Seule icône qui ne peut pas venir du PHP : voir .added_to_cart. */
  --ayo-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

  max-width: 1440px !important;
  margin: 0 auto;
  padding: 0px 0px 80px 36px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #24324a;
  box-sizing: border-box;
}

.ayo-catalogue *,
.ayo-catalogue *::before,
.ayo-catalogue *::after { box-sizing: border-box; }

.ayo-catalogue svg { width: 100%; height: 100%; display: block; }

/* Le thème (Astra) souligne tous les liens d'un contenu de page et étire les
   champs de formulaire sur toute la largeur. Les deux défont cette mise en
   page : on reprend la main, sur le seul périmètre du catalogue. */
.ayo-catalogue a,
.ayo-catalogue a:hover,
.ayo-catalogue a:focus { text-decoration: none !important; }

.ayo-catalogue__barre select,
.ayo-catalogue__barre input { width: auto; max-width: 100%; margin: 0; }

/* --- En-tête ----------------------------------------------------------- */

.ayo-catalogue__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 25px;
  margin-bottom: 28px;
}

.ayo-catalogue__head div {
  place-self: center;
}

.ayo-catalogue__eyebrow {
  margin: 0 0 7px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 800;
  color: var(--ayo-red);
}

.ayo-catalogue__titre {
  margin: 0;
  color: var(--ayo-navy);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -1px;
}

.ayo-catalogue__intro {
  margin: 8px 0 0;
  color: var(--ayo-muted);
  font-size: 14px;
  max-width: 62ch;
}

.ayo-catalogue__compte {
  margin: 0 !important;
  padding: 10px 15px;
  border-radius: 99px;
  background: #fff4f4;
  border: 1px solid #ffe0e0;
  color: var(--ayo-red-fort);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  place-self: center;
}

/* --- Colonnes ---------------------------------------------------------- */

.ayo-catalogue__grille {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 30px;
}

/* Sans min-width:0, une piste de grille se laisse élargir par son contenu :
   la bande de catégories qui défile horizontalement suffisait alors à pousser
   toute la page au-delà de l'écran sur mobile. */
.ayo-catalogue__principal,
.ayo-catalogue__cotes,
.ayo-catalogue__produits { min-width: 0; }

.ayo-catalogue__cotes {
  align-self: start;
  position: sticky;
  top: 20px;
  padding: 18px;
  border: 1px solid var(--ayo-line);
  border-radius: var(--ayo-radius);
  box-shadow: 0 10px 30px rgba(20, 35, 60, .045);
  background: #fff;
}

.ayo-catalogue__cotes-titre {
  margin: 0 0 12px;
  font-weight: 800;
  font-size: 15px;
  color: var(--ayo-navy);
}

.ayo-catalogue__categories { display: flex; flex-direction: column; }

.ayo-catalogue__categorie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  padding: 11px 12px;
  margin: 0 0;
  border-radius: 10px;
  color: #526177;
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  transition: background .18s, color .18s;
}

.ayo-catalogue__categorie:hover { background: #fff2f2; color: var(--ayo-red-fort); }

.ayo-catalogue__categorie.est-actif {
  background: var(--ayo-red);
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 85, 85, .2);
}

.ayo-catalogue__compteur { font-size: 10px; color: #a3adbb; flex: none; }
.ayo-catalogue__categorie.est-actif .ayo-catalogue__compteur { color: #fff; }

/* --- Barre d'outils ---------------------------------------------------- */

.ayo-catalogue__barre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 20px;
  border: 1px solid var(--ayo-line);
  border-radius: 13px;
  background: var(--ayo-soft);
}

.ayo-catalogue__recherche {
  position: relative;
  display: block;
  flex: 1 1 240px;
  min-width: 180px;
  max-width: 420px;
}

.ayo-catalogue__loupe {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #8995a7;
  pointer-events: none;
}

.ayo-catalogue__recherche input {
  width: 100% !important;
  height: 42px;
  margin: 0;
  border: 1px solid var(--ayo-line);
  border-radius: 10px;
  padding: 0 12px 0 38px;
  background: #fff;
  font-size: 14px;
  color: var(--ayo-navy);
}

.ayo-catalogue__recherche input:focus,
.ayo-catalogue__tri:focus {
  outline: 2px solid var(--ayo-red);
  outline-offset: 1px;
}

.ayo-catalogue__tri {
  flex: 0 1 auto;
  width: auto !important;
  max-width: 230px;
  height: 42px;
  border: 1px solid var(--ayo-line);
  border-radius: 10px;
  background: #fff;
  padding: 0 13px;
  color: #526177;
  font-size: 13px;
}

/* Masqué par défaut : seul le <noscript> de la barre le rétablit, pour les
   visiteurs sans JavaScript. Voir ayoplus_catalog_render_toolbar(). */
.ayo-catalogue__filtrer {
  display: none;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ayo-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ayo-catalogue__vues { display: flex; gap: 5px; margin-left: auto; }

.ayo-catalogue__vue {
  width: 40px;
  height: 40px;
  padding: 11px;
  border: 1px solid var(--ayo-line);
  border-radius: 9px;
  background: #fff;
  color: #7d899a;
  cursor: pointer;
}

.ayo-catalogue__vue.est-actif { background: var(--ayo-navy); color: #fff; border-color: var(--ayo-navy); }

/* --- Produits ---------------------------------------------------------- */

.ayo-catalogue__produits {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ayo-catalogue__produit {
  overflow: hidden;
  border: 1px solid var(--ayo-line);
  border-radius: var(--ayo-radius);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
  width: 251px;
  height: 355px;
}

.ayo-catalogue__produit:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(20, 35, 60, .11);
}

.ayo-catalogue__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  padding: 18px;
  background: #f7f8fa;
  overflow: hidden;
}

.ayo-catalogue__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .3s;
}

.ayo-catalogue__produit:hover .ayo-catalogue__image img { transform: scale(1.04); }

.ayo-catalogue__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  border-radius: 99px;
  background: #eaf9f0;
  color: #16894a;
  font-size: 10px;
  font-weight: 800;
}

.ayo-catalogue__badge.est-rupture { background: #fdeeee; color: #c63a3a; }

.ayo-catalogue__corps {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ayo-catalogue__cat {
  margin: 0 0 5px !important;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 750;
  color: #8b96a7;
}

/* Deux lignes, pas une de plus : les titres de produit vont de « POLO MAKI »
   à trois lignes de spécifications, et une carte qui s'étire au gré du titre
   décale tout le reste de sa rangée. Le titre entier reste lisible au survol,
   par l'attribut title posé sur le lien. */
.ayo-catalogue__nom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 40px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ayo-navy);
  overflow-wrap: anywhere;
  margin: 0 0 3px !important;
}

.ayo-catalogue__nom a { color: inherit; text-decoration: none; }
.ayo-catalogue__nom a:hover { color: var(--ayo-red-fort); }

.ayo-catalogue__prix-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.ayo-catalogue__prix {
  font-size: 16px;
  font-weight: 850;
  color: var(--ayo-navy);
}

.ayo-catalogue__prix del { font-size: 12px; font-weight: 600; color: var(--ayo-muted); }
.ayo-catalogue__prix ins { text-decoration: none; }

.ayo-catalogue__stock { font-size: 10px; font-weight: 700; color: var(--ayo-green); white-space: nowrap; }
.ayo-catalogue__stock.est-rupture { color: #c63a3a; }

/* Deux boutons carrés, alignés à droite sous la ligne de prix : sans libellé
   à faire tenir, la carte n'a plus besoin d'une colonne élastique. */
.ayo-catalogue__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 8px;
  margin-top: 13px;
}

.ayo-catalogue__actions .ayo-catalogue__ajouter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 38px;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: var(--ayo-red);
  color: #fff !important;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
}

.ayo-catalogue__ajouter:hover { background: var(--ayo-red-fort); }

.ayo-catalogue__ajouter.est-inactif {
  background: #eef1f5;
  color: #8b96a7 !important;
  cursor: not-allowed;
}

/* Les icônes doivent garder leur taille : la règle générale de cette feuille
   étire tout SVG à 100 % de son parent. */
.ayo-catalogue__ajouter svg,
.ayo-catalogue__voir svg { width: 18px; height: 18px; }

/* WooCommerce ajoute ses propres classes d'état pendant l'ajax. Sans libellé,
   c'est la couleur qui dit que l'article est parti au panier. */
.ayo-catalogue__ajouter.loading { opacity: .65; }
.ayo-catalogue__ajouter.added,
.ayo-catalogue__ajouter.added:hover { background: var(--ayo-green); }
/* « Voir le panier », le lien que WooCommerce glisse après le bouton une fois
   l'article ajouté. Il est fabriqué en JavaScript (add-to-cart.js pose un
   textContent, jamais du HTML) : impossible d'y placer un SVG depuis le PHP,
   l'icône est donc dessinée ici en masque CSS.

   Le libellé est effacé visuellement, pas retiré : il reste lu par un lecteur
   d'écran, et WooCommerce pose le même texte en attribut title, ce qui donne
   l'infobulle des deux autres boutons. */
.ayo-catalogue .added_to_cart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 38px;
  padding: 10px;
  border: 1px solid var(--ayo-green);
  border-radius: 9px;
  background: #fff;
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
}

.ayo-catalogue .added_to_cart::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  background-color: var(--ayo-green);
  -webkit-mask: var(--ayo-fleche) center / contain no-repeat;
  mask: var(--ayo-fleche) center / contain no-repeat;
}

.ayo-catalogue .added_to_cart:hover {
  background: var(--ayo-green);
}

.ayo-catalogue .added_to_cart:hover::before {
  background-color: #fff;
}

.ayo-catalogue__voir {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--ayo-line);
  border-radius: 9px;
  background: #fff;
  color: #7d899a;
  width: 48px;
  height: 38px;
}

.ayo-catalogue__voir:hover { color: var(--ayo-red-fort); border-color: #ffd7d7; }

.ayo-catalogue__vide {
  padding: 40px 20px;
  border: 1px dashed var(--ayo-line);
  border-radius: var(--ayo-radius);
  text-align: center;
  color: var(--ayo-muted);
}

/* --- Vue liste --------------------------------------------------------- */

.ayo-catalogue__produits[data-vue="liste"] { grid-template-columns: 1fr; }

.ayo-catalogue__produits[data-vue="liste"] .ayo-catalogue__produit {
  flex-direction: row;
  align-items: stretch;
}

.ayo-catalogue__produits[data-vue="liste"] .ayo-catalogue__image {
  width: 190px;
  height: auto;
  flex: none;
}

.ayo-catalogue__produits[data-vue="liste"] .ayo-catalogue__nom { min-height: 0; font-size: 16px; }
.ayo-catalogue__produits[data-vue="liste"] .ayo-catalogue__actions { justify-content: flex-start; }

/* En grille, le prix est collé en bas pour aligner les cartes d'une même
   rangée ; en liste il n'y a rien à aligner, l'espace vide serait gratuit. */
.ayo-catalogue__produits[data-vue="liste"] .ayo-catalogue__prix-ligne { margin-top: 12px; }
.ayo-catalogue__produits[data-vue="liste"] .ayo-catalogue__produit:hover { transform: none; }

/* --- Défilement infini ------------------------------------------------- */

/* La sentinelle : le script la découvre, l'observe, et c'est son entrée dans
   l'écran qui déclenche la page suivante. */
.ayo-catalogue__infini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  min-height: 44px;
}

.ayo-catalogue__infini[hidden] { display: none; }

.ayo-catalogue__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 24px;
  border: 1px solid var(--ayo-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ayo-navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ayo-catalogue__plus:hover { border-color: #ffd7d7; color: var(--ayo-red-fort); }
.ayo-catalogue__plus[hidden] { display: none; }

.ayo-catalogue__etat {
  margin: 0;
  font-size: 13px;
  color: var(--ayo-muted);
  text-align: center;
}

.ayo-catalogue__etat:empty { display: none; }

/* Le rond qui tourne remplace le bouton pendant la requête : deux commandes
   au même endroit inviteraient à cliquer sur un chargement déjà lancé. */
.ayo-catalogue__spin {
  width: 22px;
  height: 22px;
  border: 2px solid var(--ayo-line);
  border-top-color: var(--ayo-red);
  border-radius: 50%;
  display: none;
}

.ayo-catalogue__infini.est-charge .ayo-catalogue__spin {
  display: block;
  animation: ayo-catalogue-tourne 0.7s linear infinite;
}

.ayo-catalogue__infini.est-charge .ayo-catalogue__plus { display: none; }

@keyframes ayo-catalogue-tourne {
  to { transform: rotate(360deg); }
}

/* Un visiteur qui a demandé moins d'animation garde le rond, immobile : il
   marque quand même la place du chargement. */
@media (prefers-reduced-motion: reduce) {
  .ayo-catalogue__infini.est-charge .ayo-catalogue__spin { animation: none; }
}

/* --- Pagination -------------------------------------------------------- */

/* Masquée sur la première page : le défilement infini a pris le relais. Elle
   revient dans les trois cas où il ne suffit pas - scripts coupés (le
   <noscript> du PHP), visiteur arrivé directement sur une page suivante (le
   PHP pose alors « est-visible »), et requête tombée avant tout ajout (le
   script pose la même classe). */
.ayo-catalogue__pagination {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 32px;
}

.ayo-catalogue__pagination.est-visible { display: flex; }

.ayo-catalogue__page {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--ayo-line);
  border-radius: 9px;
  background: #fff;
  color: #647187;
  font-size: 13px;
  text-decoration: none;
}

.ayo-catalogue__page:hover { border-color: #ffd7d7; color: var(--ayo-red-fort); }

.ayo-catalogue__page.est-actif {
  background: var(--ayo-red);
  border-color: var(--ayo-red);
  color: #fff;
  font-weight: 800;
}

.ayo-catalogue__ellipse { color: #a3adbb; }

/* --- Adaptatif --------------------------------------------------------- */

@media (max-width: 1100px) {
  .ayo-catalogue__produits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .ayo-catalogue { padding: 30px 20px 60px; }
  .ayo-catalogue__grille { grid-template-columns: minmax(0, 1fr); }
  .ayo-catalogue__cotes { position: static; }
  .ayo-catalogue__categories {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 5px;
    -webkit-overflow-scrolling: touch;
  }
  .ayo-catalogue__categorie { white-space: nowrap; margin: 0; flex: none; }
}

@media (max-width: 650px) {
  .ayo-catalogue__head { flex-direction: column; align-items: flex-start; }
  .ayo-catalogue__barre { flex-wrap: wrap; }
  .ayo-catalogue__recherche { max-width: none; flex-basis: 100%; }
  .ayo-catalogue__vues { margin-left: auto; }
  .ayo-catalogue__produits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ayo-catalogue__produits[data-vue="liste"] .ayo-catalogue__image { width: 120px; }
}

@media (max-width: 430px) {
  .ayo-catalogue__titre { font-size: 26px; }
  .ayo-catalogue__produits { grid-template-columns: 1fr; }
}