/* ==========================================================================
   connecteur-erp.css
   Feuille de style dédiée aux fiches produit "Connecteur ERP"
   (product-connecteur-erp.tpl). Toutes les classes sont préfixées "cn-"
   pour ne pas entrer en collision avec le thème existant.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

.cn-page{
  --cn-ink: #16213A;
  --cn-ink-soft: #4A5470;
  --cn-paper: #FFFFFF;
  --cn-panel: #F4F5F8;
  --cn-line: #DFE2E9;
  --cn-amber: #D9720B;
  --cn-amber-soft: #FBEBDA;
  --cn-teal: #0E6E63;
  --cn-teal-soft: #E1F1EE;

  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
  color: var(--cn-ink);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.5;
}

.cn-page h1, .cn-page h2, .cn-page h3{
  font-family: 'Space Grotesk', sans-serif;
  margin: 0;
  color: var(--cn-ink);
}

/* ---------- FLOATING CTA ---------- */
.cn-floating-cta{
  position: fixed;
  right: 24px;
  bottom: 84px;
  z-index: 500;
  background: var(--cn-amber);
  color: #fff;
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(217, 114, 11, 0.35);
}
.cn-floating-cta:hover{ background: #C0650A; color: #fff; }

@media (max-width: 640px){
  .cn-floating-cta{ right: 16px; bottom: 16px; padding: 12px 18px; font-size: 13.5px; }
}

/* ---------- HERO ---------- */
.cn-hero{
  padding: 40px 0 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

.cn-kicker{ font-size: 14px; color: var(--cn-ink-soft); margin-bottom: 10px; }

.cn-h1{ font-size: 36px; line-height: 1.15; font-weight: 600; }

.cn-lead{ font-size: 16.5px; color: var(--cn-ink-soft); margin-top: 14px; }
.cn-lead p{ margin: 0; }

.cn-demo-links{ display: flex; gap: 10px; margin-top: 18px; }

.cn-btn{
  display: inline-block;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
}
.cn-btn-ghost{
  border: 1px solid var(--cn-line);
  color: var(--cn-ink);
}
.cn-btn-ghost:hover{ border-color: var(--cn-ink); }
.cn-btn-solid{
  background: var(--cn-ink);
  color: var(--cn-paper);
  border: 1px solid var(--cn-ink);
}

/* Compatibility strip */
.cn-compat-strip{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--cn-line);
  border-radius: 4px;
  overflow: hidden;
}
.cn-compat-cell{
  padding: 14px 18px;
  border-right: 1px solid var(--cn-line);
  border-bottom: 1px solid var(--cn-line);
}
.cn-compat-cell:nth-child(2n){ border-right: none; }
.cn-compat-label{ font-size: 12px; color: var(--cn-ink-soft); margin-bottom: 5px; }
.cn-compat-value{ font-size: 14.5px; font-weight: 600; }

/* Hero side: flags + gallery */
.cn-flags{ list-style: none; margin: 0 0 10px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.cn-flag{
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--cn-panel);
  color: var(--cn-ink-soft);
}
/* ---------- GALLERY (fonctionnelle) ---------- */
.cn-gallery{ border: 1px solid var(--cn-line); border-radius: 4px; padding: 12px; background: var(--cn-panel); }
.cn-gallery-main{ border-radius: 3px; overflow: hidden; background: var(--cn-paper); }
.cn-gallery-main img{ width: 100%; display: block; }
.cn-gallery-thumbs{ display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cn-gallery-thumb{
  padding: 0; border: 1.5px solid transparent; border-radius: 3px;
  background: none; cursor: pointer; width: 56px; height: 56px; overflow: hidden;
}
.cn-gallery-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-gallery-thumb.active{ border-color: var(--cn-amber); }
.cn-gallery-thumb:hover{ border-color: var(--cn-ink-soft); }

.cn-lightbox{
  display: none;
  position: fixed; inset: 0; background: rgba(22, 33, 58, 0.92);
  z-index: 999; align-items: center; justify-content: center; padding: 40px;
}
.cn-lightbox.open{ display: flex; }
.cn-lightbox img{ max-width: 100%; max-height: 100%; border-radius: 4px; }
.cn-lightbox-close{
  position: absolute; top: 20px; right: 28px;
  background: none; border: none; color: #fff; font-size: 32px;
  cursor: pointer; line-height: 1;
}

.cn-reassurance{ padding: 8px 0 0; }

/* ---------- SECTIONS ---------- */
.cn-section{ padding: 40px 0; border-top: 1px solid var(--cn-line); }
.cn-h2{ font-size: 22px; font-weight: 600;  }
.cn-section-sub{ color: var(--cn-ink-soft); font-size: 14.5px; margin-top: 8px; }

/* ---------- FLOW DIAGRAM ---------- */
.cn-flow-diagram{
  margin-top: 32px;
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
}
.cn-flow-box{
  border: 1.5px solid var(--cn-ink);
  border-radius: 4px;
  padding: 18px 14px;
  text-align: center;
}
.cn-flow-name{ font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; }

.cn-flow-channels{ padding: 0 20px; }
.cn-flow-row{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cn-flow-row:last-child{ margin-bottom: 0; }
.cn-flow-arrow{ font-size: 13px; color: var(--cn-ink-soft); }
.cn-flow-line{ flex: 1 1 auto; height: 1px; }
.cn-flow-import .cn-flow-line{ border-top: 2px solid var(--cn-teal); }
.cn-flow-export .cn-flow-line{ border-top: 2px solid var(--cn-amber); }
.cn-flow-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.cn-flow-import .cn-flow-label{ background: var(--cn-teal-soft); color: var(--cn-teal); }
.cn-flow-export .cn-flow-label{ background: var(--cn-amber-soft); color: var(--cn-amber); }

.cn-flow-tag{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cn-ink-soft);
  border: 1px solid var(--cn-line);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}

.cn-flow-legend{ margin-top: 18px; display: flex; gap: 22px; font-size: 12.5px; color: var(--cn-ink-soft); }
.cn-flow-legend span{ display: flex; align-items: center; gap: 7px; }
.cn-dot{ width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.cn-dot-import{ background: var(--cn-teal); }
.cn-dot-export{ background: var(--cn-amber); }

/* ---------- SUR-MESURE / EXPERTISE ---------- */
.cn-custom-grid{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.cn-custom-col h3{
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 14px;
}

.cn-format-badges{ display: flex; flex-wrap: wrap; gap: 8px; }
.cn-format-badges span{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  border: 1px solid var(--cn-line);
  border-radius: 3px;
  padding: 5px 10px;
  color: var(--cn-ink);
  background: var(--cn-panel);
}

.cn-pledge-list{ margin: 0; padding: 0; list-style: none; }
.cn-pledge-list li{
  font-size: 14px;
  color: var(--cn-ink-soft);
  padding: 9px 0 9px 20px;
  border-top: 1px solid var(--cn-panel);
  position: relative;
}
.cn-pledge-list li:first-child{ border-top: none; padding-top: 0; }
.cn-pledge-list li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--cn-amber);
}
.cn-pledge-list li:first-child::before{ top: 7px; }

.cn-expertise-banner{
  margin-top: 32px;
  border-left: 3px solid var(--cn-amber);
  background: var(--cn-panel);
  padding: 18px 22px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--cn-ink);
  line-height: 1.5;
}

/* ---------- CAPABILITY CARDS (B2B/B2C, tarification, historique) ---------- */
.cn-capability-grid{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cn-capability-card{
  border: 1px solid var(--cn-line);
  border-radius: 4px;
  padding: 22px;
}
.cn-capability-icon{ color: var(--cn-amber); margin-bottom: 14px; }
.cn-capability-icon svg{ width: 24px; height: 24px; }
.cn-capability-card h3{
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
  font-family: 'Space Grotesk', sans-serif;
}
.cn-capability-card p{
  margin: 0;
  font-size: 13.5px;
  color: var(--cn-ink-soft);
  line-height: 1.55;
}

/* ---------- COMPATIBILITY TABLE ---------- */
.cn-compat-table{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cn-line);
  border: 1px solid var(--cn-line);
}
.cn-compat-col{ background: var(--cn-paper); padding: 22px; }
.cn-compat-col h3{ font-size: 14.5px; font-weight: 600; margin-bottom: 12px; }
.cn-versions{ display: flex; flex-wrap: wrap; gap: 6px; }
.cn-versions span{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  border: 1px solid var(--cn-line);
  border-radius: 3px;
  padding: 3px 8px;
  color: var(--cn-ink-soft);
}
.cn-compat-col ul{ margin: 0; padding: 0; list-style: none; }
.cn-compat-col li{
  font-size: 13.5px;
  color: var(--cn-ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid var(--cn-panel);
}
.cn-compat-col li:last-child{ border-bottom: none; }
.cn-compat-col li b{ color: var(--cn-ink); font-weight: 500; }

/* ---------- BENEFITS (rich text: h4/p pairs from admin) ---------- */
.cn-benefits{ margin-top: 24px; }
.cn-benefits h4{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 22px 0 6px;
}
.cn-benefits h4:first-child{ margin-top: 0; }
.cn-benefits p{
  margin: 0 0 4px;
  color: var(--cn-ink-soft);
  font-size: 14.5px;
}

/* ---------- RESOURCES (PDF + vidéo) ---------- */
.cn-resources{
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.cn-flow-mixed .cn-flow-line{ border-top: 2px dashed var(--cn-ink-soft); }
.cn-flow-mixed .cn-flow-label{ background: var(--cn-panel); color: var(--cn-ink); }
.cn-flow-mixed .cn-flow-arrow{ font-weight: 600; }
.cn-dot-mixed{ background: var(--cn-ink-soft); }
.cn-resource-card{
  border: 1px solid var(--cn-line);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  gap: 14px;
}
.cn-resource-video{ padding: 0; overflow: hidden; }
.cn-resource-icon{ flex: 0 0 auto; color: var(--cn-amber); }
.cn-resource-icon svg{ width: 26px; height: 26px; }
.cn-resource-body h3{ font-size: 14.5px; font-weight: 600; margin: 0 0 8px; font-family: 'Space Grotesk', sans-serif; }

.cn-video-embed{ position: relative; width: 100%; padding-top: 56.25%; }
.cn-video-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cn-doc-list{ list-style: none; margin: 0; padding: 0; }
.cn-doc-list li{ padding: 10px 0; border-top: 1px solid var(--cn-panel); }
.cn-doc-list li:first-child{ border-top: none; padding-top: 0; }
.cn-doc-list a{ color: var(--cn-ink); font-weight: 500; text-decoration: none; }
.cn-doc-list a:hover{ text-decoration: underline; }
.cn-doc-size{ color: var(--cn-ink-soft); font-size: 12.5px; margin-left: 6px; }
.cn-doc-list p{ margin: 4px 0 0; font-size: 13px; color: var(--cn-ink-soft); }

/* ---------- BUYBOX ---------- */
.cn-buybox-inner{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.cn-buybox-text{ max-width: 420px; }
.cn-buybox-action{ flex: 0 0 auto; min-width: 260px; text-align: right; }

.cn-shop-url{ display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cn-shop-url-input{
  flex: 1 1 auto;
  padding: 9px 10px;
  border: 1px solid var(--cn-line);
  border-radius: 3px;
  font-size: 13.5px;
}
.cn-shop-url-valid svg{ width: 16px; height: 16px; }

.cn-pack-title{ font-size: 13px; font-weight: 600; margin: 12px 0 6px; }

/* ---------- ACCESSORIES ---------- */
.cn-accessories-grid{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.cn-bottom-hook{ margin-top: 8px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .cn-hero{ grid-template-columns: 1fr; }
  .cn-capability-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px){
  .cn-custom-grid{ grid-template-columns: 1fr; }
  .cn-capability-grid{ grid-template-columns: 1fr; }
  .cn-compat-strip{ grid-template-columns: 1fr; }
  .cn-compat-cell{ border-right: none; }
  .cn-flow-diagram{ grid-template-columns: 1fr; gap: 16px; }
  .cn-flow-channels{ padding: 12px 0; }
  .cn-compat-table{ grid-template-columns: 1fr; }
  .cn-buybox-inner{ flex-direction: column; align-items: flex-start; }
  .cn-buybox-action{ text-align: left; width: 100%; }
  .cn-resources{ grid-template-columns: 1fr; }
}