/* ==========================================================================
   panneau-immo.fr — Habillage WooCommerce (panier, commande, confirmation, compte)
   Reprend la charte : bleu encre, turquoise, cartes blanches arrondies, respiration.
   ========================================================================== */

/* Largeur de lecture confortable du tunnel */
.woocommerce, .woocommerce-page { color: var(--color-text); }

/* Titres */
.woocommerce h1, .woocommerce h2, .woocommerce h3 { font-family: var(--font-heading); color: var(--brand-ink-900); }

/* --- Boutons WooCommerce -> boutons de marque --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce .button.alt,
.woocommerce button.button.alt {
  background: var(--color-action);
  color: var(--color-action-text);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  min-height: var(--tap-min);
  border: 2px solid transparent;
  transition: background-color .15s ease;
  text-transform: none;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-action-hover);
  color: #fff;
}
/* Bouton secondaire (ex. « Mettre à jour le panier ») */
.woocommerce button[name="update_cart"],
.woocommerce a.button.wc-backward {
  background: #fff;
  color: var(--brand-ink-900);
  border-color: var(--brand-slate-200);
}

/* --- Champs de formulaire --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce form .form-row select,
.woocommerce-account .woocommerce input.input-text {
  border: 2px solid var(--brand-slate-200);
  border-radius: var(--radius-control);
  padding: 10px 12px;
  min-height: var(--tap-min);
  background: #fff;
  color: var(--brand-ink-900);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--brand-teal-600);
  outline: none;
  box-shadow: var(--focus-ring);
}
.woocommerce form .form-row label { font-weight: 600; color: var(--brand-ink-900); }

/* Zone « Précisions sur la commande » : plus haute et visible */
#order_comments { min-height: 120px; }

/* --- Encarts d'information (connexion, code promo, messages) -> style de marque --- */
.woocommerce-info,
.woocommerce-message,
.woocommerce form.login,
.woocommerce form.checkout_coupon,
.woocommerce-form-login,
.woocommerce-form-coupon {
  border-top: none;
  background: var(--brand-teal-100);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--brand-teal-600);
  color: var(--brand-ink-900);
  padding: var(--space-4) var(--space-5);
}
.woocommerce-info::before,
.woocommerce-message::before { color: var(--brand-teal-700); }
.woocommerce-info a, .woocommerce-message a { color: var(--brand-teal-700); font-weight: 600; }
.woocommerce-error { border-radius: var(--radius-card); border-left: 4px solid var(--brand-error); }
.woocommerce-error::before { color: var(--brand-error); }

/* --- Colonnes de la page Commande --- */
.woocommerce .col2-set { gap: var(--space-6); }
.woocommerce-checkout #customer_details {
  background: #fff;
  border: 1px solid var(--brand-slate-200);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* Récapitulatif de commande + paiement : carte bleu encre à droite */
.woocommerce-checkout #order_review {
  background: var(--brand-ink-900);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  color: #e7eef4;
}
.woocommerce-checkout #order_review h3,
.woocommerce-checkout #order_review .product-name,
.woocommerce-checkout #order_review .cart-subtotal,
.woocommerce-checkout #order_review .order-total,
.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td { color: #ffffff; }
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td { border-color: rgba(255,255,255,.14); }
.woocommerce-checkout #order_review .order-total .amount { color: #ffffff; }
/* Détails de configuration sous chaque article */
.woocommerce-checkout #order_review .wc-item-meta,
.woocommerce-checkout #order_review dl.variation { color: #cdd8e2; font-size: .9rem; }

/* Bloc paiement dans le récap sombre */
.woocommerce-checkout #payment {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-control);
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-checkout #payment label { color: #ffffff; }
.woocommerce-checkout #payment div.payment_box {
  background: rgba(255,255,255,.10);
  color: #e7eef4;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: rgba(255,255,255,.10); }
.woocommerce-checkout #payment .wc-terms-and-conditions,
.woocommerce-checkout #payment .pi-withdrawal { color: #e7eef4; }
.woocommerce-checkout #payment #place_order { width: 100%; margin-top: var(--space-3); }

/* --- Panier --- */
.woocommerce-cart .cart_totals {
  background: var(--brand-ink-900);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  color: #fff;
}
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td,
.woocommerce-cart .cart_totals .amount { color: #fff; }
.woocommerce table.shop_table { border-radius: var(--radius-card); overflow: hidden; }

/* --- Bandeau d'étapes du tunnel (injecté par le plugin) --- */
.pi-tunnel-head {
  background: linear-gradient(135deg, var(--brand-ink-900) 0%, #0b2036 100%);
  color: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.pi-tunnel-head h2 { color: #fff; margin: 0 0 var(--space-2); }
.pi-tunnel-head p { color: #cdd8e2; margin: 0 0 var(--space-4); }
.pi-steps { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pi-steps li { display: flex; align-items: center; gap: var(--space-2); color: #e7eef4; font-weight: 600; }
.pi-steps svg { width: 34px; height: 34px; flex: 0 0 auto; }
.pi-steps .pi-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-teal-600); color: #fff; font-size: .85rem; font-weight: 700;
}

/* --- Confirmation de commande : panneau « déposez vos fichiers » --- */
.pi-thankyou {
  background: linear-gradient(135deg, var(--brand-ink-900) 0%, #0b2036 100%);
  color: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin: var(--space-5) 0;
  text-align: center;
}
.pi-thankyou h2 { color: #fff; margin-top: 0; }
.pi-thankyou p { color: #cdd8e2; max-width: 60ch; margin-inline: auto; }
.pi-thankyou .btn { margin-top: var(--space-4); font-size: 1.05rem; }
.pi-thankyou svg { width: 56px; height: 56px; margin-bottom: var(--space-3); }

@media (max-width: 768px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review { padding: var(--space-5); }
}

/* --- Correctif : retirer les pictos parasites des encarts d'info --- */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { display: none; }
.woocommerce-info, .woocommerce-message { padding-left: var(--space-5); }

/* --- Confirmation de commande (page « Commande reçue ») --- */
.woocommerce-thankyou-order-received {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--brand-success);
  font-weight: 700;
}
.woocommerce-order .woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--brand-slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.woocommerce-order .woocommerce-order-overview li {
  border: 0 !important;
  text-transform: none;
  color: var(--brand-slate-600);
  font-size: .8rem;
  letter-spacing: .04em;
}
.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  color: var(--brand-ink-900);
  font-size: 1.1rem;
  letter-spacing: 0;
  margin-top: 2px;
}

/* --- Espace « Mes fichiers » : cartes de commande --- */
.pi-order-card {
  background: #fff;
  border: 1px solid var(--brand-slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.pi-order-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pi-order-card__head h3 { margin: 0; }
.pi-order-status { background: var(--brand-teal-100); color: var(--brand-ink-900); border-radius: 999px; padding: 4px 14px; font-weight: 700; }

/* Frise de suivi */
.pi-timeline { list-style: none; display: flex; margin: var(--space-5) 0 var(--space-4); padding: 0; }
.pi-timeline__step { flex: 1; text-align: center; position: relative; }
.pi-timeline__step::before {
  content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px;
  background: var(--brand-slate-200); z-index: 0;
}
.pi-timeline__step:first-child::before { display: none; }
.pi-timeline__dot {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #fff;
  border: 3px solid var(--brand-slate-200); color: #fff; font-weight: 700;
}
.pi-timeline__label { display: block; margin-top: 6px; font-size: .82rem; color: var(--brand-slate-600); }
.pi-timeline__step--done .pi-timeline__dot { background: var(--brand-success); border-color: var(--brand-success); }
.pi-timeline__step--done::before { background: var(--brand-success); }
.pi-timeline__step--current .pi-timeline__dot { border-color: var(--brand-teal-600); color: var(--brand-teal-700); box-shadow: var(--focus-ring); }
.pi-timeline__step--current .pi-timeline__label { color: var(--brand-ink-900); font-weight: 700; }

.pi-order-item { font-weight: 600; color: var(--brand-ink-900); margin: var(--space-5) 0 var(--space-2); }

/* Emplacement de fichier : aperçu (gauche) + infos (droite) */
.pi-slot {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-5);
  align-items: start; padding: var(--space-4) 0; border-top: 1px solid var(--brand-slate-200);
}
.pi-slot__preview {
  width: 200px; height: 150px; border-radius: var(--radius-control);
  border: 1px solid var(--brand-slate-200); background: var(--brand-chalk-50);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pi-slot__preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pi-slot__pdf { font-weight: 800; color: var(--brand-error); letter-spacing: 2px; font-size: 1.3rem; }
.pi-slot__empty { color: var(--brand-slate-600); font-size: .9rem; }
.pi-slot__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }
.pi-slot__name { display: inline-block; margin-bottom: var(--space-2); word-break: break-all; }
.pi-slot__done {
  background: var(--brand-teal-100); border-radius: var(--radius-control);
  padding: var(--space-3); color: var(--brand-ink-900); font-weight: 600; margin: var(--space-2) 0 0;
}

@media (max-width: 640px) {
  .pi-slot { grid-template-columns: 1fr; }
  .pi-slot__preview { width: 100%; }
  .pi-timeline { flex-wrap: nowrap; gap: var(--space-2); }
  .pi-timeline__step { flex: 1 1 0; min-width: 0; font-size: 0.8rem; }
  .pi-timeline__step::before { display: none; }
}

/* --- Pages WooCommerce en pleine largeur (le tunnel a besoin de place) --- */
.woocommerce-account .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-cart .entry-content,
.woocommerce-order-received .entry-content { max-width: none; }

/* --- « Commande reçue » : récapitulatif en ligne, e-mail sécable si trop long --- */
.woocommerce-order .woocommerce-order-overview {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  grid-template-columns: none;
}
.woocommerce-order .woocommerce-order-overview li { white-space: normal; overflow-wrap: anywhere; }

/* --- Espace « Mon compte » : colonne bleu dégradé + contenu --- */
.woocommerce-account .woocommerce {
  display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: start;
}
.woocommerce-MyAccount-navigation { float: none; width: auto; margin: 0; }
.woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: var(--space-5);
  background: linear-gradient(160deg, var(--brand-ink-900) 0%, #0b2036 100%);
  border-radius: var(--radius-card);
}
.woocommerce-MyAccount-navigation li { margin: 0 0 4px; border: 0; }
.woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center; gap: var(--space-3);
  color: #e7eef4; text-decoration: none; font-weight: 600;
  padding: 10px 12px; border-radius: var(--radius-control);
}
.woocommerce-MyAccount-navigation li a::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid #7ee0d3; background: transparent; flex: 0 0 auto;
  transition: background-color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover { background: rgba(255,255,255,.08); color: #fff; }
.woocommerce-MyAccount-navigation li.is-active a { background: rgba(255,255,255,.12); color: #fff; }
.woocommerce-MyAccount-navigation li.is-active a::before { background: var(--brand-teal-600); border-color: var(--brand-teal-600); }
.woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-content h2:first-child { margin-top: 0; }

/* --- Fichiers : cartes plus aérées, aperçu plus grand --- */
.pi-slot { grid-template-columns: 240px 1fr; gap: var(--space-6); padding: var(--space-5) 0; }
.pi-slot__preview { width: 240px; height: 180px; }
.pi-slot__done { max-width: 62ch; }

@media (max-width: 900px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pi-slot { grid-template-columns: 1fr; }
  .pi-slot__preview { width: 100%; }
}

/* --- Compte : correctif mise en page (flex robuste) + titre collé --- */
.woocommerce-account .page-header { display: none; } /* le titre est intégré à la barre bleue */

.woocommerce-account .woocommerce {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-6);
}
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { flex: 1 0 100%; }
.woocommerce-MyAccount-navigation { flex: 0 0 260px; max-width: 260px; width: 260px; float: none; margin: 0; }
.woocommerce-MyAccount-content { flex: 1 1 340px; min-width: 0; width: auto; float: none; margin: 0; }

/* Titre « Mon compte » en tête de la barre (rectangle turquoise) */
.pi-account-title {
  background: var(--brand-teal-600); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.woocommerce-MyAccount-navigation ul { margin-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* Aperçu de fichier agrandi */
.pi-slot { grid-template-columns: 260px 1fr; }
.pi-slot__preview { width: 260px; height: 200px; }

@media (max-width: 640px) {
  .pi-slot { grid-template-columns: 1fr; }
  .pi-slot__preview { width: 100%; height: 200px; }
}

/* --- Aperçu PDF affiché dans le cadre --- */
.pi-slot__preview object,
.pi-slot__preview iframe { width: 100%; height: 100%; border: 0; display: block; }
.pi-slot__pdfview { width: 100%; height: 100%; }

/* --- Échéance d'expédition (48 h) --- */
.pi-deadline {
  display: inline-block;
  background: var(--brand-teal-100); color: var(--brand-ink-900); font-weight: 700;
  border-radius: var(--radius-control); padding: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}

/* --- Répartition des visuels (Mes fichiers) --- */
.pi-repartition {
  background: var(--brand-chalk-50); border: 1px solid var(--brand-slate-200);
  border-radius: var(--radius-control); padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-4);
}
.pi-repartition__q { font-weight: 700; color: var(--brand-ink-900); margin: 0 0 var(--space-3); }
.pi-repartition__list { display: grid; gap: var(--space-2); }
.pi-repartition__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pi-repartition__label { font-weight: 600; min-width: 84px; color: var(--brand-ink-900); }
.pi-repartition__qty {
  width: 90px; min-height: 44px; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums; border: 2px solid var(--brand-slate-200);
  border-radius: var(--radius-control); background: #fff; color: var(--brand-ink-900);
}
.pi-repartition__qty:focus-visible { border-color: var(--brand-teal-600); outline: none; box-shadow: var(--focus-ring); }
.pi-repartition__ex { color: var(--brand-slate-600); }
.pi-repartition__remove { border: 0; background: transparent; color: var(--brand-slate-600); font-size: 1.4rem; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; text-align: center; border-radius: 6px; }
.pi-repartition__remove:hover { color: var(--brand-error); }
.pi-repartition__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.pi-repartition__sum { font-weight: 600; color: var(--brand-ink-900); }
.pi-repartition__error { color: var(--brand-error); font-weight: 600; margin: var(--space-2) 0 0; }
.woocommerce .pi-repartition__save[disabled] { opacity: .5; cursor: not-allowed; }

.pi-visual { border-top: 2px solid var(--brand-teal-100); margin-top: var(--space-4); }
.pi-visual__title { margin: var(--space-3) 0 var(--space-2); color: var(--brand-ink-900); font-size: 1.05rem; }

/* Aération : espace entre l'en-tête de commande et la frise de suivi */
.pi-order-card__head { margin-bottom: var(--space-5); }
.pi-order-card .pi-timeline { margin-top: var(--space-2); }