/*
 * prism-override.css — Terminal-style code blocks (0xdf inspired)
 * Fond bleu-noir, header macOS avec 3 dots, prompt vert.
 *
 * PROTÈGE Prism contre le reset global de style.css :
 *   * { margin:0; padding:0; box-sizing:border-box }
 *
 * Stratégie : on re-déclare explicitement les propriétés de layout
 * que Prism a besoin, avec une spécificité suffisante pour battre *.
 */

/* ═══════════════════════════════════════════════════════════════
   SECTION 1 — Protection contre le reset global *
   Le reset * { margin:0; padding:0; box-sizing:border-box }
   écrase les styles Prism sur les éléments enfants.
   On les restaure ici avec une spécificité supérieure.
   ═══════════════════════════════════════════════════════════════ */

/* Restaurer le padding du <pre> (Prism met padding:1em, le reset * le vire) */
pre[class*="language-"] {
  padding: 1em !important;
  margin: 0.5em 0 !important;
  overflow: auto !important;
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
  box-sizing: content-box !important;
}

/* Le <code> dans un <pre> doit garder son white-space: pre
   et ne jamais passer en border-box */
pre[class*="language-"] > code[class*="language-"] {
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
  box-sizing: content-box !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tous les spans dans un pre (tokens Prism) doivent rester inline.
   Protège contre tout "span { display: block }" potentiel. */
pre[class*="language-"] span {
  display: inline !important;
  box-sizing: content-box !important;
}

/* Le prompt command-line est un cas spécial : il DOIT être block+float */
pre[class*="language-"] .command-line-prompt {
  display: block !important;
  float: left !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-right: 1em !important;
  box-sizing: content-box !important;
}

/* Les spans DANS le prompt (chaque ligne) doivent aussi être block */
pre[class*="language-"] .command-line-prompt > span {
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — Visuels : thème terminal bleu-noir
   ═══════════════════════════════════════════════════════════════ */

/* Base : tous les blocs <pre> */
pre[class*="language-"] {
  font-size: 13.5px;
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace !important;
  background: #0a0e17 !important;
  color: #e6e6e6;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Texte des commandes en jaune pâle */
.command-line code[class*="language-"] {
  background: transparent !important;
  color: #ffd !important;
}

/* Prompt (user@host$) en vert bold */
.command-line .command-line-prompt > span::before {
  color: #8AE234 !important;
  font-weight: bold;
  opacity: 1 !important;
}

/* Séparateur du prompt */
.command-line .command-line-prompt {
  border-right-color: rgba(255,255,255,0.15) !important;
}

/* Output à pleine opacité */
.command-line span.token.output {
  opacity: 1 !important;
  color: #e6e6e6 !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — Terminal wrapper (header macOS avec dots)
   Créé par terminal.js — un div autour du <pre>
   ═══════════════════════════════════════════════════════════════ */

.terminal-wrapper {
  position: relative;
  margin: 20px 0;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  overflow: hidden;
}

/* Quand wrappé, le pre perd ses propres marges/bordures */
.terminal-wrapper pre[class*="language-"] {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Header bar dégradé */
.terminal-wrapper::before {
  content: "";
  display: block;
  height: 26px;
  background: linear-gradient(#3c3b37, #2e2d2a);
}

/* 3 dots macOS (rouge + 2 gris via box-shadow) */
.terminal-wrapper::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f25d2b;
  box-shadow:
    0 0 0 1px #595953,
    15px 0 0 0 #7d7871,
    15px 0 0 1px #595953,
    30px 0 0 0 #7d7871,
    30px 0 0 1px #595953;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — Couleurs de syntaxe (blocs command-line)
   ═══════════════════════════════════════════════════════════════ */

.command-line .token.function        { color: #ff6666 !important; }
.command-line .token.string          { color: #2ad !important; }
.command-line .token.parameter,
.command-line .token.flag            { color: #99f !important; }
.command-line .token.operator        { color: #e46 !important; }
.command-line .token.number          { color: #3cc !important; }
.command-line .token.builtin         { color: #3cc !important; }
.command-line .token.keyword         { color: #77f !important; }
.command-line .token.comment         { color: #666 !important; }


/* ═══════════════════════════════════════════════════════════════
   SECTION 5 — Bouton Copy (plugin toolbar)
   ═══════════════════════════════════════════════════════════════ */

div.code-toolbar > .toolbar .toolbar-item button {
  background: rgba(255,255,255,0.08) !important;
  color: #999 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-family: 'Poppins', sans-serif !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
}
div.code-toolbar > .toolbar .toolbar-item button:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #ccc !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 6 — .output-example (terminal output sans prompt)
   ═══════════════════════════════════════════════════════════════ */

.output-example {
  background: #0a0e17;
  color: #e6e6e6;
  border-radius: 0;
  padding: 1em 1.5em;
  overflow-x: auto;
  margin: 0;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 13.5px;
  border: none;
  white-space: pre;
  line-height: 1.5;
}
