/* Appli technicien : mise en page « téléphone + pupitre de démo ». Les composants communs sont dans ../assets/composants.css. */
/* ---------- Mise en page ---------- */
.layout{min-height:100%;display:flex;gap:40px;justify-content:center;align-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:32px}
.device{width:412px;height:min(860px,calc(100vh - 64px));min-height:640px;border-radius:28px;overflow:hidden;box-shadow:0 0 0 10px #10162A,0 30px 70px -20px rgba(0,0,0,.45);flex:none;position:relative}
.demo{width:340px;display:grid;gap:16px;align-content:start;color:var(--on-surface)}
@media (max-width:820px){
  .layout{padding:0;display:block;height:100%}
  .device{width:100%;height:100%;min-height:0;border-radius:0;box-shadow:none}
  .demo{display:none}
}

/* Pupitre de démo (ordinateur) */
.demo h2{margin:0;font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.demo p{margin:0;color:var(--on-surface-variant);line-height:1.5;font-size:15px}
.dcard{background:var(--surface);border-radius:16px;padding:16px;display:grid;gap:12px}
.dcard h3{margin:0;font-size:14px;font-weight:600;color:var(--primary)}
.dcard ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;line-height:1.45}
.drow{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px}