/* ============================================================
   PICTORI — panier, commande, compte

   Ces pages restaient dans l'ancienne charte : un second logo
   sous l'en-tete, une frise d'etapes bleue, les champs bruts de
   WooCommerce. Elles reprennent ici les memes jetons que le reste
   du site — Fraunces et Inter, le rose, aucun degrade, aucun bleu.
   ============================================================ */

:root{
  --rose:#fca2ae; --rose-fonce:#e8768a; --rose-pale:#fde8eb; --rose-voile:#fef5f7;
  --encre:#241f1e; --encre-douce:#6d6360; --bord:#f2e2e5; --blanc:#fff;
  --gris-off:#eceaea;
  --r-l:22px; --r-m:15px;
  --px-serif:"Fraunces",Georgia,serif;
  --px-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account{
  background:var(--rose-voile);
  font-family:var(--px-sans);
  color:var(--encre);
}

.px-boutique{
  max-width:1000px;
  margin:0 auto;
  padding:46px 24px 90px;
}
.px-boutique h1,.px-boutique h2,.px-boutique h3,
.woocommerce-cart h1,.woocommerce-checkout h1,.woocommerce-account h1,
.px-boutique .woocommerce h3{
  font-family:var(--px-serif);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--encre);
}

/* ---------- frise d'etapes ---------- */
.px-etapes{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:34px;
  flex-wrap:wrap;
}
.px-etape{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px 9px 10px;
  border-radius:100px;
  background:var(--blanc);
  border:1px solid var(--bord);
  font-size:.86rem;
  color:var(--encre-douce);
}
.px-etape i{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gris-off);
  color:var(--encre-douce);
  font-style:normal;font-weight:600;font-size:.78rem;
}
.px-etape b{font-weight:500}
.px-etape.faite{border-color:var(--rose-pale)}
.px-etape.faite i{background:var(--rose-pale);color:var(--rose-fonce)}
.px-etape.active{border-color:var(--rose);color:var(--encre)}
.px-etape.active i{background:var(--rose);color:var(--encre)}
.px-etape.active b{font-weight:600}

/* ---------- encart d'information ---------- */
.px-info{
  background:var(--rose-pale);
  border-radius:var(--r-l);
  padding:20px 24px;
  margin-bottom:34px;
  font-size:.93rem;
  line-height:1.6;
  color:var(--encre);
}
.px-info strong{display:block;margin-bottom:4px;font-weight:600}

/* ---------- cartes WooCommerce ---------- */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details{margin-bottom:8px}
.woocommerce form.checkout_coupon,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #order_review,
.woocommerce-cart .cart_totals,
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation{
  background:var(--blanc);
  border:1px solid var(--bord);
  border-radius:var(--r-l);
  padding:26px 28px;
  margin-bottom:22px;
}
.woocommerce-checkout #order_review_heading{margin:34px 0 14px}

/* ---------- champs ---------- */
.woocommerce form .form-row{padding:0;margin:0 0 16px}
.woocommerce form .form-row label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:6px;
  color:var(--encre);
}
.woocommerce form .form-row .required{color:var(--rose-fonce);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-selection--single{
  width:100%;
  background:var(--rose-voile);
  border:1px solid var(--bord)!important;
  border-radius:var(--r-m);
  padding:13px 15px;
  font-family:var(--px-sans);
  font-size:.95rem;
  color:var(--encre);
  height:auto!important;
  transition:border-color .2s,background .2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none;
  border-color:var(--rose)!important;
  background:var(--blanc);
}
.woocommerce .select2-selection--single .select2-selection__rendered{
  line-height:1.5;padding:0;color:var(--encre);
}
.woocommerce .select2-selection--single .select2-selection__arrow{top:12px;right:10px}

/* ---------- boutons ---------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--rose);
  color:var(--encre);
  font-family:var(--px-sans);
  font-weight:600;
  font-size:.95rem;
  border:none;
  border-radius:100px;
  padding:15px 32px;
  transition:background .22s,color .22s,transform .22s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background:var(--rose-fonce);
  color:var(--blanc);
  transform:translateY(-2px);
}
.woocommerce #place_order{width:100%;margin-top:8px;padding:17px 32px;font-size:1rem}

/* ---------- messages : aucun bleu ---------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice{
  background:var(--blanc);
  border-top:none;
  border-left:3px solid var(--rose);
  border-radius:var(--r-m);
  padding:16px 20px;
  font-size:.92rem;
  color:var(--encre);
}
.woocommerce-error{border-left-color:#c2506a}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before{display:none}
.woocommerce-info a,.woocommerce-message a,.woocommerce form a{
  color:var(--rose-fonce);
  text-decoration-color:var(--rose);
  text-underline-offset:3px;
}

/* ---------- recapitulatif ---------- */
.woocommerce table.shop_table{
  border:none;
  border-radius:0;
  width:100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-top:1px solid var(--bord);
  padding:14px 0;
  font-size:.94rem;
}
.woocommerce table.shop_table thead th{
  border-top:none;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--encre-douce);
}
.woocommerce table.shop_table tfoot .order-total th,
.woocommerce table.shop_table tfoot .order-total td{
  font-size:1.05rem;
  font-weight:700;
}
.woocommerce .woocommerce-Price-amount.amount{
  font-family:var(--px-sans);
  font-weight:600;
  font-size:inherit;
}
.woocommerce table.shop_table tfoot .order-total .woocommerce-Price-amount.amount{
  font-family:var(--px-serif);
  font-size:1.35rem;
}

/* ---------- paiement ---------- */
.woocommerce-checkout #payment{
  background:transparent;
  border-radius:0;
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--bord);
  padding:0 0 16px;
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--rose-voile);
  border-radius:var(--r-m);
  font-size:.9rem;
  color:var(--encre-douce);
}
.woocommerce-checkout #payment div.payment_box::before{display:none}

/* ---------- deux colonnes sur grand ecran ----------
   Le bloc "Details de facturation" est haut : s'il n'occupe qu'une
   rangee, le recapitulatif se retrouve rejete tout en bas de la
   colonne de droite. On lui fait donc couvrir les deux rangees. */
@media (min-width:900px){
  .woocommerce-checkout form.checkout{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    column-gap:26px;
    align-items:start;
  }
  .woocommerce-checkout form.checkout > *{grid-column:1}
  .woocommerce-checkout form.checkout #customer_details{
    grid-column:1;
    grid-row:1 / span 2;
    margin:0;
  }
  .woocommerce-checkout form.checkout #order_review_heading{
    grid-column:2;grid-row:1;margin:0 0 14px;
  }
  .woocommerce-checkout form.checkout #order_review{
    grid-column:2;grid-row:2;position:sticky;top:120px;
  }
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2{width:auto;float:none}
}

/* ---------- garde-fous de largeur ----------
   WooCommerce fait flotter ses colonnes a 47 % et ses champs a 47 %.
   Avec le rembourrage des cartes, la seconde colonne debordait a
   droite. On repasse tout en border-box et on empile sous 900 px. */
.px-boutique *,
.px-boutique *::before,
.px-boutique *::after{box-sizing:border-box}

@media (max-width:899px){
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2,
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2{
    width:100%;
    float:none;
  }
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{width:48%}
.woocommerce form .form-row-wide{width:100%;clear:both}
@media (max-width:520px){
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{width:100%;float:none}
}
.px-boutique .woocommerce{max-width:100%;overflow-x:hidden}

/* Le bouton de paiement : le theme le rattrape avec une regle plus
   specifique, d'ou le !important cible plutot qu'une surenchere de
   selecteurs. C'est le dernier geste du parcours, il doit se voir. */
.woocommerce-checkout #payment #place_order,
.woocommerce #place_order{
  width:100%!important;
  float:none!important;
  padding:17px 32px!important;
  font-size:1rem!important;
  border-radius:100px!important;
  line-height:1.3!important;
}
.woocommerce-checkout #payment .form-row.place-order{padding:14px 0 0}