/* App ABC — bleu marine, fond crème, titres à empattements.
   Mobile d'abord ; barre d'onglets en bas sous 768 px, menu horizontal au-dessus. */

:root {
  /* Charte Almach Conseil (présentation CRA V9) : Archivo, marine, bleu, crème, sable. */
  --navy: #08305E;
  --navy-deep: #062449;
  --blue: #0048B0;
  --blue-mid: #7FA8E0;
  --blue-soft: #E7EEF7;
  --cream: #F4F0E8;
  --sand: #ECE6DA;
  --paper: #FFFFFF;
  --ink: #1A1D24;
  --slate: #36414F;
  --muted: #6E7480;
  --line: #D9D1C3;
  --accent: #D81E2C;      /* touche rouge, réservée aux petits repères */
  --gold: #0048B0;        /* rangs du top 3 : bleu Almach */
  --gold-soft: #ECE6DA;   /* fonds de jauge : sable */
  --ok: #1F6E43;
  --ok-soft: #E3F0E8;
  --warn: #8A4B0F;
  --warn-soft: #F6EBDD;
  --off: #6E7480;
  --off-soft: #ECE6DA;
  --radius: 4px;
  --serif: 'Archivo', system-ui, sans-serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tabbar: 68px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 16px/1.5 var(--sans);
}
h1, h2, h3 { font-family: var(--serif); color: var(--navy); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.7rem; font-weight: 800; }
h2 { font-size: 1.12rem; font-weight: 700; }
a { color: var(--blue); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Structure ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 16px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.brand { white-space: nowrap; font-family: var(--serif); font-size: 1.5rem; font-weight: 900; color: var(--navy); text-decoration: none; letter-spacing: .04em; }
.brand small { display: none; font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.topnav { display: none; }
.topbar .spacer { flex: 1; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--navy);
}
.icon-btn:hover { background: var(--blue-soft); }
.badge {
  position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}

main { max-width: 1100px; margin: 0 auto; padding: 20px 16px calc(var(--tabbar) + 32px); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: var(--tabbar); padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper); border-top: 1px solid var(--line);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 500;
}
.tabbar a[aria-current="page"] { color: var(--navy); font-weight: 700; }
.tabbar a svg { width: 24px; height: 24px; }
.tabbar .tab-main span.plus {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-top: -18px; border-radius: 50%;
  background: var(--navy); color: #fff; box-shadow: 0 2px 8px rgba(19, 38, 63, .25);
}
.tabbar .tab-main { color: var(--navy); font-weight: 700; }

@media (min-width: 768px) {
  .tabbar { display: none; }
  main { padding-bottom: 48px; padding-top: 28px; }
  .topbar { height: 64px; padding: 0 24px; }
  .topnav { display: flex; gap: 4px; margin-left: 24px; }
  .topnav a {
    padding: 8px 12px; white-space: nowrap; border-radius: 6px; color: var(--muted); text-decoration: none; font-weight: 500;
  }
  .topnav a[aria-current="page"] { color: var(--navy); background: var(--blue-soft); font-weight: 600; }
  .topbar .btn-transmit { display: inline-flex; }
  .topbar { gap: 8px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .btn-transmit .lbl { display: none; }
  .topbar .btn-transmit { padding: 10px 12px; }
  .topnav { margin-left: 8px; gap: 0; }
  .topnav a { padding: 8px 9px; }
}
@media (min-width: 1200px) {
  .brand small { display: inline; }
  .topbar { gap: 12px; }
}

/* ---------- Composants ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--radius);
  border: 1px solid var(--navy); background: var(--paper); color: var(--navy);
  font-weight: 600; text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { background: var(--blue-soft); }
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-deep); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
.btn.block { width: 100%; }
.btn.link { border-color: transparent; background: none; color: var(--blue); padding-left: 0; padding-right: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-transmit { display: none; }

.panel { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: var(--radius); }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section > .section-head h2::after { content: ''; display: block; width: 28px; height: 3px; margin-top: 6px; background: var(--accent); }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); margin: 0 0 8px; }
.eyebrow::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--accent); vertical-align: 1px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 600; font-size: .9rem;
  font-family: var(--sans); letter-spacing: .02em;
}
.avatar.lg { width: 72px; height: 72px; font-size: 1.4rem; }
.avatar.xl { width: 88px; height: 88px; font-size: 1.7rem; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.pill.todo { background: var(--warn-soft); color: var(--warn); }
.pill.doing { background: var(--blue-soft); color: var(--blue); }
.pill.done { background: var(--ok-soft); color: var(--ok); }
.pill.off { background: var(--off-soft); color: var(--off); }
.pill.gold { background: var(--navy); color: #fff; }

/* Liste « À faire » */
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.todo-list li:first-child { border-top: 0; }
.todo-list .txt { flex: 1; min-width: 0; }
.todo-list .txt strong { display: block; }
.todo-list .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) {
  .todo-list li { flex-wrap: wrap; }
  .todo-list .actions { width: 100%; justify-content: flex-start; padding-left: 52px; }
}
.empty { padding: 20px 16px; color: var(--muted); font-style: italic; }

/* Phrase du mois */
.month-sentence { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; line-height: 1.55; color: var(--ink); margin: 0; }
.month-sentence b { color: var(--navy); font-weight: 800; }
.seg { display: inline-flex; gap: 2px; padding: 3px; margin-top: 12px; border-radius: 999px; background: var(--off-soft); flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 12px; min-height: 36px; border-radius: 999px; cursor: pointer; font-size: .85rem; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Lignes de recos */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; }
.rows .grow { flex: 1; min-width: 0; }
.rows .grow span { display: block; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Top 3 */
.podium { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.podium li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); counter-increment: rank; }
.podium li:first-child { border-top: 0; }
.podium li::before { content: '0' counter(rank); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; background: var(--navy); color: #fff; font-weight: 700; font-size: .8rem; border-radius: 2px; }
.podium .val { margin-left: auto; font-weight: 700; color: var(--navy); }

/* Mise en page du tableau de bord */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.dash > *, .profile-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .dash { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .dash .side .section:first-child { margin-top: 0; }
}

/* ---------- Transmettre ---------- */

.flow { max-width: 640px; margin: 0 auto; }
.flow-head { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.flow-head h1 { flex: 1; font-size: 1.35rem; }
.steps { display: flex; gap: 6px; margin-bottom: 20px; }
.steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.steps span.on { background: var(--navy); }

.choice-grid { display: grid; gap: 12px; }
@media (min-width: 560px) { .choice-grid { grid-template-columns: repeat(3, 1fr); } }
.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer;
}
.choice:hover { border-color: var(--navy); }
.choice strong { font-family: var(--serif); font-weight: 800; font-size: 1.25rem; color: var(--navy); }
.choice span { color: var(--muted); font-size: .9rem; }

.search { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; margin-top: 16px; }
@media (min-width: 560px) { .people { grid-template-columns: repeat(6, 1fr); } }
.person {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px;
  border: 0; background: none; border-radius: var(--radius); cursor: pointer; text-align: center;
}
.person:hover { background: var(--blue-soft); }
.person .avatar { width: 56px; height: 56px; font-size: 1.05rem; }
.person span { font-size: .8rem; line-height: 1.2; }
.person small { color: var(--muted); font-size: .7rem; line-height: 1.2; }

.form { display: grid; gap: 16px; }
.field label, .field .label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.field .req { color: var(--warn); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #CFC9BE; border-radius: var(--radius); background: var(--paper);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input[type="radio"], .field input[type="checkbox"] { width: 20px; min-height: 0; padding: 0; flex-shrink: 0; }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.row2 { display: grid; gap: 16px; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid #CFC9BE; border-radius: 999px; background: var(--paper); cursor: pointer; font-size: .92rem;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { border-color: var(--navy); background: var(--navy); color: #fff; }
.chip:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }

.radios { display: grid; gap: 8px; }
.radio { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid #CFC9BE; border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.radio:has(input:checked) { border-color: var(--navy); background: var(--blue-soft); }
.radio input { width: 20px; height: 20px; accent-color: var(--navy); }

.flow-foot { position: sticky; bottom: calc(var(--tabbar) + 8px); padding-top: 12px; background: linear-gradient(transparent, var(--cream) 30%); }
@media (min-width: 768px) { .flow-foot { bottom: 0; padding-bottom: 12px; } }
.error { padding: 10px 14px; border-radius: var(--radius); background: #FDECEC; color: #9B1C1C; }

.done-screen { text-align: center; padding: 40px 0; }
.done-screen .check { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); align-items: center; justify-content: center; margin-bottom: 12px; }
.done-screen .btns { display: grid; gap: 10px; max-width: 320px; margin: 24px auto 0; }

.selected-person { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: var(--blue-soft); margin-bottom: 18px; }

/* ---------- Séance ---------- */

.banner { padding: 18px; border-radius: var(--radius); background: var(--navy); color: #fff; }
.banner h1, .banner h2 { color: #fff; }
.banner .muted { color: #C5D3E8; }
.banner.live { background: var(--navy); border-bottom: 4px solid var(--accent); }
.live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 6px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
@media (min-width: 560px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figure { text-align: center; padding: 12px 6px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.figure b { display: block; font-family: var(--serif); font-weight: 900; font-size: 1.6rem; color: var(--navy); line-height: 1.1; }
.figure span { font-size: .78rem; color: var(--muted); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: baseline; }
.feed li:first-child { border-top: 0; }
.feed time { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; width: 3.2em; flex-shrink: 0; }
.feed .amount { margin-left: auto; font-weight: 700; color: var(--navy); white-space: nowrap; }
.feed .kind { font-size: .78rem; color: var(--muted); }

/* ---------- Fiche membre ---------- */

.profile-head { display: flex; gap: 16px; align-items: center; }
.profile-head h1 { font-size: 1.5rem; }
.note-box { margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0; background: var(--blue-soft); }
.note-box p { margin: 4px 0 0; font-size: 1.1rem; font-weight: 600; color: var(--navy); }
.actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.services { list-style: none; margin: 0; padding: 0; }
.services li { display: flex; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line); }
.services li:first-child { border-top: 0; }
.services .num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; background: var(--navy); color: #fff; font-weight: 700; font-size: .85rem; border-radius: 2px; }
details.fold { border-top: 1px solid var(--line); }
details.fold:first-child { border-top: 0; }
details.fold summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; cursor: pointer; font-weight: 600; color: var(--navy); list-style: none; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::after { content: '+'; font-size: 1.3rem; color: var(--muted); }
details.fold[open] summary::after { content: '−'; }
details.fold .body { padding: 0 16px 16px; }
dl.kv { margin: 0; display: grid; gap: 10px; }
dl.kv dt { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
dl.kv dd { margin: 2px 0 0; }

.gauge { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); background: var(--gold-soft); }
.gauge .bar { height: 8px; border-radius: 4px; background: var(--line); margin: 8px 0; overflow: hidden; }
.gauge .bar span { display: block; height: 100%; background: var(--navy); }

.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
@media (min-width: 1024px) { .profile-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }

.qr { display: flex; justify-content: center; padding: 12px; }
.qr canvas, .qr img { width: 180px; height: 180px; }

/* Annuaire */
.directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (min-width: 560px) { .directory { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .directory { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .directory { gap: 6px; margin-top: 8px; }
  .directory .card-member { padding: 7px 6px 6px; gap: 2px; }
  .directory .card-member .avatar.lg { width: 44px; height: 44px; }
}
/* Cartes compactes : les 21 membres tiennent sur un écran (6 par ligne sur ordinateur). */
.card-member {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 9px; text-align: center; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: inherit; text-decoration: none;
}
.card-member:hover { border-color: var(--navy); }
.card-member .avatar.lg { width: 52px; height: 52px; font-size: 1.05rem; }
.card-member strong { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: .86rem; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
.card-member .job { font-size: .72rem; color: var(--muted); line-height: 1.25; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-member .fresh { position: absolute; top: 4px; right: 4px; font-size: .6rem; padding: 1px 6px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

/* Édition sur place */
.edit-block { padding: 16px; }
.svc-edit { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius); }

/* Panneau des notifications */
.drawer { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; background: rgba(19, 38, 63, .35); }
.drawer .inner { width: min(420px, 100%); height: 100%; overflow: auto; background: var(--paper); padding: 16px; }
.drawer ul { list-style: none; padding: 0; margin: 12px 0 0; }
.drawer li { padding: 12px 4px; border-top: 1px solid var(--line); }
.drawer li.unread strong { color: var(--navy); }

.dialog { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(19, 38, 63, .45); }
.dialog .inner { width: min(420px, 100%); max-height: 90vh; overflow: auto; background: var(--paper); border-radius: var(--radius); padding: 20px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 16px); transform: translateX(-50%); z-index: 60; padding: 12px 18px; border-radius: var(--radius); background: var(--navy-deep); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
@media (min-width: 768px) { .toast { bottom: 24px; } }

/* ---------- Connexion ---------- */

.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login .box { width: min(400px, 100%); }
.login .mark { font-family: var(--serif); font-size: 3.6rem; font-weight: 900; color: var(--navy); letter-spacing: .06em; line-height: 1; }
.login .club { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 8px 0 28px; }
.login .club::before { content: ''; display: block; width: 32px; height: 3px; background: var(--accent); margin-bottom: 12px; }

/* ---------- Projection (grand écran) ---------- */

body.projection { background: var(--navy); color: #fff; }
.proj { min-height: 100vh; display: flex; flex-direction: column; padding: 3vh 4vw; gap: 3vh; }
.proj header { display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; }
.proj header h1 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2.6rem); }
.proj header .when { color: #A9BCD8; font-size: clamp(1rem, 1.6vw, 1.6rem); }
.proj .big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; }
.proj .big div { text-align: center; padding: 2vh 1vw; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; }
.proj .big b { display: block; font-family: var(--serif); font-weight: 900; font-size: clamp(3rem, 7vw, 7.5rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.proj .big span { color: #A9BCD8; font-size: clamp(.9rem, 1.4vw, 1.4rem); }
.proj .cols { flex: 1; display: grid; grid-template-columns: 3fr 2fr; gap: 3vw; min-height: 0; }
.proj h2 { color: var(--blue-mid); font-family: var(--sans); font-size: clamp(.8rem, 1.1vw, 1.1rem); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.5vh; }
.proj ul { list-style: none; margin: 0; padding: 0; }
.proj .pfeed li { display: flex; gap: 1.5vw; align-items: baseline; padding: 1.2vh 0; border-top: 1px solid rgba(255,255,255,.12); font-size: clamp(1rem, 1.6vw, 1.7rem); }
.proj .pfeed li.fresh { animation: fadein .8s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .proj .pfeed li.fresh { animation: none; } }
.proj .pfeed time { color: #A9BCD8; font-variant-numeric: tabular-nums; }
.proj .pfeed .amount { margin-left: auto; color: #fff; font-weight: 700; white-space: nowrap; }
.proj .ptop li { display: flex; gap: 1vw; align-items: baseline; padding: 1vh 0; font-size: clamp(1rem, 1.5vw, 1.6rem); }
.proj .ptop li b { color: var(--blue-mid); font-family: var(--serif); width: 1.4em; }
.proj .ptop li em { margin-left: auto; font-style: normal; color: #A9BCD8; }
.proj .ptop h3 { color: #fff; font-family: var(--sans); font-size: clamp(.85rem, 1.1vw, 1.15rem); margin: 2vh 0 .5vh; }
.proj footer { display: flex; justify-content: space-between; color: #A9BCD8; font-size: clamp(.8rem, 1vw, 1rem); }
.proj footer .brand-mark { font-family: var(--serif); font-weight: 900; font-size: 1.6em; color: #fff; letter-spacing: .06em; }
.proj .exit { position: fixed; top: 12px; right: 12px; opacity: .15; color: #fff; }
.proj .exit:hover { opacity: 1; }

/* Onglets de l'administration (liens) */
.seg-link { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .9rem; }
.seg-link.on { background: var(--paper); color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* (projection : voir « Projection raffinée » en fin de fichier) */

/* ---------- Bandeau de la démo en ligne ---------- */

.demo-bar { position: fixed; left: 12px; bottom: calc(var(--tabbar) + 12px); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .82rem; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.demo-bar select, .demo-bar button { min-height: 32px; border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .8rem; background: #fff; color: var(--navy); cursor: pointer; }
@media (min-width: 768px) { .demo-bar { bottom: 12px; } }
body.projection .demo-bar { display: none; }

/* Cartouche annoncée en séance : cadre vert et petite étiquette « Annoncé » */

/* Avatars dessinés */
.avatar { overflow: hidden; }
.avatar.drawn { background: var(--blue-soft) !important; }
.avatar img { width: 100%; height: 100%; display: block; }

/* Bouton Transmettre flottant (téléphone) */
.fab { position: fixed; right: 16px; bottom: calc(var(--tabbar) + 16px); z-index: 25; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 4px 14px rgba(8,48,94,.35); }
.fab:hover { background: var(--navy-deep); }
@media (min-width: 768px) { .fab { display: none; } }

/* Podiums compacts de la page Live */
.honor-mini { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .honor-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .honor-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.honor-mini .podium .val { font-size: .85rem; }

/* Menu : libellés longs sur grand écran, courts sur tablette */
.topnav .lbl-short { display: none; }
@media (min-width: 768px) and (max-width: 1099px) {
  .topnav .lbl-long { display: none; }
  .topnav .lbl-short { display: inline; }
}

/* Moi et mes co-membres : bouton principal, compteurs, détail sur quatre colonnes */
.btn-xl { min-height: 56px; padding: 14px 24px; font-size: 1.05rem; }
@media (max-width: 520px) { .btn-xl { width: 100%; margin-top: 12px; } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { padding: 12px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--navy); min-width: 0; }
.stat span { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); }
.stat b { display: block; font-weight: 900; font-size: 1.6rem; color: var(--navy); line-height: 1.15; overflow-wrap: anywhere; }
.stat small { display: block; font-size: .74rem; color: var(--muted); line-height: 1.3; }
.detail4 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .detail4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .detail4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dcol { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: var(--radius); padding-bottom: 6px; }
.dcol h3 { padding: 12px 14px 0; font-size: 1rem; font-weight: 800; }
.dsub { margin: 10px 14px 2px; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dsub strong { color: var(--navy); text-transform: none; letter-spacing: 0; }
.dcol .rows li { padding: 9px 14px; gap: 10px; }
.dcol .avatar { width: 32px; height: 32px; font-size: .75rem; }
.dcol .empty { padding: 8px 14px; font-size: .88rem; }
.dcol .dtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.dcol .rows li { align-items: flex-start; }
.dcol .pill { font-size: .7rem; padding: 1px 7px; }
.dcol .rows .grow .pill { display: inline-block; margin-left: 2px; vertical-align: 1px; }

/* Feuille de présence */
.pres-summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.pres-row { flex-wrap: wrap; }
.pres-row .grow { min-width: 160px; }
.pres-choices { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pchip { min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: .82rem; cursor: pointer; color: var(--slate); }
.pchip:hover:not([disabled]) { border-color: var(--navy); }
.pchip.on { font-weight: 700; border-color: transparent; }
.pchip.on.done { background: var(--ok-soft); color: var(--ok); }
.pchip.on.doing { background: var(--blue-soft); color: var(--blue); }
.pchip.on.off { background: var(--off-soft); color: var(--slate); }
.pchip.on.gold { background: var(--navy); color: #fff; }
.pchip.on.todo { background: var(--warn-soft); color: var(--warn); }
.pchip[disabled] { cursor: default; opacity: .75; }
.pchip[disabled]:not(.on) { display: none; }
.pres-sub { min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .85rem; width: 190px; max-width: 100%; }
.pres-validated { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--ok-soft); color: var(--ok); }
.pres-validated span { flex: 1; min-width: 200px; color: var(--ink); }
@media (max-width: 640px) { .pres-choices { width: 100%; padding-left: 52px; } }
.pres-row .grow .pill { display: inline-block; margin-left: 6px; vertical-align: 1px; }
.pres-foot { position: sticky; bottom: calc(var(--tabbar) + 8px); padding-top: 12px; background: linear-gradient(transparent, var(--cream) 35%); }
@media (min-width: 768px) { .pres-foot { bottom: 0; padding-bottom: 12px; } }

/* Photos des membres */
.avatar.photo { background: var(--blue-soft); }
.avatar.photo img, .pav img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Slides 16:9 (1280 × 720, mises à l'échelle) ---------- */

.sld-box { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 10px rgba(8,48,94,.12); background: var(--cream); --k: .5; }
.sld-scale { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform: scale(var(--k)); transform-origin: 0 0; }
.sld { position: relative; width: 1280px; height: 720px; overflow: hidden; background: var(--cream); color: var(--ink); font-family: var(--sans); }
.sld-mark { display: inline-block; padding: 1px 8px; margin-right: 8px; border-radius: 3px; background: var(--navy); color: #fff; font-weight: 900; letter-spacing: .04em; }
.sld-empty { color: var(--muted); font-style: italic; }

.sld1 aside { position: absolute; left: 0; top: 0; bottom: 0; width: 430px; background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 80px 40px 0; text-align: center; }
.sld-photo { width: 260px; height: 260px; border-radius: 50%; overflow: hidden; border: 6px solid #fff; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; }
.sld-photo img { width: 100%; height: 100%; object-fit: cover; }
.sld-ini { font-size: 90px; font-weight: 900; color: var(--navy); }
.sld-name { margin-top: 28px; font-size: 40px; font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }
.sld-co { margin-top: 14px; font-size: 20px; font-weight: 700; color: var(--blue-mid); }
.sld-job { margin-top: 6px; font-size: 17px; color: #C5D3E8; line-height: 1.3; }
.sld1 section { position: absolute; left: 500px; right: 60px; top: 70px; bottom: 70px; }
.sld-logo { position: absolute; right: 0; top: -20px; max-width: 170px; max-height: 85px; object-fit: contain; }
.sld-eye { margin: 0 0 18px; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.sld-eye::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 10px; background: var(--accent); }
.sld1 h2 { font-size: 36px; font-weight: 900; color: var(--navy); margin: 0; max-width: 560px; }
.sld1 h2::after { content: ''; display: block; width: 52px; height: 6px; margin-top: 12px; background: var(--accent); }
.sld-pitch { margin: 22px 0 0; font-size: 29px; line-height: 1.35; color: var(--ink); max-height: 196px; overflow: hidden; }
.sld-reco { position: absolute; left: 0; right: 0; bottom: 70px; padding: 18px 24px; background: var(--sand); border-left: 8px solid var(--navy); font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.sld-reco span { display: block; margin-bottom: 6px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.sld-contact { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; font-size: 19px; font-weight: 700; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sld-contact .sep { margin: 0 12px; color: var(--muted); }
.sld1 footer, .sld2 footer { position: absolute; left: 500px; bottom: 26px; font-size: 13px; color: var(--muted); }
.sld1 footer { bottom: 22px; }

.sld2 header { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; gap: 20px; }
.sld2-who { display: flex; align-items: center; gap: 16px; }
.sld2-photo { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; }
.sld2-photo img { width: 100%; height: 100%; object-fit: cover; }
.sld2-photo .sld-ini { font-size: 30px; }
.sld2-who b { display: block; font-size: 24px; font-weight: 900; } .sld2-who span { font-size: 16px; color: var(--blue-mid); }
.sld2 h2 { color: #fff; font-size: 34px; font-weight: 900; margin: 0; text-align: right; }
.sld2-imgs { position: absolute; left: 40px; right: 40px; top: 150px; bottom: 60px; display: flex; gap: 40px; justify-content: center; }
.sld2-imgs figure { margin: 0; flex: 1; max-width: 900px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sld2-imgs img { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; border-radius: 6px; }
.sld2-imgs figcaption { margin-top: 10px; font-size: 18px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.sld2 footer { left: 40px; bottom: 18px; }

/* Modèle « Je me présente » : photo pleine hauteur à gauche, texte à droite */
.sldp-photo { position: absolute; left: 0; top: 0; bottom: 0; width: 520px; background: var(--navy); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sldp-photo img { width: 100%; height: 100%; object-fit: cover; }
.sldp-photo .sld-ini { font-size: 160px; color: #fff; }
.sldp section { position: absolute; left: 580px; right: 60px; top: 70px; bottom: 70px; }
.sldp-name { margin: 0; font-size: 54px; font-weight: 900; line-height: 1.05; color: var(--navy); letter-spacing: -.01em; }
.sldp-co { margin: 8px 0 0; font-size: 21px; font-weight: 700; color: var(--blue); }
.sldp-co::after { content: ''; display: block; width: 52px; height: 6px; margin-top: 16px; background: var(--accent); }
.sldp-about { margin: 18px 0 0; font-size: 24px; line-height: 1.4; max-height: 202px; overflow: hidden; }
.sldp-pts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.sldp-pts li { position: relative; padding-left: 26px; font-size: 22px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sldp-pts li::before { content: ''; position: absolute; left: 0; top: 10px; width: 11px; height: 11px; background: var(--accent); }
.sldp footer { position: absolute; left: 580px; bottom: 22px; font-size: 13px; color: var(--muted); }
/* Modèle « Grande photo » : image plein cadre, nom en grand sur un bandeau marine */
.sldh { background: var(--navy); }
.sldh-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.sldh-none { display: flex; align-items: center; justify-content: center; padding-bottom: 250px; font-size: 220px; font-weight: 900; color: #1D4677; }
.sldh-mark { position: absolute; top: 24px; right: 30px; padding: 6px 14px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; }
.sldh-mark .sld-mark { background: #fff; color: var(--navy); }
.sldh-band { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 60px 40px; background: rgba(8,48,94,.88); color: #fff; }
.sldh-band::before { content: ''; display: block; width: 52px; height: 6px; margin-bottom: 14px; background: var(--accent); }
.sldh-co { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-mid); }
.sldh-name { margin: 2px 0 0; font-weight: 900; line-height: 1.08; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.sldh-tag { margin: 8px 0 0; font-size: 27px; line-height: 1.3; color: #E8EEF7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sldh-band .sld-empty { display: block; margin-top: 8px; font-size: 24px; color: var(--blue-mid); }
.sldh-contact { margin: 10px 0 0; font-size: 19px; font-weight: 700; color: var(--blue-mid); }
.sldh-contact .sep { margin: 0 12px; }
/* Modèle « Texte libre » (slide 2) */
.sldt-date { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-mid); }
.sldt section { position: absolute; left: 90px; right: 90px; top: 160px; bottom: 70px; }
.sldt h2 { margin: 0; font-size: 42px; font-weight: 900; color: var(--navy); text-align: left; }
.sldt h2::after { content: ''; display: block; width: 52px; height: 6px; margin-top: 14px; background: var(--accent); }
.sldt-text { margin: 24px 0 0; font-size: 28px; line-height: 1.45; white-space: pre-line; max-height: 366px; overflow: hidden; }

.sld0 { background: var(--navy); color: #fff; display: flex; align-items: center; padding: 0 110px; }
.sld0-mark { display: inline-block; padding: 4px 26px; border-radius: 6px; background: #fff; color: var(--navy); font-size: 96px; font-weight: 900; letter-spacing: .04em; line-height: 1.1; }
.sld0 .sld-eye { margin-top: 30px; color: var(--blue-mid); }
.sld0 h1 { color: #fff; font-size: 84px; font-weight: 900; margin: 0; }
.sld0 p:last-child { font-size: 26px; color: #C5D3E8; margin: 12px 0 0; }

/* Éditeur */
.slides-ed { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
@media (min-width: 1024px) { .slides-ed { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } .slides-prev { position: sticky; top: 80px; } }
.slides-prev #sl-prev { display: grid; gap: 14px; }
/* Choix du modèle : trois vignettes cliquables (boutons radio) */
.tpl-pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.tpl-pick legend { padding: 0; margin-bottom: 6px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.tpl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tpl { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 2px solid var(--line); border-radius: 6px; cursor: pointer; background: var(--paper, #fff); line-height: 1.25; }
.tpl:hover { border-color: var(--blue-mid); }
.tpl.on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.tpl:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.tpl .sld-box { box-shadow: none; border-radius: 3px; margin-bottom: 4px; pointer-events: none; }
.tpl b { font-size: .9rem; color: var(--navy); }
.img-field { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.img-field img { width: 72px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }

/* Administration : présentation */
.deck-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.deck-thumb { width: 200px; flex-shrink: 0; }
@media (max-width: 640px) { .deck-thumb { width: 100%; } }

/* Diaporama plein écran */
.show { position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.show .sld-box { border-radius: 0; box-shadow: none; }
.show-bar { position: fixed; right: 12px; bottom: 12px; display: flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; opacity: .2; transition: opacity .2s; }
.show-bar:hover { opacity: 1; }
.show-bar button, .show-bar a { border: 0; background: rgba(255,255,255,.15); color: #fff; border-radius: 999px; min-width: 32px; height: 32px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; text-decoration: none; }

/* Impression en PDF : une slide par page 16:9 */
#print-deck { display: none; }
@media print {
  @page { size: 1280px 720px; margin: 0; }
  body.printing-deck > *:not(#print-deck) { display: none !important; }
  body.printing-deck { background: #fff; }
  body.printing-deck #print-deck { display: block; }
  #print-deck .sld { page-break-after: always; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Tirage au sort (machine à sous, projetable) ---------- */

.draw { --row: clamp(64px, 14vh, 132px); position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.2vh; padding: 4vh 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #0B3F7A 0%, var(--navy) 55%, var(--navy-deep) 100%); }
.draw .pexit { position: absolute; top: 16px; right: 16px; color: #fff; opacity: .35; display: inline-flex; }
.draw .pexit:hover { opacity: 1; }
.draw header { text-align: center; }
.draw-kicker { display: block; color: var(--blue-mid); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(.75rem, 1.1vw, 1.05rem); }
.draw header h1 { color: #fff; font-weight: 900; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.05; margin: .2em 0 .1em; }
.draw header p { color: #A9BCD8; font-size: clamp(1rem, 1.7vw, 1.6rem); margin: 0; }
.slot { position: relative; width: min(820px, 100%); padding: clamp(18px, 3vh, 34px); border-radius: 28px; background: linear-gradient(180deg, var(--cream), var(--sand)); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 -6px 0 rgba(0,0,0,.08); }
.slot-lights { position: absolute; left: 7px; right: 7px; top: 7px; display: flex; justify-content: space-between; pointer-events: none; }
.slot-lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue-mid); animation: bulb 1.2s infinite; }
.slot-lights i:nth-child(odd) { animation-delay: .6s; }
.slot-lights.b { top: auto; bottom: 7px; }
.draw.spinning .slot-lights i, .draw.done .slot-lights i { animation-duration: .25s; }
@keyframes bulb { 50% { background: #fff; box-shadow: 0 0 14px #fff; } }
.slot-window { position: relative; height: calc(var(--row) * 3); overflow: hidden; border-radius: 14px; background: #fff; border: 4px solid var(--navy); }
.slot-window::before, .slot-window::after { content: ''; position: absolute; left: 0; right: 0; height: var(--row); z-index: 2; pointer-events: none; }
.slot-window::before { top: 0; background: linear-gradient(#fff 10%, rgba(255,255,255,.55)); }
.slot-window::after { bottom: 0; background: linear-gradient(rgba(255,255,255,.55), #fff 90%); }
.reel { will-change: transform; }
.reel-row { height: var(--row); display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); padding: 0 clamp(28px, 5vw, 64px); border-bottom: 1px solid var(--sand); color: var(--navy); }
.reel-av { flex: none; width: calc(var(--row) * .74); height: calc(var(--row) * .74); border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-soft); color: #fff; font-weight: 800; }
.reel-av img { width: 100%; height: 100%; object-fit: cover; }
.reel-txt { min-width: 0; display: flex; flex-direction: column; }
.reel-txt b { font-weight: 900; font-size: calc(var(--row) * .3); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-txt small { color: var(--muted); font-size: calc(var(--row) * .15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-mark { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; color: var(--accent); font-size: calc(var(--row) * .26); line-height: 1; }
.slot-mark.l { left: 8px; } .slot-mark.r { right: 8px; }
.draw.done .slot-window { animation: winflash .5s 3; }
@keyframes winflash { 50% { border-color: var(--accent); box-shadow: 0 0 0 6px rgba(216,30,44,.25); } }
.lever { position: absolute; right: -46px; top: 50%; width: 40px; height: 180px; transform: translateY(-50%); border: 0; background: none; cursor: pointer; padding: 0; }
.lever-stick { position: absolute; left: 50%; bottom: 0; width: 10px; height: 150px; margin-left: -5px; border-radius: 5px; background: linear-gradient(90deg, #B9C3D0, #fff, #8D99A8); transform-origin: 50% 100%; transition: transform .25s; }
.lever-ball { position: absolute; left: 50%; top: 0; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6b74, var(--accent) 60%, #8f0d16); transition: transform .25s; transform-origin: 50% 180px; }
.lever.pulled .lever-stick { transform: scaleY(-.6); }
.lever.pulled .lever-ball { transform: translateY(130px); }
.lever:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 8px; }
.draw-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.btn-pull { font: inherit; font-weight: 900; font-size: clamp(1.2rem, 2.2vw, 1.9rem); letter-spacing: .04em; color: var(--navy); background: #fff; border: 0; border-radius: 999px; padding: .55em 1.8em; min-height: 48px; cursor: pointer; box-shadow: 0 6px 0 var(--blue-mid), 0 14px 30px rgba(0,0,0,.35); transition: transform .1s, box-shadow .1s; }
.btn-pull:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--blue-mid); }
.btn-pull:disabled { opacity: .45; cursor: default; }
.btn-ghost { font: inherit; font-weight: 700; color: #fff; background: transparent; border: 2px solid rgba(255,255,255,.5); border-radius: 999px; padding: .6em 1.4em; min-height: 48px; cursor: pointer; }
.draw-count { color: #A9BCD8; font-size: clamp(.9rem, 1.3vw, 1.2rem); }
.draw-who { width: min(820px, 100%); color: #A9BCD8; }
.draw-who summary { cursor: pointer; text-align: center; font-size: .95rem; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.draw-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.draw-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: .9rem; cursor: pointer; min-height: 36px; }
.draw-chips input { width: auto; margin: 0; accent-color: var(--blue-mid); }
.draw-win { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6,36,73,.78); animation: fadein .4s ease-out; }
.draw-win[hidden] { display: none; }
.win-card { text-align: center; color: var(--navy); background: var(--cream); border-radius: 24px; padding: clamp(24px, 5vh, 56px) clamp(20px, 5vw, 72px); max-width: 100%; box-shadow: 0 30px 90px rgba(0,0,0,.5); animation: pop .6s cubic-bezier(.2,1.6,.4,1); }
.win-card .draw-kicker { color: var(--blue); }
.win-av { display: inline-flex; align-items: center; justify-content: center; width: clamp(140px, 30vh, 300px); height: clamp(140px, 30vh, 300px); border-radius: 50%; overflow: hidden; margin: 2.4vh 0; border: 6px solid #fff; box-shadow: 0 0 0 4px var(--blue), 0 16px 40px rgba(0,0,0,.25); background: var(--blue-soft); color: #fff; font-weight: 900; font-size: 3rem; }
.win-av img { width: 100%; height: 100%; object-fit: cover; }
.win-card h2 { font-weight: 900; font-size: clamp(2rem, 5.5vw, 4.8rem); line-height: 1.05; margin: 0; color: var(--navy); }
.win-card p { color: var(--slate); font-size: clamp(1rem, 1.8vw, 1.6rem); margin: .4em 0 0; }
.win-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 3vh; }
.win-btns .btn-pull { background: var(--navy); color: #fff; }
.win-btns .btn-ghost { color: var(--navy); border-color: var(--line); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
@media (max-width: 960px) { .lever { display: none; } }
@media (prefers-reduced-motion: reduce) { .slot-lights i, .win-card, .draw.done .slot-window { animation: none; } }



/* Moi : mes slides de la semaine (colonne de droite) et éditeur en fenêtre */
.my-slides { margin-top: 0; }
.my-slides-thumbs { display: grid; gap: 8px; }
.my-slides .thumb { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 6px; }
.my-slides button.thumb { cursor: pointer; }
.my-slides button.thumb:hover .sld-box { box-shadow: 0 0 0 2px var(--blue); }
.my-slides .thumb:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.dialog-wide .inner { width: min(1180px, 100%); max-height: calc(100vh - 32px); padding: 18px 20px 20px; }
.dialog-wide .slides-prev { position: static; }
@media (max-width: 600px) { .dialog-wide { padding: 0; } .dialog-wide .inner { max-height: 100vh; height: 100%; border-radius: 0; } }

/* Suivi des tests (démo, super admin) : détail des écrans par visite */
.suivi-visites .fold summary { font-weight: 400; }
.suivi-ecrans { width: 100%; border-collapse: collapse; font-size: .9rem; }
.suivi-ecrans td { padding: 4px 8px 4px 0; border-top: 1px solid var(--sand); vertical-align: middle; }
.suivi-ecrans td:nth-child(2) { white-space: nowrap; color: var(--slate); width: 1%; }
.suivi-ecrans td:nth-child(3) { width: 40%; }
.suivi-bar { display: block; height: 8px; border-radius: 4px; background: var(--blue); }

/* ---------- Projection raffinée (la semaine, tableau d'honneur) ----------
   Un seul fond marine profond, texte crème ; hiérarchie par la typographie (grands chiffres fins,
   petites capitales espacées) et des filets fins, sans cartouches. Le rouge : deux repères seulement. */
body.projection { --pj-bg: #071F3F; --pj-ink: #F4F0E8; --pj-mute: #9FB1CC; --pj-soft: #C9D3E2; --pj-label: #7FA8E0;
  --pj-rule: rgba(244,240,232,.14); --pj-rule2: rgba(244,240,232,.08); --pj-sand: #ECE6DA; --pj-ok: #7FD1A0;
  background: var(--pj-bg); color: var(--pj-ink); }
.proj4, .proj-honor { height: 100vh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; padding: 3.3vh 4.6vw 2vh; }
.phead { display: flex; align-items: flex-end; gap: 2.5vw; }
.pbrand { display: flex; align-items: flex-end; gap: 1.9vw; min-width: 0; flex: 1 1 auto; }
.pmark { display: inline-flex; flex-direction: column; gap: .5vh; font-weight: 800; letter-spacing: .18em; font-size: clamp(1rem, 1.56vw, 2rem); line-height: 1; color: var(--pj-ink); }
.pmark::after { content: ""; width: 1.8vw; height: 2px; background: var(--accent); }
.pdiv { width: 1px; align-self: stretch; min-height: 5vh; background: rgba(244,240,232,.18); }
.ptitle { min-width: 0; }
.ptitle h1 { margin: 0; color: var(--pj-ink); font-weight: 300; letter-spacing: -.01em; font-size: clamp(1.5rem, 2.4vw, 3rem); line-height: 1.05; }
.psub { margin: .6vh 0 0; color: var(--pj-mute); font-size: clamp(.8rem, 1.04vw, 1.3rem); }
.pnav { display: flex; align-items: center; gap: .3vw; opacity: 0; transition: opacity .2s; }
.phead:hover .pnav, .pnav:focus-within { opacity: 1; }
.pnav a { color: var(--pj-mute); text-decoration: none; font-weight: 500; font-size: clamp(.75rem, .9vw, 1rem); padding: .5vh .7vw; border-radius: 3px; }
.pnav a[aria-current="page"] { color: var(--pj-ink); box-shadow: inset 0 -1px 0 var(--pj-ink); border-radius: 0; }
.pnav .pexit { display: inline-flex; }
.plive { display: flex; flex-direction: column; align-items: flex-end; gap: .6vh; flex: none; }
.pon { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(.7rem, .83vw, 1rem); color: var(--pj-ink); }
.pdot { width: .62em; height: .62em; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }
.pon.off { color: var(--pj-mute); letter-spacing: .08em; }
.pcountdown { color: var(--pj-mute); font-size: clamp(.8rem, 1.04vw, 1.3rem); white-space: nowrap; }
.pcountdown span { display: inline; }
.pcountdown b { font-weight: 300; color: var(--pj-ink); font-size: clamp(1.2rem, 1.77vw, 2.2rem); font-variant-numeric: tabular-nums; }

/* Dernière annonce : une ligne entre deux filets */
.plast { flex: none; margin-top: 2.6vh; padding: 1.2vh 0; border-top: 1px solid var(--pj-rule); border-bottom: 1px solid var(--pj-rule); display: flex; align-items: baseline; gap: 1.1vw; flex-wrap: wrap; animation: fadein .4s ease-out; }
.plast-ok { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(.7rem, .73vw, .95rem); color: var(--pj-ok); }
.plast-k { letter-spacing: .12em; text-transform: uppercase; font-size: clamp(.72rem, .94vw, 1.15rem); color: var(--pj-mute); }
.plast strong { font-weight: 600; font-size: clamp(1rem, 1.15vw, 1.5rem); color: var(--pj-ink); }
.plast-t { flex: 1 1 20em; min-width: 0; color: var(--pj-soft); font-size: clamp(1rem, 1.15vw, 1.5rem); }
.plast-t em { font-style: normal; color: var(--pj-mute); }
.plast-t b { margin-left: .5em; font-weight: 300; color: var(--pj-ink); }

/* La semaine : quatre colonnes séparées par des filets */
.pcols { flex: 1; min-height: 0; margin-top: 3vh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
.pcol { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 0 2.1vw; border-left: 1px solid var(--pj-rule); }
.pcol:first-child { padding-left: 0; border-left: 0; }
.pcol:last-child { padding-right: 0; }
.pcol h2 { margin: 0; color: var(--pj-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: clamp(.72rem, .83vw, 1.05rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcol h2::before, .pcol h2::after { display: none; }
.pfig { margin-top: 1vh; display: flex; align-items: baseline; gap: .8vw; min-width: 0; }
.pfig b { font-weight: 200; letter-spacing: -.03em; line-height: .95; font-size: clamp(2.8rem, 5.6vw, 7rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-merci .pfig b { font-size: clamp(2.4rem, 4.8vw, 6rem); }
.pfig span { color: var(--pj-mute); font-size: clamp(.8rem, 1.04vw, 1.3rem); white-space: nowrap; }
.pmeta { margin-top: 1.1vh; display: flex; flex-wrap: wrap; gap: .2vh 1vw; color: var(--pj-mute); font-size: clamp(.75rem, .94vw, 1.2rem); }
.pmeta .ptotal { color: var(--pj-ink); font-weight: 500; }
.ptodo { color: var(--pj-ink); }
.pdone { color: var(--pj-ok); }
.pbox { flex: 1; min-height: 0; overflow: hidden; margin-top: 2vh; border-top: 1px solid var(--pj-rule); }
.proj4.pscroll { height: auto; min-height: 100vh; overflow: visible; }
.proj4.pscroll .pbox { overflow: visible; }
.plist { list-style: none; margin: 0; padding: 0; display: block; }
.pcard { display: flex; align-items: baseline; gap: .75vw; padding: var(--pp, 1.05vh 0); border-bottom: 1px solid var(--pj-rule2); min-width: 0; transition: opacity .3s; }
.pck { flex: none; width: .9vw; min-width: 12px; color: var(--pj-ok); font-size: clamp(.75rem, .83vw, 1rem); }
.ptx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2vh; }
.pcard strong { color: var(--pj-ink); font-weight: 600; font-size: var(--pt, clamp(.9rem, 1.25vw, 1.6rem)); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .who { color: var(--pj-mute); font-size: var(--ps, clamp(.78rem, .99vw, 1.25rem)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .amt { flex: none; font-weight: 300; color: var(--pj-ink); font-size: var(--pa, clamp(.95rem, 1.35vw, 1.7rem)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard.announced { opacity: .5; }
.pcard[role="button"] { cursor: pointer; }
.pcard[role="button"]:hover { background: rgba(244,240,232,.04); }
.pcard[role="button"]:focus-visible { outline: 2px solid var(--pj-ink); outline-offset: 2px; }
.pcard.fresh { animation: fadein .9s ease-out; }
.pempty { color: var(--pj-mute); font-style: italic; padding: 1.2vh 0; font-size: clamp(.8rem, .99vw, 1.2rem); }
/* Paliers de densité, choisis automatiquement */
.pcol[data-d="1"] { --pp: .55vh 0; --pt: clamp(.85rem, 1.1vw, 1.4rem); --ps: clamp(.72rem, .88vw, 1.1rem); }
.pcol[data-d="2"] { --pp: .5vh 0; --pt: clamp(.8rem, 1vw, 1.3rem); --ps: clamp(.7rem, .85vw, 1.05rem); }
.pcol[data-d="2"] .ptx { flex-direction: row; align-items: baseline; gap: .6vw; }
.pcol[data-d="2"] .pcard strong { flex: 0 0 auto; max-width: 62%; }
.pcol[data-d="2"] .pcard .who { flex: 1 1 0; min-width: 0; }

/* La semaine : bandeau fixe. Titre, dernière annonce et en-têtes de colonnes restent en haut,
   le filet du bas du bandeau est la ligne de défilement ; seules les listes passent dessous. */
.proj4 { padding-top: 0; }
.pstick { flex: none; padding-top: 2.2vh; background: var(--pj-bg); }
.proj4.pscroll .pstick { position: sticky; top: 0; z-index: 2; }
.proj4 .phead { align-items: center; position: relative; }
.proj4 .pnav { position: absolute; right: 0; top: 100%; z-index: 3; padding: .4vh 0 .4vh 1vw; background: var(--pj-bg); }
.proj4 .pnav:not(:focus-within) { pointer-events: none; }
.proj4 .phead:hover .pnav { pointer-events: auto; }
.proj4 .pdiv { min-height: 3.6vh; }
.proj4 .ptitle { display: flex; align-items: baseline; gap: 1.2vw; min-width: 0; }
.proj4 .ptitle h1 { font-size: clamp(1.2rem, 1.85vw, 2.3rem); white-space: nowrap; }
.proj4 .psub { margin: 0; font-size: clamp(.72rem, .85vw, 1.1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj4 .plive { flex-direction: row; align-items: baseline; gap: 1.2vw; }
.proj4 .pcountdown b { font-size: clamp(1rem, 1.4vw, 1.8rem); }
.proj4 .plast { margin-top: 1.5vh; padding: 0; height: max(4.6vh, 2.2rem); box-sizing: border-box; align-items: center; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; animation: none; }
.proj4 .plast > * { flex: none; }
.proj4 .plast-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.proj4 .plast-none .plast-t { color: var(--pj-mute); font-size: clamp(.8rem, .94vw, 1.2rem); }
.pheads { margin-top: 2vh; padding-bottom: 1.4vh; border-bottom: 1px solid rgba(244,240,232,.32); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
.phd { min-width: 0; padding: 0 2.1vw; border-left: 1px solid var(--pj-rule); }
.phd:first-child { padding-left: 0; border-left: 0; }
.phd:last-child { padding-right: 0; }
.phd h2 { margin: 0; color: var(--pj-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: clamp(.72rem, .83vw, 1.05rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj4 .pfig { margin-top: .6vh; height: clamp(2.1rem, 3.7vw, 4.75rem); align-items: flex-end; overflow: hidden; }
.proj4 .pfig > span { padding-bottom: .35vh; }
.proj4 .pfig .ptodo { color: var(--pj-ink); }
.proj4 .pfig .pdone { color: var(--pj-ok); }
.proj4 .pfig .pleft { display: flex; flex-direction: column; gap: .2vh; margin-left: .4vw; color: var(--pj-mute); font-size: clamp(.72rem, .9vw, 1.15rem); line-height: 1.2; }
.proj4 .pfig b { font-size: clamp(2.2rem, 3.9vw, 5rem); }
.proj4 .c-merci .pfig b { font-size: clamp(2rem, 3.4vw, 4.4rem); }
.proj4 .pmeta { margin-top: .7vh; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj4 .pcols { margin-top: 0; }
.proj4 .pbox { margin-top: 0; border-top: 0; }

/* Tableau d'honneur : deux bandes (mois, année), quatre classements */
.hband { flex: 1 1 0; min-height: 0; margin-top: 3.2vh; padding-top: 2vh; border-top: 1px solid rgba(244,240,232,.18); display: flex; flex-direction: column; }
.hband-h { display: flex; align-items: baseline; gap: 1vw; }
.hband-h h2 { margin: 0; color: var(--pj-ink); font-weight: 300; font-size: clamp(1.1rem, 1.35vw, 1.7rem); letter-spacing: 0; text-transform: none; }
.hband-h span { color: var(--pj-mute); font-size: clamp(.8rem, .94vw, 1.2rem); }
.hcats { flex: 1; min-height: 0; margin-top: 1.7vh; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hcat { min-width: 0; padding: 0 1.9vw; border-left: 1px solid var(--pj-rule); display: flex; flex-direction: column; }
.hcat:first-child { padding-left: 0; border-left: 0; }
.hcat:last-child { padding-right: 0; }
.hcat-h { display: flex; align-items: baseline; justify-content: space-between; gap: .6vw; }
.hcat-h h3 { margin: 0; color: var(--pj-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: clamp(.7rem, .78vw, 1rem); white-space: nowrap; }
.hcat-h span { color: var(--pj-mute); font-size: clamp(.72rem, .89vw, 1.1rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hfirst { margin-top: 1.5vh; display: flex; align-items: center; gap: 1vw; min-width: 0; }
.hwho { min-width: 0; display: flex; flex-direction: column; gap: .4vh; }
.hwho strong { font-weight: 600; font-size: clamp(1.1rem, 1.56vw, 2rem); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwho span { font-weight: 300; color: var(--pj-sand); font-size: clamp(.95rem, 1.25vw, 1.6rem); font-variant-numeric: tabular-nums; }
.pav { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--blue-soft); color: var(--navy); font-weight: 800; }
.pav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pav.pav-lg { width: 8.5vh; height: 8.5vh; font-size: 2.6vh; box-shadow: 0 0 0 2px var(--pj-bg), 0 0 0 4px var(--pj-sand); }
.pav.pav-sm { width: 3.7vh; height: 3.7vh; font-size: 1.3vh; }
.hnext { list-style: none; margin: 1.5vh 0 0; padding: 0; border-top: 1px solid rgba(244,240,232,.10); }
.hnext li { display: flex; align-items: center; gap: .75vw; padding: .85vh 0; border-bottom: 1px solid var(--pj-rule2); min-width: 0; }
.hrank { width: 1em; color: var(--pj-mute); font-weight: 300; font-size: clamp(.85rem, 1.04vw, 1.3rem); font-variant-numeric: tabular-nums; }
.hname { min-width: 0; flex: 1 1 auto; font-weight: 500; font-size: clamp(.85rem, 1.1vw, 1.4rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hval { color: var(--pj-soft); font-weight: 300; font-size: clamp(.85rem, 1.04vw, 1.3rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hnone { color: var(--pj-mute); font-style: italic; margin: 1.5vh 0 0; font-size: clamp(.8rem, .94vw, 1.2rem); }

/* Petits écrans (aperçu sur téléphone ou tablette) : on empile */
@media (max-width: 900px) {
  .proj4, .proj-honor { height: auto; overflow: visible; padding: 20px 16px; }
  .phead { flex-wrap: wrap; }
  .proj4 .pstick { position: static; }
  .proj4 .pnav { position: static; background: none; pointer-events: auto; }
  .proj4 .ptitle { flex-direction: column; gap: 4px; }
  .proj4 .ptitle h1, .proj4 .psub { white-space: normal; }
  .pheads { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .phd { padding: 0 12px; }
  .phd:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pnav { opacity: 1; }
  .pcols, .hcats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .pcol, .hcat { padding: 0 12px; }
  .pcol:nth-child(odd), .hcat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pbox { overflow: visible; }
}
@media (max-width: 520px) { .pcols, .hcats { grid-template-columns: minmax(0, 1fr); } .pcol, .hcat { padding: 0; border-left: 0; } }
@media (prefers-reduced-motion: reduce) { .pdot, .pcard.fresh, .plast { animation: none; } }
.past-guests { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.past-guests .rows { margin: 0 -14px; }

/* Tirage : choix de l'animation et nouvelles scènes (mur de photos, roue, défilé) */
.draw-stage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; }
.draw-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.draw-modes button { font: inherit; font-size: .9rem; font-weight: 700; color: #C5D3E8; background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.draw-modes button.on { color: var(--navy); background: #fff; border-color: #fff; }
.draw-modes button:disabled { opacity: .4; cursor: default; }
.draw-modes button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wall { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); width: min(1100px, 100%); }
.wall-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; transition: opacity .35s, transform .35s, filter .35s; }
.wall-av { width: clamp(44px, 8vh, 96px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-soft); color: #fff; font-weight: 800; }
.wall-av img { width: 100%; height: 100%; object-fit: cover; }
.wall-tile b { font-size: clamp(.75rem, 1.4vh, 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wall-tile.out { opacity: .12; filter: grayscale(1); transform: scale(.85); }
.wall-tile.win { background: #fff; color: var(--navy); transform: scale(1.25); box-shadow: 0 0 0 4px var(--accent), 0 0 40px rgba(255,255,255,.6); z-index: 1; }
.wall-left { margin: 0; color: #fff; font-weight: 800; font-size: clamp(1.1rem, 2.4vh, 1.8rem); }
.wheel { position: relative; width: min(52vh, 92vw); aspect-ratio: 1; }
.wheel svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,.4)); font-family: var(--sans); }
.wheel-mark { position: absolute; left: 50%; top: -6px; z-index: 2; width: 0; height: 0; margin-left: -18px; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 34px solid var(--accent); filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.draw.done .wheel svg { animation: winpulse .5s 3; }
@keyframes winpulse { 50% { transform: scale(1.03); } }
.parade { width: min(900px, 100%); min-height: 40vh; display: flex; align-items: center; justify-content: center; }
.parade-card { display: flex; flex-direction: column; align-items: center; gap: 1.4vh; padding: 4vh 6vw; border-radius: 22px; background: linear-gradient(180deg, var(--cream), var(--sand)); color: var(--navy); box-shadow: 0 30px 80px rgba(0,0,0,.45); text-align: center; }
.parade-av { width: clamp(90px, 20vh, 200px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-soft); color: #fff; font-weight: 900; font-size: 2.4rem; border: 5px solid #fff; }
.parade-av img { width: 100%; height: 100%; object-fit: cover; }
.parade-card b { font-size: clamp(1.8rem, 5vh, 3.6rem); font-weight: 900; line-height: 1.05; }
.parade-card small { color: var(--muted); font-size: clamp(1rem, 2vh, 1.4rem); }
.parade-card.win { box-shadow: 0 0 0 6px var(--accent), 0 30px 80px rgba(0,0,0,.45); }