/**
 * Boutique : panier, commande, compte client, fiches produit.
 *
 * Remplace les feuilles génériques de WooCommerce, retirées dans
 * inc/commerce/apparence.php. On stylise le balisage que WooCommerce produit,
 * avec les tokens du thème.
 */

/* ══ Boutons WooCommerce ════════════════════════════════════ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  background: var(--c-bouton-fond);
  color: var(--c-bouton-texte);
  font-family: var(--police-titre);
  font-size: var(--t-s);
  font-weight: var(--poids-fort);
  letter-spacing: var(--interlettre-bouton);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--rayon-s);
  cursor: pointer;
  transition: background-color var(--transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--c-bouton-fond-survol);
  color: var(--c-bouton-texte);
}

.woocommerce button.button.alt,
.woocommerce a.button.alt {
  background: var(--c-or);
  color: var(--c-nuit);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
  background: var(--c-or);
  color: var(--c-nuit);
  filter: brightness(0.95);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ══ Messages ═══════════════════════════════════════════════ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin-block-end: var(--e-5);
  padding: var(--e-4) var(--e-5);
  background: var(--c-fond-doux);
  border-inline-start: 4px solid var(--c-nuit);
  border-radius: var(--rayon-s);
  list-style: none;
  font-size: var(--t-s);
}

.woocommerce-message { border-inline-start-color: var(--c-or); }
.woocommerce-error { border-inline-start-color: var(--c-alerte); }

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

/* ══ Formulaires ════════════════════════════════════════════ */

.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-block-end: var(--e-4);
}

.woocommerce form .form-row label {
  font-family: var(--police-titre);
  font-size: var(--t-xs);
  font-weight: var(--poids-moyen);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-texte-fort);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon-s);
  font-size: var(--t-s);
  transition: border-color var(--transition);
}

/* select2 fixe la hauteur du champ à 28 px et place son texte par
   line-height. La marge intérieure ci-dessus faisait donc déborder le libellé
   sous la bordure : on rend la hauteur au contenu et on recentre. */
.woocommerce .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: auto;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100%;
  inset-inline-end: var(--e-3);
}

.woocommerce .select2-container--open .select2-selection--single {
  border-color: var(--c-ciel);
}

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

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

/* Cases à cocher : label à côté, pas dessous. */
.woocommerce form .form-row.woocommerce-validated .checkbox,
.woocommerce form .form-row .checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--e-2);
}

/* Deux colonnes sur les formulaires de facturation. */
@media (width >= 700px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    display: inline-flex;
    width: calc(50% - var(--e-2));
  }

  .woocommerce form .form-row-first { margin-inline-end: var(--e-3); }
}

/* ══ Tableau du panier ══════════════════════════════════════ */

.woocommerce table.shop_table {
  width: 100%;
  margin-block-end: var(--e-6);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon-m);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce table.shop_table th {
  padding: var(--e-4);
  background: var(--c-fond-doux);
  font-family: var(--police-titre);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.woocommerce table.shop_table td {
  padding: var(--e-4);
  border-block-start: 1px solid var(--c-bordure);
  vertical-align: middle;
}

.woocommerce table.shop_table img {
  width: 4rem;
  height: auto;
  border-radius: var(--rayon-s);
}

.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-alerte);
  font-size: var(--t-l);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--rayon-rond);
}

.woocommerce a.remove:hover {
  background: var(--c-alerte);
  color: var(--c-blanc);
}

/* Quantité */
.woocommerce .quantity input.qty {
  width: 4.5rem;
  padding: var(--e-2);
  text-align: center;
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon-s);
}

/* Le tableau devient défilable plutôt que de casser la mise en page. */
@media (width < 700px) {
  .woocommerce table.shop_table {
    display: block;
    overflow-x: auto;
  }
}

/* ══ Totaux et encadrés ═════════════════════════════════════ */

.woocommerce .cart_totals,
.woocommerce .cart-collaterals,
.woocommerce-checkout #order_review {
  padding: var(--e-5);
  background: var(--c-fond-doux);
  border-radius: var(--rayon-m);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
  font-size: var(--t-l);
  text-transform: uppercase;
  margin-block-end: var(--e-4);
}

/* ══ Prix ═══════════════════════════════════════════════════ */

.woocommerce .price,
.woocommerce .amount {
  font-family: var(--police-titre);
  font-weight: var(--poids-fort);
  color: var(--c-texte-fort);
}

.woocommerce del { opacity: 0.55; }
.woocommerce ins { text-decoration: none; }

/* ══ Commande : deux colonnes ═══════════════════════════════ */

@media (width >= 900px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    /* Deux rangées explicites : le titre puis le récapitulatif. Sans elles,
       le placement automatique renvoyait le récapitulatif sous la colonne de
       gauche, laissant son titre seul en haut. */
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0 var(--e-7);
  }

  .woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .woocommerce-checkout form.checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
  }

  .woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ══ Compte client ══════════════════════════════════════════ */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--e-7);
  align-items: start;
}

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

.woocommerce-MyAccount-navigation li + li {
  margin-block-start: 0;
  border-block-start: 1px solid var(--c-bordure);
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--e-3) var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-xs);
  font-weight: var(--poids-moyen);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-texte-fort);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
  background: var(--c-fond-doux);
  color: var(--c-nuit);
}

@media (width < 900px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}

/* ══ Fiche produit ══════════════════════════════════════════ */

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-7);
  align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery { grid-row: span 2; }

.woocommerce div.product .product_title {
  font-size: var(--t-2xl);
}

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-block: var(--e-5);
}

.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin: 0 0 var(--e-5);
  padding: 0 0 var(--e-3);
  border-block-end: 1px solid var(--c-bordure);
  list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-xs);
  text-transform: uppercase;
}

@media (width < 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

/* ══ Grille de produits ═════════════════════════════════════ */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products li.product {
  margin: 0;
  text-align: center;
}

.woocommerce ul.products li.product img {
  border-radius: var(--rayon-m);
  margin-block-end: var(--e-3);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--t-m);
}

/* ══ Divers ═════════════════════════════════════════════════ */

.woocommerce .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.woocommerce-breadcrumb {
  margin-block-end: var(--e-5);
  font-size: var(--t-xs);
  color: var(--c-texte);
}

/* ══ Moyens de paiement ═════════════════════════════════════ */

/* Ce bloc vient de la passerelle Stripe, absente de l'environnement local :
   il arrivait sans mise en forme, puces de liste apparentes et logos
   chevauchant le texte qui suit. */

.woocommerce-checkout #payment ul.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
}

.woocommerce-checkout #payment ul.wc_payment_methods > li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon-m);
  background: var(--c-fond);
  margin: 0;
}

.woocommerce-checkout #payment ul.wc_payment_methods > li > label {
  font-weight: var(--poids-moyen);
  margin: 0;
  cursor: pointer;
}

/* Les logos des cartes tiennent sur la même ligne que l'intitulé. */
.woocommerce-checkout #payment ul.wc_payment_methods > li label img {
  display: inline-block;
  height: 1.5em;
  width: auto;
  margin-inline-start: var(--e-2);
  vertical-align: middle;
}

/* Le panneau d'un moyen de paiement occupe toute la largeur de sa carte. */
.woocommerce-checkout #payment ul.wc_payment_methods > li .payment_box {
  grid-column: 1 / -1;
  margin: var(--e-2) 0 0;
  padding: var(--e-3);
  border-radius: var(--rayon-s);
  background: var(--c-fond-doux);
  font-size: var(--t-s);
}

.woocommerce-checkout #payment ul.wc_payment_methods > li .payment_box p:last-child {
  margin-bottom: 0;
}

/* Séparait mal le bloc de paiement du texte de confidentialité qui suit. */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
  margin-block-start: var(--e-4);
  font-size: var(--t-s);
  color: var(--c-texte);
}

.woocommerce-checkout #payment .form-row.place-order {
  margin-block-start: var(--e-4);
  padding: 0;
}

/* ══ Tableaux de l'espace client sur petit écran ═════════════ */

/* WooCommerce marque ses tableaux « shop_table_responsive » et pose sur chaque
   cellule un attribut data-title reprenant l'en-tête de colonne. Sa feuille de
   style s'en sert pour transformer le tableau en liste sur mobile — mais le
   thème retire cette feuille, et les tableaux restaient donc à leur largeur
   d'origine : 534 px sur un écran de 430, d'où un débordement horizontal.

   On reprend le principe : chaque ligne devient une carte, chaque cellule une
   paire intitulé / valeur. */

@media (width < 700px) {
  .woocommerce table.shop_table_responsive thead {
    /* L'intitulé est repris cellule par cellule juste en dessous. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody,
  .woocommerce table.shop_table_responsive tr,
  .woocommerce table.shop_table_responsive td {
    display: block;
    width: auto;
  }

  .woocommerce table.shop_table_responsive tr {
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon-m);
    background: var(--c-fond);
  }

  .woocommerce table.shop_table_responsive tr + tr {
    margin-block-start: var(--e-3);
  }

  /* L'intitulé flotte à gauche, la valeur s'écoule à droite. Une disposition
     en flex écarterait les morceaux d'une même valeur — « 47 € » d'un côté,
     « / mois » de l'autre. */
  .woocommerce table.shop_table_responsive td {
    display: block;
    overflow: hidden;
    padding: var(--e-2) 0;
    border: 0;
    text-align: end;
  }

  .woocommerce table.shop_table_responsive td + td {
    border-block-start: 1px solid var(--c-bordure);
  }

  .woocommerce table.shop_table_responsive td::before {
    content: attr(data-title);
    float: left;
    margin-inline-end: var(--e-3);
    font-size: var(--t-xs);
    font-weight: var(--poids-moyen);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: start;
    color: var(--c-texte);
  }

  /* La colonne « actions » n'a pas d'intitulé : son bouton prend toute la
     largeur plutôt que de se tasser dans une moitié de ligne. */
  .woocommerce table.shop_table_responsive td:not([data-title]),
  .woocommerce table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions,
  .woocommerce table.shop_table_responsive td[data-title="Actions"] {
    display: block;
    text-align: start;
  }

  .woocommerce table.shop_table_responsive td:not([data-title])::before,
  .woocommerce table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions::before,
  .woocommerce table.shop_table_responsive td[data-title="Actions"]::before {
    content: none;
  }

  .woocommerce table.shop_table_responsive td .button,
  .woocommerce table.shop_table_responsive td .woocommerce-button {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Filet de sécurité : un tableau non marqué « responsive » défile dans son
     coin au lieu d'élargir la page entière. */
  .woocommerce-MyAccount-content table:not(.shop_table_responsive) {
    display: block;
    overflow-x: auto;
  }
}