/* ============================================================
   SOA HTML Editor — v1.0.0
   ============================================================ */
.soa-hled {
  margin: 40px 0;
  --soa-panel:         rgba(255, 255, 255, 0.88);
  --soa-panel-solid:   rgba(255, 255, 255, 0.96);
  --soa-border:        rgba(31, 43, 54, 0.12);
  --soa-border-strong: rgba(31, 43, 54, 0.22);
  --soa-text:          #21313d;
  --soa-muted:         #677884;
  --soa-accent:        #1d6b72;
  --soa-accent-dark:   #184b56;
  --soa-warm:          #c98d58;
  --soa-success:       #1f7a60;
  --soa-danger:        #b53f35;
  --soa-shadow:        0 24px 60px rgba(28, 39, 49, 0.12);
  --soa-r-xl:          26px;
  --soa-r-lg:          18px;
  --soa-r-md:          14px;

  /* Couleurs de l'éditeur (dark theme) */
  --ed-bg:       #1e2433;
  --ed-bar:      #161b27;
  --ed-border:   rgba(255, 255, 255, 0.07);
  --ed-text:     #e2e8f4;
  --ed-muted:    #5a6a8a;
  --ed-ln:       #3a4560;
  --ed-select:   rgba(29, 107, 114, 0.30);

  /* Couleurs des onglets */
  --col-html:  #e44d26;
  --col-css:   #2196d3;
  --col-js:    #f0db4f;
}

/* ── Carte SOA ─────────────────────────────────────────────── */
.soa-hled__card {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  padding: 34px;
  border: 1px solid var(--soa-border);
  border-radius: var(--soa-r-xl);
  background:
    radial-gradient(circle at top right,   rgba(201,141,88,.14),  transparent 26%),
    radial-gradient(circle at bottom left, rgba(29,107,114,.12),  transparent 24%),
    linear-gradient(180deg, #fffdf9 0%, #f8f4ed 100%);
  box-shadow: var(--soa-shadow);
}

.soa-hled__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.38), transparent 44%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 6px,
      transparent 6px, transparent 18px);
}

/* ── Hero ──────────────────────────────────────────────────── */
.soa-hled__hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 26px;
}

.soa-hled__hero-copy,
.soa-hled__stats-panel {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: var(--soa-panel);
  backdrop-filter: blur(10px);
}

.soa-hled__eyebrow {
  margin: 0 0 12px;
  color: var(--soa-accent-dark);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.soa-hled__title {
  margin: 0;
  color: var(--soa-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.12;
  font-weight: 700;
}

.soa-hled__subtitle {
  max-width: 48ch;
  margin: 14px 0 0;
  color: var(--soa-muted);
  font-size: .95rem;
  line-height: 1.75;
}

/* ── Panneau stats ─────────────────────────────────────────── */
.soa-hled__stat-big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}

.soa-hled__stat-num {
  font-size: 3.4rem;
  font-weight: 900;
  color: var(--soa-accent-dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.soa-hled__stat-lbl {
  color: var(--soa-muted);
  font-size: .95rem;
  font-weight: 600;
}

.soa-hled__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.soa-hled__tag {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(29,107,114,.18);
  background: rgba(29,107,114,.06);
  color: var(--soa-accent-dark);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.soa-hled__tag--html { border-color: rgba(228,77,38,.25); background: rgba(228,77,38,.07); color: #c44020; }
.soa-hled__tag--css  { border-color: rgba(33,150,211,.25); background: rgba(33,150,211,.07); color: #175d8e; }
.soa-hled__tag--js   { border-color: rgba(196,175,52,.30); background: rgba(240,219,79,.08); color: #7a6a10; }

/* ── Workbench (zone sombre) ───────────────────────────────── */
.soa-hled__workbench {
  position: relative;
  z-index: 1;
  border-radius: var(--soa-r-lg);
  overflow: hidden;
  border: 1px solid var(--ed-border);
  box-shadow: 0 16px 48px rgba(10, 14, 26, 0.30);
}

/* ── Barre d'outils ────────────────────────────────────────── */
.soa-hled__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 10px 0 0;
  background: var(--ed-bar);
  border-bottom: 1px solid var(--ed-border);
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Onglets */
.soa-hled__tabs {
  display: flex;
  height: 100%;
  flex-shrink: 0;
}

.soa-hled__tab {
  height: 100%;
  padding: 0 18px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ed-muted);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}

.soa-hled__tab:hover  { color: var(--ed-text); background: rgba(255,255,255,.04); }

.soa-hled__tab--html.soa-hled__tab--active { color: var(--col-html); border-bottom-color: var(--col-html); }
.soa-hled__tab--css.soa-hled__tab--active  { color: var(--col-css);  border-bottom-color: var(--col-css);  }
.soa-hled__tab--js.soa-hled__tab--active   { color: var(--col-js);   border-bottom-color: var(--col-js);   }

/* Contrôles droite */
.soa-hled__controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.soa-hled__ctrl-sep {
  width: 1px;
  height: 20px;
  background: var(--ed-border);
  margin: 0 3px;
  flex-shrink: 0;
}

.soa-hled__ctrl-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: var(--ed-muted);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}

.soa-hled__ctrl-btn:hover {
  background: rgba(29,107,114,.22);
  border-color: rgba(29,107,114,.40);
  color: #6ecece;
}

.soa-hled__ctrl-btn--active {
  background: rgba(29,107,114,.28);
  border-color: rgba(29,107,114,.55);
  color: #5ecece;
}

.soa-hled__ctrl-btn--run {
  background: linear-gradient(135deg, #185e65 0%, #1d6b72 100%);
  border-color: #1d6b72;
  color: #fff;
  font-weight: 800;
}

.soa-hled__ctrl-btn--run:hover {
  background: linear-gradient(135deg, #14484e 0%, #175660 100%);
  border-color: #175660;
  color: #fff;
}

/* ── Zone éditeur + aperçu ─────────────────────────────────── */
.soa-hled__split {
  display: flex;
  height: 500px;
}

.soa-hled__split--h { flex-direction: row; }
.soa-hled__split--v { flex-direction: column; }

/* Masquage de zones selon le layout */
.soa-hled__split--editor  .soa-hled__preview-pane,
.soa-hled__split--editor  .soa-hled__resize-handle { display: none; }

.soa-hled__split--preview .soa-hled__editor-pane,
.soa-hled__split--preview .soa-hled__resize-handle { display: none; }

/* ── Volet éditeur ─────────────────────────────────────────── */
.soa-hled__editor-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--ed-border);
  min-width: 0;
}

.soa-hled__split--v .soa-hled__editor-pane {
  border-right: none;
  border-bottom: 1px solid var(--ed-border);
  min-width: unset;
  min-height: 0;
}

/* Zone de code = numéros + textarea */
.soa-hled__code-wrap {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: var(--ed-bg);
}

/* Numéros de ligne */
.soa-hled__line-nums {
  flex-shrink: 0;
  width: 42px;
  background: var(--ed-bar);
  color: var(--ed-ln);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 13px;
  line-height: 22px;
  padding: 12px 8px 12px 0;
  text-align: right;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  white-space: pre;
  border-right: 1px solid var(--ed-border);
}

/* Textarea éditeur */
.soa-hled__code {
  flex: 1;
  background: var(--ed-bg);
  color: var(--ed-text);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 13px;
  line-height: 22px;
  padding: 12px 16px;
  border: none;
  resize: none;
  outline: none;
  tab-size: 2;
  overflow: auto;
  white-space: pre;
  overflow-wrap: normal;
  box-sizing: border-box;
  caret-color: #7ecfcf;
}

.soa-hled__code::selection { background: var(--ed-select); }

/* ── Poignée de redimensionnement ──────────────────────────── */
.soa-hled__resize-handle {
  flex-shrink: 0;
  width: 4px;
  background: rgba(255,255,255,.04);
  cursor: col-resize;
  transition: background .15s;
}

.soa-hled__resize-handle:hover { background: rgba(29,107,114,.45); }

.soa-hled__split--v .soa-hled__resize-handle {
  width: auto;
  height: 4px;
  cursor: row-resize;
}

/* ── Volet aperçu ──────────────────────────────────────────── */
.soa-hled__preview-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  min-width: 0;
}

.soa-hled__preview-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 12px;
  background: #f0f2f5;
  border-bottom: 1px solid rgba(31,43,54,.10);
}

.soa-hled__preview-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #677884;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.soa-hled__preview-time {
  color: #93a0aa;
  font-family: Consolas, monospace;
  font-size: .74rem;
}

.soa-hled__frame {
  flex: 1;
  border: none;
  width: 100%;
  display: block;
}

/* ── Barre du bas ──────────────────────────────────────────── */
.soa-hled__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 12px;
  background: var(--ed-bar);
  border-top: 1px solid var(--ed-border);
  gap: 8px;
}

.soa-hled__bottom-left {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.soa-hled__util-btn {
  padding: 5px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #8a9ab8;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}

.soa-hled__util-btn:hover {
  background: rgba(29,107,114,.20);
  border-color: rgba(29,107,114,.40);
  color: #6ecece;
}

.soa-hled__util-btn--danger:hover {
  background: rgba(181,63,53,.18);
  border-color: rgba(181,63,53,.40);
  color: #e07070;
}

/* Barre de statut */
.soa-hled__status-bar {
  display: flex;
  gap: 14px;
  color: var(--ed-muted);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: .74rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Plein écran ───────────────────────────────────────────── */
.soa-hled__workbench--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
}

.soa-hled__workbench--fullscreen .soa-hled__split {
  flex: 1;
  height: auto;
}

/* ── Message ───────────────────────────────────────────────── */
.soa-hled__message {
  position: relative;
  z-index: 1;
  min-height: 1.4em;
  margin: 14px 0 0;
  color: var(--soa-success);
  font-weight: 700;
  font-size: .92rem;
}

.soa-hled__message--error { color: var(--soa-danger); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .soa-hled__hero    { grid-template-columns: 1fr; }
  .soa-hled__toolbar { height: auto; flex-wrap: wrap; padding: 8px 10px; gap: 6px; }
  .soa-hled__split   { height: 680px; }
}

@media (max-width: 640px) {
  .soa-hled__card        { padding: 16px; border-radius: 20px; }
  .soa-hled__hero-copy,
  .soa-hled__stats-panel { padding: 16px; }
  /* Sur mobile le split horizontal devient vertical */
  .soa-hled__split--h {
    flex-direction: column;
  }
  .soa-hled__split--h .soa-hled__editor-pane {
    border-right: none;
    border-bottom: 1px solid var(--ed-border);
  }
  .soa-hled__split--h .soa-hled__resize-handle {
    width: auto;
    height: 4px;
    cursor: row-resize;
  }
  .soa-hled__split   { height: 740px; }
  .soa-hled__tab     { padding: 0 12px; font-size: .78rem; }
  .soa-hled__ctrl-btn{ padding: 0 7px; font-size: .72rem; }
  .soa-hled__util-btn{ padding: 4px 9px; font-size: .72rem; }
  .soa-hled__status-bar { gap: 8px; font-size: .68rem; }
}