/* ═══════════════════════════════════════════════════════════════════
   Au Troisième Œil – WooCommerce Custom CSS
   Version : 9.0.0
   Structure HTML confirmée :
     .ate-checkout-container
       └── form.ate-checkout-form
             ├── .ate-col-left  (facturation + paiement)
             └── .ate-col-right (récapitulatif)
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   0. CONTENEUR PRINCIPAL CHECKOUT
   ══════════════════════════════════════════════ */
.ate-checkout-container {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 60px 40px 100px !important;
  box-sizing: border-box !important;
}

/* Annule tout héritage restrictif à l'intérieur */
.ate-checkout-container *,
.ate-checkout-container *::before,
.ate-checkout-container *::after {
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════
   1. GRID 2 COLONNES — FORMULAIRE CHECKOUT
   ══════════════════════════════════════════════ */
form.ate-checkout-form {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  grid-template-rows: auto !important;
  grid-template-areas:
    "left  right" !important;
  gap: 48px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ── Colonne gauche ── */
.ate-col-left {
  grid-area: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* ── Colonne droite ── */
.ate-col-right {
  grid-area: right !important;
  width: 100% !important;
  min-width: 0 !important;
  position: sticky !important;
  top: 100px !important;
  align-self: start !important;
}

/* ══════════════════════════════════════════════
   2. NOTICES
   ══════════════════════════════════════════════ */
.woocommerce-notices-wrapper { grid-column: 1 / -1; }

.woocommerce-message {
  background: rgba(122,184,154,.10) !important;
  border-top: 3px solid var(--vert) !important;
  border-radius: var(--r) !important;
  color: var(--text) !important;
  font-family: 'Jost', sans-serif !important;
  padding: 14px 20px !important;
}
.woocommerce-info {
  background: rgba(212,84,138,.07) !important;
  border-top: 3px solid var(--rose) !important;
  border-radius: var(--r) !important;
  color: var(--text) !important;
  font-family: 'Jost', sans-serif !important;
}
.woocommerce-error {
  background: rgba(220,80,80,.07) !important;
  border-top: 3px solid #dc5050 !important;
  border-radius: var(--r) !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════
   3. TYPOGRAPHIE GLOBALE WOO
   ══════════════════════════════════════════════ */
.woocommerce,
.woocommerce-page {
  color: var(--text) !important;
  font-family: 'Jost', sans-serif !important;
}

.woocommerce h2,
.woocommerce h3,
.woocommerce-page h2,
.woocommerce-page h3,
.ate-checkout-form h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 1.55rem !important;
  letter-spacing: .04em !important;
  color: var(--text) !important;
  margin-bottom: 20px !important;
}

/* ══════════════════════════════════════════════
   4. CARTES (blocs facturation, récap, paiement)
   ══════════════════════════════════════════════ */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
#customer_details,
#payment,
.woocommerce-checkout-review-order {
  background: var(--card) !important;
  border: 1px solid rgba(122,184,154,.20) !important;
  border-radius: var(--r) !important;
  padding: 30px 32px !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.04) !important;
}

/* Évite double padding dans #customer_details */
#customer_details .woocommerce-billing-fields,
#customer_details .woocommerce-shipping-fields,
#customer_details .woocommerce-additional-fields {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════
   5. CHAMPS DE FORMULAIRE
   ══════════════════════════════════════════════ */

/* Labels */
.woocommerce .form-row label,
.woocommerce-page .form-row label {
  display: block !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--vert-d) !important;
  margin-bottom: 6px !important;
}

/* Inputs, textarea, select */
.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce .form-row select,
.woocommerce-page .form-row input.input-text,
.woocommerce-page .form-row textarea,
.woocommerce-page .form-row select {
  width: 100% !important;
  background: rgba(255,255,255,.88) !important;
  border: 1.5px solid rgba(122,184,154,.28) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .9rem !important;
  color: var(--text) !important;
  transition: border-color .25s, box-shadow .25s !important;
  box-shadow: none !important;
  appearance: none !important;
}
.woocommerce .form-row input.input-text:focus,
.woocommerce-page .form-row input.input-text:focus {
  border-color: var(--rose) !important;
  box-shadow: 0 0 0 3px rgba(212,84,138,.10) !important;
  outline: none !important;
}

/* Champs côte à côte (prénom / nom) */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 16px !important;
}

.form-row-first,
.form-row-last {
  width: calc(50% - 8px) !important;
  float: none !important;
  clear: none !important;
}

.form-row-wide {
  width: 100% !important;
  float: none !important;
}

/* ── Select2 ── */
.select2-container--default .select2-selection--single {
  border: 1.5px solid rgba(122,184,154,.28) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.88) !important;
  height: 47px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 47px !important;
  padding-left: 16px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .9rem !important;
  color: var(--text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 47px !important;
}
.select2-dropdown {
  border: 1px solid rgba(122,184,154,.28) !important;
  border-radius: 10px !important;
  background: var(--card) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.08) !important;
}
.select2-container--default .select2-results__option--highlighted {
  background: rgba(122,184,154,.14) !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════
   6. COUPON (ligne pleine largeur)
   ══════════════════════════════════════════════ */
.woocommerce-form-coupon-toggle,
.checkout_coupon {
  grid-column: 1 / -1 !important;
  background: rgba(122,184,154,.06) !important;
  border: 1px dashed rgba(122,184,154,.35) !important;
  border-radius: var(--r) !important;
  padding: 16px 22px !important;
  margin-bottom: 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .85rem !important;
  color: var(--muted) !important;
}
.checkout_coupon input.input-text {
  border-radius: 10px !important;
  border: 1.5px solid rgba(122,184,154,.28) !important;
  padding: 10px 14px !important;
}

/* ══════════════════════════════════════════════
   7. RÉCAPITULATIF COMMANDE (colonne droite)
   ══════════════════════════════════════════════ */
#order_review_heading {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 1.4rem !important;
  color: var(--text) !important;
  margin-bottom: 16px !important;
}

.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.woocommerce-checkout-review-order-table thead th {
  font-family: 'Jost', sans-serif !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--vert-d) !important;
  border-bottom: 1px solid rgba(122,184,154,.20) !important;
  padding-bottom: 10px !important;
}
.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tbody th {
  font-size: .86rem !important;
  color: var(--muted) !important;
  border-bottom: 1px solid rgba(122,184,154,.08) !important;
  padding: 10px 6px !important;
  vertical-align: middle !important;
}
.woocommerce-checkout-review-order-table .product-name {
  color: var(--text) !important;
  font-weight: 500 !important;
}
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  color: var(--rose) !important;
  font-weight: 700 !important;
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  border-top: 2px solid rgba(122,184,154,.20) !important;
  padding-top: 14px !important;
}

/* Expédition */
.woocommerce-shipping-methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-shipping-methods li {
  font-family: 'Jost', sans-serif !important;
  font-size: .86rem !important;
  color: var(--text) !important;
  padding: 4px 0 !important;
}
.woocommerce-shipping-methods input[type="radio"] {
  accent-color: var(--rose) !important;
  margin-right: 8px !important;
}

/* ══════════════════════════════════════════════
   8. BLOC PAIEMENT & STRIPE
   ══════════════════════════════════════════════ */
#payment {
  border-radius: var(--r) !important;
  overflow: visible !important;
}

#payment .payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  border-bottom: 1px solid rgba(122,184,154,.15) !important;
}
#payment .payment_methods li {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(122,184,154,.08) !important;
}
#payment .payment_methods li label {
  font-family: 'Jost', sans-serif !important;
  font-size: .92rem !important;
  color: var(--text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
#payment .payment_methods input[type="radio"] {
  accent-color: var(--rose) !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Boîte interne paiement (champs Stripe) */
#payment .payment_box {
  background: rgba(122,184,154,.05) !important;
  border: 1px solid rgba(122,184,154,.18) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin-top: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Champs Stripe natifs (hors iframe) */
#payment .payment_box input[type="text"],
#payment .payment_box input[type="email"],
#payment .payment_box input[type="tel"] {
  width: 100% !important;
  background: rgba(255,255,255,.88) !important;
  border: 1.5px solid rgba(122,184,154,.28) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .9rem !important;
  box-sizing: border-box !important;
}

/* Wrapper iframe Stripe — ne pas réduire */
#payment .payment_box .wc-stripe-elements-field,
#payment .payment_box #wc-stripe-card-element,
#payment .payment_box .StripeElement,
#payment .payment_box [class*="stripe"],
#payment .payment_box [id*="stripe"] {
  width: 100% !important;
  min-width: 100% !important;
  min-height: 44px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1.5px solid rgba(122,184,154,.28) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Labels dans le payment_box (Stripe) */
#payment .payment_box label {
  font-family: 'Jost', sans-serif !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--vert-d) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ══════════════════════════════════════════════
   9. BOUTON COMMANDER
   ══════════════════════════════════════════════ */
#payment #place_order,
.woocommerce #place_order,
.woocommerce-page #place_order {
  display: block !important;
  width: 100% !important;
  margin-top: 24px !important;
  padding: 16px 32px !important;
  background: linear-gradient(135deg, var(--vert) 0%, var(--rose) 55%, var(--violet) 100%) !important;
  color: #fff !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 50px !important;
  box-shadow: 0 8px 28px rgba(212,84,138,.30) !important;
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s !important;
}
#payment #place_order:hover,
.woocommerce #place_order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(212,84,138,.44) !important;
  opacity: .95 !important;
}

/* RGPD */
.woocommerce-privacy-policy-text {
  font-size: .74rem !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  background: rgba(122,184,154,.04) !important;
  border: 1px solid rgba(122,184,154,.14) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 14px 0 0 !important;
}

/* ══════════════════════════════════════════════
   10. BOUTONS GÉNÉRIQUES WOO
   ══════════════════════════════════════════════ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button {
  font-family: 'Jost', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  border-radius: 50px !important;
  padding: 11px 26px !important;
  background: rgba(122,184,154,.15) !important;
  color: var(--vert-d) !important;
  border: 1.5px solid rgba(122,184,154,.35) !important;
  transition: background .25s, transform .2s !important;
  cursor: pointer !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: rgba(122,184,154,.28) !important;
  transform: translateY(-1px) !important;
}

/* Boutons primaires */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce-page a.button.alt,
.woocommerce-page .checkout-button {
  background: linear-gradient(135deg, var(--vert) 0%, var(--rose) 55%, var(--violet) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 24px rgba(212,84,138,.28) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(212,84,138,.42) !important;
  opacity: .95 !important;
}

/* ══════════════════════════════════════════════
   11. TABLEAU PANIER
   ══════════════════════════════════════════════ */
.woocommerce table.cart thead tr th {
  font-family: 'Jost', sans-serif !important;
  font-size: .66rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--vert-d) !important;
  border-bottom: 2px solid rgba(122,184,154,.18) !important;
}
.woocommerce table.cart tbody tr td {
  border-bottom: 1px solid rgba(122,184,154,.10) !important;
  vertical-align: middle !important;
}
.woocommerce table.cart .product-thumbnail img {
  border-radius: 10px !important;
  border: 1px solid rgba(122,184,154,.20) !important;
}
.woocommerce .quantity input.qty {
  border: 1px solid rgba(122,184,154,.28) !important;
  border-radius: 8px !important;
  text-align: center !important;
  font-family: 'Jost', sans-serif !important;
  background: rgba(255,255,255,.88) !important;
  color: var(--text) !important;
}

/* Totaux panier */
.cart_totals {
  background: var(--card) !important;
  border: 1px solid rgba(122,184,154,.18) !important;
  border-radius: var(--r) !important;
  padding: 28px !important;
}
.cart_totals h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  color: var(--text) !important;
  border-bottom: 1px solid rgba(122,184,154,.15) !important;
  padding-bottom: 10px !important;
  margin-bottom: 18px !important;
}

/* ══════════════════════════════════════════════
   12. MON COMPTE
   ══════════════════════════════════════════════ */
.woocommerce-MyAccount-navigation {
  background: var(--card) !important;
  border: 1px solid rgba(122,184,154,.18) !important;
  border-radius: var(--r) !important;
  padding: 20px !important;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .86rem !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: rgba(122,184,154,.12) !important;
  color: var(--vert-d) !important;
}
.woocommerce-MyAccount-content {
  background: var(--card) !important;
  border: 1px solid rgba(122,184,154,.15) !important;
  border-radius: var(--r) !important;
  padding: 30px !important;
}

/* ══════════════════════════════════════════════
   13. PRODUIT SINGLE
   ══════════════════════════════════════════════ */
.single-product .product_title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  color: var(--text) !important;
  letter-spacing: .03em !important;
}
.single-product .price {
  color: var(--rose) !important;
  font-weight: 700 !important;
}
.single-product .price del {
  color: var(--muted) !important;
}
.star-rating span::before {
  color: var(--rose) !important;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--vert-d) !important;
  border-bottom: 2px solid var(--vert-d) !important;
}
.woocommerce-tabs ul.tabs li a {
  font-family: 'Jost', sans-serif !important;
  font-size: .8rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* ══════════════════════════════════════════════
   14. PAGINATION
   ══════════════════════════════════════════════ */
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  border: 1.5px solid rgba(122,184,154,.28) !important;
  border-radius: 50% !important;
  font-family: 'Jost', sans-serif !important;
  color: var(--text) !important;
  transition: border-color .2s !important;
}
.woocommerce-pagination ul li a:hover {
  border-color: var(--rose) !important;
  color: var(--rose) !important;
}
.woocommerce-pagination ul li span.current {
  background: linear-gradient(135deg, var(--vert), var(--rose)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════
   15. BREADCRUMB
   ══════════════════════════════════════════════ */
.woocommerce-breadcrumb {
  font-family: 'Jost', sans-serif !important;
  font-size: .78rem !important;
  color: var(--muted) !important;
  letter-spacing: .06em !important;
  margin-bottom: 28px !important;
}
.woocommerce-breadcrumb a {
  color: var(--vert-d) !important;
  text-decoration: none !important;
}
.woocommerce-breadcrumb a:hover {
  color: var(--rose) !important;
}

/* ══════════════════════════════════════════════
   16. RESPONSIVE
   ══════════════════════════════════════════════ */

/* Tablette */
@media (max-width: 1024px) {
  form.ate-checkout-form {
    grid-template-columns: 1fr 360px !important;
    gap: 32px !important;
  }
  .ate-checkout-container {
    padding: 48px 24px 80px !important;
  }
}

/* Mobile */
@media (max-width: 900px) {
  form.ate-checkout-form {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "left"
      "right" !important;
    gap: 24px !important;
  }
  .ate-col-right {
    position: static !important;
  }
  .form-row-first,
  .form-row-last {
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  .ate-checkout-container {
    padding: 32px 16px 60px !important;
  }
  .woocommerce-billing-fields,
  #customer_details,
  #payment {
    padding: 20px 18px !important;
  }
}