/* Pages de la plateforme (accueil, inscription, compte) : complète site.css */
.flag { display: block; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.flag-sm { display: inline-block; vertical-align: middle; border-radius: 3px; }
.flag-lg { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow-lg); }
.portal .brand .flag { width: 46px; height: auto; }
.p-hero .hero-text h1 { max-width: 15ch; }
.p-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.p-hero-card { margin: 0; justify-self: center; width: min(100%, 420px); text-align: center; }
.p-hero-card figcaption { margin-top: 14px; color: var(--ink-2); font-size: .95rem; }
.p-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: s; }
.p-steps li { background: var(--card); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); position: relative; }
.p-steps span { width: 42px; height: 42px; border-radius: 50%; background: var(--a); color: var(--on-a); display: grid; place-items: center; font: 700 1.15rem var(--font); margin-bottom: 12px; }
.p-steps p { color: var(--ink-2); margin: 0; }
.p-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.p-checks li { align-items: flex-start; font-size: 1rem; }
.p-checks .ic { color: var(--p); margin-top: 3px; }
.p-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.p-site { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.p-site img, .p-site-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--mist-2); display: block; }
.p-site-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.p-site-body span { color: var(--muted); font-size: .9rem; }
.p-motto { font: italic 400 1.2rem var(--serif); color: var(--a); }
.slug-field { display: flex; align-items: stretch; margin-top: 6px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; overflow: hidden; }
.slug-field:focus-within { border-color: var(--p); box-shadow: 0 0 0 4px var(--p-s); }
.slug-field input { border: 0; margin: 0; box-shadow: none !important; min-width: 0; flex: 1; padding-inline: 4px; }
.slug-pre, .slug-post { display: flex; align-items: center; padding: 0 10px; background: var(--p-xs); color: var(--muted); font-weight: 500; white-space: nowrap; }
.slug-msg { display: block; margin-top: 6px; font-weight: 500; }
.slug-msg.ok { color: var(--ok); }
.slug-msg.err { color: var(--err); }
.p-presets { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px 4px; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.p-presets legend { font-size: .88rem; font-weight: 600; color: var(--ink-2); padding: 0 6px; }
.p-presets label.check { background: transparent; border: 0; padding: 6px 0; align-items: center; margin: 0; }
.p-swatch { width: 28px; height: 18px; border-radius: 4px; display: inline-block; flex: none; }
.p-sitecard-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.p-sitecard-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.imp-bar { height: 8px; border-radius: 99px; background: var(--mist-2); overflow: hidden; margin: 4px 0 8px; }
.imp-bar span { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .4s; }
.row-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.row-form label { margin: 0; flex: 1 1 220px; }
.p-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.p-codes code { font-size: 1.1rem; letter-spacing: .08em; }
.p-qr { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 12px 0; }
.p-qr svg { border: 1px solid var(--line); border-radius: 10px; }
.p-secret { font-size: 1rem; word-break: break-all; background: var(--p-xs); padding: 8px 10px; border-radius: 8px; letter-spacing: .06em; }
.p-mfa-steps li { margin-bottom: 10px; }
.portal details summary.btn { margin: 6px 0; }
@media (max-width: 900px) { .p-steps, .p-cols, .p-presets { grid-template-columns: 1fr; } }
@media print { .site-header, .site-footer, .account-nav { display: none; } }
.p-cols .card > p:last-child { margin: 20px 0 0; }