/* ==================================================================
   EPOC — panier et commande
   Le tunnel de WooCommerce arrive avec ses propres formes : angles arrondis,
   focus bleu, aplats gris, boutons pleins. On le reprend a la charte.

   On ne touche qu'a la surface : couleurs, filets, angles, typographie. La
   mise en page, les libelles flottants et le placement des controles restent
   ceux du composant — une premiere version qui reprenait ses marges et ses
   transformations a casse la mise en deux colonnes et decale les etiquettes.
   ================================================================== */

.woocommerce-checkout,
.woocommerce-cart{ background:var(--paper) }

/* Le bleu de WooCommerce cede la place a l'or de la maison */
.wc-block-checkout,
.wp-block-woocommerce-cart{
  --wc-blue:#a88652;
  --wc-highlight:#a88652;
  --wc-primary:#0c0b0a;
  --wc-content-bg:transparent;
  --wc-form-color-background:transparent;
  color:var(--ink);
  font-family:var(--sans);
}

/* ---------- Aucun angle arrondi, sauf la ou le rond fait sens ----------
   Les boutons radio et la puce du paiement en ligne restent circulaires : les
   carrer les faisait passer pour des cases a cocher. */
.wc-block-checkout input:not([type=radio]),
.wc-block-checkout select,
.wc-block-checkout button,
.wc-block-checkout img,
.wc-block-checkout .wc-blocks-components-select__container,
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-panel,
.wp-block-woocommerce-cart input:not([type=radio]),
.wp-block-woocommerce-cart button,
.wp-block-woocommerce-cart img{ border-radius:0!important }

/* ---------- Titres d'etape : le serif de la maison ---------- */
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-checkout-order-summary__title-text{
  font-family:var(--serif)!important;
  font-style:italic!important;font-weight:300!important;
  letter-spacing:.005em;
  color:var(--ink);
}
.wc-block-components-checkout-step__description,
.wc-block-checkout__guest-checkout-notice{
  font-size:11px;letter-spacing:.03em;color:var(--mute);
}

/* ---------- Champs : filet clair, or au focus ---------- */
.wc-blocks-components-select__select{
  padding-right:34px!important;
  text-overflow:ellipsis;
}
.wc-block-components-text-input input,
.wc-blocks-components-select__container,
.wc-block-components-textarea{
  border-color:var(--line)!important;
  background:transparent!important;
  box-shadow:none!important;
  font-family:var(--sans);
  color:var(--ink);
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__container:focus-within,
.wc-block-components-textarea:focus{
  border-color:var(--gold)!important;
  box-shadow:0 0 0 1px var(--gold)!important;
  outline:none!important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label{
  color:var(--mute)!important;
  letter-spacing:.04em;
}

/* ---------- Le moyen de paiement ---------- */
.wc-block-components-radio-control-accordion-option{
  border-color:var(--line)!important;
  background:transparent!important;
}
.wc-block-components-radio-control-accordion-option:has(input:checked){
  border-color:var(--ink)!important;
}
.wc-block-components-radio-control__label{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.wc-block-components-radio-control-accordion-content{
  font-size:12px;line-height:1.65;color:var(--mute);
}

/* ---------- Le bouton radio ----------
   Le rond noir plein de WooCommerce est lourd sur du papier. On le remplace
   par un anneau d'un pixel et un point d'or : le meme vocabulaire que les
   pastilles de coloris. */
.wc-block-components-radio-control .wc-block-components-radio-control__input{
  width:16px!important;height:16px!important;
  border:1px solid var(--line)!important;border-radius:50%!important;
  background:transparent!important;box-shadow:none!important;
  transition:border-color var(--t);
}
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked{
  border-color:var(--gold)!important;
}
/* Le point : WooCommerce le dessine en noir plein sur dix pixels, ce qui pese
   sur du papier creme. Un point d'or de sept pixels suffit a dire « choisi ». */
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before{
  background:var(--gold)!important;
  width:7px!important;height:7px!important;
}
.wc-block-components-radio-control .wc-block-components-radio-control__input:focus{
  outline:1px solid var(--gold)!important;outline-offset:3px!important;
}

/* ---------- Le paiement en ligne, annonce mais pas encore ouvert ----------
   Une ligne a part, dessinee comme les autres moyens de paiement mais eteinte :
   le client voit qu'il arrive, sans pouvoir le choisir. */
.epoc-paiement-bientot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:8px;padding:16px 18px;
  border:1px dashed var(--line);
  color:var(--mute);
  cursor:default;
}
.epoc-paiement-bientot__puce{
  width:15px;height:15px;flex:none;
  border:1px solid var(--line);border-radius:50%;
  opacity:.6;
}
.epoc-paiement-bientot__nom{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.epoc-paiement-bientot__etat{
  margin-left:auto;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;
}
@media (max-width:520px){
  .epoc-paiement-bientot__etat{margin-left:27px}
}

/* ---------- Le recapitulatif ---------- */
.wc-block-components-totals-item{font-size:12px;letter-spacing:.04em}
.wc-block-components-totals-item__label{color:var(--mute)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:24px;
}
.wc-block-components-formatted-money-amount{font-variant-numeric:tabular-nums}
.wc-block-components-product-name{
  font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;
}
.wc-block-components-panel__button{
  font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute)!important;
}
.wc-block-components-order-summary__button-text{font-family:var(--serif);font-style:italic}

/* ---------- Boutons ---------- */
.wc-block-components-button:not(.is-link){
  background:var(--ink)!important;
  color:var(--cream)!important;
  border:1px solid var(--ink)!important;
  min-height:54px;
  font-family:var(--sans);
  font-size:10px!important;letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  transition:background var(--t),color var(--t);
}
.wc-block-components-button:not(.is-link):hover{
  background:transparent!important;color:var(--ink)!important;
}
.wc-block-components-button.is-link{color:var(--gold)!important}

/* ---------- Mentions et liens ---------- */
.wc-block-checkout__terms,
.wc-block-components-checkout-policies{font-size:11px;line-height:1.6;color:var(--mute)}
.wc-block-checkout a,
.wp-block-woocommerce-cart a{color:var(--ink);text-underline-offset:3px}
.wc-block-checkout a:hover{color:var(--gold)}

/* Les erreurs, dans la palette plutot qu'en rouge vif */
.wc-block-components-validation-error{color:#a8552f;font-size:11px}
.has-error input,
.has-error .wc-blocks-components-select__container{border-color:#a8552f!important}