/* SXP.Codec — convertisseur XML / JSON / Protobuf. Interface claire, zones
   de code sombres, responsive (3 colonnes -> pile sur mobile). */

.cdc-page { max-width: 1180px; margin: 1rem auto 4rem; padding: 0 1rem; }
.cdc-app { margin: 0 auto; }
/* Encart de renvoi vers le billet de blog */
.cdc-more { display:flex; gap:16px; align-items:flex-start; text-decoration:none; margin-top:26px;
  background:linear-gradient(180deg,#f8fafc,#fff); border:1px solid #e2e8f0; border-left:4px solid #4f46e5;
  border-radius:12px; padding:18px 20px; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:box-shadow .15s, transform .05s; }
.cdc-more:hover { box-shadow:0 4px 14px rgba(79,70,229,.12); }
.cdc-more-ic { font-size:1.5rem; line-height:1.2; flex:0 0 auto; }
.cdc-more-txt { display:flex; flex-direction:column; gap:5px; }
.cdc-more-txt b { font-size:.98rem; color:#0f172a; }
.cdc-more-txt { font-size:.9rem; line-height:1.6; color:#475569; }
.cdc-more-link { font-weight:700; color:#4f46e5; font-size:.9rem; margin-top:2px; }

.cdc-doc { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:22px 24px; margin-top:26px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cdc-doc h2 { margin:0 0 4px; font-size:1.15rem; color:#0f172a; }

/* Bandeau de preuve (badges) — repris du langage visuel des SDK */
.cdc-proof { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:20px 16px 6px; }
.cdc-badge { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:#0f172a;
  background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:7px 14px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cdc-badge svg { width:14px; height:14px; color:#16a34a; flex:0 0 14px; }

/* Carte schema .proto */
.cdc-schema { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px 18px; margin:8px 0 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cdc-schema-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.cdc-schema-head h3 { margin:0; font-size:.95rem; color:#0f172a; }
.cdc-schema-head .cdc-hint { font-size:.8rem; color:#64748b; }
.cdc-schema textarea { width:100%; box-sizing:border-box; min-height:150px; resize:vertical;
  background:#0a0f1e; color:#cbd5e1; border:1px solid #1e293b; border-radius:8px; padding:12px 14px;
  font:.82rem/1.6 'Courier New', monospace; }
.cdc-schema-foot { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.cdc-schema-foot label { font-size:.85rem; color:#334155; font-weight:600; }
.cdc-select { font:.85rem/1.4 inherit; padding:6px 10px; border:1px solid #cbd5e1; border-radius:7px;
  background:#fff; color:#0f172a; min-width:180px; }
.cdc-status { font-size:.8rem; margin-left:auto; }
.cdc-status.ok  { color:#16a34a; }
.cdc-status.err { color:#dc2626; }

/* Grille des 3 formats */
.cdc-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:stretch; }
@media (max-width: 900px){ .cdc-grid { grid-template-columns:1fr; } }

.cdc-panel { display:flex; flex-direction:column; background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cdc-panel.is-pivot { border-color:#c7d2fe; box-shadow:0 0 0 1px #c7d2fe, 0 2px 8px rgba(79,70,229,.08); }
.cdc-phead { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; border-bottom:1px solid #eef2f7; background:#f8fafc; }
.cdc-phead .cdc-name { font-size:.86rem; font-weight:700; color:#0f172a; display:flex; align-items:center; gap:7px; }
.cdc-phead .cdc-name small { font-weight:600; color:#6366f1; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; }
.cdc-size { font:600 .72rem/1 ui-monospace, monospace; color:#475569; background:#eef2f7; border-radius:999px; padding:4px 9px; white-space:nowrap; }
.cdc-panel textarea { flex:1; width:100%; box-sizing:border-box; min-height:220px; resize:vertical; border:0;
  background:#0a0f1e; color:#e2e8f0; padding:12px 14px; font:.8rem/1.55 'Courier New', monospace; white-space:pre; overflow:auto; }
.cdc-panel textarea::placeholder { color:#475569; }
.cdc-actions { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; border-top:1px solid #eef2f7; background:#fff; }

.cdc-btn { font:600 .8rem/1 inherit; cursor:pointer; border:1px solid #cbd5e1; background:#fff; color:#0f172a;
  border-radius:8px; padding:8px 12px; transition:background .12s, border-color .12s, transform .05s; }
.cdc-btn:hover { background:#f1f5f9; border-color:#94a3b8; }
.cdc-btn:active { transform:translateY(1px); }
.cdc-btn--primary { background:#4f46e5; border-color:#4f46e5; color:#fff; }
.cdc-btn--primary:hover { background:#4338ca; border-color:#4338ca; }

/* Barre de comparaison des tailles */
.cdc-compare { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px 18px; margin:18px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cdc-compare h3 { margin:0 0 12px; font-size:.9rem; color:#0f172a; }
.cdc-bar { display:grid; grid-template-columns:92px 1fr 84px; align-items:center; gap:12px; margin:8px 0; }
.cdc-bar .cdc-bar-label { font-size:.82rem; font-weight:600; color:#334155; }
.cdc-bar .cdc-bar-track { background:#f1f5f9; border-radius:6px; height:20px; overflow:hidden; }
.cdc-bar .cdc-bar-fill { height:100%; border-radius:6px; transition:width .35s ease; }
.cdc-bar .cdc-bar-val { font:600 .8rem/1 ui-monospace, monospace; color:#475569; text-align:right; }
.cdc-fill-xml  { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.cdc-fill-json { background:linear-gradient(90deg,#6366f1,#818cf8); }
.cdc-fill-bin  { background:linear-gradient(90deg,#16a34a,#22c55e); }
.cdc-compare-note { margin:10px 0 0; font-size:.82rem; color:#64748b; }
.cdc-compare-note b { color:#16a34a; }

/* Inspecteur du wire format */
.cdc-inspect { background:#0a0f1e; border:1px solid #1e293b; border-radius:12px; padding:16px 18px; margin:18px 0; }
.cdc-inspect h3 { margin:0 0 4px; font-size:.9rem; color:#f1f5f9; }
.cdc-inspect p { margin:0 0 12px; font-size:.8rem; color:#94a3b8; line-height:1.5; }
.cdc-wire { width:100%; border-collapse:collapse; font:.8rem/1.5 ui-monospace, monospace; color:#cbd5e1; }
.cdc-wire th { text-align:left; color:#7dd3fc; font-weight:600; padding:6px 10px; border-bottom:1px solid #1e293b; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.cdc-wire td { padding:6px 10px; border-bottom:1px solid #131c30; }
.cdc-wire .cdc-w-field { color:#fde68a; font-weight:700; }
.cdc-wire .cdc-w-type  { color:#c084fc; }
.cdc-wire tr:last-child td { border-bottom:0; }
.cdc-wire-empty { color:#64748b; font-style:italic; }

/* Message global (erreurs / infos) */
.cdc-msg { min-height:22px; margin:6px 2px 0; font-size:.84rem; }
.cdc-msg.err { color:#dc2626; }
.cdc-msg.ok  { color:#16a34a; }

/* Section explicative sous l'appli */
.cdc-lead { font-size:.95rem; line-height:1.75; color:#334155; }
.cdc-lead p { margin:0 0 14px; }
.cdc-sec-intro { color:#475569; font-size:.9rem; line-height:1.6; margin:6px 0 18px; max-width:74ch; }
.cdc-code { background:#0a0f1e; border:1px solid #1e293b; border-radius:10px; padding:16px 18px; margin:0 0 16px;
  color:#cbd5e1; font-size:.84rem; line-height:1.7; overflow-x:auto; white-space:pre; font-family:'Courier New', monospace; }
.cdc-code .k{color:#c084fc}.cdc-code .s{color:#86efac}.cdc-code .f{color:#7dd3fc}.cdc-code .n{color:#fdba74}.cdc-code .c{color:#64748b}