/*
 * Boutique : habillage de WooCommerce et des widgets WooCommerce d'Elementor Pro.
 *
 * Ce markup n'est pas le notre : on ne peut pas y poser d'utilitaires Tailwind,
 * c'est donc du CSS ecrit sur leurs selecteurs. Les valeurs viennent des
 * variables de charte definies par site.css, chargee avant cette feuille.
 *
 * Les selecteurs Pro cibles ici sont ceux releves sur les pages en ligne de
 * creativini.fr (panier, mon compte) : la mise en page deux colonnes du panier
 * et les onglets du compte restent les leurs, seules les couleurs, les polices
 * et les formes passent a la charte.
 *
 * Charge uniquement sur les pages de la boutique, cf inc/boutique.php.
 */

/* ---------------------------------------------------------------------- */
/* Boutons                                                                  */
/* ---------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.hrel-achat button.single_add_to_cart_button {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  padding: 0.85rem 1.6rem;
  color: var(--color-on-accent);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  transition:
    background-color 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.hrel-achat button.single_add_to_cart_button:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
  transform: translateY(-1px);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.hrel-achat button.single_add_to_cart_button:active {
  background: var(--color-accent-pressed);
  transform: none;
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
  background: var(--color-text-disabled);
  transform: none;
  cursor: not-allowed;
}

/* Retour a la boutique, continuer mes achats : des actions secondaires, elles
   ne doivent pas peser autant que « Commander ». */
.woocommerce a.button.wc-backward,
.woocommerce a.button.wc-forward:not(.checkout-button),
.woocommerce button.button[name='update_cart'] {
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-primary);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce a.button.wc-forward:not(.checkout-button):hover,
.woocommerce button.button[name='update_cart']:hover {
  border-color: var(--card-hover-border);
  background: transparent;
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------- */
/* Fiche produit : ajout au panier                                          */
/* ---------------------------------------------------------------------- */

.hrel-achat form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
}

.hrel-achat .quantity {
  display: inline-flex;
}

.hrel-achat .quantity input.qty,
.woocommerce .quantity input.qty {
  width: 4.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 0.8rem 0.5rem;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  text-align: center;
}

.hrel-achat .quantity input.qty:focus,
.woocommerce .quantity input.qty:focus {
  border-color: var(--color-accent);
  outline: none;
}

.hrel-achat .stock {
  width: 100%;
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hrel-achat .stock.out-of-stock {
  color: var(--color-danger);
}

/* Prix barre d'une promotion : le prix courant reste le plus lisible. */
.hrel-prix del,
.woocommerce del {
  margin-right: 0.5rem;
  color: var(--color-text-tertiary);
  font-size: 0.7em;
  text-decoration-thickness: 1px;
}

.hrel-prix ins,
.woocommerce ins {
  text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* Textes longs : resume et description de la fiche                         */
/* ---------------------------------------------------------------------- */

.hrel-resume p,
.hrel-description p {
  margin: 0;
}

.hrel-resume p + p,
.hrel-description p + p,
.hrel-description ul,
.hrel-description ol {
  margin-top: 1rem;
}

.hrel-description strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.hrel-description a {
  color: var(--color-accent-text);
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

.hrel-description ul,
.hrel-description ol {
  padding-left: 1.1rem;
}

.hrel-description li {
  margin-top: 0.4rem;
}

.hrel-description li::marker {
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------- */
/* Messages                                                                 */
/* ---------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-card);
  background: var(--color-surface-elevated);
  padding: 1rem 1.2rem;
  color: var(--color-text-primary);
  font-size: 14px;
  list-style: none;
}

.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
  border-left-color: var(--color-danger);
}

/* WooCommerce pose une pastille coloree en ::before sur ses messages : la
   charte s'en passe, le liseret de gauche suffit. */
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-error::before {
  content: none;
}

.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button {
  margin-left: auto;
}

/* ---------------------------------------------------------------------- */
/* Tableaux : panier, commande, commandes du compte                         */
/* ---------------------------------------------------------------------- */

.woocommerce table.shop_table {
  border: 1px solid var(--color-border);
  border-collapse: collapse;
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.woocommerce table.shop_table th {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.woocommerce table.shop_table td {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 14px;
}

.woocommerce table.shop_table td.product-name a {
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce table.shop_table td.product-name a:hover {
  color: var(--color-accent);
}

.woocommerce table.cart img {
  width: 64px;
  border-radius: 10px;
}

.woocommerce a.remove {
  border-radius: var(--radius-pill);
  color: var(--color-text-tertiary) !important;
  font-weight: 400;
}

.woocommerce a.remove:hover {
  background: var(--color-accent);
  color: var(--color-on-accent) !important;
}

/* Totaux et sous-totaux : la somme a payer est la seule chose en couleur. */
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th {
  font-size: 14px;
}

.woocommerce .cart_totals .order-total td,
.woocommerce .order-total .woocommerce-Price-amount {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}

.woocommerce .wc-proceed-to-checkout {
  padding-top: 1.2rem;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: block;
  text-align: center;
}

/* Le champ du code promo sort trop etroit de WooCommerce : « Code promo » n'y
   tient pas. */
.woocommerce .coupon input#coupon_code {
  width: auto;
  min-width: 11rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 0.8rem 0.9rem;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
}

.woocommerce .coupon input#coupon_code:focus {
  border-color: var(--color-accent);
  outline: none;
}

.woocommerce .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

/* ---------------------------------------------------------------------- */
/* Formulaires : commande, connexion, adresses                              */
/* ---------------------------------------------------------------------- */

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce form .woocommerce-form-row label {
  margin-bottom: 0.35rem;
  color: var(--color-text-secondary);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce .woocommerce-Input--text,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 0.75rem 0.9rem;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .woocommerce-Input--text:focus {
  border-color: var(--color-accent);
  outline: none;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: var(--color-danger);
}

.woocommerce .required {
  color: var(--color-accent);
  text-decoration: none;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-checkout #payment {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: 1.4rem;
}

.woocommerce-checkout #payment div.payment_box {
  border-radius: var(--radius-card);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--color-surface-elevated);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--color-border);
}

.woocommerce-checkout h3,
.woocommerce-cart h2,
.woocommerce-checkout h2,
.woocommerce-account h2,
.woocommerce-account h3 {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-synthesis-weight: none;
  font-weight: 600;
  letter-spacing: -0.006em;
}

/* ---------------------------------------------------------------------- */
/* Mon compte : onglets du widget Elementor Pro                             */
/* ---------------------------------------------------------------------- */

.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation-link a {
  display: block;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.1rem;
  color: var(--color-text-secondary);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation-link a:hover {
  color: var(--color-accent);
}

.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--color-surface-elevated);
  color: var(--color-accent);
  font-weight: 600;
}

.woocommerce-MyAccount-content {
  color: var(--color-text-secondary);
  font-size: 14px;
}

.woocommerce-MyAccount-content a:not(.button) {
  color: var(--color-accent-text);
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------- */
/* Divers                                                                   */
/* ---------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
  color: var(--color-text-tertiary);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--color-text-tertiary);
  text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--color-accent);
}

.woocommerce .woocommerce-form-login__rememberme,
.woocommerce .woocommerce-form__label-for-checkbox {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.woocommerce .woocommerce-privacy-policy-text {
  color: var(--color-text-tertiary);
  font-size: 12px;
}

/* La boutique n'a qu'un produit : le tri et le compteur de resultats de
   l'archive n'ont rien a trier. */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
  display: none;
}

/* ---------------------------------------------------------------------- */
/* Degagement sous l'en-tete fixe                                           */
/* ---------------------------------------------------------------------- */

/*
 * Les pages du site commencent par une section qui porte son propre padding
 * haut (pt-32), ce qui les degage de la barre flottante. Les pages de la
 * boutique, elles, affichent un contenu que nous ne composons pas : sans cette
 * regle, le tableau du panier passe sous l'en-tete.
 *
 * La fiche produit en est exclue : son gabarit porte deja le padding.
 */
.woocommerce-cart main,
.woocommerce-checkout main,
.woocommerce-account main {
  display: block;
  margin: 0 auto;
  max-width: 1240px;
  padding: 9rem 1.5rem 6rem;
}

@media (min-width: 640px) {
  .woocommerce-cart main,
  .woocommerce-checkout main,
  .woocommerce-account main {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Le titre de la page, que WooCommerce n'imprime pas lui-meme sur ces pages. */
.woocommerce-cart main > h1,
.woocommerce-checkout main > h1,
.woocommerce-account main > h1 {
  margin-bottom: 2.5rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.15;
}