/* ============================================================
   Elqano - page-product.css
   CSS specifique a la page Produit uniquement
   ============================================================ */

/* ============================================================
   HERO PRODUIT
   ============================================================ */
.prod-hero {
  background: var(--dark);
  padding: 90px 56px 0;
  position: relative;
  overflow: hidden;
}

.prod-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 600px;
  background: radial-gradient(ellipse at center top, rgba(151,71,255,0.08) 0%, rgba(251,109,38,0.04) 40%, transparent 70%);
  pointer-events: none;
}

.ph-eyebrow {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 40px;
  position: relative;
}

.ph-title {
  font-family: 'Crimson Text', serif;
  font-size: clamp(56px, 7.5vw, 120px);
  line-height: 0.87;
  letter-spacing: -0.035em;
  color: var(--white);
  margin-bottom: 0;
  position: relative;
}

.ph-title em { font-style: italic; color: var(--orange); }

.ph-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 48px;
  position: relative;
}

.ph-left { padding: 36px 72px 48px 0; border-right: 1px solid rgba(255,255,255,0.06); }

.ph-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.45);
  line-height: 1.75;
  max-width: 860px;
  margin-bottom: 40px;
}

.ph-cta { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }

.ph-btn-primary {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 28px;
  background: var(--purple);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.ph-btn-primary:hover { background: #8535f0; transform: translateY(-1px); }
.ph-btn-primary .btn-cta-main { display: flex; align-items: center; gap: 10px; }
.ph-btn-primary:hover .btn-cta-hint { color: rgba(255,255,255,0.65); max-height: 20px; margin-top: 4px; }

.ph-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  height: 50px;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  border-radius: 7px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.12);
  transition: color 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.ph-btn-ghost:hover { color: var(--white); border-color: rgba(255,255,255,0.3); transform: translateY(-1px); }

.ph-stats { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,0.06); }

.ph-stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ph-stat:last-child { border-bottom: none; }

.ph-stat-n {
  font-family: 'Crimson Text', serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
  white-space: nowrap;
}

.ph-stat-n em { font-style: normal; color: var(--orange); font-size: 0.65em; }
.ph-stat-l { font-family: 'Roboto Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.25); letter-spacing: -0.01em; line-height: 1.5; }

.ph-right { padding: 36px 0 48px 72px; display: flex; flex-direction: column; justify-content: space-between; }

.ph-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); flex: 1; }

.ph-agent-custom {
  background: rgba(151,71,255,0.04);
  border: 1.5px dashed rgba(151,71,255,0.2);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: default;
  transition: background 0.2s;
  grid-column: 1/-1;
}

.ph-agent-custom:hover { background: rgba(151,71,255,0.08); }

.ph-agent-custom-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px dashed rgba(151,71,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(151,71,255,0.6);
  flex-shrink: 0;
}

.ph-agent-custom-name { font-family: 'Crimson Text', serif; font-size: 16px; letter-spacing: -0.02em; color: rgba(151,71,255,0.7); line-height: 1.2; }
.ph-agent-custom-tag { font-family: 'Roboto Mono', monospace; font-size: 9px; color: rgba(151,71,255,0.35); letter-spacing: -0.01em; margin-top: 3px; }

.ph-agent { background: var(--dark); padding: 24px 28px; display: flex; align-items: center; gap: 14px; transition: background 0.2s; cursor: default; }
.ph-agent:hover { background: rgba(255,255,255,0.03); }
.ph-agent-ico { width: 32px; height: 32px; flex-shrink: 0; }
.ph-agent-ico img { width: 32px; height: 32px; object-fit: contain; }
.ph-agent-name { font-family: 'Crimson Text', serif; font-size: 16px; letter-spacing: -0.02em; color: rgba(255,255,255,0.7); line-height: 1.2; }
.ph-agent-tag { font-family: 'Roboto Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.2); letter-spacing: -0.01em; margin-top: 3px; }

/* ============================================================
   ARCHITECTURE SECTION
   ============================================================ */
.arch-section {
  background-color: var(--cream);
  background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  padding: 80px 56px;
  border-bottom: 1px solid var(--div);
  position: relative;
}

.arch-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.arch-eyebrow { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 18px; }
.arch-title { font-family: 'Crimson Text', serif; font-size: clamp(40px, 4vw, 58px); line-height: 0.92; letter-spacing: -0.025em; color: var(--black); }
.arch-title em { font-style: italic; color: var(--purple); }
.arch-sub { font-size: 15px; color: var(--gray); line-height: 1.75; align-self: end; }

/* WF DIAGRAM */
.wf-diagram { position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 52px; align-items: center; }
.wf-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.wf-col { display: flex; flex-direction: column; gap: 8px; z-index: 1; position: relative; }
.wf-node { background: var(--white); border: 1px solid #E2E2E2; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 8px rgba(0,0,0,0.05); }
.wf-node-head { display: flex; align-items: center; gap: 9px; }
.wf-node-ico { width: 32px; height: 32px; border-radius: 7px; background: var(--cream); border: 1px solid #EBEBEB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wf-node-ico img { width: 22px; height: 22px; object-fit: contain; }
.wf-node-title { font-size: 13px; font-weight: 600; color: var(--black); letter-spacing: -0.01em; }
.wf-node-desc { font-size: 10.5px; color: var(--gray); line-height: 1.45; margin-top: 5px; padding-left: 35px; }
.wf-node-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 7px; border-top: 1px solid #F0F0F0; }
.wf-node-status { font-family: 'Roboto Mono', monospace; font-size: 8px; color: var(--muted); }
.wf-node-ver { font-family: 'Roboto Mono', monospace; font-size: 8px; color: var(--muted); }
.wf-node-engine { padding: 22px 20px; border-color: #CECECE; animation: engine-pulse 3s ease-in-out infinite; }
@keyframes engine-pulse { 0%,100%{box-shadow:0 1px 8px rgba(0,0,0,0.05);} 50%{box-shadow:0 4px 24px rgba(151,71,255,0.1);} }
@keyframes wf-dash { to{stroke-dashoffset:-22;} }
@keyframes wf-mob-dash-flow { from{stroke-dashoffset:0} to{stroke-dashoffset:-11} }

.wf-mob { display: none; }
.wf-mob-row { display: flex; gap: 8px; }
.wf-mob-ico { flex: 1; background: var(--white); border: 1px solid #E2E2E2; border-radius: 10px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; box-shadow: 0 1px 8px rgba(0,0,0,0.05); }
.wf-mob-ico img { width: 22px; height: 22px; object-fit: contain; }
.wf-mob-ico span { font-size: 9px; font-weight: 600; color: var(--black); letter-spacing: -0.01em; text-align: center; }
.wf-mob-svg { width: 100%; height: 50px; display: block; overflow: visible; }
.wf-mob-path { fill: none; stroke: rgba(151,71,255,0.38); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; animation: wf-mob-dash-flow 0.7s linear infinite; }
.wf-mob-engine { background: var(--white); border: 1.5px solid rgba(151,71,255,0.25); border-radius: 10px; padding: 16px 18px; animation: engine-pulse 3s ease-in-out infinite; }
.wf-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wf-brand img { width: 18px; height: 18px; border-radius: 4px; }
.wf-brand-name { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 700; color: var(--black); letter-spacing: 0.03em; }
.wf-engine-phrase { font-size: 11.5px; color: var(--gray); line-height: 1.55; margin: 6px 0 14px; }
.wf-engine-pills { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.wf-epill { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: rgba(151,71,255,0.04); border: 1px solid rgba(151,71,255,0.1); border-radius: 7px; }
.wf-epill-label { font-size: 11px; font-weight: 600; color: var(--black); display: block; }
.wf-epill-desc { font-size: 9.5px; color: var(--muted); margin-top: 2px; display: block; line-height: 1.35; font-family: "Roboto Mono", monospace; }
.wf-epill svg { flex-shrink: 0; }
.wf-llm-logos { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F0F0F0; }
.wf-node-ans { border-color: rgba(151,71,255,0.2); background: rgba(151,71,255,0.02); }
.wf-ans-head { display: flex; align-items: center; gap: 8px; }
.wf-ans-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); flex-shrink: 0; }
.wf-ans-title { font-size: 13px; font-weight: 600; color: var(--purple); }

/* ============================================================
   AGENTS SECTION (product page - rows)
   ============================================================ */
.agents-section { background: var(--white); border-bottom: 1px solid var(--div); }

.agent-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  border-bottom: 1px solid var(--div);
}

.agent-row:last-child { border-bottom: none; }

.agent-visual {
  background: var(--cream);
  border-right: 1px solid var(--div);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow: hidden;
}

.agent-visual.right { border-right: none; border-left: 1px solid var(--div); order: 2; }

.agent-visual img { max-width: 100%; max-height: 420px; object-fit: contain; display: none; }

.agent-bg {
  width: 100%;
  height: 420px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--cream);
  background-blend-mode: multiply;
}

.agent-content { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.agent-content.right { order: 1; }

.agent-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.agent-num { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--purple); letter-spacing: -0.01em; }
.agent-ico { width: 24px; height: 24px; }
.agent-ico img { width: 24px; height: 24px; object-fit: contain; }
.agent-ico-label { font-family: 'Roboto Mono', monospace; font-size: 10px; color: var(--purple); letter-spacing: 0.04em; text-transform: uppercase; }

.agent-title {
  font-family: 'Crimson Text', serif;
  font-size: clamp(32px, 3vw, 46px);
  line-height: 0.93;
  letter-spacing: -0.025em;
  color: var(--black);
  margin-bottom: 16px;
}

.agent-title em { font-style: italic; color: var(--purple); }
.agent-body { font-size: 15px; color: var(--gray); line-height: 1.7; margin-bottom: 32px; max-width: 400px; }
.agent-feats { list-style: none; border-top: 1px solid var(--div); margin-bottom: 32px; }

.agent-feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--black);
  padding: 10px 0;
  border-bottom: 1px solid var(--div);
  line-height: 1.4;
}

.agent-feats li:last-child { border-bottom: none; }
.fdot { width: 4px; height: 4px; border-radius: 50%; background: var(--purple); flex-shrink: 0; margin-top: 5px; }

.agent-stat { display: flex; align-items: baseline; gap: 10px; }
.agent-stat-n { font-family: 'Crimson Text', serif; font-size: 52px; line-height: 1; letter-spacing: -0.04em; color: var(--black); }
.agent-stat-n em { font-style: normal; color: var(--purple); font-size: 0.6em; }
.agent-stat-l { font-family: 'Roboto Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: -0.01em; line-height: 1.5; max-width: 160px; }

/* ============================================================
   LIVE DEMO SECTION
   ============================================================ */
.live-section { background: var(--dark); padding: 100px 56px; border-bottom: 1px solid rgba(255,255,255,0.04); }

.live-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 64px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.live-eyebrow { font-family: 'Roboto Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.2); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 18px; }

.live-title {
  font-family: 'Crimson Text', serif;
  font-size: clamp(40px, 4vw, 58px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: 24px;
}

.live-title em { font-style: italic; color: var(--orange); }
.live-sub { font-size: 15px; color: rgba(255,255,255,0.3); line-height: 1.75; max-width: 560px; }

.live-frame {
  background: #111114;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
}

.live-chrome {
  height: 38px;
  background: #1A1A1E;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 6px;
}

.l-dot { width: 10px; height: 10px; border-radius: 50%; }
.l-dot:nth-child(1) { background: #FF5F57; }
.l-dot:nth-child(2) { background: #FEBC2E; }
.l-dot:nth-child(3) { background: #28C840; }
.l-bar { margin-left: 12px; flex: 1; max-width: 200px; height: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); border-radius: 4px; display: flex; align-items: center; padding: 0 10px; font-family: 'Roboto Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.2); }

.live-ui { display: grid; grid-template-columns: 160px 1fr 380px; height: 620px; font-family: 'DM Sans', sans-serif; overflow: hidden; }

/* SIDEBAR */
.l-sidebar { background: #FFFFFF; border-right: 1px solid #E3E2F0; padding: 14px 12px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.l-sidebar-header { display: flex; align-items: center; gap: 8px; padding: 2px 4px 18px; }
.l-sidebar-name { font-size: 14px; font-weight: 600; color: #1C1A37; letter-spacing: -0.01em; }
.l-nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 6px; font-size: 11.5px; color: #1C1A37; cursor: pointer; overflow: hidden; }
.l-nav-item.active { background: rgba(28,26,55,0.06); }
.l-nav-item svg { opacity: 0.45; flex-shrink: 0; }
.l-nav-item.active svg { opacity: 0.85; }
.l-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-divider { height: 1px; background: #E3E2F0; margin: 8px 0; }
.l-kb-label { font-size: 9px; color: #9ca3af; padding: 2px 6px 5px; font-family: 'Roboto Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.l-kb-stat { font-family: 'Roboto Mono', monospace; font-size: 9px; color: var(--purple); padding: 3px 7px; background: rgba(151,71,255,0.08); border-radius: 4px; margin: 0 0 8px; display: inline-flex; }
.l-file { display: flex; align-items: center; gap: 6px; padding: 4px 5px; border-radius: 4px; font-size: 9.5px; color: #6B7280; white-space: nowrap; overflow: hidden; }
.l-file-dot { width: 5px; height: 5px; border-radius: 1px; flex-shrink: 0; }
.l-agent-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px 0 0; }
.l-agent-pill { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 9999px; background: #1C1A37; color: white; font-size: 9.5px; font-weight: 500; cursor: pointer; border: 1.5px solid transparent; transition: background 0.15s; }
.l-agent-pill.active { background: var(--purple); border-color: var(--purple); }
.l-user-row { margin-top: auto; display: flex; align-items: center; gap: 8px; background: hsl(240,62%,99%); border-radius: 8px; padding: 8px 6px; }
.l-user-email { font-size: 9.5px; color: #1C1A37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* MAIN */
.l-main { display: flex; flex-direction: column; background: white; overflow: hidden; }
.l-thread { flex: 1; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.l-user-msg { align-self: flex-end; background: hsl(240,100%,98%); border-radius: 8px; padding: 9px 13px; font-size: 11px; color: #1C1A37; max-width: 82%; line-height: 1.5; }
.l-ai-msg { display: flex; gap: 9px; }
.l-ai-avatar { width: 22px; height: 22px; border-radius: 6px; background: #1C1A37; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.l-ai-label { font-size: 10px; font-weight: 700; color: #1C1A37; margin-bottom: 6px; }
.l-ai-text { font-size: 11px; color: #1C1A37; line-height: 1.65; }
.l-highlight { background: rgba(151,71,255,0.15); border-radius: 2px; padding: 0 2px; }

/* SCAN PHASE */
.l-scan-wrap { padding: 2px 0 4px; }
.l-scan-bar { height: 2px; background: rgba(151,71,255,0.12); border-radius: 2px; overflow: hidden; margin-bottom: 7px; }
.l-scan-fill { height: 100%; background: var(--purple); border-radius: 2px; width: 0%; }
.l-scan-label { font-family: 'Roboto Mono', monospace; font-size: 9px; color: #9ca3af; }

/* SOURCES */
.l-sources { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.l-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; background: hsl(240,62%,96%); border: 1px solid #E3E2F0; border-radius: 9999px; font-size: 9.5px; color: #1C1A37; }
.l-chip-dot { width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; }

/* THINKING */
.l-thinking { display: flex; gap: 3px; align-items: center; }
.l-thinking span { width: 5px; height: 5px; border-radius: 50%; background: #9ca3af; animation: think 1.2s ease-in-out infinite; }
.l-thinking span:nth-child(2) { animation-delay: 0.2s; }
.l-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes think { 0%,100%{opacity:0.25;transform:scale(0.8);} 50%{opacity:1;transform:scale(1);} }

/* INPUT */
.l-input-area { padding: 8px 12px 12px; }
.l-input { background: white; border: 1px solid #E3E2F0; border-radius: 20px; padding: 11px 14px 9px; box-shadow: 0 2px 6px rgba(26,28,56,0.08); }
.l-input-top { display: flex; align-items: center; gap: 8px; }
.l-placeholder { flex: 1; font-size: 11px; color: #9ca3af; }
.l-send { width: 30px; height: 30px; border-radius: 50%; background: #1C1A37; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.12s, background 0.15s; }
.l-send.sending { transform: scale(0.8); background: #9747FF; }

/* PILLS */
.l-pills-bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px 4px; border-top: 1px solid #E3E2F0; background: hsl(240,62%,99%); }
.l-pill-label { font-size: 9px; color: #9ca3af; font-weight: 500; flex-shrink: 0; }
.l-pill { padding: 4px 10px; background: white; border: 1px solid #E3E2F0; border-radius: 9999px; font-size: 9.5px; color: #1C1A37; cursor: pointer; white-space: nowrap; transition: background 0.15s; user-select: none; }
.l-pill:hover { background: hsl(240,62%,94%); }
.l-pill.active { background: #1C1A37; color: white; border-color: #1C1A37; }

/* OUTPUT PANEL */
.l-output { background: #F0EFEC; display: flex; flex-direction: column; overflow: hidden; }
.l-output-bar { height: 36px; background: #E8E6E2; border-bottom: 1px solid #D9D7D3; display: flex; align-items: center; padding: 0 14px; gap: 10px; flex-shrink: 0; }
.l-output-filename { font-family: 'Roboto Mono', monospace; font-size: 9.5px; color: #5A5A5A; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-output-status { font-family: 'Roboto Mono', monospace; font-size: 9px; color: #9ca3af; flex-shrink: 0; white-space: nowrap; transition: color 0.3s; }
.l-output-status.done { color: #16a34a; }

/* WORD DOCUMENT */
.l-doc-scroll { flex: 1; overflow: hidden; padding: 14px 20px; display: flex; justify-content: flex-start; align-items: flex-start; gap: 16px; }
.l-doc-page { background: white; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 8px 28px rgba(0,0,0,0.09); padding: 14px 16px; width: 100%; aspect-ratio: 210/297; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; flex-shrink: 0; }
.l-doc-ref { font-family: 'Roboto Mono', monospace; font-size: 8px; color: #9ca3af; letter-spacing: 0.05em; margin-bottom: 4px; }
.l-doc-main-title { font-size: 11px; font-weight: 700; color: #1C1A37; line-height: 1.3; margin-bottom: 3px; }
.l-doc-subtitle { font-size: 9px; color: #6B7280; margin-bottom: 11px; padding-bottom: 10px; border-bottom: 1px solid #ECECEC; }
.l-doc-section { margin-bottom: 9px; opacity: 0; transition: opacity 0.3s; }
.l-doc-section.in { opacity: 1; }
.l-doc-section-title { font-size: 9.5px; font-weight: 700; color: #1C1A37; margin-bottom: 4px; }
.l-doc-section-body { font-size: 9px; color: #374151; line-height: 1.65; }
.l-doc-divider { height: 1px; background: #ECECEC; margin: 8px 0; flex-shrink: 0; }
.l-doc-list { display: flex; flex-direction: column; gap: 3px; }
.l-doc-list-item { display: flex; gap: 6px; font-size: 9px; color: #374151; opacity: 0; transition: opacity 0.25s; }
.l-doc-list-item.in { opacity: 1; }
.l-doc-arrow { color: var(--purple); flex-shrink: 0; }
.l-doc-footer { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid #ECECEC; margin-top: auto; flex-shrink: 0; }
.l-doc-footer-text { font-family: 'Roboto Mono', monospace; font-size: 8px; color: #9ca3af; }
.l-doc-footer-badge { font-family: 'Roboto Mono', monospace; font-size: 8px; padding: 2px 6px; border-radius: 3px; background: rgba(34,197,94,0.12); color: #16a34a; opacity: 0; transition: opacity 0.4s; }
.l-doc-footer-badge.in { opacity: 1; }

/* CHAT CTAs */
.l-cta-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.l-cta-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; font-size: 9px; font-weight: 500; border: 1px solid #E3E2F0; background: white; color: #374151; cursor: pointer; white-space: nowrap; opacity: 0; transition: opacity 0.25s, background 0.15s; text-decoration: none; }
.l-cta-btn.in { opacity: 1; }
.l-cta-btn:hover { background: #F5F4FF; border-color: rgba(151,71,255,0.2); }

/* cursor blink */
.l-cursor { display: inline-block; width: 1px; height: 9px; background: #1C1A37; margin-left: 1px; vertical-align: middle; animation: blink 0.8s step-end infinite; }

/* SOURCE CARDS */
.l-src-cards { display: flex; flex-direction: column; gap: 9px; width: 300px; }
.l-src-card { background: white; border-radius: 5px; border: 1px solid #E3E2F0; padding: 10px 12px 12px; position: relative; overflow: hidden; opacity: 0; transform: translateY(7px); transition: opacity 0.45s, transform 0.45s; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.l-src-card.in { opacity: 1; transform: translateY(0); }
.l-src-card-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.l-src-card-dot { width: 8px; height: 8px; border-radius: 1.5px; flex-shrink: 0; }
.l-src-card-name { font-family: 'Roboto Mono', monospace; font-size: 9px; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-src-card-lines { display: flex; flex-direction: column; gap: 4px; }
.l-src-card-line { height: 3px; background: #EDEDEE; border-radius: 2px; }
.l-src-card-line.s { width: 58%; }
.l-src-card-line.m { width: 82%; }
.l-src-card-scan { position: absolute; left: 0; right: 0; height: 28px; background: linear-gradient(to bottom, transparent, rgba(151,71,255,0.13), transparent); pointer-events: none; transform: translateY(-28px); }
@keyframes card-scan { 0%{transform:translateY(-28px);} 100%{transform:translateY(calc(100% + 28px));} }
.l-src-card.scanning .l-src-card-scan { animation: card-scan 1.8s ease-in-out forwards; }

/* Mobile Live UI */
.live-mob { display: none; }
.lm-frame { background: #111114; border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; overflow: hidden; aspect-ratio: 9/16; max-height: 620px; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 60px rgba(0,0,0,0.5); }
.lm-chrome { height: 48px; background: #1A1A1E; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; padding: 0 16px; gap: 10px; flex-shrink: 0; }
.lm-app-name { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.04em; color: rgba(255,255,255,0.9); flex: 1; }
.lm-sep { opacity: 0.3; margin: 0 4px; }
.lm-st { font-family: 'Roboto Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.2); letter-spacing: 0.04em; transition: color 0.3s; }
.lm-st.run { color: var(--purple); }
.lm-st.ok { color: #22C55E; }
.lm-body { flex: 1; background: white; display: flex; flex-direction: column; overflow: hidden; }
.lm-thread { flex: 1; padding: 14px 13px 8px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; scroll-behavior: smooth; }
.lm-user-msg { align-self: flex-end; background: hsl(240,100%,98%); border-radius: 10px 10px 2px 10px; padding: 9px 12px; font-size: 11px; color: #1C1A37; max-width: 84%; line-height: 1.5; }
.lm-ai { display: flex; gap: 8px; }
.lm-av { width: 20px; height: 20px; border-radius: 5px; background: #1C1A37; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.lm-ai-body { flex: 1; }
.lm-ai-lbl { font-size: 9.5px; font-weight: 700; color: #1C1A37; margin-bottom: 5px; }
.lm-ai-txt { font-size: 10.5px; color: #374151; line-height: 1.6; }
.lm-bar-w { height: 3px; background: #E3E2F0; border-radius: 3px; overflow: hidden; margin: 7px 0 3px; }
.lm-bar { height: 100%; background: var(--purple); border-radius: 3px; width: 0; transition: width 2.5s ease; }
.lm-ctr { font-family: 'Roboto Mono', monospace; font-size: 8.5px; color: #9ca3af; margin-top: 2px; }
.lm-files { display: flex; flex-direction: column; gap: 5px; margin: 5px 0; }
.lm-file { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #374151; }
.lm-ft { padding: 1px 5px; border-radius: 3px; font-family: 'Roboto Mono', monospace; font-size: 8px; font-weight: 600; color: white; flex-shrink: 0; }
.lm-ft.docx { background: #2B579A; }
.lm-ft.pptx { background: #C43E1C; }
.lm-ft.pdf { background: #E8391C; }
.lm-ft.xlsx { background: #1D6F42; }
.lm-ck { color: #22C55E; margin-left: auto; font-size: 10px; }
.lm-spin { margin-left: auto; color: var(--purple); animation: lm-sp 1s linear infinite; display: inline-block; }
@keyframes lm-sp { to{transform:rotate(360deg);} }
.lm-secs { display: flex; flex-direction: column; gap: 5px; margin: 5px 0; }
.lm-sec { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #374151; }
.lm-sec.cur { color: var(--purple); font-weight: 500; }
.lm-sec.dim { color: #9ca3af; }
.lm-result-card { background: hsl(240,62%,98%); border: 1px solid #E3E2F0; border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.lm-result-ico { width: 26px; height: 26px; border-radius: 5px; background: #2B579A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lm-result-name { font-size: 11px; font-weight: 600; color: #1C1A37; letter-spacing: -0.01em; }
.lm-result-meta { font-family: 'Roboto Mono', monospace; font-size: 8px; color: #9ca3af; margin-top: 2px; }
.lm-ctas { padding: 6px 13px 10px; display: flex; gap: 6px; flex-shrink: 0; }
.lm-cta { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500; border: 1px solid #E3E2F0; background: white; color: #374151; cursor: default; white-space: nowrap; }
.lm-cta-dl { flex: 1 1 100%; justify-content: center; }
.lm-cta-od { flex: 1; }
.lm-cta-outlook { flex: 1; }
.lm-cta-teams { flex: 1; }
.lm-input-bar { height: 50px; background: white; border-top: 1px solid #E3E2F0; display: flex; align-items: center; padding: 0 12px; gap: 9px; flex-shrink: 0; }
.lm-input-field { flex: 1; background: hsl(240,62%,98%); border: 1px solid #E3E2F0; border-radius: 20px; height: 32px; display: flex; align-items: center; padding: 0 13px; font-size: 11px; color: #9ca3af; font-family: 'DM Sans', sans-serif; }
.lm-send-btn { width: 28px; height: 28px; border-radius: 50%; background: #1C1A37; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lm-phase { display: none; flex-direction: column; gap: 11px; }
.lm-phase.act { display: flex; }

/* ============================================================
   MULTIMODELES SECTION
   ============================================================ */
.models-section { background: var(--dark); padding: 100px 56px; border-bottom: 1px solid rgba(255,255,255,0.04); }

.models-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 72px; }
.mo-eyebrow { font-family: 'Roboto Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.2); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 18px; }
.mo-title { font-family: 'Crimson Text', serif; font-size: clamp(40px, 4vw, 58px); line-height: 0.92; letter-spacing: -0.025em; color: var(--white); }
.mo-title em { font-style: italic; color: rgba(255,255,255,0.3); }
.mo-sub { font-size: 15px; color: rgba(255,255,255,0.3); line-height: 1.75; align-self: end; max-width: 400px; }

.models-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; overflow: hidden; }
.model-card { background: var(--dark); padding: 36px 32px; transition: background 0.2s; cursor: default; }
.model-card:hover { background: #0e0e12; }
.model-logo { width: 40px; height: 40px; margin-bottom: 20px; flex-shrink: 0; }
.model-logo img { width: 40px; height: 40px; object-fit: contain; }
.model-name { font-family: 'Crimson Text', serif; font-size: 24px; letter-spacing: -0.02em; color: var(--white); margin-bottom: 6px; }
.model-maker { font-family: 'Roboto Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.2); letter-spacing: -0.01em; margin-bottom: 16px; }
.model-use { font-size: 13px; color: rgba(255,255,255,0.35); line-height: 1.6; }
.models-note { margin-top: 32px; font-family: 'Roboto Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.15); text-align: center; letter-spacing: -0.01em; }

/* ============================================================
   SECURITE SECTION (product page - cream background)
   ============================================================ */
.security-section { background: var(--cream); padding: 100px 56px; border-bottom: 1px solid var(--div); }

.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 72px; }
.se-eyebrow { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 18px; }
.se-title { font-family: 'Crimson Text', serif; font-size: clamp(40px, 4vw, 58px); line-height: 0.92; letter-spacing: -0.025em; color: var(--black); }
.se-title em { font-style: italic; color: var(--black); }
.se-sub { font-size: 15px; color: var(--gray); line-height: 1.75; align-self: end; max-width: 400px; }

.sec-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--div); border: 1px solid var(--div); border-radius: 14px; overflow: hidden; }
.sec-card { background: var(--white); padding: 44px 40px; }
.sec-val { font-family: 'Crimson Text', serif; font-size: 52px; line-height: 1; letter-spacing: -0.04em; color: var(--black); margin-bottom: 12px; }
.sec-val em { font-style: italic; color: var(--muted); }
.sec-lbl { font-size: 15px; font-weight: 600; color: var(--black); letter-spacing: -0.02em; margin-bottom: 8px; }
.sec-body { font-size: 13px; color: var(--gray); line-height: 1.65; }

/* ============================================================
   COMPARATIF TABLE
   ============================================================ */
.comp-section { background: var(--white); padding: 100px 56px; border-bottom: 1px solid var(--div); }
.comp-head { text-align: center; max-width: 640px; margin: 0 auto 72px; }
.comp-eyebrow { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 14px; }
.comp-title { font-family: 'Crimson Text', serif; font-size: clamp(36px, 3.5vw, 52px); line-height: 0.94; letter-spacing: -0.025em; color: var(--black); }
.comp-title em { font-style: italic; color: var(--purple); }
.comp-wrap { overflow-x: auto; }
.comp-table { display: grid; grid-template-columns: 1fr repeat(3,200px); border-right: 1px solid var(--div); border-bottom: 1px solid var(--div); }
.comp-header { display: contents; }
.comp-cell { padding: 18px 20px; display: flex; align-items: center; border-top: 1px solid var(--div); border-left: 1px solid var(--div); }
.comp-cell.head { background: var(--cream); font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; justify-content: center; text-align: center; }
.comp-cell.head.elqano { background: rgba(151,71,255,0.06); color: var(--purple); }
.comp-cell.feature { font-size: 14px; color: var(--black); font-weight: 500; background: var(--cream); flex-direction: column; align-items: flex-start; justify-content: center; border-left: 1px solid var(--div); }
.comp-cell.feature .feat-sub { font-size: 12px; color: var(--muted); font-weight: 400; display: block; margin-top: 5px; line-height: 1.4; }
.comp-cell.check { justify-content: center; }
.comp-cell.check.elqano { background: rgba(151,71,255,0.03); }
.comp-yes { color: var(--purple); }
.comp-partial { color: var(--muted); }
.comp-no { color: var(--div); }

/* ============================================================
   CUSTOM AGENTS SECTION
   ============================================================ */
.custom-section { background: var(--dark); padding: 100px 56px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.custom-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 72px; }
.cu-eyebrow { font-family: 'Roboto Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.2); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 18px; }
.cu-title { font-family: 'Crimson Text', serif; font-size: clamp(40px, 4vw, 58px); line-height: 0.92; letter-spacing: -0.025em; color: var(--white); }
.cu-title em { font-style: italic; color: var(--purple); }
.cu-sub { font-size: 15px; color: rgba(255,255,255,0.3); line-height: 1.75; align-self: end; max-width: 400px; }
.custom-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; overflow: hidden; margin-bottom: 40px; }
.custom-card { background: var(--dark); padding: 36px 32px; transition: background 0.2s; cursor: default; }
.custom-card:hover { background: #0e0e12; }
.custom-card-ico { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); margin-bottom: 20px; }
.custom-card-ico-svg { width: 18px; height: 18px; }
.custom-card-name { font-family: 'Crimson Text', serif; font-size: 20px; letter-spacing: -0.02em; color: var(--white); margin-bottom: 8px; line-height: 1.1; }
.custom-card-desc { font-size: 13px; color: rgba(255,255,255,0.3); line-height: 1.65; }
.custom-card.add { background: transparent; border: 1.5px dashed rgba(151,71,255,0.2); border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.custom-card.add:hover { border-color: rgba(151,71,255,0.5); background: rgba(151,71,255,0.04); }
.custom-card-add-icon { width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed rgba(151,71,255,0.3); display: flex; align-items: center; justify-content: center; color: rgba(151,71,255,0.5); }
.custom-card-add-text { font-family: 'Roboto Mono', monospace; font-size: 10px; color: rgba(151,71,255,0.5); letter-spacing: 0.04em; text-transform: uppercase; }
.custom-cta { display: flex; align-items: center; gap: 16px; }
.custom-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: rgba(151,71,255,0.12); border: 1px solid rgba(151,71,255,0.25); color: var(--purple); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; border-radius: 7px; text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.custom-cta-btn:hover { background: rgba(151,71,255,0.2); border-color: rgba(151,71,255,0.5); }
.custom-cta-note { font-size: 13px; color: rgba(255,255,255,0.2); }

/* ============================================================
   CTA SECTION - PRODUCT (dark variant)
   ============================================================ */
.cta { background: var(--dark); display: grid; grid-template-columns: 1fr 400px; min-height: 440px; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.04); }
.cta-l { padding: 96px 72px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255,255,255,0.05); }
.ct-eyebrow { font-family: 'Roboto Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.18); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 24px; }
.ct-title { font-family: 'Crimson Text', serif; font-size: clamp(52px, 5.5vw, 82px); line-height: 1.05; letter-spacing: -0.025em; color: var(--white); }
.ct-title em { font-style: italic; color: var(--orange); }
.cta-r { padding: 72px 52px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.ct-sub { font-size: 15px; color: rgba(255,255,255,0.35); line-height: 1.7; }
.btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; background: var(--white); color: var(--black); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; border-radius: 7px; text-decoration: none; transition: transform 0.15s, box-shadow 0.2s; width: fit-content; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,0.4); }
.ct-proof { font-family: 'Roboto Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.15); letter-spacing: -0.01em; line-height: 1.7; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .prod-hero, .arch-section, .models-section, .security-section { padding-left: 32px; padding-right: 32px; }
  .ph-bottom, .arch-head, .models-head, .sec-head { grid-template-columns: 1fr; gap: 32px; }
  .ph-left { padding: 40px 0 40px 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .ph-right { padding: 40px 0 48px 0; }
  .agent-row { grid-template-columns: 1fr; }
  .agent-visual { min-height: 300px; border-right: none; border-bottom: 1px solid var(--div); }
  .agent-visual.right { order: 0; border-left: none; }
  .agent-content { padding: 40px 32px; }
  .agent-content.right { order: 0; }
  .models-grid { grid-template-columns: 1fr 1fr; }
  .sec-grid { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .cta-l { padding: 72px 32px 40px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .cta-r { padding: 40px 32px 72px; }
}

@media (max-width: 768px) {
  .models-grid { grid-template-columns: 1fr; }
  .arch-pillars { grid-template-columns: 1fr; }
  .ph-agents { grid-template-columns: 1fr; }

  /* Hero produit */
  .prod-hero { padding: 88px 20px 0; }
  .ph-title { font-size: clamp(44px, 10.5vw, 80px); }
  .ph-sub { font-size: 15px; }
  .ph-cta { flex-direction: column; gap: 12px; }
  .ph-btn-primary, .ph-btn-ghost { width: 100%; justify-content: center; }

  /* Architecture */
  .arch-section { padding: 60px 20px; }
  .arch-title { font-size: clamp(32px, 8vw, 48px); line-height: 1.02; }
  .arch-title br { display: none; }
  .wf-diagram { display: none; }
  .wf-mob { display: block; }

  /* Custom agents */
  .custom-section { padding: 60px 20px; }
  .custom-head { grid-template-columns: 1fr !important; gap: 24px; }
  .custom-grid { grid-template-columns: 1fr 1fr; }

  /* Live section */
  .live-section { padding: 60px 20px; }
  .live-head { grid-template-columns: 1fr !important; gap: 24px; margin-bottom: 32px; }
  .live-frame { display: none !important; }
  .live-mob { display: flex; justify-content: center; margin: 0 -20px; }
  .lm-frame { width: calc(100% - 12px); max-height: 75vh; }
  .lm-ctas { flex-wrap: wrap; }

  /* Agents rows */
  .agents-section { background: var(--cream); padding: 20px 20px 40px; display: flex; flex-direction: column; gap: 12px; }
  .agents-section .agent-row { min-height: 0; grid-template-columns: 1fr; border: 1px solid var(--div) !important; border-radius: 12px; overflow: hidden; background: var(--white); }
  .agents-section .agent-visual { display: none; }
  .agents-section .agent-content { padding: 20px 20px 24px; }
  .agent-eyebrow { flex-wrap: wrap; gap: 8px 8px; margin-bottom: 14px; }
  .agent-ico { order: -1; flex: 0 0 100%; width: 36px; height: 36px; }
  .agent-ico img { width: 36px; height: 36px; object-fit: contain; }
  .agent-title { font-size: clamp(26px, 7.5vw, 36px); line-height: 1.02; margin-bottom: 10px; }
  .agent-title br { display: none; }
  .agent-feats li { padding: 7px 0; font-size: 12px; }
  .agent-feats li:last-child { border-bottom: none; }

  /* Models */
  .models-section { padding: 60px 20px; }
  .models-head { grid-template-columns: 1fr; gap: 24px; }

  /* Security */
  .security-section { padding: 60px 20px; }

  /* Versus */
  .versus-section { padding: 60px 20px; }
  .versus-head { margin-bottom: 40px; }
  .versus-grid { grid-template-columns: 1fr; }
  .versus-divider-line { height: 1px; width: auto; }
  .versus-col { padding: 40px 0; }
  .versus-col:first-child { padding-top: 0; }
  .versus-list li { min-height: 0; padding: 14px 0; }

  /* Video */
  .video-section { padding: 60px 20px; }
  .video-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 36px; }

  /* Comparatif */
  .comp-section { padding: 60px 20px; }
  .comp-wrap { overflow: hidden; border: 1px solid var(--div); border-radius: 10px; }
  .comp-table { grid-template-columns: 1fr 68px 68px; border-right: none; border-bottom: none; }
  .comp-table .comp-cell:nth-child(4n+3) { display: none; }
  .comp-table .comp-cell:nth-child(-n+4) { border-top: none; }
  .comp-table .comp-cell:nth-child(4n+1) { border-left: none; }
  .comp-cell { padding: 10px 12px; }
  .comp-cell.head { font-size: 9px; padding: 10px 8px; text-align: center; justify-content: center; word-break: break-word; }
  .comp-cell.feature { font-size: 11px; }
  .comp-cell.feature .feat-sub { font-size: 9.5px; }
  .comp-cell.check { justify-content: center; }
  .custom-cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .custom-cta-btn { width: 100%; justify-content: center; }
  .custom-cta-note { text-align: center; }

  .cta-l { padding: 60px 20px 32px !important; }
  .cta-r { padding: 32px 20px 60px !important; }
}

@media (max-width: 480px) {
  .ph-title { font-size: clamp(38px, 10vw, 60px); }
  .custom-grid { grid-template-columns: 1fr; }
  .arch-section { padding: 48px 16px; }
  .versus-section { padding: 48px 16px; }
  .versus-col { padding: 32px 0; }
  .versus-col:first-child { padding-top: 0; }
}

/* Connecteurs : CSS partagee dans main.css (section "SHARED INTEGRATIONS
   SECTION"), utilisee a l'identique par Home et Product - rien a dupliquer ici. */