/* Mise en page : en-tête, grille principale, panneaux, pied de page. */

.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; }
.brand strong { display: block; font-size: 15px; letter-spacing: -0.01em; }
.brand span { display: block; font-size: 13px; color: var(--muted); }
.privacy { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .privacy { display: none; } }

/* ---------- Mise en page ---------- */
.layout { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 24px; padding-bottom: 32px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 961px) { .form { position: sticky; top: 24px; } }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .wrap { padding: 0 16px; } .layout { padding-top: 16px; gap: 16px; } }

.result { padding: 24px; min-height: 420px; }
@media (max-width: 640px) { .result { padding: 16px; min-height: 0; } }

.foot { padding-bottom: 28px; font-size: 13px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
@media (min-width: 641px) { .foot { display: none; } }