:root{
  --fond:#0b1030; --fond-2:#161d45; --carte:#141a3d; --trait:rgba(255,255,255,.10);
  --texte:#eef1fb; --texte-2:#b7c0e6; --texte-3:#7c86b5; --bleu:#3a7bff; --bleu-clair:#5b93ff;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--fond);color:var(--texte);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
.page{max-width:1000px;margin:0 auto;padding:24px;}
.entete{margin-bottom:20px;}
.entete h1{font-size:20px;font-weight:800;margin:0;}
.contenu{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start;}
@media (max-width:820px){.contenu{grid-template-columns:1fr;}}

.apercu-bloc{position:sticky;top:24px;display:flex;flex-direction:column;gap:10px;}
.aide{font-size:12.5px;color:var(--texte-3);margin:0;}
#apercu{width:100%;aspect-ratio:1080/1350;border-radius:12px;border:1px solid var(--trait);background:#000;display:block;cursor:move;touch-action:none;}

.bouton{border:1px solid var(--trait);background:var(--fond-2);color:var(--texte);border-radius:10px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;}
.bouton:hover{border-color:var(--bleu-clair);}
.bouton--principal{background:var(--bleu);border-color:var(--bleu);}
.bouton--principal:hover{background:var(--bleu-clair);}

.reglages{display:flex;flex-direction:column;gap:14px;}
.titre-section{font-size:12.5px;font-weight:700;color:var(--texte-2);margin:0 0 8px;}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:12px;padding:12px;}
textarea{width:100%;background:var(--fond-2);border:1px solid var(--trait);border-radius:10px;color:var(--texte);padding:10px 12px;font:inherit;resize:vertical;}