/* ============================================================
 * KOOLANTA — style.css · Design system v3 "Porcelaine & Braise"
 * Palette chaude raffinée, micro-animations sobres,
 * Space Grotesk (display) + Inter (texte).
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Palette */
  --bg: #f7f5f1;             /* porcelaine chaude */
  --surface: #ffffff;
  --surface-2: #f1eee8;      /* encarts secondaires */
  --ink: #191c26;
  --ink-2: #454b5e;
  --muted: #8b8fa0;
  --line: #e9e6de;

  --night: #0d1122;          /* indigo nuit profond */
  --night-2: #1a2138;

  --flame: #ff4f1a;          /* braise vive */
  --flame-2: #ffab1f;        /* or chaud */
  --flame-deep: #d63a0a;
  --flame-soft: #fff0e8;
  --lagoon: #0d9d95;
  --lagoon-soft: #e4f6f4;

  --pos: #0d915f;
  --pos-soft: #e5f5ec;
  --neg: #dd3560;
  --neg-soft: #fdecf1;

  /* Géométrie & ombres */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(25, 28, 38, .05);
  --shadow-md: 0 1px 2px rgba(25, 28, 38, .05), 0 12px 32px -14px rgba(25, 28, 38, .22);
  --shadow-lg: 0 28px 70px -22px rgba(25, 28, 38, .35);
  --grad-fire: linear-gradient(118deg, var(--flame) 0%, var(--flame-2) 115%);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(900px 420px at 85% -8%, rgba(255, 171, 31, .07) 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(255, 79, 26, .18); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d5d1c7; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3, h4, .logo, .logo-big, .card-title, .winner-name, .stat-nums b {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -.015em;
}
h2 { font-size: 1.3rem; font-weight: 700; margin: .2rem 0 .5rem; }
h3 { font-size: 1.05rem; font-weight: 700; margin: .2rem 0 .5rem; }
h4 { font-size: .95rem; font-weight: 700; margin: 1rem 0 .4rem; }

button { font-family: inherit; cursor: pointer; }
input, select {
  font-family: inherit; font-size: .95rem;
  width: 100%; padding: .7rem .9rem; margin: .25rem 0 .8rem;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  outline: none; transition: border-color .18s, box-shadow .18s;
}
input:focus { border-color: var(--flame); box-shadow: 0 0 0 4px rgba(255, 79, 26, .11); }
input::placeholder { color: #b0adc0; }
label {
  font-weight: 600; font-size: .78rem; color: var(--ink-2);
  display: block; margin-top: .4rem; letter-spacing: .02em;
}
hr { border: none; border-top: 1px solid var(--line); margin: 1rem 0; }
small, .small { font-size: .8rem; }
.muted { color: var(--muted); }
.muted-light { color: rgba(255, 255, 255, .65); }
.center { text-align: center; }
.error { color: var(--neg); font-weight: 600; min-height: 1.2em; font-size: .88rem; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* ---------- Animations partagées ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes growBar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes emberGlow {
  0%, 100% { box-shadow: 0 16px 44px -14px rgba(255, 79, 26, .55); }
  50%      { box-shadow: 0 16px 58px -10px rgba(255, 171, 31, .75); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes flicker {
  0%, 100% { transform: translateY(0) scale(1); opacity: .9; }
  50% { transform: translateY(-5px) scale(1.07); opacity: 1; }
}

/* ============================================================
 * PAGE D'ACCUEIL
 * ============================================================ */
body.landing {
  background:
    radial-gradient(950px 520px at 78% -12%, rgba(255, 79, 26, .28) 0%, transparent 55%),
    radial-gradient(720px 520px at -5% 105%, rgba(13, 157, 149, .16) 0%, transparent 55%),
    var(--night);
  color: #fff;
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem;
}
.landing-hero { text-align: center; padding: 2.6rem 1rem .8rem; animation: fadeUp .5s ease both; }
.flames span { display: inline-block; font-size: 1.7rem; margin: 0 .08em; animation: flicker 1.8s infinite ease-in-out; }
.flames span:nth-child(2) { animation-delay: .3s; font-size: 2.2rem; }
.flames span:nth-child(3) { animation-delay: .6s; }
.logo-big {
  font-size: clamp(2.8rem, 11vw, 4.6rem); font-weight: 700; margin: .15rem 0;
  letter-spacing: -.025em;
}
.logo-big .k, .logo .k {
  background: var(--grad-fire);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slogan { font-size: 1.08rem; font-weight: 600; color: rgba(255, 255, 255, .92); margin: .4rem 0 1.2rem; }
.pillars { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pillars span {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  backdrop-filter: blur(6px);
  transition: background .2s, transform .2s;
}
.pillars span:hover { background: rgba(255, 255, 255, .13); transform: translateY(-2px); }
.auth-card {
  background: var(--surface); color: var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 1.4rem; width: 100%; max-width: 400px; margin-top: 1.6rem;
  animation: fadeUp .5s .12s ease both;
}
.auth-tabs { display: flex; gap: .35rem; margin-bottom: 1.1rem; background: var(--surface-2); border-radius: 999px; padding: .25rem; }
.auth-tabs button {
  flex: 1; padding: .55rem; border-radius: 999px; border: none;
  background: transparent; font-weight: 700; font-size: .9rem; color: var(--muted);
  transition: all .18s;
}
.auth-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.landing-footer { margin: 1.8rem 0 1rem; color: rgba(255, 255, 255, .42); font-size: .82rem; text-align: center; animation: fadeUp .5s .22s ease both; }

/* ============================================================
 * BOUTONS
 * ============================================================ */
.btn-fire {
  position: relative; overflow: hidden;
  display: block; width: 100%; border: none; border-radius: var(--r-md);
  background: var(--grad-fire);
  color: #fff; font-weight: 700; font-size: 1rem; padding: .85rem 1.1rem;
  box-shadow: 0 10px 24px -10px rgba(255, 79, 26, .6);
  transition: transform .14s var(--ease-pop), box-shadow .18s, filter .18s;
}
.btn-fire::after {              /* reflet qui balaie au survol */
  content: ''; position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .45s ease;
  pointer-events: none;
}
.btn-fire:hover::after { left: 130%; }
.btn-fire:hover { box-shadow: 0 14px 30px -10px rgba(255, 79, 26, .7); transform: translateY(-1px); }
.btn-fire:active { transform: scale(.975); }
.btn-fire:disabled { opacity: .38; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-fire:disabled::after { display: none; }
.btn-fire.btn-small { width: auto; font-size: .84rem; padding: .55rem 1rem; }
.btn-fire.btn-big { font-size: 1.08rem; padding: 1rem; margin-top: .9rem; }

.btn-ghost {
  display: block; width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: .95rem; padding: .75rem 1rem;
  transition: border-color .18s, background .18s, transform .14s;
}
.btn-ghost:hover { border-color: #cfcabd; background: #fdfcfa; transform: translateY(-1px); }
.btn-ghost:active { transform: scale(.985); }
.btn-ghost.btn-small { width: auto; font-size: .84rem; padding: .5rem .9rem; }
.btn-mini {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; font-size: .75rem; font-weight: 600; padding: .3rem .7rem;
  transition: all .16s;
}
.btn-mini:hover { border-color: #cfcabd; transform: translateY(-1px); }
.btn-mini-red { color: var(--neg); border-color: #f4cdd8; }
.btn-mini-red:hover { background: var(--neg-soft); border-color: var(--neg); }

/* ============================================================
 * BARRE DU HAUT & NAVIGATION
 * ============================================================ */
.topbar {
  background: linear-gradient(160deg, var(--night) 30%, var(--night-2) 130%);
  color: #fff; padding-bottom: .45rem;
}
.topbar-inner {
  max-width: 720px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; padding: .7rem 1rem 0;
}
.logo { background: none; border: none; color: #fff; font-size: 1.35rem; font-weight: 700; padding: 0; letter-spacing: -.015em; }
.logo .fire { font-size: 1rem; display: inline-block; animation: floaty 3.2s ease-in-out infinite; }
.avatar-btn {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; font-size: 1.25rem; width: 42px; height: 42px;
  transition: background .18s, transform .18s var(--ease-pop);
}
.avatar-btn:hover { background: rgba(255, 255, 255, .16); transform: scale(1.06); }
.breadcrumb {
  max-width: 720px; margin: 0 auto; padding: .35rem 1rem .55rem;
  display: flex; gap: .45rem; align-items: center; font-size: .82rem; color: rgba(255, 255, 255, .55);
  flex-wrap: nowrap; overflow: hidden;
}
.breadcrumb button {
  background: rgba(255, 255, 255, .08); border: none; color: rgba(255, 255, 255, .85);
  border-radius: 999px; padding: .28rem .75rem; font-weight: 600; font-size: .78rem;
  transition: background .18s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; flex: 0 1 auto;
}
.breadcrumb button:hover { background: rgba(255, 255, 255, .16); }
.breadcrumb span { font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; flex: 0 1 auto; min-width: 0; }
@media (max-width: 520px) {
  /* Le badge 💬 est fixé à droite, à la hauteur du fil d'ariane : on tronque plus court
     et on lui réserve la place pour éviter tout chevauchement. */
  .breadcrumb { padding-right: 6.8rem; }
  .breadcrumb button, .breadcrumb span { max-width: 6.2rem; }
}

.main { max-width: 720px; margin: 0 auto; padding: 1.1rem 1rem 6.8rem; }
/* Entrée en scène douce et étagée du contenu */
.main > * { animation: fadeUp .34s ease both; }
.main > *:nth-child(2) { animation-delay: .05s; }
.main > *:nth-child(3) { animation-delay: .1s; }
.main > *:nth-child(4) { animation-delay: .15s; }
.main > *:nth-child(5) { animation-delay: .2s; }
.cards > * { animation: fadeUp .34s ease both; }
.cards > *:nth-child(2) { animation-delay: .05s; }
.cards > *:nth-child(3) { animation-delay: .1s; }
.cards > *:nth-child(4) { animation-delay: .15s; }
#council-body > * { animation: fadeUp .3s ease both; }

.bottomnav {
  position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: min(430px, calc(100% - 20px));
  display: flex;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(233, 230, 222, .9);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  padding: .3rem;
  z-index: 30;
}
.bottomnav button {
  flex: 1; background: none; border: none; padding: .45rem 0 .5rem;
  color: var(--muted); font-weight: 600; font-size: .64rem;
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  border-radius: 999px; transition: all .2s;
}
.bottomnav button span { font-size: 1.25rem; transition: transform .22s var(--ease-pop); }
.bottomnav button.active { color: var(--flame-deep); background: var(--flame-soft); }
.bottomnav button.active span { transform: scale(1.14) translateY(-1px); }

/* ============================================================
 * CARTES & STRUCTURE
 * ============================================================ */
.cards { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.2rem; margin-bottom: .9rem;
}
.card-btn { text-align: left; width: 100%; cursor: pointer; transition: transform .16s, box-shadow .2s, border-color .2s; }
.card-btn:hover { box-shadow: var(--shadow-md); border-color: #dcd7cc; transform: translateY(-2px); }
.card-btn:active { transform: scale(.995); }
.card-title { font-size: 1.1rem; font-weight: 700; }
.card-sub { color: var(--muted); font-size: .84rem; margin-top: .2rem; }
.card-code { margin-top: .45rem; font-size: .8rem; color: var(--ink-2); }
.card-alert { border: 1.5px solid var(--flame-2); background: #fffaf0; }
.card-dark { background: linear-gradient(145deg, var(--night) 0%, var(--night-2) 100%); color: #fff; border: none; }
.card-gold { background: linear-gradient(135deg, #ffd166 0%, #ffab1f 100%); color: #33240a; border: none; }
.card-mini { background: var(--surface-2); border-radius: var(--r-md); padding: .75rem .9rem; margin: .6rem 0; font-size: .9rem; }
.badge {
  display: inline-block; background: var(--flame); color: #fff; border-radius: 999px;
  font-size: .7rem; font-weight: 700; padding: .18rem .6rem; margin-left: .3rem;
}
.badge-soft { background: var(--surface-2); color: var(--ink-2); margin-left: 0; }
.hero-mini { margin: .3rem 0 1.1rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 1.1rem 0 .55rem; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.row-2 + .details-card, .row-2 + .card { margin-top: 1.1rem; }
/* Filet de sécurité : le bloc "Groupes archivés" sur le dashboard ne doit jamais coller aux boutons. */
#main .row-2 ~ .details-card { margin-top: 1.1rem; }
.code-inline {
  background: var(--surface-2); border: 1px solid var(--line);
  padding: .18rem .55rem; border-radius: var(--r-sm); letter-spacing: .08em;
  font-weight: 700; font-size: .85rem;
}

.member-list { display: flex; flex-direction: column; gap: .55rem; margin: .6rem 0; }
.member { display: flex; align-items: center; gap: .65rem; }
.member-avatar {
  font-size: 1.25rem; background: var(--surface-2); border-radius: 999px;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.req-row { display: flex; align-items: center; justify-content: space-between; padding: .4rem 0; }
.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line);
}

/* Suggestions de groupes (accueil) */
.suggest-list { max-height: 320px; overflow-y: auto; margin-top: .4rem; padding-right: .2rem; }
.suggest-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .6rem; border-radius: var(--r-md);
  transition: background .15s;
}
.suggest-row:hover { background: var(--surface-2); }
.suggest-row + .suggest-row { border-top: 1px solid var(--line); }

/* ============================================================
 * SÉLECTEUR DE CRITÈRES
 * ============================================================ */
.crit-picker {
  display: flex; flex-direction: column; gap: .3rem; max-height: 260px;
  overflow-y: auto; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: .5rem; margin: .3rem 0 .6rem; background: #fcfbf9;
}
.crit-item {
  display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem;
  border-radius: var(--r-sm); font-weight: 600; font-size: .9rem;
  transition: background .13s;
}
.crit-item:hover { background: var(--surface-2); }
.crit-item input { width: auto; margin: 0; accent-color: var(--flame); }
.crit-item em { margin-left: auto; font-style: normal; font-size: .66rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; letter-spacing: .02em; }
.crit-pos em { background: var(--pos-soft); color: var(--pos); }
.crit-neg em { background: var(--neg-soft); color: var(--neg); }
.add-crit { margin: .4rem 0 .8rem; }
.add-crit summary { cursor: pointer; font-weight: 700; color: var(--lagoon); font-size: .9rem; }
.check-inline { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; }
.check-inline input { width: auto; margin: 0; accent-color: var(--flame); }

/* ============================================================
 * CONSEIL
 * ============================================================ */
.council-head-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.council-head input[type="date"] {
  width: auto; margin: 0; background: rgba(255, 255, 255, .08);
  color: #fff; border-color: rgba(255, 255, 255, .16);
  color-scheme: dark;
}
.prize-line { color: rgba(255, 255, 255, .82); font-size: .88rem; margin: .55rem 0 0; }
.prize-line-dark { font-size: .88rem; margin: 0 0 .6rem; }

.next-banner {
  background: var(--flame-soft); border: 1.5px solid #ffd2ba;
  border-radius: var(--r-md); padding: .6rem .85rem;
  font-size: .92rem; margin-bottom: .75rem;
}
.card-dark .next-banner { background: rgba(255, 171, 31, .12); border-color: rgba(255, 171, 31, .35); color: rgba(255, 255, 255, .92); }
.next-banner.warn { background: var(--neg-soft); border-color: #f0a8bc; }

.ready-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; margin: .8rem 0; }
.ready-chip {
  border: 1.5px solid var(--line); border-radius: var(--r-md); padding: .6rem .5rem;
  display: flex; flex-direction: column; align-items: center; gap: .18rem; text-align: center;
  background: var(--surface); transition: all .25s;
}
.ready-chip em { font-style: normal; font-size: .7rem; color: var(--muted); font-weight: 600; }
.ready-chip.is-ready { border-color: var(--pos); background: var(--pos-soft); animation: popIn .3s var(--ease-pop); }
.ready-chip.is-ready em { color: var(--pos); }
.ready-chip.is-absent { opacity: .5; border-style: dashed; }
.ready-avatar { font-size: 1.5rem; }

.question-card { border-top: 4px solid var(--flame); }
.q-progress {
  font-size: .7rem; font-weight: 700; color: var(--flame-deep);
  letter-spacing: .14em; text-transform: uppercase;
}
.q-title { font-size: 1.55rem; font-weight: 700; margin: .25rem 0 .35rem; letter-spacing: -.015em; }
.q-ask { margin: .9rem 0 .35rem; font-size: .92rem; color: var(--ink-2); }
.tag { font-size: .68rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; letter-spacing: .02em; }
.tag-pos { background: var(--pos-soft); color: var(--pos); }
.tag-neg { background: var(--neg-soft); color: var(--neg); }
.big-check { font-size: 1.4rem; margin: 1rem 0 .4rem; font-weight: 700; animation: popIn .35s var(--ease-pop); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .5rem; }
.chip {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: .45rem .85rem; font-weight: 600; font-size: .86rem;
  transition: all .15s var(--ease-pop);
}
.chip:hover:not(:disabled):not(.chip-on) { border-color: #cfcabd; transform: translateY(-1px); }
.chip:disabled { opacity: .3; cursor: not-allowed; }
.chip-on {
  background: var(--ink); border-color: var(--ink); color: #fff;
  box-shadow: 0 5px 14px -5px rgba(25, 28, 38, .45);
  animation: popIn .2s var(--ease-pop);
}
.chip-avatar { font-size: 1.15rem; padding: .32rem .6rem; }

.answered-row { display: flex; gap: .4rem; justify-content: center; margin-top: .9rem; flex-wrap: wrap; }
.dot { font-size: 1.15rem; opacity: .22; filter: grayscale(1); transition: all .3s; }
.dot-on { opacity: 1; filter: none; transform: scale(1.12); animation: popIn .3s var(--ease-pop); }

.winner-card {
  background: var(--grad-fire);
  color: #fff; text-align: center; padding: 1.7rem 1rem; border: none;
  animation: fadeUp .4s ease both, emberGlow 2.6s 0.4s ease-in-out infinite;
}
.winner-fire { font-size: 2.2rem; display: inline-block; animation: floaty 2.4s ease-in-out infinite; }
.winner-label { text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; font-weight: 700; margin: .35rem 0; opacity: .92; }
.winner-name { font-size: 1.9rem; font-weight: 700; text-shadow: 0 2px 14px rgba(0, 0, 0, .2); }

/* ============================================================
 * CLASSEMENTS
 * ============================================================ */
.rank-row { display: grid; grid-template-columns: 2.1rem 1fr 1fr auto; gap: .55rem; align-items: center; padding: .32rem 0; }
.rank-pos { font-size: 1rem; }
.rank-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.rank-bar { height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.card-gold .rank-bar { background: rgba(255, 255, 255, .45); }
.rank-bar i {
  display: block; height: 100%; background: var(--grad-fire); border-radius: 999px;
  transform-origin: left; animation: growBarX .55s ease both;
}
@keyframes growBarX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rank-pts { font-weight: 700; font-size: .84rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.day-row {
  width: 100%; display: flex; justify-content: space-between; gap: .5rem; align-items: center;
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-md);
  padding: .65rem .85rem; margin: .3rem 0;
  font-weight: 600; color: var(--ink); font-size: .86rem; text-align: left;
  transition: all .16s;
}
.day-row:hover { border-color: var(--line); background: #ece9e1; transform: translateX(2px); }
.detail-crit { margin: .9rem 0; }
.detail-crit h4 { margin: .2rem 0 .35rem; }
.mini-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.mini-table th {
  text-align: left; color: var(--muted); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .06em; padding: .25rem .35rem; font-weight: 700;
}
.mini-table td { padding: .3rem .35rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* ============================================================
 * STATS
 * ============================================================ */
.champ-row { display: flex; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.champ-row:last-child { border-bottom: none; }
.champ-crit { font-weight: 600; font-size: .92rem; }
.champ-who { text-align: right; font-size: .86rem; }
.player-stat-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; font-size: 1rem; }
.stat-nums { display: flex; gap: .6rem; margin: .3rem 0 .7rem; }
.stat-nums span {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface-2); border-radius: var(--r-md); padding: .55rem .5rem; flex: 1;
}
.stat-nums b { font-size: 1.3rem; color: var(--flame-deep); font-variant-numeric: tabular-nums; }
.stat-nums small { color: var(--muted); font-weight: 600; font-size: .68rem; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 50px; }
.spark i {
  flex: 1; max-width: 22px; background: var(--grad-fire); border-radius: 4px 4px 2px 2px;
  opacity: .92; transform-origin: bottom; animation: growBar .5s ease both;
}
.spark i:nth-child(2) { animation-delay: .04s; }
.spark i:nth-child(3) { animation-delay: .08s; }
.spark i:nth-child(4) { animation-delay: .12s; }
.spark i:nth-child(5) { animation-delay: .16s; }
.spark i:nth-child(6) { animation-delay: .2s; }
.spark i:nth-child(7) { animation-delay: .24s; }

/* ============================================================
 * COMPTES
 * ============================================================ */
.lbl-mini {
  font-size: .66rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin-top: .6rem;
}
.bal-row { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .92rem; }
.bal-row b { font-variant-numeric: tabular-nums; }
.settle-box {
  background: var(--flame-soft); border: 1px solid #ffd2ba;
  border-radius: var(--r-md); padding: .75rem .9rem; margin-top: .6rem; font-size: .9rem;
}
.settle-box p { margin: .3rem 0; }
.exp-row {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.exp-row:last-child { border-bottom: none; }

/* ============================================================
 * PHOTOS
 * ============================================================ */
.dropzone {
  width: 100%; border: 2px dashed #ccc7ba; background: #fcfbf9; color: var(--muted);
  border-radius: var(--r-md); padding: 1.1rem; font-weight: 700; font-size: .9rem;
  margin: .3rem 0 .6rem; transition: all .18s;
}
.dropzone:hover { border-color: var(--flame); color: var(--flame-deep); background: var(--flame-soft); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; }
.photo-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
  animation: fadeUp .32s ease both;
}
.photo-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.photo-card img { width: 100%; height: 132px; object-fit: cover; display: block; cursor: pointer; transition: transform .35s ease; }
.photo-card:hover img { transform: scale(1.04); }
.photo-meta { display: flex; flex-direction: column; align-items: stretch; gap: .3rem;
  padding: .4rem .5rem .45rem; position: relative; background: var(--surface); }
.photo-actions { display: flex; justify-content: space-between; align-items: center; gap: .3rem; }
.pact { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .2rem;
  min-height: 30px; border: 1px solid var(--line); background: rgba(0,0,0,.03);
  border-radius: 9px; font-size: .82rem; font-weight: 700; color: var(--ink-2);
  text-decoration: none; cursor: pointer; padding: .15rem .2rem; }
.pact:active { transform: scale(1.06); }
.pact:disabled { opacity: .35; cursor: not-allowed; }
.pact.pact-del { color: #c2255c; flex: 0 0 34px; }
.photo-meta small { color: var(--muted); line-height: 1.3; font-size: .72rem; }
.btn-like { background: none; border: none; font-size: .84rem; font-weight: 700; color: var(--ink-2); transition: transform .15s var(--ease-pop); }
.btn-like:active { transform: scale(1.3); }

.slideshow {
  position: fixed; inset: 0; background: #05080f; z-index: 100;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  animation: fadeUp .25s ease both;
}
.slideshow img { max-width: 100%; max-height: 100%; object-fit: contain; }
.slide-caption {
  position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center;
  color: rgba(255, 255, 255, .95); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); font-size: .92rem;
}

/* ============================================================
 * MODALE & TOAST
 * ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(13, 17, 34, .55);
  backdrop-filter: blur(4px);
  z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  animation: fadeUp .2s ease both;
}
.modal {
  background: var(--surface); border-radius: 24px 24px 0 0; width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto; padding: 1.3rem 1.3rem 2rem;
  box-shadow: var(--shadow-lg);
  animation: slideUp .32s var(--ease-pop) both;
}
@media (min-width: 600px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 24px; }
}
.toast {
  position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--night); color: #fff; font-weight: 600;
  padding: .65rem 1.2rem; border-radius: 999px; box-shadow: var(--shadow-md);
  z-index: 60; font-size: .88rem; max-width: 90vw; text-align: center;
  animation: popIn .25s var(--ease-pop) both;
}
.toast-error { background: var(--neg); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Invitation QR & bannière ---------- */
.qr-box {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 1rem; margin: .6rem 0; min-height: 252px;
}
.qr-box img, .qr-box canvas { border-radius: 6px; }
.invite-banner {
  background: var(--flame-soft); border: 1.5px solid #ffd2ba; color: var(--ink);
  border-radius: var(--r-md); padding: .65rem .85rem; font-size: .92rem; margin-bottom: 1rem;
  animation: fadeUp .4s ease both;
}

/* ---------- Repères de lieu (groupe / vacances) ---------- */
.place-hero { margin: .2rem 0 1rem; }
.place-hero h2 { font-size: 1.55rem; margin: .1rem 0 .15rem; }
.place-hero p { margin: 0; }
.place-kicker {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--flame-deep);
}
.place-kicker-light { color: rgba(255, 255, 255, .6); text-transform: none; letter-spacing: .02em; font-size: .78rem; margin-bottom: .15rem; }

/* ---------- Cadeau / gage ---------- */
.winner-prize {
  margin: .6rem auto 0; display: inline-block;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px; padding: .35rem .9rem; font-size: .92rem;
}
.gage-box { border: 1.5px solid #f0d3a0; background: #fff7e6; }

/* ---------- Notifications (profil) ---------- */
.notif-box {
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: .7rem .8rem; margin: .3rem 0 .8rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.nf-sub { margin-left: 1.4rem; color: var(--ink-2); }

/* ---------- Statistiques v2 ---------- */
.stats-tabs { display: flex; gap: .35rem; margin: .5rem 0 .6rem; background: var(--surface-2); border-radius: 999px; padding: .25rem; }
.stats-tabs button {
  flex: 1; padding: .5rem; border-radius: 999px; border: none;
  background: transparent; font-weight: 700; font-size: .86rem; color: var(--muted);
  transition: all .18s;
}
.stats-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.record {
  display: grid; grid-template-columns: 1.7rem 1fr auto auto; gap: .5rem; align-items: center;
  padding: .42rem 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.record:last-child { border-bottom: none; }
.record-ico { font-size: 1.05rem; }
.record-lbl { color: var(--ink-2); font-weight: 600; }
.record-who { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-val { color: var(--flame-deep); font-variant-numeric: tabular-nums; }
.chart { width: 100%; height: auto; display: block; margin: .3rem 0; }
.chart .axis { stroke: var(--line); stroke-width: 1.5; }
.chart .tick { fill: var(--muted); font-size: 11px; font-family: 'Inter', sans-serif; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.legend i { display: inline-block; width: 12px; height: 4px; border-radius: 999px; margin-right: .3rem; vertical-align: middle; }

/* ---------- Lien guide ---------- */
.guide-link { color: rgba(255,255,255,.8); text-decoration: none; font-weight: 700; }
.guide-link:hover { color: #fff; text-decoration: underline; }

/* ============================================================
 * COUCHE v4 "Horizon 2026" — ambiance vivante, verre & lumière
 * ============================================================ */

/* Fond "aurora" : nappes de couleur qui dérivent lentement */
body::before {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 22%, rgba(255, 79, 26, .10), transparent 65%),
    radial-gradient(34% 30% at 82% 16%, rgba(13, 157, 149, .10), transparent 65%),
    radial-gradient(42% 38% at 62% 88%, rgba(124, 92, 255, .09), transparent 65%);
  filter: blur(46px) saturate(1.15);
  animation: aurora 26s ease-in-out infinite alternate;
}
body.landing::before {
  background:
    radial-gradient(40% 34% at 20% 24%, rgba(255, 79, 26, .30), transparent 65%),
    radial-gradient(36% 32% at 82% 14%, rgba(255, 171, 31, .18), transparent 65%),
    radial-gradient(44% 40% at 60% 90%, rgba(13, 157, 149, .22), transparent 65%);
}
@keyframes aurora {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1) rotate(0.001deg); }
  100% { transform: translate3d(2.5%, 2.5%, 0) scale(1.07) rotate(0.001deg); }
}

/* Cartes : rayon plus généreux + liseré dégradé façon "hairline lumineux" */
:root { --r-lg: 24px; }
.card { position: relative; }
.card:not(.card-dark):not(.card-gold):not(.winner-card)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(255, 79, 26, .30), transparent 28%, transparent 72%, rgba(13, 157, 149, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .5; transition: opacity .25s;
}
.card-btn:hover::after { opacity: 1; }

/* Focus clavier moderne */
:focus-visible { outline: 3px solid rgba(255, 79, 26, .45); outline-offset: 2px; border-radius: 8px; }

/* ---------- Menu utilisateur (topbar) ---------- */
.user-menu { position: relative; }
.user-chip {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  background: none; border: none; padding: 0; color: #fff;
}
.user-name {
  font-size: .62rem; font-weight: 700; color: rgba(255, 255, 255, .75);
  max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar-btn {
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.avatar-img { width: 1.35em; height: 1.35em; border-radius: 999px; object-fit: cover; vertical-align: -.3em; }
.avatar-btn .avatar-img { width: 100%; height: 100%; }
.member-avatar .avatar-img { width: 100%; height: 100%; }
.ready-avatar .avatar-img { width: 36px; height: 36px; }
.av-preview {
  font-size: 2rem; width: 64px; height: 64px; border-radius: 999px;
  background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; border: 2px solid var(--line); flex: 0 0 auto;
}
.av-preview .avatar-img { width: 100%; height: 100%; }
.profile-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.profile-head h3 { margin: 0; }

.menu-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 45;
  min-width: 220px; padding: .4rem;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  animation: popIn .18s var(--ease-pop) both; transform-origin: top right;
}
.menu-pop button, .menu-pop a {
  display: block; width: 100%; text-align: left; text-decoration: none;
  background: none; border: none; color: var(--ink);
  font-weight: 600; font-size: .9rem; padding: .55rem .7rem; border-radius: 10px;
  transition: background .12s;
}
.menu-pop button:hover, .menu-pop a:hover { background: var(--surface-2); }
.menu-pop .menu-danger { color: var(--neg); }
.menu-pop .menu-danger:hover { background: var(--neg-soft); }

/* ---------- Vignettes : vacances actives & compte à rebours ---------- */
.card-vacs { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.vac-pill {
  background: var(--lagoon-soft); color: #0a6f6a; border-radius: 999px;
  font-size: .76rem; font-weight: 700; padding: .18rem .6rem;
}
.countdown {
  margin-top: .5rem; display: inline-flex; align-items: center; gap: .3rem;
  background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: 999px; padding: .3rem .75rem; font-size: .82rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.countdown b { color: var(--flame-deep); }
.countdown.cd-none { color: var(--muted); border-style: dashed; }
.countdown.cd-soon {
  background: var(--flame-soft); border-color: var(--flame); color: var(--flame-deep);
  animation: cdPulse 1.1s ease-in-out infinite;
}
.countdown.cd-now {
  background: var(--grad-fire); border-color: transparent; color: #fff;
  animation: cdPulse .8s ease-in-out infinite;
}
.countdown.cd-now b { color: #fff; }
@keyframes cdPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 26, .45); opacity: 1; }
  50%      { box-shadow: 0 0 0 7px rgba(255, 79, 26, 0); opacity: .82; }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } }

/* ---------- Cycle de vie : états & archives ---------- */
.state-pill {
  display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: .16rem .55rem; vertical-align: middle; margin-left: .3rem;
}
.state-done  { background: var(--surface-2); color: var(--ink-2); }
.state-close { background: var(--pos-soft); color: var(--pos); }
.state-warn  { background: var(--neg-soft); color: var(--neg); animation: cdPulse 1.4s ease-in-out infinite; }
.card-closed { opacity: .78; filter: saturate(.85); }
.details-card summary {
  cursor: pointer; font-weight: 700; color: var(--ink-2); font-size: .95rem;
  list-style: none; display: flex; align-items: center; gap: .4rem;
}
.details-card summary::-webkit-details-marker { display: none; }
.details-card summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .2s; }
.details-card[open] summary::after { transform: rotate(180deg); }
.details-card > .card, .details-card > .suggest-row { margin-top: .7rem; }

/* ---------- Profils publics & liens joueurs ---------- */
.plink { cursor: pointer; border-bottom: 1.5px dotted rgba(255, 79, 26, .45); transition: color .15s, border-color .15s; }
.plink:hover { color: var(--flame-deep); border-bottom-color: var(--flame-deep); }
.winner-name .plink { border-bottom-color: rgba(255, 255, 255, .55); }
.winner-name .plink:hover { color: #fff; border-bottom-color: #fff; }
.geo-link { text-decoration: none; }
.btn-head-del { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #ffb0c0; }
.stat-nums + .stat-nums { margin-top: -.2rem; }

/* ============================================================
 * COUCHE v5 "Chromatique 2026" — chaque section a sa couleur,
 * dégradés vivants, brillances, étincelles, transitions natives.
 * ============================================================ */

/* Accent dynamique : piloté par l'onglet actif (body[data-tab]) */
:root {
  --accent: var(--flame);
  --accent-2: var(--flame-2);
  --accent-soft: var(--flame-soft);
  --grad-accent: linear-gradient(118deg, var(--accent) 0%, var(--accent-2) 115%);
}
body[data-tab="totem"]    { --accent: #e5a50a; --accent-2: #ffd166; --accent-soft: #fff6df; }
body[data-tab="stats"]    { --accent: #7c5cff; --accent-2: #b39cff; --accent-soft: #f1edff; }
body[data-tab="tricount"] { --accent: #0d9d95; --accent-2: #4cc8c0; --accent-soft: #e4f6f4; }
body[data-tab="photos"]   { --accent: #d6367f; --accent-2: #ff7ab0; --accent-soft: #fdeaf3; }

html { scroll-behavior: smooth; }

/* En-tête du Conseil : date en ligne */
.head-date { font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.62); letter-spacing: 0; }

/* Navigation : l'onglet actif prend sa couleur de section */
.bottomnav button.active { color: var(--accent); background: var(--accent-soft); }
.bottomnav button.active span { filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--accent) 45%, transparent)); }

/* Titres de cartes : puce losange dégradée aux couleurs de la section */
.card > h3::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  background: var(--grad-accent); margin-right: .45rem; transform: rotate(45deg) translateY(-1px);
}
.card-dark > h3::before, .card-gold > h3::before, .winner-card > h3::before { display: none; }

/* Les jauges et chiffres clés suivent l'accent de section */
.rank-bar i { background: var(--grad-accent); }
.spark i { background: var(--grad-accent); }
.stat-nums b { color: var(--accent); }
.record-val { color: var(--accent); }
.countdown b { color: var(--accent); }
.q-progress { color: var(--accent); }
.stats-tabs button.active { color: var(--accent); }

/* Brillance qui traverse les barres de classement */
.rank-bar i { position: relative; overflow: hidden; }
.rank-bar i::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: barSheen 2.6s ease-in-out infinite;
}
@keyframes barSheen { 0% { left: -40%; } 60%, 100% { left: 110%; } }

/* Bouton flamme : dégradé qui respire */
.btn-fire { background-size: 190% 190%; animation: gradBreathe 7s ease-in-out infinite alternate; }
@keyframes gradBreathe { 0% { background-position: 0% 40%; } 100% { background-position: 100% 60%; } }

/* Carte vainqueur : pluie d'étincelles */
.winner-card { overflow: hidden; }
.winner-card::before {
  content: ''; position: absolute; inset: -20% 0 0 0; pointer-events: none; opacity: .4;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.6px);
  background-size: 64px 64px, 96px 96px;
  background-position: 0 0, 30px 45px;
  animation: sparkleFall 9s linear infinite;
}
@keyframes sparkleFall { to { background-position: 22px 190px, -18px 260px; } }

/* Logo landing : dégradé qui ondule */
.logo-big .k, .logo .k { background-size: 220% 220%; animation: gradBreathe 5.5s ease-in-out infinite alternate; }

/* Toast et pilules : plus de peps */
.toast { background: linear-gradient(140deg, var(--night) 0%, #23304f 130%); border: 1px solid rgba(255,255,255,.12); }
.vac-pill { border: 1px solid rgba(13,157,149,.25); }

/* Transitions de vues natives (View Transitions API) */
::view-transition-old(root) { animation: vtOut .16s ease both; }
::view-transition-new(root) { animation: vtIn .28s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vtIn  { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .rank-bar i::after, .winner-card::before { animation: none !important; display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ============================================================
 * COUCHE v6 "Plein feu" — la couleur de section, VRAIMENT visible
 * + gamification du conseil (progression, attentes, CTA, chat, confettis)
 * ============================================================ */

/* Liseré supérieur coloré sur toutes les cartes claires : identité de section immédiate */
.card:not(.card-dark):not(.card-gold):not(.winner-card) {
  /* overflow:hidden -> le liseré est clippé par le border-radius de la carte :
     coins toujours alignés, aucune retouche de rayon nécessaire.
     (chevron › et chip 💬 sont positionnés à l'intérieur, donc non coupés.) */
  overflow: hidden;
}
.card:not(.card-dark):not(.card-gold):not(.winner-card)::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--grad-accent);
}
/* Fond de page teinté par la section */
body::before {
  background:
    radial-gradient(38% 32% at 18% 22%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%),
    radial-gradient(34% 30% at 82% 16%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 65%),
    radial-gradient(42% 38% at 62% 88%, rgba(124, 92, 255, .08), transparent 65%) !important;
}
body.landing::before {
  background:
    radial-gradient(40% 34% at 20% 24%, rgba(255, 79, 26, .30), transparent 65%),
    radial-gradient(36% 32% at 82% 14%, rgba(255, 171, 31, .18), transparent 65%),
    radial-gradient(44% 40% at 60% 90%, rgba(13, 157, 149, .22), transparent 65%) !important;
}
/* Onglet actif : pilule pleine en dégradé de la section */
.bottomnav button.active { background: var(--grad-accent); color: #fff; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.bottomnav button.active span { filter: none; }
/* Titres de section en dégradé encre -> accent */
.section-head h2, .place-hero h2, .hero-mini h2 {
  background: linear-gradient(118deg, var(--ink) 30%, var(--accent) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.badge { background: var(--grad-accent); }
.day-row:hover { background: var(--accent-soft); }
.chip-on { background: linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 70%, var(--accent)) 100%); }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.dropzone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.next-banner { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, #fff); }
.card-dark .next-banner { background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .35); }

/* ---------- Gamification du conseil ---------- */
.q-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: .45rem 0 .6rem; }
.q-bar i { display: block; height: 100%; background: var(--grad-accent); border-radius: 999px; transition: width .5s cubic-bezier(.22,1,.36,1); position: relative; overflow: hidden; }
.q-bar i::after { content: ''; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); animation: barSheen 2.2s ease-in-out infinite; }
.q-remaining { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.your-turn {
  display: inline-block; margin: .4rem 0 .1rem; padding: .3rem .8rem; border-radius: 999px;
  background: var(--grad-accent); color: #fff; font-weight: 800; font-size: .82rem;
  animation: popIn .3s var(--ease-pop) both, cdPulse 1.6s .4s ease-in-out infinite;
}
.cta-pulse { animation: gradBreathe 7s ease-in-out infinite alternate, ctaRing 1.5s ease-out infinite !important; }
@keyframes ctaRing {
  0%   { box-shadow: 0 10px 24px -10px rgba(255,79,26,.6), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 10px 24px -10px rgba(255,79,26,.6), 0 0 0 14px transparent; }
}
.waiting-fire { text-align: center; font-size: 2.4rem; animation: flicker 1.4s ease-in-out infinite; }
.wait-dots i { display: inline-block; font-style: normal; font-weight: 800; animation: dotBounce 1.2s infinite; }
.wait-dots i:nth-child(2) { animation-delay: .15s; }
.wait-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.done-ribbon {
  text-align: center; font-weight: 800; font-size: 1rem; color: #fff;
  background: var(--grad-accent); border-radius: 999px; padding: .5rem 1rem; margin-bottom: .8rem;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 65%, transparent);
  animation: popIn .35s var(--ease-pop) both;
}
.card-action { border: 2px solid color-mix(in srgb, var(--accent) 55%, #fff); }
.banner-due { animation: cdPulse 1.2s ease-in-out infinite; border-color: var(--flame) !important; }

/* ---------- Chat du conseil ---------- */
.chat-box {
  max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: .45rem;
  padding: .5rem; background: var(--surface-2); border-radius: var(--r-md); margin: .3rem 0 .55rem;
}
.chat-msg { display: flex; flex-direction: column; max-width: 82%; animation: fadeUp .25s ease both; }
.chat-mine { align-self: flex-end; align-items: flex-end; }
.chat-meta { font-size: .66rem; color: var(--muted); font-weight: 700; margin: 0 .3rem .1rem; }
.chat-bubble {
  background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: .42rem .7rem; font-size: .9rem; word-break: break-word;
}
.chat-mine .chat-bubble { background: var(--grad-accent); color: #fff; border: none; border-radius: 14px 14px 4px 14px; }
.chat-row { display: flex; gap: .45rem; align-items: center; }
.chat-row input { margin: 0; flex: 1; }
.chat-row .btn-fire { padding: .55rem .95rem; }

/* ---------- Confettis ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 130; overflow: hidden; }
.confetti i {
  position: absolute; top: -5vh; height: 14px; border-radius: 3px; opacity: .95;
  animation: confFall linear forwards;
}
@keyframes confFall {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(112vh) rotate(720deg); opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti, .your-turn, .cta-pulse, .waiting-fire, .wait-dots i { animation: none !important; }
}

/* ============================================================
 * COUCHE v7 — lavis de couleur par section (visible !) 
 * ============================================================ */
body { background-attachment: fixed; }
body:not(.landing) { background: linear-gradient(180deg, var(--flame-soft) 0, var(--bg) 300px) fixed; }
body[data-tab="conseil"]  { background: linear-gradient(180deg, #ffe4d3 0, var(--bg) 320px) fixed; }
body[data-tab="totem"]    { background: linear-gradient(180deg, #ffedbe 0, var(--bg) 320px) fixed; }
body[data-tab="stats"]    { background: linear-gradient(180deg, #e6ddff 0, var(--bg) 320px) fixed; }
body[data-tab="tricount"] { background: linear-gradient(180deg, #ccf1ee 0, var(--bg) 320px) fixed; }
body[data-tab="photos"]   { background: linear-gradient(180deg, #ffdcec 0, var(--bg) 320px) fixed; }
body.landing { background:
    radial-gradient(950px 520px at 78% -12%, rgba(255, 79, 26, .28) 0%, transparent 55%),
    radial-gradient(720px 520px at -5% 105%, rgba(13, 157, 149, .16) 0%, transparent 55%),
    var(--night) !important; }


/* ---------- Sélecteurs cadeaux/gages & privilège du vainqueur ---------- */
.reward-row { display: flex; gap: .45rem; align-items: center; margin: .25rem 0 .8rem; }
.reward-row select {
  flex: 1; margin: 0; padding: .65rem .8rem;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); font-family: inherit; font-size: .93rem; color: var(--ink);
}
.reward-row select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }

/* ============================================================
 * COUCHE v8 — LE fix couleur : le fond vit sur <html>.
 * (body::before z-index -1 passait DERRIÈRE le fond opaque du
 * body -> invisible ; et background-attachment:fixed est cassé
 * sur iOS. Le canvas <html> est, lui, incontournable.)
 * ============================================================ */
html { min-height: 100%; background: linear-gradient(180deg, #ffe0cc 0%, #fdf3e9 40%, #fbf1e7 100%); }
html[data-tab="conseil"]  { background: linear-gradient(180deg, #ffd6bd 0%, #fdf1e5 45%, #fbf1e7 100%); }
html[data-tab="totem"]    { background: linear-gradient(180deg, #ffe3a1 0%, #fdf5df 45%, #fbf3e2 100%); }
html[data-tab="stats"]    { background: linear-gradient(180deg, #dcd2ff 0%, #f3f0fd 45%, #f4f1fb 100%); }
html[data-tab="tricount"] { background: linear-gradient(180deg, #bfece8 0%, #ecf8f7 45%, #eef8f6 100%); }
html[data-tab="photos"]   { background: linear-gradient(180deg, #ffd0e5 0%, #fdeff5 45%, #fcf0f4 100%); }
body:not(.landing) { background: transparent !important; }
/* Les cartes restent bien lisibles sur fond coloré */
.card:not(.card-dark):not(.card-gold):not(.winner-card) { background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); }

/* ---------- Cloche push (topbar) ---------- */
.topbar-right { display: flex; align-items: center; gap: .7rem; }
.bell-btn {
  width: 38px; height: 38px; border-radius: 999px; font-size: 1.05rem;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, background .15s, box-shadow .15s;
}
.bell-btn:hover { transform: scale(1.08); background: rgba(255, 255, 255, .18); }
.bell-btn.bell-on {
  background: linear-gradient(135deg, #ffb020, #ff7a1a);
  border-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(255, 160, 30, .7);
  animation: popIn .3s var(--ease-pop) both;
}

/* ---------- Rappels "fin du jeu" ---------- */
.end-chip {
  display: inline-block; font-size: .74rem; font-weight: 700;
  color: #8a6d1d; background: #fff3cd; border: 1px solid #f0dfa0;
  border-radius: 999px; padding: .16rem .6rem; margin-top: .4rem;
}
.end-chip-soon { color: #fff; background: var(--grad-fire); border-color: transparent; animation: cdPulse 1.3s ease-in-out infinite; }
.end-chip-tbd { color: var(--muted); background: var(--surface-2); border-style: dashed; }
.card-endinfo { margin-top: .3rem; }
.end-line {
  margin: .55rem 0 0; font-size: .95rem; color: #ffd9a8; font-weight: 600;
  background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .3);
  border-radius: 12px; padding: .45rem .7rem; display: inline-block;
}
.end-line b { color: #ffcf7d; }
.end-line .end-rel { color: #fff; font-weight: 800; }
.end-line-soon { animation: cdPulse 1.3s ease-in-out infinite; border-color: var(--flame); }
.end-line-tbd { color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .15); }

/* ---------- Toast repensé : pilule compacte en haut, sous la barre ---------- */
.toast {
  position: fixed !important;
  top: calc(64px + env(safe-area-inset-top)) !important;
  bottom: auto !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  max-width: min(92vw, 430px);
  background: linear-gradient(140deg, rgba(28, 36, 64, .94) 0%, rgba(41, 53, 92, .94) 100%) !important;
  color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.3;
  padding: .55rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 4px solid var(--flame) !important;
  box-shadow: 0 12px 32px -10px rgba(10, 14, 30, .55);
  backdrop-filter: blur(12px) saturate(1.3);
  animation: toastDrop .32s cubic-bezier(.22, 1, .36, 1) both;
  z-index: 200;
}
.toast.toast-error { border-left-color: var(--neg) !important; background: linear-gradient(140deg, rgba(64, 22, 30, .95), rgba(90, 30, 40, .95)) !important; }
@keyframes toastDrop {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---------- Bannière d'installation PWA ---------- */
.pwa-bar {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 150;
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .8rem; border-radius: 18px;
  background: linear-gradient(135deg, rgba(28, 36, 64, .92), rgba(60, 34, 20, .92)), rgba(20, 25, 45, .9);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px) saturate(1.3);
  animation: fadeUp .35s ease both;
}
.pwa-badge {
  width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto;
  background: var(--grad-fire); color: #fff; font-weight: 900; font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  box-shadow: 0 8px 18px -6px rgba(255, 79, 26, .55);
}
.pwa-txt { flex: 1; min-width: 0; color: #fff; display: flex; flex-direction: column; line-height: 1.2; }
.pwa-txt small { color: rgba(255, 255, 255, .7); font-size: .74rem; }
.pwa-bar .btn-mini { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }

/* ---------- Sous-titres de sections (kickers) ---------- */
.sec-kicker {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin: .9rem 0 .5rem;
}
.sec-kicker::after { content: ''; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent); }
.sec-count {
  font-size: .7rem; font-weight: 800; letter-spacing: 0; text-transform: none;
  background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: .12rem .55rem;
}

/* ---------- Podium des stats ---------- */
.podium-card { overflow: hidden; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: .7rem; padding: .4rem .2rem 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 1; max-width: 130px; animation: fadeUp .45s ease both; }
.pod-2 { animation-delay: .05s; } .pod-3 { animation-delay: .12s; }
.pod-av { font-size: 2rem; width: 52px; height: 52px; border-radius: 999px; background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border: 2.5px solid var(--line); }
.pod-av .avatar-img { width: 100%; height: 100%; }
.pod-1 .pod-av { width: 64px; height: 64px; font-size: 2.4rem; border-color: #e5a50a;
  box-shadow: 0 0 0 4px rgba(229, 165, 10, .18), 0 8px 20px -8px rgba(229, 165, 10, .6); }
.pod-name { font-weight: 800; font-size: .82rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-bar {
  width: 100%; border-radius: 12px 12px 6px 6px; color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
  padding: .3rem 0; font-size: .78rem;
}
.pod-medal { font-size: 1.15rem; line-height: 1; }
.pod-1 .pod-bar { height: 86px; background: linear-gradient(160deg, #f7c948, #e5a50a); box-shadow: 0 10px 22px -10px rgba(229,165,10,.7); }
.pod-2 .pod-bar { height: 62px; background: linear-gradient(160deg, #c8ccd4, #9aa1ad); }
.pod-3 .pod-bar { height: 48px; background: linear-gradient(160deg, #e0a074, #b9723f); }
.pod-1 .pod-name { font-size: .9rem; }

/* ============================================================
 * COUCHE v9 "Palettes & Polish" — thèmes au choix + lifting final
 * ============================================================ */

/* ---------- Thèmes (html[data-theme]) : la marque change de couleur ---------- */
html[data-theme="lagon"] {
  --flame: #0d9d95; --flame-2: #37c5b5; --flame-deep: #0a756f; --flame-soft: #e2f5f3;
  --grad-fire: linear-gradient(118deg, #0d9d95 0%, #37c5b5 115%);
  --accent: #0d9d95; --accent-2: #37c5b5; --accent-soft: #e2f5f3;
}
html[data-theme="lagon"]:not([data-tab]), html[data-theme="lagon"][data-tab=""] {
  background: linear-gradient(180deg, #c9efeb 0%, #eef8f6 45%, #eef8f6 100%);
}
html[data-theme="flamant"] {
  --flame: #e0357f; --flame-2: #ff8fb5; --flame-deep: #b32162; --flame-soft: #fdeaf2;
  --grad-fire: linear-gradient(118deg, #e0357f 0%, #ff8fb5 115%);
  --accent: #e0357f; --accent-2: #ff8fb5; --accent-soft: #fdeaf2;
}
html[data-theme="flamant"]:not([data-tab]), html[data-theme="flamant"][data-tab=""] {
  background: linear-gradient(180deg, #ffd6e7 0%, #fdf0f5 45%, #fdf0f5 100%);
}
html[data-theme="violet"] {
  --flame: #7c5cff; --flame-2: #b39cff; --flame-deep: #5b3fd4; --flame-soft: #f1edff;
  --grad-fire: linear-gradient(118deg, #7c5cff 0%, #b39cff 115%);
  --accent: #7c5cff; --accent-2: #b39cff; --accent-soft: #f1edff;
}
html[data-theme="violet"]:not([data-tab]), html[data-theme="violet"][data-tab=""] {
  background: linear-gradient(180deg, #ded3ff 0%, #f4f0fd 45%, #f4f0fd 100%);
}

/* Thème sombre "Nuit au camp" : surfaces & encres inversées */
html[data-theme="nuit"] {
  --bg: #12162a; --surface: #1c2340; --surface-2: #242c4e;
  --ink: #eef0f8; --ink-2: #c4c9dd; --muted: #8a92ad; --line: #323a5e;
  --flame-soft: rgba(255, 79, 26, .16);
  --lagoon-soft: rgba(13, 157, 149, .18);
  --pos-soft: rgba(13, 145, 95, .18); --neg-soft: rgba(221, 53, 96, .18);
  --accent-soft: rgba(255, 79, 26, .16);
  background: linear-gradient(180deg, #0d1122 0%, #141a30 100%) !important;
}
html[data-theme="nuit"] .card:not(.card-dark):not(.card-gold):not(.winner-card) { background: rgba(28, 35, 64, .92); }

html[data-theme="nuit"] input, html[data-theme="nuit"] select, html[data-theme="nuit"] textarea,
html[data-theme="nuit"] .reward-row select { background: #141a30; color: var(--ink); border-color: var(--line); }
html[data-theme="nuit"] .chip { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
html[data-theme="nuit"] .bottomnav { background: rgba(20, 26, 48, .92); border-color: var(--line); }
html[data-theme="nuit"] .menu-pop { background: rgba(28, 35, 64, .96); }
html[data-theme="nuit"] .chat-bubble { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
html[data-theme="nuit"] .end-chip { background: rgba(229, 165, 10, .15); color: #f2c14e; border-color: rgba(229, 165, 10, .35); }
html[data-theme="nuit"] .vac-pill { background: var(--lagoon-soft); color: #6adfd6; }
html[data-theme="nuit"] .lbl-mini, html[data-theme="nuit"] label { color: var(--ink-2); }
html[data-theme="nuit"] .pod-av { background: var(--surface-2); border-color: var(--line); }
html[data-theme="nuit"][data-tab] { background: linear-gradient(180deg, #0d1122 0%, #141a30 100%) !important; }

/* ---------- Sélecteur de palette (profil) ---------- */
.theme-picker { display: flex; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 .8rem; }
.theme-sw {
  display: flex; flex-direction: column; align-items: center; gap: .28rem;
  background: none; border: none; padding: .3rem; border-radius: 14px;
  font-size: .68rem; font-weight: 700; color: var(--ink-2);
  transition: transform .15s, background .15s;
}
.theme-sw:hover { transform: translateY(-2px); background: var(--surface-2); }
.theme-dot {
  width: 42px; height: 42px; border-radius: 999px; border: 3px solid transparent;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3);
}
.theme-sw.theme-on { color: var(--ink); }
.theme-sw.theme-on .theme-dot { border-color: var(--ink); transform: scale(1.06); }
.td-braise  { background: linear-gradient(135deg, #ff4f1a, #ffab1f); }
.td-lagon   { background: linear-gradient(135deg, #0d9d95, #37c5b5); }
.td-flamant { background: linear-gradient(135deg, #e0357f, #ff8fb5); }
.td-violet  { background: linear-gradient(135deg, #7c5cff, #b39cff); }
.td-nuit    { background: linear-gradient(135deg, #0d1122, #2a3560); border: 3px solid #323a5e !important; }

/* ---------- Lifting final ---------- */
::selection { background: color-mix(in srgb, var(--flame) 30%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--flame) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--flame) 40%, transparent); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

.topbar { backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad-fire); opacity: .85;
}
.topbar { position: sticky; top: 0; }

input, select, textarea { border-radius: 14px !important; transition: border-color .15s, box-shadow .15s, background .15s; }
.btn-fire, .btn-ghost { border-radius: 16px; transition: transform .14s, box-shadow .14s, filter .14s; }
.btn-fire:hover { transform: translateY(-1.5px); filter: brightness(1.05); }
.btn-fire:active, .btn-ghost:active { transform: translateY(0) scale(.98); }
.btn-ghost:hover { border-color: var(--flame); color: var(--flame-deep); background: var(--flame-soft); }
html[data-theme="nuit"] .btn-ghost:hover { color: var(--flame-2); }

.card-btn { transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s; }
.card-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(20, 24, 46, .28); }
.card-btn:active { transform: translateY(-1px) scale(.995); }

.chip { transition: transform .12s, background .15s, border-color .15s; }
.chip:hover { transform: translateY(-1px); border-color: var(--flame); }

.modal-card, .modal > div { border-radius: 24px; animation: modalUp .28s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes modalUp { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

.bottomnav { box-shadow: 0 -6px 26px -14px rgba(15, 20, 42, .35); }
@media (prefers-reduced-motion: reduce) { .card-btn:hover { transform: none; } }

/* ---------- v9.1 : cloche alignée, profil aéré, remboursements, chip départ ---------- */

/* 5) Cloche : même gabarit que l'avatar, centres alignés */
.topbar-right { align-items: flex-start; gap: .8rem; }
.bell-btn { width: 42px; height: 42px; font-size: 1.2rem; flex: 0 0 auto; }

/* 6) Profil en sections */
.pf .profile-head { padding-bottom: .8rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.pf-sec { padding: .9rem 0; border-bottom: 1px dashed var(--line); }
.pf-sec:last-of-type { border-bottom: none; }
.pf-sec .sec-kicker { margin-top: 0; }
.pf-sec label { margin-top: .5rem; }
.pf .btn-fire { width: 100%; margin: 1rem 0 .3rem; }
.pf-summary { cursor: pointer; font-weight: 700; color: var(--ink-2); padding: .2rem 0; }
.pf-links { display: flex; flex-direction: column; gap: .5rem; border-bottom: none; }
.pf-links .btn-ghost { text-decoration: none; text-align: center; display: block; }
.pf-logout { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.pf-logout:hover { background: var(--neg-soft); color: var(--neg); border-color: var(--neg); }

/* 2)/3) Remboursements */
.settle-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem;
}
.settle-row:last-child { border-bottom: none; }
.settle-done { opacity: .72; }
.settle-btns { display: inline-flex; gap: .35rem; flex: 0 0 auto; }
.btn-mini-green { background: var(--pos-soft); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); }
.btn-mini-green:hover { background: var(--pos); color: #fff; }
.repay-details summary { cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--muted); margin-top: .7rem; }

/* 4) Chip de départ */
.start-chip { color: #0a6f6a; background: var(--lagoon-soft); border: 1px solid color-mix(in srgb, var(--lagoon) 35%, transparent); }
.start-chip-soon { color: #fff; background: linear-gradient(118deg, #0d9d95, #37c5b5); border-color: transparent; animation: cdPulse 1.3s ease-in-out infinite; }
.start-chip-live { color: #0a6f6a; background: #d9f4f1; border: 1px solid #b5e6e1; }
html[data-theme="nuit"] .start-chip, html[data-theme="nuit"] .start-chip-live { background: rgba(13,157,149,.18); color: #6adfd6; border-color: rgba(13,157,149,.4); }

/* ---------- v9.2 : toasts empilés + pastille vacances ---------- */
#toast { display: none !important; } /* ancien toast unique remplacé */
.toasts {
  position: fixed; top: calc(64px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  width: min(94vw, 460px); pointer-events: none;
}
.toast2 {
  pointer-events: auto;
  max-width: 100%;
  background: linear-gradient(140deg, rgba(28, 36, 64, .95) 0%, rgba(41, 53, 92, .95) 100%);
  color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.35;
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 4px solid var(--flame);
  box-shadow: 0 12px 32px -10px rgba(10, 14, 30, .55);
  backdrop-filter: blur(12px) saturate(1.3);
  animation: toastDrop .34s cubic-bezier(.22, 1, .36, 1) both;
}
.toast2 b { color: #ffd9a8; }
.toast2-err { border-left-color: var(--neg); background: linear-gradient(140deg, rgba(64, 22, 30, .96), rgba(90, 30, 40, .96)); }
.toast2-click { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.toast2-click:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 16px 38px -10px rgba(10, 14, 30, .65); }
.toast2-out { opacity: 0; transform: translateY(-12px) scale(.96); transition: opacity .35s, transform .35s; }
html[data-theme="nuit"] .toast2 { border-color: rgba(255, 255, 255, .22); }

.vac-none { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line); }
html[data-theme="nuit"] .vac-none { background: rgba(255,255,255,.06); border-color: var(--line); color: var(--muted); }

/* ---------- v9.3 : correctifs bulles / menu / vacances actives ---------- */

/* 1) Les pilules du récap héritaient du translateX(-50%) de l'ancien toast -> décalées à gauche.
      Animation dédiée, sans décalage horizontal. */
.toast2 { animation: toastDrop2 .34s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes toastDrop2 {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 2) Menu utilisateur : fond OPAQUE, lisible sur tous les thèmes */
.menu-pop {
  background: var(--surface) !important;
  backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -12px rgba(10, 14, 30, .45), 0 2px 8px rgba(10, 14, 30, .12);
}
.menu-pop button, .menu-pop a { color: var(--ink); }
.menu-pop button:hover, .menu-pop a:hover { background: var(--surface-2); }
html[data-theme="nuit"] .menu-pop { background: #212949 !important; border-color: #38406a; }
html[data-theme="nuit"] .menu-pop button:hover, html[data-theme="nuit"] .menu-pop a:hover { background: #2b3458; }

/* 3) Vacances actives : bloc plus affirmé sur les vignettes de groupes */
.card-vacs { margin-top: .55rem; }
.card-vacs .lbl-vacs {
  display: block; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.vac-pill { font-size: .8rem; padding: .24rem .7rem; }
html[data-theme="nuit"] .vac-pill { background: rgba(13, 157, 149, .2); color: #6adfd6; border-color: rgba(13, 157, 149, .4); }

/* ---------- v9.4 : menu au-dessus de tout + alignement "Vacances actives" ---------- */

/* 1) La topbar (sticky) crée le contexte d'empilement du menu : on la met au-dessus
      du contenu, et le menu au-dessus de tout le reste (toasts inclus). */
.topbar { z-index: 180; }
.menu-pop { z-index: 999 !important; }

/* 2) Le libellé était pris dans la même ligne flex que les pilules -> il prend
      maintenant toute la largeur (sa propre ligne), pilules alignées à gauche dessous. */
.card-vacs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-start; text-align: left; }
.card-vacs .lbl-vacs {
  display: flex; align-items: center; gap: .4rem; width: 100%; margin-bottom: .15rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2);
}
.card-vacs .lbl-vacs::before {
  content: ''; width: 16px; height: 2.5px; border-radius: 2px; flex: 0 0 auto;
  background: var(--grad-fire);
}
html[data-theme="nuit"] .card-vacs .lbl-vacs { color: var(--ink-2); }

/* ---------- v9.5 : trois couleurs d'état sur les vignettes de groupes ---------- */
/* 😴 aucune : gris pointillé (vac-none, déjà en place) */
/* 🌴 en cours : lagon */
.vac-live { background: var(--lagoon-soft); color: #0a6f6a; border: 1px solid color-mix(in srgb, var(--lagoon) 40%, transparent); }
html[data-theme="nuit"] .vac-live { background: rgba(13, 157, 149, .2); color: #6adfd6; border-color: rgba(13, 157, 149, .45); }
/* 🚀 à venir : ambre, avec compte à rebours ; pulse quand c'est imminent */
.vac-upcoming { background: #fff3cd; color: #8a6d1d; border: 1px solid #f0dfa0; font-variant-numeric: tabular-nums; }
.vac-upcoming b { color: #6b520e; }
html[data-theme="nuit"] .vac-upcoming { background: rgba(229, 165, 10, .16); color: #f2c14e; border-color: rgba(229, 165, 10, .4); }
html[data-theme="nuit"] .vac-upcoming b { color: #ffd97a; }
.vac-upcoming.cd-soon { animation: cdPulse 1.2s ease-in-out infinite; border-color: #e5a50a; }
.vac-upcoming.cd-now {
  background: linear-gradient(118deg, #0d9d95, #37c5b5); color: #fff; border-color: transparent;
  animation: cdPulse 1s ease-in-out infinite;
}
.vac-upcoming.cd-now b { color: #fff; }

/* ---------- v9.6 : pilule "à venir" sur deux lignes ---------- */
.vac-upcoming {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .05rem;
  border-radius: 13px; padding: .32rem .7rem; line-height: 1.25;
}
.vac-upcoming .vac-name { font-weight: 800; font-size: .8rem; }
.vac-upcoming .vac-when { font-size: .68rem; font-weight: 600; opacity: .9; font-variant-numeric: tabular-nums; }
/* États du compte à rebours remontés sur la pilule entière */
.vac-upcoming:has(.cd-soon) { animation: cdPulse 1.2s ease-in-out infinite; border-color: #e5a50a; }
.vac-upcoming:has(.cd-now) {
  background: linear-gradient(118deg, #0d9d95, #37c5b5); color: #fff; border-color: transparent;
  animation: cdPulse 1s ease-in-out infinite;
}
.vac-upcoming:has(.cd-now) b, .vac-upcoming:has(.cd-now) .vac-when { color: #fff; opacity: 1; }

/* ---------- v9.7 : page des comptes compactée ---------- */
.settle-row { padding: .32rem 0; font-size: .85rem; gap: .5rem; }
.settle-row .btn-mini { padding: .26rem .55rem; font-size: .72rem; }
.settle-btns { gap: .3rem; }
.settle-box { padding: .55rem .7rem; font-size: .85rem; }
.bal-row { padding: .3rem 0; font-size: .9rem; }
.exp-row { padding: .4rem 0; font-size: .9rem; }
.exp-row small { font-size: .74rem; }
/* Historique des acquittés : rangées denses, une ligne, tout en discrétion */
.repay-details summary { font-size: .78rem; margin-top: .55rem; }
.repay-details .settle-row { font-size: .76rem; padding: .24rem 0; }
.repay-details .settle-row > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.repay-details .settle-row .avatar-img { width: 1.1em; height: 1.1em; }
.repay-details .btn-mini { padding: .18rem .45rem; font-size: .68rem; }
.settle-done { opacity: .62; }
/* Section "à confirmer" : un peu plus présente que l'historique, moins que les soldes */
.sec-kicker + .settle-row { border-top: none; }

/* ---------- Pastille "nouveaux messages" du chat ---------- */
.chat-badge {
  position: fixed; top: calc(70px + env(safe-area-inset-top)); right: 14px; z-index: 170;
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--grad-fire); color: #fff; border: none;
  font-weight: 800; font-size: .8rem; padding: .5rem .9rem; border-radius: 999px;
  box-shadow: 0 10px 26px -8px rgba(255, 79, 26, .6);
  animation: popIn .3s var(--ease-pop) both, cdPulse 1.8s .5s ease-in-out infinite;
  cursor: pointer;
}
.chat-badge:hover { transform: scale(1.05); }
.chat-badge-go { font-size: .7rem; animation: dotBounce 1.2s infinite; }

/* ---------- v9.8 : comptes, version poche — plus rien ne déborde ---------- */
/* Sélecteurs de joueurs (PAYÉ PAR / POUR) : puces compactes */
#ex-payer .chip, #ex-among .chip {
  font-size: .72rem; padding: .26rem .55rem; gap: .25rem;
}
#ex-payer .avatar-img, #ex-among .avatar-img { width: 1.05em; height: 1.05em; }
#ex-payer, #ex-among { gap: .3rem; }

/* Lignes de règlement : passage à la ligne autorisé, boutons qui se casent */
.settle-row { flex-wrap: wrap; row-gap: .25rem; }
.settle-row > span:first-child { flex: 1 1 auto; min-width: 0; }
.settle-btns { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.settle-row .btn-mini { white-space: nowrap; }
.settle-box .avatar-img, .bal-row .avatar-img { width: 1.05em; height: 1.05em; }

/* Petit écran : tout se resserre encore d'un cran */
@media (max-width: 480px) {
  #ex-payer .chip, #ex-among .chip { font-size: .68rem; padding: .22rem .48rem; }
  .settle-row { font-size: .78rem; }
  .settle-row .btn-mini { padding: .2rem .45rem; font-size: .66rem; }
  .settle-box { padding: .5rem .6rem; font-size: .8rem; }
  .bal-row { font-size: .84rem; }
  .exp-row { font-size: .84rem; }
  .exp-row small { font-size: .7rem; }
  .repay-details .settle-row { font-size: .72rem; }
}

/* ---------- v9.9 : compteur de chat permanent + mini-compteur sur les vignettes ---------- */
/* Badge à zéro : neutre et discret (le flamme pulsant reste réservé aux non-lus) */
.chat-badge.chat-badge-zero {
  background: var(--surface); color: var(--ink-2);
  border: 1.5px solid var(--line);
  box-shadow: 0 6px 18px -8px rgba(15, 20, 42, .3);
  animation: popIn .3s var(--ease-pop) both; /* pas de pulsation à zéro */
}
.chat-badge.chat-badge-zero .chat-badge-go { animation: none; opacity: .6; }
html[data-theme="nuit"] .chat-badge.chat-badge-zero { background: #212949; color: var(--ink-2); border-color: #38406a; }

/* Mini-compteur sur les vignettes de vacances (page groupe) */
.chat-chip {
  display: inline-flex; align-items: center; gap: .2rem; vertical-align: middle;
  font-size: .66rem; font-weight: 800; margin-left: .3rem;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .14rem .5rem;
  font-variant-numeric: tabular-nums;
}
.chat-chip-on {
  background: var(--grad-fire); color: #fff; border-color: transparent;
  animation: cdPulse 1.6s ease-in-out infinite;
}
html[data-theme="nuit"] .chat-chip { background: rgba(255, 255, 255, .07); border-color: var(--line); }
html[data-theme="nuit"] .chat-chip-on { background: var(--grad-fire); }

/* ============================================================
 * COUCHE v10 "Densité pro" — le dimensionnement compact de la
 * page des comptes, généralisé à toute l'appli.
 * ============================================================ */

/* Typo de base légèrement resserrée */
body { font-size: 15px; }
h2 { font-size: 1.28rem; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; }
.hero-mini h2, .place-hero h2 { font-size: 1.35rem; }
label { font-size: .82rem; margin-bottom: .25rem; }
.lbl-mini { font-size: .66rem; }
small, .small { font-size: .76rem; }
.muted.small, .muted-light { font-size: .78rem; }

/* Cartes : padding et espacement réduits */
.card { padding: .95rem 1rem; }
.cards { gap: .7rem; }
.card-title { font-size: 1rem; }
.card-sub { font-size: .8rem; }
.card-code { font-size: .76rem; }
.card + .card { margin-top: .7rem; }

/* Boutons : gabarits pro */
.btn-fire, .btn-ghost { padding: .6rem 1rem; font-size: .88rem; }
.btn-small { padding: .42rem .75rem !important; font-size: .78rem !important; }
.btn-big { padding: .8rem 1.2rem; font-size: 1rem; }
.btn-mini { padding: .26rem .55rem; font-size: .72rem; }

/* Champs de saisie */
input, select, textarea, .reward-row select { padding: .55rem .75rem !important; font-size: .88rem !important; }

/* Puces (choix de joueurs, critères, avatars, tris…) : compactes partout */
.chip { font-size: .74rem; padding: .3rem .6rem; }
.chip .avatar-img { width: 1.05em; height: 1.05em; }
.chip-avatar { font-size: 1rem; padding: .26rem .5rem; }

/* Rangées de listes (membres, jours du totem, records, suggestions, notifs…) */
.day-row, .member-row, .suggest-row, .record { padding: .42rem 0; font-size: .86rem; }
.record-ico { font-size: 1rem; }
.record-lbl { font-size: .78rem; }
.record-val { font-size: .92rem; }
.member-avatar { width: 34px; height: 34px; font-size: 1.15rem; }

/* Pilules & badges d'état */
.state-pill { font-size: .6rem; padding: .13rem .5rem; }
.badge { font-size: .68rem; padding: .16rem .55rem; }
.vac-pill { font-size: .76rem; padding: .22rem .6rem; }
.end-chip { font-size: .7rem; padding: .14rem .55rem; }
.countdown { font-size: .78rem; padding: .26rem .65rem; }
.end-line { font-size: .88rem; padding: .4rem .65rem; }

/* Menu, navigation, kickers */
.menu-pop button, .menu-pop a { font-size: .86rem; padding: .5rem .65rem; }
.bottomnav button { font-size: .68rem; }
.sec-kicker { font-size: .72rem; }
.stats-tabs button { font-size: .82rem; padding: .45rem .8rem; }

/* Stats & podium : chiffres nets, marches contenues */
.stat-nums b { font-size: 1.15rem; }
.stat-nums small { font-size: .66rem; }
.pod-name { font-size: .78rem; }
.pod-1 .pod-name { font-size: .85rem; }
.pod-bar { font-size: .74rem; }

/* Conseil : lobby & questions */
.q-title { font-size: 1.15rem; }
.q-progress { font-size: .74rem; }
.next-banner { font-size: .86rem; padding: .55rem .7rem; }
.next-banner small { font-size: .76rem; }
.ready-avatar { width: 40px; height: 40px; }
.ready-avatar .avatar-img { width: 32px; height: 32px; }
.chat-bubble { font-size: .85rem; padding: .38rem .65rem; }
.chat-meta { font-size: .62rem; }
.check-inline { font-size: .84rem; }

/* Modales et profil */
.modal-card h3, .modal > div h3 { font-size: 1.1rem; }
.pf-sec { padding: .75rem 0; }
.av-preview { width: 56px; height: 56px; font-size: 1.75rem; }
.theme-dot { width: 38px; height: 38px; }
.theme-sw { font-size: .64rem; }

/* Photos */
.photo-grid { gap: .5rem; }
.photo-card small { font-size: .68rem; }
.dropzone { padding: .9rem; font-size: .86rem; }

/* Petits écrans : un cran de plus */
@media (max-width: 480px) {
  body { font-size: 14.5px; }
  .card { padding: .85rem .85rem; }
  h2 { font-size: 1.18rem; }
  .btn-fire, .btn-ghost { padding: .55rem .85rem; font-size: .85rem; }
  .chip { font-size: .7rem; padding: .26rem .5rem; }
  .day-row, .member-row, .suggest-row, .record { font-size: .82rem; }
  .next-banner { font-size: .82rem; }
  .menu-pop { min-width: 200px; }
}

/* ============================================================
 * COUCHE v10.1 "Affordances" — on VOIT que c'est cliquable
 * ============================================================ */

/* Tous les boutons : curseur main (le défaut navigateur ne le fait pas !) */
button, [role="link"], summary, .card-btn, .plink, .day-row { cursor: pointer; }

/* Pseudos cliquables : vrais liens assumés */
.plink {
  color: var(--flame-deep);
  font-weight: 500;                       /* plus discret : ni gras, ni normal fade */
  border-bottom: 1px dotted color-mix(in srgb, var(--flame) 45%, transparent);
  padding-bottom: 0;
  border-radius: 2px;
  transition: background .15s, color .15s, border-color .15s;
}
.plink:hover { background: var(--flame-soft); color: var(--flame-deep); border-bottom-style: solid; border-bottom-color: var(--flame); }
html[data-theme="nuit"] .plink { color: #ff9d5c; border-bottom-color: rgba(255, 140, 60, .4); }
html[data-theme="nuit"] .plink:hover { background: rgba(255, 79, 26, .16); color: #ffc396; }
.winner-name .plink, .card-dark .plink { color: #ffd9a8; font-weight: 600; border-bottom-color: rgba(255, 217, 168, .5); }

/* Cartes cliquables : chevron d'ouverture permanent (mobile compris) */
.card-btn { padding-right: 2.1rem; }
.card-btn .card-title::after {
  content: '›';
  position: absolute; right: .85rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.7rem; line-height: 1; font-weight: 700;
  color: color-mix(in srgb, var(--accent) 55%, var(--muted));
  transition: transform .18s, color .18s;
}
.card-btn:hover .card-title::after { transform: translate(3px, -50%); color: var(--accent); }
.card-btn:active .card-title::after { transform: translate(1px, -50%); }

/* Rangées cliquables du Totem : même chevron, format ligne */
.day-row { position: relative; padding-right: 1.6rem; }
.day-row::after {
  content: '›';
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; font-weight: 700; color: var(--muted);
  transition: transform .15s, color .15s;
}
.day-row:hover::after { transform: translate(3px, -50%); color: var(--accent); }

/* Photos : loupe discrète au survol (desktop) */
.photo-card img { cursor: zoom-in; }

/* Réinitialisation des notifications (réglages) */
.resub-box { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.resub-box .btn-small { margin-top: .3rem; }

/* ---------- Lien-message de resynchro des notifications (sous la cloche) ---------- */
.resub-banner {
  position: fixed;
  z-index: 500;
  display: none;
  align-items: center;
  gap: .4rem;
  max-width: min(78vw, 320px);
  background: var(--surface, #fff);
  color: var(--ink, #1a1a2e);
  border: 1.5px solid var(--flame, #ff4f1a);
  border-radius: 12px;
  padding: .5rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 28px -8px rgba(15, 20, 42, .3);
  animation: resubPulse 1.8s ease-in-out infinite;
}
.resub-banner .rb-dot { font-size: 1rem; animation: resubBell 1.1s ease-in-out infinite; transform-origin: 50% 0; }
.resub-banner .rb-txt { flex: 1 1 auto; }
.resub-banner u { color: var(--flame, #ff4f1a); text-decoration: underline; font-weight: 800; }
.resub-banner::before {
  /* petite flèche vers la cloche */
  content: '';
  position: absolute; top: -6px; right: 16px;
  width: 10px; height: 10px;
  background: var(--surface, #fff);
  border-left: 1.5px solid var(--flame, #ff4f1a);
  border-top: 1.5px solid var(--flame, #ff4f1a);
  transform: rotate(45deg);
}
.resub-banner:hover { filter: brightness(1.02); transform: translateY(-1px); }
.resub-banner:disabled { opacity: .6; cursor: wait; animation: none; }
@keyframes resubBell { 0%,100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
@keyframes resubPulse {
  0%, 100% { box-shadow: 0 10px 28px -8px rgba(15, 20, 42, .3), 0 0 0 0 rgba(255, 79, 26, .35); }
  50% { box-shadow: 0 10px 28px -8px rgba(15, 20, 42, .3), 0 0 0 6px rgba(255, 79, 26, 0); }
}
html[data-theme="nuit"] .resub-banner { background: #212949; color: #e8ebf5; border-color: var(--flame, #ff4f1a); }
html[data-theme="nuit"] .resub-banner::before { background: #212949; }

/* ---------- Fix modale : jamais coupée sous la barre Koolanta (mobile) ---------- */
@media (max-width: 599px) {
  .modal-backdrop {
    align-items: flex-start;                 /* ancrer en HAUT, pas en bas */
    padding-top: calc(58px + env(safe-area-inset-top) + 10px); /* sous la topbar + espace ergo */
    box-sizing: border-box;
  }
  .modal {
    border-radius: 20px;                     /* coins arrondis en haut aussi puisqu'elle n'est plus collée en bas */
    max-height: calc(100vh - 58px - env(safe-area-inset-top) - 20px);
    animation: modalUp .28s cubic-bezier(.22, 1, .36, 1) both;
  }
}

/* ---------- Espace ergo au-dessus du titre des modales ---------- */
#modal-content > h3:first-child,
#modal-content > .modal-x + h3,
#modal-content > .modal-x + .profile-head,
#modal-content > .pf > h3:first-child { margin-top: .35rem; }
@media (max-width: 599px) {
  #modal-content > h3:first-child,
  #modal-content > .modal-x + h3,
  #modal-content > .modal-x + .profile-head,
  #modal-content > .pf > h3:first-child { margin-top: .6rem; }
}

/* ---------- Indicateur de chat sur les vignettes ---------- */
/* Vignette de vacance (page groupe) : chip calé en haut à droite */
.card-vac { position: relative; }
.card-vac .chat-chip {
  position: absolute; top: .7rem; right: 2.1rem; /* 2.1rem : laisse la place au chevron › */
  margin: 0;
}
/* Pilule "en cours" du dashboard : petit badge chat intégré */
.vac-chat {
  display: inline-flex; align-items: center; gap: .15rem;
  margin-left: .35rem; padding: .05rem .35rem;
  font-size: .68rem; font-weight: 800; border-radius: 999px;
  background: rgba(255,255,255,.55); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.vac-chat-on { background: var(--grad-fire); color: #fff; animation: cdPulse 1.6s ease-in-out infinite; }
html[data-theme="nuit"] .vac-chat { background: rgba(255,255,255,.12); }
html[data-theme="nuit"] .vac-chat-on { background: var(--grad-fire); }

/* Bouton fantôme désactivé (ex : création de vacances bloquée car une est déjà active) */
.btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.btn-small:disabled { cursor: not-allowed; }

/* Chips de chat cliquables : curseur + petit feedback */
.chat-chip[role="button"], .vac-chat[role="button"] { cursor: pointer; transition: transform .12s, filter .12s; }
.chat-chip[role="button"]:hover, .vac-chat[role="button"]:hover { transform: scale(1.08); filter: brightness(1.05); }
.chat-chip[role="button"]:active, .vac-chat[role="button"]:active { transform: scale(.96); }

/* ---------- Comptes du groupe : tableau compact unifié ---------- */
.accounts-card .acct-table { width: 100%; border-collapse: collapse; margin: .5rem 0 .2rem; }
.accounts-card .acct-table tr { border-bottom: 1px solid var(--line); }
.accounts-card .acct-table tr:last-child { border-bottom: none; }
.accounts-card .acct-who { padding: .4rem 0; font-size: .88rem; }
.accounts-card .acct-amt { padding: .4rem 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.accounts-card .acct-amt .pos { color: var(--pos, #128a5e); }
.accounts-card .acct-amt .neg { color: var(--neg, #d1435b); }
.accounts-card .acct-settle { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.accounts-card .acct-settle .sec-kicker { margin: 0 0 .3rem; }
.accounts-card .acct-ok { margin-top: .5rem; }
/* les lignes de transfert et de remboursement héritent du style compact settle-row existant */
.accounts-card .settle-row { padding: .35rem 0; font-size: .85rem; }

/* ---------- Titres des cartes noires : lumineux et détachés du fond sombre ---------- */
/* Blanc éclatant + lueur chaude (text-shadow) : ressort nettement sans masquer les emojis. */
.card-dark > h3, .card-dark > h2 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow:
    0 0 1px rgba(255, 255, 255, .5),
    0 1px 10px rgba(255, 138, 43, .45),
    0 2px 18px rgba(255, 106, 43, .25);
}
/* Petit liseré doré sous le titre pour asseoir la hiérarchie */
.card-dark > h3 { position: relative; padding-bottom: .42rem; margin-bottom: .55rem; }
.card-dark > h3::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 2.5px;
  border-radius: 2px; background: linear-gradient(90deg, #ffc14e, #ff6a2b 70%, transparent);
  box-shadow: 0 0 8px rgba(255, 171, 31, .6);
}

/* ---------- Flash lumineux spectaculaire au lancement du conseil ---------- */
.epic-flash {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.95) 0%, rgba(255,171,31,.85) 25%, rgba(255,79,26,.55) 50%, transparent 72%);
  animation: epicFlashAnim .9s cubic-bezier(.22,1,.36,1) forwards;
  mix-blend-mode: screen;
}
@keyframes epicFlashAnim {
  0%   { opacity: 0; transform: scale(.4); }
  12%  { opacity: 1; transform: scale(1.05); }
  30%  { opacity: .85; transform: scale(1); }
  55%  { opacity: .5; }
  100% { opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .epic-flash { animation-duration: .4s; }
}

/* ---------- Clarté du vote : consigne, étapes, message d'aide ---------- */
.vote-hint {
  font-size: .82rem; color: var(--ink-2); text-align: center;
  background: var(--surface-2); border-radius: 999px;
  padding: .4rem .8rem; margin: .2rem 0 .8rem;
}
.q-step {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5em; margin-right: .15rem; font-size: .95em;
}
.q-step-done { animation: popIn .3s var(--ease-pop, ease) both; }
.vote-todo {
  text-align: center; font-size: .82rem; font-weight: 600;
  color: var(--muted); margin: .5rem 0 0; transition: color .2s;
}
.vote-todo-ok { color: var(--pos, #128a5e); }

/* ---------- Sélection de vote bien visible ---------- */
.vote-chip { position: relative; }
.chip.chip-vote-on,
.chip.vote-chip.chip-vote-on {
  background: linear-gradient(135deg, #ff4f1a 0%, #ffab1f 100%) !important;
  background-color: #ff4f1a !important;
  border: 1.5px solid transparent !important;
  color: #fff !important;
  font-weight: 800 !important;
  opacity: 1 !important;                 /* jamais estompé, même si disabled */
  transform: scale(1.06);
  box-shadow: 0 6px 18px -5px rgba(255, 79, 26, .6);
}
.chip.chip-vote-on::after {
  content: ' ✓';
  font-weight: 900;
}
html[data-theme="nuit"] .chip.chip-vote-on { color: #fff !important; }

/* Label positif/négatif aligné à côté du titre du critère */
.q-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.q-title .tag { vertical-align: middle; }

/* ---------- Chrono de 2 min par question ---------- */
.q-timer {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--surface-2); border-radius: 12px;
  padding: .5rem .8rem; margin: .2rem 0 .7rem;
}
.q-timer-clock {
  font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink); min-width: 2.6em; text-align: center;
  background: var(--surface); border-radius: 9px; padding: .1rem .5rem;
  border: 1.5px solid var(--line);
}
.q-timer-warn { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.q-timer-warn b { color: var(--neg, #d1435b); }
.q-timer-urgent .q-timer-clock {
  color: #fff; background: var(--neg, #d1435b); border-color: transparent;
  animation: cdPulse 1s ease-in-out infinite;
}
.q-timer-done {
  justify-content: center; font-weight: 700; color: var(--pos, #128a5e);
  font-size: .9rem;
}
html[data-theme="nuit"] .q-timer-clock { background: rgba(255,255,255,.08); color: #fff; }

/* ---------- Infos temps réel sur les vignettes (dashboard + page groupe) ---------- */
/* Badge "conseil en cours" clignotant */
.vac-live-now, .council-live-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--grad-fire); color: #fff; font-weight: 800;
  border-radius: 999px; padding: .12rem .6rem; font-size: .72rem;
  cursor: pointer; animation: liveBlink 1.1s ease-in-out infinite;
  box-shadow: 0 3px 12px -3px rgba(255, 79, 26, .5);
}
.council-live-badge {
  margin-top: .4rem; font-size: .8rem; padding: .35rem .8rem;
  justify-content: center; width: 100%; box-sizing: border-box;
}
.council-live-lobby { background: linear-gradient(120deg, #0d9d95, #37c5b5); box-shadow: 0 3px 12px -3px rgba(13,157,149,.5); }
@keyframes liveBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.03); }
}
/* Compte à rebours du prochain conseil sur la pilule du dashboard */
.vac-council-cd {
  display: inline-block; margin-left: .35rem; font-size: .68rem; font-weight: 700;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.55); border-radius: 999px; padding: .05rem .4rem;
}
html[data-theme="nuit"] .vac-council-cd { background: rgba(255,255,255,.12); color: #d8dcec; }
/* Urgence (< 1 h) : le compte à rebours clignote et rougit */
.vac-council-cd.cd-soon {
  color: #fff; background: var(--flame); animation: liveBlink 1s ease-in-out infinite;
}
.vac-council-cd.cd-now {
  color: #fff; background: var(--grad-fire); animation: liveBlink .8s ease-in-out infinite;
}
/* Même effet d'urgence sur le compte à rebours des vignettes de la page groupe */
.countdown.cd-soon { animation: cdPulse 1.1s ease-in-out infinite; }

/* ============================================================
   v10.1 — Vignettes groupes & vacances : agencement homogène
   Pilule "en cours" en colonne (nom + rangée d'infos temps réel),
   badges temps réel compacts et mis en valeur, alignement stable.
   ============================================================ */

/* Pilule "en cours" (dashboard) : même structure verticale que "à venir" */
.vac-pill.vac-live {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .28rem;
  border-radius: 13px; padding: .34rem .7rem; line-height: 1.25;
  max-width: 100%;
}
.vac-pill.vac-live .vac-name {
  font-weight: 800; font-size: .82rem; display: inline-flex; align-items: center; gap: .25rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Rangée d'infos temps réel : badge principal + chat, toujours alignés ensemble */
.vac-rt { display: inline-flex; align-items: center; gap: .32rem; flex-wrap: wrap; }

/* Badges temps réel — petits, nets, mis en valeur */
.rt-badge {
  display: inline-flex; align-items: center; gap: .22rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .01em;
  border-radius: 999px; padding: .12rem .5rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Conseil en cours : flamme, clignote */
.rt-live {
  background: var(--grad-fire); color: #fff; cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(255,79,26,.55);
  animation: liveBlink 1.1s ease-in-out infinite;
}
/* Salle ouverte : turquoise */
.rt-open {
  background: linear-gradient(120deg, #0d9d95, #37c5b5); color: #fff; cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(13,157,149,.5);
  animation: liveBlink 1.3s ease-in-out infinite;
}
/* Compte à rebours : sobre par défaut, s'intensifie à l'approche */
.rt-cd {
  background: rgba(255,255,255,.6); color: var(--ink-2);
  border: 1px solid rgba(0,0,0,.06);
}
html[data-theme="nuit"] .rt-cd { background: rgba(255,255,255,.12); color: #d8dcec; border-color: rgba(255,255,255,.1); }
.rt-cd.cd-soon { color: #fff; background: var(--flame); border-color: transparent; animation: liveBlink 1s ease-in-out infinite; }
.rt-cd.cd-now  { color: #fff; background: var(--grad-fire); border-color: transparent; animation: liveBlink .8s ease-in-out infinite; }

/* Le badge chat de la rangée temps réel s'aligne sur les rt-badge */
.vac-rt .vac-chat { margin-left: 0; }

/* Un peu plus d'air entre les pilules et sous le libellé sur le dashboard */
.card-vacs { gap: .4rem; row-gap: .45rem; }
.card-vacs .lbl-vacs { margin-bottom: .25rem; }

/* ---- Page groupe : vignette de vacance, agencement aéré ---- */
.card-vac .card-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  padding-right: 3.4rem; /* place pour le chip chat + le chevron */
}
.card-vac .card-sub { margin-top: .15rem; }
.card-vac .card-endinfo { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
/* Badge conseil en cours / salle : bien détaché, pleine largeur, centré */
.council-live-badge { margin-top: .5rem; }

/* ============================================================
   v10.2 — Vignettes plus aérées (interlignes & marges)
   ============================================================ */

/* Vignettes de vacances (page groupe) : plus d'espace entre les lignes */
.card-vac { padding: 1.1rem 1.15rem; }
.card-vac .card-title { margin-bottom: .1rem; line-height: 1.35; }
.card-vac .card-sub { margin-top: .4rem; line-height: 1.5; }
.card-vac .card-endinfo { margin-top: .6rem; row-gap: .4rem; }
.card-vac .countdown,
.card-vac .council-live-badge { margin-top: .6rem; }
.card-vac .card-code { margin-top: .6rem; }
.card-vac .badge { margin-top: .55rem; display: inline-block; }

/* Vignettes de groupes (dashboard) : idem, on respire */
.card-btn .card-sub { margin-top: .35rem; line-height: 1.5; }
.card-vacs { margin-top: .7rem; row-gap: .5rem; }
.card-vacs .lbl-vacs { margin-bottom: .35rem; }
.card-btn .card-code { margin-top: .7rem; }

/* Pilules un peu plus généreuses en hauteur */
.vac-pill.vac-live,
.vac-upcoming { padding: .42rem .8rem; gap: .34rem; }

/* La rangée d'infos temps réel : un chouïa d'air au-dessus */
.vac-rt { margin-top: .1rem; }

/* ============================================================
   v10.3 — Page "Le conseil" : modernisation & aération
   ============================================================ */

/* --- Carte "Premier / Prochain conseil" repensée --- */
.council-plan {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.05rem;
  margin-bottom: 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--flame-soft) 60%, transparent), transparent 70%),
    var(--surface);
}
.council-plan-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: .7rem;
}
.council-plan-kicker {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--flame-deep);
}
.council-plan-edit {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .74rem; font-weight: 700; cursor: pointer;
  color: var(--flame-deep); background: var(--flame-soft);
  border: 1px solid color-mix(in srgb, var(--flame) 30%, transparent);
  border-radius: 999px; padding: .28rem .7rem;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.council-plan-edit:hover { background: var(--flame); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(255,79,26,.55); }
.council-plan-edit:active { transform: translateY(0); }

/* Date & heure mises en valeur */
.council-plan-when {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem;
  margin-bottom: .85rem;
}
.cpw-date { font-size: 1.18rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.cpw-at { font-size: .85rem; color: var(--muted); }
.cpw-time {
  font-size: 1.18rem; font-weight: 800; color: var(--flame-deep);
  font-variant-numeric: tabular-nums;
}

/* Cadeau / gage : deux lignes claires */
.council-plan-rewards { display: flex; flex-direction: column; gap: .3rem; }
.cpr-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--ink-2);
  padding: .3rem .5rem; border-radius: 8px; background: var(--surface-2);
}
.cpr-ico { font-size: .9rem; }
.cpr-lbl { font-weight: 700; color: var(--ink); min-width: 3.2em; font-size: .74rem; }
.cpr-item b { font-weight: 700; color: var(--ink); }
html[data-theme="nuit"] .cpr-item { background: rgba(255,255,255,.06); }

/* --- Aération générale de la carte du conseil --- */
.question-card, .council-plan + p, .ready-grid { }
/* Paragraphes explicatifs : plus d'air et interligne confortable */
.card > p { line-height: 1.6; }
.card > p + p { margin-top: .5rem; }

/* Grille des joueurs prêts : plus d'espace et cartes plus douces */
.ready-grid { gap: .7rem; margin: 1rem 0 1.1rem; }
.ready-chip { padding: .75rem .6rem; gap: .3rem; border-radius: 14px; }
.ready-chip em { margin-top: .1rem; }
.ready-chip .btn-mini { margin-top: .35rem; }

/* Le gros bouton d'action : bien détaché */
.card .btn-big { margin-top: .3rem; }
.card .btn-big + .center { margin-top: .6rem; }

/* Bannières pédagogiques : un peu plus d'air interne + interligne */
.next-banner { padding: .75rem 1rem; line-height: 1.5; margin-bottom: .9rem; }
.next-banner small { display: inline-block; margin-top: .25rem; line-height: 1.55; }

/* ============================================================
   v10.4 — Formulaire d'édition du conseil : structuré & aéré
   ============================================================ */
.council-edit {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--flame-soft) 45%, transparent), transparent 60%),
    var(--surface);
}
.council-edit-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: .9rem;
}
.council-edit-cancel {
  color: var(--ink-2); background: var(--surface-2);
  border-color: var(--line);
}
.council-edit-cancel:hover { background: var(--neg, #d1435b); color: #fff; border-color: transparent; box-shadow: none; }

/* Chaque champ = un bloc espacé avec son label */
.council-edit-field { margin-bottom: .9rem; }
.council-edit-field > label {
  display: block; margin-bottom: .4rem;
  font-size: .82rem; font-weight: 700; color: var(--ink);
}
.council-edit-field > label small { font-weight: 500; }
.council-edit .row-2 { gap: .6rem; }
.council-edit input[type="date"],
.council-edit input[type="time"] { width: 100%; }

/* Case "dernier conseil" et note de fin : bien espacées */
.council-edit .check-inline { margin-top: .3rem; }
.council-edit-endnote { margin: .45rem 0 0; line-height: 1.5; }

/* Zone d'action : séparateur net + bouton pleine largeur détaché du reste */
.council-edit-actions {
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.council-edit-actions .btn-fire { width: 100%; }

/* v10.4b — espace garanti sous le formulaire d'édition (pas de collapse de marges) */
.council-edit { margin-bottom: 1.2rem; }
.council-edit::after { content: ''; display: block; height: 1px; }
.council-edit + .next-banner { margin-top: 1.1rem; }

/* ============================================================
   v10.5 — Bandeau "Prochain conseil" en haut de page (hero)
   ============================================================ */
.council-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  padding: .8rem 1rem .85rem;
  margin-bottom: .9rem;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(130% 150% at 12% -10%, rgba(255,171,31,.4), transparent 55%),
    radial-gradient(110% 130% at 90% 110%, rgba(255,79,26,.28), transparent 55%),
    linear-gradient(135deg, var(--night) 0%, var(--night-2) 100%);
  box-shadow: var(--shadow-md);
}
/* Flamme animée, comme le feu d'artifice du vainqueur */
.council-hero-fire {
  font-size: 1.35rem; display: inline-block; line-height: 1;
  animation: floaty 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 10px rgba(255,138,43,.55));
}
.council-hero-label {
  font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #ffd9a8; margin: .25rem 0 .3rem;
}
/* Le compte à rebours en VEDETTE : très gros, tabulaire, lisible de loin */
.council-hero-cd {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
  text-shadow: 0 2px 16px rgba(255,138,43,.5), 0 0 1px rgba(255,255,255,.4);
}
.council-hero-when {
  margin-top: .3rem; font-size: .78rem; font-weight: 600;
  color: rgba(255,255,255,.78);
}
/* Urgence < 1 h : le compte à rebours s'embrase et pulse */
.council-hero-cd.cd-soon {
  color: #ffce7a;
  animation: liveBlink 1.1s ease-in-out infinite;
}
.council-hero-cd.cd-now {
  color: #fff;
  background: var(--grad-fire);
  display: inline-block; border-radius: 14px; padding: .2rem 1rem;
  font-size: 1.35rem;
  animation: liveBlink .8s ease-in-out infinite;
}
@media (max-width: 599px) {
  .council-hero { padding: .75rem .9rem .8rem; }
  .council-hero-cd { font-size: 1.15rem; }
  .council-hero-fire { font-size: 1.2rem; }
}

/* v10.5b — Ruban bravo daté : lisible sur deux lignes si besoin, un cran sous le hero */
.done-ribbon {
  border-radius: 16px;
  padding: .55rem 1.1rem;
  font-size: .92rem;
  line-height: 1.4;
}

/* ============================================================
   v10.6 — Popup célébration du conseil terminé 🎆
   ============================================================ */
.celebr-backdrop {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(10, 12, 22, .82);
  animation: celebrIn .55s ease-out both;
  will-change: opacity;
}
.celebr-box {
  position: relative;
  width: min(430px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2.5rem);   /* jamais plus haut que l'écran */
  overflow-y: auto;                     /* contenu défilable si besoin */
  overflow-x: hidden;
  box-sizing: border-box;
  border-radius: 24px;
  padding: 1.3rem 1.2rem 1.2rem;
  text-align: center; color: #fff;
  background:
    radial-gradient(130% 120% at 20% -10%, rgba(255,171,31,.42), transparent 55%),
    radial-gradient(120% 130% at 85% 115%, rgba(214,54,127,.3), transparent 55%),
    linear-gradient(145deg, var(--night) 0%, var(--night-2) 100%);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08) inset;
  animation: celebrPop .8s cubic-bezier(.22,.9,.3,1) both; will-change: transform, opacity;
}
.celebr-fire {
  font-size: 3rem; line-height: 1; display: inline-block;
  animation: floaty 2.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 16px rgba(255,138,43,.6));
}
.celebr-ribbon {
  margin: .6rem auto .9rem;
  font-weight: 800; font-size: .95rem; line-height: 1.45;
  background: var(--grad-accent); border-radius: 16px; padding: .5rem .9rem;
  box-shadow: 0 8px 22px -10px rgba(255,79,26,.6);
}
.celebr-winner {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.9rem; font-weight: 700; margin: .15rem 0;
  text-shadow: 0 2px 16px rgba(255,138,43,.5);
}
.celebr-pts { margin: .1rem 0 .4rem; color: rgba(255,255,255,.8); font-weight: 600; font-size: .9rem; }
.celebr-gage {
  margin: .6rem 0 0; font-size: .85rem; line-height: 1.5;
  background: rgba(255,255,255,.08); border-radius: 12px; padding: .5rem .7rem;
}
.celebr-check {
  display: flex; align-items: flex-start; gap: .5rem; text-align: left;
  margin: 1rem 0 .75rem; font-size: .78rem; line-height: 1.45;
  color: rgba(255,255,255,.85); cursor: pointer;
  max-width: 100%; word-break: break-word;
}
.celebr-check span, .celebr-check { min-width: 0; }
.celebr-check input { margin-top: .15rem; accent-color: var(--flame); flex: 0 0 auto; }
.celebr-box .btn-fire { width: 100%; }
.celebr-out { animation: celebrOut .28s ease both; }
@keyframes celebrIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes celebrOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes celebrPop {
  from { opacity: 0; transform: scale(.94) translateY(28px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Le popup et les confettis cohabitent : confettis au-dessus du voile, sous la boîte */
.confetti { z-index: 401; }
.celebr-box { z-index: 402; }

/* v10.6b — Classement dans le popup célébration */
.celebr-ranking {
  margin: .8rem 0 0; text-align: left;
  background: rgba(255,255,255,.06); border-radius: 14px; padding: .5rem .7rem;
  max-height: 160px; overflow-y: auto;
}
.celebr-rank-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .2rem; font-size: .86rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.celebr-rank-row:last-child { border-bottom: none; }
.celebr-rank-row.is-winner { color: #ffd9a8; font-weight: 700; }
.crr-pos { min-width: 1.7em; text-align: center; }
.crr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crr-pts { font-variant-numeric: tabular-nums; }

/* Ligne discrète du dernier gagnant (page de détails) */
.last-winner-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: .86rem; color: var(--ink-2);
  background: var(--surface-2); border-radius: 12px;
  padding: .55rem .85rem; margin-bottom: .9rem; line-height: 1.5;
}
.last-winner-line .btn-mini { margin-left: auto; }
html[data-theme="nuit"] .last-winner-line { background: rgba(255,255,255,.06); }

/* v10.7 — Cases à cocher inline : robustes en multi-lignes */
.check-inline { align-items: flex-start; line-height: 1.45; }
.check-inline input { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .12rem; }
.check-inline > span { min-width: 0; flex: 1; }
/* Sécurité anti-charabia : les éléments inline du libellé (b, small) NE doivent PAS
   devenir des items flex séparés. On force leur affichage inline normal. */
.check-inline > b, .check-inline > small, .check-inline > i { display: inline; }

/* v10.8 — Case "dernier conseil" : discrète mais bien identifiable */
.check-last {
  background: color-mix(in srgb, var(--flame) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--flame) 28%, transparent);
  border-radius: 10px;
  padding: .5rem .7rem;
  font-size: .8rem;
}
.check-last > span { color: var(--flame-deep); font-weight: 600; }
.check-last > span b { color: var(--flame-deep); font-weight: 800; }
.check-last input { accent-color: var(--flame); }
html[data-theme="nuit"] .check-last {
  background: rgba(255, 79, 26, .1);
  border-color: rgba(255, 79, 26, .35);
}
html[data-theme="nuit"] .check-last > span,
html[data-theme="nuit"] .check-last > span b { color: #ff9d5c; }

/* ============================================================
   v10.9 — Sections de statistiques (profil public & mes stats)
   ============================================================ */
.stat-section {
  margin: .8rem 0;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.stat-section-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--flame-deep); margin-bottom: .5rem;
}
html[data-theme="nuit"] .stat-section { background: rgba(255,255,255,.04); }
html[data-theme="nuit"] .stat-section-title { color: #ff9d5c; }

/* Filtres de "Mes statistiques" */
.stats-filters {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .5rem .6rem; margin: .3rem 0 .9rem;
  padding: .7rem .8rem; border-radius: 12px; background: var(--surface-2);
}
.stats-filters label { margin: 0; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.stats-filters select { width: 100%; margin: 0; }
html[data-theme="nuit"] .stats-filters { background: rgba(255,255,255,.04); }

/* v10.10 — Carte "faits fun" du profil public */
.fun-card {
  margin: .3rem 0 .8rem;
  border-radius: 16px;
  padding: .85rem 1rem;
  color: #fff;
  background:
    radial-gradient(120% 130% at 15% 0%, rgba(255,171,31,.35), transparent 55%),
    linear-gradient(135deg, var(--night) 0%, var(--night-2) 100%);
  box-shadow: var(--shadow-sm);
}
.fun-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 700; text-align: center;
  margin-bottom: .5rem; text-shadow: 0 2px 12px rgba(255,138,43,.4);
}
.fun-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.fun-list li {
  font-size: .82rem; line-height: 1.4;
  background: rgba(255,255,255,.08); border-radius: 9px; padding: .35rem .6rem;
}
.fun-list li b { color: #ffd9a8; }

/* v10.11 — Croix de fermeture des modales, toujours accessible */
#modal-content { position: relative; }
.modal-x {
  position: sticky; top: 0; float: right;
  z-index: 5; margin: -.2rem -.2rem .2rem .5rem;
  width: 2rem; height: 2rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; cursor: pointer;
  font-size: 1rem; font-weight: 700; line-height: 1;
  color: var(--ink-2); background: var(--surface-2);
  transition: background .15s, color .15s, transform .12s;
}
.modal-x:hover { background: var(--neg, #d1435b); color: #fff; transform: rotate(90deg); }
html[data-theme="nuit"] .modal-x { background: rgba(255,255,255,.1); color: #d8dcec; }

/* v10.12 — Liens pseudo lisibles sur les cartes dorées (classement général / totem) */
.card-gold .plink {
  color: #4a3208;                 /* brun foncé, bien contrasté sur le doré */
  font-weight: 700;
  border-bottom-color: rgba(74, 50, 8, .5);
}
.card-gold .plink:hover {
  background: rgba(74, 50, 8, .12);
  color: #2e1f04;
  border-bottom-color: #4a3208;
}
/* Cohérence : chiffres et médailles déjà sombres, on renforce le contraste du nom */
.card-gold .rank-name { color: #33240a; }

/* v10.13 — Graphes de répartition par critère (profil public) */
.cd-group { margin-top: .3rem; }
.cd-group + .cd-group { margin-top: .8rem; }
.cd-head {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  margin: .2rem 0 .5rem; padding-bottom: .2rem;
  border-bottom: 1px dashed var(--line);
}
.cd-head-pos { color: var(--pos, #128a5e); }
.cd-head-neg { color: var(--neg, #d1435b); }
.cd-row {
  display: grid; grid-template-columns: minmax(6.5em, 40%) 1fr auto;
  align-items: center; gap: .5rem; margin: .28rem 0;
}
.cd-label {
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-track {
  height: 12px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden;
}
html[data-theme="nuit"] .cd-track { background: rgba(255,255,255,.08); }
.cd-fill {
  display: block; height: 100%; border-radius: 999px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.cd-pos { background: linear-gradient(90deg, #0d9d95, #37c5b5); }
.cd-neg { background: linear-gradient(90deg, #d1435b, #ff7a90); }
.cd-val {
  font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink); min-width: 1.4em; text-align: right;
}

/* ============================================================
   v10.14 — Invitations internes (envoi & réception)
   ============================================================ */
/* Bouton "Inviter des joueurs" sur la page groupe */
.btn-invite-players { width: 100%; margin: .2rem 0 .6rem; }

/* Modale : liste des candidats à inviter (multi-sélection) */
#inv-search { width: 100%; margin: .2rem 0 .6rem; }
.invite-list {
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px;
  padding: .3rem; margin-bottom: .8rem; background: var(--surface-2);
}
html[data-theme="nuit"] .invite-list { background: rgba(255,255,255,.04); }
.invite-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .55rem; border-radius: 9px; cursor: pointer;
  font-size: .9rem; transition: background .12s;
}
.invite-row:hover { background: var(--surface); }
html[data-theme="nuit"] .invite-row:hover { background: rgba(255,255,255,.06); }
.invite-row input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; accent-color: var(--flame); margin: 0; }
.invite-av { font-size: 1.3rem; flex: 0 0 auto; }
.invite-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#inv-send { width: 100%; margin-bottom: .5rem; }

/* Dashboard : invitations reçues */
.invite-recv-list { display: flex; flex-direction: column; gap: .6rem; }
.invite-recv {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  flex-wrap: wrap;
  padding: .7rem .8rem; border-radius: 12px;
  background: color-mix(in srgb, var(--flame) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--flame) 25%, transparent);
}
.invite-recv-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.invite-recv-info b { font-size: .95rem; }
.invite-recv-acts { display: flex; gap: .4rem; flex: 0 0 auto; flex-wrap: wrap; }
.invite-recv-acts .btn-mini {
  flex: 0 0 auto; width: auto; white-space: nowrap;
  padding: .35rem .7rem; font-size: .78rem;
}
@media (max-width: 599px) {
  .invite-recv { gap: .5rem; padding: .65rem .7rem; }
  .invite-recv-acts { width: 100%; }
  .invite-recv-acts .btn-mini { flex: 1 1 auto; text-align: center; }
}
html[data-theme="nuit"] .invite-recv { background: rgba(255,79,26,.1); border-color: rgba(255,79,26,.3); }

/* v10.15 — Demandes envoyées en attente (côté demandeur) */
.invite-pending {
  background: var(--surface-2);
  border: 1px dashed var(--line);
}
html[data-theme="nuit"] .invite-pending { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }

/* ============================================================
   v10.16 — Pastille de notifications + invitation par auto-complétion
   ============================================================ */
/* Pastille flottante sur la vignette groupe (demandes en attente) */
.card-btn { position: relative; }
.notif-pill {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .72rem; font-weight: 800; color: #fff;
  background: var(--grad-fire); border-radius: 999px;
  padding: .18rem .5rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 10px -3px rgba(255,79,26,.6);
  animation: liveBlink 1.6s ease-in-out infinite;
}

/* Invitation : champ + auto-complétion + chips */
.invite-add-row { display: flex; gap: .5rem; margin: .3rem 0 .7rem; }
.invite-add-row input, .invite-add-row select { flex: 1; min-width: 0; margin: 0; }
.invite-add-row .btn-soft { flex: 0 0 auto; white-space: nowrap; }
.invite-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  min-height: 2.2rem; align-items: center;
  padding: .5rem .6rem; margin-bottom: .8rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
html[data-theme="nuit"] .invite-chips { background: rgba(255,255,255,.04); }
.invite-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 700;
  background: var(--flame-soft); color: var(--flame-deep);
  border: 1px solid color-mix(in srgb, var(--flame) 30%, transparent);
  border-radius: 999px; padding: .25rem .3rem .25rem .65rem;
}
.invite-chip button {
  border: none; cursor: pointer; font-size: .7rem; line-height: 1;
  width: 1.3rem; height: 1.3rem; border-radius: 999px;
  background: rgba(0,0,0,.08); color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.invite-chip button:hover { background: var(--flame); color: #fff; }
html[data-theme="nuit"] .invite-chip { background: rgba(255,79,26,.15); color: #ff9d5c; }

/* v10.17 — Blocs d'invitation clarifiés sur la page groupe */
.invite-block-title {
  font-size: .95rem; font-weight: 800; margin-bottom: .3rem;
  color: var(--ink);
}
.invite-block-title b { color: var(--flame-deep); }
html[data-theme="nuit"] .invite-block-title b { color: #ff9d5c; }
.invite-block .invite-add-row { margin-top: .6rem; }
.invite-block .code-inline { font-size: 1.05rem; }

/* ============================================================
   v10.18 — Invitations envoyées, aperçu groupe, mes comptes
   ============================================================ */
/* État des invitations envoyées */
.invite-sent-line { display: flex; align-items: center; gap: .4rem; font-size: .85rem; flex-wrap: wrap; }
.inv-status { font-weight: 600; }
.inv-ok { color: var(--pos, #128a5e); }
.inv-ko { color: var(--neg, #d1435b); }
.inv-wait { color: var(--ink-2); }
html[data-theme="nuit"] .inv-ok { color: #4ad3a0; }
html[data-theme="nuit"] .inv-ko { color: #ff8fa3; }

/* Nom de groupe cliquable dans une invitation reçue */
.invite-recv-info .plink { cursor: pointer; font-size: .95rem; }

/* Aperçu de groupe (modale) */
.preview-members { display: flex; flex-wrap: wrap; gap: .4rem; }
.preview-member {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 600;
  background: var(--surface-2); border-radius: 999px; padding: .3rem .7rem;
}
html[data-theme="nuit"] .preview-member { background: rgba(255,255,255,.06); }

/* Mes comptes : ligne "toi" mise en évidence */
.acct-me { background: color-mix(in srgb, var(--flame) 7%, transparent); }
html[data-theme="nuit"] .acct-me { background: rgba(255,79,26,.08); }

/* v10.19 — Onglets de "Mes comptes de vacances" */
.ma-tabs { display: flex; gap: .3rem; margin: .3rem 0 .9rem; }
.ma-tab {
  flex: 1; padding: .5rem .3rem; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.ma-tab-on {
  background: var(--grad-fire); color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px -3px rgba(255,79,26,.5);
}
html[data-theme="nuit"] .ma-tab { background: rgba(255,255,255,.05); }
.ma-body { min-height: 4rem; }

/* ============================================================
   v10.20 — Harmonisation des tailles : invitations, comptes, aperçu groupe
   ============================================================ */
/* Table des comptes : styles autonomes (plus dépendants de .accounts-card) */
.ma-body .acct-table { width: 100%; border-collapse: collapse; margin: .3rem 0 .2rem; }
.ma-body .acct-table tr { border-bottom: 1px solid var(--line); }
.ma-body .acct-table tr:last-child { border-bottom: none; }
.ma-body .acct-who { padding: .45rem 0; font-size: .85rem; }
.ma-body .acct-amt { padding: .45rem 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .85rem; }
.ma-body .acct-amt .pos { color: var(--pos, #128a5e); }
.ma-body .acct-amt .neg { color: var(--neg, #d1435b); }
.ma-scope { margin: .1rem 0 .6rem; }
.acct-note { margin-top: .6rem; line-height: 1.5; }
.acct-empty { padding: 1.2rem .5rem; line-height: 1.5; }
.ma-body .settle-row { font-size: .85rem; padding: .45rem 0; }
.ma-body .exp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; line-height: 1.5; }
.ma-body .exp-row:last-child { border-bottom: none; }
.ma-body .exp-info { min-width: 0; }
.ma-body .acct-settle { margin-top: .7rem; }

/* Invitations reçues & envoyées : tailles alignées sur le reste de la page */
.invite-recv {
  align-items: center;
  padding: .6rem .75rem;
}
.invite-recv-info { gap: .1rem; }
.invite-recv-info b { font-size: .88rem; font-weight: 700; }
.invite-recv-info small { font-size: .74rem; line-height: 1.4; }
.invite-sent-line { font-size: .82rem; }
.invite-sent-line .inv-status { font-size: .82rem; font-weight: 600; }
.invite-recv-acts .btn-mini { padding: .3rem .65rem; font-size: .76rem; }
/* Titres de section des blocs dashboard : cohérents entre eux */
.section-head h3 { font-size: 1rem; }

/* Aperçu de groupe (popup) : tailles cohérentes */
.preview-members { gap: .35rem; }
.preview-member { font-size: .78rem; padding: .28rem .6rem; }

/* v10.21 — Chip "payeur verrouillé" et filtre solo dans Mes comptes */
.chip-locked {
  cursor: default; opacity: 1 !important;
  background: var(--flame-soft); color: var(--flame-deep);
  border-color: color-mix(in srgb, var(--flame) 35%, transparent);
}
html[data-theme="nuit"] .chip-locked { background: rgba(255,79,26,.15); color: #ff9d5c; }
/* Filtre unique (plus de colonne groupe) */
.ma-filter-solo { grid-template-columns: auto 1fr; }

/* v10.22 — Onglet désactivé (ex. Ajouter sans vacance active) */
.ma-tab-off { opacity: .45; cursor: not-allowed; }
.ma-tab-off:hover { background: var(--surface-2); color: var(--ink-2); box-shadow: none; }
html[data-theme="nuit"] .ma-tab-off:hover { background: rgba(255,255,255,.05); }

/* v10.23 — En-tête de page avec croix de fermeture (pages pleines : Mes albums…) */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem;
  margin-bottom: .3rem;
}
.page-head h2 { margin: 0; }
.page-x {
  flex: 0 0 auto; width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; cursor: pointer;
  font-size: 1rem; font-weight: 700; line-height: 1;
  color: var(--ink-2); background: var(--surface-2);
  transition: background .15s, color .15s, transform .12s;
}
.page-x:hover { background: var(--neg, #d1435b); color: #fff; transform: rotate(90deg); }
html[data-theme="nuit"] .page-x { background: rgba(255,255,255,.1); color: #d8dcec; }

/* v10.24 — Sélecteur du nombre de critères (création de vacances) */
.nbcrit-row { display: flex; align-items: center; gap: .8rem; margin: .3rem 0; }
.nbcrit-row input[type="range"] { flex: 1; }
.nbcrit-val {
  flex: 0 0 auto; min-width: 2.2rem; text-align: center;
  font-size: 1.3rem; font-weight: 800; color: var(--flame-deep);
  font-variant-numeric: tabular-nums;
}
html[data-theme="nuit"] .nbcrit-val { color: #ff9d5c; }

/* v10.25 — Liste des critères tirés pour le prochain conseil (compact) */
.next-crits {
  margin-top: .6rem; padding-top: .6rem;
  border-top: 1px dashed var(--line);
}
.next-crits-head { font-size: .8rem; font-weight: 700; margin-bottom: .45rem; }
.next-crits-grp {
  display: flex; flex-wrap: wrap; align-items: center; gap: .28rem;
  margin-bottom: .4rem;
}
.ncrit-cat {
  display: block; width: 100%;
  font-size: .68rem; font-weight: 700; opacity: .75;
  margin-bottom: .1rem; text-transform: uppercase; letter-spacing: .02em;
}
.ncrit {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .68rem; font-weight: 600; line-height: 1.1;
  padding: .16rem .42rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.ncrit-pos { background: color-mix(in srgb, var(--pos, #128a5e) 12%, transparent); color: var(--pos, #0e7a52); border-color: color-mix(in srgb, var(--pos, #128a5e) 28%, transparent); }
.ncrit-neg { background: color-mix(in srgb, var(--neg, #d1435b) 12%, transparent); color: var(--neg, #c23350); border-color: color-mix(in srgb, var(--neg, #d1435b) 28%, transparent); }
html[data-theme="nuit"] .ncrit-pos { background: rgba(74,211,160,.14); color: #6fe0b4; border-color: rgba(74,211,160,.3); }
html[data-theme="nuit"] .ncrit-neg { background: rgba(255,143,163,.14); color: #ff9db0; border-color: rgba(255,143,163,.3); }

/* v10.26 — Croix de fermeture de la popup de célébration */
.celebr-x {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; cursor: pointer;
  font-size: 1rem; font-weight: 700; line-height: 1;
  color: #fff; background: rgba(255,255,255,.15);
  transition: background .15s, transform .12s;
}
.celebr-x:hover { background: rgba(255,255,255,.32); transform: rotate(90deg); }

/* v10.27 — Avertissement « mode pimenté » (le moins) à la création de vacances */
.askmoins-warn {
  margin: .4rem 0 .6rem; padding: .65rem .8rem; border-radius: 12px;
  font-size: .82rem; line-height: 1.55;
  background: color-mix(in srgb, #d1435b 9%, transparent);
  border: 1.5px solid color-mix(in srgb, #d1435b 32%, transparent);
}
html[data-theme="nuit"] .askmoins-warn {
  background: rgba(255,120,140,.1); border-color: rgba(255,120,140,.32);
}

/* v10.28 — Vote du mode de conseil (doux / pimenté) */
.modal .btn-big { display: block; width: 100%; margin: .5rem 0; line-height: 1.35; }
.modal .btn-big small { display: block; font-weight: 500; font-size: .74rem; opacity: .92; margin-top: .15rem; }
.btn-spicy { background: linear-gradient(135deg, #d1435b, #ff4f1a) !important; }
.mode-tally { font-size: .82rem; margin: .5rem 0 0; }
.mode-tally .mt-sep { opacity: .5; margin: 0 .3rem; font-size: .74rem; }
.mode-tally .mt-doux b { color: #0e7a52; }
.mode-tally .mt-spicy b { color: #c23350; }
html[data-theme="nuit"] .mode-tally .mt-doux b { color: #6fe0b4; }
html[data-theme="nuit"] .mode-tally .mt-spicy b { color: #ff9db0; }
.mode-banner {
  margin: .2rem 0 .6rem; padding: .45rem .7rem; border-radius: 10px;
  font-size: .82rem; text-align: center;
  background: color-mix(in srgb, var(--flame) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--flame) 24%, transparent);
}
html[data-theme="nuit"] .mode-banner { background: rgba(255,79,26,.09); border-color: rgba(255,79,26,.26); }

/* v10.29 — Observateurs, vue spectateur enrichie, suggestions cliquables */
.btn-observe { background: linear-gradient(135deg, #4a5568, #2d3748) !important; }
.spect-banner {
  margin: 0 0 .6rem; padding: .55rem .75rem; border-radius: 12px;
  font-size: .84rem; line-height: 1.5; text-align: center;
  background: color-mix(in srgb, #4a5568 12%, transparent);
  border: 1px solid color-mix(in srgb, #4a5568 30%, transparent);
}
html[data-theme="nuit"] .spect-banner { background: rgba(160,174,192,.1); border-color: rgba(160,174,192,.28); }
.spect-fun {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: .7rem 0 .2rem; padding: .5rem .6rem; border-radius: 12px;
  background: color-mix(in srgb, var(--flame) 6%, transparent);
  border: 1px dashed color-mix(in srgb, var(--flame) 28%, transparent);
}
html[data-theme="nuit"] .spect-fun { background: rgba(255,79,26,.07); border-color: rgba(255,79,26,.3); }
.spect-fun-head { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; opacity: .8; }
.spect-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem;
  padding: .2rem .55rem; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line);
}
.spect-chip small { opacity: .7; }
.spect-path { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0 .2rem; }
.spath {
  font-size: .68rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); opacity: .65;
}
.spath-done { opacity: 1; background: color-mix(in srgb, #128a5e 10%, transparent); border-color: color-mix(in srgb, #128a5e 28%, transparent); }
.spath-cur { opacity: 1; background: var(--grad-fire); color: #fff; border-color: transparent; animation: cdPulse 1.4s ease-in-out infinite; }
html[data-theme="nuit"] .spath-done { background: rgba(74,211,160,.12); border-color: rgba(74,211,160,.3); }
.suggest-name {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ink); text-align: left;
  text-decoration: underline dotted 1.5px; text-underline-offset: 3px;
}
.suggest-name:hover { color: var(--flame-deep); text-decoration-style: solid; }
.suggest-name small { opacity: .6; }

/* v10.30 — Choix du rôle (participant/observateur) dans invitations et demandes */
.role-pick { display: flex; flex-direction: column; gap: .15rem; margin: .35rem 0 .55rem; }
.role-pick .check-inline { margin: 0; }
.req-acts { display: inline-flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }

/* v10.31 — Badges de rôle dans « La tribu » */
.role-dot { display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; vertical-align: middle; margin-left: .1rem; }
.role-dot.role-none { width: 1rem; opacity: .35; font-weight: 800; }

/* v10.32 — Badge observateur sur vignette + actions d'historique */
.badge.badge-obs { background: color-mix(in srgb, #4a5568 14%, transparent); color: var(--ink-2);
  border: 1px solid color-mix(in srgb, #4a5568 30%, transparent); }
html[data-theme="nuit"] .badge.badge-obs { background: rgba(160,174,192,.12); border-color: rgba(160,174,192,.3); color: #cbd5e0; }
.exp-acts { display: inline-flex; gap: .3rem; align-items: center; }

/* v10.33 — Statut de participation aligné dans « La tribu » (compact mobile) */
.member { display: flex; align-items: center; gap: .45rem; }
.member .member-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.member .member-main small { font-size: .68rem; }
.member-status {
  flex: 0 0 auto; max-width: 42%; text-align: center; font-size: .62rem; font-weight: 700;
  line-height: 1.35; padding: .18rem .5rem; border-radius: 10px; white-space: normal;
  overflow-wrap: anywhere;
}
.member-status.ms-play { background: color-mix(in srgb, var(--flame) 10%, transparent);
  color: var(--flame-deep); border: 1px solid color-mix(in srgb, var(--flame) 28%, transparent); }
.member-status.ms-obs { background: color-mix(in srgb, #4a5568 12%, transparent);
  color: var(--ink-2); border: 1px solid color-mix(in srgb, #4a5568 28%, transparent); }
html[data-theme="nuit"] .member-status.ms-play { background: rgba(255,79,26,.12); color: #ff9d5c; border-color: rgba(255,79,26,.3); }
html[data-theme="nuit"] .member-status.ms-obs { background: rgba(160,174,192,.12); color: #cbd5e0; border-color: rgba(160,174,192,.3); }

/* v10.34 — Badge « nouvelles vacances » clignotant sur la vignette de groupe */
.badge-newvac {
  display: block; margin: .1rem 0 .45rem; padding: .45rem .65rem; border-radius: 12px;
  font-size: .78rem; font-weight: 700; text-align: center; cursor: pointer;
  background: color-mix(in srgb, var(--flame) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--flame) 40%, transparent);
  color: var(--flame-deep);
  animation: nvBlink 2.4s ease-in-out infinite;
}
html[data-theme="nuit"] .badge-newvac { background: rgba(255,79,26,.12); border-color: rgba(255,79,26,.42); color: #ff9d5c; }
@keyframes nvBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 26, 0); opacity: 1; }
  50% { box-shadow: 0 0 14px 2px rgba(255, 79, 26, .35); opacity: .82; }
}
@media (prefers-reduced-motion: reduce) { .badge-newvac { animation: none; } }

/* v10.35 — Pastille « rôle à choisir » dans La tribu */
.member-status.ms-none {
  background: transparent; color: var(--ink-2);
  border: 1.5px dashed color-mix(in srgb, var(--ink-2) 45%, transparent);
}
html[data-theme="nuit"] .member-status.ms-none { color: #a0aec0; border-color: rgba(160,174,192,.4); }

/* v10.36 — Mise en scène des résultats : suspense 🥁 et SACRE Koolanta 👑 */
.reveal-backdrop {
  position: fixed; inset: 0; z-index: 400; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 35%, #2a1a12 0%, #14100d 55%, #0a0908 100%);
  /* Fond opaque de secours dès la première frame : jamais de page visible derrière. */
  background-color: #0a0908;
}
/* Seul le fond en dégradé fait un léger fondu ; la couleur de secours, elle, est immédiate. */
.reveal-backdrop { animation: revealBg .5s ease-out; }
@keyframes revealBg { from { background-color: #0a0908; } to { background-color: #0a0908; } }
.reveal-box { text-align: center; padding: 1rem 1.4rem; animation: revealPop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes revealPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.reveal-emoji { font-size: 4.2rem; line-height: 1; margin-bottom: .9rem; display: inline-block;
  filter: drop-shadow(0 6px 22px rgba(255, 79, 26, .45)); }
.reveal-emoji.re-big { font-size: 5.4rem; }
.re-pulse { animation: reScale 1.1s ease-in-out infinite; }
@keyframes reScale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.re-drum { animation: reShake .55s ease-in-out infinite; }
@keyframes reShake {
  0%,100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-9deg) scale(1.06); }
  40% { transform: rotate(8deg) scale(1.1); } 60% { transform: rotate(-6deg) scale(1.06); }
  80% { transform: rotate(5deg) scale(1.02); } }
.re-glow { animation: reGlow 1.2s ease-in-out infinite; }
@keyframes reGlow {
  0%,100% { filter: drop-shadow(0 0 10px rgba(255, 209, 102, .35)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 34px rgba(255, 209, 102, .95)); transform: scale(1.12); } }
.reveal-title { color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.reveal-sub { color: rgba(255,255,255,.75); font-size: .92rem; margin-top: .45rem; }
.reveal-skip { position: absolute; bottom: max(1.2rem, env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.4); font-size: .72rem; letter-spacing: .04em; }

/* Le SACRE 👑 */
.finale-backdrop {
  position: fixed; inset: 0; z-index: 410; overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: radial-gradient(130% 100% at 50% 20%, #3a2410 0%, #17110c 55%, #0a0908 100%);
  background-color: #0a0908;
}
.finale-box { position: relative; z-index: 2; text-align: center; max-width: 420px; width: 100%;
  padding: 1.4rem 1.2rem 1.5rem; animation: revealPop .6s cubic-bezier(.2,1.5,.35,1); }
.finale-crown { font-size: 4.6rem; line-height: 1; animation: crownDrop .9s cubic-bezier(.2,1.6,.3,1), reGlow 1.6s ease-in-out .9s infinite; }
@keyframes crownDrop { from { transform: translateY(-70px) scale(.4) rotate(-18deg); opacity: 0; }
  to { transform: translateY(0) scale(1) rotate(0); opacity: 1; } }
.finale-label { color: #ffd166; font-size: .82rem; font-weight: 800; letter-spacing: .3em;
  margin: .7rem 0 .2rem; text-transform: uppercase; }
.finale-name {
  font-size: clamp(2.1rem, 11vw, 3rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
  background: linear-gradient(90deg, #ffd166, #ff4f1a, #ffd166, #ff9d5c, #ffd166);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nameShine 2.6s linear infinite; padding: .1em 0;
}
@keyframes nameShine { from { background-position: 0% 0; } to { background-position: 300% 0; } }
.finale-pts { color: rgba(255,255,255,.85); font-weight: 700; margin: .2rem 0 .3rem; }
.finale-prize { color: #fff; font-size: 1rem; margin: .3rem 0 .8rem; }
.finale-podium { max-width: 300px; margin: .4rem auto .6rem; }
.finale-podium .celebr-rank-row { color: #fff; }
.finale-cheer { color: rgba(255,255,255,.7); font-size: .85rem; margin: .5rem 0 .9rem; }
/* Feux d'artifice CSS : trois éclats en boucle décalée */
.fw { position: absolute; width: 6px; height: 6px; border-radius: 999px; z-index: 1; pointer-events: none;
  animation: fwBurst 2.2s ease-out infinite; }
.fw1 { left: 20%; top: 26%; color: #ffd166; }
.fw2 { left: 78%; top: 20%; color: #ff4f1a; animation-delay: .7s; }
.fw3 { left: 55%; top: 64%; color: #7c5cff; animation-delay: 1.4s; }
@keyframes fwBurst {
  0% { box-shadow: 0 0 0 0 currentColor, 0 0 0 0 currentColor; opacity: 0; transform: scale(.2); }
  8% { opacity: 1; }
  35% { box-shadow:
    0 -46px 0 -1px currentColor, 33px -33px 0 -1px currentColor, 46px 0 0 -1px currentColor,
    33px 33px 0 -1px currentColor, 0 46px 0 -1px currentColor, -33px 33px 0 -1px currentColor,
    -46px 0 0 -1px currentColor, -33px -33px 0 -1px currentColor;
    opacity: 1; transform: scale(1); }
  70%, 100% { box-shadow:
    0 -66px 0 -4px transparent, 47px -47px 0 -4px transparent, 66px 0 0 -4px transparent,
    47px 47px 0 -4px transparent, 0 66px 0 -4px transparent, -47px 47px 0 -4px transparent,
    -66px 0 0 -4px transparent, -47px -47px 0 -4px transparent;
    opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .re-pulse, .re-drum, .re-glow, .finale-crown, .finale-name, .fw { animation: none; }
}

/* v10.37 — Dépouillement animé question par question */
.tally-backdrop { cursor: pointer; }
.tally-wrap { width: min(420px, 92vw); text-align: center; animation: revealPop .45s cubic-bezier(.2,1.4,.4,1); }
.tally-title { color: #ffd166; font-size: .8rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.tally-crit { color: #fff; font-size: 1.15rem; font-weight: 800; margin: .55rem 0 .9rem; min-height: 1.7rem; }
.tally-crit .tag { vertical-align: middle; }
.tally-board { position: relative; }
.tally-row {
  position: absolute; left: 0; right: 0; top: 0; height: 38px;
  display: flex; align-items: center; gap: .55rem; padding: 0 .7rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; color: #fff;
  transition: transform .5s cubic-bezier(.3,1.2,.4,1), background .3s, border-color .3s;
  will-change: transform;
}
.tally-row.td-lead { background: rgba(255, 209, 102, .14); border-color: rgba(255, 209, 102, .45); }
.tally-row.td-lead .tr-pts { color: #ffd166; }
.tr-ava { font-size: 1.05rem; flex: 0 0 auto; }
.tr-name { flex: 1 1 auto; min-width: 0; text-align: left; font-weight: 700; font-size: .88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-delta { flex: 0 0 auto; min-width: 2.2rem; text-align: right; }
.td-chip { display: inline-block; font-style: normal; font-size: .72rem; font-weight: 800;
  color: #6fe0b4; animation: tdPop .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes tdPop { from { transform: translateY(8px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.tr-pts { flex: 0 0 auto; min-width: 2rem; text-align: right; font-size: 1rem; }
.tally-progress { color: rgba(255,255,255,.5); font-size: .74rem; margin-top: .7rem; }
.tally-skip { margin-top: .6rem; color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.3); }
@media (prefers-reduced-motion: reduce) { .tally-row { transition: none; } .td-chip { animation: none; } }

/* v10.38 — Barres colorées du dépouillement + machine à sous du sacre */
.reveal-box { animation-duration: .8s; }
.tally-row { transition: transform .7s cubic-bezier(.3,1.15,.4,1), background .4s, border-color .4s; overflow: hidden; }
.tally-row > * { position: relative; z-index: 1; }
.tr-bar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; width: 0%;
  opacity: .28; border-radius: 12px 0 0 12px;
  transition: width .8s cubic-bezier(.25,1,.35,1);
}
.tally-row.td-lead .tr-bar { opacity: .42; }
.td-chip.td-neg { color: #ff8fa3; }
.tally-slot {
  margin: .55rem auto .2rem; min-height: 2.4rem;
  font-size: 1.55rem; font-weight: 900; letter-spacing: -.01em; color: #fff;
  opacity: .55; filter: blur(.6px);
  transition: opacity .3s, filter .3s;
}
.tally-slot.slot-lock {
  opacity: 1; filter: none;
  background: linear-gradient(90deg, #ffd166, #ff4f1a, #ffd166);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nameShine 2.2s linear infinite, slotFlash .6s cubic-bezier(.2,1.6,.4,1);
}
@keyframes slotFlash { from { transform: scale(1.5); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tr-bar, .tally-slot { transition: none; } .tally-slot.slot-lock { animation: none; color: #ffd166; background: none; } }

/* v10.39 — Transitions professionnalisées + révélation du sacre */
.reveal-backdrop.reveal-close { animation: revealOut .42s ease-in forwards; }
@keyframes revealOut { from { opacity: 1; } to { opacity: 0; } }
.reveal-stage { display: contents; }
.reveal-box { animation: rbIn .75s cubic-bezier(.22,1.15,.35,1); }
@keyframes rbIn {
  from { transform: scale(.92) translateY(10px); opacity: 0; filter: blur(6px); }
  to { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); } }
.reveal-box.rb-out { animation: rbOut .3s ease-in forwards; }
@keyframes rbOut { from { transform: scale(1); opacity: 1; filter: blur(0); }
  to { transform: scale(.96) translateY(-6px); opacity: 0; filter: blur(4px); } }
.tally-wrap { animation: rbIn .8s cubic-bezier(.22,1.15,.35,1); }
.tally-slot.slot-mystery { opacity: 1; filter: none; color: #ffd166; animation: reScale 1s ease-in-out infinite; }
/* Révélation du nom du vainqueur (machine à sous du SACRE) */
.finale-name-spin { opacity: .55; filter: blur(.7px); }
.finale-name-lock { animation: nameShine 2.6s linear infinite, slotFlash .65s cubic-bezier(.2,1.6,.4,1); }
.finale-after { opacity: 0; transform: translateY(10px); transition: opacity .8s ease .35s, transform .8s ease .35s; }
.finale-boom .finale-after { opacity: 1; transform: none; }
.finale-boom .finale-crown { animation: reGlow 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .reveal-backdrop, .reveal-box, .tally-wrap { animation: none; }
  .finale-name-spin { opacity: 1; filter: none; }
  .finale-after { opacity: 1; transform: none; transition: none; }
}

/* v10.40 — Bouton bruitages 🔊/🔇 des écrans de mise en scène */
.snd-toggle {
  position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; z-index: 5;
  width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #fff; font-size: 1.05rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .25s, transform .15s;
}
.snd-toggle:active { transform: scale(.92); }
.snd-toggle:hover { background: rgba(255,255,255,.18); }

/* v10.40 — Alignement avatar+nom dans les machines à sous */
.slot-nm { display: inline; }
.tally-slot img.avatar-img, .finale-name img.avatar-img {
  width: 1em; height: 1em; border-radius: 50%; object-fit: cover;
  vertical-align: -0.15em; margin-right: .1em;
}

/* v10.40 — Voile de fond persistant des films (masque la page entre deux overlays) */
.reveal-veil {
  position: fixed; inset: 0; z-index: 399; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 35%, #2a1a12 0%, #14100d 55%, #0a0908 100%);
  background-color: #0a0908;
  animation: revealBg .5s ease-out;
}
.reveal-veil.reveal-veil-out { animation: revealOut .4s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .reveal-veil { animation: none; } }

/* v10.41 — Classement cliquable + navigation entre conseils dans le détail */
.card-clickable { cursor: pointer; transition: transform .12s ease, box-shadow .2s ease; }
.card-clickable:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.card-clickable:active { transform: translateY(0); }
.detail-nav {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: .3rem 0 .6rem;
}
.detail-nav-mid { font-size: .82rem; font-weight: 700; color: var(--ink-2); flex: 0 0 auto; }
.detail-nav .btn-mini { flex: 0 0 auto; }
.btn-disabled, .btn-mini.btn-disabled { opacity: .38; pointer-events: none; }

/* v10.41b — Indice cliquable « détails › » dans le titre du classement */
.card-go { float: right; font-size: .72rem; font-weight: 700; color: var(--flame-deep); opacity: .85; }
html[data-theme="nuit"] .card-go { color: #ff9d5c; }
.card-gold .card-go { color: #33240a; }

/* v10.42 — Barres de scoring des « Champions du… » */
.champ-block { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.champ-block:last-child { border-bottom: none; }
.champ-crit { font-weight: 700; font-size: .9rem; margin-bottom: .4rem; }
.champ-empty { margin: 0; }
.champ-bars { display: flex; flex-direction: column; gap: .3rem; }
.champ-bar-row { display: flex; align-items: center; gap: .5rem; }
.champ-bar-name { flex: 0 0 40%; min-width: 0; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-bar-track { flex: 1 1 auto; height: 14px; background: var(--line); border-radius: 999px; overflow: hidden; }
.champ-bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #0d9d95, #4aa3ff);
  transition: width .5s cubic-bezier(.25,1,.35,1);
}
.champ-bar-fill.champ-bar-neg { background: linear-gradient(90deg, #ff8fa3, #d6367f); }
.champ-bar-val { flex: 0 0 auto; font-size: .8rem; min-width: 2.6rem; text-align: right; }
.champ-lead .champ-bar-name { font-weight: 800; }
.champ-lead .champ-bar-val { color: var(--flame-deep); }
html[data-theme="nuit"] .champ-lead .champ-bar-val { color: #ff9d5c; }

/* v10.43 — Titre de section « détail par question » dans la modale de conseil */
.detail-crits-head {
  font-weight: 800; font-size: .95rem; margin: 1.1rem 0 .5rem;
  padding-top: .8rem; border-top: 1px solid var(--line);
}
/* Podium un peu plus compact dans la modale */
.modal .podium-card { margin: .6rem 0; }

/* v10.44 — Le Totem : carte premium sombre sertie d'or (étincelante mais sobre) */
.card-totem {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 209, 102, .16) 0%, transparent 60%),
    linear-gradient(160deg, #2a2140 0%, #1a1730 55%, #14111f 100%);
  color: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
  background-clip: padding-box;
  box-shadow: 0 10px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
/* Liseré doré animé (reflet qui balaie doucement) */
.card-totem::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(120deg, #ffd166, #ff9d5c, #ffd166, #b98a2e, #ffd166);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: totemShine 5.5s linear infinite; pointer-events: none;
}
@keyframes totemShine { from { background-position: 0% 0; } to { background-position: 260% 0; } }
.card-totem h2 {
  background: linear-gradient(90deg, #ffe08a, #ffd166, #ffb347);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-totem .prize-line-dark { color: rgba(255,255,255,.82); }
.card-totem .rank-name { color: #fff; }
.card-totem .rank-pts { color: #ffd166; }
.card-totem .rank-pos { color: #fff; }
.card-totem .rank-bar { background: rgba(255,255,255,.14); }
.card-totem .rank-bar i { background: linear-gradient(90deg, #ffd166, #ff9d5c); }
.card-totem .card-endinfo { filter: none; }
@media (prefers-reduced-motion: reduce) { .card-totem::before { animation: none; } }

/* v10.45 — Pastille « Aucune vacance active » : gris ardoise neutre, distinct du vert
 * (conseil programmé) et du marron (vacances à venir). Spécificité renforcée pour ne
 * plus être écrasée par les règles génériques .vac-pill (notamment en thème nuit). */
.vac-pill.vac-none {
  background: #eef0f4; color: #6b7280;
  border: 1px dashed #c3c9d3;
}
html[data-theme="nuit"] .vac-pill.vac-none {
  background: rgba(148, 163, 184, .12); color: #9aa5b4;
  border: 1px dashed rgba(148, 163, 184, .38);
}

/* v10.46 — Compteur de vacances archivées dans la pastille « aucune vacance active » */
.vac-pill .vac-archived { display: block; font-size: .68rem; opacity: .75; margin-top: .1rem; font-weight: 600; }

/* v10.47 — Pastille « aucune vacance active » : même forme que les pastilles actives
 * (arrondi 13px, padding, empilement, typographie) — couleurs grises et pointillés conservés. */
.vac-pill.vac-none {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .28rem;
  border-radius: 13px; padding: .34rem .7rem; line-height: 1.25; max-width: 100%;
}
.vac-pill.vac-none .vac-name {
  font-weight: 800; font-size: .82rem; display: inline-flex; align-items: center; gap: .25rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vac-pill.vac-none .vac-archived { margin-top: 0; }

/* Ligne discrète « N vacances archivées » sous les pastilles actives */
.card-archived { font-size: .72rem; font-weight: 600; color: var(--muted); margin-top: .35rem; opacity: .85; }

/* v10.48 — Choix du mode du prochain conseil (privilège du vainqueur) */
.mode-choice { display: flex; flex-direction: column; gap: .4rem; margin: .3rem 0 .6rem; }
.mode-choice .check-inline { align-items: flex-start; }
.mode-choice input[type="radio"] { margin-top: .2rem; accent-color: #ff4f1a; }

/* v10.49 — État « conseil joué, suite à définir » (violet doux, distinct du vert/orange/marron) */
.rt-badge.rt-done {
  background: rgba(139, 92, 246, .13); color: #7c5cd6;
  border: 1px solid rgba(139, 92, 246, .32);
}
html[data-theme="nuit"] .rt-badge.rt-done { background: rgba(155, 120, 245, .16); color: #b9a5f2; border-color: rgba(155, 120, 245, .4); }
.council-done-badge {
  margin-top: .45rem; padding: .4rem .65rem; border-radius: 11px;
  font-size: .8rem; font-weight: 700;
  background: rgba(139, 92, 246, .12); color: #7c5cd6;
  border: 1px solid rgba(139, 92, 246, .3);
}
html[data-theme="nuit"] .council-done-badge { background: rgba(155, 120, 245, .14); color: #b9a5f2; border-color: rgba(155, 120, 245, .38); }


/* v10.50 — Accueil : hero resserré pour que la carte de connexion arrive plus haut */
.landing-hero { padding: 1.5rem 1rem .5rem; }
.landing-hero .flames span { font-size: 1.4rem; }
.landing-hero .flames span:nth-child(2) { font-size: 1.8rem; }
.slogan { margin: .3rem 0 .8rem; font-size: 1.02rem; }
.pillars span { padding: .32rem .75rem; font-size: .78rem; }
.auth-card { margin-top: 1rem; }

/* v10.51 — Administration du site : dashboard, graphe, tableaux */
.admin-head h2 { margin-bottom: .6rem; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.admin-tabs button { flex: 1 1 auto; min-width: 8.5rem; padding: .5rem .6rem; border: none; cursor: pointer;
  border-radius: 999px; font: 800 .82rem/1 inherit; background: var(--line); color: var(--ink-2); }
.admin-tabs button.active { background: linear-gradient(118deg, var(--flame), #ff7a30); color: #fff; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  padding: .5rem .6rem; display: flex; flex-direction: column; gap: 0; align-items: flex-start;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); cursor: pointer; font: inherit; color: inherit;
  text-align: left; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.kpi:not([disabled]):hover { transform: translateY(-2px); border-color: var(--flame); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.kpi[disabled] { cursor: default; }
.kpi-emo { font-size: .95rem; line-height: 1; }
.kpi-val { font-size: 1.22rem; line-height: 1.15; }
.kpi-lbl { font-size: .66rem; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.kpi-sub { font-size: .62rem; font-weight: 800; color: #0d9d95; }
.admin-chart-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.admin-days { display: flex; gap: .35rem; }
.admin-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .8rem; }
.admin-legend { gap: .3rem; }
.admin-legend .leg { border: 1.5px solid var(--c); color: var(--ink-2); background: none; cursor: pointer;
  border-radius: 999px; padding: .2rem .5rem; font: 700 .64rem/1 inherit; opacity: .42; }
.admin-legend .leg.leg-on { opacity: 1; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--ink); }
.admin-chart-svg { width: 100%; height: auto; display: block; }
.ac-grid { stroke: var(--line); stroke-width: 1; }
.ac-lbl { font: 600 10px system-ui, sans-serif; fill: var(--ink-2); }
.admin-search { width: 100%; box-sizing: border-box; margin: .3rem 0 .6rem; padding: .55rem .7rem;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.admin-table { display: flex; flex-direction: column; }
.admin-tr { display: grid; grid-template-columns: 1.6fr .9fr .5fr .5fr auto; gap: .4rem; align-items: center;
  padding: .45rem .2rem; border-bottom: 1px solid var(--line); font-size: .86rem; }
#adm-users .admin-tr { grid-template-columns: 1.6fr .9fr .5fr auto; }
.admin-tr.admin-th { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); border-bottom: 2px solid var(--line); }
.admin-tr:last-child { border-bottom: none; }
.admin-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); margin-right: .35rem; }
@media (max-width: 480px) {
  .admin-tr { grid-template-columns: 1.3fr .8fr auto; }
  .admin-tr > span:nth-child(3):not(:last-child) { display: none; }
  .admin-tr > span:nth-child(4):not(:last-child) { display: none; }
  #adm-users .admin-tr { grid-template-columns: 1.5fr .8fr auto; }
  #adm-users .admin-tr > span:nth-child(3) { display: none; }
}

/* v10.52 — 🌳 Explorateur d'administration */
.tree-toolbar { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.tree-tools { display: flex; gap: .35rem; }
#admin-tree details { border: 1px solid var(--line); border-radius: 13px; margin-bottom: .5rem;
  background: var(--surface); overflow: hidden; }
#admin-tree details.t-vac { margin: .45rem 0; border-left: 3px solid #7ec850; }
#admin-tree details.t-vac[open] { border-left-color: var(--flame); }
#admin-tree summary { list-style: none; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem .65rem; cursor: pointer; user-select: none; }
#admin-tree summary::-webkit-details-marker { display: none; }
#admin-tree summary::before { content: '›'; font-weight: 900; color: var(--ink-2);
  transition: transform .15s ease; flex: 0 0 auto; }
#admin-tree details[open] > summary::before { transform: rotate(90deg); color: var(--flame); }
.t-title { flex: 1 1 auto; min-width: 0; font-size: .9rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.t-code { font-size: .68rem; background: var(--line); border-radius: 6px; padding: .1rem .35rem; }
.t-badges { display: flex; gap: .3rem; flex: 0 0 auto; }
.t-badge { font-size: .66rem; font-weight: 800; background: var(--line); color: var(--ink-2);
  border-radius: 999px; padding: .18rem .45rem; white-space: nowrap; }
.t-pill { font-size: .62rem; font-weight: 800; border-radius: 999px; padding: .14rem .45rem; }
.t-pill-live { background: rgba(126, 200, 80, .16); color: #4e8f22; }
.t-pill-close { background: rgba(139, 92, 246, .14); color: #7c5cd6; }
html[data-theme="nuit"] .t-pill-live { color: #9fdd6e; }
html[data-theme="nuit"] .t-pill-close { color: #b9a5f2; }
.t-actions { flex: 0 0 auto; }
.t-body { padding: .2rem .7rem .65rem 1.35rem; border-top: 1px dashed var(--line); }
.t-info { font-size: .78rem; color: var(--ink-2); margin: .4rem 0 .3rem; line-height: 1.6; }
.t-sec { margin: .4rem 0; }
.t-sec-h { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-2); margin-bottom: .25rem; }
.t-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.t-chip { font-size: .76rem; font-weight: 700; background: var(--line); border-radius: 999px;
  padding: .22rem .55rem; }
@media (min-width: 560px) { .tree-toolbar { flex-direction: row; align-items: center; }
  .tree-toolbar .admin-search { flex: 1; margin: 0; } }

/* v10.53 — Détail d'un point du graphe */
.ac-dot { cursor: pointer; }
.ac-dot:hover { r: 5.5; }
.day-detail { margin-top: .7rem; border: 1px solid var(--line); border-radius: 13px;
  padding: .6rem .7rem; background: var(--surface); }
.day-detail-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .85rem; margin-bottom: .4rem; }
.admin-ip { font-variant-numeric: tabular-nums; font-size: .74rem; white-space: nowrap; }
.day-detail .admin-tr { grid-template-columns: auto 1.2fr 1fr auto; }
#admin-journal-ip { }

/* v10.54 — ⚙️ Réglages admin : interrupteurs */
.setting-row { display: flex; align-items: flex-start; gap: .8rem; padding: .5rem 0; }
.setting-switch { position: relative; flex: 0 0 auto; margin-top: .15rem; }
.setting-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.setting-switch .sw { display: block; width: 46px; height: 26px; border-radius: 999px;
  background: var(--line); transition: background .2s ease; position: relative; }
.setting-switch .sw::after { content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: left .2s ease; }
.setting-switch input:checked + .sw { background: linear-gradient(118deg, var(--flame), #ff7a30); }
.setting-switch input:checked + .sw::after { left: 23px; }
.setting-txt b { display: block; font-size: .92rem; }
.setting-txt small { color: var(--ink-2); font-size: .8rem; line-height: 1.55; display: block; margin-top: .15rem; }

/* v10.55 — Croix « ne plus afficher » sur les rappels de connexion */
.toast2 { position: relative; }
.toast2 .toast2-x { position: absolute; top: -7px; right: -7px; width: 21px; height: 21px;
  border-radius: 50%; border: none; cursor: pointer; font: 800 .68rem/1 system-ui, sans-serif;
  background: var(--ink, #2c2118); color: var(--surface, #fff);
  box-shadow: 0 2px 6px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.toast2 .toast2-x:hover { transform: scale(1.12); }
.toast2.toast2-click { padding-right: 1rem; }

/* v10.56 — Fil d'ariane : intitulés longs tronqués (…) pour ne jamais passer sous le badge 💬 fixe */
.breadcrumb { flex-wrap: nowrap; min-width: 0; }
.breadcrumb button, .breadcrumb span {
  max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 0 1 auto; min-width: 0;
}
@media (max-width: 520px) {
  /* Écran étroit : budget serré pour laisser libre la zone du badge 💬 (droite) */
  .breadcrumb button { max-width: 6.2rem; }
  .breadcrumb span { max-width: 6.8rem; }
}

/* v10.57 — En-tête de page uniforme (tous les onglets) */
.page-title { margin: 0 0 .75rem; }
.page-title h2 { margin: 0; font-size: 1.28rem; line-height: 1.25; }
.page-title .pt-sub { display: block; font-size: .8rem; font-weight: 600; color: var(--muted);
  margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card > .page-title:first-child { margin-top: -.1rem; }

/* v10.58 — Lignes verrouillées des formulaires de programmation */
.locked-line { background: var(--line); border-radius: 10px; padding: .5rem .65rem; margin: .55rem 0; line-height: 1.55; }

/* v10.59 — 🎞️ Entrée en scène d'une nouvelle question (une seule fois par question) */
.question-card.q-enter { animation: qEnter .55s cubic-bezier(.22,.9,.3,1) both; }
@keyframes qEnter {
  from { opacity: 0; transform: translateX(34px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .question-card.q-enter { animation: none; } }

/* v10.56 — Crayon de renommage sur les chips membres de l'arbre admin */
.t-chip-edit { background: none; border: none; cursor: pointer; font-size: .78rem;
  padding: 0 .1rem 0 .35rem; opacity: .5; transition: opacity .15s, transform .12s; }
.t-chip-edit:hover { opacity: 1; transform: scale(1.18); }

/* v10.57 — Actions groupées sur une ligne joueur (renommer + supprimer) */
.adm-uacts { display: inline-flex; gap: .3rem; align-items: center; justify-content: flex-end; }

/* v10.58 — Bloc de gestion de la date de fin des vacances */
.enddate-box { margin: .7rem 0; padding: .6rem .7rem; border: 1px dashed var(--line);
  border-radius: 12px; background: rgba(255,255,255,.03); }
.enddate-box .row-dates { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .3rem 0; }
.enddate-box input[type=date] { flex: 1 1 auto; min-width: 8.5rem; }

/* v10.59 — Ligne date de fin dans la vue lecture seule du conseil */
.council-plan-endline { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line); font-size: .88rem; }
.council-plan-endline .cpr-lbl { color: var(--ink-2); }

/* v10.60 — Vignette "Fin du jeu" actionnable (clic -> éditeur) */
.end-line-act { cursor: default; }
.end-line-act[role="button"] { cursor: pointer; border-radius: 8px; padding: .2rem .4rem;
  margin-left: -.4rem; transition: background .15s; }
.end-line-act[role="button"]:hover { background: rgba(255,209,102,.14); }
.end-line-act[role="button"]:hover .end-edit-cue { opacity: 1; transform: scale(1.1); }
/* Crayon d'édition : clairement cliquable (pastille cerclée, pas grisé) */
.end-edit-cue { display: inline-flex; align-items: center; justify-content: center;
  margin-left: .45rem; font-size: .8em; opacity: 1; width: 1.5em; height: 1.5em;
  border-radius: 50%; background: rgba(255,209,102,.22); border: 1px solid rgba(255,209,102,.55);
  vertical-align: middle; transition: transform .12s, background .15s; }
.end-auto { display: block; opacity: .6; font-size: .82em; margin-top: .1rem; }

/* v10.61 — Bandeau d'état "chaud" du conseil (en cours / heure arrivée) */
.clive { border-radius: 16px; padding: .85rem 1rem; margin-bottom: .8rem; text-align: center;
  color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18); animation: clivePulse 1.5s ease-in-out infinite; }
.clive-title { font-size: 1.18rem; font-weight: 900; letter-spacing: .01em; line-height: 1.2; }
.clive-sub { font-size: .84rem; font-weight: 600; opacity: .95; margin-top: .2rem; }
/* WAITING : c'est l'heure — orange feu, pulsation franche (il faut réagir vite). */
.clive-wait { background: linear-gradient(122deg, #ff4f1a, #ff8a3d); animation-name: cliveWaitPulse; }
@keyframes cliveWaitPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(255,120,40,.28); }
  50% { transform: scale(1.025); box-shadow: 0 12px 34px rgba(255,120,40,.5); }
}
/* RUNNING : conseil en cours — cran au-dessus. Rouge braise, halo animé, léger tremblement,
   liseré lumineux qui balaie : urgence absolue (mais maîtrisée). */
.clive-run { position: relative; overflow: hidden;
  background: linear-gradient(122deg, #e01f00, #ff5a1f 60%, #ff8a3d);
  border: 2px solid rgba(255,255,255,.35);
  animation-name: cliveRunPulse; animation-duration: 1s; }
.clive-run .clive-title { font-size: 1.32rem; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.clive-run::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); animation: cliveSweep 2.2s linear infinite; }
@keyframes cliveRunPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(224,31,0,.4); }
  50% { transform: scale(1.03); box-shadow: 0 14px 42px rgba(255,60,0,.65); }
}
@keyframes cliveSweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .clive { animation: none; }
  .clive-run::before { animation: none; display: none; }
}

/* v10.62 — Bandeau "je suis prêt" : vert rassurant, pulsation douce */
.clive-ready { background: linear-gradient(122deg, #12a150, #4ec97a); animation-name: cliveReadyPulse; animation-duration: 2.4s; }
@keyframes cliveReadyPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(30,161,80,.28); }
  50% { transform: scale(1.008); box-shadow: 0 8px 24px rgba(30,161,80,.36); }
}
.clive-note { display: block; opacity: .9; font-weight: 500; font-size: .78rem; margin-top: .3rem; line-height: 1.5; }

/* v10.63 — Section date de fin déroulante sous la vignette */
.enddate-drawer { margin-top: .6rem; }
.enddate-drawer .enddate-box { margin: 0; }

/* v10.64 — Récap cadeau/gage sur la page résultats */
.card-rewards { display: flex; flex-direction: column; gap: .5rem; }
.reward-line { padding: .6rem .75rem; border-radius: 12px; font-size: .92rem; }
.reward-prize { background: linear-gradient(120deg, rgba(255,209,102,.18), rgba(255,179,71,.12)); border: 1px solid rgba(255,179,71,.4); }
.reward-gage { background: rgba(120,120,140,.1); border: 1px solid rgba(120,120,140,.25); }

/* v10.65 — ⚖️ Départage (tie-break) */
.tb-card { text-align: center; }
.tb-head { font-size: 1.3rem; font-weight: 900; margin-bottom: .4rem;
  background: linear-gradient(120deg, var(--flame), #ff8a3d); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.tb-sub { font-size: .92rem; margin: .3rem 0 .6rem; }
.tb-tied-chip { display: inline-block; background: var(--line); border-radius: 999px;
  padding: .2rem .6rem; font-weight: 700; font-size: .84rem; margin: .1rem; }
.tb-crit { font-size: 1rem; margin: .5rem 0; }
.tb-crit-big { font-size: 1.35rem; font-weight: 800; margin: .6rem 0 1rem; }
.tb-choices { display: flex; flex-direction: column; gap: .55rem; margin: .8rem 0; }
.tb-choice { padding: .85rem 1rem; border-radius: 14px; border: 2px solid var(--flame);
  background: var(--surface); font-size: 1.05rem; font-weight: 700; cursor: pointer;
  transition: transform .12s, background .15s, color .15s; }
.tb-choice:hover { transform: translateY(-2px) scale(1.02); background: var(--grad-fire, linear-gradient(120deg,#ff4f1a,#ff8a3d)); color: #fff; }
.tb-wait { font-size: .95rem; font-weight: 700; margin: .7rem 0; }
.tb-spinner { font-size: 2rem; animation: tbPulse 1.1s ease-in-out infinite; }
@keyframes tbPulse { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.25); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tb-spinner { animation: none; } }

/* v10.66 — Points négatifs (barème signé) */
.rank-pts-neg { color: #c2255c; font-weight: 800; }

/* v10.67 — Téléchargement de l'album */
.dl-photos { display: inline-block; margin: .5rem 0 .2rem; text-decoration: none; }
.dl-photos[disabled] { opacity: .5; cursor: not-allowed; }
a.dl-photos { text-align: center; }
.dl-note { margin: .1rem 0 .4rem; }

/* v10.68 — Note barème dans le Totem */
.totem-bareme { margin: .1rem 0 .6rem; opacity: .8; }

/* v10.69 — Détail du calcul par critère (lisibilité du barème) */
.detail-formula { font-size: .78rem; color: var(--ink-2); background: rgba(0,0,0,.03);
  border-radius: 8px; padding: .35rem .5rem; margin: .3rem 0 .5rem; }
.mini-table .calc-cell { font-family: ui-monospace, monospace; font-size: .82rem; color: var(--ink-2); white-space: nowrap; }

/* v10.70 — Flèches de navigation du diaporama */
.slide-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 60;
  width: 3rem; height: 4.5rem; border: none; border-radius: 12px;
  background: rgba(0,0,0,.35); color: #fff; font-size: 2.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .15s; }
.slide-nav:hover, .slide-nav:active { background: rgba(0,0,0,.6); }
.slide-prev { left: .4rem; }
.slide-next { right: .4rem; }
@media (min-width: 600px) { .slide-nav { width: 3.5rem; height: 5.5rem; font-size: 3rem; } }

/* v10.71 — Tableau du détail des points (colonnes gain / socle / perte) */
.detail-help { font-size: .82rem; background: rgba(255,209,102,.12);
  border: 1px solid rgba(255,179,71,.3); border-radius: 10px; padding: .5rem .65rem; margin: .2rem 0 .8rem; }
.mini-table-wrap { overflow-x: auto; }
.calc-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.calc-table th, .calc-table td { padding: .4rem .5rem; text-align: center; }
.calc-table th { font-size: .74rem; line-height: 1.25; font-weight: 700; vertical-align: bottom; }
.calc-table th small, .calc-table td small { font-weight: 400; opacity: .7; font-size: .82em; }
.calc-table td:first-child, .calc-table th:first-child { text-align: left; }
.calc-table tr:not(:first-child) { border-top: 1px solid var(--line); }
.col-fav { color: #1a8a4a; background: rgba(30,161,80,.07); }
.col-def { color: #c2255c; background: rgba(194,37,92,.07); }
.col-base { color: var(--ink-2); }
.score-cell { font-size: 1.05rem; }
.score-cell b { color: var(--flame); }

/* v10.72 — Rappel cadeau/gage sous la ligne "dernier conseil" */
.last-winner-rewards { flex-basis: 100%; width: 100%; font-size: .82rem; color: var(--ink-2);
  margin: .1rem 0 0; padding: .35rem .5rem; background: rgba(255,209,102,.14);
  border-radius: 8px; line-height: 1.5; box-sizing: border-box; }

/* v10.73 — Édition admin des cadeaux/gages par conseil */
.rw-list { display: flex; flex-direction: column; gap: .7rem; margin: .6rem 0 1rem; max-height: 60vh; overflow-y: auto; }
.rw-row { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem;
  display: flex; flex-direction: column; gap: .45rem; }
.rw-date { font-size: .92rem; }
.rw-field { display: flex; flex-direction: column; font-size: .8rem; gap: .2rem; color: var(--ink-2); }
.rw-field input { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; }
.rw-row .btn-mini { align-self: flex-end; }

/* v10.74 — Critères mystères */
.ncrit-mystery { background: linear-gradient(135deg, #6d5bd0, #a06bd6); color: #fff;
  font-weight: 700; letter-spacing: .05em; border: 1px dashed rgba(255,255,255,.5); }
.mystery-grp { margin-top: .5rem; }
.mystery-note { flex-basis: 100%; width: 100%; font-size: .78rem; color: var(--ink-2);
  margin-top: .35rem; font-style: italic; }

/* 🎭 Overlay CINÉMATIQUE de révélation d'un critère mystère (2 phases) */
.myst-pop { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center;
  justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #2c1b52 0%, #150c2e 55%, #0a0618 100%);
  animation: mystFade .35s ease; }
.myst-pop::before { content: ''; position: absolute; inset: -50%;
  background-image: radial-gradient(2px 2px at 22% 30%, rgba(255,255,255,.7) 0, transparent 60%),
    radial-gradient(1.6px 1.6px at 68% 18%, rgba(255,255,255,.55) 0, transparent 60%),
    radial-gradient(2.4px 2.4px at 82% 62%, rgba(255,255,255,.6) 0, transparent 60%),
    radial-gradient(1.4px 1.4px at 36% 74%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(2px 2px at 54% 50%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1.8px 1.8px at 12% 58%, rgba(255,255,255,.5) 0, transparent 60%);
  animation: mystDrift 9s linear infinite; }
.myst-pop.myst-flash::after { content: ''; position: absolute; inset: 0; background: #fff;
  animation: mystWhite .5s ease forwards; pointer-events: none; }
.myst-pop.myst-out { animation: mystFade .5s ease reverse forwards; }
.myst-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.myst-stage { position: relative; z-index: 3; text-align: center; }
.myst-hidden { display: none !important; }

/* Phase 1 — suspense */
.myst-q { font-size: 6rem; line-height: 1; color: #cbb6ff;
  text-shadow: 0 0 30px rgba(160,107,214,.9), 0 0 80px rgba(109,91,208,.6);
  animation: mystPulse .7s ease-in-out infinite alternate; }
.myst-tease { margin-top: 1rem; color: #e8ddff; font-size: 1.15rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; }
.myst-dots i { opacity: 0; animation: mystDot 1.2s infinite; font-style: normal; }
.myst-dots i:nth-child(2) { animation-delay: .2s; }
.myst-dots i:nth-child(3) { animation-delay: .4s; }

/* Phase 2 — révélation */
.myst-phase2 { position: relative; animation: mystBoom .6s cubic-bezier(.2,1.5,.35,1); }
.myst-halo { position: absolute; inset: -46px; border-radius: 50%; filter: blur(2px); z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 20deg, rgba(255,255,255,.35) 30deg,
    transparent 60deg 110deg, rgba(255,255,255,.28) 125deg, transparent 150deg 200deg,
    rgba(255,255,255,.32) 215deg, transparent 245deg 300deg, rgba(255,255,255,.3) 315deg, transparent 345deg);
  animation: mystSpinSlow 5s linear infinite; }
.myst-card2 { border-radius: 26px; padding: 2rem 2.6rem; max-width: 84vw;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.15) inset,
    0 0 60px rgba(160,107,214,.35); color: #fff; }
.myst-p2-pos .myst-card2 { background: linear-gradient(155deg, #1a8a4a, #35c26e 60%, #7ee08a); }
.myst-p2-neg .myst-card2 { background: linear-gradient(155deg, #a4133c, #d63a6a 60%, #ff758f); }
.myst-tag { font-size: .95rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  opacity: .95; margin-bottom: .5rem; }
.myst-emoji2 { font-size: 4.6rem; line-height: 1; margin: .25rem 0;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); animation: mystSpin .65s ease; }
.myst-name2 { font-size: 2rem; font-weight: 900; letter-spacing: .01em; margin-top: .2rem;
  text-shadow: 0 3px 12px rgba(0,0,0,.35); }

@keyframes mystFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mystDrift { from { transform: translate(0,0); } to { transform: translate(-6%, -4%); } }
@keyframes mystPulse { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.14) rotate(4deg); } }
@keyframes mystDot { 0%,60% { opacity: 0; } 30% { opacity: 1; } }
@keyframes mystWhite { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes mystBoom { 0% { transform: scale(.2) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes mystSpinSlow { to { transform: rotate(360deg); } }
@keyframes mystSpin { from { transform: rotate(-200deg) scale(.3); } to { transform: rotate(0) scale(1); } }
.spath-myst { background: linear-gradient(135deg, #6d5bd0, #a06bd6); color: #fff; }
.spath-myst .myst-lbl { font-style: italic; opacity: .9; }

/* v10.75 — Note mystère (hors groupe) */
.next-crits > .mystery-note { font-size: .78rem; color: var(--ink-2); font-style: italic; margin-top: .5rem; }
.tag-myst { background: linear-gradient(135deg, #6d5bd0, #a06bd6); color: #fff; }

/* v10.76 — Mini-révélation mystère intégrée au film de dépouillement */
.tmyst { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center;
  justify-content: center; text-align: center;
  background: radial-gradient(ellipse at 50% 42%, rgba(44,27,82,.96) 0%, rgba(16,9,38,.97) 70%);
  animation: mystFade .3s ease; }
.tmyst.tmyst-out { animation: mystFade .4s ease reverse forwards; }
.tmyst.tmyst-flash::after { content: ''; position: absolute; inset: 0; background: #fff;
  animation: mystWhite .45s ease forwards; pointer-events: none; }
.tmyst-q { font-size: 4.4rem; line-height: 1; color: #cbb6ff;
  text-shadow: 0 0 26px rgba(160,107,214,.9), 0 0 70px rgba(109,91,208,.6);
  animation: mystPulse .7s ease-in-out infinite alternate; }
.tmyst-tease { margin-top: .8rem; color: #e8ddff; font-size: 1rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }
.tmyst-p2 { animation: mystBoom .55s cubic-bezier(.2,1.5,.35,1); }
.tmyst-card { padding: 1.4rem 1.9rem; }
.tmyst-card .myst-emoji2 { font-size: 3.4rem; }
.tmyst-card .myst-name2 { font-size: 1.5rem; }

/* v10.77 — Bulletins du dépouillement (sortie d'urne un par un) */
.tally-bulletin { margin-top: .45rem; font-size: .92rem; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: .4rem .7rem;
  display: inline-block; animation: tbSlide .35s cubic-bezier(.2,1.2,.4,1); }
.tally-bulletin.tb-socle { background: rgba(255,209,102,.16); border-color: rgba(255,209,102,.35);
  margin-top: calc(.45rem + 20px); }
.tb-pick { white-space: nowrap; }
@keyframes tbSlide { from { transform: translateY(14px) rotate(-2deg); opacity: 0; }
  to { transform: translateY(0) rotate(0); opacity: 1; } }

/* v10.78 — Urne visible + tickets de dépouillement */
.urn-zone { display: flex; align-items: flex-start; justify-content: center; gap: .6rem;
  width: min(92vw, 480px); margin: .2rem 0 .6rem; min-height: 84px; }
.urn-side { flex: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.urn-left { align-items: flex-end; }
.urn-right { align-items: flex-start; }
.urn-box { font-size: 2.6rem; line-height: 1; padding-top: .1rem; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.urn-box.urn-shake { animation: urnShake .45s ease; }
.urn-ticket { font-size: .8rem; padding: .3rem .55rem; border-radius: 9px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.urn-ticket .avatar-img { width: 1.05em; height: 1.05em; border-radius: 50%; vertical-align: -0.18em; object-fit: cover; }
.urn-ticket:nth-child(2) { opacity: .55; transform: scale(.94); }
.urn-ticket:nth-child(3) { opacity: .3; transform: scale(.88); }
.ut-fav { background: linear-gradient(135deg, #1a8a4a, #35c26e); color: #fff; }
.ut-def { background: linear-gradient(135deg, #a4133c, #d63a6a); color: #fff; }
.ut-l { animation: flyL .5s cubic-bezier(.2,1.2,.4,1); }
.ut-r { animation: flyR .5s cubic-bezier(.2,1.2,.4,1); }
@keyframes flyL { from { transform: translateX(70px) translateY(10px) scale(.3) rotate(8deg); opacity: 0; }
  to { transform: translateX(0) translateY(0) scale(1) rotate(0); opacity: 1; } }
@keyframes flyR { from { transform: translateX(-70px) translateY(10px) scale(.3) rotate(-8deg); opacity: 0; }
  to { transform: translateX(0) translateY(0) scale(1) rotate(0); opacity: 1; } }
@keyframes urnShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.06); }
  60% { transform: rotate(7deg) scale(1.03); } }
.tally-critnum { background: rgba(255,255,255,.16); color: #fff; font-weight: 800; }

/* v10.79 — Pages de transition du dépouillement */
.tally-intro { position: absolute; inset: 0; z-index: 28; display: flex; align-items: center;
  justify-content: center; text-align: center; color: #fff;
  background: radial-gradient(ellipse at 50% 42%, rgba(60,32,14,.97) 0%, rgba(18,12,8,.98) 70%);
  animation: mystFade .3s ease; }
.tally-intro.ti-sect, .tally-intro.ti-last {
  background: radial-gradient(ellipse at 50% 42%, rgba(44,27,82,.97) 0%, rgba(16,9,38,.98) 70%); }
.tally-intro.ti-out { animation: mystFade .35s ease reverse forwards; }
.ti-inner { animation: tiPop .5s cubic-bezier(.2,1.3,.4,1); padding: 1rem; }
.ti-num { font-size: .95rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  opacity: .8; margin-bottom: .5rem; }
.ti-emoji { font-size: 4rem; line-height: 1; margin: .2rem 0 .4rem;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.ti-emoji.ti-pulse { animation: mystPulse .7s ease-in-out infinite alternate; }
.ti-name { font-size: 1.7rem; font-weight: 900; line-height: 1.2; }
.ti-sens { margin-top: .55rem; font-size: .95rem; opacity: .9; }
.ti-pos { color: #7ee08a; } .ti-neg { color: #ff8fa8; }
@keyframes tiPop { from { transform: scale(.6) translateY(16px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; } }

/* Bulletin GÉANT (dernier critère) */
.urn-bigshot { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  z-index: 26; background: rgba(10,8,20,.92); border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px; padding: 1rem 1.4rem; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: bsPop .45s cubic-bezier(.2,1.4,.4,1); }
.urn-bigshot.bs-out { animation: bsSplit .4s ease forwards; }
@keyframes bsSplit { 0% { opacity: 1; transform: translate(-50%, 0) scaleX(1) scaleY(1); }
  55% { opacity: .8; transform: translate(-50%, 2px) scaleX(1.22) scaleY(.85); }
  100% { opacity: 0; transform: translate(-50%, 6px) scaleX(1.6) scaleY(.45); } }
.urn-bigshot.bs-final { border-color: #ffd166; box-shadow: 0 0 60px rgba(255,209,102,.35), 0 20px 60px rgba(0,0,0,.6); }
.bs-tag { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  opacity: .8; color: #ffd166; margin-bottom: .4rem; }
.bs-line { font-size: 1.25rem; font-weight: 800; color: #fff; margin: .25rem 0; white-space: nowrap; }
.bs-line .avatar-img { width: 1.1em; height: 1.1em; border-radius: 50%; vertical-align: -0.2em; object-fit: cover; }
.bs-fav b { color: #7ee08a; } .bs-def b { color: #ff8fa8; }
@keyframes bsPop { from { transform: translate(-50%,-50%) scale(.3) rotate(-5deg); opacity: 0; }
  to { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 1; } }

/* v10.80 — Fondus & lissage des transitions du film */
.tally-crit.crit-swap { animation: critSwap .38s ease; }
@keyframes critSwap { from { opacity: .15; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.tally-bulletin.tb-drum { background: rgba(255,209,102,.2); border-color: rgba(255,209,102,.5);
  animation: tbSlide .35s cubic-bezier(.2,1.2,.4,1), drumPulse .5s ease-in-out .35s infinite alternate; }
@keyframes drumPulse { from { transform: scale(1); } to { transform: scale(1.05); } }
/* Adoucir l'apparition/disparition des tickets latéraux (déjà animés à l'entrée) */
.urn-ticket { transition: opacity .3s, transform .3s; }
/* 🎬 Dépouillement : titre + bandeau remontés en HAUT de page ; un espace « scène »
   est réservé au-dessus de l'urne, où le GROS bulletin apparaît (jamais sur les lignes
   de scores en dessous, ni sur le bandeau au-dessus). */
.tally-backdrop.tally-top { justify-content: flex-start; padding-top: 3.5vh; }
/* Espace « scène » : dimensionné pour la plus GRANDE carte (🥁 ULTIME BULLETIN :
   tag + 2 lignes + padding ≈ 8 rem) afin qu'aucun bulletin ne touche le bandeau. */
.tally-top .urn-zone { margin-top: 8.6rem; }
.urn-zone { position: relative; }
.urn-bigshot { position: absolute; left: 50%; bottom: calc(100% + 16px); top: auto;
  transform: translate(-50%, 0); padding: .8rem 1.15rem; }
.urn-bigshot .bs-line { font-size: 1.15rem; }
.urn-bigshot .bs-tag { font-size: .72rem; }
@keyframes bsPop { from { transform: translate(-50%, 12px) scale(.3) rotate(-5deg); opacity: 0; }
  to { transform: translate(-50%, 0) scale(1) rotate(0); opacity: 1; } }

/* v10.81 — Décomposition du gros bulletin en mini-bulletins (glow de naissance) */
.urn-ticket.ut-born.ut-fav { animation-name: flyL, bornGlowFav; animation-duration: .5s, 1s; }
.urn-ticket.ut-born.ut-def { animation-name: flyR, bornGlowDef; animation-duration: .5s, 1s; }
.ut-l.ut-born.ut-def { animation-name: flyL, bornGlowDef; }
.ut-r.ut-born.ut-fav { animation-name: flyR, bornGlowFav; }
@keyframes bornGlowFav { 0% { box-shadow: 0 0 22px rgba(126,224,138,.95); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,.35); } }
@keyframes bornGlowDef { 0% { box-shadow: 0 0 22px rgba(255,143,168,.95); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,.35); } }

/* v10.83 — Numérotations (gros bulletin + révélation mystère) */
.myst-num { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  opacity: .75; margin-bottom: .3rem; }

/* v10.84 — Pause du dépouillement + badge mystère sur l'annonce */
.tally-btns { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: .6rem; }
.tally-btns .tally-skip { margin-top: 0; }
.tally-skip.tally-paused { background: rgba(255,209,102,.2); border-color: rgba(255,209,102,.6); color: #ffd166; }
.ti-mystbadge { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #6d5bd0, #a06bd6);
  border: 1px dashed rgba(255,255,255,.5); border-radius: 999px; padding: .2rem .6rem; margin-bottom: .5rem; }

/* v10.84 — Gros tambour animé avant l'ultime bulletin */
.urn-drumbig { position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%);
  font-size: 3.4rem; line-height: 1; z-index: 26; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5));
  animation: drumBigShake .3s ease-in-out infinite alternate; }
.urn-drumbig.bs-out { animation: mystFade .3s ease reverse forwards; }
@keyframes drumBigShake { from { transform: translateX(-50%) rotate(-9deg) scale(1); }
  to { transform: translateX(-50%) rotate(9deg) scale(1.12); } }

/* v10.85 — Note de départage ⚖️ */
.tb-note { font-size: .72rem; background: rgba(109,91,208,.14); color: #6d5bd0;
  border: 1px dashed rgba(109,91,208,.4); border-radius: 6px; padding: .05rem .35rem;
  white-space: nowrap; }

/* v10.86 — 📤 Bandeau d'envoi de photos persistant */
.upq-banner { position: fixed; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 1200; background: rgba(30,22,14,.94); color: #fff;
  border: 1px solid rgba(255,209,102,.5); border-radius: 999px; padding: .45rem .95rem;
  font-size: .85rem; box-shadow: 0 8px 30px rgba(0,0,0,.4); white-space: nowrap; }
.upq-banner .upq-fail { color: #ff8fa8; }

/* 📅 Sections par jour + rail timeline vertical */
.photo-days-wrap { position: relative; }
.photo-day { margin-bottom: 1rem; scroll-margin-top: 70px; }
/* En-tête de jour : simple séparateur dans le flux (le sticky gardait l'ancienne date
   collée en haut de l'écran) ; la date COURANTE est portée par la bulle du rail. */
.photo-day-head { padding: .45rem .2rem; font-size: .95rem;
  border-bottom: 2px solid rgba(255,106,43,.35); margin-bottom: .5rem; }
/* (Le rail vertical de dates a été retiré : la bulle de date au défilement suffit.) */

/* 🗺️ Carte des photos */
.pmap-overlay { position: fixed; inset: 0; z-index: 2000; background: #14100d;
  display: flex; flex-direction: column; }
.pmap-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .7rem calc(.55rem + 0px); color: #fff; flex-wrap: wrap; }
.pmap-actions { display: flex; gap: .4rem; }
.pmap-map { flex: 1; min-height: 0; }
.pmap-hint { margin: 0; padding: .45rem .7rem calc(.45rem + env(safe-area-inset-bottom, 0px));
  color: rgba(255,255,255,.65); font-size: .78rem; text-align: center; }
.pmap-thumb-wrap { background: none; border: none; }
.pmap-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px;
  border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.45); }

/* v10.87 — Bulle de date pendant le défilement + point actif du rail */
.rail-bubble { position: fixed; right: .6rem; top: 50%; transform: translateY(-50%);
  z-index: 41; background: rgba(30,22,14,.92); color: #fff; font-size: .82rem; font-weight: 700;
  padding: .4rem .7rem; border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .25s; white-space: nowrap; }
.rail-bubble.on { opacity: 1; }


/* v10.88 — Poignée de défilement tactile + sélection multiple + filtre utilisateur */
.pscrub-thumb { position: fixed; right: 0; top: 0; z-index: 42; width: 34px; height: 64px;
  display: flex; align-items: center; justify-content: center; touch-action: none;
  background: rgba(255,106,43,.85); color: #fff; font-size: 1rem; letter-spacing: -1px;
  border-radius: 12px 0 0 12px; box-shadow: 0 4px 16px rgba(0,0,0,.3); cursor: grab;
  user-select: none; }
.pscrub-thumb.grab { background: #ff6a2b; width: 42px; cursor: grabbing; }
.rail-bubble { transform: translateY(-50%); right: 3rem; }

/* Sélection par appui long (badge visible seulement quand une sélection est active) */
.photo-card { position: relative; }
.photo-card img { -webkit-touch-callout: none; user-select: none; }
.photo-card.psel-on { outline: 3px solid #ff6a2b; outline-offset: -3px; border-radius: 12px; }
.psel-badge { position: absolute; top: .25rem; right: .25rem; font-size: 1rem; line-height: 1;
  border: none; background: rgba(0,0,0,.35); border-radius: 8px; padding: .18rem .22rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); cursor: pointer; opacity: .75; }
body.sel-active .psel-badge, .photo-card.psel-on .psel-badge { opacity: 1; }
.chip-trash:disabled { opacity: .4; }
.chip-trash:not(:disabled) { background: #ffe3e8; color: #c2255c; border-color: #c2255c; font-weight: 700; }

.photo-user-sel { appearance: none; -webkit-appearance: none; padding-right: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b4531f'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center; max-width: 46vw;
  text-overflow: ellipsis; }

/* v10.90 — 👯 Mode doublons */
.photo-card.dup-copy { outline: 3px dashed #9b59d0; outline-offset: -3px; border-radius: 12px; }
.photo-card.dup-orig { outline: 3px solid #2fa36b; outline-offset: -3px; border-radius: 12px; }
.dup-tag { position: absolute; top: .25rem; left: .25rem; z-index: 2; font-size: .62rem;
  font-weight: 800; color: #fff; padding: .14rem .4rem; border-radius: 999px;
  pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.dup-tag.copy { background: #9b59d0; }
.dup-tag.orig { background: #2fa36b; }

/* v10.91 — ☑️ Tout : visible uniquement pendant une sélection (n'encombre pas les chips) */
/* Barre de SÉLECTION : toujours visible, boutons actifs/inactifs selon la sélection. */
.psel-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap; background: rgba(255,106,43,.06); border: 1px solid rgba(255,106,43,.3);
  border-radius: 12px; padding: .5rem .6rem; margin: .1rem 0 .7rem; }
.psel-bar-pick, .psel-bar-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.psel-bar .chip:disabled { opacity: .38; }
.chip-share:not(:disabled) { background: #e7f8ee; color: #1c7a44; border-color: #1c7a44; font-weight: 700; }
.chip-dlsel:not(:disabled) { background: #e3f2ff; color: #1864ab; border-color: #1864ab; font-weight: 700; }
.chip-trash:not(:disabled) { background: #ffe3e8; color: #c2255c; border-color: #c2255c; font-weight: 700; }
.sec-kicker-sub { margin-top: .8rem; }

/* v10.92 — 👯 Barre dédiée au mode doublons + chip compact */
.chip-dup { background: rgba(155,89,208,.12); color: #7a3fb0; border-color: rgba(155,89,208,.45); font-weight: 700; }
.dup-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap; background: rgba(155,89,208,.08); border: 1px solid rgba(155,89,208,.35);
  border-radius: 12px; padding: .5rem .7rem; }
.dup-bar-txt { font-size: .85rem; }
.dup-leg { font-size: .72rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; color: #fff; }
.dup-leg.orig { background: #2fa36b; }
.dup-leg.copy { background: #9b59d0; }
.dup-bar-actions { display: flex; gap: .35rem; flex-wrap: wrap; }


/* v10.93 — ⬇️ Téléchargement individuel sous chaque photo */
.btn-dl { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-dl:disabled, button.btn-dl[disabled] { opacity: .35; cursor: not-allowed; }

/* v10.94 — 🤔 Doublons « ressemblants » (proposition) */
.photo-card.dup-maybe { outline: 3px dashed #e8933a; outline-offset: -3px; border-radius: 12px; }
.dup-tag.maybe { background: #e8933a; }
.dup-leg.maybe { background: #e8933a; }

/* v10.95 — ⛶ Plein écran du diaporama */
.slide-fs { position: absolute; top: calc(.7rem + env(safe-area-inset-top, 0px)); right: .8rem;
  z-index: 5; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.25rem; border-radius: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slide-fs:active { background: rgba(255,255,255,.25); }

/* v10.96 — Section 📥 Téléchargements unifiée (album complet vs sélection) */
.dl-zone { border: 1px solid var(--line); border-radius: 12px; padding: .2rem .7rem;
  margin: .1rem 0 .5rem; }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  padding: .55rem 0; }
.dl-row + .dl-row { border-top: 1px dashed var(--line); }
.dl-lbl { font-size: .88rem; line-height: 1.3; min-width: 0; }
.dl-lbl small { font-size: .72rem; }
.dl-row .dl-photos { margin: 0; flex: 0 0 auto; white-space: nowrap; }

/* v10.97 — Ligne Nextcloud : bouton d'envoi + réglages */
.dl-nc-btns { display: flex; gap: .3rem; flex: 0 0 auto; }

/* v10.98 — Ligne Nextcloud non configurée (discrète) */
.dl-row-mini { opacity: .85; }
.dl-row-mini .dl-lbl { font-size: .82rem; }

/* v10.99 — Section Téléchargements : sous-titres compacts (surtout sur mobile) */
.dl-zone { padding: .1rem .6rem; }
.dl-row { padding: .45rem 0; }
.dl-lbl { font-size: .84rem; }
.dl-lbl small { font-size: .68rem; display: block; line-height: 1.25;
  overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .dl-lbl { font-size: .8rem; line-height: 1.2; }
  .dl-lbl small { font-size: .63rem; line-height: 1.2; }
  .dl-row { padding: .38rem 0; gap: .45rem; }
  .dl-row .dl-photos { font-size: .74rem; padding: .3rem .5rem; }
  .dl-nc-btns { gap: .25rem; }
}

/* v10.100 — Bouton d'interruption dans le bandeau de progression */
.upq-x { margin-left: .5rem; border: none; background: rgba(255,255,255,.18); color: #fff;
  border-radius: 6px; padding: .05rem .35rem; font-size: .8rem; cursor: pointer; }
.upq-x:active { background: rgba(255,255,255,.35); }

/* v10.101 — Zone Téléchargements verrouillée pendant une sauvegarde cloud */
body.nc-busy .dl-zone { opacity: .6; }
body.nc-busy .dl-zone a.dl-photos { pointer-events: none; opacity: .45; }
body.nc-busy .dl-zone .dl-row:last-child { opacity: 1; }

/* v10.102 — État de la dernière sauvegarde cloud */
.dl-lastsync { padding: .25rem 0 .35rem; }
.dl-lastsync small { font-size: .68rem; color: var(--muted); line-height: 1.25;
  display: block; overflow-wrap: anywhere; }

/* v10.103 — Bandeau « vacances terminées » sur la page Comptes */
.acc-closed { display: flex; align-items: flex-start; gap: .7rem;
  background: linear-gradient(135deg, rgba(255,106,43,.14), rgba(255,209,102,.18));
  border: 2px solid rgba(255,106,43,.55); border-left-width: 6px;
  border-radius: 14px; padding: .8rem .9rem; margin: .6rem 0 1rem;
  box-shadow: 0 6px 18px rgba(255,106,43,.15); }
.acc-closed-ico { font-size: 1.6rem; line-height: 1; flex: 0 0 auto;
  animation: accFlag 2.6s ease-in-out infinite; }
.acc-closed-txt { min-width: 0; font-size: .93rem; line-height: 1.4; }
.acc-closed-sub { margin-top: .3rem; font-size: .82rem; color: var(--ink-2); }
@keyframes accFlag { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-14deg); }
  96% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .acc-closed-ico { animation: none; } }