/* Vignette Instagram : styles propres à l'application (le reste vient de llv-theme.css) */

:root { --tool-height: 46px; color-scheme: light; }
body.llv { padding-bottom: env(safe-area-inset-bottom, 0px); }
.llv-bandeau { padding-top: env(safe-area-inset-top, 0px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mise en page : texte à gauche, aperçu à droite */
.llv-main.app { grid-template-columns: minmax(280px, 460px) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 820px) {
  .llv-main.app { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-block: 1.5rem 2.5rem; }
}
.app form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; margin: 0; }

/* Barre d'outils : tout à 46 px */
.toolbar { display: flex; gap: 8px; align-items: center; }
.format-picker {
  display: inline-flex; flex: none; height: var(--tool-height); padding: 3px; gap: 2px;
  background: var(--llv-blanc); border: 1.5px solid var(--llv-trait); border-radius: 999px; color: var(--llv-vert-texte);
}
.format-picker input { position: absolute; opacity: 0; pointer-events: none; }
.format-picker label {
  display: grid; place-items: center; width: 42px; height: 100%; border-radius: 999px; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.format-picker label:hover { background: var(--llv-vert-pale); }
.format-picker input:checked + label { background: var(--llv-vert-texte); color: var(--llv-blanc); }
.format-picker input:focus-visible + label { outline: 3px solid var(--llv-rose); outline-offset: 1px; }
.shape { display: block; border: 2.5px solid currentColor; border-radius: 2px; }
.shape.story { width: 12px; height: 20px; }
.shape.square { width: 17px; height: 17px; }
.shape.wide { width: 24px; height: 14px; }

.toolbar .llv-btn { flex: none; width: var(--tool-height); height: var(--tool-height); padding: 0; }
#arrow { font-size: 1.35rem; }
.toolbar .llv-input {
  flex: 0 1 150px; min-width: 0; width: 150px; height: var(--tool-height);
  padding: 0 .9rem; font-size: var(--llv-t-s); border-radius: 999px;
}
@media (max-width: 480px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar .llv-input { order: 9; flex: 1 1 100%; width: auto; }
}
.llv-textarea { min-height: 210px; resize: vertical; line-height: 1.5; }

/* Légende des couleurs */
.color-key { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; padding: 0; list-style: none; font-size: var(--llv-t-xs); }
.color-key li { display: flex; align-items: center; gap: .35rem; }
.color-key code { font-family: var(--llv-police); font-weight: 700; color: var(--llv-texte); }
.llv-badge.b { background: var(--llv-blanc); color: var(--llv-vert-texte); border: 1px solid var(--llv-trait); }
.llv-badge.r { background: var(--llv-rose); color: var(--llv-blanc); }
.llv-badge.v { background: var(--llv-vert); color: var(--llv-blanc); }

/* Message : rien quand tout va bien, alerte de la charte sinon */
.status { margin: 0; font-size: var(--llv-t-s); }
.status:empty { display: none; }

/* Aperçu */
.preview {
  position: sticky; top: 16px; margin: 0 auto; display: grid; width: 100%;
  max-width: calc((100vh - 150px) * var(--ratio, .5625));
}
.preview canvas { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: var(--llv-ombre); }
@media (max-width: 820px) { .preview { position: static; max-width: none; } }