/* ==========================================================================
   Cielo Craft — WooCommerce
   1. Grille de collection
   2. Carte produit
   3. Fiche produit
   4. Blocs éditoriaux de la fiche
   5. Barre d'ajout mobile
   6. Panier
   7. Tunnel de commande et compte
   8. Messages et avis
   ========================================================================== */

/* 1. Grille de collection ------------------------------------------------ */

/* En-tête de collection : centré, sur fond vanille, refermé par un feston. */
.woocommerce-products-header {
  position: relative;
  padding-block: var(--cc-e-5) calc(var(--cc-e-5) + 14px);
  background: var(--cc-vanille);
  text-align: center;
}

.woocommerce-products-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background-image: radial-gradient(circle at 50% 100%, var(--cc-creme) 68%, transparent 69%);
  background-size: 28px 14px;
  background-repeat: repeat-x;
}

.woocommerce-products-header .cc-fil {
  justify-content: center;
  margin-bottom: var(--cc-e-2);
}

.woocommerce-products-header__title {
  margin-bottom: var(--cc-e-2);
}

.term-description {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--cc-encre);
}

.woocommerce-products-header .cc-perle {
  max-width: 46ch;
  margin-inline: auto;
  text-align: left;
}

/* Barre de tri : un liseré pointillé la sépare de la grille. */
.cc-barre-collection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-e-2);
  margin-block: var(--cc-e-4) var(--cc-e-4);
  padding-bottom: var(--cc-e-2);
  border-bottom: 2px dotted var(--cc-ligne);
}

.woocommerce-result-count {
  margin: 0;
  font-size: var(--cc-t-sm);
  color: var(--cc-gris);
}

.woocommerce-ordering {
  margin: 0;
}

.woocommerce-ordering select {
  width: auto;
  min-width: 14rem;
  padding-block: 0.5em;
  font-size: var(--cc-t-sm);
}

/* Pagination du catalogue.
   WooCommerce produit <nav class="woocommerce-pagination"> avec une liste :
   sans règles dédiées, les numéros de page sortaient en puces alignées à
   gauche. On reprend exactement l'habillage des autres paginations du site. */
.woocommerce-pagination {
  margin-top: var(--cc-e-5);
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce-pagination ul.page-numbers li {
  margin: 0;
  border: 0;
}

.woocommerce-pagination .page-numbers,
.woocommerce-pagination .page-numbers.dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 0.85em;
  border-radius: var(--cc-r-pilule);
  border: 2px solid var(--cc-ligne);
  background: var(--cc-creme);
  font-family: var(--cc-titre);
  font-weight: 500;
  font-size: var(--cc-t-sm);
  color: var(--cc-prune);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.woocommerce-pagination a.page-numbers:hover {
  background: var(--cc-dragee);
  border-color: var(--cc-dragee-fonce);
  color: var(--cc-prune);
}

.woocommerce-pagination .page-numbers.current {
  background: var(--cc-prune);
  border-color: var(--cc-prune);
  color: var(--cc-creme);
}

.woocommerce-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--cc-gris);
  min-width: 0;
  padding: 0 0.3em;
}

.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next {
  font-weight: 600;
}

ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cc-e-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48em) {
  ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-e-4); }
}

@media (min-width: 75em) {
  ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

ul.products.columns-3 { }
ul.products li.product { margin: 0; }

/* 2. Carte produit ------------------------------------------------------- */
/* Chaque produit est présenté comme une pièce en vitrine : un présentoir
   clair, une ombre courte au sol, une étiquette de prix posée dessus. */

li.product {
  position: relative;
  display: flex;
  flex-direction: column;
}

li.product .cc-presentoir {
  position: relative;
  background: var(--cc-vanille);
  border-radius: var(--cc-r-carte);
  overflow: hidden;
  margin-bottom: var(--cc-e-2);
}

li.product img,
li.product .cc-illustration {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.woocommerce-product-gallery .cc-illustration {
  width: 100%;
  aspect-ratio: 1 / 1;
}

li.product .woocommerce-loop-product__title {
  font-family: var(--cc-titre);
  font-size: var(--cc-t-base);
  font-weight: 600;
  color: var(--cc-prune);
  margin: 0 0 0.25em;
  line-height: 1.3;
}

li.product a.woocommerce-LoopProduct-link {
  text-decoration: none;
  color: inherit;
}

li.product .price {
  display: block;
  font-family: var(--cc-titre);
  font-size: var(--cc-t-sm);
  font-weight: 600;
  color: var(--cc-prune);
  margin-bottom: var(--cc-e-2);
}

li.product .price del {
  color: var(--cc-gris);
  font-weight: 400;
  margin-right: 0.4em;
}

li.product .price ins {
  text-decoration: none;
  color: var(--cc-framboise);
}

li.product .cc-carte-pied {
  margin-top: auto;
}

li.product .button {
  width: 100%;
  font-size: var(--cc-t-xs);
  padding: 0.7em 1.2em;
}

li.product .added_to_cart {
  display: block;
  margin-top: 0.5em;
  font-size: var(--cc-t-xs);
  text-align: center;
}

/* Étiquettes posées sur le présentoir */
.cc-etiquettes {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  z-index: 2;
}

span.onsale,
.cc-etiquette {
  display: inline-block;
  font-family: var(--cc-titre);
  font-size: var(--cc-t-xs);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.35em 0.85em;
  border-radius: var(--cc-r-pilule);
  background: var(--cc-prune);
  color: var(--cc-creme);
}

.cc-etiquette--douce {
  background: var(--cc-creme);
  color: var(--cc-prune);
  border: 2px dotted var(--cc-dragee-fonce);
}

.cc-etiquette--rupture {
  background: var(--cc-gris);
  color: var(--cc-creme);
}

/* 3. Fiche produit ------------------------------------------------------- */

.single-product div.product {
  display: grid;
  gap: var(--cc-e-4);
  padding-top: var(--cc-e-4);
}

@media (min-width: 56em) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    column-gap: var(--cc-e-5);
  }
  .single-product div.product .woocommerce-product-gallery { grid-column: 1; }
  .single-product div.product .summary { grid-column: 2; }
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .related,
  .single-product div.product .up-sells,
  .single-product div.product .cc-cross-sell { grid-column: 1 / -1; }
}

.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery__wrapper {
  border-radius: var(--cc-r-bloc);
  overflow: hidden;
  background: var(--cc-vanille);
}

.woocommerce-product-gallery img {
  border-radius: 0;
}

.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.flex-control-thumbs img {
  border-radius: 14px;
  cursor: pointer;
  opacity: 0.65;
}

.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover {
  opacity: 1;
}

.product_title {
  margin-bottom: var(--cc-e-2);
}

.single-product div.product p.price,
.single-product div.product span.price {
  display: block;
  font-family: var(--cc-titre);
  font-size: var(--cc-t-lg);
  font-weight: 600;
  color: var(--cc-prune);
  margin-bottom: var(--cc-e-3);
}

.woocommerce-product-details__short-description {
  max-width: 52ch;
  margin-bottom: var(--cc-e-3);
}

.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-e-2);
  margin-block: var(--cc-e-3);
}

.quantity {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--cc-ligne);
  border-radius: var(--cc-r-pilule);
  overflow: hidden;
}

.quantity input.qty {
  width: 4.5rem;
  border: 0;
  border-radius: 0;
  text-align: center;
  padding: 0.75em 0.4em;
}

.single_add_to_cart_button {
  flex: 1 1 14rem;
  font-size: var(--cc-t-base);
  padding: 0.95em 1.8em;
}

/* Variations */
table.variations {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--cc-e-2);
}

table.variations th,
table.variations td {
  display: block;
  text-align: left;
  padding: 0 0 0.6em;
}

table.variations th label {
  margin: 0;
}

.woocommerce-variation-price {
  margin-bottom: var(--cc-e-2);
}

.reset_variations {
  display: inline-block;
  font-size: var(--cc-t-xs);
}

.product_meta {
  font-size: var(--cc-t-xs);
  color: var(--cc-gris);
  padding-top: var(--cc-e-3);
  border-top: 2px dotted var(--cc-ligne);
}

.product_meta > span {
  display: block;
  margin-bottom: 0.3em;
}

/* 4. Blocs éditoriaux de la fiche ---------------------------------------- */

.cc-reassurance-produit {
  margin-block: var(--cc-e-3);
  padding: var(--cc-e-3);
  background: var(--cc-vanille);
  border-radius: var(--cc-r-carte);
}

.cc-delai {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--cc-t-sm);
  font-weight: 600;
  color: var(--cc-prune-doux);
  margin-bottom: var(--cc-e-2);
}

.cc-accordeon {
  border-top: 2px dotted var(--cc-ligne);
}

.cc-accordeon details {
  border-bottom: 2px dotted var(--cc-ligne);
}

.cc-accordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  font-family: var(--cc-titre);
  font-weight: 600;
  font-size: var(--cc-t-base);
  color: var(--cc-prune);
  padding: 0.95em 0;
  cursor: pointer;
  list-style: none;
}

.cc-accordeon summary::-webkit-details-marker { display: none; }

.cc-accordeon summary::after {
  content: '+';
  font-size: 1.35em;
  line-height: 1;
  color: var(--cc-prune-doux);
}

.cc-accordeon details[open] summary::after { content: '\2013'; }

.cc-accordeon__corps {
  padding-bottom: var(--cc-e-3);
  max-width: 60ch;
}

/* Onglets natifs Woo, repliés en accordéon visuel */
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--cc-e-3);
  padding: 0;
  border-bottom: 2px dotted var(--cc-ligne);
}

.woocommerce-tabs ul.tabs li a {
  display: block;
  font-family: var(--cc-titre);
  font-weight: 600;
  font-size: var(--cc-t-sm);
  color: var(--cc-gris);
  text-decoration: none;
  padding: 0.75em 1.1em;
  border-radius: var(--cc-r-pilule) var(--cc-r-pilule) 0 0;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--cc-prune);
  background: var(--cc-dragee);
}

.woocommerce-Tabs-panel {
  max-width: var(--cc-largeur-texte);
}

.related > h2,
.up-sells > h2,
.cc-cross-sell > h2 {
  margin-top: var(--cc-e-5);
}

/* 5. Barre d'ajout mobile ------------------------------------------------ */

.cc-barre-achat {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: var(--cc-e-2);
  padding: 0.65rem var(--cc-e-3);
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
  background: var(--cc-creme);
  border-top: 2px solid var(--cc-ligne);
  box-shadow: 0 -6px 18px rgba(98, 20, 41, 0.09);
}

.cc-barre-achat__info {
  flex: 1;
  min-width: 0;
}

.cc-barre-achat__nom {
  display: block;
  font-family: var(--cc-titre);
  font-weight: 600;
  font-size: var(--cc-t-sm);
  color: var(--cc-prune);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-barre-achat__prix {
  font-size: var(--cc-t-xs);
  color: var(--cc-gris);
}

.cc-barre-achat .button {
  flex: none;
}

@media (max-width: 55.9375em) {
  .single-product .cc-barre-achat.est-visible { display: flex; }
  .single-product .cc-pied { padding-bottom: 5.5rem; }
}

/* 6. Panier -------------------------------------------------------------- */

.woocommerce-cart-form table.shop_table,
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--cc-ligne);
  border-radius: var(--cc-r-carte);
  overflow: hidden;
  margin-bottom: var(--cc-e-4);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--cc-e-2) var(--cc-e-3);
  text-align: left;
  border-bottom: 1px dotted var(--cc-ligne);
}

.woocommerce table.shop_table th {
  font-family: var(--cc-titre);
  font-size: var(--cc-t-sm);
  color: var(--cc-prune);
  background: var(--cc-vanille);
}

.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.cart_item .product-thumbnail img {
  width: 74px;
  border-radius: 14px;
}

.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cc-dragee);
  color: var(--cc-prune);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
}

.cart-collaterals {
  display: grid;
  gap: var(--cc-e-4);
}

@media (min-width: 56em) {
  .cart-collaterals { grid-template-columns: 1fr 22rem; align-items: start; }
}

.cart_totals {
  background: var(--cc-vanille);
  border-radius: var(--cc-r-carte);
  padding: var(--cc-e-3);
}

.wc-proceed-to-checkout .checkout-button {
  width: 100%;
}

/* Jauge de livraison offerte */
.cc-jauge {
  margin-bottom: var(--cc-e-3);
  padding: var(--cc-e-3);
  background: var(--cc-dragee);
  border-radius: var(--cc-r-carte);
}

.cc-jauge__texte {
  font-size: var(--cc-t-sm);
  font-weight: 600;
  color: var(--cc-prune);
  margin-bottom: 0.6em;
}

.cc-jauge__piste {
  height: 12px;
  border-radius: var(--cc-r-pilule);
  background: var(--cc-creme);
  overflow: hidden;
}

.cc-jauge__remplissage {
  height: 100%;
  border-radius: var(--cc-r-pilule);
  background: var(--cc-prune);
}

/* Panier vide et remerciement */
.cc-panier-vide__image,
.cc-remerciement__image {
  max-width: 26rem;
  margin: 0 auto var(--cc-e-3);
}

.cc-panier-vide__image img,
.cc-remerciement__image img {
  width: 100%;
  border-radius: var(--cc-r-bloc);
}

.cc-remerciement {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  padding-bottom: var(--cc-e-3);
}

.cc-panier-vide {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--cc-e-5);
}

.cc-panier-vide .cc-perle {
  text-align: left;
}

/* 7. Tunnel de commande et compte ---------------------------------------- */

.woocommerce-checkout .col2-set {
  display: grid;
  gap: var(--cc-e-4);
}

@media (min-width: 56em) {
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; }
}

.woocommerce-checkout h3,
.woocommerce-account h2 {
  font-size: var(--cc-t-lg);
  margin-top: var(--cc-e-4);
}

.woocommerce-billing-fields__field-wrapper p,
.woocommerce-shipping-fields__field-wrapper p,
.woocommerce-additional-fields p {
  margin-bottom: var(--cc-e-2);
}

#order_review,
.woocommerce-order-details,
.woocommerce-customer-details {
  background: var(--cc-vanille);
  border-radius: var(--cc-r-carte);
  padding: var(--cc-e-3);
}

#payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--cc-e-3);
  padding: 0;
}

#payment ul.payment_methods li {
  padding: 0.6em 0;
  border-bottom: 1px dotted var(--cc-ligne);
}

#payment .payment_box {
  font-size: var(--cc-t-sm);
  color: var(--cc-gris);
  padding: 0.6em 0 0;
}

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--cc-e-4);
  padding: 0;
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.55em 1.1em;
  border-radius: var(--cc-r-pilule);
  border: 2px solid var(--cc-ligne);
  font-family: var(--cc-titre);
  font-size: var(--cc-t-sm);
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--cc-prune);
  border-color: var(--cc-prune);
  color: var(--cc-creme);
}

/* 8. Messages et avis ---------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
  list-style: none;
  margin: 0 0 var(--cc-e-3);
  padding: var(--cc-e-2) var(--cc-e-3);
  border-radius: var(--cc-r-carte);
  background: var(--cc-dragee);
  color: var(--cc-prune);
  font-size: var(--cc-t-sm);
}

.woocommerce-error {
  background: #fbe4e6;
  color: var(--cc-framboise);
}

.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  margin-left: var(--cc-e-2);
  font-size: var(--cc-t-xs);
  padding: 0.5em 1.1em;
}

#reviews .commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

#reviews .comment_container {
  display: flex;
  gap: var(--cc-e-2);
  padding: var(--cc-e-3) 0;
  border-bottom: 2px dotted var(--cc-ligne);
}

#reviews .comment_container img.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
}

.star-rating {
  color: var(--cc-framboise);
}

.woocommerce-noreviews {
  color: var(--cc-gris);
}

/* ==========================================================================
   9. Blocs Panier et Commande
   Depuis WooCommerce 8, une installation neuve utilise par défaut les blocs
   Panier et Commande plutôt que les anciens codes courts. Le balisage est
   entièrement différent : sans ces règles, ces deux pages ressortiraient au
   style par défaut de WooCommerce, en rupture avec le reste du site.
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--cc-texte);
  color: var(--cc-encre);
}

.wc-block-components-title,
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h1,
.wp-block-woocommerce-checkout h2 {
  font-family: var(--cc-titre);
  color: var(--cc-prune);
}

/* Boutons des blocs : même macaron que partout ailleurs */
.wc-block-components-button:not(.is-link) {
  font-family: var(--cc-titre);
  font-weight: 600;
  background: var(--cc-prune);
  color: var(--cc-creme);
  border: 2px solid var(--cc-prune);
  border-radius: var(--cc-r-pilule);
  padding: 0.85em 1.7em;
}

.wc-block-components-button:not(.is-link):hover {
  background: var(--cc-prune-fonce);
  border-color: var(--cc-prune-fonce);
  color: var(--cc-creme);
}

.wc-block-components-button.is-link {
  color: var(--cc-prune);
}

/* Champs de formulaire */
.wc-block-components-text-input input[type='text'],
.wc-block-components-text-input input[type='email'],
.wc-block-components-text-input input[type='tel'],
.wc-block-components-text-input input[type='number'],
.wc-block-components-form .wc-blocks-components-select__container {
  border: 2px solid var(--cc-ligne);
  border-radius: var(--cc-r-pilule);
  background: var(--cc-creme);
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
  border-color: var(--cc-prune-doux);
  box-shadow: none;
}

/* Récapitulatifs et encarts */
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__totals-title + .wc-block-components-totals-wrapper {
  background: var(--cc-vanille);
  border-radius: var(--cc-r-carte);
  padding: var(--cc-e-3);
  border: 0;
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price {
  font-family: var(--cc-titre);
  color: var(--cc-prune);
}

.wc-block-components-product-name {
  font-family: var(--cc-titre);
  font-weight: 600;
  color: var(--cc-prune);
  text-decoration: none;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border-radius: 14px;
}

/* Bandeaux d'information */
.wc-block-components-notice-banner {
  border-radius: var(--cc-r-carte);
  border: 0;
  background: var(--cc-dragee);
  color: var(--cc-prune);
}

.wc-block-components-notice-banner.is-error {
  background: #fbe4e6;
  color: var(--cc-framboise);
}

/* Panier vide, version bloc */
.wc-block-cart__empty-cart__title {
  font-size: var(--cc-t-xl);
}

.wp-block-woocommerce-empty-cart-block {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.wp-block-woocommerce-empty-cart-block img {
  border-radius: var(--cc-r-bloc);
}

/* ==========================================================================
   10. Responsive WooCommerce
   Le thème remplaçant les feuilles de style du plugin, c'est à lui de gérer
   l'empilement des tableaux du panier et de la commande sur mobile.
   ========================================================================== */

@media (max-width: 47.9375em) {

  /* --- Grille de collection --------------------------------------------- */
  ul.products {
    gap: var(--cc-e-2);
  }

  li.product .woocommerce-loop-product__title {
    font-size: var(--cc-t-sm);
  }

  li.product .button {
    padding: 0.65em 0.9em;
  }

  .cc-etiquettes {
    top: 0.4rem;
    left: 0.4rem;
  }

  .cc-barre-collection {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .woocommerce-ordering select {
    width: 100%;
    min-width: 0;
  }

  /* --- Fiche produit ----------------------------------------------------- */
  .single-product div.product {
    gap: var(--cc-e-3);
  }

  .flex-control-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }

  .cart {
    gap: 0.75rem;
  }

  .single_add_to_cart_button {
    flex: 1 1 100%;
  }

  .woocommerce-tabs ul.tabs li a {
    padding: 0.6em 0.9em;
    font-size: var(--cc-t-xs);
  }

  /* --- Tableaux du panier et des commandes ------------------------------- */
  /* WooCommerce pose un attribut data-title sur chaque cellule : on s'en sert
     comme libellé, et chaque ligne devient une petite carte lisible. */

  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody {
    display: block;
    width: 100%;
    border: 0;
  }

  .woocommerce table.shop_table_responsive thead {
    display: none;
  }

  .woocommerce table.shop_table_responsive tr {
    display: block;
    margin-bottom: var(--cc-e-2);
    padding: var(--cc-e-2);
    background: var(--cc-creme);
    border: 2px solid var(--cc-ligne);
    border-radius: var(--cc-r-carte);
  }

  .woocommerce table.shop_table_responsive td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: auto;
    padding: 0.4rem 0;
    border: 0;
    text-align: right;
  }

  .woocommerce table.shop_table_responsive td::before {
    content: attr(data-title);
    flex: none;
    font-family: var(--cc-titre);
    font-weight: 600;
    font-size: var(--cc-t-sm);
    color: var(--cc-prune);
    text-align: left;
  }

  .woocommerce table.shop_table_responsive td.product-remove::before,
  .woocommerce table.shop_table_responsive td.product-thumbnail::before,
  .woocommerce table.shop_table_responsive td.actions::before {
    display: none;
  }

  .woocommerce table.shop_table_responsive td.product-thumbnail {
    justify-content: flex-start;
  }

  .woocommerce table.shop_table_responsive td.product-remove {
    justify-content: flex-end;
    padding-bottom: 0;
  }

  .woocommerce table.shop_table_responsive td.actions {
    display: block;
    text-align: left;
    padding-top: var(--cc-e-2);
  }

  .woocommerce table.shop_table_responsive td.actions .button,
  .woocommerce table.shop_table_responsive td.actions .coupon input {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .cart_item .product-thumbnail img {
    width: 64px;
  }

  /* Totaux et récapitulatifs : les libellés restent à gauche. */
  .woocommerce table.shop_table:not(.shop_table_responsive) th,
  .woocommerce table.shop_table:not(.shop_table_responsive) td {
    padding: var(--cc-e-2);
    font-size: var(--cc-t-sm);
  }

  .cart_totals,
  #order_review,
  .woocommerce-order-details,
  .woocommerce-customer-details {
    padding: var(--cc-e-2);
  }

  /* --- Compte client ------------------------------------------------------ */
  .woocommerce-MyAccount-navigation a {
    padding: 0.5em 0.9em;
    font-size: var(--cc-t-xs);
  }

  /* --- Blocs Panier et Commande ------------------------------------------- */
  .wc-block-components-button:not(.is-link) {
    width: 100%;
    padding: 0.8em 1.2em;
  }
}

/* ==========================================================================
   11. Espace compte : connexion, inscription, avantages
   ========================================================================== */

/* Connexion et inscription côte à côte, empilés sur mobile. */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns.col2-set,
.woocommerce-account:not(.logged-in) .woocommerce .customer-login-form-wrapper {
  display: grid;
  gap: var(--cc-e-4);
}

@media (min-width: 56em) {
  .woocommerce-account:not(.logged-in) .woocommerce > .u-columns.col2-set {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.woocommerce form.login,
.woocommerce form.register {
  background: var(--cc-vanille);
  border: 0;
  border-radius: var(--cc-r-bloc);
  padding: var(--cc-e-4);
  margin: 0;
}

.woocommerce form.register {
  background: var(--cc-dragee);
}

.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
  font-size: var(--cc-t-lg);
  margin-bottom: var(--cc-e-2);
}

.woocommerce form .form-row label {
  font-family: var(--cc-texte);
}

.woocommerce form .form-row {
  margin-bottom: var(--cc-e-2);
}

/* Champs d'identité sur deux colonnes */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: 100%;
}

@media (min-width: 34em) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    width: calc(50% - 0.4rem);
    display: inline-block;
    vertical-align: top;
  }

  .woocommerce form .form-row-first {
    margin-right: 0.8rem;
  }
}

.woocommerce form .clear {
  clear: both;
}

.cc-champ-aide {
  display: block;
  margin-top: 0.35em;
  font-size: var(--cc-t-xs);
  color: var(--cc-gris);
}

.woocommerce form .required {
  color: var(--cc-framboise);
  text-decoration: none;
}

/* Mention de confidentialité, en retrait discret */
.woocommerce-privacy-policy-text {
  font-size: var(--cc-t-xs);
  color: var(--cc-gris);
  line-height: 1.5;
}

.woocommerce-privacy-policy-text p {
  margin-bottom: 0.5em;
}

/* La case d'inscription à l'infolettre */
.cc-case-newsletter label {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-weight: 400;
  cursor: pointer;
}

.cc-case-newsletter input[type='checkbox'] {
  width: auto;
  flex: none;
  margin-top: 0.25em;
  accent-color: var(--cc-prune);
}

.cc-case-newsletter__mention {
  display: block;
  margin-top: 0.4em;
  font-size: var(--cc-t-xs);
  color: var(--cc-gris);
}

/* Onglet « Mes avantages » */
.cc-avantages {
  display: grid;
  gap: var(--cc-e-3);
}

.cc-avantage {
  padding: var(--cc-e-3) var(--cc-e-4);
  background: var(--cc-vanille);
  border-radius: var(--cc-r-carte);
}

.cc-avantage h3 {
  font-size: var(--cc-t-md);
  margin-bottom: 0.5em;
}

.cc-avantage p:last-child,
.cc-avantage ul {
  margin-bottom: 0;
}

.cc-avantage__code {
  display: inline-block;
  margin-top: 0.4em !important;
  padding: 0.5em 1.4em;
  background: var(--cc-dragee);
  border: 2px dashed var(--cc-prune);
  border-radius: var(--cc-r-pilule);
  font-family: var(--cc-titre);
  font-weight: 600;
  font-size: var(--cc-t-lg);
  letter-spacing: 0.02em;
  color: var(--cc-prune);
}

.cc-avantage--perle {
  background: var(--cc-dragee);
  font-family: var(--cc-perle);
  font-size: var(--cc-t-lg);
  color: var(--cc-prune);
  text-align: center;
}

.cc-avantage--perle p {
  margin: 0;
}