/* Espace utilisateur : compléments à site.css (feuille de la boutique) */
.espace .site-header { background: rgba(244, 242, 237, .9); }
.espace .header-link.is-active { background: rgba(127,127,127,.15); }
.header-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--white); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
@media (max-width: 420px) { .header-cta { padding: 0 12px; font-size: 14px; } }

.section-title { font-size: clamp(24px, 5vw, 32px); margin: 36px 0 14px; }
.stack { display: grid; gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row-between { justify-content: space-between; }

/* Cartes de modules */
.modules { display: grid; gap: 16px; }
@media (min-width: 760px) { .modules { grid-template-columns: repeat(2, 1fr); } }
.module-card { position: relative; display: grid; gap: 14px; padding: 22px; border-radius: var(--radius); background: var(--white); text-decoration: none; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.module-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--m1), var(--m2), var(--rer-a), var(--m12), var(--m4)); }
a.module-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(13,15,20,.45); }
.module-card h3 { font-size: 22px; }
.module-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--paper); font-size: 13px; font-weight: 600; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ink-soft)); }
.pill-ok { --c: var(--ok); }
.pill-warn { --c: var(--m5); }
.pill-off { --c: var(--danger); }
.pill-plain::before { display: none; }

.empty { text-align: center; padding: 44px 24px; }
.empty .btn { margin-top: 10px; }

/* Listes de propriétés */
.props { display: grid; gap: 0; margin: 0; }
.props > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.props > div:last-child { border-bottom: 0; }
.props dt { color: var(--ink-soft); font-size: 14px; }
.props dd { margin: 0; font-weight: 500; word-break: break-word; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }

/* Transports et designs */
.transports { display: grid; gap: 10px; }
.transport { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--paper); }
.transport-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--ink)); color: #fff; font: 700 13px/1 var(--font-display); }
.transport b { display: block; }
.transport small { color: var(--ink-soft); }
.transport select { min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); font: inherit; }

.danger-zone { border: 1.5px solid #f3c9c7; }
.btn-danger { --bg: var(--danger); --fg: var(--white); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 14px; }

.serial-box { padding: 14px 16px; border-radius: 14px; background: var(--paper); word-break: break-all; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; }
.steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--m1); font: 700 13px/1 var(--font-display); }
.toast { animation-fill-mode: both; }
.design-details { grid-column: 1 / -1; }
.design-details summary { cursor: pointer; font-size: 14px; color: var(--ink-soft); }
.design-details .design-preview { margin-top: 10px; max-width: 100%; }