/* ==========================================================================
   Checkout style Shopify — the7-child
   À placer dans : the7-child/css/checkout-shopify.css
   Enqueue via functions.php (voir instructions fournies séparément)
   ========================================================================== */

:root{
  --cs-teal: #00676A;       /* couleur bandeau / CTA — ajuster si besoin */
  --cs-teal-dark: #0a5648;
  --cs-border: #d9d9d9;
  --cs-border-focus: #00676A;
  --cs-bg-summary: #f6f6f7;
  --cs-text: #1a1a1a;
  --cs-text-muted: #6b6b6b;
  --cs-radius: 8px;
  --cs-radius-lg: 10px;
}

/* On masque tout ce qui n'est pas nécessaire au checkout (header/footer site, sidebar) */
body.woocommerce-checkout #main,
body.woocommerce-checkout .content-wrap{
  max-width: 100% !important;
  padding: 0 !important;
}

/* Page panier — largeur limitée à 1440px, centrée, au lieu de la pleine
   largeur d'écran par défaut. Cette page est structurée en section
   Elementor "Full Width" (pas via #main/.content-wrap comme le checkout),
   donc on cible directement le conteneur Elementor de cette section. */
.elementor-element-e49222d.elementor-section-full_width > .elementor-container{
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 900px){
  .elementor-element-e49222d.elementor-section-full_width > .elementor-container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Bouton "Passage au paiement" du bloc panier (WooCommerce Blocks) —
   même teal que le CTA "Payer maintenant" du checkout, pour cohérence
   visuelle sur tout le tunnel d'achat. */
.wc-block-cart__submit-button{
  background: var(--cs-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cs-radius) !important;
  transition: background .15s ease;
}
.wc-block-cart__submit-button:hover{
  background: var(--cs-teal-dark) !important;
  color: #fff !important;
}

/* Sélecteur de quantité (bloc panier) — bordure 1px, même couleur que
   les autres champs du tunnel d'achat, pour délimiter clairement le
   bloc [− 1 +] qui n'a aucun contour par défaut. */
.wc-block-components-quantity-selector{
  border: 1px solid var(--cs-teal) !important;
  border-radius: var(--cs-radius) !important;
}

/* Indicateur de chargement natif WooCommerce pendant le recalcul AJAX
   (changement de tarif, pays, etc.) — WooCommerce ajoute automatiquement
   un voile semi-transparent + spinner (classes .blockUI/.blockOverlay) sur
   la zone recalculée. On s'assure juste qu'il reste visible avec notre
   design, sans le recréer nous-mêmes. */
.cs-checkout-summary{
  position: relative;
}
.cs-checkout-summary .blockOverlay{
  background: rgba(246, 246, 247, 0.7) !important;
  opacity: 1 !important;
}

/* Bandeau d'étapes natif The7 ("Votre Panier / Détails de Commande /
   Commande terminée") — masqué, redondant avec le vrai header du site.
   Voir plus bas dans ce fichier pour la règle complète (couvre panier ET
   checkout, desktop et mobile). */

/* Conteneur global 2 colonnes */
.cs-checkout-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 100vh;
  padding-top: 40px;
}
@media (max-width: 900px){
  .cs-checkout-grid{ grid-template-columns: 1fr; padding-top: 0; }
  .cs-checkout-summary{ order: -1; position: static !important; }
}

/* Colonne gauche — formulaire */
.cs-checkout-form{
  background: #fff;
  padding: 40px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 900px){
  /* 40px de padding de chaque côté mangeait une part énorme d'un écran
     mobile étroit (~80px de perdu sur ~380-400px de large) — les champs
     paraissaient comprimés/étroits par rapport à la réf Shopify, qui colle
     bien plus près des bords. */
  .cs-checkout-form{
    padding: 20px 16px 40px;
  }
}

/* Colonne droite — résumé, sticky, fond gris */
.cs-checkout-summary{
  background: var(--cs-bg-summary);
  padding: 48px 40px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}
@media (max-width: 900px){
  /* BUG corrigé : cette règle DOIT venir après la déclaration
     .cs-checkout-summary non conditionnelle ci-dessus (même sélecteur,
     même spécificité — en CSS c'est l'ordre dans le fichier qui tranche,
     pas la présence d'une media query). Un précédent essai avait été
     placé plus haut dans le fichier et se faisait donc écraser par le
     height:100vh ci-dessus, créant un immense rectangle gris vide en mode
     empilé (résumé replié + toute la hauteur de l'écran quand même
     réservée). Ici : plus de sticky/scroll interne (inutile une fois
     empilé en haut de page), et un padding resserré pour un bandeau gris
     plus compact. */
  .cs-checkout-summary{
    height: auto;
    overflow: visible;
    padding: 16px 16px 4px;
  }
}

/* Titres de section */
.cs-checkout-form h3,
.cs-section-title{
  font-size: 18px;
  font-weight: 600;
  color: var(--cs-text);
  margin: 20px 0 20px;
}
.cs-checkout-form h3:first-child{ margin-top: 0; }

/* Ligne titre de section + lien (ex: "Contact" + "Se connecter") */
.cs-section-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 20px;
}
.cs-section-title-row .cs-section-title{ margin: 0; }
.cs-section-title-row:first-child{ margin-top: 0; }
.cs-login-link{
  font-size: 14px;
  color: var(--cs-teal);
  text-decoration: underline;
}

/* Toggle Expédier / Retrait */
.cs-shipping-toggle{
  display: flex;
  background: #f1f1f1;
  border-radius: var(--cs-radius);
  padding: 4px;
  margin-bottom: 24px;
}
.cs-shipping-toggle .cs-ship-btn{
  flex: 1;
  text-align: center;
  padding: 13px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--cs-text-muted);
  transition: all .15s ease;
  border: none;
  background: transparent;
  font-family: inherit;
}
.cs-shipping-toggle .cs-ship-btn.active{
  background: #fff;
  color: var(--cs-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  font-weight: 500;
}

/* ==========================================================================
   Champs façon Shopify — "label flottant" dans la même boîte bordée
   Mesures exactes prises sur la réf (DevTools) :
   - input: hauteur 47px, padding 21.05px (haut) / 10px (horizontal) / 6.05px (bas)
   - champ avec icône (adresse) : padding-right 28px pour laisser la place à l'icône
   - conteneur formulaire : padding 40px
   Technique : le <label> WooCommerce est déjà positionné juste avant l'input
   dans le même <p class="form-row"> — on le positionne en absolu par-dessus,
   et on donne à l'input un padding-top qui lui laisse la place. Pas besoin de
   toucher aux templates PHP ni d'ajouter du JS.
   ========================================================================== */
.woocommerce-checkout .form-row{
  position: relative;
  margin: 0 0 18px;
  padding: 0;
}
.woocommerce-checkout .form-row label{
  position: absolute;
  top: 8px;
  left: 11px;
  z-index: 1;
  font-size: 12px;
  line-height: 1.2;
  color: var(--cs-text-muted);
  pointer-events: none;
  margin: 0;
}
.woocommerce-checkout .form-row label .required{
  color: var(--cs-text-muted);
}
.woocommerce-checkout .woocommerce-input-wrapper{
  display: block;
  width: 100%;
}
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea{
  width: 100%;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  padding: 21px 10px 6px !important;
  font-size: 15px;
  line-height: 1.3;
  height: auto !important;
  min-height: 47px;
  background: #fff;
  transition: border-color .15s ease;
}
/* Espace pour l'icône (champ Adresse avec la loupe) */
.woocommerce-checkout #billing_address_1_field input,
.woocommerce-checkout #shipping_address_1_field input{
  padding-right: 28px !important;
}
.woocommerce-checkout .form-row:focus-within input.input-text,
.woocommerce-checkout .form-row:focus-within select{
  border-color: var(--cs-border-focus) !important;
  outline: none;
  box-shadow: 0 0 0 1px var(--cs-border-focus);
}
/* select : le texte de la valeur doit être aligné sous le label, pas centré */
.woocommerce-checkout select{
  padding-top: 21px !important;
  padding-bottom: 6px !important;
}

/* Province utilise select2 (JS) qui remplace le <select> natif par son
   propre rendu — on cible ce rendu directement pour garder le même style
   "label flottant" que les autres champs. */
.woocommerce-checkout .select2-container .select2-selection--single{
  height: auto !important;
  min-height: 47px;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  padding: 21px 10px 6px !important;
  display: flex;
  align-items: flex-end;
  background: #fff;
}
.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .form-row:focus-within .select2-selection--single{
  border-color: var(--cs-border-focus) !important;
  box-shadow: 0 0 0 1px var(--cs-border-focus);
}
.woocommerce-checkout .select2-selection__rendered{
  padding: 0 !important;
  line-height: 1.3 !important;
  font-size: 15px;
}
.woocommerce-checkout .select2-selection__arrow{
  top: auto !important;
  bottom: 10px !important;
}

/* Fix : un style d'accessibilité générique du site (probablement un
   "skip to content" mal ciblé) applique position:fixed;top:0 à n'importe
   quel élément avec tabindex dès qu'il reçoit le focus — ça "aspire" le
   champ Province (select2, tabindex="0") tout en haut de la page au clic.
   On neutralise l'effet directement sur notre champ, sans toucher au CSS
   du thème. */
body.woocommerce-checkout .select2-container--focus,
body.woocommerce-checkout .select2-container--focus .select2-selection,
body.woocommerce-checkout .select2-selection--single:focus{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: auto !important;
}

/* col2-set → grille 2 colonnes propre (Prénom / Nom) */
.woocommerce-checkout .col2-set{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{ width: 100%; float: none; }

/* ==========================================================================
   Ville / Province / Code postal — 3 colonnes sur une seule ligne
   (comme la réf : Ville | Province | Code postal côte à côte)
   On cible directement les ID générés par WooCommerce, pas besoin de
   toucher les templates form-billing.php / form-shipping.php.
   ========================================================================== */
#billing_city_field, #shipping_city_field,
#billing_state_field, #shipping_state_field,
#billing_postcode_field, #shipping_postcode_field{
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 32%;
  margin-right: 2%;
  float: none;
}
#billing_postcode_field, #shipping_postcode_field{
  margin-right: 0;
}
/* Le bloc "Adresse de facturation" (déplacé sous le paiement en mode
   Retrait) garde le même trio 3 colonnes que le formulaire principal —
   pas d'override ici, il hérite simplement de la règle générale
   ci-dessus (#billing_city_field, #billing_state_field,
   #billing_postcode_field { width: 32%; ... }). */
/* Le conteneur parent doit permettre le retour à la ligne propre pour les
   champs full-width qui suivent (ex: Téléphone) */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .form-row.address-field + .form-row.address-field{
  display: block;
}
/* Clearfix après le trio ville/province/code postal */
#billing_postcode_field::after, #shipping_postcode_field::after{
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 640px){
  #billing_city_field, #shipping_city_field,
  #billing_state_field, #shipping_state_field,
  #billing_postcode_field, #shipping_postcode_field{
    width: 100%;
    margin-right: 0;
    display: block;
  }
}

/* Toutes les autres lignes (Adresse, Appartement, Téléphone) en pleine largeur, empilées */
.woocommerce-checkout .form-row-wide,
#billing_address_1_field, #shipping_address_1_field,
#billing_address_2_field, #shipping_address_2_field,
#billing_phone_field, #shipping_phone_field,
#billing_country_field, #shipping_country_field{
  width: 100%;
  float: none;
  clear: both;
}

/* Espacement homogène entre chaque ligne du formulaire, aligné sur la réf */
.woocommerce-checkout .form-row{
  margin-bottom: 18px !important;
}
.woocommerce-checkout .col2-set{
  margin-bottom: 18px;
}

/* On masque la case native "Expédier à une adresse différente ?" — sur Shopify
   il n'y a qu'une seule adresse, donc le bloc adresse doit toujours être visible
   sans dépendre de cette case à cocher (native WooCommerce le cache par défaut). */
#ship-to-different-address{
  display: none !important;
}
.woocommerce-shipping-fields .shipping_address,
.shipping_address{
  display: block !important;
}

/* La section "Contact" ne garde QUE l'email visible par défaut.
   Les autres champs billing (nom, adresse, téléphone) restent dans le DOM
   pour que WooCommerce puisse traiter la commande, mais sont cachés tant
   qu'on n'est pas en mode Retrait.
   IMPORTANT — pourquoi scopé à #cs-billing-fields-wrapper ET !important
   (contrairement à une version précédente qui ciblait les ID seuls, sans
   !important) :
   1) Scopé au conteneur = la visibilité dépend uniquement de l'endroit où
      vit le champ dans le DOM. checkout-shopify.js déplace ces champs avec
      .appendTo() (jamais .show()/.hide()) entre #cs-billing-fields-wrapper
      (caché) et #cs-billing-address-target (visible, sous le paiement, en
      mode Retrait) — dès qu'un champ change de conteneur, ce sélecteur
      cesse ou commence à matcher tout seul, sans manipuler le moindre
      style inline.
   2) !important = même si WooCommerce affiche nativement ces champs via
      son propre script (address-i18n.js, qui fait .show() en JS = style
      inline display:block) selon la locale du pays sélectionné, un
      style inline sans !important NE PEUT PAS écraser une règle CSS
      !important — donc plus de réapparition intempestive au chargement
      ou au changement de pays/province. */
#cs-billing-fields-wrapper #billing_first_name_field,
#cs-billing-fields-wrapper #billing_last_name_field,
#cs-billing-fields-wrapper #billing_company_field,
#cs-billing-fields-wrapper #billing_country_field,
#cs-billing-fields-wrapper #billing_address_1_field,
#cs-billing-fields-wrapper #billing_address_2_field,
#cs-billing-fields-wrapper #billing_city_field,
#cs-billing-fields-wrapper #billing_state_field,
#cs-billing-fields-wrapper #billing_postcode_field,
#cs-billing-fields-wrapper #billing_phone_field{
  display: none !important;
}

/* Panier 100% virtuel (ex: formation LearnDash) : #cs-billing-fields-wrapper
   reçoit la classe .cs-force-visible (voir checkout-shopify.js) pour
   afficher les champs directement à leur emplacement d'origine, SANS les
   déplacer en JS vers un autre conteneur. Pourquoi ne pas les déplacer
   comme en mode Retrait : #cs-billing-address-target vit à l'intérieur de
   #payment / #order_review, un conteneur que WooCommerce détruit et
   régénère entièrement à chaque recalcul AJAX (paiement Stripe, side
   cart, etc.) — tout champ qui y aurait été déplacé serait supprimé avec
   lui, pas juste caché. #cs-billing-fields-wrapper, lui, vit dans la
   section Contact, jamais touchée par ces recalculs : les champs y
   restent en permanence, il suffit de lever le display:none !important
   ci-dessus avec une règle plus spécifique (classe en plus = spécificité
   supérieure, l'emporte même face à un autre !important). */
#cs-billing-fields-wrapper.cs-force-visible #billing_first_name_field,
#cs-billing-fields-wrapper.cs-force-visible #billing_last_name_field,
#cs-billing-fields-wrapper.cs-force-visible #billing_country_field,
#cs-billing-fields-wrapper.cs-force-visible #billing_address_1_field,
#cs-billing-fields-wrapper.cs-force-visible #billing_address_2_field,
#cs-billing-fields-wrapper.cs-force-visible #billing_phone_field{
  display: block !important;
}
/* Ville / Province / Code postal : display:inline-block et pas block —
   la règle générale plus haut dans ce fichier (#billing_city_field,
   #billing_state_field, #billing_postcode_field { display:inline-block;
   width:32%; ... }) a besoin de inline-block pour que les 3 champs
   restent sur la même ligne. Si on force block ici (comme pour les
   autres champs juste au-dessus), ça écrase ce inline-block — vu que
   cette règle-ci est plus spécifique — et les 3 champs repassent
   chacun sur leur propre ligne malgré le width:32%. */
#cs-billing-fields-wrapper.cs-force-visible #billing_city_field,
#cs-billing-fields-wrapper.cs-force-visible #billing_state_field,
#cs-billing-fields-wrapper.cs-force-visible #billing_postcode_field{
  display: inline-block !important;
}

/* Réordonnancement visuel pour le panier 100% virtuel : WooCommerce rend
   les champs billing dans son ordre par défaut (email en dernier, après
   téléphone) — le réordonnancement de l'email se fait en JS (voir
   checkout-shopify.js, il est simplement déplacé en tête du bloc, une
   fois, ce conteneur n'étant jamais détruit par WooCommerce). Pour
   Ville/Province/Code postal, on ne redéfinit RIEN ici : la règle
   générale déjà présente plus haut dans ce fichier
   (#billing_city_field, #billing_state_field, #billing_postcode_field
   { display:inline-block; width:32%; ... }) s'applique déjà à ces IDs
   sans scope, donc elle couvre aussi ce nouveau cas — pas besoin de la
   dupliquer, et surtout pas de la mélanger avec du flexbox (les deux
   techniques ensemble avaient causé le bug observé : le flex-basis
   d'un côté et le margin-right:2% de l'autre faisaient dépasser 100%
   de large à eux trois, renvoyant le 3ème champ à la ligne). Prénom/Nom
   sont déjà pairés nativement par WooCommerce (classes form-row-first/
   form-row-last), rien à faire non plus. */

/* Le bloc est maintenant repositionné après #order_review (voir
   checkout-shopify.js) — un peu d'espace et une ligne de séparation en
   haut, pour ne pas coller directement sous le bouton "Payer maintenant". */
#cs-billing-fields-wrapper.cs-force-visible{
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cs-border);
}

/* Le champ Province utilise le widget select2 (JS) : il mesure et fige sa
   propre largeur en pixels via un style inline au moment de son
   initialisation, avant que notre affichage ne s'applique — ignorant
   sinon la largeur de 32% posée par la règle générale ci-dessus. On
   force sa largeur à 100% DU CONTENEUR PARENT (déjà à 32% grâce à cette
   règle), ce qui l'emporte sur le style inline en pixels grâce au
   !important. */
#cs-billing-fields-wrapper.cs-force-visible #billing_state_field .select2,
#cs-billing-fields-wrapper.cs-force-visible #billing_state_field .select2-container{
  width: 100% !important;
}

/* Bloc "Adresse de facturation" affiché dans le paiement, uniquement
   en mode Retrait (aucune adresse de livraison n'a été saisie). */
.cs-billing-address-block{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cs-border);
}
.cs-billing-address-title{
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
}

/* Bandeau natif "Avez-vous un code promo ?" (injecté par WooCommerce via
   woocommerce_before_checkout_form) — masqué car redondant avec notre
   propre champ code promo dans la colonne résumé. */
.wc-coupon-wrap{
  display: none !important;
}

/* Boutons "Paiement express" (Apple Pay / Google Pay / Shop Pay)
   auto-injectés par le plugin Stripe sur le hook natif
   woocommerce_checkout_before_customer_details — déjà juste avant la
   section "Contact" par défaut. Le plugin ne fournit pas de son côté le
   libellé "Paiement express" ni le séparateur "OU" visibles sur la réf
   Shopify — on les ajoute nous-mêmes (voir checkout-shopify.js,
   csAddExpressPaymentUI, qui insère .cs-express-label avant et
   .cs-express-divider après #wc-stripe-express-checkout-element). */
#wc-stripe-express-checkout-element{
  margin-bottom: 4px;
}
.cs-express-label{
  text-align: center;
  font-size: 13px;
  color: var(--cs-text-muted);
  margin-bottom: 12px;
}
.cs-express-divider{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--cs-text-muted);
  font-size: 13px;
}
.cs-express-divider::before,
.cs-express-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cs-border);
}

/* Bloc paiement — carte avec bordure teal si sélectionné */
.woocommerce-checkout #payment ul.payment_methods{
  list-style: none;
  margin: 0; padding: 0;
}
.woocommerce-checkout #payment .wc_payment_method{
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
}
.woocommerce-checkout #payment .wc_payment_method > label{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  font-weight: 500;
  cursor: pointer;
  background: var(--cs-bg-summary);
}
.woocommerce-checkout #payment .wc_payment_method.active > label,
.woocommerce-checkout #payment input[type="radio"]:checked ~ label{
  border-bottom: 1px solid var(--cs-border);
}
.woocommerce-checkout #payment .payment_box{
  padding: 18px 16px;
  background: #fff;
}

/* Bouton CTA principal */
.woocommerce-checkout #place_order,
.cs-place-order{
  width: 100%;
  background: var(--cs-teal) !important;
  color: #fff !important;
  border: none;
  border-radius: var(--cs-radius) !important;
  padding: 16px !important;
  min-height: 54px;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .15s ease;
  margin-top: 16px;
}
.woocommerce-checkout #place_order:hover{
  background: var(--cs-teal-dark) !important;
}

/* Case "J'ai lu et j'accepte les conditions générales" — espace pour ne
   pas chevaucher le bouton "Payer maintenant" juste en dessous */
.woocommerce-terms-and-conditions-wrapper{
  margin-bottom: 8px;
}
.woocommerce-terms-and-conditions-wrapper .form-row{
  margin-bottom: 0 !important;
}
/* BUG corrigé : la règle "label flottant" plus haut (.form-row label,
   pensée pour les champs texte type Prénom/Ville) s'appliquait aussi à ces
   <label> — mais ici le <label> enveloppe une checkbox ET du texte, ce
   n'est pas un champ texte à côté. Il se retrouvait donc en
   position:absolute avec pointer-events:none, d'où le chevauchement
   visuel ET la case impossible à cocher (pointer-events:none hérité par
   la checkbox elle-même, qui est un enfant du label). Concerne les 2
   cases à cocher du checkout : conditions générales ET newsletter
   ("Envoyez-moi des nouvelles..."). On les remet en flux normal, alignées
   avec leur checkbox respective. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label,
.woocommerce-checkout #consent_email_subscription_field label,
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew label{
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cs-text);
  pointer-events: auto;
  margin: 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.woocommerce-checkout #consent_email_subscription_field input[type="checkbox"],
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  pointer-events: auto;
}
/* Filet de sécurité : toute autre case à cocher qu'on aurait manquée dans
   la section paiement (le plugin Stripe peut varier légèrement selon sa
   version). Chrome/Edge supportent :has(), suffisant vu le poste de
   travail habituel. */
#payment label:has(input[type="checkbox"]){
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: auto;
}

/* Footer liens sous le bouton */
.cs-checkout-footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cs-border);
}
.cs-checkout-footer-links a{
  font-size: 12px;
  color: var(--cs-teal);   /* était var(--cs-text-muted) */
  text-decoration: underline;
}

/* Résumé commande — colonne droite */
.cs-checkout-summary .cs-summary-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.cs-checkout-summary .cs-summary-item img{
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--cs-border);
}
.cs-checkout-summary .cs-summary-item .cs-qty-badge{
  position: relative;
  display: inline-block;
}
.cs-checkout-summary .cs-summary-item .cs-qty-badge .badge{
  position: absolute;
  top: -8px; right: -8px;
  background: #5c5c5c;
  color: #fff;
  font-size: 11px;
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.cs-checkout-summary .cs-summary-item .cs-item-name{ font-weight: 500; font-size: 14px; }
.cs-checkout-summary .cs-summary-item .cs-item-variant{ font-size: 13px; color: var(--cs-text-muted); }
.cs-checkout-summary .cs-summary-item .cs-item-price{ margin-left: auto; font-size: 14px; }

.cs-coupon-row{
  display: flex;
  gap: 8px;
  margin: 20px 0;
}
.cs-coupon-row input{
  flex: 1;
  border-radius: 10px;
  border: 1px solid var(--cs-border);
  padding: 12px 14px;
  font-size: 14px;
  color: #707070;
}
.cs-coupon-row input::placeholder{
  font-size: 14px;
  color: #707070;
}
.cs-coupon-row button{
  border-radius: 10px;
  border: 1px solid var(--cs-border);
  background: #ececec;
  color: #999;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
  transition: background .15s ease, color .15s ease;
}
/* Dès qu'on commence à taper un code (voir checkout-shopify.js). */
.cs-coupon-row button.cs-coupon-active{
  background: #00666b;
  color: #fff;
  border-color: #00666b;
}

/* Message de succès/erreur du code promo — récupéré depuis le formulaire
   coupon natif WooCommerce et réaffiché ici (voir csShowCouponMessage
   dans checkout-shopify.js), avec un style compact cohérent avec le
   reste du design plutôt que le rendu brut WooCommerce par défaut. */
#cs-coupon-message{
  margin: -10px 0 16px;
  font-size: 13px;
}
#cs-coupon-message .woocommerce-message,
#cs-coupon-message .woocommerce-error{
  /* Neutralise le style "toast flottant" (position fixed/absolute, souvent
     ancré à droite de l'écran) que le thème applique par défaut à ces
     classes — on force un affichage normal, dans le flux du document,
     directement sous le bloc code promo où le message est inséré. Le
     reste (couleur, icône, fond) reste le style natif du thème, inchangé. */
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
#cs-coupon-message .woocommerce-error li{
  list-style: none;
}
#cs-coupon-message .woocommerce-error{
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
#cs-coupon-message .woocommerce-error,
#cs-coupon-message .woocommerce-error *{
  color: red !important;
}


.cs-totals-row{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  color: var(--cs-text);
  border-top: 1px solid var(--cs-border);
}
.cs-totals-row:first-of-type{ border-top: none; }
.cs-totals-row.cs-total-final{
  font-size: 17px;
  font-weight: 700;
  border-top: 1px solid var(--cs-border);
  padding-top: 16px;
  margin-top: 6px;
}
.cs-totals-row .cs-currency-tag{
  font-size: 12px;
  color: var(--cs-text-muted);
  margin-right: 4px;
  font-weight: 400;
}

/* Ligne "Expédition" dans le résumé — n'affiche que le tarif ACTUELLEMENT
   sélectionné (celui coché via le toggle Expédier/Retrait), jamais la
   liste complète des options. Pas de sélection possible ici : le choix
   se fait uniquement via le toggle plus haut, pour éviter la redondance. */
#shipping_method li{
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
#shipping_method li:has(input:checked){
  display: block;
}
#shipping_method input[type="radio"]{
  display: none;
}
#shipping_method label{
  font-size: 14px;
  color: var(--cs-text);
  cursor: default;
}

/* Bloc "Retrait en boutique" — point unique */
.cs-pickup-intro{
  font-size: 13px;
  color: var(--cs-text-muted);
  margin-bottom: 10px;
}
.cs-pickup-location{
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 14px 16px;
  background: #fff;
}
.cs-pickup-location-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 6px;
}
.cs-pickup-free{
  font-size: 12px;
  font-weight: 600;
  color: var(--cs-teal);
}
.cs-pickup-address{
  font-size: 13px;
  color: var(--cs-text-muted);
  margin-bottom: 6px;
}
.cs-pickup-delay{
  font-size: 12px;
  color: var(--cs-text-muted);
}

/* ==========================================================================
   Résumé de commande repliable — MOBILE UNIQUEMENT (≤900px), pour matcher
   la réf Shopify mobile. Sur desktop, la colonne résumé reste sticky et
   toujours entièrement visible : pas de repli, l'en-tête cliquable est
   masqué par défaut et seule la media query ci-dessous l'active.
   État repli/déplié géré en JS (checkout-shopify.js), classe
   .cs-summary-expanded posée sur .woocommerce-checkout-review-order-table
   et ré-appliquée après chaque recalcul AJAX (ce bloc est entièrement
   régénéré par WooCommerce à chaque fois, voir bug critique #1 dans
   review-order.php). ========================================================================== */
.cs-summary-toggle{
  display: none;
}
@media (max-width: 900px){
  .cs-summary-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 4px 0 20px;
  }
  .cs-summary-toggle-label{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--cs-text-muted);
    transition: color .15s ease;
  }
  .cs-summary-toggle-total{
    font-weight: 600;
    font-size: 18px;
    color: var(--cs-text);
  }
  .cs-summary-chevron{
    flex-shrink: 0;
    color: currentColor;
    transition: transform .2s ease;
  }
  .woocommerce-checkout-review-order-table.cs-summary-expanded .cs-summary-chevron{
    transform: rotate(180deg);
  }
  .cs-summary-body{
    display: none;
  }
  .woocommerce-checkout-review-order-table.cs-summary-expanded .cs-summary-body{
    display: block;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cs-border);
    margin-bottom: 4px;
  }
}

/* Padding Elementor natif ("elementor-column-gap-wide") sur les colonnes
   qui enveloppent tout le checkout — en trop sur mobile en plus de nos
   propres paddings .cs-checkout-form/.cs-checkout-summary, ça ajoutait de
   l'espace superflu autour du bloc. Scopé à la page checkout + mobile
   uniquement, pour ne pas toucher le reste du site où ce padding Elementor
   est probablement voulu. */
@media (max-width: 900px){
  body.woocommerce-checkout .elementor-column-gap-wide > .elementor-column > .elementor-element-populated{
    padding: 0px;
  }
}

/* Bandeau de progression "Votre Panier / Détails de Commande / Commande
   terminée" — injecté automatiquement par le thème (The7) au-dessus du
   panier ET du checkout. Masqué partout (desktop + mobile), les deux
   pages étant maintenant couvertes par ce fichier (voir functions.php).
   Les deux sélecteurs sont nécessaires : la structure autour de
   .checkout-breadcrumbs n'est pas toujours la même selon la page
   (parfois enveloppée dans .checkout-page-title, parfois non). */
.checkout-page-title,
.checkout-breadcrumbs{
  display: none !important;
}
/* Texte de remerciement — page "Commande reçue" */
.cs-thankyou-text{
  color: #00676A;
  font-weight: 700;
}
.woocommerce-NoticeGroup-checkout {
    display: none !important;
}
.checkout-inline-error-message {
    font-size: 13px;
    color: red;
}

/* Page "Commande reçue" (/checkout/order-received/) — le contenu
   (titre "Détails de la commande", tableau récapitulatif) touchait les
   bords de l'écran sur mobile, sans aucune marge horizontale. Ajout
   d'un padding latéral, mobile uniquement (desktop a déjà assez d'air
   via la largeur de conteneur du thème). */
@media (max-width: 768px){
  body.woocommerce-order-received .woocommerce-order,
  body.woocommerce-order-received .woocommerce-thankyou-order-received,
  body.woocommerce-order-received .woocommerce{
    padding-left: 15px;
    padding-right: 15px;
  }
}