:root {
    --bg: #f5f2ef;
    --surface: #ffffff;
    --text: #1d1b1a;
    --muted: #746f6b;
    --border: #e4ded9;
    --brand: #5c4742;
    --brand-dark: #3f302c;
    --soft: #eee5df;
    --success: #17663a;
    --success-bg: #e9f7ef;
    --danger: #9a2e2e;
    --danger-bg: #fff0f0;
    --shadow: 0 14px 40px rgba(37, 28, 24, .08);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.04em; }
h2 { font-size: 1.25rem; }
p { color: var(--muted); line-height: 1.65; }
small { color: var(--muted); }
code { background: #f3efec; padding: .25rem .45rem; border-radius: .4rem; }

.brand, .admin-brand { display: inline-flex; align-items: center; gap: .75rem; font-weight: 800; letter-spacing: .04em; }
.brand-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--brand); color: #fff; font-size: .9rem; }
.public-header { max-width: 1180px; margin: auto; padding: 1.3rem 1.5rem; }
.public-main { max-width: 1180px; margin: auto; padding: 2rem 1.5rem 5rem; min-height: calc(100vh - 150px); }
.public-footer { text-align: center; padding: 1.5rem; color: var(--muted); border-top: 1px solid var(--border); }
.eyebrow { display: inline-block; margin-bottom: 1rem; font-size: .75rem; font-weight: 800; letter-spacing: .16em; color: var(--brand); }

.hero { min-height: 68vh; display: grid; grid-template-columns: 1.1fr .9fr; gap: 5rem; align-items: center; }
.hero > div:first-child { max-width: 650px; }
.hero p { font-size: 1.1rem; max-width: 600px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.steps article { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 1.6rem; }
.steps article > span { display: inline-block; margin-bottom: 2rem; color: var(--brand); font-weight: 800; }

.button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; border: 1px solid var(--brand); border-radius: 12px; padding: .75rem 1rem; background: var(--brand); color: #fff; font-weight: 700; }
.button:hover { background: var(--brand-dark); }
.button.large { padding: .95rem 1.25rem; }
.button.compact { padding: .55rem .8rem; font-size: .9rem; }
.button.secondary { background: transparent; color: var(--brand); }
.button.secondary:hover { background: var(--soft); }
.button.full { width: 100%; }
.button.disabled, .button:disabled { opacity: .5; cursor: not-allowed; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.5rem; box-shadow: var(--shadow); }
.form-page { max-width: 780px; margin: 1rem auto; }
.form-intro { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.form-panel { display: grid; gap: 1.1rem; }
.form-grid { display: grid; gap: 1rem; }
.form-grid.two { grid-template-columns: repeat(2, 1fr); }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
label { display: grid; gap: .45rem; font-weight: 650; font-size: .92rem; }
input, select, textarea { width: 100%; border: 1px solid #d8d0ca; border-radius: 11px; padding: .85rem .9rem; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(92, 71, 66, .13); border-color: var(--brand); }
input[type="color"] { min-height: 50px; padding: .3rem; }
.checkbox { display: grid; grid-template-columns: auto 1fr; align-items: start; font-weight: 400; line-height: 1.5; }
.checkbox input { width: 20px; height: 20px; margin-top: .1rem; }
.field-error { color: var(--danger); font-size: .82rem; }
.alert { padding: 1rem 1.2rem; margin-bottom: 1.2rem; border-radius: 12px; }
.alert.success { color: var(--success); background: var(--success-bg); }
.alert.error { color: var(--danger); background: var(--danger-bg); }
.alert ul { margin-bottom: 0; }

.wallet-card { position: relative; overflow: hidden; width: min(100%, 420px); aspect-ratio: 1.58; border-radius: 24px; padding: 1.5rem; background: var(--card-bg); color: var(--card-text); box-shadow: 0 26px 70px rgba(51, 37, 31, .25); }
.wallet-card::after { content: ""; position: absolute; inset: auto -80px -110px auto; width: 260px; height: 260px; border-radius: 50%; background: var(--card-accent); opacity: .18; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .72rem; letter-spacing: .12em; }
.card-top strong { font-size: 1rem; }
.card-name { margin-top: 2.8rem; font-size: 1.05rem; }
.card-points { margin-top: .2rem; font-size: 3rem; font-weight: 850; line-height: 1; letter-spacing: -.04em; }
.card-points small { display: block; margin-top: .4rem; color: inherit; font-size: .65rem; letter-spacing: .14em; opacity: .85; }
.fake-qr, .qr-wrap { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 78px; height: 78px; padding: .4rem; border-radius: 10px; background: #fff; }
.fake-qr { background-color: #fff; background-image: repeating-linear-gradient(45deg, #111 0 3px, transparent 3px 7px), repeating-linear-gradient(-45deg, #111 0 3px, transparent 3px 7px); }
.qr-wrap { width: 102px; height: 102px; display: grid; place-items: center; }
.qr-wrap canvas, .qr-wrap img { width: 88px !important; height: 88px !important; }
.card-code { position: absolute; left: 1.5rem; bottom: 1.5rem; font-size: .68rem; letter-spacing: .09em; opacity: .8; }
.demo-card { transform: rotate(2deg); }
.card-page { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; min-height: 70vh; }
.card-page-copy { max-width: 520px; }
.wallet-buttons { display: grid; gap: .7rem; max-width: 360px; margin: 1.5rem 0; }
.wallet-button { display: grid; text-align: left; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: #111; color: #fff; font-weight: 700; }
.wallet-button small { color: #bbb; font-weight: 400; }
.wallet-button.disabled { opacity: .55; }
.privacy-note { font-size: .86rem; }
.customer-card { width: min(100%, 460px); }

.login-page { display: grid; place-items: center; min-height: 65vh; }
.login-panel { width: min(100%, 460px); display: grid; gap: 1rem; }
.login-panel h1 { font-size: 2.2rem; }

.admin-body { background: #f4f3f1; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; background: #171717; color: #fff; padding: 1.2rem; display: flex; flex-direction: column; z-index: 20; }
.admin-brand { padding: .3rem .2rem 1.5rem; }
.admin-brand small { display: block; color: #9d9996; font-weight: 500; letter-spacing: .08em; }
.sidebar nav { display: grid; gap: .3rem; }
.sidebar nav a { padding: .8rem .9rem; border-radius: 10px; color: #c9c6c4; }
.sidebar nav a:hover, .sidebar nav a.active { background: #2b2928; color: #fff; }
.logout-form { margin-top: auto; }
.link-button { border: 0; background: transparent; color: #b9b5b2; padding: .8rem .9rem; }
.admin-shell { margin-left: 250px; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; min-height: 72px; padding: .8rem 1.5rem; background: rgba(255,255,255,.93); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.topbar small { display: block; margin-top: .15rem; }
.menu-button { display: none; border: 0; background: transparent; font-size: 1.4rem; }
.admin-main { padding: 1.8rem; max-width: 1500px; margin: auto; }
.page-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.page-heading h1 { font-size: 2.1rem; margin-bottom: .4rem; }
.page-heading p { margin-bottom: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.3rem; }
.metric-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 1.3rem; }
.metric-card span, .metric-card small { display: block; }
.metric-card strong { display: block; margin: .6rem 0; font-size: 1.8rem; letter-spacing: -.04em; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.panel-heading h2, .panel-heading p { margin-bottom: .2rem; }
.panel-heading a { color: var(--brand); font-weight: 700; }
.table-wrap { overflow-x: auto; margin-inline: -1.5rem; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: .9rem 1rem; border-top: 1px solid var(--border); text-align: left; font-size: .9rem; }
th { color: var(--muted); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
td a { color: var(--brand); }
.empty { padding: 2rem; text-align: center; color: var(--muted); }
.positive { color: var(--success); font-weight: 750; }
.negative { color: var(--danger); font-weight: 750; }
.pagination { padding-top: 1rem; }
.search-form { display: grid; grid-template-columns: 1fr auto auto; gap: .7rem; margin-bottom: 1rem; }

.scan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; }
.scan-panel { max-width: 760px; }
.camera-reader { overflow: hidden; border-radius: 14px; margin: 1.2rem 0; background: #f5f3f1; }
.scan-help hr, .form-panel hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }

.customer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.customer-header h1 { font-size: 2.4rem; margin: .5rem 0; }
.status-badge { display: inline-block; padding: .3rem .55rem; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.balance-block { text-align: right; }
.balance-block span, .balance-block small { display: block; }
.balance-block strong { display: block; font-size: 3.2rem; line-height: 1; }
.customer-grid { display: grid; grid-template-columns: 1fr 1fr .85fr; gap: 1rem; margin-bottom: 1rem; }
.customer-grid form { display: grid; gap: 1rem; }
.money-input { position: relative; }
.money-input input { padding-right: 3rem; }
.money-input span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.computed-points { padding: .8rem 1rem; border-radius: 10px; background: var(--soft); }
.customer-details dl { margin: 0 0 1rem; }
.customer-details dl > div { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.customer-details dt { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.customer-details dd { margin: .25rem 0 0; word-break: break-word; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 1rem; align-items: start; }
.preview-panel { position: sticky; top: 92px; }
.preview-card { margin: 1rem auto 1.5rem; }
.notice { padding: 1rem; border-radius: 12px; background: var(--soft); }
.notice p { margin: .4rem 0 0; font-size: .88rem; }
.feature-lock { max-width: 820px; text-align: center; padding: 3rem; }
.feature-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 20px; background: var(--soft); color: var(--brand); font-size: 2rem; }
.future-form { display: grid; gap: 1rem; max-width: 520px; margin: 2rem auto 0; text-align: left; }

@media (max-width: 1100px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .customer-grid { grid-template-columns: 1fr 1fr; }
    .customer-details { grid-column: 1 / -1; }
    .settings-grid { grid-template-columns: 1fr; }
    .preview-panel { position: static; }
}

@media (max-width: 850px) {
    .hero, .card-page { grid-template-columns: 1fr; gap: 2rem; }
    .hero { padding-top: 2rem; }
    .hero .wallet-card, .card-page .wallet-card { justify-self: center; }
    .steps { grid-template-columns: 1fr; }
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 12px 0 40px rgba(0,0,0,.2); }
    .sidebar.open { transform: translateX(0); }
    .admin-shell { margin-left: 0; }
    .menu-button { display: block; }
    .topbar { justify-content: flex-start; gap: 1rem; }
    .topbar > a { margin-left: auto; }
    .scan-layout { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .public-main, .admin-main { padding: 1rem; }
    .public-header { padding-inline: 1rem; }
    h1 { font-size: 2.5rem; }
    .form-grid.two, .form-grid.three, .metric-grid, .customer-grid { grid-template-columns: 1fr; }
    .page-heading, .customer-header { align-items: stretch; flex-direction: column; }
    .balance-block { text-align: left; padding-top: 1rem; border-top: 1px solid var(--border); }
    .search-form { grid-template-columns: 1fr; }
    .panel { padding: 1.1rem; border-radius: 16px; }
    .table-wrap { margin-inline: -1.1rem; }
    .wallet-card { border-radius: 20px; padding: 1.2rem; }
    .card-name { margin-top: 2rem; }
    .card-points { font-size: 2.5rem; }
    .qr-wrap, .fake-qr { right: 1.2rem; bottom: 1.2rem; }
    .card-code { left: 1.2rem; bottom: 1.2rem; }
}

/* v0.1.3 — suppression sécurisée d'une cliente */
.button.danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}
.button.danger:hover { background: #762222; }
.danger-zone {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #efcaca;
}
.danger-zone h3 {
    margin-bottom: .35rem;
    color: var(--danger);
    font-size: 1rem;
}
.danger-zone p {
    margin-bottom: .9rem;
    color: #7e4b4b;
    font-size: .84rem;
    line-height: 1.5;
}

/* ===== Version 0.2.0 : espace cliente, récompenses et sécurité ===== */
.public-nav, .hero-actions, .account-actions, .quick-actions, .form-actions, .inline-form { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.public-header { gap:1rem; }
.public-nav { margin-left:auto; }
.hero-actions { margin-top:1.4rem; }
.account-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:1rem 0 1.5rem; }
.account-heading h1 { margin:.35rem 0; }
.account-heading p { margin:0; }
.account-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:1rem; margin-bottom:1rem; align-items:stretch; }
.account-card-panel { display:grid; place-items:center; }
.compact-wallet-buttons { width:100%; max-width:460px; grid-template-columns:1fr 1fr; margin-bottom:0; }
.progress-panel { display:flex; flex-direction:column; justify-content:center; }
.next-reward-line { display:flex; gap:1rem; align-items:center; margin:1rem 0; }
.next-reward-line h2, .next-reward-line p { margin:0; }
.progress-track { height:16px; overflow:hidden; border-radius:999px; background:#eee7e2; margin:1rem 0 .7rem; }
.progress-track span { display:block; height:100%; border-radius:inherit; background:var(--brand); transition:width .35s ease; }
.reward-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.reward-card { border:1px solid var(--border); border-radius:18px; padding:1.2rem; background:#fff; display:flex; flex-direction:column; gap:.7rem; min-height:235px; }
.reward-card h3, .reward-card p { margin:0; }
.reward-card p { flex:1; }
.reward-card.locked { opacity:.65; background:#f7f5f3; }
.reward-card.available { border-color:#bca69b; box-shadow:0 10px 32px rgba(92,71,66,.09); }
.reward-card.issued { min-height:auto; background:#f7f1ed; border:2px solid #c7ada1; }
.reward-icon { font-size:2rem; line-height:1; }
.redemption-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.1rem; font-weight:800; letter-spacing:.06em; padding:.7rem; border-radius:10px; background:#fff; border:1px dashed var(--brand); text-align:center; }
.reward-missing { padding:.65rem .75rem; border-radius:10px; background:var(--soft); font-size:.86rem; font-weight:700; }
.issued-panel { border-color:#c7ada1; }
.customer-search-form { grid-template-columns:minmax(220px,1fr) 160px auto auto; }
.status-badge.archived { background:#eee8e4; color:#6e5f59; }
.status-badge.blocked { background:var(--danger-bg); color:var(--danger); }
.sidebar-user { margin-top:auto; padding:.8rem .9rem 0; border-top:1px solid #343130; display:grid; }
.sidebar-user small { color:#9d9996; }
.logout-form { margin-top:.25rem; }
.quick-actions { display:flex; gap:.7rem; margin-bottom:1rem; }
.notice-inline { padding:.7rem .8rem; background:var(--soft); border-radius:10px; font-size:.85rem; }
.stacked { flex-direction:column; align-items:stretch; }
.highlight-row { background:#fff4d6; }
.muted-row { opacity:.55; text-decoration:none; }
.muted-row td { background:#f7f5f3; }
.reverse-form { display:grid; grid-template-columns:minmax(170px,1fr) auto; gap:.4rem; min-width:280px; }
.reverse-form input { padding:.55rem .65rem; }
.lifecycle-panel { margin-top:1rem; }
.lifecycle-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.lifecycle-grid form { padding:1rem; border:1px solid var(--border); border-radius:14px; }
.reward-admin-list { display:grid; gap:1rem; }
.reward-admin-card { display:grid; grid-template-columns:70px minmax(0,1fr) auto; gap:1rem; align-items:start; border:1px solid var(--border); border-radius:16px; padding:1rem; }
.reward-admin-icon { width:60px; height:60px; display:grid; place-items:center; border-radius:16px; background:var(--soft); font-size:2rem; }
.reward-admin-actions { align-self:center; }
.rewards-admin-grid { margin-bottom:1rem; }
.form-actions { margin-top:.5rem; }
.button.disabled { opacity:.55; cursor:not-allowed; }

@media (max-width: 1000px) {
    .reward-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .account-grid { grid-template-columns:1fr; }
    .lifecycle-grid { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
    .public-header { align-items:center; }
    .public-nav .button { padding:.65rem .8rem; }
    .account-heading { align-items:flex-start; flex-direction:column; }
    .reward-grid, .compact-wallet-buttons { grid-template-columns:1fr; }
    .customer-search-form { grid-template-columns:1fr; }
    .reward-admin-card { grid-template-columns:1fr; }
    .reward-admin-icon { width:52px; height:52px; }
    .reverse-form { grid-template-columns:1fr; min-width:220px; }
}

.reward-qr { width:128px; height:128px; display:grid; place-items:center; background:#fff; border-radius:14px; padding:8px; margin:.2rem auto; }
.reward-qr img, .reward-qr canvas { width:112px !important; height:112px !important; }

/* ===== Version 0.2.1 : cohérence UX, responsive mobile et PWA ===== */
:root {
    --page-pad: clamp(1rem, 2.4vw, 2rem);
    --section-gap: clamp(1rem, 2vw, 1.5rem);
    --section-gap-lg: clamp(1.5rem, 3vw, 2.5rem);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; }

/* En-tête public : logo et connexion restent sur la même ligne. */
.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 82px;
    padding-top: max(1.15rem, var(--safe-top));
    padding-right: max(1.5rem, var(--safe-right));
    padding-bottom: 1.15rem;
    padding-left: max(1.5rem, var(--safe-left));
}
.public-header .brand { min-width: 0; flex: 1 1 auto; }
.public-header .brand > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.public-nav { margin-left: 0; flex: 0 0 auto; }
.public-nav .button { white-space: nowrap; }
.public-main {
    padding-right: max(1.5rem, var(--safe-right));
    padding-bottom: max(5rem, calc(3.5rem + var(--safe-bottom)));
    padding-left: max(1.5rem, var(--safe-left));
}

/* Accueil : respiration régulière entre le visuel de carte et la section suivante. */
.hero {
    min-height: auto;
    padding-block: clamp(2.5rem, 6vw, 5rem);
    margin-bottom: clamp(2.25rem, 5vw, 4rem);
}
.hero-actions { align-items: stretch; }
.hero-actions .button { min-height: 52px; }
.demo-card { margin-block: .75rem; }
.steps { margin-top: 0; }

/* Pages publiques et espace cliente : même rythme vertical. */
.account-page,
.admin-page {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    min-width: 0;
}
.account-page { padding-bottom: clamp(1rem, 3vw, 2rem); }
.account-heading,
.account-grid,
.account-page > .panel,
.admin-page > .page-heading,
.admin-page > .metric-grid,
.admin-page > .panel,
.admin-page > .quick-actions {
    margin: 0;
}
.account-heading { padding-block: .25rem; }
.account-grid { gap: var(--section-gap); }
.account-card-panel {
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}
.account-card-panel .customer-card { margin-bottom: .25rem; }
.progress-panel { padding: clamp(1.25rem, 3vw, 2rem); }
.reward-grid { gap: var(--section-gap); }
.reward-card { min-width: 0; }
.account-actions .link-button { border: 1px solid var(--brand); border-radius: 12px; color: var(--brand); padding: .75rem 1rem; font-weight: 700; }
.account-actions .link-button:hover { background: var(--soft); }

/* Administration : marges homogènes sur toutes les pages. */
.admin-main {
    max-width: 1500px;
    padding-top: var(--page-pad);
    padding-right: max(var(--page-pad), var(--safe-right));
    padding-bottom: max(2.5rem, calc(1.5rem + var(--safe-bottom)));
    padding-left: max(var(--page-pad), var(--safe-left));
}
.page-heading { margin-bottom: 0; }
.metric-grid { margin-bottom: 0; }
.quick-actions { margin-bottom: 0; padding: 1rem; }
.panel + .panel { margin-top: 0; }
.topbar {
    padding-right: max(1.5rem, var(--safe-right));
    padding-left: max(1.5rem, var(--safe-left));
}
.table-wrap {
    border-radius: 0 0 14px 14px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* Tables importantes transformées en cartes sur petit écran. */
@media (max-width: 700px) {
    table.responsive-cards { min-width: 0; }
    table.responsive-cards thead { display: none; }
    table.responsive-cards,
    table.responsive-cards tbody,
    table.responsive-cards tr,
    table.responsive-cards td { display: block; width: 100%; }
    table.responsive-cards tbody { display: grid; gap: .75rem; padding: .25rem 0; }
    table.responsive-cards tr {
        padding: .55rem .85rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #fff;
    }
    table.responsive-cards td {
        display: grid;
        grid-template-columns: minmax(96px, .8fr) minmax(0, 1.2fr);
        gap: .75rem;
        align-items: start;
        padding: .55rem 0;
        border-top: 1px solid var(--border);
        overflow-wrap: anywhere;
    }
    table.responsive-cards td:first-child { border-top: 0; }
    table.responsive-cards td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    table.responsive-cards td.empty { display: block; text-align: center; }
    table.responsive-cards td.empty::before { content: none; }
}

/* Bouton et aide d'installation PWA. */
.pwa-install-button[hidden],
.pwa-ios-hint[hidden] { display: none !important; }
.pwa-ios-hint {
    width: 100%;
    margin: .2rem 0 0;
    padding: .8rem .95rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.62);
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
}

/* Mode application installée : prend correctement en compte les zones sûres iOS. */
@media (display-mode: standalone) {
    .public-header,
    .topbar { padding-top: max(1rem, var(--safe-top)); }
    .public-footer { padding-bottom: max(1.5rem, calc(1rem + var(--safe-bottom))); }
}

@media (max-width: 850px) {
    .hero { padding-top: clamp(2.5rem, 8vw, 4rem); gap: 2.75rem; }
    .hero .wallet-card { margin-bottom: .75rem; }
    .admin-main { padding-top: 1rem; }
}

@media (max-width: 650px) {
    .public-header {
        min-height: 72px;
        padding-top: max(.9rem, var(--safe-top));
        padding-right: max(1rem, var(--safe-right));
        padding-bottom: .9rem;
        padding-left: max(1rem, var(--safe-left));
    }
    .brand { gap: .6rem; font-size: .98rem; letter-spacing: .025em; }
    .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
    .public-nav .button { padding: .65rem .8rem; font-size: .86rem; }
    .public-main {
        padding-top: 1.25rem;
        padding-right: max(1rem, var(--safe-right));
        padding-left: max(1rem, var(--safe-left));
    }
    .hero {
        padding-top: 2.25rem;
        padding-bottom: 0;
        margin-bottom: 2.75rem;
    }
    .hero p { font-size: 1rem; }
    .hero-actions { width: 100%; gap: .65rem; }
    .hero-actions .button { flex: 1 1 145px; padding-inline: .85rem; }
    .demo-card { margin-top: .75rem; margin-bottom: .5rem; }
    .steps article { padding: 1.35rem; }

    .account-heading { gap: .85rem; }
    .account-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .account-actions > a,
    .account-actions > form,
    .account-actions button { width: 100%; }
    .account-card-panel,
    .progress-panel { padding: 1rem; }
    .account-card-panel { gap: 1rem; }
    .compact-wallet-buttons { gap: .6rem; }
    .reward-card { min-height: 0; padding: 1rem; }
    .next-reward-line { align-items: flex-start; }

    .admin-main {
        padding-right: max(1rem, var(--safe-right));
        padding-left: max(1rem, var(--safe-left));
    }
    .topbar {
        min-height: 66px;
        padding-right: max(1rem, var(--safe-right));
        padding-left: max(1rem, var(--safe-left));
    }
    .topbar > div { min-width: 0; }
    .topbar > div strong,
    .topbar > div small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .page-heading h1 { font-size: 1.85rem; }
    .quick-actions { display: grid; grid-template-columns: 1fr; }
    .quick-actions .button { width: 100%; }
    .metric-card { padding: 1.1rem; }
    .metric-card strong { font-size: 1.65rem; }
    .panel-heading { align-items: flex-start; }
}

@media (max-width: 390px) {
    .public-header .brand > span:last-child { font-size: .9rem; }
    .public-nav .button { padding-inline: .65rem; }
    h1 { font-size: 2.15rem; }
    .account-actions { grid-template-columns: 1fr; }
    .wallet-card { padding: 1rem; }
    .card-top { gap: .5rem; font-size: .62rem; }
    .card-top strong { font-size: .88rem; }
    .card-name { margin-top: 1.65rem; }
    .card-points { font-size: 2.2rem; }
}