/* Page de démonstration Velkora : sobre, lisible, sans décor. Papier chaud, encre, un seul vert. */
:root { color-scheme: light; --papier: #f4f1ea; --encre: #1c1b19; --discret: #6b675e; --trait: #cfc9bc; --vert: #1f5c4a; --rouge: #9b2c1f; }
* { box-sizing: border-box; }
html { background: var(--papier); }
body { margin: 0 auto; max-width: 46rem; padding: 1.5rem 1.25rem 4rem; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--encre); }
header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--encre); }
h1 { margin: 0; font-size: 2rem; line-height: 1.1; letter-spacing: -0.01em; }
h2 { margin: 2.5rem 0 0.5rem; font-size: 1.15rem; }
h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.marque { margin: 0 0 0.25rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--discret); }
.aide { margin: 0 0 1rem; color: var(--discret); }
button { min-height: 44px; padding: 0 1rem; font: inherit; font-weight: 600; color: var(--encre); background: none; border: 1px solid var(--encre); border-radius: 2px; cursor: pointer; }
button:hover:not(:disabled) { background: var(--encre); color: var(--papier); }
button:disabled { color: var(--discret); border-color: var(--trait); cursor: not-allowed; }
button.principal { background: var(--vert); border-color: var(--vert); color: #fff; }
button.principal:hover:not(:disabled) { background: #174537; border-color: #174537; color: #fff; }
button.danger { border-color: var(--rouge); color: var(--rouge); }
button.danger:hover:not(:disabled) { background: var(--rouge); color: #fff; }
:focus-visible { outline: 3px solid #e8a317; outline-offset: 2px; }

.profils { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--trait); }
.profil { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--trait); border-left: 4px solid transparent; }
.profil.actif { background: #e9efe9; border-left-color: var(--vert); }
.profil input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--vert); }
.profil label { display: grid; cursor: pointer; }
.profil .nom { font-weight: 700; }
.profil .coordonnees { color: var(--discret); font-size: 0.9rem; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.actions button { min-height: 36px; padding: 0 0.75rem; font-size: 0.9rem; }

.formulaire { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--encre); background: #fbf9f4; }
label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; font-weight: 600; }
input[type="text"], input[type="tel"], input[type="email"], input[type="password"] { width: 100%; min-height: 44px; padding: 0 0.6rem; font: inherit; color: var(--encre); background: #fff; border: 1px solid var(--discret); border-radius: 2px; }
.rang { display: flex; gap: 0.5rem; margin-top: 1rem; }
.erreur { color: var(--rouge); font-weight: 600; }

.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.demo { display: grid; gap: 0.25rem; min-height: 5.5rem; padding: 1rem; text-align: left; border-width: 2px; }
.demo .nom { font-size: 1.15rem; }
.demo .detail { font-weight: 400; font-size: 0.9rem; opacity: 0.8; }
.statut { min-height: 1.5rem; margin: 1rem 0 0; }
.statut a { color: var(--vert); font-weight: 700; }

body.connexion { max-width: 24rem; padding-top: 12vh; }
body.connexion h1 { margin-bottom: 1.25rem; }
body.connexion .message { margin: 0 0 1rem; padding: 0.6rem 0.75rem; border-left: 4px solid var(--rouge); background: #f6e5e1; font-weight: 600; }
body.connexion button { width: 100%; margin-top: 1.25rem; }

@media (max-width: 34rem) {
  .profil { grid-template-columns: auto 1fr; }
  .actions { grid-column: 1 / -1; justify-content: flex-start; }
}