/* =========================================================================
   DanGros Supérette — habillage des écrans WooCommerce
   Les feuilles de style natives de WooCommerce sont désactivées : tout
   l'affichage boutique passe par ce fichier et par theme.css.
   ========================================================================= */

.dg-woo{padding-bottom:clamp(2rem,5vw,3.5rem)}

/* =============================== MESSAGES =============================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .wc-block-components-notice-banner{
  list-style:none;margin:0 0 1.4rem;padding:.95rem 1.1rem;border-radius:2px;
  border:1px solid var(--border-2);background:var(--bg-2);font-size:.92rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;
}
.woocommerce-message{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.woocommerce-error{border-color:var(--alerte);background:color-mix(in srgb,var(--alerte) 8%,transparent)}
.woocommerce-error li{list-style:none}
.woocommerce-message .button,
.woocommerce-info .button{margin-left:auto}

/* ============================ TRI DU CATALOGUE ========================== */
.woocommerce-result-count,
.woocommerce-ordering{margin:0}
.woocommerce-ordering select{
  border:1px solid var(--border-2);background:var(--surface);border-radius:2px;
  padding:.45rem .7rem;font-size:.85rem;
}

/* ============================== PAGINATION ============================== */
.woocommerce-pagination{margin-top:2rem}
.woocommerce-pagination ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;
}
.woocommerce-pagination a,
.woocommerce-pagination span{
  display:grid;place-items:center;min-width:2.4rem;height:2.4rem;padding:0 .6rem;
  border:1px solid var(--border-2);border-radius:2px;font-family:Archivo,sans-serif;
  font-weight:700;font-size:.85rem;
}
.woocommerce-pagination a:hover{border-color:var(--accent);color:var(--accent)}
.woocommerce-pagination .current{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ================================ PANIER ================================ */
.woocommerce-cart-form table.shop_table,
.dg-woo table.shop_table{
  width:100%;border-collapse:collapse;border:1px solid var(--border);
  background:var(--surface);border-radius:2px;font-size:.92rem;
}
.dg-woo table.shop_table th,
.dg-woo table.shop_table td{
  padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle;
}
.dg-woo table.shop_table th{
  font-family:Archivo,sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:var(--bg-2);
}
/* min-width : la colonne du nom reclame 99 % de la largeur, la vignette
   doit donc defendre la sienne pour ne pas etre reduite a zero. */
.dg-woo table.shop_table td.product-thumbnail img{
  width:56px;min-width:56px;max-width:none;height:auto;
  background:var(--media);border-radius:2px;
}
.dg-woo table.shop_table .product-remove a{
  display:grid;place-items:center;width:1.6rem;height:1.6rem;border:1px solid var(--border-2);
  border-radius:2px;color:var(--muted);font-size:1rem;line-height:1;
}
.dg-woo table.shop_table .product-remove a:hover{border-color:var(--alerte);color:var(--alerte)}

.dg-woo .actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;padding:1rem 0}
.dg-woo .coupon{display:flex;gap:.5rem;flex-wrap:wrap}
.dg-woo input[type="text"],
.dg-woo input[type="email"],
.dg-woo input[type="tel"],
.dg-woo input[type="password"],
.dg-woo input[type="number"],
.dg-woo textarea,
.dg-woo select{
  border:1px solid var(--border-2);background:var(--bg);border-radius:2px;
  padding:.65rem .8rem;font-size:.92rem;font-family:"Hanken Grotesk",sans-serif;outline:none;
}
.dg-woo input:focus,.dg-woo textarea:focus,.dg-woo select:focus{border-color:var(--accent)}

.dg-woo .button,
.dg-woo button.button,
.dg-woo a.button,
.dg-woo input.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.3rem;border:2px solid var(--border-2);background:transparent;color:var(--fg);
  border-radius:2px;font-family:Archivo,sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;
}
.dg-woo .button:hover{border-color:var(--accent);color:var(--accent)}
.dg-woo .button.alt,
.dg-woo .checkout-button,
.dg-woo #place_order{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}
.dg-woo .button.alt:hover,
.dg-woo .checkout-button:hover,
.dg-woo #place_order:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}

.cart_totals,
.cross-sells{margin-top:2rem}
.cart_totals h2,
.cross-sells h2{font-size:1.15rem;margin-bottom:.9rem}
.cart-collaterals{display:grid;grid-template-columns:1fr .8fr;gap:2rem;align-items:start}
@media(max-width:860px){.cart-collaterals{grid-template-columns:1fr}}

.wc-proceed-to-checkout{margin-top:1rem}
.wc-proceed-to-checkout .checkout-button{width:100%;padding:.9rem 1.5rem;font-size:.95rem}

/* =============================== COMMANDE =============================== */
.woocommerce-checkout .dg-woo form.checkout{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.4rem,3vw,2.5rem);align-items:start;
}
@media(max-width:900px){.woocommerce-checkout .dg-woo form.checkout{grid-template-columns:1fr}}
#customer_details h3,
#order_review_heading{font-size:1.15rem;margin-bottom:1rem}
.woocommerce-billing-fields__field-wrapper{display:grid;gap:.9rem}
.dg-woo p.form-row{display:grid;gap:.35rem;margin:0}
.dg-woo p.form-row label{
  font-size:.85rem;font-weight:600;font-family:Archivo,sans-serif;
}
.dg-woo .required{color:var(--alerte);text-decoration:none}
.dg-woo .woocommerce-input-wrapper,
.dg-woo .woocommerce-input-wrapper input,
.dg-woo .woocommerce-input-wrapper textarea{width:100%}
.dg-woo .select2-container--default .select2-selection--single{
  border:1px solid var(--border-2);border-radius:2px;height:auto;padding:.35rem .3rem;background:var(--bg);
}

#order_review{
  border:1px solid var(--border);border-radius:2px;background:var(--bg-2);padding:1.3rem;
}
#payment ul.payment_methods{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.7rem}
#payment ul.payment_methods li{
  border:1px solid var(--border-2);border-radius:2px;padding:.85rem 1rem;background:var(--surface);
}
#payment ul.payment_methods label{font-family:Archivo,sans-serif;font-weight:700;font-size:.9rem}
#payment .payment_box{font-size:.86rem;color:var(--muted);margin-top:.5rem}
#payment .place-order{margin-top:1rem}
#payment #place_order{width:100%;padding:.9rem 1.5rem;font-size:.95rem}
.woocommerce-terms-and-conditions-wrapper{font-size:.85rem;color:var(--muted);margin-bottom:.9rem}

/* ============================== MON COMPTE ============================== */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.3rem}
.woocommerce-MyAccount-navigation a{
  display:block;padding:.6rem .9rem;border:1px solid var(--border);border-radius:2px;
  font-size:.9rem;background:var(--surface);
}
.woocommerce-MyAccount-navigation li.is-active a{
  border-color:var(--accent);color:var(--accent);font-weight:700;
}
.woocommerce-account .dg-woo{display:grid;grid-template-columns:240px 1fr;gap:2rem;align-items:start}
@media(max-width:860px){.woocommerce-account .dg-woo{grid-template-columns:1fr}}
.woocommerce-form-login,
.woocommerce-form-register{
  border:1px solid var(--border);border-radius:2px;padding:1.3rem;background:var(--surface);
  display:grid;gap:.9rem;max-width:36rem;
}

/* ============================ PAGE VIDE / DIVERS ======================== */
.cart-empty,
.woocommerce-info{font-size:.95rem}
.return-to-shop{margin-top:1rem}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}


/* ===================== DISPOSITION DU TUNNEL ============================
   Le formulaire, son titre de récapitulatif et le récapitulatif lui-même
   sont trois enfants directs : sans placement explicite, le récapitulatif
   retombe sous le formulaire au lieu de rester en colonne de droite. */
.woocommerce-checkout .dg-woo form.checkout{align-items:start;grid-template-rows:auto 1fr}
.woocommerce-checkout #customer_details{grid-column:1;grid-row:1 / span 2}
.woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1}
.woocommerce-checkout #order_review{grid-column:2;grid-row:2}
@media(max-width:900px){
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{grid-column:1;grid-row:auto}
}

/* ======================== TABLEAU DU PANIER =============================
   Sans largeurs déclarées, la colonne de suppression s'étale sur la
   moitié du tableau. */
.dg-woo table.shop_table .product-remove{width:3rem}
.dg-woo table.shop_table .product-thumbnail{width:5.5rem;min-width:5.5rem}
.dg-woo table.shop_table .product-price,
.dg-woo table.shop_table .product-subtotal,
.dg-woo table.shop_table .product-total{width:9rem;white-space:nowrap}
.dg-woo table.shop_table .product-quantity{width:7rem}
/* La colonne du nom absorbe la largeur restante : sans cela le navigateur
   la repartit sur la colonne « supprimer » et le tableau se dereg1e. */
.dg-woo table.shop_table .product-name{width:99%}
.dg-woo table.shop_table td.product-quantity input{width:4.5rem;text-align:center}

.dg-woo .cart_totals table.shop_table th{width:11rem}
.dg-woo .cart_totals ul#shipping_method{list-style:none;margin:0;padding:0}
.dg-woo .cart_totals .woocommerce-shipping-destination{font-size:.82rem;color:var(--muted)}

/* La table du récapitulatif de commande respire mieux sans bordure double. */
#order_review table.shop_table{border:0;background:transparent}
#order_review table.shop_table th{background:transparent;border-bottom:1px solid var(--border)}
#order_review_heading{margin-bottom:.9rem}
.woocommerce-checkout #customer_details h3{margin-bottom:1rem}
.woocommerce-checkout h3#ship-to-different-address{margin-top:1.6rem}

/* Le second titre suit directement le dernier champ d'adresse : sans marge
   haute, « Précisions pour le livreur » colle au champ précédent. */
.woocommerce-checkout .woocommerce-additional-fields h3{margin-top:2rem}

/* La ligne d'actions occupe toute la largeur du tableau : sans cela, sa
   cellule hérite de la colonne étroite « supprimer » et le bouton se
   replie sur quatre lignes. */
.dg-woo table.shop_table td.actions{width:auto;white-space:nowrap}
.dg-woo table.shop_table td.actions .button{white-space:nowrap}

/* Zone de livraison unique et gratuite : la destination calculée par
   WooCommerce n'apporte rien et s'affiche « Livraison à *. ». */
.woocommerce-shipping-destination{display:none}

/* ========================= COMMANDE REÇUE ===============================
   Le client repart sans e-mail ni compte : cet écran est son seul reçu.
   Il est donc dessiné comme le récépissé papier d'une boutique — souche
   détachable, numéro qu'on lit à voix haute, montant à préparer.
   ======================================================================== */
.recu{
  /* Le papier se teinte à partir de l'or du logo, pas d'un beige neutre ;
     assis sur --surface, il suit le mode sombre sans réglage séparé. */
  --papier:#FDF8EF;
  --papier:color-mix(in srgb,var(--or) 6%,var(--surface));
  /* L'or du logo passe mal en petit corps sur fond clair : on garde le ton
     profond pour le texte et on rend l'or vif au mode sombre. */
  --or-lisible:var(--or-profond);
  max-width:64rem;margin-inline:auto;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .recu{--or-lisible:var(--gold)}
}
:root[data-theme="dark"] .recu{--or-lisible:var(--gold)}

.recu-grille{display:grid;gap:clamp(1.2rem,3vw,2rem);align-items:start}
@media(min-width:900px){
  .recu-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(1.6rem,3.4vw,2.6rem)}
}

/* ------------------------------- La souche ------------------------------ */
.recu-souche{
  background:var(--papier);border:1px solid var(--border);border-radius:var(--r2);
  box-shadow:var(--shadow);overflow:hidden;
}
/* Le bandeau est doré, pas bleu : l'en-tête de page juste au-dessus est
   déjà un aplat bleu nuit, et deux bandeaux identiques se répondaient.
   En or, il se lit comme le cachet encré d'un reçu. */
.recu-bandeau{
  display:flex;align-items:center;gap:.5rem;margin:0;
  padding:.72rem clamp(1.1rem,3vw,1.6rem);
  background:var(--or);color:#FFFFFF;
  font-family:var(--serif);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.12em;
}
.recu-bandeau svg{flex:none}

.recu-corps{padding:clamp(1.2rem,3.4vw,1.9rem) clamp(1.1rem,3vw,1.6rem) clamp(1.3rem,3.4vw,1.8rem)}

.recu-etiq{
  margin:0;font-family:var(--serif);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--muted);
}
.recu-etiq--espace{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--border)}

/* Le numéro est ce que le client dira au téléphone : il domine l'écran. */
.recu-numero{
  margin:.22rem 0 0;font-family:var(--chiffre);font-weight:400;
  font-size:clamp(3.1rem,10.5vw,5.2rem);line-height:.84;
  color:var(--accent);letter-spacing:-.005em;
}
.recu-numero-prefixe{
  font-size:.32em;vertical-align:.72em;margin-right:.16em;
  color:var(--or-lisible);letter-spacing:.02em;
}
.recu-montant{
  margin:.22rem 0 0;font-family:var(--chiffre);font-weight:400;
  font-size:clamp(1.9rem,5.6vw,2.7rem);line-height:1;color:var(--or-lisible);
}
.recu-montant .amount,
.recu-montant bdi{color:inherit;font-weight:inherit}
.recu-aide{margin:.5rem 0 0;font-size:.86rem;line-height:1.5;color:var(--muted)}
.recu-aide a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* La perforation : deux trous poinçonnés sur les bords, reliés par le
   pointillé de déchirure. C'est ce qui fait lire la carte comme un reçu. */
.recu-dechirure{
  position:relative;height:0;margin:0 clamp(1.1rem,3vw,1.6rem);
  border-top:2px dashed var(--border-2);
}
.recu-dechirure::before,
.recu-dechirure::after{
  content:"";position:absolute;top:50%;width:1.5rem;height:1.5rem;
  border-radius:50%;background:var(--bg);transform:translateY(-50%);
}
.recu-dechirure::before{left:calc(-1 * (clamp(1.1rem,3vw,1.6rem) + .75rem))}
.recu-dechirure::after{right:calc(-1 * (clamp(1.1rem,3vw,1.6rem) + .75rem))}

.recu-pied{padding:clamp(1.1rem,3vw,1.5rem) clamp(1.1rem,3vw,1.6rem) clamp(1.2rem,3vw,1.6rem)}
.recu-tel{
  margin:.24rem 0 0;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.15rem,3.4vw,1.5rem);color:var(--fg);letter-spacing:.01em;
}

/* ------------------------------ La séquence ----------------------------- */
.recu-h2{
  margin:0 0 1.1rem;font-family:var(--serif);font-weight:800;
  font-size:clamp(1.15rem,2.4vw,1.4rem);color:var(--fg);
}

/* Une vraie suite d'événements, dont la première est déjà accomplie :
   le point plein porte cet état, et l'étiquette répond « quand » plutôt
   que de numéroter des étapes que personne ne compte. */
.jalons{list-style:none;margin:0;padding:0}
.jalon{position:relative;padding:0 0 1.15rem 1.85rem}
.jalon:last-child{padding-bottom:0}
.jalon::before{
  content:"";position:absolute;left:.34rem;top:1.15rem;bottom:.05rem;
  width:2px;background:var(--border);
}
.jalon:last-child::before{display:none}
.jalon::after{
  content:"";position:absolute;left:0;top:.42rem;width:.8rem;height:.8rem;
  border-radius:50%;border:2px solid var(--border-2);background:var(--surface);
}
.jalon--fait::after{border-color:var(--accent);background:var(--accent)}
.jalon-quand{
  display:block;font-family:var(--serif);font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.jalon--fait .jalon-quand{color:var(--accent)}
.jalon-quoi{display:block;margin-top:.16rem;font-size:.94rem;line-height:1.5;color:var(--fg)}
.jalon-quoi .amount,
.jalon-quoi bdi{font-weight:700;color:inherit}

.recu-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.recu-actions .btn{flex:1 1 15rem}
/* Le vert de WhatsApp est déjà celui du bouton flottant ; sur ce fond,
   seule l'encre bleu nuit reste lisible — le blanc y tombe à 1,8:1. */
.b-wa{background:#25D366;color:var(--bleu-nuit)}
.b-wa:hover{background:#1FBA59;color:var(--bleu-nuit)}
.b-wa svg{flex:none}

.recu-note{
  display:flex;gap:.55rem;align-items:flex-start;margin:1.2rem 0 0;
  font-size:.85rem;line-height:1.5;color:var(--muted);
}
.recu-note svg{flex:none;margin-top:.15rem;color:var(--or-lisible)}

/* ------------------------------- Le détail ------------------------------ */
.recu-detail{margin-top:clamp(1.8rem,4.5vw,2.8rem)}
.recu-detail h2{
  margin:0 0 .9rem;font-family:var(--serif);font-weight:800;
  font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--fg);
}
.recu-detail .woocommerce-customer-details{margin-top:clamp(1.5rem,3.5vw,2.2rem)}
.recu-detail address{
  font-style:normal;line-height:1.65;color:var(--fg);
  border:1px solid var(--border);border-radius:var(--r);
  padding:1rem 1.1rem;background:var(--bg-2);
}
/* Ce tableau n'a que deux colonnes : les largeurs en rem heritees du
   panier (pensees pour cinq colonnes) debordent des cellules. On les
   remplace par une repartition en pourcentage, stable a toute largeur. */
.recu-detail table.shop_table{width:100%;table-layout:fixed}
.recu-detail table.shop_table .product-name,
.recu-detail table.shop_table .woocommerce-table__product-name{width:auto}
.recu-detail table.shop_table .product-total,
.recu-detail table.shop_table .woocommerce-table__product-total{width:34%}
.recu-detail table.shop_table td,
.recu-detail table.shop_table th{white-space:normal;overflow-wrap:anywhere}
.recu-detail table.shop_table .woocommerce-table__product-total,
.recu-detail table.shop_table tfoot td{text-align:right}
.recu-detail table.shop_table tfoot th{text-align:left}
@media(min-width:641px){
  .recu-detail table.shop_table .woocommerce-table__product-total,
  .recu-detail table.shop_table tfoot td{white-space:nowrap}
}

/* Le pied de tableau ne porte pas que des montants : « moyen de paiement »
   et la note du client y sont des phrases, illisibles en colonne etroite
   sur un telephone. On les empile alors sous leur intitule. */
@media(max-width:560px){
  .recu-detail table.shop_table tfoot tr{
    display:block;padding:.6rem 0;border-bottom:1px solid var(--border);
  }
  .recu-detail table.shop_table tfoot tr:last-child{border-bottom:0}
  .recu-detail table.shop_table tfoot th,
  .recu-detail table.shop_table tfoot td{
    display:block;width:auto;border:0;padding:0 .85rem;text-align:left;
  }
  .recu-detail table.shop_table tfoot td{margin-top:.18rem;font-weight:700}
}

/* Écran d'échec : rien à célébrer, on donne la sortie de secours. */
.recu--echec{max-width:44rem}
.recu--echec .btn{margin-right:.6rem;margin-top:.4rem}

/* Le client photographie ou imprime cet écran : les actions n'y servent
   à rien, la souche seule doit rester lisible en noir et blanc. */
@media print{
  .recu-actions,.recu-note{display:none}
  .recu-souche{box-shadow:none;border-color:#000}
  .recu-dechirure::before,.recu-dechirure::after{background:#fff}
}

@keyframes recu-monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.recu-souche{animation:recu-monte .45s cubic-bezier(.2,.7,.3,1) both}
.recu-suite{animation:recu-monte .45s .09s cubic-bezier(.2,.7,.3,1) both}
@media(prefers-reduced-motion:reduce){
  .recu-souche,.recu-suite{animation:none}
}