/* Habillage des éléments WooCommerce et de l'extension AccessoMatch aux couleurs de la maquette.
   Le balisage reste celui de WooCommerce et de l'extension : la logique d'achat n'est pas touchée. */

/* ——— Formulaire d'achat (variations, quantité, bouton) ——— */
.achat form.cart { display: flex; flex-direction: column; gap: 24px; margin: 0; }
/* Produit sans variation : quantité et bouton sur la même ligne, comme pour les autres. */
.achat form.cart:not(.variations_form) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; }
.achat .variations { width: 100%; border-collapse: collapse; }
.achat .variations tr { display: flex; flex-direction: column; gap: 12px; }
.achat .variations tr + tr { margin-top: 16px; }
.achat .variations th,
.achat .variations td { display: block; padding: 0; text-align: left; }
.achat .variations .label label { font: 500 18px/24px var(--police-texte); color: var(--noir); }
.achat .variations select { display: none; }

/* Tailles en boutons : le <select> reste la source, les boutons le pilotent (AccessoMatch écoute ses changements).
   Géométrie et couleurs reprises de la maquette (.pastille-choix de l'intégration). */
.choix-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.choix-bouton {
  display: grid;
  place-items: center;
  min-width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid var(--gris-bordure);
  border-radius: 10px; /* valeur de la maquette */
  background: var(--blanc);
  font: 600 20px/26px var(--police-texte);
  color: var(--titre);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.choix-bouton:hover { border-color: var(--lavande); }
.choix-bouton.est-actif {
  border-color: var(--violet);
  box-shadow: inset 0 0 0 1px var(--violet);
  color: var(--violet);
}
.choix-bouton:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.choix-bouton:disabled { opacity: .4; cursor: not-allowed; }

.achat .woocommerce-variation-price { font: 600 24px/30px var(--police-texte); color: var(--titre); }
.achat .woocommerce-variation-availability { font: 400 15px/22px var(--police-texte); }
/* Quantité et bouton d'ajout se touchaient : leur conteneur est un simple bloc. */
.achat .woocommerce-variation-add-to-cart,
.achat .variations_button { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.achat .quantity { display: inline-flex; align-items: center; }
.achat .quantity input[type="number"] {
  width: 86px;
  height: 56px;
  padding: 0 12px;
  border: 1px solid var(--gris-bordure);
  border-radius: var(--r-petit);
  font: 500 18px/24px var(--police-texte);
  text-align: center;
}
.achat .single_add_to_cart_button,
.achat button[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  align-self: flex-start;
  padding: 20px 40px;
  border: 0;
  border-radius: var(--r-pilule);
  background: var(--corail);
  font: 500 20px/25.2px var(--police-texte);
  color: var(--blanc);
  cursor: pointer;
  transition: background-color .2s ease;
}
/* Au survol, le bouton grossit légèrement : pas de changement de couleur. */
.achat .single_add_to_cart_button { transition: transform .18s ease, opacity .18s ease; }
/* WooCommerce repeint ses boutons « alt » en violet au survol, avec une règle plus
   spécifique que la nôtre : on la contre explicitement. */
.achat .single_add_to_cart_button:hover,
.woocommerce .achat button.single_add_to_cart_button:hover,
.woocommerce .achat button.single_add_to_cart_button.alt:hover {
  background: var(--corail) !important;
  transform: scale(1.03);
}
.achat .single_add_to_cart_button:active,
.woocommerce .achat button.single_add_to_cart_button:active { transform: scale(.99); }
.achat .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Après un ajout, WooCommerce repeint le bouton en violet et lui colle une coche,
   puis ajoute un lien « Voir le panier » : le tiroir du panier s'en charge déjà. */
.achat .single_add_to_cart_button.added,
.woocommerce .achat button.single_add_to_cart_button.added,
.woocommerce .achat button.single_add_to_cart_button.added:hover { background: var(--corail) !important; }
/* « !important » nécessaire : les règles de WooCommerce sont chargées après les nôtres. */
.achat .single_add_to_cart_button.added::after,
.achat .single_add_to_cart_button.loading::after { content: none !important; }
a.added_to_cart.wc-forward { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .achat .single_add_to_cart_button, .achat .single_add_to_cart_button:hover,
  .achat .single_add_to_cart_button:active { transition: none; transform: none; }
}
.achat .stock.out-of-stock { color: var(--corail); }

/* ——— Accessoires liés (extension AccessoMatch) ——— */
.mi-accessoires-wrapper { display: grid; gap: 12px; margin-top: 23px; }
.mi-accessoire-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: var(--r-bloc);
  background: rgba(217, 217, 217, .3);
  cursor: pointer;
}
.mi-accessoire-tile-image { flex: none; width: 100px; height: 100px; border-radius: var(--r-petit); overflow: hidden; }
.mi-accessoire-tile-image img { width: 100%; height: 100%; object-fit: contain; }
.mi-accessoire-tile-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mi-accessoire-tile-title { font: 500 18px/24px var(--police-texte); color: var(--noir); }
.mi-accessoire-tile-subtitle { font: 400 14px/20px var(--police-texte); color: rgba(35, 35, 35, .7); }
.mi-accessoire-tile-price { font: 600 20px/26px var(--police-texte); color: var(--titre); }
.mi-accessoire-tile-price del { font-weight: 400; opacity: .5; }
.mi-accessoire-tile-more { font: 400 14px/20px var(--police-texte); color: var(--corail); }
.mi-accessoire-tile-add {
  position: absolute;
  top: 50%;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--corail);
  font: 500 24px/1 var(--police-texte);
  color: var(--blanc);
  text-decoration: none;
  transform: translateY(-50%);
}
.mi-accessoire-tile-add:hover { background: var(--corail-survol); }
.mi-accessoire-tile-add.loading { opacity: .6; }
/* Ajouté au panier : la coche prend la place du « + » (le « + » est du texte, on le masque par la taille de police). */
.mi-accessoire-tile-add.added { font-size: 0; }
/* Coche dessinée et posée en absolu au centre du rond : le « + » masqué occupe encore une ligne de la grille,
   et un caractère « ✓ » tombe trop bas dans la police. Le -75 % compense le dessin en L tourné. */
.mi-accessoire-tile-add.added::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 7px;
  margin: 0;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translate(-50%, -75%) rotate(-45deg);
}

/* Pop-in de l'accessoire */
.mi-accessoire-popup { position: fixed; inset: 0; z-index: 1000; display: none; }
.mi-accessoire-popup.is-open,
.mi-accessoire-popup[style*="block"] { display: block; }
.mi-accessoire-popup-overlay { position: absolute; inset: 0; background: rgba(35, 35, 35, .5); }
.mi-accessoire-popup-inner {
  position: relative;
  display: flex;
  gap: 32px;
  width: min(1020px, calc(100% - 32px));
  max-height: calc(100% - 64px);
  margin: 32px auto;
  padding: 40px;
  border-radius: var(--r-carte);
  background: var(--blanc);
  box-shadow: var(--ombre-popin);
  overflow-y: auto;
}
.mi-accessoire-popup-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--violet);
  cursor: pointer;
}
.mi-accessoire-popup-image { flex: none; width: 411px; border-radius: var(--r-carte); background: rgba(217, 217, 217, .4); overflow: hidden; }
.mi-accessoire-popup-image img { width: 100%; height: 100%; object-fit: contain; }
.mi-accessoire-popup-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.mi-accessoire-popup-content h3 { margin: 0; font: 600 32px/38.4px var(--police-titre); color: var(--titre); }
.mi-accessoire-popup-description { font: 400 18px/26px var(--police-texte); color: var(--noir); }
.mi-accessoire-popup-price { font: 700 30px/37.8px var(--police-texte); color: #000; }
/* Sélecteur renforcé : la règle « .woocommerce a.button » de WooCommerce passait devant (bouton gris). */
.mi-accessoire-popup a.mi-accessoire-addtocart.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border-radius: var(--r-pilule);
  background: var(--corail);
  font: 500 16px/20.2px var(--police-texte);
  color: var(--blanc);
  text-decoration: none;
}
.mi-accessoire-popup a.mi-accessoire-addtocart.button:hover { background: var(--corail-survol); color: var(--blanc); }
.mi-accessoire-choix { display: grid; gap: 10px; }
.mi-accessoire-choix-label { margin: 0; font: 500 16px/22px var(--police-texte); color: var(--noir); }
.mi-accessoire-select-size-msg { font: 400 15px/22px var(--police-texte); color: rgba(35, 35, 35, .7); }

@media (max-width: 767px) {
  .mi-accessoire-tile-image { width: 72px; height: 72px; }
  .mi-accessoire-tile-title { font-size: 16px; line-height: 22px; }
  .mi-accessoire-tile-price { font-size: 18px; }
  .mi-accessoire-popup-inner { flex-direction: column; gap: 20px; margin: 16px auto; padding: 24px 16px; }
  .mi-accessoire-popup-image { width: 100%; height: 240px; }
  .mi-accessoire-popup-content h3 { font-size: 24px; line-height: 28.8px; }
  .mi-accessoire-popup-price { font-size: 24px; line-height: 30px; }
  .achat .single_add_to_cart_button { align-self: stretch; width: 100%; padding: 16px 30px; font-size: 16px; line-height: 20.2px; }
}