/* =============================================================
   Aplastic94 — Page Panier (wp:woocommerce/cart)
   Rendu 100% côté client (React/Interactivity API) : les classes
   ciblées ici (wc-block-cart-*, wc-block-components-*) n'existent
   pas dans le HTML serveur, seulement une fois le panier hydraté —
   normal, à ne pas confondre avec un sélecteur mort.
   ============================================================= */

/* ─── Ligne stepper + badge SSL ───────────────────────────────────────── */
.site-stepper-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 0 1rem;
}

.site-stepper-ssl {
  position: absolute;
  right: 0;
  top: 2px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-mid);
  font-size: 0.72rem;
  line-height: 1.3;
}

.site-stepper-ssl svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--c-teal-text);
}

.site-stepper-ssl strong {
  color: var(--c-navy);
}

@media (max-width: 900px) {
  .site-stepper-ssl { display: none; }
}

/* ─── Indicateur d'étapes (Panier / Livraison / Paiement / Confirmation) ─
   Même composant visuel que sur le checkout (icônes sans fond, soulignées
   en actif) — dupliqué ici plutôt que partagé en fichier commun, cohérent
   avec la convention "un CSS par page" déjà en place sur ce thème. */
.site-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 640px;
  margin: 0 auto 2rem;
}

.site-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 100px;
}

.site-stepper__icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-light);
}

.site-stepper__icon svg {
  width: 26px;
  height: 26px;
}

.site-stepper__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-text-light);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
}

.site-stepper__item.is-active .site-stepper__icon,
.site-stepper__item.is-done .site-stepper__icon {
  color: var(--c-teal-text);
}

.site-stepper__item.is-active .site-stepper__label {
  color: var(--c-navy);
  border-bottom-color: var(--c-teal);
}

.site-stepper__item.is-done .site-stepper__label {
  color: var(--c-navy);
}

.site-stepper__line {
  flex: 0 1 70px;
  height: 2px;
  background: var(--c-border);
  margin: 15px 0.5rem 0;
}

@media (max-width: 640px) {
  .site-stepper__label { font-size: 0.7rem; }
  .site-stepper__line { flex-basis: 24px; }
}

/* ─── Bandeau de réassurance bas de page ──────────────────────────────── */
.cart-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-border);
}

.cart-trust-badge {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 220px;
}

.cart-trust-badge__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-gray);
  color: var(--c-teal-text);
}

.cart-trust-badge__icon svg {
  width: 18px;
  height: 18px;
}

.cart-trust-badge__text {
  display: flex;
  flex-direction: column;
}

.cart-trust-badge__title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--c-navy);
}

.cart-trust-badge__desc {
  font-size: 0.74rem;
  color: var(--c-text-mid);
}

/* ─── Titre "Votre panier" : même traitement que les H1 des pages
   catégorie (.category-title, voir category.css) pour rester cohérent
   avec le reste du site. ─────────────────────────────────────────── */
main[data-page="cart"] .wp-block-post-title {
  color: var(--c-navy);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.4rem;
  /* Le bloc porte la classe native "alignwide" : WordPress lui applique
     déjà margin-left/right:auto !important (mise en page "constrained"
     du thème), qui centre sa boîte en respectant max-width:1440px —
     surtout ne pas y toucher (margin-left fixe = décalage cassé sur
     écran large, cf. mémoire projet). */
}

/* Sous-titre "X article(s) dans votre panier" (aplastic94/cart-item-count) */
.cart-item-count {
  color: var(--c-teal-text) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-align: left !important;
  margin-top: 0 !important;
  margin-bottom: 2.25rem !important;
  padding-left: 1.75rem;
}

main[data-page="cart"] {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

/* ─── Table produits : encadrée dans une carte, même traitement que le
   récapitulatif de droite. ───────────────────────────────────────── */
/* Les 2 cartes (produits + récap) sont des enfants flex directs de ce
   wrapper natif ; sans gap explicite, leurs paddings internes (1.75rem
   ci-dessous) remplacent le padding-right/left natif qui servait avant
   de seul espace visuel entre elles — les 2 fonds blancs se retrouvent
   collés bord à bord. Piège : les largeurs natives (65%/35%) totalisent
   déjà 100%, donc un `gap` ajouté tel quel fait déborder la ligne et
   bascule la carte de droite en dessous (flex-wrap natif) — quelle que
   soit la largeur d'écran. Il faut reprendre l'espace du gap sur les
   largeurs elles-mêmes. */
.wc-block-components-sidebar-layout.wc-block-cart {
  gap: 2rem;
}

.wc-block-cart__main {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.75rem !important;
  width: calc(65% - 1rem) !important;
}


/* ─── En-tête de la liste d'articles (PRODUIT / TOTAL) ──────────────
   Discret et aéré plutôt que la ligne brute par défaut. */
.wc-block-cart-items__header {
  padding-bottom: 0.85rem !important;
  border-bottom: 1px solid var(--c-border) !important;
}

/* ─── Colonnes Produit / Prix unitaire / Quantité / Total ─────────────
   Le bloc natif ne rend que 3 <td> (image, "détails" combinant nom+prix+
   qté+suppression, total) : on force la ligne en grille CSS et on
   "dissout" (display:contents) les conteneurs intermédiaires pour que
   leurs enfants deviennent des cellules de grille indépendantes, sans
   déplacer aucun nœud DOM (le panier est rendu par React — déplacer des
   nœuds interactifs casserait sa réconciliation au prochain
   changement de quantité). Les 2 <th> "Prix unitaire"/"Quantité" sont
   ajoutés une fois par cart-wizard.js (l'en-tête ne se re-rend pas). */
.wc-block-cart-items__header,
.wc-block-cart-items__row {
  display: grid !important;
  grid-template-columns: 104px 1fr 110px 150px 100px 36px;
  column-gap: 1rem;
  align-items: center;
}

/* Le <th> "image" natif porte son propre texte "Produit" caché pour les
   lecteurs d'écran uniquement — mais invisible par défaut seulement dans
   la mise en page d'origine du bloc ; notre grille l'a rendu visible et
   non stylé (fin, minuscule) à gauche. On le masque ici : le seul
   "Produit" affiché doit être celui, en gras, de la colonne 2. */
.wc-block-cart-items__header-image {
  font-size: 0 !important;
}

/* Le CSS natif du bloc panier masque par défaut ce <th> (visibility:hidden)
   en misant sur celui de l'image pour porter le libellé visible "Produit"
   — inversé chez nous puisqu'on masque justement celui de l'image (trop
   étroit, juste au-dessus de la vignette). Sans ce override, plus aucun
   des deux ne s'affichait. */
.wc-block-cart-items__header-product {
  visibility: visible !important;
}

.wc-block-cart-items__header-product span,
.wc-block-cart-items__header-unit-price span,
.wc-block-cart-items__header-qty span,
.wc-block-cart-items__header-total span {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: var(--c-text-mid) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wc-block-cart-items__header-qty {
  text-align: center;
}

.wc-block-cart-items__header-unit-price {
  text-align: right;
}

/* Le CSS natif ajoute un border-top + un padding asymétrique sur chaque
   <td> resté "réel" (image, total — le <td> "product" est dissous dans la
   grille) à partir de 700px de large : c'est la source du filet parasite
   au-dessus des prix/vignette et d'un léger désalignement vertical avec
   les colonnes prix/quantité (des <div>, sans ce padding natif). La
   grille gère déjà tout l'espacement, donc on neutralise entièrement. */
.wc-block-cart__main .wc-block-cart-items td {
  border-top: none !important;
  padding: 0 !important;
}

/* ─── Lignes d'articles : plus d'air, séparation discrète ───────────── */
.wc-block-cart-items__row {
  grid-template-rows: auto auto;
  padding: 1.5rem 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
}

.wc-block-cart-item__image {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: start !important;
  border: none !important;
  box-shadow: none !important;
}

.wc-block-cart-item__image img {
  width: 90px !important;
  height: 90px !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
}

/* Filets parasites au-dessus de la vignette et du prix unitaire : ce
   sont les bordures par défaut du bloc panier natif sur ces conteneurs
   (prévues pour un badge de promotion), sans rapport avec notre grille —
   supprimées pour de bon. */
.wc-block-cart-item__image a,
.wc-block-cart-item__prices,
.wc-block-cart-item__prices * {
  border: none !important;
  box-shadow: none !important;
}

/* Conteneurs intermédiaires "dissous" : leurs enfants directs deviennent
   des cellules de la grille de la ligne. !important nécessaire : le CSS
   natif du bloc panier pose son propre display (flex) sur ces mêmes
   classes avec une spécificité équivalente. */
.wc-block-cart-item__product,
.wc-block-cart-item__wrap,
.wc-block-cart-item__quantity {
  display: contents !important;
}

.wc-block-components-product-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: var(--c-navy) !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  text-decoration: none !important;
}

.wc-block-components-product-name:hover {
  color: var(--c-fuchsia) !important;
}

.wc-block-components-product-metadata {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.wc-block-components-product-metadata__description {
  color: var(--c-text-mid) !important;
  font-size: 0.85rem !important;
}

/* Prix unitaire (déplacé de sous le nom du produit vers sa propre colonne) */
.wc-block-cart-item__prices {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  text-align: right !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value {
  color: var(--c-text-mid) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

/* Sélecteur de quantité : coins arrondis cohérents avec le reste du site,
   un peu plus haut (padding vertical sur le chiffre) que la hauteur par
   défaut, un peu trop compacte. */
.wc-block-components-quantity-selector {
  grid-column: 4 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
}

.wc-block-components-quantity-selector__input {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

.wc-block-cart-item__total {
  grid-column: 5 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  text-align: right !important;
}

.wc-block-cart-item__total .wc-block-components-product-price__value {
  color: var(--c-navy) !important;
  font-weight: 700 !important;
}

/* Lien "Supprimer" : sa propre colonne, discret, accent fuchsia au survol
   comme le reste des liens du site */
.wc-block-cart-item__remove-link {
  grid-column: 6 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: center !important;
  color: var(--c-text-light) !important;
  transition: color var(--trans);
}

.wc-block-cart-item__remove-link:hover {
  color: var(--c-fuchsia) !important;
}

/* ─── Récapitulatif (TOTAL PANIER) : une seule carte détachée, façon
   boutique premium, englobant récap + code promo + bouton de commande.
   Portée au niveau de la colonne entière (et non du seul bloc "order
   summary") pour que le CTA "Passer la commande", rendu par un bloc
   frère distinct dans le même wp:column, se retrouve visuellement dans
   la même carte sans avoir à déplacer de nœud DOM React. ──────────── */
.wc-block-cart__sidebar {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.75rem 1.75rem 1.5rem !important;
  width: calc(35% - 1rem) !important;
}

/* "Récapitulatif de commande" (natif "Total panier", renommé en CSS pur —
   même raison que les autres textes de blocs React sur cette page). */
.wc-block-cart__totals-title {
  font-size: 0 !important;
  margin: 0 0 1.25rem !important;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--c-border);
}

.wc-block-cart__totals-title::after {
  content: 'Récapitulatif de commande';
  color: var(--c-navy);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wc-block-components-totals-item {
  padding: 0.6rem 0 !important;
}

.wc-block-components-totals-item__label {
  color: var(--c-text-mid) !important;
}

.wc-block-components-totals-item__value {
  color: var(--c-navy) !important;
  font-weight: 600 !important;
}

/* Ligne "Total TTC" (natif "Total estimé", renommé en CSS pur — même
   raison que le code promo/bouton de commande : robuste aux re-rendus
   React) : mise en avant, c'est le chiffre qui doit accrocher l'œil
   juste avant le bouton de commande. Pas de filet au-dessus : la ligne
   "Expédition" juste avant fait déjà office de séparation. */
.wc-block-components-totals-footer-item {
  margin-top: 0.5rem !important;
  padding: 1rem 0 !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--c-navy) !important;
  font-weight: 800 !important;
  font-size: 0 !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label::after {
  content: 'Total TTC';
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--c-navy);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--c-fuchsia) !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
}

/* ─── Code promo : toujours visible, plus d'accordéon ─────────────────
   Le bloc natif cache le formulaire derrière un <div role="button">
   cliquable (chevron + "Ajouter des codes promo") ; cart-wizard.js
   l'ouvre une fois au chargement puis le neutralise (pointer-events:
   none) — impossible de le refermer par erreur. Le texte/l'icône
   d'origine sont remplacés en CSS pur (::before/::after + font-size:0
   sur le texte natif) plutôt qu'en réécrivant le DOM en JS : React
   peut re-rendre ce bouton à tout moment (mise à jour du panier), une
   réécriture JS du texte serait alors silencieusement écrasée. */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  pointer-events: none;
  font-size: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
  display: none !important;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button::before {
  content: '';
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: var(--c-teal-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.5H4.5a1 1 0 0 0-1 1v8.1c0 .27.1.52.3.7l9 9c.4.4 1 .4 1.4 0l8.1-8.1c.4-.4.4-1 0-1.4l-9-9a1 1 0 0 0-.7-.3Z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.5H4.5a1 1 0 0 0-1 1v8.1c0 .27.1.52.3.7l9 9c.4.4 1 .4 1.4 0l8.1-8.1c.4-.4.4-1 0-1.4l-9-9a1 1 0 0 0-.7-.3Z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button::after {
  content: 'Vous avez un code promo\00a0?';
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-navy);
}

.wc-block-components-totals-coupon__content {
  padding-top: 0 !important;
}

.wc-block-components-totals-coupon__input .wc-block-components-text-input {
  border-color: var(--c-border) !important;
}

.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon__input .wc-block-components-text-input::before,
.wc-block-components-totals-coupon__input .wc-block-components-text-input::after {
  border-color: var(--c-border) !important;
}

.wc-block-components-totals-coupon__input input::placeholder {
  color: var(--c-text-light) !important;
  opacity: 1 !important;
}

/* Le composant natif superpose un <label> flottant ("Entrer le code") sur
   le champ, en plus du placeholder : les deux textes se chevauchaient.
   On masque le label visuellement (il reste lu par les lecteurs d'écran)
   pour ne garder que notre placeholder "Saisir votre code". */
.wc-block-components-totals-coupon__input label {
  font-size: 0 !important;
}

/* Bouton "Appliquer" : secondaire — contour clair (comme l'input à côté),
   texte "Appliquer" foncé (au lieu de bord foncé/texte clair), petite
   animation au survol. Pas de fond rouge natif. */
.wc-block-components-totals-coupon__button {
  background: transparent !important;
  color: var(--c-navy) !important;
  border: 1.5px solid var(--c-border) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wc-block-components-totals-coupon__button:hover:not(:disabled) {
  background: var(--c-navy) !important;
  border-color: var(--c-navy) !important;
  color: var(--c-white) !important;
  transform: translateY(-2px);
}

/* ─── CTA principal : bouton pleine largeur, généreux, avec un léger
   effet de survol pour donner envie de cliquer (façon grande boutique
   en ligne) plutôt qu'un simple bouton plat. Texte natif "Valider la
   commande" remplacé en CSS pur (même raison que le code promo
   ci-dessus : robuste aux re-rendus React). ───────────────────────── */
.wc-block-cart__submit-button {
  position: relative;
  width: 100%;
  padding: 1rem 1.5rem !important;
  font-size: 0 !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wc-block-cart__submit-button::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 0.5rem;
  background-color: currentColor;
  -webkit-mask: 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%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: 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%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wc-block-cart__submit-button::after {
  content: 'Passer la commande';
  font-size: 0.95rem;
}

.wc-block-cart__submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(158, 27, 90, 0.35);
}

/* "Paiement 100% sécurisé", ajouté par cart-wizard.js sous le CTA */
.cart-secure-note {
  text-align: center;
  font-size: 0.8rem !important;
  color: var(--c-text-mid) !important;
  margin: 0.75rem 0 0 !important;
}

.wp-block-woocommerce-proceed-to-checkout-block {
  padding-top: 1.25rem;
}

@media (max-width: 782px) {
  .wc-block-cart__main,
  .wc-block-cart__sidebar {
    width: 100% !important;
  }

  .wc-block-cart__sidebar {
    padding-left: 0;
    margin-top: 1.5rem;
  }

  /* Grille à 6 colonnes illisible en dessous de ~600px : on repasse en
     mise en page souple (image + colonne texte, prix/qté/total sous le
     nom du produit) plutôt que de forcer 6 colonnes étroites. */
  .wc-block-cart-items__header {
    display: none;
  }

  .wc-block-cart-items__row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  .wc-block-cart-item__image {
    flex: 0 0 64px;
  }

  .wc-block-components-product-name,
  .wc-block-components-product-metadata {
    flex: 1 1 calc(100% - 80px);
  }

  .wc-block-cart-item__prices,
  .wc-block-components-quantity-selector,
  .wc-block-cart-item__total,
  .wc-block-cart-item__remove-link {
    flex: 0 0 auto;
    margin-left: 80px;
  }
}