/* Vantage RP — Accueil du panel V2. Une idée par bloc : qui tu es, où aller, l'appli, tes préférences. Règles : DESIGN.md. */
[data-c] { --c: #A78BFA; }
[data-c="pink"] { --c: #FF6FB5; }
[data-c="green"] { --c: #2FD3A6; }
[data-c="amber"] { --c: #F5A524; }
[data-c="blue"] { --c: #5AC8FA; }

/* Mode staff (« tu vois le panel de … ») : barre fixe tout en haut, au-dessus de la navigation */
.staff-view { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 2.5rem; padding: env(safe-area-inset-top, 0px) var(--gutter) 0; background: #C7362C; color: #fff; font-size: .875rem; }
.staff-view a { padding: .25rem .75rem; border-radius: var(--pill); background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }
body.has-staff-view { padding-top: 2.5rem; }
body.has-staff-view .pnav { top: 2.5rem; }
body.has-staff-view .appbar { top: 2.5rem; }

#siteAlerts { display: contents; }
.ga-mkt { box-shadow: inset 3px 0 0 var(--pink); }
.ga-mkt .btn { flex: none; }

.home { width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.75rem var(--gutter) calc(4rem + env(safe-area-inset-bottom, 0px)); }

/* ── Qui tu es ── */
.home-brand { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.home-hero .h1 { margin-top: .375rem; font-size: 2.75rem; }
.grad { background: linear-gradient(90deg, var(--violet-hi), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-sub { margin-top: .5rem; max-width: 38rem; font-size: 1.0625rem; line-height: 1.47; color: var(--text-2); }
.home-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; list-style: none; padding: 0; }
.home-chips li { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: 0 .375rem 0 .875rem; border-radius: var(--pill); background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); font-size: .875rem; }
.home-chips li:not(:has(.chip-copy)) { padding-right: .875rem; }
.home-chips span { color: var(--muted); }
.home-chips b { font-weight: 600; color: var(--text); }
.home-chips .ill b { color: #FF8A80; }
.chip-copy { min-height: 1.625rem; padding: 0 .625rem; border-radius: var(--pill); background: var(--tile-2); color: var(--violet-hi); font-size: .75rem; font-weight: 600; }
.chip-copy:active { transform: scale(.96); }
.home-switch { margin-top: 1rem; }
.home-guest { margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--r-card); background: var(--tile); box-shadow: inset 3px 0 0 var(--amber); font-size: .9375rem; color: var(--text-2); }

/* ── Sections ── */
.home-sec { margin-top: 2.75rem; }
.home-sec > .h4 { margin-bottom: 1rem; }

/* ── Jeu : grandes cartes ── */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .75rem; }
.h-card { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 6rem; padding: 1.25rem; border-radius: var(--r-card); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--tile); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.05); transition: transform 160ms var(--ease-out), box-shadow 160ms ease; }
.h-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .h-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); } }
.h-card.wide { grid-column: span 2; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--tile); }
.h-ico { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .875rem; color: var(--c); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%), #17161B; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.h-ico svg { width: 1.5rem; height: 1.5rem; }
.h-txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.h-t { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.012em; }
.h-d { font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.h-chev { display: inline-block; width: .5rem; height: .5rem; margin-right: .25rem; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); opacity: .7; }

/* ── Communauté : liste ── */
a.row { transition: background-color 160ms ease; }
a.row:active { background: var(--tile-2); }
@media (hover: hover) and (pointer: fine) { a.row:hover { background: #17161B; } }
.row .ico svg { width: 1.25rem; height: 1.25rem; color: var(--text-2); }
.g-ini { font-weight: 700; color: var(--violet-hi); }
.row[aria-current="true"] { background: rgba(139,92,246,.08); }
.row[hidden] { display: none !important; }

/* ── Application ── */
.home-app { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: var(--r-card); background: var(--tile); }
.home-app b { display: block; font-size: 1.0625rem; font-weight: 600; }
.home-app b + span { display: block; margin-top: .125rem; font-size: .9375rem; line-height: 1.4; color: var(--muted); }

/* ── Préférences ── */
.home-sec .group .row { padding: .75rem 1rem .75rem 1.25rem; min-height: 3.5rem; }
.row.pref { grid-template-columns: minmax(0, 1fr) auto; }
.home-sec .seg button { min-height: 2rem; padding: 0 .875rem; font-size: .875rem; }
.home-sec .seg [aria-checked="true"] { background: var(--tile-2); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

.steps { margin: 0; padding-left: 1.25rem; display: grid; gap: .375rem; color: var(--text-2); font-size: .9375rem; line-height: 1.45; }
.inst[hidden] { display: none; }
.home-foot { margin-top: 3rem; text-align: center; font-size: .8125rem; color: var(--muted); }

/* ── Téléphone ── */
@media (max-width: 734px) {
  .home { padding-top: 1.25rem; }
  .home-hero .h1 { font-size: 2.125rem; }
  .home-sub { font-size: .9375rem; }
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .h-card { min-height: 0; padding: 1rem; }
  .h-card.wide { grid-column: auto; }
  .home-app { grid-template-columns: 3rem minmax(0, 1fr); }
  .home-app .btn { grid-column: 1 / -1; }
  .home-sec { margin-top: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) { .h-card { transition: none; } .h-card:active { transform: none; } }