/* FluxGoodies studio — fiche produit */

/* ── Bloc infos B2B (badges / stock / réassort / délai / paliers) ──
   Tailles en px EXPLICITES : neutralise l'agrandissement de police que le thème
   applique à la zone after_price en mobile (rendu cohérent PC + mobile). */
.fluxstudio-product-info {
  margin: 12px 0; font-size: 14px; line-height: 1.5; color: #2d3748;
  -webkit-font-smoothing: antialiased;
}
.fluxstudio-product-info * { box-sizing: border-box; }
.fluxstudio-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fluxstudio-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; line-height: 1.4;
}
.fluxstudio-badge-new { background: #2b6cb0; }
.fluxstudio-badge-origin { background: #2f855a; }
.fluxstudio-badge-eco { background: #38a169; }
.fluxstudio-badge-express { background: #dd6b20; }
.fluxstudio-stock, .fluxstudio-delivery {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 15px;
}
.fluxstudio-stock .material-icons, .fluxstudio-delivery .material-icons { font-size: 20px; flex: none; }
.fluxstudio-stock-in { color: #2f855a; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.fluxstudio-stock-restock { color: #c05621; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.fluxstudio-stock-order { color: #718096; display: inline-flex; align-items: center; gap: 6px; }
.fluxstudio-stock-qty { font-weight: 400; color: #718096; font-size: 14px; }
.fluxstudio-delivery { color: #2d3748; font-weight: 600; }

.fluxstudio-wrapper {
  margin: 16px 0;
}
.fluxstudio-frame {
  width: 100%;
  min-height: 600px;
}
.fluxstudio-status {
  margin-top: 8px;
  font-size: 0.9em;
  color: #333;
}
.fluxstudio-status.error {
  color: #c0392b;
}
/* Masquage du formulaire de marquage europeansourcing quand le studio est actif */
.fluxstudio-active #markingFormContainer,
.fluxstudio-active #customizeProductBtn,
/* Zone de personnalisation NATIVE PrestaShop : le produit est rendu personnalisable
   (pour porter le design + le prix de marquage), mais c'est le studio qui gère la
   saisie → on masque le textarea natif redondant. */
.fluxstudio-active .product-customization {
  display: none !important;
}

/* ── Mode bouton + modal plein écran ── */
.fluxstudio-launch {
  margin: 16px 0;
}
.fluxstudio-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  background: var(--flux-primary, #16a34a);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.fluxstudio-open-btn:hover {
  filter: brightness(0.95);
}

.fluxstudio-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
}
.fluxstudio-modal.open {
  display: block;
}
.fluxstudio-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.fluxstudio-modal-box {
  position: absolute;
  inset: 2vh 2vw;
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fluxstudio-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* En modal, le studio occupe toute la hauteur disponible (override de la hauteur
   inline posée par loader.js). */
.fluxstudio-modal .fluxstudio-wrapper {
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fluxstudio-modal .fluxstudio-frame {
  flex: 1;
  min-height: 0;
}
.fluxstudio-modal .fluxstudio-frame iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
body.fluxstudio-modal-open {
  overflow: hidden;
}
/* v1.18 — En modal plein écran, on MASQUE le panneau extras HTML (paliers/dispo/
   livraison) : il écrasait le studio (surtout en mobile où les cartes s'empilent).
   L'info reste sur la fiche ET est transmise à l'app studio via postMessage
   (data-context), à charge pour l'app de l'afficher dans son UI. */
.fluxstudio-modal .fluxstudio-studio-extras { display: none; }
.fluxstudio-modal .fluxstudio-wrapper { margin: 0; }

/* v1.8 / v1.18 — Grille tarifaire dégressive (design carte amélioré) */
.fluxstudio-tiers {
  margin: 14px 0; padding: 0; border: 1px solid #e2e8f0; border-radius: 12px;
  background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.fluxstudio-tiers-title {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px;
  color: #fff; background: linear-gradient(135deg, #16a34a, #15803d); padding: 10px 14px;
}
.fluxstudio-tiers-title .material-icons { font-size: 20px; color: #fff; }
.fluxstudio-tiers-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fluxstudio-tiers-table th, .fluxstudio-tiers-table td { padding: 9px 14px; text-align: left; }
.fluxstudio-tiers-table thead th {
  font-weight: 600; color: #64748b; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; background: #f8fafc; border-bottom: 1px solid #edf2f7;
}
.fluxstudio-tiers-table tbody tr { border-bottom: 1px solid #f1f5f9; }
.fluxstudio-tiers-table tbody tr:last-child { border-bottom: 0; }
.fluxstudio-tiers-table td:first-child { font-weight: 600; color: #334155; }
.fluxstudio-tier-price { font-weight: 800; color: #16a34a; white-space: nowrap; font-size: 15px; }
.fluxstudio-tiers-table tr.fluxstudio-tier-active { background: #ecfdf5; box-shadow: inset 3px 0 0 #16a34a; }
.fluxstudio-tiers-table tr.fluxstudio-tier-active td:first-child { color: #15803d; }
.fluxstudio-tiers-note { padding: 8px 14px 12px; font-size: 12px; color: #94a3b8; line-height: 1.4; }

/* v1.11 / v1.18 / v1.19 — Stock par variante (carte enrichie) */
.fluxstudio-variant-stock { margin: 12px 0; }

/* Variante sélectionnée — carte mise en avant (remplie en JS) */
.fluxstudio-variant-selected {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 9px 12px; font-size: 14px;
  border: 1px solid #e2e8f0; border-left-width: 4px; border-radius: 10px;
  background: #f8fafc; color: #334155;
}
.fluxstudio-variant-selected .fg-sel-name { color: #1e293b; }
.fluxstudio-variant-selected .fg-sel-val { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.fluxstudio-variant-selected .fg-sel-val .material-icons { font-size: 18px; }
.fluxstudio-variant-selected.fg-lvl-ok { border-left-color: #16a34a; }
.fluxstudio-variant-selected.fg-lvl-ok .fg-sel-val { color: #15803d; }
.fluxstudio-variant-selected.fg-lvl-ok .fg-dot { background: #16a34a; }
.fluxstudio-variant-selected.fg-lvl-low { border-left-color: #d97706; background: #fffbeb; }
.fluxstudio-variant-selected.fg-lvl-low .fg-sel-val { color: #b45309; }
.fluxstudio-variant-selected.fg-lvl-low .fg-dot { background: #d97706; }
.fluxstudio-variant-selected.fg-lvl-none { border-left-color: #94a3b8; }
.fluxstudio-variant-selected.fg-lvl-none .fg-sel-val { color: #64748b; font-weight: 600; }
.fluxstudio-variant-selected.fg-lvl-none .fg-dot { background: #94a3b8; }

/* Résumé repliable */
.fluxstudio-variant-details > summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 13px; color: #2b6cb0; font-weight: 600; user-select: none; padding: 6px 0;
}
.fluxstudio-variant-details > summary .material-icons { font-size: 18px; }
.fluxstudio-variant-details[open] > summary { margin-bottom: 8px; }

/* Table */
.fluxstudio-variant-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid #e2e8f0; border-radius: 10px;
}
.fluxstudio-variant-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 340px; }
.fluxstudio-variant-table th, .fluxstudio-variant-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.fluxstudio-variant-table thead th { font-weight: 600; color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; background: #f8fafc; }
.fluxstudio-variant-table tbody tr:nth-child(even) td { background: #fcfdfe; }
.fluxstudio-variant-table tbody tr:last-child td { border-bottom: 0; }

/* Nom de variante + pastille de niveau */
.fluxstudio-variant-table .fg-variant-name { font-weight: 600; color: #1e293b; }
.fluxstudio-variant-table .fg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: #cbd5e1; }
.fluxstudio-variant-table tr.fg-lvl-ok .fg-dot { background: #16a34a; }
.fluxstudio-variant-table tr.fg-lvl-low .fg-dot { background: #d97706; }
.fluxstudio-variant-table tr.fg-lvl-none .fg-dot { background: #94a3b8; }

/* Badge disponibilité */
.fluxstudio-variant-table .fg-avail-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.fluxstudio-variant-table .fg-avail-badge .material-icons { font-size: 16px; }
.fluxstudio-variant-table .fg-avail-badge.fg-ok { color: #15803d; }
.fluxstudio-variant-table .fg-avail-badge.fg-low { color: #b45309; }
.fluxstudio-variant-table .fg-avail-badge.fg-none { color: #64748b; font-weight: 600; }

/* Réassort */
.fluxstudio-variant-table .fg-restock { display: inline-flex; align-items: center; gap: 4px; color: #475569; }
.fluxstudio-variant-table .fg-restock .material-icons { font-size: 15px; color: #94a3b8; }
.fluxstudio-variant-table .fg-restock-qty { color: #16a34a; font-weight: 600; }
.fluxstudio-variant-table .fg-restock-none { color: #cbd5e1; }

/* v1.11 — Bandeau de vérification du panier (prix/stock corrigés) */
.fluxstudio-cart-check-list { margin: 6px 0 0; padding-left: 18px; }
.fluxstudio-cart-check-list li { margin: 2px 0; }

/* v1.8 — Panneau extras autour du studio (paliers + stock) */
.fluxstudio-studio-extras { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 16px; }
.fluxstudio-extras-block { flex: 1 1 220px; min-width: 200px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.fluxstudio-extras-title { font-weight: 600; font-size: 13px; color: #1a202c; margin-bottom: 6px; }
.fluxstudio-extras-stock.in { color: #16a34a; font-weight: 600; }
.fluxstudio-extras-stock.out { color: #b45309; font-weight: 600; }
.fluxstudio-extras-restock { font-size: 12px; color: #4a5568; margin-top: 4px; }
.fluxstudio-extras-delivery { font-size: 12px; color: #4a5568; margin-top: 4px; }
.fluxstudio-extras-delivery.express { color: #2b6cb0; font-weight: 600; }

/* v1.18 — Badge « Studio de marquage disponible » en overlay sur l'image produit,
   bouton « Personnaliser le marquage » remonté juste sous l'image (relocalisés en JS). */
.product-cover { position: relative; }
.fluxstudio-marking-note.fluxstudio-on-image {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 6;
    margin: 0;
    pointer-events: none; /* informatif : ne bloque pas le zoom/clic image */
}
.fluxstudio-marking-note.fluxstudio-on-image .fluxstudio-badge-marking {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.fluxstudio-launch.fluxstudio-under-image {
    margin: 12px 0 4px;
    text-align: center;
}
.fluxstudio-launch.fluxstudio-under-image .fluxstudio-open-btn {
    width: 100%;
}

/* v1.18 — Ajustements mobile du bloc B2B (tailles fixes → cohérence PC/mobile) */
@media (max-width: 767px) {
  .fluxstudio-product-info { font-size: 14px; margin: 10px 0; }
  .fluxstudio-stock, .fluxstudio-delivery { font-size: 15px; margin-top: 8px; }
  .fluxstudio-tiers { margin: 12px 0; }
  .fluxstudio-tiers-title { font-size: 14px; padding: 9px 12px; }
  .fluxstudio-tiers-table th, .fluxstudio-tiers-table td { padding: 8px 12px; }
  .fluxstudio-tier-price { font-size: 15px; }
}
@media (max-width: 480px) {
  .fluxstudio-tiers-table th, .fluxstudio-tiers-table td { padding: 8px 10px; font-size: 13px; }
  .fluxstudio-variant-table { font-size: 12px; }
}

/* ── v1.25 — Formulaire « Demander un devis » (lead) ──
   DEF-SHOP-3 : styles cohérents avec la charte du module (vert #16a34a, cartes
   arrondies). DEF-SHOP-6 : #fluxstudio-lead-form est un <div role="form"> (pas de
   <form> imbriqué dans le form panier du thème) — envoi 100% JS (lead.js).
   Tailles en px + !important : le thème force font-size sur cette zone (cf. v1.18). */
.fluxstudio-lead {
  margin: 16px 0; padding: 0; border: 1px solid #e2e8f0; border-radius: 12px;
  background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
  font-size: 14px !important; line-height: 1.5; color: #2d3748;
}
.fluxstudio-lead * { box-sizing: border-box; }
.fluxstudio-lead .fluxstudio-lead-title {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-weight: 700; font-size: 15px !important; color: #fff;
  background: linear-gradient(135deg, #16a34a, #15803d); padding: 10px 14px;
  text-transform: none;
}
#fluxstudio-lead-form { display: block; padding: 14px; }
.fluxstudio-lead .fg-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.fluxstudio-lead input[type="text"],
.fluxstudio-lead input[type="email"],
.fluxstudio-lead input[type="tel"],
.fluxstudio-lead input[type="number"],
.fluxstudio-lead textarea {
  display: block; width: 100%; margin: 0 0 10px; padding: 10px 12px;
  font-size: 14px !important; line-height: 1.4; color: #1e293b;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.fluxstudio-lead .fg-row input { margin-bottom: 10px; }
.fluxstudio-lead textarea { min-height: 84px; resize: vertical; }
.fluxstudio-lead input:focus,
.fluxstudio-lead textarea:focus {
  outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}
.fluxstudio-lead ::placeholder { color: #94a3b8; opacity: 1; }
.fluxstudio-lead .fg-check {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 10px;
  font-size: 14px !important; font-weight: 600; color: #334155; cursor: pointer;
}
.fluxstudio-lead .fg-check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; flex: none; accent-color: #16a34a;
}
.fluxstudio-lead #fg-marking-fields {
  padding: 10px 12px 2px; margin: 0 0 10px; border: 1px dashed #cbd5e1;
  border-radius: 8px; background: #f8fafc;
}
/* Fichiers : input natif caché (mais focusable/cliquable via le label), label FR stylé. */
.fluxstudio-lead .fg-file-wrap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 10px;
}
.fluxstudio-lead .fg-file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.fluxstudio-lead .fg-file-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 8px 14px; font-size: 13px !important; font-weight: 700; color: #15803d;
  background: #f0fdf4; border: 1px solid #16a34a; border-radius: 8px; cursor: pointer;
}
.fluxstudio-lead .fg-file-btn:hover { background: #dcfce7; }
.fluxstudio-lead .fg-file-btn .material-icons { font-size: 17px !important; }
.fluxstudio-lead .fg-file-input:focus + .fg-file-list,
.fluxstudio-lead .fg-file-input:focus ~ .fg-file-hint { text-decoration: underline; }
.fluxstudio-lead .fg-file-list { font-size: 13px !important; color: #64748b; }
.fluxstudio-lead .fg-file-hint { flex-basis: 100%; font-size: 12px !important; color: #94a3b8; }
.fluxstudio-lead .fluxstudio-lead-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  padding: 12px 20px; font-size: 15px !important; font-weight: 700; color: #fff;
  background: var(--flux-primary, #16a34a); border: 0; border-radius: 8px; cursor: pointer;
}
.fluxstudio-lead .fluxstudio-lead-btn:hover { filter: brightness(.95); }
.fluxstudio-lead .fluxstudio-lead-btn:disabled { opacity: .6; cursor: default; }
.fluxstudio-lead .fluxstudio-status { font-size: 13px !important; }
@media (max-width: 575px) {
  .fluxstudio-lead .fg-row { grid-template-columns: 1fr; gap: 0; }
  #fluxstudio-lead-form { padding: 12px; }
}

/* v1.18 — Override tailles de police : le bloc est rendu dans
   .tax-shipping-delivery-label (zone after_price) dont le thème force font-size:24px
   sur les <div> (spécificité > nos classes). On rétablit des tailles cohérentes,
   scopé UNIQUEMENT au bloc fluxstudio (n'affecte pas le reste du thème). */
.fluxstudio-product-info { font-size: 14px !important; }
.fluxstudio-product-info .fluxstudio-stock,
.fluxstudio-product-info .fluxstudio-delivery { font-size: 15px !important; }
.fluxstudio-product-info .fluxstudio-stock-qty { font-size: 14px !important; }
.fluxstudio-product-info .fluxstudio-tiers-title { font-size: 15px !important; }
.fluxstudio-product-info .fluxstudio-tiers-note { font-size: 12px !important; }
.fluxstudio-product-info .fluxstudio-variant-selected { font-size: 14px !important; }
.fluxstudio-product-info .fluxstudio-variant-details > summary { font-size: 13px !important; }
.fluxstudio-product-info .fluxstudio-tiers-table,
.fluxstudio-product-info .fluxstudio-variant-table { font-size: 13px !important; }
.fluxstudio-product-info .fluxstudio-tier-price { font-size: 15px !important; }
.fluxstudio-product-info .fluxstudio-badge { font-size: 11px !important; }
.fluxstudio-product-info .material-icons { font-size: 20px !important; }

/* ── Mode « galerie » (FLUXSTUDIO_DISPLAY_MODE=gallery) ──────────────────────────
   Studio dans la zone image du thème : bascule Photo/Personnaliser + plein écran.
   Scopé aux classes fluxstudio-* ; n'affecte aucun autre thème/mode. */
.fluxstudio-media { margin: 0 0 12px; }
.fluxstudio-media-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 10px;
  background: #f1f5f9; border: 1px solid #dbe3ec; border-radius: 11px;
}
.fluxstudio-media-switch button {
  border: 0; background: transparent; color: #64748b; cursor: pointer;
  font: inherit; font-size: 13px !important; font-weight: 600; padding: 8px 16px; border-radius: 8px;
}
.fluxstudio-media-switch button[aria-selected="true"] {
  background: #fff; color: #15803d; box-shadow: 0 1px 2px rgba(16,24,40,.12);
}
/* La galerie du thème sert d'ancre au CTA superposé (position relative, sans casser le zoom). */
.fluxstudio-photo-host { position: relative; }
.fluxstudio-perso-cta {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--flux-primary, #16a34a); color: #fff; border: 0; border-radius: 11px;
  padding: 12px 20px; font: inherit; font-size: 14px !important; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 22px -8px rgba(22,163,74,.5), 0 2px 6px rgba(16,24,40,.22);
}
.fluxstudio-perso-cta:hover { filter: brightness(.96); }
.fluxstudio-stage { position: relative; }
.fluxstudio-stage .fluxstudio-wrapper { min-height: 380px; }
.fluxstudio-fs {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #dbe3ec; color: #334155; cursor: pointer;
  font: inherit; font-size: 12px !important; font-weight: 600; padding: 7px 11px; border-radius: 9px;
  box-shadow: 0 2px 8px rgba(16,24,40,.14);
}
.fluxstudio-fs:hover { border-color: var(--flux-primary, #16a34a); color: #15803d; }
/* Modale plein écran (mode galerie) : le studio y est déplacé, l'emplacement le remplit. */
.fluxstudio-modal--gallery .fluxstudio-modal-slot { width: 100%; height: 100%; display: flex; }
.fluxstudio-modal--gallery .fluxstudio-modal-slot .fluxstudio-wrapper { flex: 1; min-height: 70vh; }

/* ── Caractéristiques produit : 4 blocs sous la fiche (mode galerie ou inline) ── */
.fluxstudio-specs { margin: 1.5rem 0; }
.fluxstudio-specs-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .75rem; }
.fluxstudio-specs-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.fluxstudio-spec-card {
  border: 1px solid #e5e7eb; border-radius: 10px; padding: .85rem .95rem;
  background: #fafafa;
}
.fluxstudio-spec-head {
  display: flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .02em; color: #6b7280; margin-bottom: .4rem;
}
.fluxstudio-spec-head .material-icons { font-size: 1.05rem; color: var(--flux-primary, #16a34a); }
.fluxstudio-spec-body { font-size: .92rem; line-height: 1.45; color: #111827; }
@media (max-width: 480px) { .fluxstudio-specs-grid { grid-template-columns: 1fr 1fr; } }