/**
 * Le simulateur.
 *
 * Deux mondes dans la même page : la documentation, qui garde ses variables,
 * et le faux site, qui a les siennes. Tout ce qui commence par « --site- » est
 * la charte de la boulangerie, pas celle de cette documentation — c'est aussi
 * ce que fait un vrai site avec son fichier de charte.
 */

.sim {
  margin: 2rem 0 3rem;
}

/* -------------------------------------------------------------- Scénarios -- */

.sim-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .75rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-alt);
}
.sim-controls-label {
  margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.sim-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sim-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; }
.sim-check input { accent-color: var(--accent); }
.sim-reset {
  font: inherit; font-size: .8rem; padding: .25rem .7rem; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink);
}
.sim-reset:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------------ Scène -- */

.sim-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem;
  align-items: start;
}
@media (max-width: 1100px) { .sim-stage { grid-template-columns: minmax(0, 1fr); } }

.sim-browser {
  border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow);
}
.sim-chrome {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.sim-dots { display: inline-flex; gap: .3rem; }
.sim-dots i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--border-strong); }
.sim-url {
  flex: 1; font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .15rem .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sim-viewport {
  position: relative; min-height: 30rem; max-height: 44rem; overflow-y: auto;
  background: var(--site-surface, #fffdf9);
}

/* --------------------------------------------------------- Écran d'entrée -- */

.sim-admin {
  max-width: 24rem; margin: 0 auto; padding: 3.5rem 1.5rem;
  font-family: var(--font-sans); color: #1c1917;
}
.sim-admin h2 { font-family: var(--font-serif); font-size: 1.5rem; margin: 0 0 .5rem; border: 0; padding: 0; }
.sim-admin p { color: #6b6560; font-size: .9rem; margin: 0 0 1.25rem; }
.sim-admin label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }
.sim-admin input {
  width: 100%; font: inherit; padding: .55rem .75rem;
  border: 1px solid #ddd6cd; border-radius: 8px; background: #fff; color: inherit;
}
.sim-admin input:focus { outline: none; border-color: #b4652a; box-shadow: 0 0 0 3px rgba(180, 101, 42, .15); }
.sim-admin button {
  margin-top: .75rem; width: 100%; font: inherit; font-weight: 600;
  padding: .55rem 1rem; border: 0; border-radius: 8px; cursor: pointer;
  background: #b4652a; color: #fff;
}
.sim-admin button:hover { background: #96521e; }
.sim-admin .sim-error {
  margin: .75rem 0 0; padding: .5rem .7rem; border-radius: 6px;
  background: #fdeceb; color: #8f1d16; font-size: .85rem;
}
.sim-admin .sim-hint { margin-top: 1.5rem; font-size: .78rem; color: #8a8279; }
.sim-admin .sim-hint code { background: #f3ece3; padding: .05em .35em; border-radius: 4px; }

/* ----------------------------------------------------------- Le faux site -- */

.sim-site {
  --site-primary: #241c16;
  --site-secondary: #4a3f36;
  --site-muted: #8a8279;
  --site-accent: #b4652a;
  --site-inverse: #ffffff;
  --site-surface: #fffdf9;
  --site-border: #ece3d7;

  --site-size-xs: .75rem;
  --site-size-sm: .85rem;
  --site-size-base: 1rem;
  --site-size-lg: 1.2rem;
  --site-size-xl: 1.5rem;
  --site-size-2xl: 2rem;
  --site-size-3xl: 2.6rem;

  font-family: var(--font-sans);
  color: var(--site-primary);
  background: var(--site-surface);
  padding-bottom: 4.5rem;
}

.sim-site-nav {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.5rem; border-bottom: 1px solid var(--site-border);
  font-size: .85rem; color: var(--site-secondary);
}
.sim-site-brand { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; margin-right: auto; }
.sim-site-nav a { color: var(--site-secondary); text-decoration: none; }

.sim-page { max-width: 40rem; margin: 0 auto; padding: 2.5rem 1.5rem; }
.sim-page > section + section { margin-top: 2.5rem; }

.sim-site h1, .sim-site h2, .sim-site h3 {
  font-family: var(--font-serif); font-weight: 600; margin: 0 0 .6rem;
  border: 0; padding: 0; line-height: 1.15; color: inherit;
}
.sim-site p { margin: 0 0 .8rem; }
.sim-site figure { margin: 0; }
.sim-site img { width: 100%; height: auto; display: block; border-radius: 10px; }
.sim-site iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; }
.sim-site figcaption { margin-top: .4rem; font-size: var(--site-size-sm); color: var(--site-muted); }

.sim-reviews { display: grid; gap: .9rem; }
.sim-review {
  position: relative; padding: .9rem 1rem;
  border-left: 3px solid var(--site-accent); background: #faf5ee; border-radius: 0 8px 8px 0;
}
.sim-review blockquote { margin: 0; }

/*
 * Les classes de tokens du site imité — mêmes noms que dans tokens.css, mais
 * branchées sur SA palette, pas sur celle de la documentation.
 *
 * Le préfixe n'est pas décoratif. Le simulateur vit dans `.content`, et
 * docs.css y réaffirme les mêmes classes pour les titres de chapitre, à
 * `.content .cms-*` — soit deux classes contre une. Sans ce préfixe, ce sont
 * les couleurs de la documentation qui gagnaient ici : en clair on n'y voyait
 * presque rien (deux noirs voisins), en sombre le texte du site imité passait
 * au blanc sur son fond crème, donc invisible.
 *
 * Trois classes plutôt que deux : la victoire ne doit pas dépendre de l'ordre
 * de chargement des feuilles, qui n'est écrit nulle part.
 */
.sim .sim-site .cms-size-xs { font-size: var(--site-size-xs); }
.sim .sim-site .cms-size-sm { font-size: var(--site-size-sm); }
.sim .sim-site .cms-size-base { font-size: var(--site-size-base); }
.sim .sim-site .cms-size-lg { font-size: var(--site-size-lg); }
.sim .sim-site .cms-size-xl { font-size: var(--site-size-xl); }
.sim .sim-site .cms-size-2xl { font-size: var(--site-size-2xl); }
.sim .sim-site .cms-size-3xl { font-size: var(--site-size-3xl); }
.sim .sim-site .cms-weight-thin { font-weight: 100; }
.sim .sim-site .cms-weight-light { font-weight: 300; }
.sim .sim-site .cms-weight-regular { font-weight: 400; }
.sim .sim-site .cms-weight-medium { font-weight: 500; }
.sim .sim-site .cms-weight-semibold { font-weight: 600; }
.sim .sim-site .cms-weight-bold { font-weight: 700; }
.sim .sim-site .cms-italic { font-style: italic; }
.sim .sim-site .cms-align-left { text-align: left; }
.sim .sim-site .cms-align-center { text-align: center; }
.sim .sim-site .cms-align-right { text-align: right; }
.sim .sim-site .cms-color-primary { color: var(--site-primary); }
.sim .sim-site .cms-color-secondary { color: var(--site-secondary); }
.sim .sim-site .cms-color-muted { color: var(--site-muted); }
.sim .sim-site .cms-color-accent { color: var(--site-accent); }
.sim .sim-site .cms-color-inverse { color: var(--site-inverse); }

/* ---------------------------------------------------------------- Overlay -- */

.sim-site.is-editing [data-cms] {
  outline: 1px dashed transparent; outline-offset: 3px; border-radius: 3px;
  transition: outline-color .12s ease, background-color .12s ease;
  cursor: text;
}
.sim-site.is-editing [data-cms]:hover { outline-color: var(--site-accent); }
.sim-site.is-editing [data-cms][contenteditable="true"] {
  outline: 2px solid var(--site-accent); background: rgba(180, 101, 42, .06);
}
.sim-site.is-editing [data-cms-kind] { cursor: pointer; }
.sim-site.is-editing [data-cms-untranslated="true"] {
  background: repeating-linear-gradient(-45deg, rgba(154, 97, 0, .09) 0 6px, transparent 6px 12px);
}

.sim-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem .9rem; margin-top: 2rem;
  background: #241c16; color: #f6f1ea; font-size: .82rem;
}
.sim-bar-status { display: inline-flex; align-items: center; gap: .4rem; }
.sim-bar-status::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #62c58c;
}
.sim-bar-status[data-dirty="true"]::before { background: #e0a44a; }
.sim-bar-langs { display: inline-flex; gap: .35rem; margin-left: .5rem; }
.sim-bar-langs button {
  font: inherit; font-size: .78rem; padding: .1rem .5rem; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px;
  background: transparent; color: inherit;
}
.sim-bar-langs button[aria-current="true"] { background: #f6f1ea; color: #241c16; font-weight: 600; }
.sim-bar-todo { color: #e0a44a; font-size: .78rem; }
.sim-bar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.sim-bar button.sim-ghost {
  font: inherit; font-size: .8rem; padding: .3rem .7rem; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 7px;
}
.sim-bar button.sim-publish {
  font: inherit; font-size: .8rem; font-weight: 600; padding: .35rem .9rem; cursor: pointer;
  background: #b4652a; color: #fff; border: 0; border-radius: 7px;
}
.sim-bar button.sim-publish[disabled] { opacity: .55; cursor: default; }

.sim-banner {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .9rem; font-size: .85rem;
  background: #fdf3e0; color: #6b4708; border-bottom: 1px solid #efdcb6;
}
.sim-banner[data-tone="error"] { background: #fdeceb; color: #8f1d16; border-bottom-color: #f2c9c5; }
.sim-banner[data-tone="success"] { background: #e6f5ec; color: #17603a; border-bottom-color: #bfe3cd; }
.sim-banner button {
  font: inherit; font-size: .78rem; padding: .2rem .6rem; cursor: pointer;
  border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit;
}
.sim-banner .sim-banner-close { margin-left: auto; border: 0; font-size: 1rem; line-height: 1; }

/* ------------------------------------------------------ Barres flottantes -- */

.sim-toolbar {
  position: absolute; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .35rem; border-radius: 9px;
  background: #241c16; color: #f6f1ea;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  font-size: .75rem; max-width: 26rem;
}
.sim-toolbar button, .sim-toolbar select {
  font: inherit; font-size: .75rem; padding: .2rem .45rem; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: inherit;
  border: 1px solid transparent; border-radius: 5px;
}
.sim-toolbar button:hover, .sim-toolbar select:hover { background: rgba(255, 255, 255, .18); }
.sim-toolbar button[aria-pressed="true"] { background: #b4652a; border-color: #b4652a; }
.sim-toolbar .sim-sep { width: 1px; height: 1.1rem; background: rgba(255, 255, 255, .2); margin: 0 .15rem; }
.sim-toolbar .sim-swatch { width: 1.1rem; height: 1.1rem; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); }
.sim-toolbar .sim-swatch[aria-pressed="true"] { outline: 2px solid #f6f1ea; outline-offset: 1px; }
.sim-toolbar select { padding-right: .2rem; }

/* --------------------------------------------------------------- Panneaux -- */

.sim-modal {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(36, 28, 22, .45);
}
.sim-modal-card {
  width: min(26rem, 100%); background: #fff; color: #241c16;
  border-radius: 12px; padding: 1.1rem 1.2rem;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5);
  font-size: .9rem;
}
.sim-modal-card h3 { margin: 0 0 .3rem; font-family: var(--font-serif); font-size: 1.15rem; border: 0; padding: 0; }
.sim-modal-card p { margin: 0 0 .8rem; color: #6b6560; font-size: .85rem; }
.sim-modal-card label { display: block; font-size: .8rem; font-weight: 600; margin: .6rem 0 .25rem; }
.sim-modal-card input[type="text"], .sim-modal-card input[type="url"], .sim-modal-card input[type="file"] {
  width: 100%; font: inherit; font-size: .85rem; padding: .45rem .6rem;
  border: 1px solid #ddd6cd; border-radius: 7px; background: #fff; color: inherit;
}
.sim-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.sim-modal-actions button {
  font: inherit; font-size: .82rem; padding: .4rem .9rem; cursor: pointer; border-radius: 7px;
}
.sim-modal-actions .sim-cancel { background: transparent; border: 1px solid #ddd6cd; color: inherit; }
.sim-modal-actions .sim-confirm { background: #b4652a; border: 0; color: #fff; font-weight: 600; }
.sim-modal-actions .sim-danger { background: #b3261e; border: 0; color: #fff; font-weight: 600; }
.sim-modal-note { font-size: .78rem; color: #8a8279; margin-top: .6rem; }

/* ---------------------------------------------------------- Contrôles liste -- */

.sim-item-tools {
  position: absolute; top: .35rem; right: .35rem;
  display: none; gap: .2rem;
}
.sim-site.is-editing .sim-review:hover .sim-item-tools { display: flex; }
.sim-item-tools button {
  font: inherit; font-size: .68rem; padding: .1rem .4rem; cursor: pointer;
  background: #241c16; color: #f6f1ea; border: 0; border-radius: 5px;
}
.sim-item-tools button:hover { background: #b4652a; }
.sim-add {
  font: inherit; font-size: .8rem; padding: .3rem .8rem; cursor: pointer; margin-top: .3rem;
  background: transparent; color: var(--site-accent);
  border: 1px dashed var(--site-accent); border-radius: 7px;
}
.sim-site:not(.is-editing) .sim-add { display: none; }

/* --------------------------------------------------------- Panneau latéral -- */

.sim-panels {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
}
.sim-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.sim-tabs button {
  flex: 1; font: inherit; font-size: .78rem; padding: .5rem .4rem; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted);
}
.sim-tabs button.is-active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

.sim-pane { padding: .75rem .85rem; max-height: 38rem; overflow-y: auto; }
.sim-pane-hint { margin: 0 0 .6rem; font-size: .75rem; color: var(--faint); line-height: 1.45; }

.sim-json {
  margin: 0; font-family: var(--font-mono); font-size: .7rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; color: var(--ink);
}
.sim-json .k { color: var(--t-key); }
.sim-json .s { color: var(--t-str); }
.sim-json .n { color: var(--t-num); }
.sim-json .b { color: var(--t-kw); }

.sim-log, .sim-commits { margin: 0; padding: 0; list-style: none; font-size: .78rem; }
.sim-log li {
  display: flex; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--border);
  font-family: var(--font-mono); font-size: .72rem; line-height: 1.5;
}
.sim-log li:last-child { border-bottom: 0; }
.sim-log .ok { color: var(--ok); }
.sim-log .ko { color: var(--danger); font-weight: 700; }
.sim-log .step { color: var(--faint); }

.sim-commits li {
  padding: .45rem 0; border-bottom: 1px dashed var(--border);
}
.sim-commits li:last-child { border-bottom: 0; }
.sim-commit-msg { display: block; font-family: var(--font-mono); font-size: .72rem; color: var(--ink); }
.sim-commit-meta { display: block; font-size: .7rem; color: var(--faint); margin-top: .1rem; }
.sim-empty { color: var(--faint); font-size: .8rem; font-style: italic; }

/* --------------------------------------------------------------- Réduit -- */

.sim-small {
  display: none;
  padding: 3rem 1.5rem; text-align: center; color: var(--muted); font-size: .9rem;
}
@media (max-width: 620px) {
  .sim-viewport .sim-site, .sim-viewport .sim-admin { display: none; }
  .sim-small { display: block; }
}

/* --------------------------------------------------------- Mode agrandi -- */
/*
 * Le simulateur vit entre le sommaire et le plan de la page : il lui reste
 * moins de la moitié de la largeur de l'écran, et la fenêtre de navigateur
 * qu'il imite y tient mal. Agrandi, il occupe l'écran entier — c'est le seul
 * moyen de voir l'overlay dans les proportions qu'il aura chez le client.
 *
 * Un recouvrement, pas l'API plein écran : celle-ci est refusée dans certains
 * contextes et sort la page du thème du site. Ici la palette, le fond et le
 * mode sombre restent ceux de la documentation.
 *
 * z-index : la barre du haut monte à 100 dans docs.css. 120 passe devant, et
 * laisse la marge pour ce qui viendrait entre les deux.
 */
.sim.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 120;
  margin: 0;
  padding: 1rem 1.25rem 1.25rem;
  overflow: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/*
 * La scène prend toute la hauteur restante. `min-height: 0` est indispensable :
 * sans lui, un enfant de flex refuse de descendre sous sa taille de contenu et
 * la fenêtre déborde au lieu de défiler.
 */
.sim.is-expanded .sim-stage {
  flex: 1;
  min-height: 0;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 24rem;
}

/* La fenêtre imitée s'étire ; c'est sa zone de contenu qui gagne la place. */
.sim.is-expanded .sim-browser { display: flex; flex-direction: column; min-height: 0; }
.sim.is-expanded .sim-viewport { flex: 1; max-height: none; }
.sim.is-expanded .sim-panels { min-height: 0; overflow-y: auto; }

@media (max-width: 1100px) {
  .sim.is-expanded .sim-stage { grid-template-columns: minmax(0, 1fr); }
}

/* Sous le recouvrement, la page ne doit pas défiler. */
body.sim-expanded { overflow: hidden; }

/* Le bouton porte l'accent : c'est la commande qu'on cherche quand c'est trop petit. */
.sim-expand { border-color: var(--accent); color: var(--accent); }
.sim-expand:hover { background: var(--accent-soft); }