/* ============================================================
   impressions.be — site.css  v1.0
   Chrome (header, footer) + grilles de page + carte produit
   Transposé depuis la maquette React (site.css + chrome-impressions.jsx)
   Dépend de : impressions-base.css
   ============================================================ */

body { margin: 0; }

/* ---- Conteneur ---- */
.ip-wrap { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--sp-6); }

/* ---- Accessibilité : focus & ancres ---- */
a:focus-visible {
  outline: 2px solid var(--ip-bleu);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}
section[id], footer[id] { scroll-margin-top: 96px; }

/* ==== HEADER ==== */
.ip-site-header {
  border-bottom: var(--border-hair-line);
  background: var(--ip-papier);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Bandeau utilitaire */
.ip-topbar {
  border-bottom: var(--border-hair-line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ip-graphite);
  letter-spacing: 0.03em;
}
.ip-topbar-in {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

/* Ligne logo + nav + actions */
.ip-header-in {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.ip-nav-desktop {
  display: flex;
  gap: 26px;
  flex: 1;
}
.ip-nav-desktop a {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ip-encre);
}
.ip-nav-desktop a:hover { text-decoration: underline; }
.ip-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ip-burger { display: none; }

/* Nav mobile */
.ip-nav-mobile {
  display: none;
  flex-direction: column;
  border-top: var(--border-hair-line);
  padding: var(--sp-2) var(--sp-6) var(--sp-4);
}
.ip-nav-mobile a {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--ip-encre);
  border-bottom: var(--border-hair-line);
}
.ip-nav-mobile a:hover { text-decoration: none; color: var(--ip-bleu); }

/* ==== HEROS ==== */
.ip-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding-top: var(--sp-16);
  padding-bottom: 56px;
  border-bottom: var(--border-hair-line);
}
.ip-hero-visual { align-self: stretch; }
.ip-hero-ctas { display: flex; gap: var(--sp-3); margin-top: 30px; flex-wrap: wrap; }

/* ==== SECTIONS ACCUEIL ==== */
.ip-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-6);
  margin-bottom: 28px;
}
.ip-section-head a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ip-encre);
  white-space: nowrap;
}

/* Grille produits : 4 colonnes desktop */
.ip-prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Bande reassurance */
.ip-band {
  background: var(--surface-card);
  border: var(--border-hair-line);
  border-radius: var(--radius-1);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
}

/* Vedette grand format */
.ip-feature {
  margin-top: 28px;
  background: var(--surface-card);
  border: var(--border-hair-line);
  border-radius: var(--radius-1);
  padding: 44px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-12);
  align-items: center;
}

/* 3 etapes */
.ip-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}
.ip-step { border-top: var(--border-hair-line); padding-top: 22px; }
.ip-step-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ==== CARTE PRODUIT ==== */
.ip-product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  border: var(--border-hair-line);
  border-radius: var(--radius-1);
  overflow: hidden;
  background: var(--surface-card);
  transition: border-color var(--dur) var(--ease);
}
.ip-product-card:hover { border-color: var(--ip-encre); }
.ip-product-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ip-product-card__cat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ip-bleu);
}
.ip-product-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 21px;
  line-height: 1.1;
  color: var(--ip-encre);
}
.ip-product-card__desc {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}
.ip-product-card__foot {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ip-arrow {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--ip-bleu);
}

/* ==== FICHE PRODUIT ==== */
.ip-fil-ariane {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding-top: var(--sp-6);
}
.ip-fil-ariane a { color: var(--text-muted); }
.ip-fil-ariane a:hover { color: var(--ip-bleu); text-decoration: none; }

.ip-fiche-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 24px;
}

/* Emplacement configurateur */
.ip-config-slot {
  border: 2px dashed var(--ip-bleu);
  border-radius: var(--radius-1);
  background: transparent;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-height: 420px;
}
@media (min-width: 961px) { .ip-config-slot { min-height: 600px; } }

/* Micro-reassurance sous le configurateur */
.ip-micro-reassurance {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  border-top: var(--border-hair-line);
  padding-top: 18px;
}
.ip-micro-reassurance > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-muted);
}

/* Specs techniques */
.ip-specs-table { border-top: var(--border-hair-line); margin-top: 24px; }
.ip-specs-table > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: var(--border-hair-line);
}
.ip-specs-table dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.ip-specs-table dd {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ip-encre);
  margin: 0;
  line-height: 1.55;
}

/* Bas de fiche (conseil pro + associes) */
.ip-fiche-bas {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 48px;
  align-items: start;
  padding-top: 48px;
}
.ip-assoc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

/* Conseil du pro */
.ip-conseil {
  border: var(--border-hair-line);
  border-radius: var(--radius-1);
  padding: 24px 28px;
  background: var(--surface-card);
}
.ip-conseil__eyebrow { margin-bottom: 10px; }

/* ==== FOOTER ==== */
.ip-site-footer {
  background: var(--ip-encre);
  color: var(--ip-papier);
  margin-top: 72px;
}
.ip-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 28px;
}
.ip-foot-titre {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8E8A7D;
  margin-bottom: 14px;
}
.ip-foot-liste {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
}
.ip-foot-liste a { color: #E7E3D8; }
.ip-foot-liste a:hover { color: #fff; text-decoration: none; }
.ip-foot-tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 20px;
  color: var(--ip-papier);
  margin-top: 18px;
}
.ip-foot-tagline span { color: var(--ip-bleu-clair); }
.ip-foot-sep { border: none; border-top: 1px solid #2C2A20; margin: 0; }
.ip-foot-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #8E8A7D;
  letter-spacing: 0.03em;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 960px) {
  .ip-nav-desktop { display: none; }
  .ip-burger { display: inline-flex; }
  .ip-nav-mobile { display: flex; }

  .ip-hero-grid { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; padding-bottom: 44px; }
  .ip-hero-visual { max-width: 440px; }

  .ip-prod-grid { grid-template-columns: repeat(2, 1fr); }
  .ip-band { grid-template-columns: repeat(2, 1fr); padding: 28px 24px; gap: 28px; }
  .ip-feature { grid-template-columns: 1fr; padding: 28px 24px; gap: var(--sp-8); }
  .ip-steps-grid { grid-template-columns: 1fr; gap: 22px; }

  .ip-fiche-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .ip-fiche-bas  { grid-template-columns: 1fr; gap: 36px; }
  .ip-assoc-grid { grid-template-columns: repeat(3, 1fr); }

  .ip-foot-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .ip-topbar-right { display: none; }
}

@media (max-width: 600px) {
  .ip-prod-grid { grid-template-columns: 1fr; }
  .ip-band { grid-template-columns: 1fr; }
  .ip-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ip-specs-table > div { grid-template-columns: 1fr; gap: 4px; }
  .ip-assoc-grid { grid-template-columns: 1fr; }
}

/* ==== CONFIGURATEUR CATALOGUE HELLOPRINT ==== */

.ip-configurateur {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Sélecteur de sous-gamme (ex: "Flyer classique / Flyers éco…") */
.ip-cfg-subgamme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.ip-cfg-subgamme-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--ip-filigrane);
  border-radius: 3px;
  background: transparent;
  color: var(--ip-graphite);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ip-cfg-subgamme-btn:hover {
  border-color: var(--ip-encre);
  color: var(--ip-encre);
}
.ip-cfg-subgamme-btn--active {
  border-color: var(--ip-bleu);
  color: var(--ip-bleu);
  background: var(--ip-bleu-wash, #ECEEFB);
}

/* Groupe d'options (Format, Papier…) */
.ip-cfg-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ip-cfg-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ip-graphite);
}
.ip-cfg-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.ip-cfg-btn {
  font-size: 13.5px;
  padding: 7px 14px;
  border: 1px solid var(--ip-filigrane);
  border-radius: 3px;
  background: transparent;
  color: var(--ip-encre);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1.3;
}
.ip-cfg-btn:hover:not(.ip-cfg-btn--disabled) {
  border-color: var(--ip-encre);
}
.ip-cfg-btn--active {
  border-color: var(--ip-bleu);
  color: var(--ip-bleu);
  background: var(--ip-bleu-wash, #ECEEFB);
}
.ip-cfg-btn--disabled {
  opacity: 0.35;
  cursor: default;
}

/* Grille quantités */
.ip-qty-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ip-graphite);
  margin-bottom: var(--sp-2);
}
.ip-qty-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.ip-qty-btn {
  font-size: 14px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  padding: 10px 18px;
  border: 1px solid var(--ip-filigrane);
  border-radius: 3px;
  background: transparent;
  color: var(--ip-encre);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  min-width: 72px;
}
.ip-qty-btn:hover {
  border-color: var(--ip-encre);
}
.ip-qty-btn--active {
  border-color: var(--ip-bleu);
  background: var(--ip-bleu-wash, #ECEEFB);
  color: var(--ip-bleu);
}
.ip-qty-price {
  font-size: 14px;
  color: var(--ip-graphite);
  margin-top: var(--sp-3);
}

/* Message quand aucune combinaison n'est disponible */
.ip-cfg-empty {
  font-size: 14px;
  color: var(--ip-graphite);
  font-style: italic;
  padding: var(--sp-3) 0;
}

@media (max-width: 600px) {
  .ip-qty-btn { min-width: 70px; padding: 8px 12px; }
  .ip-qty-btn__price { font-size: 14px; }
}

/* ============================================================
   CONFIGURATEUR CLOUDPRINTER — form WooCommerce intégré
   ============================================================ */

/* Options dynamiques CP */
.ip-cp-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.ip-cfg-btn__extra {
  font-size: 10.5px;
  opacity: 0.6;
  margin-left: 4px;
  font-family: var(--font-mono);
}

/* Zone form WC */
.ip-cp-cart {
  margin-top: var(--sp-4);
}

/* Quantité native WC → style ip */
.ip-cp-cart form.cart {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ip-cp-cart .quantity {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.ip-cp-cart .quantity::before {
  content: 'Quantité';
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ip-graphite);
  white-space: nowrap;
}
.ip-cp-cart .qty,
.ip-cp-cart input[type="number"] {
  width: 80px;
  padding: 9px 12px;
  border: 1px solid var(--ip-filigrane);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ip-encre);
  background: transparent;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ip-cp-cart .qty::-webkit-inner-spin-button,
.ip-cp-cart .qty::-webkit-outer-spin-button { display: none; }
.ip-cp-cart .qty:focus,
.ip-cp-cart input[type="number"]:focus {
  outline: 2px solid var(--ip-bleu);
  border-color: var(--ip-bleu);
}

/* Bouton ajouter au panier WC → style ip-btn--primary */
.ip-cp-cart .single_add_to_cart_button,
.ip-cp-cart button[type="submit"] {
  display: block;
  width: 100%;
  padding: 15px 24px;
  background: var(--ip-encre);
  color: var(--ip-papier);
  border: none;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.ip-cp-cart .single_add_to_cart_button:hover,
.ip-cp-cart button[type="submit"]:hover {
  background: var(--ip-bleu);
}
.ip-cp-cart .single_add_to_cart_button:disabled,
.ip-cp-cart button[type="submit"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* File upload Cloudprinter plugin (cp_file_upload) */
.ip-cp-cart .wk_cloudprinter_file_upload_wrap,
.ip-cp-cart .cp-file-upload {
  margin-bottom: var(--sp-3);
}
.ip-cp-cart label[for*="cp_file"] {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ip-graphite);
  display: block;
  margin-bottom: var(--sp-2);
}
.ip-cp-cart input[type="file"] {
  font-size: 13px;
  color: var(--ip-graphite);
}

/* ── Correction débordements texte ── */

/* Nom produit h1 : éviter le débordement hors grille */
.ip-fiche-grid h1 {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Description courte CP : coupure propre */
.ip-fiche-grid p {
  overflow-wrap: break-word;
}

/* Grille fiches : éviter débordement colonne image */
.ip-fiche-visual {
  min-width: 0;
  overflow: hidden;
}

/* Breadcrumb : retour à la ligne si trop long */
.ip-fil-ariane {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Cartes produits : nom trop long */
.ip-product-card__name {
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Supprime le placeholder dashed-box en mode développement */
.ip-config-slot--placeholder {
  border: 2px dashed color-mix(in srgb, var(--ip-bleu) 40%, transparent);
  border-radius: 4px;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: color-mix(in srgb, var(--ip-bleu) 4%, transparent);
}
.ip-config-slot--placeholder > span:first-child {
  display: block;
}

@media (max-width: 600px) {
  .ip-cp-cart .quantity::before { display: none; }
}

/* ==== SECTION LES + DEMANDÉS (ip-phares-grid) ==== */
.ip-phares-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 4px;
}

.ip-phare-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  border: var(--border-hair-line);
  border-radius: var(--radius-1);
  overflow: hidden;
  background: var(--surface-card);
  transition: border-color var(--dur) var(--ease);
}
.ip-phare-tile:hover { border-color: var(--ip-encre); }

.ip-phare-tile__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.ip-phare-tile__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--ip-encre);
  line-height: 1.15;
}

.ip-phare-tile__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ip-phare-tile__prix {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ip-graphite);
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 960px) {
  .ip-phares-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .ip-phares-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==== HERO SECTION : fond + espacement ==== */
.ip-hero-section {
  background: var(--ip-papier);
  border-bottom: var(--border-hair-line);
}
.ip-hero-section .ip-wrap {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* ==== SECTION WRAPPER : séparation verticale ==== */
.ip-phares-section {
  padding-top: 64px;
  padding-bottom: 56px;
  border-bottom: var(--border-hair-line);
}

/* ==== BOUTIQUE SECTION : séparation ==== */
section[data-section="produits"] {
  border-bottom: var(--border-hair-line);
}

/* ==== ip-prod-grid : boutique accueil (4 cols) ==== */
.ip-prod-grid .ip-product-card {
  min-height: 0;
}