:root{
  --bg:#081a35;
  --panel:#ffffff;
  --panel-soft:rgba(255,255,255,.78);
  --line:#d9e6ff;
  --text:#0e1a2b;
  --muted:#60708b;
  --blue:#0f3d87;
  --blue-2:#1d8fe1;
  --blue-3:#eaf3ff;
  --shadow:0 18px 50px rgba(8,26,53,.12);
  --radius:22px;
}
*{box-sizing:border-box}
html,body,#root{min-height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(29,143,225,.25), transparent 28%),
    radial-gradient(circle at top right, rgba(15,61,135,.18), transparent 24%),
    linear-gradient(180deg,#eef5ff 0%,#f6f9ff 46%,#edf4ff 100%);
}
.app-shell{
  position:relative;
  max-width:1600px;
  margin:0 auto;
  padding:24px;
}
.ambient{
  position:fixed;
  width:380px;height:380px;border-radius:50%;
  filter:blur(80px);pointer-events:none;opacity:.35;z-index:0;
}
.ambient-1{top:-120px;left:-90px;background:#84bbff}
.ambient-2{right:-120px;top:180px;background:#bfdfff}
.hero,.workspace{position:relative;z-index:1}
.hero{
  background:linear-gradient(135deg, rgba(8,26,53,.96) 0%, rgba(15,61,135,.96) 42%, rgba(29,143,225,.9) 100%);
  color:white;
  border-radius:30px;
  padding:28px;
  box-shadow:0 20px 70px rgba(8,26,53,.25);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
.hero-brand{
  display:flex;align-items:center;gap:18px;margin-bottom:24px;
}
.hero-logo{
  width:96px;height:96px;object-fit:contain;padding:8px;border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;opacity:.78;margin-bottom:8px
}
.hero h1{margin:0;font-size:34px;line-height:1.05}
.hero p{margin:8px 0 0;max-width:850px;color:rgba(255,255,255,.82)}
.hero-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:16px;margin-top:18px
}
.hero-card{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;padding:18px;
  backdrop-filter: blur(10px);
}
.hero-card-wide{display:flex;flex-direction:column;justify-content:space-between}
.field-label{
  display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin-bottom:10px;opacity:.88
}
.field-help{font-size:12px;color:rgba(255,255,255,.72);margin-top:8px}
.selected-code{
  min-height:50px;padding:14px 16px;border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;font-weight:700
}
.hero-stats{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.stat{
  background:rgba(255,255,255,.1);padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;min-width:140px
}
.stat strong{font-size:24px}
.stat span{font-size:12px;color:rgba(255,255,255,.8)}
.workspace{
  margin-top:18px;
  display:grid;
  grid-template-columns:360px minmax(480px,1fr) minmax(380px,1fr);
  gap:18px;
}
.panel{
  background:var(--panel-soft);
  border:1px solid rgba(255,255,255,.68);
  border-radius:26px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(12px);
  padding:18px;
  min-height:72vh;
}
.panel-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px
}
.panel h2{margin:0;font-size:22px;color:#0b2a5b}
.panel p{margin:6px 0 0;color:var(--muted);font-size:14px}
.actions-row{display:flex;gap:10px;margin:14px 0 12px}
.blue-input,.editor-textarea{
  width:100%;
  border:1px solid var(--line);
  background:white;
  border-radius:16px;
  padding:12px 14px;
  outline:none;
  font:inherit;
  color:var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.blue-input:focus,.editor-textarea:focus{border-color:#8ec2ff;box-shadow:0 0 0 4px rgba(29,143,225,.12)}
.rubrique-list{
  display:flex;flex-direction:column;gap:10px;max-height:calc(72vh - 110px);overflow:auto;padding-right:4px
}
.rubrique-item{
  display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;border:1px solid #e6eefc;background:rgba(255,255,255,.9);cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.rubrique-item:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(15,61,135,.08)}
.rubrique-item.is-active{border-color:#84bbff;background:#f2f8ff}
.rubrique-item input{margin-top:3px}
.rubrique-meta{line-height:1.35}
.saisine-box{
  margin-bottom:18px;padding:16px;border-radius:22px;background:linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%);border:1px solid #dbe7ff
}
.saisine-title{font-weight:800;color:#0b2a5b;margin-bottom:12px}
.saisine-options{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid #dbe7ff;background:white;cursor:pointer;font-size:14px
}
.pill input{margin:0}
.pill-active{background:#eaf3ff;border-color:#8ec2ff}
.form-block{
  display:grid;gap:10px;margin-top:12px;padding:14px;border-radius:18px;background:white;border:1px solid #e6eefc
}
.block-title{font-weight:700;color:#0b2a5b}
.editor-scroll{
  display:flex;flex-direction:column;gap:14px;max-height:calc(72vh - 80px);overflow:auto;padding-right:4px
}
.editor-card{
  background:white;border:1px solid #e6eefc;border-radius:22px;padding:14px
}
.editor-card-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#0b2a5b
}
.editor-id{
  width:34px;height:34px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#edf5ff;font-weight:800
}
.editor-textarea{
  min-height:180px;resize:vertical;background:#fcfdff;font-family:Georgia, "Times New Roman", serif
}
.preview-paper{
  border-radius:24px;background:white;border:1px solid #e6eefc;padding:24px;min-height:calc(72vh - 56px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)
}
.preview-paper pre{
  margin:0;white-space:pre-wrap;word-break:break-word;font-family:Georgia, "Times New Roman", serif;font-size:15px;line-height:1.6;color:#1d2735
}
.btn{
  border:none;border-radius:16px;padding:12px 16px;font-weight:800;cursor:pointer;font:inherit;transition:transform .16s ease, box-shadow .16s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--blue) 0%, var(--blue-2) 100%);color:white;box-shadow:0 12px 26px rgba(15,61,135,.22)}
.btn-secondary{background:white;color:#0b2a5b;border:1px solid #dbe7ff}
.empty-state{
  padding:28px;border-radius:22px;border:1px dashed #b8cff7;background:#f8fbff;color:var(--muted);text-align:center
}
@media (max-width: 1320px){
  .workspace{grid-template-columns:320px 1fr}
  .panel-preview{grid-column:1 / -1}
}
@media (max-width: 980px){
  .hero-grid,.workspace{grid-template-columns:1fr}
  .panel{min-height:auto}
  .rubrique-list,.editor-scroll,.preview-paper{max-height:none}
}