/* =========================================================================
   Symbio3D — pages boutique (panier, commande, confirmation).
   Porte le design des plugins WordPress d'origine (symbio3d-panier /
   -checkout / -confirmation) sur les gabarits de l'application, a l'identique :
   cartes produit blanches, recapitulatif noir premium, total et boutons verts,
   barre de progression rayee, bandeau de reassurance.
   Chargee uniquement sur ces pages (link dans les gabarits shop), elle prime
   donc sur site.css sans le surcharger.
   ========================================================================= */

:root {
  --s3d-noir: #141414;
  --s3d-noir-2: #1d1d1d;
  --s3d-noir-3: #262626;
  /* Les boutons a fond --s3d-vert portent un texte --s3d-noir, jamais blanc :
     blanc sur #60B339 ne donne que 2,62:1, sous le minimum WCAG AA de 4,5:1
     (c'est le defaut de l'ancien site). Le noir y donne 7,02:1, ce qui permet
     de garder le vert de marque tel quel. Meme regle que .btn-primary dans
     site.css - les deux feuilles doivent rester d'accord, sinon le bouton
     change d'aspect d'un ecran a l'autre. */
  --s3d-vert: #60B339;
  --s3d-vert-clair: #7ECB4F;
  /* Sert EXCLUSIVEMENT de couleur de texte (pastilles, liens, resultat TVA),
     toujours sur fond blanc ou vert tres pale. A #4d9a2b il ne donnait que
     3,3:1, sous le minimum WCAG AA — un vert qu'on devine plus qu'on ne le lit.
     #3d7a26 donne 4,95:1 sur ces fonds, et c'est deja le vert de texte de
     site.css (--green-deep) : les deux feuilles disent enfin la meme chose. */
  --s3d-vert-sombre: #3d7a26;
  --s3d-surface: #f6f7f4;
  --s3d-bord: #e5e8e1;
  --s3d-texte: #1a1c19;
  --s3d-texte-2: #6b7269;
  --s3d-texte-inv: #f4f6f2;
  --s3d-texte-inv-2: #a7b0a2;
  --s3d-rayon: 14px;
  --s3d-rayon-s: 9px;
  --s3d-ombre: 0 10px 30px -12px rgba(20, 20, 20, .18);
}

/* ---- Titre de page ------------------------------------------------------ */
/* 30px seulement au-dessus du titre (surcharge le padding de section de site.css). */
.cart-page { color: var(--s3d-texte); padding-top: 30px; }
.cart-page > h1 { font-family: "Montserrat", sans-serif; margin-top: 0; }

/* ---- Barre de progression vers le minimum : bloc noir raye --------------
   Rendue DANS la colonne de gauche (.cart-main), au-dessus de la liste : le
   recapitulatif remonte et s'aligne sur le haut de la barre, sans espace vide
   a droite (comportement de www.symbio3d.com, panier.css @media min 901px). */
.cart-progress {
  background: var(--s3d-noir);
  color: #fff;
  border-radius: var(--s3d-rayon);
  padding: 20px 24px;
  margin: 0 0 28px;
  box-shadow: var(--s3d-ombre);
  font-family: "Montserrat", sans-serif;
}
/* Rangee haute : message a gauche, « Minimum : X HT » a droite (comme la prod). */
.cart-fs-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.cart-fs-msg { font-size: 14px; font-weight: 500; color: var(--s3d-texte-inv); }
.cart-fs-msg b { color: var(--s3d-vert-clair); font-weight: 700; }
.cart-fs-goal {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--s3d-texte-inv-2); font-weight: 600; white-space: nowrap;
}
.cart-progress .progress-track {
  height: 14px;
  border-radius: 20px;
  background: var(--s3d-noir-3);
  overflow: hidden;
  position: relative;
}
.cart-progress .progress-fill {
  height: 100%;
  border-radius: 20px;
  background: repeating-linear-gradient(90deg,
    var(--s3d-vert) 0 9px, var(--s3d-vert-clair) 9px 18px);
  transition: width .5s ease;
}

/* ---- Disposition 2 colonnes -------------------------------------------- */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 28px;
  align-items: start;
}
/* Colonne de gauche : barre de progression + liste des articles. min-width:0
   pour que la piste de grille puisse retrecir (noms de fichiers longs). */
.cart-main { min-width: 0; }

/* ---- Cartes produit : vignette | details | quantite | sous-total -------- */
.cart-list { display: flex; flex-direction: column; gap: 14px; }
.cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr auto auto;
  gap: 4px 22px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--s3d-bord);
  border-radius: var(--s3d-rayon);
  padding: 20px 22px;
  box-shadow: var(--s3d-ombre);
}
.cart-thumb {
  width: 88px; height: 88px;
  object-fit: cover;
  border-radius: var(--s3d-rayon-s);
  background: var(--s3d-noir);
  display: block;
}
.cart-details { min-width: 0; }
.cart-item-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  margin: 0 0 6px; color: var(--s3d-texte);
  overflow-wrap: anywhere; padding-right: 24px;
}
.cart-item-detail-label { font-weight: 700; font-size: 13px; color: var(--s3d-texte); margin: 0 0 2px; }
.cart-item-specs { color: var(--s3d-texte-2); font-size: 13px; font-weight: 500; margin: 0 0 6px; line-height: 1.6; }
.cart-item-comment { color: var(--s3d-texte-2); font-size: 12.5px; margin: 0 0 6px; font-style: italic; }
.cart-item-unit { color: var(--s3d-texte-2); font-size: 12.5px; font-weight: 500; margin: 0; }

/* Suffixe HT, discret */
.s3d-ht { font-size: .72em; font-weight: 600; opacity: .55; margin-left: 2px; letter-spacing: .03em; }

/* Colonne quantite (centrale) */
.cart-item-qty-col { display: flex; align-items: center; justify-content: center; }

/* Selecteur de quantite : pilule */
.qty-selector {
  display: inline-flex; align-items: center;
  border: 1px solid var(--s3d-bord); border-radius: 999px;
  overflow: hidden; background: var(--s3d-surface);
}
.qty-input {
  width: 44px; height: 38px; border: 0; background: transparent;
  text-align: center; font-family: inherit; font-weight: 700; font-size: 15px;
  color: var(--s3d-texte); -moz-appearance: textfield; padding: 0;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn {
  width: 36px; height: 38px; border: 0; background: transparent;
  font-size: 19px; line-height: 1; cursor: pointer; color: var(--s3d-texte);
  font-family: inherit;
}
.qty-btn:hover { color: var(--s3d-vert-sombre); }
.cart-item-qty-locked { color: var(--s3d-texte-2); font-size: 13px; margin: 8px 0 0; }

/* Colonne de droite : total ligne + supprimer */
.cart-item-aside {
  grid-column: 4; grid-row: 1;
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 10px; height: 100%;
}
.cart-item-total {
  font-weight: 800; font-size: 17px; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--s3d-texte); margin: 0;
}
.cart-item-remove {
  position: absolute; top: 14px; right: 16px;
  width: 26px; height: 26px; border: 0; background: transparent;
  color: var(--s3d-texte-2); font-size: 0; border-radius: 50%;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s;
}
.cart-item-remove::before { content: "\00d7"; font-size: 20px; line-height: 1; }
.cart-item-remove:hover { background: #fdece9; color: #c0392b; }

/* ---- Recapitulatif : bloc noir premium --------------------------------- */
.cart-summary {
  background: var(--s3d-noir);
  color: var(--s3d-texte-inv);
  border-radius: var(--s3d-rayon);
  padding: 26px;
  box-shadow: var(--s3d-ombre);
  border: 0;
}
.cart-summary h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s3d-texte-inv-2);
  margin: 0 0 18px;
}
.cart-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cart-summary-row span { color: var(--s3d-texte-inv-2); font-size: 14px; }
.cart-summary-row strong {
  color: var(--s3d-vert-clair); font-weight: 700; font-size: 22px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cart-summary .hint { color: var(--s3d-texte-inv-2); font-size: 11px; margin: 10px 0 0; }

/* Bouton commander : vert plein */
.cart-summary .cart-checkout-btn {
  display: block; width: 100%; margin-top: 18px;
  background: var(--s3d-vert); color: var(--s3d-noir);
  border: 0; border-radius: 10px; padding: 17px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; text-align: center;
  transition: background .2s, transform .1s;
}
.cart-summary .cart-checkout-btn:hover { background: var(--s3d-vert-clair); }
.cart-summary .cart-checkout-btn:active { transform: translateY(1px); }
.cart-summary .cart-checkout-btn.is-disabled {
  pointer-events: none; opacity: .4; cursor: not-allowed; filter: grayscale(.35);
}
.cart-summary .field-error {
  background: rgba(192, 57, 43, .14); color: #ff9b8a;
  border: 1px solid rgba(192, 57, 43, .35); border-radius: 9px;
  padding: 10px 12px; font-size: 12.5px; font-weight: 600; margin: 14px 0 0;
  text-align: center;
}

/* Bouton devis (fantome, clair sur le fond noir) */
.cart-summary .cart-quote-form,
.cart-summary .cart-quote-locked { margin: 14px 0 0; }
.cart-summary .cart-quote-btn {
  width: 100%; background: transparent; color: var(--s3d-texte-inv);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px;
  padding: 13px; font-family: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.cart-summary .cart-quote-btn:hover:not([disabled]) {
  border-color: var(--s3d-vert); color: var(--s3d-vert-clair);
}
.cart-summary .cart-quote-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cart-summary .cart-quote-locked .hint {
  display: block; margin-top: 8px; text-align: center;
  color: var(--s3d-texte-inv-2); font-size: 12px;
}
.cart-summary .cart-quote-locked .hint:hover { color: var(--s3d-vert-clair); }

/* ---- Bandeau de reassurance -------------------------------------------- */
.cart-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 36px 0 0;
}
.cart-trust-item {
  background: #fff; border: 1px solid var(--s3d-bord);
  border-radius: var(--s3d-rayon); padding: 20px;
  display: flex; gap: 13px; align-items: flex-start;
}
.cart-trust-ic {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(96, 179, 57, .12); color: var(--s3d-vert-sombre);
  display: grid; place-items: center; flex: none;
}
.cart-trust-ic svg { width: 20px; height: 20px; }
.cart-trust-item b { display: block; font-size: 14px; font-weight: 700; color: var(--s3d-texte); }
.cart-trust-item small { color: var(--s3d-texte-2); font-size: 12.5px; }

/* ---- Panier vide -------------------------------------------------------- */
.cart-empty { color: var(--s3d-texte-2); font-size: 15px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* Telephone : vignette a gauche, details en haut, puis quantite et
     sous-total sur une ligne dessous. */
  .cart-item {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "thumb details"
      "thumb qty"
      "sub   sub";
    align-items: start;
    gap: 8px 14px; padding: 18px 20px;
  }
  .cart-thumb { grid-area: thumb; width: 72px; height: 72px; }
  .cart-details { grid-area: details; }
  .cart-item-qty-col { grid-area: qty; justify-content: flex-start; }
  .cart-item-aside {
    grid-area: sub; grid-column: auto; grid-row: auto;
    flex-direction: row; align-items: center;
    justify-content: space-between; height: auto; margin-top: 4px;
  }
  .cart-item-name { padding-right: 30px; }
  .cart-trust { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-progress .progress-fill,
  .cart-summary .cart-checkout-btn { transition: none; }
}

/* Etat de mise a jour AJAX */
.cart-item.is-updating,
.cart-list.is-updating { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* =========================================================================
   PAGE COMMANDE (checkout) — repris du plugin symbio3d-checkout
   ========================================================================= */
/* 30px seulement au-dessus du titre (comme le panier), surcharge le padding
   de section de site.css. */
.checkout-page { color: var(--s3d-texte); padding-top: 30px; }
/* Titre en vert vif, comme www.symbio3d.com (« Validation de la commande »). */
.checkout-page > h1 { font-family: "Montserrat", sans-serif; color: var(--s3d-vert); margin-top: 0; }
/* Connexion pour le client déjà inscrit. Même encadré à liseré vert que le bloc
   « un compte vous est créé » plus bas dans le formulaire : les deux parlent du
   compte, ils doivent se reconnaître au premier coup d'oeil. En simple ligne de
   texte, celui-ci passait inaperçu juste sous le titre. */
.checkout-login-prompt {
  margin: 0 0 22px; padding: 14px 16px;
  background: rgba(96, 179, 57, .06);
  border: 1px solid var(--s3d-bord); border-left: 3px solid var(--s3d-vert);
  border-radius: var(--s3d-rayon-s);
  color: var(--s3d-texte); font-size: 14px;
}
.checkout-login-prompt a { color: var(--s3d-vert-sombre); font-weight: 600; }

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 28px;
  align-items: start;
}
.checkout-form-col { min-width: 0; }

/* Titre du recapitulatif (colonne de droite), AU-DESSUS de la carte noire —
   mesure sur www.symbio3d.com/commander/ : 28px, 800, vert, margin-bottom 16px. */
.checkout-heading {
  font-family: "Montserrat", sans-serif;
  font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  color: var(--s3d-vert); margin: 0 0 16px;
}
.checkout-card {
  background: #fff;
  border: 1px solid var(--s3d-bord);
  border-radius: var(--s3d-rayon);
  padding: 24px 26px;
  margin: 0 0 28px;
  box-shadow: var(--s3d-ombre);
}
/* Titre des sections du formulaire (facturation, note) : DANS la carte, comme
   la reference (.woocommerce-billing-fields h3 est un <h3> normal a l'interieur
   d'un simple div, jamais un <legend> — celui-ci punaise le titre dans la
   bordure de la boite, hors du flux, et double l'espacement avec le padding
   du parent). Valeurs mesurees sur la prod : 19px/700/noir (rgb(26,28,25) =
   --s3d-texte), liseret vert 4x19px, marge/padding/bordure identiques. Le
   decalage vertical entre les deux colonnes (la carte de gauche demarre a la
   hauteur du TITRE de droite, pas de sa carte noire) existe aussi sur la prod
   elle-meme : ce n'est pas un bug a corriger. */
.checkout-card-title {
  font-family: "Montserrat", sans-serif;
  font-size: 19px; font-weight: 700; color: var(--s3d-texte);
  letter-spacing: -.01em; line-height: 1.2;
  margin: 0 0 20px; padding: 0 0 15px; width: 100%;
  border-bottom: 1px solid var(--s3d-bord);
  display: flex; align-items: center; gap: 11px;
}
.checkout-card-title::before {
  content: ""; width: 4px; height: 19px; border-radius: 2px;
  background: var(--s3d-vert); flex: none;
}

/* Champs */
.checkout-page label {
  font-family: "Montserrat", sans-serif;
  font-size: 13px; font-weight: 600; color: var(--s3d-texte);
  margin-bottom: 5px; display: block;
}
.checkout-page label .optional { color: var(--s3d-texte-2); font-weight: 500; }
.checkout-page input[type=text],
.checkout-page input[type=email],
.checkout-page input[type=tel],
.checkout-page input[type=number],
.checkout-page textarea,
.checkout-page select {
  font-family: "Montserrat", sans-serif;
  font-size: 14.5px; color: var(--s3d-texte);
  /* Bordure mesuree sur www.symbio3d.com/commander/ (rgba(32,7,7,.8)) :
     reproduite a l'identique bien qu'elle contredise le CSS source du plugin
     (var(--s3d-bord), gris clair) — demande explicite de Florian. */
  background: #fff; border: 1px solid rgba(32, 7, 7, .8);
  border-radius: var(--s3d-rayon-s); padding: 12px 14px; line-height: 1.3;
  width: 100%; box-sizing: border-box; margin-bottom: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.checkout-page textarea { min-height: 96px; }
.checkout-page input:focus,
.checkout-page textarea:focus,
.checkout-page select:focus {
  border-color: var(--s3d-vert); outline: 0;
  box-shadow: 0 0 0 3px rgba(96, 179, 57, .15);
}
.checkout-page .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.checkout-page .form-row > div { min-width: 0; }
.checkout-page .checkbox {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-weight: 600; font-size: 14px; margin-bottom: 4px;
}
.checkout-page .checkbox input { width: auto; margin: 0; }
.checkout-page .checkbox span { margin: 0; font-weight: 600; }

/* Champ refuse : liseret rouge + halo, et le message juste dessous. La couleur
   n'est pas le seul signal (message texte + aria-invalid) — daltonisme. */
.checkout-page input.is-invalid,
.checkout-page select.is-invalid,
.checkout-page textarea.is-invalid {
  border-color: #c0392b; background: #fff8f7;
}
.checkout-page input.is-invalid:focus,
.checkout-page select.is-invalid:focus,
.checkout-page textarea.is-invalid:focus {
  border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .15);
}
/* Le message se loge dans la marge basse du champ (16 px) : pas de saut de
   mise en page quand il apparait ou disparait. */
.checkout-page .checkout-form-col .field-error {
  color: #c0392b; font-size: 12.5px; font-weight: 600;
  margin: -13px 0 13px; line-height: 1.35;
}
.checkout-page .form-row .field-error { margin: -13px 0 13px; }

/* Bandeau de refus, en tete de colonne formulaire. */
.checkout-errors {
  background: #fff5f4; border: 1px solid #f0c8c3; border-left: 3px solid #c0392b;
  border-radius: var(--s3d-rayon); padding: 16px 18px; margin: 0 0 24px;
}
.checkout-errors p { margin: 0; font-size: 14px; color: var(--s3d-texte); line-height: 1.5; }
.checkout-errors-title {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px;
  color: #c0392b; margin-bottom: 4px !important;
}
.checkout-errors-kept { color: var(--s3d-texte-2) !important; font-size: 13px !important; margin-top: 6px !important; }

/* Avis « un compte vous est créé », juste sous le champ email dont le compte
   decoule. Plus une case à cocher (le compte est désormais obligatoire) : un
   texte qui énonce le fait, pas une action à décider. Encadre vert tres pale
   plutot qu'un filet : la bascule « adresse de livraison differente » qui suit
   porte deja un border-top, deux traits colles feraient bouillie. L'explication
   porte la promesse « aucun mot de passe ». */
.checkout-account-optin {
  margin: 2px 0 18px; padding: 14px 16px;
  background: rgba(96, 179, 57, .06);
  border: 1px solid var(--s3d-bord); border-left: 3px solid var(--s3d-vert);
  border-radius: var(--s3d-rayon-s);
}
.checkout-account-title {
  margin: 0; font-weight: 600; color: var(--s3d-texte); font-size: 14px;
}
.checkout-page .checkout-account-hint {
  margin: 6px 0 0; color: var(--s3d-texte-2); font-size: 12.5px; line-height: 1.5;
}

.vat-check-row { display: flex; gap: 10px; align-items: start; }
.vat-check-row input { flex: 1; }
.vat-check-row .btn {
  background: var(--s3d-noir); color: #fff; border: 0; border-radius: 8px;
  padding: 12px 18px; font-weight: 600; font-size: 13px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.vat-check-row .btn:hover { background: var(--s3d-noir-2); }
/* Resultat de la verification TVA : vert (comme les boutons) si valide, rouge si invalide.
   Neutre (couleur .hint par defaut) si le service n'a pas pu repondre (ni ok ni ko). */
[data-vat-result].is-valid { color: var(--s3d-vert-sombre); font-weight: 700; }
[data-vat-result].is-invalid { color: #c0392b; font-weight: 700; }

/* Bascule « adresse de livraison differente » en pied du bloc facturation :
   filet de separation, plus de gros carton vide dedie a la livraison. */
.checkout-ship-toggle {
  margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--s3d-bord);
}
.shipping-address-card {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--s3d-bord);
}
/* Options de livraison : rendues dans le recapitulatif noir (fond sombre),
   comme www.symbio3d.com. Etat selectionne = fond noir-3 + liseré vert. */
.shipping-options { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.shipping-options .hint { color: var(--s3d-texte-inv-2); font-size: 12.5px; margin: 0; }
.shipping-options label,
.shipping-options .shipping-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid transparent; border-radius: 9px; cursor: pointer; margin: 0;
  background: transparent; color: #fff;
}
.shipping-options label:hover,
.shipping-options .shipping-option:hover { background: var(--s3d-noir-3); }
.shipping-options label:has(input:checked),
.shipping-options .is-selected { border-color: var(--s3d-vert); background: var(--s3d-noir-3); }
.shipping-options input[type=radio] { accent-color: var(--s3d-vert); width: 16px; height: 16px; margin: 0; flex: none; }
.shipping-option-logo {
  width: 32px; height: 32px; object-fit: contain; flex: none;
  border-radius: 4px; background: #fff; padding: 2px; box-sizing: border-box;
}
.shipping-option-logo--fallback {
  background: var(--s3d-noir-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b0a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") center/20px no-repeat;
}
.shipping-option-name { flex: 1; min-width: 0; color: #fff; font-size: 13.5px; font-weight: 500; }
.shipping-option-name small { color: var(--s3d-texte-inv-2); }
.shipping-option-price { color: #fff; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Bouton « choisir un point relais » : vert plein, pleine largeur (comme prod). */
.shipping-options .dropoff-pick-btn {
  width: 100%; margin-top: 4px; background: var(--s3d-vert); color: var(--s3d-noir);
  border: 0; border-radius: 10px; padding: 13px;
  font-family: "Montserrat", sans-serif; font-size: 13.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; cursor: pointer;
  transition: background .2s, transform .1s;
}
.shipping-options .dropoff-pick-btn:hover { background: var(--s3d-vert-clair); }
.shipping-options .dropoff-pick-btn:active { transform: translateY(1px); }
.dropoff-chosen { font-size: 13px; color: var(--s3d-texte-inv-2); margin: 8px 0 0; }

/* Colonne de droite : .checkout-heading (partagee avec la colonne de gauche,
   voir plus haut) AU-DESSUS du recap noir, puis la carte recap collante.
   align-self:stretch pour que la colonne fasse la hauteur de la ligne et que
   le sticky tienne. */
.checkout-review-col { min-width: 0; align-self: stretch; }

/* Bloc code promo : accordéon discret dans le récapitulatif sombre. */
.checkout-summary-promo {
  margin: 6px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.checkout-summary-promo > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--s3d-vert-clair);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkout-summary-promo > summary::-webkit-details-marker { display: none; }
.checkout-summary-promo > summary::after {
  content: "›";
  font-size: 18px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .2s ease;
  color: var(--s3d-texte-inv-2);
}
.checkout-summary-promo[open] > summary::after { transform: rotate(-90deg); }
.checkout-summary-promo > summary:hover { color: #fff; }
.checkout-summary-promo-body {
  padding: 4px 0 14px;
}
.checkout-summary-promo-body label {
  color: var(--s3d-texte-inv-2);
  font-size: 12.5px;
  margin-bottom: 6px;
}
.promo-code-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.promo-code-row input[type="text"] {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--s3d-rayon-s);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--s3d-texte);
  margin: 0;
}
.promo-code-row input[type="text"]:focus {
  border-color: var(--s3d-vert);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(96, 179, 57, .15);
}
.promo-code-row .btn {
  background: var(--s3d-vert);
  color: var(--s3d-noir);
  border: 0;
  border-radius: var(--s3d-rayon-s);
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.promo-code-row .btn:hover { background: var(--s3d-vert-clair); }
.checkout-summary-promo .field-error {
  margin-top: 10px;
}
.checkout-summary-promo .hint {
  margin-top: 8px;
  color: var(--s3d-vert-clair);
}

/* Bloc « Expedition » dans le recap : titre discret + options, separe par un filet. */
.checkout-summary-shipping {
  padding: 6px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.checkout-summary-shipping-title {
  color: var(--s3d-texte-inv-2); font-size: 14px; margin: 6px 0 10px;
}
/* Message d'erreur livraison, sur fond noir (comme le panier). */
.checkout-summary .field-error {
  background: rgba(192, 57, 43, .14); color: #ff9b8a;
  border: 1px solid rgba(192, 57, 43, .35); border-radius: 9px;
  padding: 10px 12px; font-size: 12.5px; font-weight: 600; margin: 10px 0 0;
  text-align: center;
}

/* Recap : bloc noir (comme le panier) */
.checkout-summary {
  background: var(--s3d-noir); color: var(--s3d-texte-inv);
  border-radius: var(--s3d-rayon); padding: 22px 24px; box-shadow: var(--s3d-ombre);
  position: sticky; top: 20px;
}
/* En-tete de colonnes « Produit / Sous-total » (comme le thead de la prod). */
.checkout-summary-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.checkout-summary-head span {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--s3d-texte-inv-2);
}
.checkout-summary-items { list-style: none; margin: 0 0 4px; padding: 0; }
.checkout-summary-items li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.checkout-summary-items img {
  width: 44px; height: 44px; object-fit: cover; border-radius: 7px;
  background: var(--s3d-noir-3); flex: none;
}
.checkout-summary-item-name { flex: 1; font-size: 13px; color: #fff; min-width: 0; overflow-wrap: anywhere; }
.checkout-summary-item-name small { color: var(--s3d-texte-inv-2); }
.checkout-summary-items li > span:last-child { color: #fff; font-weight: 700; white-space: nowrap; }
.checkout-summary-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.checkout-summary-row span { color: var(--s3d-texte-inv-2); font-size: 14px; }
.checkout-summary-row strong { color: #fff; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-summary-total { border-bottom: 0; padding-top: 14px; align-items: center; }
.checkout-summary-total span { color: #fff; font-size: 15px; font-weight: 600; }
.checkout-summary-total strong { color: var(--s3d-vert-clair); font-size: 26px; letter-spacing: -.02em; }
.checkout-summary-tax { color: var(--s3d-texte-inv-2) !important; font-size: 11px; margin: 6px 0 0; }
.checkout-submit {
  display: block; width: 100%; margin-top: 18px;
  background: var(--s3d-vert); color: var(--s3d-noir); border: 0; border-radius: 10px; padding: 17px;
  font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; text-align: center; cursor: pointer;
  transition: background .2s, transform .1s;
}
.checkout-submit:hover { background: var(--s3d-vert-clair); }
.checkout-submit:active { transform: translateY(1px); }

/* Bandeau de reassurance : pleine largeur sous les 2 colonnes (comme la page
   commande de www.symbio3d.com). Meme carte que le panier, marge 32px. */
.checkout-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 32px 0 0;
}
.checkout-trust-item {
  background: #fff; border: 1px solid var(--s3d-bord);
  border-radius: var(--s3d-rayon); padding: 20px;
  display: flex; gap: 13px; align-items: flex-start;
}
.checkout-trust-ic {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(96, 179, 57, .12); color: var(--s3d-vert-sombre);
  display: grid; place-items: center; flex: none;
}
.checkout-trust-ic svg { width: 20px; height: 20px; }
.checkout-trust-item b { display: block; font-size: 14px; font-weight: 700; color: var(--s3d-texte); }
.checkout-trust-item small { color: var(--s3d-texte-2); font-size: 12.5px; }

/* Modale point relais */
.dropoff-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 20, 20, .55); display: grid; place-items: center; padding: 20px;
}
.dropoff-modal[hidden] { display: none; }
.dropoff-modal-inner {
  background: #fff; border-radius: var(--s3d-rayon); padding: 26px;
  max-width: 520px; width: 100%; max-height: 80vh; overflow: auto; position: relative;
  box-shadow: var(--s3d-ombre);
}
.dropoff-modal-close {
  position: absolute; top: 14px; right: 16px; width: 30px; height: 30px;
  border: 0; background: var(--s3d-surface); border-radius: 50%; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--s3d-texte-2);
}
.dropoff-modal-inner h2 { font-family: "Montserrat", sans-serif; font-size: 18px; margin: 0 0 16px; }

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
  .checkout-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .checkout-page .form-row { grid-template-columns: 1fr; }
  .checkout-trust { grid-template-columns: 1fr; }
}

/* =========================================================================
   PAGE PAIEMENT — meme structure que la commande : formulaire a gauche,
   recap noir a droite, bandeau de reassurance en pied.
   ========================================================================= */
.payment-page { color: var(--s3d-texte); padding-top: 30px; }
.payment-page > h1 { font-family: "Montserrat", sans-serif; color: var(--s3d-vert); margin-top: 0; }

.payment-grid {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 28px;
  align-items: start;
}
.payment-form-col { min-width: 0; }

/* Cartes de moyens de paiement : meme style que les cartes de commande. */
.payment-method-card { margin: 0 0 24px; }
.payment-method-card:last-of-type { margin-bottom: 0; }

/* Zone Stripe Payment Element : espacement coherant. */
.payment-method-card #payment-element { margin: 16px 0 6px; }

/* Bouton de paiement : vert plein, pleine largeur. */
.payment-submit {
  display: block; width: 100%; margin-top: 14px;
  background: var(--s3d-vert); color: var(--s3d-noir); border: 0;
  border-radius: 10px; padding: 17px;
  font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; text-align: center; cursor: pointer;
  transition: background .2s, transform .1s;
}
.payment-submit:hover { background: var(--s3d-vert-clair); }
.payment-submit:active { transform: translateY(1px); }
.payment-submit:disabled { opacity: .55; cursor: not-allowed; }

/* Separateur "ou" entre Stripe et PayPal. */
.payment-divider {
  text-align: center; color: var(--s3d-texte-2); font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; margin: 8px 0 24px;
  font-family: "Montserrat", sans-serif; font-weight: 600;
}

/* Colonne de droite : titre vert au-dessus du recap noir. */
.payment-review-col { min-width: 0; align-self: stretch; }
.payment-summary { position: sticky; top: 20px; }

/* Bandeau de reassurance : identique au panier et a la commande. */
.payment-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 32px 0 0;
}
.payment-trust-item {
  background: #fff; border: 1px solid var(--s3d-bord);
  border-radius: var(--s3d-rayon); padding: 20px;
  display: flex; gap: 13px; align-items: flex-start;
}
.payment-trust-ic {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(96, 179, 57, .12); color: var(--s3d-vert-sombre);
  display: grid; place-items: center; flex: none;
}
.payment-trust-ic svg { width: 20px; height: 20px; }
.payment-trust-item b { display: block; font-size: 14px; font-weight: 700; color: var(--s3d-texte); }
.payment-trust-item small { color: var(--s3d-texte-2); font-size: 12.5px; }

@media (max-width: 900px) {
  .payment-grid { grid-template-columns: 1fr; }
  .payment-summary { position: static; }
  .payment-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .payment-trust { grid-template-columns: 1fr; }
}

/* =========================================================================
   PAGE CONFIRMATION (order-received) — même thème que panier/commande/paiement
   ========================================================================= */
.confirmation-page { color: var(--s3d-texte); padding-top: 30px; }
.confirmation-page > h1 { font-family: "Montserrat", sans-serif; color: var(--s3d-vert); margin-top: 0; }

.confirmation-grid {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 28px;
  align-items: start;
}
.confirmation-main-col { min-width: 0; }
.confirmation-review-col { min-width: 0; align-self: stretch; }

/* Carte d’état : succès ou attente de paiement */
.confirmation-status-card {
  position: relative;
  padding-left: 76px;
  margin: 0 0 24px;
}
.confirmation-status-icon {
  position: absolute; left: 24px; top: 28px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(96, 179, 57, .14); color: var(--s3d-vert-sombre);
}
.confirmation-pending-card .confirmation-status-icon { background: rgba(160, 160, 160, .18); color: var(--s3d-texte-2); }

/* Activation du compte cree au checkout : carte mise en avant (liseret vert a
   gauche) juste sous la carte de succes, avec un seul champ mot de passe. */
.confirmation-account-card {
  border-left: 3px solid var(--s3d-vert);
  background: linear-gradient(90deg, rgba(96, 179, 57, .06), #fff 220px);
}
.confirmation-account-card p { color: var(--s3d-texte-2); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.confirmation-account-form label {
  font-family: "Montserrat", sans-serif;
  font-size: 13px; font-weight: 600; color: var(--s3d-texte);
  margin-bottom: 5px; display: block;
}
.confirmation-account-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.confirmation-account-row input[type=password] {
  font-family: "Montserrat", sans-serif; font-size: 14.5px; color: var(--s3d-texte);
  background: #fff; border: 1px solid rgba(32, 7, 7, .8);
  border-radius: var(--s3d-rayon-s); padding: 12px 14px; line-height: 1.3;
  flex: 1 1 220px; min-width: 0; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.confirmation-account-row input[type=password]:focus {
  border-color: var(--s3d-vert); outline: 0;
  box-shadow: 0 0 0 3px rgba(96, 179, 57, .15);
}
.confirmation-account-row .btn { flex: none; white-space: nowrap; }
.confirmation-account-form .hint { color: var(--s3d-texte-2); font-size: 12.5px; margin: 8px 0 0; }
.confirmation-account-done .btn { display: inline-block; }

/* Liste d’articles dans la confirmation */
.confirmation-items-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.confirmation-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--s3d-bord);
}
.confirmation-items-list .confirmation-item:last-child { border-bottom: 0; }
.confirmation-item img {
  width: 54px; height: 54px; object-fit: cover; border-radius: 8px;
  background: var(--s3d-noir); flex: none;
}
.confirmation-item-details { flex: 1; min-width: 0; }
.confirmation-item-name { font-weight: 700; font-size: 15px; color: var(--s3d-texte); margin: 0 0 2px; overflow-wrap: anywhere; }
.confirmation-item-specs { color: var(--s3d-texte-2); font-size: 12.5px; margin: 0; }
.confirmation-item-total { font-weight: 800; font-size: 16px; white-space: nowrap; color: var(--s3d-texte); }

/* Adresses : grille 2 colonnes */
.confirmation-addresses-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 24px;
}
.confirmation-address {
  font-style: normal; color: var(--s3d-texte-2); line-height: 1.7; font-size: 14px;
}

/* Bandeau de réassurance : identique au panier/commande/paiement */
.confirmation-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 32px 0 0;
}
.confirmation-trust-item {
  background: #fff; border: 1px solid var(--s3d-bord);
  border-radius: var(--s3d-rayon); padding: 20px;
  display: flex; gap: 13px; align-items: flex-start;
}
.confirmation-trust-ic {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(96, 179, 57, .12); color: var(--s3d-vert-sombre);
  display: grid; place-items: center; flex: none;
}
.confirmation-trust-ic svg { width: 20px; height: 20px; }
.confirmation-trust-item b { display: block; font-size: 14px; font-weight: 700; color: var(--s3d-texte); }
.confirmation-trust-item small { color: var(--s3d-texte-2); font-size: 12.5px; }

@media (max-width: 900px) {
  .confirmation-grid { grid-template-columns: 1fr; }
  .confirmation-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .confirmation-addresses-grid { grid-template-columns: 1fr; }
  .confirmation-trust { grid-template-columns: 1fr; }
}

/* La croix de masquage du bandeau de minimum (28/07) a disparu avec le
   30/07 : minimum atteint = bandeau ABSENT, il n'y a plus rien à fermer. */