/* Winkrew V1 — composants Wink* et écrans. Mobile-first, 320 → 480 px centrés sur grand écran. */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* pas de gonflement du texte à la rotation ; les réglages d'agrandissement du texte restent appliqués */
/* Zoom involontaire (pincement, double tap) bloqué sur les zones d'interface : défilement vertical/horizontal conservé (carrousels, listes, modales).
   Volontairement pas sur html/body : la visionneuse (#viewer) doit garder son propre zoom, et touch-action se cumule avec les ancêtres. */
#app, #nav, #modal { touch-action: pan-x pan-y; }
body { margin: 0; background: var(--wk-green-900); color: var(--wk-ink); font-family: var(--wk-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
img { max-width: 100%; }

/* ---------- Coquille ---------- */
#app { min-height: 100%; }
.screen { min-height: 100vh; min-height: 100dvh; margin: 0 auto; max-width: var(--wk-max); display: flex; flex-direction: column; padding: 0 20px calc(var(--wk-nav-h) + var(--wk-sab) + 24px); position: relative; }
.screen.no-nav { padding-bottom: calc(28px + var(--wk-sab)); }
.screen.dark { background: var(--wk-grad-dark); color: var(--wk-white); }
.screen.orange { background: var(--wk-grad-accent); color: var(--wk-white); }
.screen.light { background: var(--wk-paper); color: var(--wk-ink); }
.screen.photo { background: var(--wk-green-900) url('../assets/photos/welcome.jpg') center bottom / auto 135% no-repeat; } /* image remontée : les quatre personnes et le téléphone restent visibles au-dessus des boutons */
@media (min-aspect-ratio: 3/4) { .screen.photo { background-size: cover; background-position: center 70%; } }
.screen.photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,50,60,.45) 0%, rgba(0,50,60,.10) 30%, rgba(0,50,60,.35) 62%, rgba(0,50,60,.92) 84%); pointer-events: none; }
.screen.photo > * { position: relative; }
@media (min-width: 520px) { body { background: var(--wk-page-bg); } .screen { box-shadow: 0 0 0 1px rgba(255,255,255,.06); } }
.safe-top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }

/* ---------- Typo ---------- */
.t-display { font-family: var(--wk-display); font-weight: 400; letter-spacing: .002em; line-height: 1.05; text-wrap: balance; }
h1, h2, h3 { margin: 0; font-family: var(--wk-display); font-weight: 400; line-height: 1.08; text-wrap: balance; }
h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 19px; }
.question { font-family: var(--wk-display); font-size: 27px; line-height: 1.18; color: var(--wk-green-700); text-wrap: balance; }
.dark .question { color: var(--wk-white); }
@media (min-width: 400px) { .question { font-size: 30px; } }
.lead { font-size: 15px; color: var(--wk-muted); }
.dark .lead { color: rgba(255,255,255,.72); }
.small { font-size: 13px; } .tiny { font-size: 12px; } .muted { color: var(--wk-muted); } .dark .muted { color: rgba(255,255,255,.6); }
.center { text-align: center; } .bold { font-weight: 700; } .orange { color: var(--wk-orange-500); } .green { color: var(--wk-green-700); }
.script { font-family: var(--wk-display); color: var(--wk-orange-300); font-size: 30px; line-height: 1; }
.stack { display: flex; flex-direction: column; gap: var(--wk-gap); } .stack.tight { gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; } .row.between { justify-content: space-between; } .grow { flex: 1; min-width: 0; } .wrap { flex-wrap: wrap; }
.section-title { font-family: var(--wk-display); font-size: 20px; color: var(--wk-ink); display: flex; align-items: baseline; justify-content: space-between; }
.section-title .link { font-family: var(--wk-body); font-size: 13px; font-weight: 600; color: var(--wk-orange-700); }
.sp { height: 8px; }

/* ---------- WinkTopBar ---------- */
.topbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 56px; margin: 0 -4px; }
.topbar .ttl { text-align: center; font-family: var(--wk-display); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.iconbtn svg { width: 22px; height: 22px; }
.light .iconbtn:active, .dark .iconbtn:active { background: rgba(0,0,0,.06); }
.dark .iconbtn:active { background: rgba(255,255,255,.12); }

/* ---------- WinkButton ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--wk-r-pill); font-family: var(--wk-body); font-weight: 700; font-size: 16px; height: 54px; padding: 0 26px; transition: transform .08s ease, opacity .15s, background .15s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--wk-orange-500); color: var(--wk-white); box-shadow: 0 8px 20px var(--wk-accent-glow); }
.btn.primary:hover { background: var(--wk-accent-hover); }
.btn.secondary { background: var(--wk-green-fill); color: var(--wk-white); }
.btn.ghost { background: transparent; color: var(--wk-white); border: 2px solid rgba(255,255,255,.55); }
.light .btn.ghost { color: var(--wk-green-700); border-color: var(--wk-green-700); }
.btn.soft { background: var(--wk-orange-100); color: var(--wk-orange-700); }
.btn.white { background: var(--wk-surface); color: var(--wk-green-700); box-shadow: var(--wk-shadow); }
.btn.block { width: 100%; }
.btn.sm { height: 44px; font-size: 14px; padding: 0 16px; }
.btn.xs { height: 36px; min-height: 36px; font-size: 12px; padding: 0 12px; }
.btn.big { height: 60px; font-size: 18px; }
.btn.display { font-family: var(--wk-display); font-weight: 400; font-size: 22px; }
.btn.loading { opacity: .8; }
.btn.loading::before { content: ''; width: 16px; height: 16px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { font-weight: 600; font-size: 14px; color: var(--wk-orange-300); text-decoration: underline; text-underline-offset: 3px; }
.light .linkbtn { color: var(--wk-orange-700); }
.linkbtn.plain { text-decoration: none; }
.cta-bottom { margin-top: auto; padding-top: 20px; }
/* Bouton de validation d'une manche : collé au bas de l'écran visible, AU-DESSUS de la barre de navigation et de la zone de sécurité,
   pour que la commande reste entièrement touchable même quand la question dépasse la hauteur de l'écran (petits téléphones, paysage, texte agrandi). */
.cta-sticky { position: sticky; bottom: calc(var(--wk-nav-h) + var(--wk-sab) + 12px); z-index: 5; margin: 0 -20px; padding: 14px 20px 0; background: linear-gradient(180deg, transparent 0%, var(--wk-paper) 38%); }
.cta-sticky { pointer-events: none; } .cta-sticky .btn { min-height: 56px; pointer-events: auto; } /* le dégradé ne capte pas les touchers : les réponses situées dessous restent atteignables */
.dark .cta-sticky { background: linear-gradient(180deg, transparent 0%, var(--wk-grad-dark-end) 38%); }
.btn.loading::after { content: ' Envoi…'; font-weight: 600; font-size: 14px; }
.btn[disabled], .btn.disabled { opacity: .45; box-shadow: none; }

/* ---------- WinkCard ---------- */
.card { background: var(--wk-surface); border-radius: var(--wk-r-card); box-shadow: var(--wk-shadow); padding: 16px; }
.card.flat { box-shadow: none; border: 1px solid var(--wk-line); }
.card.cream { background: var(--wk-cream); box-shadow: none; }
.card.green { background: var(--wk-green-fill); color: var(--wk-white); }
.card.selectable { cursor: pointer; border: 2px solid transparent; transition: border-color .12s, transform .08s; }
.card.selectable:active { transform: scale(.99); }
.card.selectable.selected { border-color: var(--wk-orange-500); }
.card.dark-card { background: rgba(255,255,255,.08); color: var(--wk-white); box-shadow: none; }

/* ---------- WinkInput ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field .label { font-size: 13px; font-weight: 600; color: var(--wk-muted); }
.dark .field .label { color: rgba(255,255,255,.75); }
.input { height: 50px; border-radius: var(--wk-r-input); border: 1.5px solid var(--wk-line); background: var(--wk-surface); color: var(--wk-ink); padding: 0 16px; width: 100%; outline: none; font-size: 16px; font-weight: 500; }
input, select, textarea { font-size: max(1em, 16px); } /* < 16 px : Safari iPhone zoome au focus */
.input:focus { border-color: var(--wk-orange-500); box-shadow: 0 0 0 3px var(--wk-accent-ring); }
.input::placeholder { color: var(--wk-soft); font-weight: 500; }
.input.error { border-color: var(--wk-error); }
.dark .input { border-color: transparent; }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7C82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
textarea.input { height: auto; min-height: 90px; padding: 12px 16px; resize: vertical; }
.err { color: var(--wk-error); font-size: 13px; font-weight: 600; min-height: 18px; }
.dark .err { color: var(--wk-err-on-dark); }
.ok { color: var(--wk-success); font-size: 13px; font-weight: 600; }
.search { position: relative; }
.search .input { padding-left: 42px; border-radius: var(--wk-r-pill); }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--wk-soft); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmented button { height: 46px; border-radius: var(--wk-r-pill); background: var(--wk-surface); color: var(--wk-ink); font-weight: 600; border: 1.5px solid var(--wk-line); display: flex; align-items: center; justify-content: center; gap: 8px; }
.segmented button.on { background: var(--wk-green-fill); color: var(--wk-white); border-color: var(--wk-green-700); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1.35; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--wk-orange-500); }
.dark .check { color: rgba(255,255,255,.8); }

/* ---------- WinkAvatar / KrewAvatar / WinkTotem ---------- */
.av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--wk-green-100); color: var(--wk-green-700); font-family: var(--wk-display); overflow: hidden; flex: none; position: relative; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.xs { width: 26px; height: 26px; font-size: 11px; } .av.s { width: 36px; height: 36px; font-size: 14px; } .av.m { width: 46px; height: 46px; font-size: 17px; }
.av.l { width: 60px; height: 60px; font-size: 22px; } .av.xl { width: 92px; height: 92px; font-size: 34px; } .av.xxl { width: 120px; height: 120px; font-size: 42px; }
.av.ring { box-shadow: 0 0 0 3px var(--wk-white), 0 0 0 5px var(--wk-orange-500); }
.av.ring-green { box-shadow: 0 0 0 3px var(--wk-white), 0 0 0 5px var(--wk-green-700); }
.av.dim { opacity: .45; filter: grayscale(.6); }
.av.krew { border-radius: 22px; background: var(--wk-cream); }
.av.krew.round { border-radius: 50%; }
.av.krew.xl { border-radius: 28px; }
.av .badge { position: absolute; right: -2px; bottom: -2px; }
.av-stack { display: flex; } .av-stack .av { margin-left: -10px; box-shadow: 0 0 0 2px var(--wk-white); } .av-stack .av:first-child { margin-left: 0; }
.dark .av-stack .av { box-shadow: 0 0 0 2px var(--wk-green-900); }
.totem { width: 100%; aspect-ratio: 1; border-radius: 20px; background: var(--wk-cream); display: flex; align-items: center; justify-content: center; border: 2px solid transparent; font-size: 34px; }
.totem img { width: 100%; height: 100%; display: block; border-radius: 18px; object-fit: contain; padding: 4%; }
.av.totem-av { background: var(--wk-cream); } .av.totem-av img { object-fit: contain; padding: 6%; }
.totem.selected { border-color: var(--wk-orange-500); box-shadow: 0 0 0 3px var(--wk-accent-ring); }
.totem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 360px) { .totem-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- WinkBadge ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--wk-r-pill); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.badge.orange { background: var(--wk-orange-100); color: var(--wk-orange-700); }
.badge.green { background: var(--wk-green-100); color: var(--wk-green-700); }
.badge.solid { background: var(--wk-orange-500); color: var(--wk-white); }
.badge.ghost { background: var(--wk-ghost-bg); color: var(--wk-muted); }
.badge.dot { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; }
.badge.count { position: absolute; top: 4px; right: 8px; background: var(--wk-orange-500); color: #fff; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.pill-emoji { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--wk-cream); font-size: 12px; font-weight: 600; }

/* ---------- WinkUserRow / listes ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.urow { display: flex; align-items: center; gap: 12px; background: var(--wk-surface); border-radius: 18px; padding: 10px 12px; box-shadow: var(--wk-shadow); }
.urow.plain { background: transparent; box-shadow: none; padding: 6px 0; }
.urow .nm { font-weight: 700; font-size: 15px; }
.urow .sub { font-size: 12px; color: var(--wk-muted); }
.urow.dim .nm, .urow.dim .sub { opacity: .55; }
.dark .urow { background: rgba(255,255,255,.08); box-shadow: none; }
.dark .urow .sub { color: rgba(255,255,255,.6); }
.status-ok { color: var(--wk-success); font-weight: 700; font-size: 13px; } .status-wait { color: var(--wk-orange-500); font-weight: 700; font-size: 13px; } .status-skip { color: var(--wk-soft); font-weight: 700; font-size: 13px; }
.dark .status-ok { color: #8FE3B4; } .dark .status-wait { color: var(--wk-orange-300); } .dark .status-skip { color: rgba(255,255,255,.55); }
.checkbox { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--wk-line); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.checkbox.on { background: var(--wk-orange-500); border-color: var(--wk-orange-500); }
.checkbox svg { width: 14px; height: 14px; }

/* ---------- WinkStat ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--wk-surface); border-radius: 18px; padding: 12px 8px; text-align: center; box-shadow: var(--wk-shadow); }
.stat b { display: block; font-family: var(--wk-display); font-size: 26px; color: var(--wk-green-700); line-height: 1; }
.stat span { font-size: 12px; font-weight: 600; color: var(--wk-muted); }

/* ---------- Krew cards ---------- */
.krew-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kcard { border-radius: var(--wk-r-card); padding: 14px; background: var(--wk-surface); box-shadow: var(--wk-shadow); min-height: 150px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative; box-shadow: var(--wk-shadow); }
/* tuiles blanches comme les parties en attente ; seul un Krew Love est rouge */
.kcard.love { background: linear-gradient(180deg, #3E101D 0%, #7F1E3B 100%); } .kcard.love .nm { color: #fff; } .kcard.love .meta { color: rgba(255,255,255,.78); }
.kcard .nm { font-family: var(--wk-display); font-size: 17px; color: var(--wk-ink); line-height: 1.1; }
.kcard .meta { font-size: 11px; font-weight: 600; color: var(--wk-muted); }
.kcard .new { position: absolute; top: 10px; right: 10px; }
.kcard.add { background: var(--wk-surface); border: 2px dashed var(--wk-line); box-shadow: none; justify-content: center; color: var(--wk-orange-700); font-weight: 700; }
.adn-row { display: flex; gap: 6px; }
.adn-row button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 16px; background: var(--wk-surface); border: 2px solid transparent; font-size: 11px; font-weight: 700; color: var(--wk-muted); }
.adn-row button .ico { font-size: 22px; line-height: 1; }
.adn-row button.on { border-color: var(--wk-orange-500); color: var(--wk-orange-700); background: var(--wk-orange-100); }
.steps-wrap { display: flex; flex-direction: column; gap: 6px; }
.steps { display: flex; align-items: center; gap: 6px; }
.steps i { flex: 1; height: 5px; border-radius: 4px; background: rgba(255,255,255,.2); transition: background .2s; }
.light .steps i { background: var(--wk-line); }
/* Étapes franchies et étape en cours : orange Winkrew (la règle doit passer après « .light .steps i », sinon tout reste gris) */
.steps i.done, .light .steps i.done, .steps i.cur, .light .steps i.cur { background: var(--wk-orange-500); }
.steps-lab { font-size: 12px; font-weight: 600; color: var(--wk-muted); letter-spacing: .02em; }

/* ---------- Jeu ---------- */
.progress { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--wk-muted); }
.dark .progress { color: rgba(255,255,255,.7); }
.bar { height: 6px; border-radius: 6px; background: var(--wk-line); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--wk-orange-500); border-radius: 6px; transition: width .3s; }
.dark .bar { background: rgba(255,255,255,.18); }
.answers { display: flex; flex-direction: column; gap: 10px; }
.answer { display: flex; align-items: center; gap: 12px; background: var(--wk-surface); border-radius: 18px; padding: 14px 16px; text-align: left; border: 2px solid transparent; font-weight: 600; font-size: 15px; line-height: 1.3; box-shadow: var(--wk-shadow); transition: border-color .12s, transform .08s; }
.answer:active { transform: scale(.99); }
.answer .l { width: 30px; height: 30px; border-radius: 50%; background: var(--wk-orange-100); color: var(--wk-orange-700); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wk-display); flex: none; }
.answer.selected { border-color: var(--wk-orange-500); background: var(--wk-selected-bg); }
.answer.selected .l { background: var(--wk-orange-500); color: #fff; }
.answer.reveal { border-color: var(--wk-green-700); background: var(--wk-green-100); }
.answer.dim { opacity: .55; }
.answer .who { margin-left: auto; font-size: 12px; color: var(--wk-muted); font-weight: 600; text-align: right; }
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yesno button { height: 110px; border-radius: 22px; background: var(--wk-surface); font-family: var(--wk-display); font-size: 36px; color: var(--wk-green-700); border: 3px solid transparent; box-shadow: var(--wk-shadow); }
.yesno button.on { border-color: var(--wk-orange-500); background: var(--wk-selected-bg); color: var(--wk-orange-700); }
.yesno button.no.on { color: var(--wk-green-700); border-color: var(--wk-green-700); background: var(--wk-green-100); }
.estimate { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; background: var(--wk-surface); border-radius: 22px; padding: 16px; box-shadow: var(--wk-shadow); }
.estimate .k { text-align: center; } .estimate .k b { display: block; font-family: var(--wk-display); font-size: 44px; color: var(--wk-green-700); line-height: 1; } .estimate .k span { font-size: 12px; font-weight: 700; color: var(--wk-muted); }
.estimate .k.no b { color: var(--wk-orange-500); }
.estimate .ctl { display: flex; flex-direction: column; gap: 8px; }
.estimate .ctl button { width: 46px; height: 46px; border-radius: 50%; background: var(--wk-orange-100); color: var(--wk-orange-700); font-family: var(--wk-display); font-size: 26px; }
.slider { width: 100%; accent-color: var(--wk-orange-500); }
.qlist { display: flex; flex-direction: column; gap: 6px; }
.qlist .q { background: var(--wk-surface); border-radius: 14px; padding: 10px 12px; font-size: 13px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.qlist .q .n { width: 22px; height: 22px; border-radius: 50%; background: var(--wk-green-100); color: var(--wk-green-700); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wk-display); font-size: 12px; flex: none; }
.qlist .q .mine { margin-left: auto; font-size: 11px; color: var(--wk-muted); white-space: nowrap; }
.tally { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tally div { background: var(--wk-surface); border-radius: 18px; padding: 14px; text-align: center; box-shadow: var(--wk-shadow); }
.tally b { display: block; font-family: var(--wk-display); font-size: 40px; color: var(--wk-green-700); line-height: 1; } .tally .no b { color: var(--wk-orange-500); }
.tally span { font-size: 12px; font-weight: 700; color: var(--wk-muted); }
.verdict { font-family: var(--wk-display); font-size: 26px; color: var(--wk-green-700); text-align: center; }
.pts { text-align: center; font-weight: 700; color: var(--wk-orange-700); }
.trophy { font-size: 64px; line-height: 1; text-align: center; }
.rank { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border-radius: 16px; padding: 10px 12px; }
.rank .n { width: 26px; text-align: center; font-family: var(--wk-display); font-size: 16px; color: var(--wk-orange-300); }
.rank .nm { font-weight: 700; flex: 1; } .rank .pt { font-family: var(--wk-display); font-size: 18px; }
.rank.first { background: var(--wk-orange-500); color: #fff; } .rank.first .n { color: #fff; }
.light .rank { background: var(--wk-surface); box-shadow: var(--wk-shadow); }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: .9; animation: fall 2.8s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .confetti i { animation: none; display: none; } }

/* ---------- Débriefing ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 12px; flex: 1; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg .bubble { background: var(--wk-surface); border-radius: 18px 18px 18px 6px; padding: 10px 12px; box-shadow: var(--wk-shadow); font-size: 14px; }
.msg.mine .bubble { background: var(--wk-green-fill); color: #fff; border-radius: 18px 18px 6px 18px; }
.msg .meta { font-size: 11px; color: var(--wk-muted); display: flex; gap: 6px; margin-bottom: 3px; font-weight: 600; }
.msg.mine .meta { justify-content: flex-end; }
.msg .quote { font-size: 12px; opacity: .8; border-left: 3px solid var(--wk-orange-300); padding-left: 8px; margin-bottom: 6px; }
.msg .reacts { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.msg .reacts button { background: var(--wk-cream); border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--wk-ink); }
.msg .reacts button.mine { background: var(--wk-orange-100); box-shadow: 0 0 0 1.5px var(--wk-orange-500); }
.msg .tools { display: none; gap: 6px; margin-top: 4px; } .msg.open .tools { display: flex; }
.msg .tools button { font-size: 12px; font-weight: 600; color: var(--wk-orange-700); }
.event { align-self: center; background: var(--wk-surface); border: 1.5px solid var(--wk-orange-300); border-radius: 18px; padding: 12px 14px; max-width: 92%; text-align: center; box-shadow: var(--wk-shadow); }
.event .t { font-family: var(--wk-display); color: var(--wk-orange-700); font-size: 16px; }
.event p { margin: 6px 0 8px; font-size: 14px; }
.composer { background: transparent; padding: 8px 0 4px; display: flex; gap: 8px; align-items: flex-end; }
.composer .input { border-radius: 24px; flex: 1; }
.composer .send { width: 50px; height: 50px; border-radius: 50%; background: var(--wk-orange-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.composer .send svg { width: 22px; height: 22px; }
.replybar { display: flex; align-items: center; gap: 8px; background: var(--wk-cream); border-radius: 12px; padding: 6px 10px; font-size: 12px; }
.emoji-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; } .emoji-row button { font-size: 22px; padding: 2px 4px; }

/* ---------- WinkBottomNav ---------- */
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; pointer-events: none; }
.bottomnav .bar { pointer-events: auto; width: 100%; max-width: var(--wk-max); height: calc(var(--wk-nav-h) + var(--wk-sab)); padding-bottom: var(--wk-sab); background: var(--wk-surface); border-top: 1px solid var(--wk-line); display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0 -8px 30px rgba(0,50,60,.08); }
.bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--wk-soft); position: relative; }
.bottomnav button svg { width: 24px; height: 24px; }
.bottomnav button.on { color: var(--wk-green-700); }
.bottomnav button .av { box-shadow: 0 0 0 2px transparent; } .bottomnav button.on .av { box-shadow: 0 0 0 2.5px var(--wk-orange-500); }

/* ---------- WinkModal / feuille ---------- */
.modal-bg { position: fixed; inset: 0; background: var(--wk-overlay); z-index: 40; display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: fade .15s ease; }
.modal { background: var(--wk-surface); color: var(--wk-ink); width: 100%; max-width: var(--wk-max); border-radius: 26px 26px 0 0; padding: 22px 20px calc(24px + var(--wk-sab)); max-height: 88vh; overflow: auto; animation: up .2s ease; }
/* iPhone (02.10) : 88vh = hauteur SANS les barres de Safari ; avec les barres visibles, le haut de la fenêtre sortait de l'écran (logo et titre
   invisibles tant qu'on ne faisait pas glisser). dvh = hauteur réellement visible : la fenêtre tient toujours dans l'écran et défile à l'intérieur. */
@supports (height: 100dvh) { .modal { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); } }
.modal { overscroll-behavior: contain; }
@media (min-width: 520px) { .modal-bg { align-items: center; padding: 20px; } .modal { border-radius: 26px; } }
@keyframes up { from { transform: translateY(24px); opacity: .6; } } @keyframes fade { from { opacity: 0; } }
.modal h2 { color: var(--wk-green-700); }

/* ---------- WinkEmptyState ---------- */
.empty { text-align: center; padding: 26px 16px; border-radius: var(--wk-r-card); background: var(--wk-surface); border: 1.5px dashed var(--wk-line); color: var(--wk-muted); font-size: 14px; }
.empty .big { font-size: 34px; line-height: 1; margin-bottom: 8px; }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: calc(var(--wk-nav-h) + var(--wk-sab) + 20px); transform: translateX(-50%) translateY(20px); background: var(--wk-green-900); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .2s, transform .2s; z-index: 60; pointer-events: none; max-width: 92vw; text-align: center; box-shadow: var(--wk-shadow-lg); }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Choix du jeu (« On s'fait un Wink ? ») : trois grands mots orange séparés par des filets, la sélection = bandeau orange clair pleine largeur ---------- */
.gamelist { margin: 8px -20px 0; display: flex; flex-direction: column; }
.gamelist .gline { height: 2px; margin: 0 24px; background: linear-gradient(90deg, transparent 0%, var(--wk-orange-500) 18%, var(--wk-orange-500) 82%, transparent 100%); }
.gamelist .gitem { display: block; width: 100%; padding: 22px 20px; font-family: var(--wk-display); font-size: 58px; line-height: 1; letter-spacing: -.01em; color: var(--wk-orange-500); text-align: center; transition: background .12s, color .12s; }
.gamelist .gitem.on { background: var(--wk-gitem-on); color: var(--wk-green-900); }
.gamelist .gitem.off { opacity: .85; }
.gamelist .gitem .soon { display: block; font-family: var(--wk-body); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wk-orange-300); margin-top: 2px; }
.wink-title { font-family: var(--wk-display); font-size: 27px; color: var(--wk-orange-300); line-height: 1.1; }

/* ---------- Divers ---------- */
.brand-word { height: 34px; width: auto; display: block; } .brand-word.lg { height: 54px; } .brand-sym { width: 64px; height: auto; }
.hero-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tagline { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }
.game-pick { display: flex; align-items: center; gap: 14px; background: var(--wk-surface); color: var(--wk-ink); border-radius: 20px; padding: 16px; text-align: left; border: 2px solid transparent; }
.game-pick .ico { width: 52px; height: 52px; border-radius: 16px; background: var(--wk-orange-100); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; flex: none; }
.game-pick .t { font-family: var(--wk-display); font-size: 20px; color: var(--wk-green-700); } .game-pick .d { font-size: 12px; color: var(--wk-muted); }
.game-pick.on { border-color: var(--wk-orange-500); }
.game-pick.off { opacity: .55; }
.linkbox { display: flex; align-items: center; gap: 8px; background: var(--wk-surface); border-radius: 14px; padding: 8px 8px 8px 14px; }
.linkbox input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; color: var(--wk-muted); outline: none; text-overflow: ellipsis; }
.share-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .share-row.five { grid-template-columns: repeat(5, 1fr); }
.share-row a, .share-row button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--wk-ink); text-decoration: none; background: var(--wk-surface); border-radius: 14px; padding: 10px 4px; }
.share-row .i { font-size: 22px; }
.dark .share-row a, .dark .share-row button { background: rgba(255,255,255,.1); color: #fff; }
.notif { display: flex; gap: 12px; align-items: center; background: var(--wk-surface); border-radius: 18px; padding: 12px; box-shadow: var(--wk-shadow); text-align: left; width: 100%; }
.notif .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--wk-orange-100); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.notif .t { font-weight: 700; font-size: 14px; } .notif .d { font-size: 12px; color: var(--wk-muted); }
.locked { display: flex; align-items: center; justify-content: space-between; background: var(--wk-cream); border-radius: var(--wk-r-input); padding: 12px 16px; color: var(--wk-muted); font-weight: 600; }
.locked b { color: var(--wk-ink); }
.cropper { position: relative; width: 260px; height: 260px; margin: 0 auto; border-radius: 50%; overflow: hidden; background: #ddd; touch-action: none; }
.cropper canvas { width: 100%; height: 100%; display: block; }
.dots { display: flex; gap: 6px; justify-content: center; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--wk-line); } .dots i.on { background: var(--wk-orange-500); }
.fade-in { animation: fade .25s ease; }
.divider { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.5); font-size: 12px; font-weight: 700; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.2); }
.light .divider { color: var(--wk-soft); } .light .divider::before, .light .divider::after { background: var(--wk-line); }

/* ---- Déroulement en une passe (22.09) : mode immersif, règles, estimation, appréciation, répartition ---- */
html.immersive .screen { padding-bottom: calc(24px + var(--wk-sab)); }                       /* plus de barre de navigation pendant le jeu */
html.immersive .cta-sticky { bottom: calc(var(--wk-sab) + 12px); }
.rules { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4; }
.rules li::marker { color: var(--wk-orange-500); font-weight: 800; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pill { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px; background: var(--wk-surface); border: 2px solid var(--wk-line); font-weight: 800; color: var(--wk-green-700); font-size: 16px; }
.pill.on { background: var(--wk-orange-500); border-color: var(--wk-orange-500); color: #fff; }
.rate { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--wk-surface); border-radius: 16px; padding: 10px 12px; }
.thumbs { display: flex; gap: 8px; }
.thumb { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; transition: transform .12s ease; }
.thumb img { width: 24px; height: auto; display: block; }
.thumb:active { transform: scale(.9); }
.dist { display: flex; flex-direction: column; gap: 8px; }
.dist .d { background: var(--wk-surface); border-radius: 14px; padding: 10px 12px; font-size: 14px; font-weight: 600; }
.dist .d.mine { box-shadow: inset 0 0 0 2px var(--wk-orange-500); }
.dist .d .l { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--wk-orange-100); color: var(--wk-orange-700); align-items: center; justify-content: center; font-size: 12px; font-weight: 800; margin-right: 6px; }
.dist .bar { height: 6px; border-radius: 3px; background: var(--wk-orange-100); margin-top: 6px; overflow: hidden; }
.dist .bar i { display: block; height: 100%; background: var(--wk-orange-500); border-radius: 3px; }
.answer .av { flex: none; }
/* ---- Choix de l'ADN : liste de cartes (maquette « ADN de ton Krew ») ---- */
.adn-list { display: flex; flex-direction: column; gap: 10px; }
.adn-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--wk-surface); border: 2px solid var(--wk-line); text-align: left; box-shadow: var(--wk-shadow); }
.adn-card .ico { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--wk-green-900); flex: none; }
.adn-card .ico svg { width: 28px; height: 28px; }
.adn-card.love .ico { background: #FBE3DA; } .adn-card.family .ico { background: #FDE7C4; } .adn-card.friends .ico { background: #FDE7C4; } .adn-card.neighbors .ico { background: #FBF0D2; } .adn-card.work .ico { background: #DCE8DC; }
.adn-card b { display: block; font-family: var(--wk-display); font-size: 19px; color: var(--wk-ink); line-height: 1.1; }
.adn-card .tag { display: block; font-size: 13px; color: var(--wk-muted); margin-top: 2px; }
.adn-card .radio { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--wk-muted); flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.adn-card .radio svg { width: 14px; height: 14px; }
.adn-card.on { background: #0F3A3F; border-color: var(--wk-orange-500); }
.adn-card.on b { color: #fff; } .adn-card.on .tag { color: rgba(255,255,255,.85); }
.adn-card.on .ico { background: var(--wk-orange-500); color: var(--wk-green-900); }
.adn-card.on .radio { background: var(--wk-orange-500); border-color: var(--wk-orange-500); }
:root[data-theme="love"] .adn-card.on { background: #3E0B19; }
/* ---- Indicateurs cliquables de l'accueil ---- */
button.stat { cursor: pointer; } button.stat:active { transform: scale(.98); }
.stat-badge { top: 6px; right: 6px; min-width: 22px; height: 22px; font-size: 11px; background: var(--wk-orange-500); color: #fff; }   /* nombre de parties non terminées */
/* ---- Fiche Krew : fond dégradé orange (groupes ordinaires) ou bordeaux (Love), d'après FOND_ORANGE / FOND_ROUGE ---- */
.screen.krew { background: linear-gradient(180deg, #F28903 0%, #FABF74 100%); color: var(--wk-white); }
:root[data-theme="love"] .screen.krew { background: linear-gradient(180deg, #3E101D 0%, #7F1E3B 100%); }
.screen.krew .section-title { color: var(--wk-white); } .screen.krew .section-title .link { color: var(--wk-white); text-decoration: underline; }
.screen.krew .badge.ghost { background: rgba(255,255,255,.22); color: var(--wk-white); }
.screen.krew .badge.orange { background: var(--wk-surface); color: var(--wk-orange-700); } :root[data-theme="love"] .screen.krew .badge.orange { color: #7A1B34; }
.screen.krew .urow, .screen.krew .stat, .screen.krew .linkbox { color: var(--wk-ink); }
.screen.krew .iconbtn { color: var(--wk-white); }
.screen.krew .linkbtn.muted { color: rgba(255,255,255,.85); }
.screen.krew .share-row a, .screen.krew .share-row button { color: var(--wk-ink); }
.rank.dim { opacity: .7; }

/* ---- Fiche Krew : tuiles Winks / Winner / Loser (libellés alignés), bouton à contour blanc, classement (maquettes Page_Krew_orange / rouge) ---- */
.ktile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-height: 96px; padding: 10px 8px 12px; }
.ktile .who { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 44px; }
.ktile .who b { font-family: var(--wk-display); font-size: 36px; line-height: 1; color: var(--wk-ink); }
.ktile .qmark { opacity: .8; }
.ktile .picto { position: absolute; width: 26px; height: 26px; right: -12px; top: -8px; }
.ktile > span:last-child { font-size: 12px; font-weight: 600; color: var(--wk-ink); line-height: 1; }
.screen.krew .stat { background: rgba(255,255,255,.28); box-shadow: none; }
:root[data-theme="love"] .ktile .who b, :root[data-theme="love"] .ktile > span:last-child { color: #fff; }
.screen.krew .btn.primary.display { box-shadow: inset 0 0 0 1px rgba(255,255,255,.95); }
.podium { gap: 10px; padding-top: 6px; }
.rank-row { position: relative; overflow: visible; background: #fabf75; border: 1px solid #fbbfbc; box-shadow: none; padding-right: 64px; }
.rank-row .medal { position: absolute; right: 16px; top: 0; width: 34px; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.rank-row .nm { color: var(--wk-ink); } .rank-row .sub { color: #ae6716; }
:root[data-theme="love"] .rank-row { background: #b4313e; border-color: #e50046; } :root[data-theme="love"] .rank-row .nm { color: #fff; } :root[data-theme="love"] .rank-row .sub { color: rgba(255,255,255,.88); }
.adn-card .ico { overflow: hidden; } .adn-card .ico img { width: 100%; height: 100%; display: block; }
/* ---- Modales : boutons toujours lisibles sur fond blanc ---- */
.modal .btn.ghost { color: var(--wk-green-700); border-color: var(--wk-green-700); }
.btn.danger { background: #FDE2E1; color: #9b2c2c; }
/* ---- Bouton Valider à la suite des réponses (plus collé au bas de l'écran) ---- */
.cta-inline { margin-top: 22px; padding-bottom: 8px; }
.cta-inline.after-answers { margin-top: 56px; } /* retours du 24.09 : encore plus d'air entre la dernière réponse et Valider (Quiz et Vote) */
/* ---- Participants d'un Vote ---- */
.participants { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.participants .pp { display: flex; flex-direction: column; align-items: center; gap: 4px; width: calc(20% - 8px); min-width: 58px; font-size: 11px; font-weight: 700; color: var(--wk-ink); text-align: center; }
.participants .pp span.n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- Événement Débriefing ---- */
.event .ev-line { font-size: 14px; line-height: 1.5; } .ev-winner { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; } .ev-winner .av { width: 26px; height: 26px; font-size: 10px; }
.debrief-head { text-align: center; }

/* Mon réseau : inviter par lien (liste des Krews : visage, nom, ADN et nombre de membres) */
.krew-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--wk-surface); border-radius: 18px; padding: 10px 12px; box-shadow: var(--wk-shadow); }
.krew-pick .nm { font-weight: 700; font-size: 16px; color: var(--wk-ink); }
.krew-pick .sub { font-size: 12.5px; color: var(--wk-muted); margin-top: 2px; }
.krew-pick .chev { color: var(--wk-muted); font-size: 20px; }
button.urow .grow { text-align: left; }

/* ---------- Mode sombre (Warrior) : écrans clairs → fond vert foncé de « On s'fait un Wink ? » ---------- */
:root[data-mode="dark"] body { background: var(--wk-green-900); }
:root[data-mode="dark"] .screen.light { background: var(--wk-grad-dark); background-attachment: fixed; color: var(--wk-ink); }
:root[data-mode="dark"]:not([data-theme="love"]) .screen.krew { background: var(--wk-grad-dark); background-attachment: fixed; }
:root[data-mode="dark"] .light .iconbtn:active { background: rgba(255,255,255,.12); }
:root[data-mode="dark"] .input { background: rgba(255,255,255,.07); color: var(--wk-ink); border-color: rgba(255,255,255,.22); }
:root[data-mode="dark"] .input::placeholder { color: rgba(255,255,255,.45); }
:root[data-mode="dark"] .input:focus { border-color: var(--wk-orange-500); }
:root[data-mode="dark"] select.input option { background: #03404F; color: #fff; }
:root[data-mode="dark"] .btn.white { background: var(--wk-surface); color: var(--wk-ink); box-shadow: none; border: 1px solid var(--wk-line); }
:root[data-mode="dark"] .btn.soft { color: var(--wk-orange-700); }
:root[data-mode="dark"] .modal-bg { background: rgba(0, 20, 26, .72); }
:root[data-mode="dark"] .modal { color: var(--wk-ink); }
:root[data-mode="dark"] .bottomnav .bar { border-top-color: rgba(255,255,255,.10); color: var(--wk-muted); }
:root[data-mode="dark"] .bottomnav button.on { color: var(--wk-orange-500); }
:root[data-mode="dark"] #toast { background: #0B5566; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
:root[data-mode="dark"] .answer.selected, :root[data-mode="dark"] .yesno button.on, :root[data-mode="dark"] .pill.on { color: #fff; }
:root[data-mode="dark"] .card.flat { border-color: var(--wk-line); }
:root[data-mode="dark"] .event { color: var(--wk-ink); }
:root[data-mode="dark"] .msg.mine .bubble { color: #fff; }
:root[data-mode="dark"] .av.ring, :root[data-mode="dark"] .av.ring-green { box-shadow: 0 0 0 3px #03404F, 0 0 0 5px var(--wk-orange-500); }

/* ---------- Badge Warrior (sur l'avatar partagé) ---------- */
.av-wrap { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.av-wrap .wbadge { position: absolute; top: -6%; right: -6%; width: 38%; height: 38%; min-width: 14px; min-height: 14px; max-width: 34px; max-height: 34px; border-radius: 50%;
  background: #EE8806; color: #00323C; font-family: var(--wk-display); font-weight: 400; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff; pointer-events: none; z-index: 1; }
.av-wrap.xs > .wbadge { font-size: 8px; box-shadow: 0 0 0 1.5px #fff; } .av-wrap.s > .wbadge { font-size: 9px; } .av-wrap.m > .wbadge { font-size: 11px; }
.av-wrap.l > .wbadge { font-size: 13px; } .av-wrap.xl > .wbadge { font-size: 17px; box-shadow: 0 0 0 2.5px #fff; } .av-wrap.xxl > .wbadge { font-size: 21px; box-shadow: 0 0 0 3px #fff; }
/* le badge garde l'orange Winkrew (valeur fixe), y compris dans un Krew Love */
.av-stack .av-wrap { margin-left: -10px; } .av-stack .av-wrap:first-child { margin-left: 0; } .av-stack .av-wrap .av { margin-left: 0; }

/* ---------- Accueil : total de points et progression Warrior ---------- */
.pts-line { margin: 5px 0 0; font-size: 13px; line-height: 1.35; color: var(--wk-ink); overflow-wrap: anywhere; }
.pts-line b { display: block; font-weight: 700; white-space: nowrap; }
.pts-line span { display: block; font-weight: 400; color: var(--wk-muted); }

/* ---------- Mon compte : réglages (mode sombre, proposer une question) ---------- */
.setting { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--wk-surface); border: 1px solid var(--wk-line); border-radius: 18px; padding: 14px 16px; }
.setting-t { display: block; font-weight: 700; font-size: 15px; color: var(--wk-ink); }
.setting-s { display: block; font-size: 12.5px; color: var(--wk-muted); margin-top: 2px; }
.link-setting .chev { font-size: 22px; color: var(--wk-muted); }
.switch { flex: none; width: 52px; height: 32px; border-radius: 16px; background: rgba(0,50,60,.18); position: relative; transition: background .15s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .15s; }
.switch.on { background: var(--wk-orange-500); } .switch.on span { transform: translateX(20px); }
.switch[disabled] { opacity: .5; cursor: not-allowed; }
:root[data-mode="dark"] .switch:not(.on) { background: rgba(255,255,255,.22); }
.switch:focus-visible, .type-pick button:focus-visible { outline: 3px solid var(--wk-accent-ring); outline-offset: 2px; }

/* ---------- Proposer une question ---------- */
.type-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.type-pick button { height: 48px; border-radius: var(--wk-r-pill); background: var(--wk-surface); color: var(--wk-ink); border: 1.5px solid var(--wk-line); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.type-pick button.on { background: var(--wk-orange-500); border-color: var(--wk-orange-500); color: #fff; box-shadow: 0 6px 16px var(--wk-accent-glow); }
@media (max-width: 350px) { .type-pick button { font-size: 11.5px; letter-spacing: 0; } }
.suggest textarea.input { min-height: 104px; font-size: 16px; line-height: 1.4; }
.suggest input.input { font-size: 16px; } /* 16 px : pas de zoom automatique sur iPhone */
.sg-help { margin: -4px 0 0; }
.field-err { min-height: 0; }
.fixed-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 15px; background: var(--wk-green-100); color: var(--wk-green-700); font-weight: 700; font-size: 12px; letter-spacing: .05em; }
.fixed-pill.no { background: var(--wk-orange-100); color: var(--wk-orange-700); }
.sg-fail { border-color: var(--wk-error) !important; color: var(--wk-ink); }
.suggest-ok { width: 72px; height: 72px; border-radius: 50%; background: var(--wk-orange-500); color: #fff; font-size: 36px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px var(--wk-accent-glow); }
.warn-note { background: var(--wk-orange-100); color: var(--wk-orange-700); border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Krew : le badge Warrior occupe le coin supérieur droit de l'avatar → le picto Winner / Loser passe à gauche pour ne pas le masquer */
.ktile .who.with-w .picto { right: auto; left: -12px; }
/* Mode sombre, fiche Krew : les lignes du classement gardent l'orange de la charte, avec leur texte foncé d'origine */
:root[data-mode="dark"]:not([data-theme="love"]) .rank-row .nm { color: #00323C; }
:root[data-mode="dark"]:not([data-theme="love"]) .rank-row .sub { color: #7A4300; }
:root[data-mode="dark"]:not([data-theme="love"]) .rank-row .av { background: #DCEFF4; color: #005669; }
:root[data-mode="dark"] .av:not(.krew) { background: #0E6A7E; color: #fff; }
:root[data-mode="dark"][data-theme="love"] .av:not(.krew) { background: #A6304F; color: #fff; }
:root[data-mode="dark"] .screen.krew .stat { background: rgba(255,255,255,.12); }
:root[data-mode="dark"][data-theme="love"] .bottomnav button.on { color: #FF9CB0; }
/* Mode sombre, fiche Krew sans point marqué : les lignes du classement (sans médaille) gardent un fond — vert clair — et un texte lisible */
:root[data-mode="dark"] .rank-row.plain { background: #DCEFF4; border-color: #B2EAF3; padding: 10px 12px; }
:root[data-mode="dark"] .rank-row.plain .nm { color: #00323C; } :root[data-mode="dark"] .rank-row.plain .sub { color: #005669; }
:root[data-mode="dark"][data-theme="love"] .rank-row.plain { background: #FBE3E8; border-color: #F2A6B4; } :root[data-mode="dark"][data-theme="love"] .rank-row.plain .nm { color: #3E0B19; } :root[data-mode="dark"][data-theme="love"] .rank-row.plain .sub { color: #7A1B34; }
/* Photos de profil : toujours un disque aux bonnes proportions, quel que soit le conteneur (flex, enveloppe du badge Warrior) */
.av { aspect-ratio: 1 / 1; flex-shrink: 0; } .av img { object-position: center; }
.av-wrap .av { margin: 0; }

/* ---------- DÉFIS ---------- */
/* Choix du format : même liste que les Winks (mots orange, filets dégradés), avec pictogramme et accroche */
.defi-choose .gitem.defi { padding: 16px 20px 14px; }
.defi-choose .gitem .gword { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.defi-choose .gitem .gpicto { display: inline-flex; width: 34px; height: 34px; opacity: .9; } .defi-choose .gitem .gpicto svg { width: 34px; height: 34px; }
.defi-choose .gitem .tag { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.72); margin-top: 6px; }
.defi-choose .gitem.on .tag { color: var(--wk-green-900); opacity: .85; } .defi-choose .gitem.on .gpicto { color: var(--wk-green-900); }
.defi-choose .gitem.off { opacity: .45; } .defi-choose .gitem.off .tag { color: var(--wk-orange-300); }
/* Écrans du défi */
.defi-head { display: flex; flex-direction: column; gap: 6px; }
.defi-head h1 { font-size: 28px; } .defi-head h2 { font-size: 22px; }
.fbadge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 26px; padding: 0 10px 0 6px; border-radius: 13px; background: var(--wk-orange-100); color: var(--wk-orange-700); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fbadge svg { width: 16px; height: 16px; }
.defi-brief { padding: 14px 16px; } .defi-brief .brief { margin: 0; font-family: var(--wk-display); font-size: 20px; line-height: 1.25; color: var(--wk-green-700); } .defi-brief .crit { margin: 10px 0 0; font-size: 13.5px; color: var(--wk-muted); } .defi-brief .crit b { color: var(--wk-ink); font-weight: 700; }
.defi textarea.input { min-height: 120px; font-size: 16px; line-height: 1.4; }
.dphoto { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 18px; background: rgba(0,50,60,.06); } .dphoto.big { max-height: 70vh; }
.dwrap { position: relative; display: block; } .dwrap .dphoto { margin: 0; }
.dzoom { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,50,60,.62); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; } .dzoom svg { width: 18px; height: 18px; }
/* Visionneuse plein écran : hors de #app/#modal pour garder son propre zoom (pincement, double tap, molette) géré en JS via les pointer events. */
#viewer:empty { display: none; }
.viewer { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; animation: fade .15s ease; }
.viewer img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; transform-origin: 0 0; will-change: transform; pointer-events: none; -webkit-user-drag: none; }
.viewer .vclose { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: inline-flex; align-items: center; justify-content: center; z-index: 1; } .viewer .vclose svg { width: 22px; height: 22px; }
.viewer .vhint { position: absolute; bottom: calc(16px + var(--wk-sab)); left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.7); pointer-events: none; }
.dtext { margin: 0; font-family: var(--wk-display); font-size: 21px; line-height: 1.3; color: var(--wk-green-700); overflow-wrap: anywhere; }
/* Cartes de création (vote et résultat) */
.dentry { display: block; width: 100%; text-align: left; background: var(--wk-surface); border-radius: 20px; padding: 14px; box-shadow: var(--wk-shadow); border: 2.5px solid transparent; position: relative; color: var(--wk-ink); }
.dentry.selected { border-color: var(--wk-orange-500); background: var(--wk-selected-bg); } .dentry.winner { border-color: var(--wk-orange-500); }
.dentry.mine[disabled], .dentry.pick.nopick { opacity: .7; cursor: default; }
.dentry.pick { cursor: pointer; -webkit-tap-highlight-color: transparent; } .dentry.pick:focus-visible { outline: 3px solid var(--wk-orange-500); outline-offset: 2px; }
.dentry .pickmark { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--wk-line); background: var(--wk-surface); display: flex; align-items: center; justify-content: center; color: #fff; }
.dentry.selected .pickmark { background: var(--wk-orange-500); border-color: var(--wk-orange-500); } .dentry .pickmark svg { width: 16px; height: 16px; }
.dentry .report { position: absolute; right: 14px; bottom: 10px; opacity: .7; }
.defi-res .dentry { color: var(--wk-ink); }
/* Audio : enregistrement et lecture (jamais automatique) */
.recbtn { width: 88px; height: 88px; border-radius: 50%; background: var(--wk-orange-500); box-shadow: 0 10px 26px var(--wk-accent-glow); display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.recbtn span { width: 30px; height: 30px; border-radius: 50%; background: #fff; transition: border-radius .15s, width .15s, height .15s; }
.recbtn.on { background: var(--wk-error); animation: pulse 1.2s ease-in-out infinite; } .recbtn.on span { width: 26px; height: 26px; border-radius: 6px; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .recbtn.on { animation: none; } }
.rec-time { font-family: var(--wk-display); font-size: 26px; color: var(--wk-green-700); min-height: 32px; } .rec-time.on { color: var(--wk-error); }
.aplayer { display: flex; align-items: center; gap: 12px; width: 100%; }
.aplay { width: 48px; height: 48px; border-radius: 50%; background: var(--wk-green-fill); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .aplay svg { width: 22px; height: 22px; } .aplay.on { background: var(--wk-orange-500); }
.adur { font-weight: 700; font-size: 14px; color: var(--wk-muted); min-width: 44px; }
.abar { flex: 1; height: 6px; border-radius: 3px; background: rgba(0,50,60,.12); overflow: hidden; } .abar i { display: block; height: 100%; width: 0; background: var(--wk-orange-500); transition: width .12s linear; }
:root[data-mode="dark"] .abar { background: rgba(255,255,255,.18); }
.yesno.small button { height: 72px; font-size: 24px; }
.ev-prompt { margin: 6px 0 8px; font-size: 14px; font-style: italic; color: var(--wk-orange-700); }
.charte .card h3 { font-size: 18px; margin-bottom: 4px; } .charte .card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--wk-ink); } .charte .card a { color: var(--wk-orange-700); font-weight: 600; }
.defi .btn svg, .defi label.btn svg { width: 22px; height: 22px; flex: none; }
.dentry .report { position: static; display: block; margin: 8px 0 0 auto; text-align: right; }

/* ---------- Logo Winkrew en tête de page ---------- */
.brand-bar { display: flex; justify-content: center; padding-top: calc(12px + env(safe-area-inset-top, 0px)); margin-bottom: -10px; }
.brand-bar img { height: 30px; width: auto; display: block; }
.brand-bar + .topbar.safe-top, .brand-bar + header.safe-top { padding-top: 6px; }
html.immersive .brand-bar { display: none; } /* pendant une manche de jeu : plein écran */
/* ---------- Mode sombre : Débriefing, zone d'écriture sans fond ---------- */
:root[data-mode="dark"] .composer { background: transparent; }
:root[data-mode="dark"] .composer .input { background: rgba(2, 51, 62, .92); }
/* ---------- Accueil, tuiles Krew : message non lu (rond orange, à gauche) et ma médaille (à droite) ---------- */
.kcard .kmsg { position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--wk-orange-500); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.kcard .kmsg svg { width: 15px; height: 15px; }
.kcard .kmedal { position: absolute; top: 6px; right: 10px; width: 24px; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }

/* ---- Crédits Winks (27.09.2026) : ligne 1/3 – 2/3 sous les trois indicateurs ; boutique ---- */
.credits-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; margin-top: 10px; align-items: stretch; }
.credit-btn { background: var(--wk-surface); border-radius: 18px; padding: 10px 6px; text-align: center; box-shadow: var(--wk-shadow); display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; cursor: pointer; border: 2px solid transparent; }
.credit-btn:active { transform: scale(.98); } .credit-btn:focus-visible { outline: 3px solid var(--wk-orange-500); outline-offset: 2px; }
.credit-btn b { display: block; font-family: var(--wk-display); font-size: 26px; line-height: 1; color: var(--wk-orange-700, #AF6500); }
.credit-btn span { font-size: 11.5px; font-weight: 700; color: var(--wk-muted); line-height: 1.15; }
.wink-cta { min-height: 56px; height: auto; padding: 10px 12px; border-radius: 18px; font-size: 17px; line-height: 1.15; white-space: normal; }
.chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--wk-surface); border: 1.5px solid var(--wk-line); font-weight: 700; font-size: 13px; color: var(--wk-ink); }
.chip:active { transform: scale(.98); }
:root[data-mode="dark"] .credit-btn { background: rgba(255,255,255,.08); box-shadow: none; } :root[data-mode="dark"] .credit-btn b { color: var(--wk-orange-500); }
:root[data-mode="dark"] .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.screen.krew .credit-btn { background: rgba(255,255,255,.28); box-shadow: none; }
@media (max-width: 360px) { .credit-btn b { font-size: 22px; } .wink-cta { font-size: 15px; } }

/* Débriefing — photo, audio, signalement (29.09) */
.msg .bubble .mphoto { display: block; margin: -4px -6px 4px; } .msg .bubble .mphoto .dphoto { max-height: 46vh; border-radius: 14px; }
.msg.has-photo { max-width: 92%; } .msg.has-photo > div { min-width: 200px; }
.msg .bubble .caption { margin-top: 6px; }
.msg .bubble .aplayer { display: flex; align-items: center; gap: 8px; min-width: 190px; padding: 2px 0; }
.msg .bubble .aplay { width: 36px; height: 36px; border-radius: 50%; background: var(--wk-orange-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .msg .bubble .aplay svg { width: 18px; height: 18px; }
.msg .bubble .adur { font-size: 12px; font-weight: 600; min-width: 30px; } .msg.mine .bubble .abar { background: rgba(255,255,255,.3); }
.msg .tools button.danger { color: var(--wk-error, #c0392b); }
.composer .attach { width: 44px; height: 50px; border-radius: 14px; color: var(--wk-green-700); display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; } .composer .attach svg { width: 22px; height: 22px; }
.composer .attach.rec { color: #fff; background: var(--wk-error, #c0392b); animation: pulse 1s infinite; }
.audiobar { margin-bottom: 6px; align-items: center; } .audiobar.rec { background: #fde7e4; } .audiobar .recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--wk-error, #c0392b); animation: pulse 1s infinite; flex: none; }
.audiobar .aplay { width: 34px; height: 34px; border-radius: 50%; background: var(--wk-orange-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .audiobar .aplay svg { width: 16px; height: 16px; }
@keyframes pulse { 50% { opacity: .55; } }
.event.summary { border-left: 3px solid var(--wk-orange-500); }
.about .setting-t { font-weight: 700; } .legal-body h2 { font-size: 20px; margin: 18px 0 6px; } .legal-body h3 { font-size: 16px; margin: 14px 0 4px; } .legal-body p, .legal-body li { font-size: 14px; line-height: 1.5; } .legal-body ul { padding-left: 20px; }

/* Championnat des Krews (30.09) */
.champ-block { width: 100%; text-align: left; margin-top: 14px; padding: 12px 14px; border: 1.5px solid var(--wk-orange-300); color: var(--wk-ink); } .champ-block.in { background: linear-gradient(135deg, #fff6e8, #ffffff); }
.champ-block .champ-t { font-family: var(--wk-display); color: var(--wk-orange-700); font-size: 15px; } .champ-block .champ-big { font-family: var(--wk-display); font-size: 26px; color: var(--wk-green-700); line-height: 1.1; }
.trophy-sm { font-size: 26px; line-height: 1; } .champ-block .chev { font-size: 22px; color: var(--wk-muted); }
.champ-me { border: 1.5px solid var(--wk-orange-300); margin-bottom: 10px; }
.champ-list .urow.mine { background: var(--wk-orange-100); box-shadow: 0 0 0 1.5px var(--wk-orange-500); }
.champ-rank { width: 30px; text-align: center; font-family: var(--wk-display); color: var(--wk-muted); font-size: 14px; flex: none; } .champ-rank.top { font-size: 20px; }
.champ-score { font-family: var(--wk-display); color: var(--wk-green-700); font-size: 16px; white-space: nowrap; }
.champ-after { margin-top: 16px; color: var(--wk-ink); text-align: left; } .champ-after .champ-btn { margin-top: 8px; }
.chip.on { background: var(--wk-green-700); color: #fff; border-color: var(--wk-green-700); }

/* Championnat — corrections Djé (30.09) */
.champ-page .topbar .ttl { display: flex; flex-direction: column; line-height: 1.15; white-space: normal; } .champ-page .topbar .ttl .champ-sub { font-family: var(--wk-body); font-size: 13px; font-weight: 600; color: var(--wk-muted); }
.champ-cats { margin: 6px 0 12px; } .champ-cats-t { text-align: center; font-family: var(--wk-display); font-size: 15px; color: var(--wk-green-700); margin-bottom: 8px; }
.champ-cats-row { display: flex; gap: 6px; justify-content: space-between; } .champ-cats-row .chip { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 4px; font-size: 13px; height: 34px; white-space: nowrap; }
@media (max-width: 360px) { .champ-cats-row .chip { font-size: 12px; } }
.champ-score { font-variant-numeric: tabular-nums; }
/* Cartouche de la page Krew : fond clair, texte selon le Krew */
.screen.krew .champ-block { background: #FFF6E8; } .champ-block .champ-t { font-size: 14px; line-height: 1.25; }
.champ-block .champ-know { font-size: 15px; margin-top: 4px; } .champ-block .champ-know b { font-family: var(--wk-display); font-size: 20px; color: var(--wk-green-700); }
.champ-block .champ-place { font-size: 13px; margin-top: 2px; }
.champ-block.is-love, .champ-block.is-love .champ-t, .champ-block.is-love .champ-know, .champ-block.is-love .champ-know b, .champ-block.is-love .champ-place, .champ-block.is-love .small, .champ-block.is-love .chev { color: #7A1B34; }
.champ-block.is-love, .screen.krew .champ-block.is-love { background: #FDEEF0; border-color: #E8A3B1; } .champ-block.is-love .bar i { background: #7A1B34; }
:root[data-mode="dark"] .screen.krew .champ-block:not(.is-love) { background: #FFF6E8; }
:root[data-mode="dark"] .champ-block:not(.is-love), :root[data-mode="dark"] .champ-block:not(.is-love) .champ-t, :root[data-mode="dark"] .champ-block:not(.is-love) .champ-know, :root[data-mode="dark"] .champ-block:not(.is-love) .champ-know b, :root[data-mode="dark"] .champ-block:not(.is-love) .champ-place, :root[data-mode="dark"] .champ-block:not(.is-love) .small, :root[data-mode="dark"] .champ-block:not(.is-love) .chev { color: #00323C; }
:root[data-mode="dark"] .champ-block:not(.is-love) .bar i { background: #00323C; }

/* ---- Débriefing (30.09.2026) ---- */
/* Barre du bas collante : réponse en cours, audio (enregistrement / aperçu) et composeur restent ensemble au-dessus de la navigation */
.dock { position: sticky; bottom: calc(var(--wk-nav-h) + var(--wk-sab) + 8px); z-index: 5; display: flex; flex-direction: column; gap: 0; }
.dock .replybar { box-shadow: var(--wk-shadow); margin-bottom: 4px; }
:root[data-mode="dark"] .dock .replybar:not(.audiobar) { background: rgba(0, 35, 43, .9); }
:root[data-mode="dark"][data-theme="love"] .dock .replybar:not(.audiobar) { background: rgba(62, 11, 25, .9); }
/* Composeur : plus de bloc de fond (comme en mode sombre) ; pendant l'écriture, le champ s'élargit vers la gauche (photo et micro masqués). */
.composer .input { box-shadow: var(--wk-shadow); transition: border-color .15s; }
.composer.typing .attach { display: none; }
/* Krew Love en mode sombre : champ de saisie rouge foncé (au lieu du vert) */
:root[data-mode="dark"][data-theme="love"] .composer .input { background: rgba(90, 20, 39, .94); border-color: rgba(247, 182, 195, .35); }
/* Barre d'enregistrement audio : texte toujours lisible (fond clair + texte foncé), y compris en mode sombre et en Krew Love */
.audiobar.rec { background: #FDE7E4; color: #4A1010; box-shadow: var(--wk-shadow); }
.audiobar.rec b { color: #8E1B1B; }
:root[data-mode="dark"] .audiobar.rec { background: #FDE7E4; color: #4A1010; }
:root[data-theme="love"] .audiobar.rec { background: #FFE3E8; color: #3E0B19; } :root[data-theme="love"] .audiobar.rec b { color: #8C1230; }
:root[data-mode="dark"] .audiobar:not(.rec) { background: rgba(0, 35, 43, .88); color: #F2F8F9; }
:root[data-mode="dark"][data-theme="love"] .audiobar:not(.rec) { background: rgba(62, 11, 25, .9); color: #FFF1F3; }
.audiobar .grow b { font-variant-numeric: tabular-nums; }
/* Bulles : appui long (1 s) → fenêtre d'actions. Pas de sélection de texte ni de menu natif iOS sur la bulle ; retour visuel pendant l'appui. */
#chat .msg[data-msg] .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 1s cubic-bezier(.2, .7, .3, 1), filter .2s; }
#chat .msg[data-msg] img { -webkit-touch-callout: none; -webkit-user-drag: none; }
#chat .msg.pressing .bubble { transform: scale(.94); filter: brightness(.94); }
/* Fenêtre du bas (visuel de Djé) : fond assombri et flouté, pilule de réactions, carte d'actions */
.msgsheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; animation: fade .15s ease; }
.msgsheet-bg { position: absolute; inset: 0; background: rgba(20, 24, 26, .38); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
.msgsheet-box { position: relative; width: 100%; max-width: var(--wk-max); padding: 0 14px calc(18px + var(--wk-sab)); display: flex; flex-direction: column; gap: 12px; animation: up .22s ease; }
.emopill { display: flex; align-items: center; justify-content: space-between; gap: 2px; background: #fff; border-radius: 999px; padding: 6px 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.emopill button, .emomore button { font-size: 28px; line-height: 1; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s, background .12s; }
.emopill button:active, .emomore button:active { transform: scale(1.25); }
.emopill button.on, .emomore button.on { background: #F1F1F1; }
.emopill .more { font-size: 26px; font-weight: 400; color: #8A8F93; background: #F1F2F3; width: 40px; height: 40px; flex: none; }
.emopill .more.on { color: #4A4F53; }
.emomore { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.emomore[hidden] { display: none; }
.emomore button { width: 100%; font-size: 26px; }
.actcard { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.actcard button { display: block; width: 100%; text-align: left; padding: 15px 18px; font-size: 17px; font-weight: 500; color: var(--wk-orange-700); background: #fff; }
.actcard button + button { border-top: 1px solid #ECECEC; }
.actcard button:active { background: #F4F4F4; }
.actcard button.danger { color: #E0302B; }
:root[data-theme="love"] .actcard button { color: #8C1230; } :root[data-theme="love"] .actcard button.danger { color: #E0302B; }
.msgsheet-bg, .emopill, .actcard { touch-action: none; } /* la page derrière ne défile pas pendant la fenêtre */
/* ---- Défi « Tes proches te connaissent-ils vraiment ? » (01.10.2026) ---- */
.vp { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
.vp-logo { height: 28px; width: auto; align-self: center; margin-bottom: 2px; }
:root[data-mode="dark"] .vp-logo { filter: brightness(0) invert(1); }
.vp-kicker { font-family: var(--wk-display); font-size: 20px; line-height: 1.15; color: var(--wk-green-700); }
.vp-lead { color: var(--wk-muted); font-weight: 600; font-size: 14px; margin: -4px 0 0; }
.vp-ill { width: min(50vw, 200px); height: auto; aspect-ratio: 1; align-self: center; }
@media (max-height: 760px) { .vp-ill { width: min(36vw, 140px); } .vp { gap: 8px; } .vp-kicker { font-size: 18px; } .vp-choice { padding: 9px 12px; font-size: 14px; } }
.vp-q { font-weight: 700; font-size: 17px; line-height: 1.3; }
.vp-choices { display: flex; flex-direction: column; gap: 8px; }
.vp-choice { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--wk-cream); border: 2px solid transparent; border-radius: 16px; padding: 11px 14px; font-weight: 600; font-size: 15px; color: var(--wk-ink); transition: border-color .12s, background .12s; }
.vp-choice .letter { width: 30px; height: 30px; border-radius: 50%; background: var(--wk-surface); color: var(--wk-green-700); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.vp-choice.on { border-color: var(--wk-orange-500); background: var(--wk-selected-bg); } .vp-choice.on .letter { background: var(--wk-orange-500); color: #fff; }
.vp-row { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.vp-link { font-weight: 700; font-size: 14px; color: var(--wk-green-700); text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
.vp-link.muted { color: var(--wk-muted); font-weight: 600; text-decoration: none; }
.vp-lock { font-size: 40px; line-height: 1; }
.vp-sub { font-weight: 700; font-size: 14px; margin-top: 4px; }
.vp-card { background: #FFF8EE; color: #00323C; border-radius: 18px; padding: 12px; text-align: left; border: 1px solid #F4C378; }
.vp-card-top { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; } .vp-card-top .av { width: 30px; height: 30px; font-size: 11px; }
.vp-card-body { display: flex; gap: 10px; align-items: flex-start; } .vp-card-body > img { width: 84px; height: 84px; flex: none; }
.vp-card-q { font-weight: 700; font-size: 13px; line-height: 1.25; margin: 0 0 6px; }
.vp-card-ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; } .vp-card-ch b { display: inline-block; width: 16px; color: var(--wk-orange-700); }
.vp-card-foot { margin-top: 8px; background: var(--wk-orange-500); color: #fff; border-radius: 999px; padding: 7px; text-align: center; font-weight: 700; font-size: 12px; }
.vp-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vp-pf { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; background: var(--wk-surface); border: 1px solid var(--wk-line); font-weight: 700; font-size: 11px; color: var(--wk-ink); }
.vp-pf .ico { width: 42px; height: 42px; border-radius: 50%; background: var(--pf); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .vp-pf .ico svg { width: 22px; height: 22px; }
.vp-pf.loading { opacity: .6; }
.vp-help { min-height: 18px; font-size: 13px; font-weight: 600; color: var(--wk-green-700); line-height: 1.35; }
.vp-mine { display: flex; gap: 10px; align-items: flex-start; } .vp-mine > img { width: 64px; height: 64px; flex: none; } .vp-mine.off { opacity: .6; }
.vp-browse { display: grid; gap: 6px; max-height: 50vh; overflow: auto; } .vp-browse-item { display: flex; gap: 10px; align-items: center; text-align: left; font-size: 12px; background: var(--wk-cream); border-radius: 12px; padding: 6px 8px; color: var(--wk-ink); } .vp-browse-item img { width: 40px; height: 40px; } .vp-browse-item.off { opacity: .55; }
/* ---- Invitation dans un Krew (02.10.2026) : carte + partage, même esprit que les défis partagés ---- */
.inv { display: flex; flex-direction: column; gap: 12px; }
.inv-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 16px 16px; border-radius: 24px; background: linear-gradient(180deg, #FFF3E3 0%, #FBF7F1 100%); border: 1px solid #F4C378; color: #00323C; box-shadow: var(--wk-shadow); }
.inv-card.love { background: linear-gradient(180deg, #FFF0F1 0%, #FFF7F6 100%); border-color: #F2A6B4; color: #3E0B19; }
.inv-logo { height: 24px; width: auto; margin-bottom: 6px; }
.inv-picto { width: 132px; height: 132px; border-radius: 50%; background: #FEE0BC; display: flex; align-items: center; justify-content: center; margin: 4px 0 6px; }
.inv-card.love .inv-picto { background: #FBE3E8; }
.inv-picto .av.xl { width: 116px; height: 116px; background: transparent; box-shadow: none; }
.inv-kicker { font-weight: 700; font-size: 13px; letter-spacing: .6px; color: #EE8806; } .inv-card.love .inv-kicker { color: #C41E3A; }
.inv-name { font-family: var(--wk-display); font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.inv-sub { font-weight: 600; font-size: 15px; }
.inv-meta { font-size: 12px; font-weight: 600; color: #6B7C82; margin-top: 2px; } .inv-card.love .inv-meta { color: #8A6570; }
.inv-cta { margin-top: 10px; background: #EE8806; color: #fff; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 13px; } .inv-card.love .inv-cta { background: #C41E3A; }
.inv-more { margin-top: -2px; }

/* ===== On s'organise (06.10.2026) ===== */
.org-intro { display: flex; gap: 12px; align-items: flex-start; } .org-intro .big { font-size: 34px; line-height: 1; }
.org-tabs { gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; } .org-tabs::-webkit-scrollbar { display: none; } .org-tabs .chip { flex: none; }
.org-fn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; } .org-fn .ico { font-size: 26px; } .org-fn.on { border-color: var(--wk-orange-500); }
.org-avail { gap: 6px; flex-wrap: wrap; } .org-avail .chip { height: 32px; padding: 0 12px; font-size: 12px; }
.org-slot b { font-size: 15px; } .org-item.covered { border-color: var(--wk-success); } .org-item b { font-size: 15px; }
.org-part .tiny.ok { color: var(--wk-success); } .org-part .tiny.ko { color: var(--wk-error); } .ko { color: var(--wk-error); font-weight: 600; }
.org-act { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px; background: var(--wk-cream); font-size: 16px; font-weight: 600; color: var(--wk-ink); margin-bottom: 8px; }
.org-offer .card { margin: 0; } .org-hist summary { cursor: pointer; } .pill.small { min-width: 36px; height: 36px; font-size: 18px; line-height: 1; }
.event.org-card { border-left: 4px solid var(--wk-orange-500); } .event.org-note { opacity: .92; }
.org .section-title.small { font-size: 13px; margin-top: 6px; } .urow input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--wk-orange-500); margin-right: 4px; }
html[data-mode="dark"] .org-act { background: rgba(255,255,255,.08); color: #fff; }

/* ===== Progression des modes par Krew (10.10.2026) : Quiz d'emblée, Vote après 3 Quiz, Défi après 6 parties ===== */
.gamelist .gitem.mode-locked { color: rgba(255, 255, 255, .34); cursor: pointer; }
.gamelist .gitem.mode-locked .soon { color: rgba(255, 255, 255, .5); letter-spacing: .04em; text-transform: none; font-size: 12px; }
.gamelist .gitem.mode-locked:active { background: rgba(255, 255, 255, .05); }
html[data-mode="light"] .gamelist .gitem.mode-locked, .screen.light .gamelist .gitem.mode-locked { color: var(--wk-soft); }

/* ===== Page Krew, nouvelle maquette (11.10.2026) : en-tête avec vagues, bande d'actions arrondie, panneau à onglets.
   Couleurs relevées sur les maquettes de Djé. Tout est porté par .kv2 : les autres écrans ne changent pas. ===== */
.screen.krew.kv2 { padding: 0; background: linear-gradient(180deg, var(--kv-top) 0%, var(--kv-mid) 38%, var(--kv-bottom) 100%); color: var(--kv-ink); }
.screen.krew.kv2 { --kv-top: #E38F35; --kv-mid: #E9A24A; --kv-bottom: #EFB165; --kv-ink: #FFF; --kv-statink: #3F4A46; --kv-num: #6B5A44;
  --kv-seam: #FCF0E0; --kv-band: #F8E0C0; --kv-panel: #FDF8ED; --kv-wave0: rgba(255,255,255,.09); --kv-wave1: rgba(255,255,255,.07); --kv-wave2: rgba(221,133,41,.35);
  --kv-cta: #E28C32; --kv-ctaring: #F8E0C0; --kv-accent: #E28C32; --kv-card: #FCF9F1; --kv-cardink: #2E2A22; --kv-cardsub: #5E5648;
  --kv-track: #F3E2C8; --kv-fill: #E28C32; --kv-btnborder: #F1DCC0; --kv-btnfill: #FCF9F1; --kv-btnink: #2E2A22;
  --kv-pill1: #FFF6E9; --kv-pill1ink: #B5702A; --kv-pill2: rgba(255,255,255,.26); --kv-pill2ink: #FFF4E6; --kv-line: #EFE3D2;
  --kv-taboff: #A8977F; --kv-tabon: #2E2A22; --kv-chip: #E28C32; --kv-chipink: #FFF; --kv-illu: #F2BE86; }
:root[data-mode="dark"] .screen.krew.kv2 { --kv-top: #12333E; --kv-mid: #1A4250; --kv-bottom: #235567; --kv-statink: #FFF; --kv-num: #81DDF7;
  --kv-seam: #286074; --kv-band: rgba(0,0,0,.14); --kv-panel: rgba(255,255,255,.04); --kv-wave0: rgba(255,255,255,.04); --kv-wave1: rgba(20,55,67,.55); --kv-wave2: rgba(15,47,58,.45);
  --kv-ctaring: #E5B879; --kv-accent: #81DDF7; --kv-card: rgba(255,255,255,.085); --kv-cardink: #FFF; --kv-cardsub: #C3DBE2;
  --kv-track: rgba(255,255,255,.16); --kv-fill: #81DDF7; --kv-btnborder: rgba(255,255,255,.26); --kv-btnfill: transparent; --kv-btnink: #FFF;
  --kv-pill1: #5B8794; --kv-pill1ink: #E6F3F7; --kv-pill2: #2B5E6E; --kv-pill2ink: #9FC2CD; --kv-line: rgba(255,255,255,.09);
  --kv-taboff: #9FBAC3; --kv-tabon: #FFF; --kv-chip: #10303B; --kv-chipink: #81DDF7; --kv-illu: #F2BE86; }
:root[data-theme="love"] .screen.krew.kv2 { --kv-top: #35161D; --kv-mid: #4A1E28; --kv-bottom: #672835; --kv-statink: #FFF; --kv-num: #F2A6B4;
  --kv-seam: #722B32; --kv-band: rgba(0,0,0,.16); --kv-panel: rgba(255,255,255,.045); --kv-wave0: rgba(166,60,66,.30); --kv-wave1: rgba(75,29,39,.55); --kv-wave2: rgba(44,17,24,.45);
  --kv-cta: #C82E3D; --kv-ctaring: #C297A0; --kv-accent: #F2A6B4; --kv-card: #F5D4D6; --kv-cardink: #4A101E; --kv-cardsub: #7A3A45;
  --kv-track: #E7B4B2; --kv-fill: #A63C42; --kv-btnborder: rgba(245,212,214,.45); --kv-btnfill: transparent; --kv-btnink: #FFF;
  --kv-pill1: #9C6A72; --kv-pill1ink: #FFF0F1; --kv-pill2: #672835; --kv-pill2ink: #D9A8B0; --kv-line: rgba(255,255,255,.08);
  --kv-taboff: #C8A0A7; --kv-tabon: #FFF; --kv-chip: #3E141C; --kv-chipink: #F2A6B4; --kv-illu: #A63C42; }

/* en-tête */
.kv2 .k-hero { position: relative; overflow: hidden; padding: 0 20px 18px; flex: none; }
.kv2 .k-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kv2 .k-waves .w0 { fill: var(--kv-wave0); } .kv2 .k-waves .w1 { fill: var(--kv-wave1); } .kv2 .k-waves .w2 { fill: var(--kv-wave2); }
.kv2 .k-hero > *:not(.k-waves) { position: relative; z-index: 1; }
.kv2 .k-hero .topbar { padding-top: 6px; }
.kv2 .k-illu { display: flex; justify-content: center; margin-top: 10px; }
.kv2 .k-illu button { line-height: 0; }
.kv2 .k-illu .av.krew, .kv2 .k-illu .av.krew.xl { width: 200px; height: 200px; border-radius: 50%; background: var(--kv-illu); overflow: visible; }
.kv2 .k-illu .av.krew img { border-radius: 50%; }
.kv2 .k-illu .av.totem-av img { width: 108%; height: 108%; margin: -4%; padding: 0; object-fit: contain; border-radius: 0; }
.kv2 .k-name { font-family: var(--wk-display); font-size: 34px; line-height: 1.05; text-align: center; color: var(--kv-ink); margin: 14px 0 0; }
.kv2 .k-pills { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.kv2 .k-pills span { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
.kv2 .k-pills .p1 { background: var(--kv-pill1); color: var(--kv-pill1ink); }
.kv2 .k-pills .p2 { background: var(--kv-pill2); color: var(--kv-pill2ink); }
.kv2 .k-stats { display: flex; align-items: center; margin-top: 20px; }
.kv2 .k-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; padding: 0; }
.kv2 .k-sep { width: 1px; height: 56px; background: var(--kv-line); flex: none; }
.kv2 .k-cell > b, .kv2 .k-av b { font-family: var(--wk-display); font-size: 38px; line-height: .9; color: var(--kv-num); }
.kv2 .k-av .qmark { opacity: .8; }
.kv2 .k-cell .lab { font-size: 13.5px; font-weight: 600; color: var(--kv-statink); }
.kv2 .k-av { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 46px; }
.kv2 .k-av .picto { position: absolute; width: 25px; height: 25px; right: -10px; top: -8px; }
.kv2 .k-av.with-w .picto { right: auto; left: -10px; }

/* bande des actions : contour clair de 2 px qui suit les angles arrondis */
.kv2 .k-actions { background: var(--kv-band); border: 2px solid var(--kv-seam); border-bottom: 0; border-radius: 28px 28px 0 0; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 11px; flex: none; }
.screen.krew.kv2 .btn.k-cta { height: 60px; border-radius: 999px; background: var(--kv-cta); border: 2px solid var(--kv-ctaring); box-shadow: none; color: #fff; font-family: var(--wk-display); font-size: 23px; }
/* Les deux boutons font exactement la même largeur : une grille de colonnes égales, quelle que soit la longueur du libellé.
   Quand « On s'organise » n'est pas proposé, son emplacement disparaît et « Débrief » prend toute la ligne. */
.kv2 .k-row2 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 11px; }
.kv2 .k-row2 > * { min-width: 0; }
.kv2 .k-row2 > #orgEntry { display: flex; } .kv2 .k-row2 > #orgEntry:empty { display: none; }
.kv2 .k-row2 > #orgEntry > .btn { width: 100%; }
.kv2 .k-row2 .btn svg { width: 26px; height: 26px; flex: none; }
.kv2 .k-row2 .btn { gap: 10px; padding: 0 10px; }
.screen.krew.kv2 .k-row2 .btn { width: 100%; min-width: 0; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 16px; border: 1.5px solid var(--kv-btnborder); background: var(--kv-btnfill); color: var(--kv-btnink); font-size: 15.5px; font-weight: 600; box-shadow: none; width: 100%; }
:root .screen.krew.kv2 .card.champ-block { display: flex; border: 0; align-items: center; gap: 13px; background: var(--kv-card); border-radius: 17px; padding: 13px; box-shadow: none; text-align: left; width: 100%; }
:root .screen.krew.kv2 .champ-block .tro { width: 54px; height: 54px; flex: none; }
:root .screen.krew.kv2 .champ-block .txt { flex: 1; min-width: 0; }
:root .screen.krew.kv2 .champ-block .champ-t { display: block; margin-bottom: 5px; color: var(--kv-cardink); }
:root .screen.krew.kv2 .champ-block .champ-t .l1 { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.15; }
:root .screen.krew.kv2 .champ-block .champ-t .l2 { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; opacity: .85; }
:root .screen.krew.kv2 .champ-block .champ-know, :root .screen.krew.kv2 .champ-block .champ-place { font-size: 13.5px; color: var(--kv-cardsub); display: block; line-height: 1.45; }
:root .screen.krew.kv2 .champ-block .champ-know b, :root .screen.krew.kv2 .champ-block .champ-place b { color: var(--kv-cardink); font-size: 15.5px; }
:root .screen.krew.kv2 .champ-block .bar { display: block; height: 7px; border-radius: 4px; background: var(--kv-track); margin-top: 9px; overflow: hidden; }
:root .screen.krew.kv2 .champ-block .bar i { display: block; height: 100%; background: var(--kv-fill); border-radius: 4px; transition: width .3s; }
:root .screen.krew.kv2 .champ-block .chev { width: 19px; height: 19px; color: var(--kv-cardsub); flex: none; display: flex; }
:root .screen.krew.kv2 .champ-block .chev svg { width: 100%; height: 100%; }

/* panneau à onglets */
.kv2 .k-panel { background: var(--kv-panel); flex: 1 0 auto; padding: 0 18px calc(var(--wk-nav-h) + var(--wk-sab) + 24px); }
.kv2 .k-tabs { display: flex; align-items: center; gap: 24px; padding: 16px 18px 0; margin: 0 -18px; border-bottom: 1px solid var(--kv-line); }
.kv2 .k-tabs .tab { font-size: 17px; font-weight: 600; color: var(--kv-taboff); background: none; border: 0; padding: 0 0 11px; position: relative; }
.kv2 .k-tabs .tab.on { color: var(--kv-tabon); font-weight: 700; }
.kv2 .k-tabs .tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--kv-accent); }
.kv2 .k-tabs .inv { margin-left: auto; color: var(--kv-tabon); font-size: 16px; font-weight: 600; background: none; border: 0; padding: 0 0 11px; }
.kv2 .k-tabs .inv.on { color: var(--kv-accent); }
.kv2 .k-list { display: block; }
.kv2 .k-row { display: flex; align-items: center; gap: 13px; min-height: 78px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--kv-line); padding: 8px 0; text-align: left; }
.kv2 .k-row:last-child { border-bottom: 0; }
.kv2 .k-row .av, .kv2 .k-row .av-wrap { width: 50px; height: 50px; font-size: 18px; flex: none; }
.kv2 .k-row .gr { flex: 1; min-width: 0; }
.kv2 .k-row .nm { font-size: 17px; font-weight: 700; color: var(--kv-tabon); line-height: 1.25; display: block; }
.kv2 .k-row .sub { font-size: 13.5px; color: var(--kv-taboff); line-height: 1.3; display: block; }
.kv2 .k-row .med { width: 34px; height: auto; flex: none; margin-top: 4px; align-self: flex-start; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.kv2 .k-row .chipq { width: 50px; height: 50px; border-radius: 50%; background: var(--kv-chip); color: var(--kv-chipink); font-family: var(--wk-display); font-size: 24px; display: flex; align-items: center; justify-content: center; flex: none; }
.kv2 .k-row .badge { flex: none; }
.kv2 .k-more { display: block; width: 100%; margin-top: 14px; padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--kv-tabon); opacity: .85; background: none; border: 0; text-decoration: underline; }
.kv2 .k-more.small { font-size: 12.5px; font-weight: 500; opacity: .7; }
.kv2 .k-empty { padding: 26px 0; text-align: center; font-size: 14px; color: var(--kv-taboff); }
.kv2 .k-invite { padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.kv2 .k-invite .linkbox { color: var(--wk-ink); }
.kv2 .k-invite .iconbtn, .screen.krew.kv2 .k-invite .iconbtn { color: var(--wk-muted); }
/* Le fond doit couvrir toute la hauteur de l'écran : surclasse les anciens fonds de .screen.krew (clair, sombre, love). */
:root:root .screen.krew.kv2 { background: linear-gradient(180deg, var(--kv-top) 0%, var(--kv-mid) 38%, var(--kv-bottom) 100%); }
/* Barre de navigation : sans arrondi (la règle générique .bar en posait 6 px). */
.bottomnav .bar { border-radius: 0; }

/* ===== « On s'organise » (11.10.2026) : création en 4 étapes, fiche d'une organisation, corrections de mise en page.
   Tout le module est en mode sombre vert : main.js pose data-mode="dark" sur les routes #/organise, les écrans restent
   « screen light » et reprennent donc les jetons sombres existants, sans nouvelle palette. ===== */

/* -- étape 1 : modèles, repris des cartes d'ADN -- */
.org-tpl-list { margin-bottom: 4px; }
.adn-card.org-tpl .ico { background: var(--wk-cream); font-size: 26px; line-height: 1; }
.adn-card.org-tpl.on .ico { background: var(--wk-orange-500); }
.adn-card.org-tpl .radio { color: transparent; }
.adn-card.org-tpl.on .radio { color: #fff; }
:root[data-mode="dark"] .adn-card.org-tpl { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); box-shadow: none; }
:root[data-mode="dark"] .adn-card.org-tpl.on { background: #0F3A3F; border-color: var(--wk-orange-500); box-shadow: 0 0 0 3px var(--wk-accent-ring); }
/* -- étape 3 : visage de l'organisation -- */
.av.krew.xl.org-face { width: 150px; height: 150px; border-radius: 50%; background: var(--wk-cream); }
.av.krew.xl.org-face img { width: 108%; height: 108%; margin: -4%; object-fit: contain; }
.av.krew.xl.org-face .ph { font-size: 54px; }
.org-new .totem-grid { margin-top: 2px; }

/* -- fiche : en-tête (zone 1) -- */
.screen.org.org-v2 { padding: 0; overflow-x: clip; }
.org-v2 .o-hero { padding: 0 20px 20px; text-align: center; }
.org-v2 .o-hero .topbar { padding-top: 6px; }
.org-v2 .o-illu { display: flex; justify-content: center; margin-top: 6px; }
.org-v2 .o-illu .av.krew { width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.06); overflow: visible; }
.org-v2 .o-illu .av.krew img { border-radius: 50%; }
.org-v2 .o-name { font-family: var(--wk-display); font-size: 32px; line-height: 1.06; margin: 14px 0 0; color: var(--wk-ink); }
.org-v2 .o-pills { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.org-v2 .o-pills span { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
.org-v2 .o-pills .p1 { background: rgba(255,255,255,.22); color: var(--wk-ink); }
.org-v2 .o-pills .p2 { background: rgba(255,255,255,.10); color: var(--wk-muted); }
.org-v2 .o-stats { display: flex; align-items: center; margin-top: 20px; }
.org-v2 .o-cell { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; min-height: 84px; background: none; border: 0; padding: 0; }
.org-v2 .o-cell > b { font-family: var(--wk-display); font-size: 40px; line-height: .9; color: var(--wk-green-700); }
.org-v2 .o-cell .lab { font-size: 14px; font-weight: 600; color: var(--wk-ink); }
.org-v2 .o-sep { width: 1px; height: 60px; background: var(--wk-line); flex: none; }
/* petite page de calendrier, comme sur la maquette : bandeau du mois avec ses anneaux, puis le quantième */
.org-v2 .cal { width: 58px; height: 60px; border-radius: 10px; background: #CDEDF5; color: #06394A; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.org-v2 .cal i { font-style: normal; display: block; background: #8CCFE2; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; padding-top: 3px; }
.org-v2 .cal::before { content: ""; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 28px; height: 6px; background-image: radial-gradient(circle at 3px 3px, #06394A 2.4px, transparent 2.6px); background-size: 10px 6px; }
.org-v2 .cal b { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--wk-display); font-size: 26px; line-height: 1; }
.org-v2 .cal.empty b { opacity: .55; }
.org-v2 .o-desc { font-size: 13.5px; line-height: 1.5; color: var(--wk-muted); margin: 18px auto 0; max-width: 330px; }
/* -- fiche : corps (zone 2) -- */
.org-v2 .o-body { flex: 1 0 auto; background: rgba(0,0,0,.16); border-radius: 26px 26px 0 0; border-top: 1px solid rgba(255,255,255,.14); box-shadow: 0 -10px 30px rgba(0,0,0,.18); padding: 18px 20px calc(var(--wk-nav-h) + var(--wk-sab) + 28px); margin-top: 6px; }

/* -- corrections de mise en page demandées le 11.10 -- */
/* Jour / Début / Fin, Date / Payé par, Échéance : les champs ne débordent plus de la fenêtre */
.modal .row > .field, .modal .row > label.field { min-width: 0; }
.modal .input, .modal input.input, .modal select.input { max-width: 100%; min-width: 0; }
.modal input[type="date"].input, .modal input[type="time"].input, .modal input[type="number"].input { width: 100%; min-width: 0; padding-right: 10px; }
.modal input[type="date"].input::-webkit-date-and-time-value, .modal input[type="time"].input::-webkit-date-and-time-value { text-align: left; }
.modal .row { flex-wrap: wrap; }
.modal .row > .field.grow, .modal .row > label.field.grow { flex: 1 1 40%; }
/* Sondage : Disponible / Si nécessaire / Indisponible sur une seule ligne */
.org-avail { display: flex; gap: 6px; flex-wrap: nowrap; margin-top: 8px; }
.org-avail .chip { flex: 1 1 0; min-width: 0; justify-content: center; height: 36px; padding: 0 6px; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; }
@media (max-width: 340px) { .org-avail .chip { font-size: 11px; letter-spacing: -.2px; } }
/* Apports : « Depuis un modèle » et « Ajouter une ligne » sont deux vrais boutons */
.org-addrow { display: flex; gap: 10px; margin-top: 10px; }
.org-addrow .btn { flex: 1 1 0; min-width: 0; height: 48px; border-radius: 14px; font-size: 14.5px; }
/* Barre de navigation : ancrée en bas quoi qu'il arrive */
#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none; }
#nav .bottomnav { position: static; }
/* Deuxième ligne de l'accueil : « Mes plans » + « On s'organise », mêmes gabarits que la ligne des Winks */
.plans-row { margin-top: 10px; }
.btn.org-cta { background: var(--wk-green-fill); color: #fff; box-shadow: none; }
.btn.org-cta:active { transform: scale(.99); }
:root[data-mode="dark"] .btn.org-cta { background: #2C7F96; }
/* Coût d'un Wink annoncé avant le lancement */
.cost-line { text-align: center; font-size: 13.5px; color: rgba(255,255,255,.72); margin: 0; }
.cost-line b { color: #fff; }
.cost-line.on { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 10px 14px; }
.cost-line.premium { color: var(--wk-orange-300, #F5B86B); }
.screen.light .cost-line { color: var(--wk-muted); } .screen.light .cost-line b { color: var(--wk-ink); }
.screen.light .cost-line.on { background: var(--wk-cream); border-color: var(--wk-line); color: var(--wk-ink); }

/* ===== 1.17.3 (11.10.2026) ===== */
/* Krew : une vraie photo remplit le rond (le Totem, lui, déborde un peu comme sur la maquette) */
.kv2 .k-illu .av.krew:not(.totem-av) img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Organisation : visage dans un carré aux angles arrondis (fiche), et en miniature dans les listes */
.org-square { width: 180px; height: 180px; border-radius: 36px; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.org-square img { width: 100%; height: 100%; object-fit: contain; display: block; }
.org-square.has-photo img { object-fit: cover; }
.org-square .ph { font-size: 64px; }
.org-mini { width: 46px; height: 46px; border-radius: 13px; background: var(--wk-cream); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.org-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.org-mini.has-photo img { object-fit: cover; }
.org-mini .ph { font-size: 22px; }
.av.krew.xl.org-face img.is-photo, .org-face.is-photo img { object-fit: cover; width: 100%; height: 100%; margin: 0; }

/* Champs Jour / Début / Fin / Date / Échéance : sur iPhone (Safari), un champ date ou heure garde sa largeur « native » et
   déborde de l'écran tant qu'on ne retire pas son apparence système. On la retire, et les lignes de deux champs deviennent une
   grille de deux colonnes égales qui ne peuvent pas dépasser. */
input[type="date"].input, input[type="time"].input { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; line-height: 46px; text-align: left; }
input[type="date"].input::-webkit-date-and-time-value, input[type="time"].input::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"].input::-webkit-calendar-picker-indicator, input[type="time"].input::-webkit-calendar-picker-indicator { opacity: .7; }
:root[data-mode="dark"] input[type="date"].input::-webkit-calendar-picker-indicator, :root[data-mode="dark"] input[type="time"].input::-webkit-calendar-picker-indicator { filter: invert(1); }
.modal .field { min-width: 0; }
.modal .row:has(> .field.grow) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.modal .row:has(> .field.grow):has(> .field:not(.grow)) { grid-template-columns: minmax(0, 1fr) auto; }
.modal .row:has(> .field.grow) > .field { width: auto; min-width: 0; }
/* Ceinture et bretelles pour Safari sur iPhone : même si le champ natif garde une largeur minimale, son conteneur ne le laisse
   jamais dépasser ni chevaucher son voisin (la marge intérieure garde visible l'anneau orange de sélection). */
.modal .field:has(input[type="date"]), .modal .field:has(input[type="time"]) { overflow: hidden; padding: 3px; margin: -3px; }

/* ===== 1.17.4 (11.10.2026) ===== */
/* Organisation : l'onglet choisi (Date / Apports / Comptes) ressort nettement — orange plein, texte blanc ; les autres restent discrets */
.org-tabs .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--wk-ink); }
.org-tabs .chip.on, :root[data-mode="dark"] .org-tabs .chip.on { background: var(--wk-orange-500); border-color: var(--wk-orange-500); color: #fff; box-shadow: 0 4px 14px rgba(238,136,6,.35); }
/* En-tête d'une organisation : plus d'air entre les trois chiffres, la description et l'état */
.org-v2 .o-stats { margin-top: 22px; }
.org-v2 .o-desc { margin-top: 28px; }
.org-v2 .o-state { margin-top: 22px; }

/* ===== Notifications : pictogrammes « Badges signature » (17.10.2026) =====
   Boîte de 48 × 48, image entière (badge et traits décoratifs compris), sans fond, sans masque, sans filtre, ni ombre ajoutée :
   les mêmes couleurs en mode standard, sombre et LOVE, qu'il s'agisse d'une notification lue ou non. */
.notif .ico.pic { width: 48px; height: 48px; background: none; border-radius: 0; padding: 0; overflow: visible; }
.notif .ico.pic .notif-pic { width: 48px; height: 48px; object-fit: contain; display: block; flex-shrink: 0; filter: none; box-shadow: none; }
.notif { gap: 12px; }
.notif .grow { min-width: 0; } .notif .t { overflow-wrap: anywhere; }
/* Listes de Winks (onglet « Winks » d'un Krew, page « Winks du Krew ») : mêmes pictogrammes que les notifications, 48 × 48, sans fond ni masque */
.game-pic { width: 48px; height: 48px; object-fit: contain; display: block; flex-shrink: 0; filter: none; box-shadow: none; }
.kv2 .k-row .game-pic { margin: 0 1px; }

/* ---- Application iPhone : mise à jour disponible / nécessaire (17.10.2026) ---- */
.upd-banner { position: fixed; z-index: 9000; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 8px); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px; background: #FFF4E8; color: #3A2A1A; border: 1.5px solid var(--wk-orange-500, #F28C28); box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: 13px; line-height: 1.3; }
.upd-banner .upd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upd-banner .upd-txt b { font-size: 14px; }
.upd-banner .upd-go, .upd-wall .upd-go { flex: none; border: 0; border-radius: 999px; padding: 9px 14px; font: inherit; font-weight: 700; background: var(--wk-orange-500, #F28C28); color: #fff; cursor: pointer; }
.upd-banner .upd-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.upd-wall { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; background: #F7F1E8; color: #1F2A2A; text-align: center; }
.upd-wall .upd-box { max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.upd-wall .upd-logo { width: 150px; height: auto; margin-bottom: 8px; }
.upd-wall h2 { margin: 0; font-size: 24px; }
.upd-wall p { margin: 0; font-size: 15px; line-height: 1.45; }
.upd-wall .upd-go { padding: 14px 26px; font-size: 16px; margin-top: 6px; }
.upd-wall .upd-ver, .upd-wall .upd-hint { font-size: 12px; opacity: .7; }
:root[data-mode="dark"] .upd-banner { background: #2A2118; color: #F7EADB; }
/* ---- Suppression du compte ---- */
.del-setting .setting-t { color: var(--wk-error, #c0392b); }
.del-modal .del-krews { margin: 0; padding-left: 18px; }
.del-modal p { margin: 0; }
/* ---- 1.19.0 · Défis : « Choisis ton défi » / « Crée ton défi » (même habillage que les écrans de choix : grands mots, trait orange) ---- */
.gamelist .gitem.dzone { font-size: 46px; line-height: .98; padding: 34px 20px 26px; min-height: 168px; }
.gamelist .gitem.dzone .gword { display: block; }
.gamelist .gitem.dzone:active { background: var(--wk-gitem-on); color: var(--wk-green-900); }
.gamelist .gitem.dzone:active .tag { color: var(--wk-green-900); }
@media (hover: hover) and (pointer: fine) { .gamelist .gitem.dzone:hover { background: rgba(255,255,255,.05); } }
.dcards-wrap { position: relative; margin: 0 -20px; }
.dcards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 9% 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; outline: none; }
.dcards::-webkit-scrollbar { display: none; }
.dcards:focus-visible { box-shadow: inset 0 0 0 2px var(--wk-orange-300); border-radius: 12px; }
.dcard { flex: 0 0 82%; scroll-snap-align: center; scroll-snap-stop: always; background: var(--wk-cream); color: var(--wk-ink); border-radius: var(--wk-r-card); padding: 20px 20px 18px; min-height: 320px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--wk-shadow-lg); transform: scale(.93); opacity: .62; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.dcard.on { transform: none; opacity: 1; }
.dcard.ghost { opacity: .25; margin: 0 auto; }
.dcards-wait { display: flex; justify-content: center; padding: 8px 0 12px; }
.dcard h2 { margin: 6px 0 0; font-family: var(--wk-display); font-weight: 400; font-size: 29px; line-height: 1.04; color: var(--wk-green-900); }
.dcard h2::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 2px; margin-top: 12px; background: var(--wk-orange-500); }
.dcard .brief { margin: 0; font-size: 16px; line-height: 1.4; color: var(--wk-green-700); font-weight: 600; }
.dcard .crit { margin: auto 0 0; font-size: 13.5px; line-height: 1.35; background: var(--wk-white); color: var(--wk-ink); padding: 10px 12px; border-radius: 14px; }
.dc-recent { font-size: 11px; font-weight: 700; color: var(--wk-muted); }
.dc-dots { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 16px; color: rgba(255,255,255,.7); font-size: 12.5px; font-weight: 700; }
.dc-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.28); transition: width .25s, background .25s; }
.dc-dots i.on { width: 20px; background: var(--wk-orange-500); }
.dc-hint { margin: 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--wk-orange-300); transition: opacity .5s; }
.dc-hint.gone { opacity: 0; }
.dc-nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .dc-nav { display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); color: var(--wk-white); font-size: 28px; line-height: 1; }
  .dc-nav:hover:not(:disabled) { background: var(--wk-orange-500); color: var(--wk-green-900); }
  .dc-nav.prev { left: 4px; } .dc-nav.next { right: 4px; } .dc-nav:disabled { opacity: .2; cursor: default; }
}
.dcards.nudge .dcard:first-child { animation: dcNudge 1.5s ease .7s 1; }
@keyframes dcNudge { 0%, 100% { transform: none; } 45% { transform: translateX(-34px); } }
@media (prefers-reduced-motion: reduce) { .dcard { transition: none; } .dcards.nudge .dcard:first-child { animation: none; } }
.dc-form { gap: 14px; }
.dc-form .field .label, .dark .dc-form .field .label { color: var(--wk-green-700); }
.dark .dc-form .muted { color: var(--wk-muted); }
.dc-form .check, .dark .dc-form .check { color: var(--wk-ink); }
.dc-form .check .muted { color: var(--wk-muted); }
.prefix-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.prefix-field .prefix { font-weight: 700; font-size: 14px; color: var(--wk-green-900); white-space: nowrap; }
.prefix-field .input { flex: 1 1 170px; }
.dc-consent { padding: 12px; border-radius: 14px; background: var(--wk-white); }
/* ---- 1.19.0 · Secret Santa ---- */
.org-santa .santa-reveal { background: var(--wk-grad-dark); color: var(--wk-white); text-align: center; padding: 18px; }
.org-santa .santa-name { font-family: var(--wk-display); font-weight: 400; font-size: 30px; line-height: 1.05; color: var(--wk-orange-300); }
.org-santa-budget .input { min-width: 0; }
/* ---- 1.19.1 · Pictogrammes des modèles d'organisation (« Un modèle pour démarrer ») ---- */
.adn-card.org-tpl .ico.has-picto, .adn-card.org-tpl.on .ico.has-picto { background: transparent; width: 58px; height: 58px; border-radius: 0; overflow: visible; }
.adn-card.org-tpl .ico.has-picto img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.adn-card.org-tpl.on .ico.has-picto img { transform: scale(1.08) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .adn-card.org-tpl .ico.has-picto img { transition: none; } }
/* ---- 1.19.2 · Pictogrammes Winkrew dans tout « On s'organise » (fonctions, accueil, listes, visage par défaut) ---- */
.org-pic { display: block; width: 100%; height: 100%; object-fit: contain; }
.org-pic.i { display: inline-block; width: 1.45em; height: 1.45em; vertical-align: -.38em; margin-right: 2px; }
.org-pic.xl { width: 64px; height: 64px; margin: 0 auto; }
.org-intro .big .org-pic.xl { width: 56px; height: 56px; }
.empty .big .org-pic.xl { width: 84px; height: 84px; }
.org-fn .ico.has-picto { width: 46px; height: 46px; font-size: 0; flex: none; }
.ph.has-picto { display: inline-flex; width: 72%; height: 72%; align-items: center; justify-content: center; }
.org-mini .ph.has-picto, .org-square .ph.has-picto { width: 78%; height: 78%; }
.av.org-todo-pic { background: transparent !important; overflow: visible; }
.chip .org-pic.i, .pill-emoji .org-pic.i { width: 1.6em; height: 1.6em; vertical-align: -.45em; }

/* ===== 1.23.0 (23.10.2026) — choix sélectionnés en orange, Activité, lien, nouveaux membres, notifications, mot de passe ===== */
/* Règle de Djé : tout bouton de choix sélectionné se voit, en orange (avant : pétrole, invisible sur les fiches sombres d'On s'organise) */
.chip.on, :root[data-mode="dark"] .chip.on, .org .chip.on { background: var(--wk-orange-500); border-color: var(--wk-orange-500); color: #fff; box-shadow: 0 3px 10px rgba(238,136,6,.28); }
.chip[aria-pressed="true"] { background: var(--wk-orange-500); border-color: var(--wk-orange-500); color: #fff; }
.segmented button.on { background: var(--wk-orange-500); border-color: var(--wk-orange-500); color: #fff; }
.chip.ghost-chip { background: transparent; }
/* Activité */
.org-activity .org-pic.act { width: 52px; height: 52px; flex: none; }
.org-activity-chosen .org-pic.act.big { width: 72px; height: 72px; flex: none; }
.org-activity.mine { border-color: var(--wk-orange-500); }
.org-act-cat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.act-pill { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16); color: inherit; font-weight: 700; font-size: 12px; text-align: center; line-height: 1.2; }
.act-pill .org-pic.i { width: 44px; height: 44px; margin: 0; vertical-align: 0; }
.act-pill:active { transform: scale(.97); }
:root:not([data-mode="dark"]) .org:not(.org-v2) .act-pill { background: var(--wk-surface); border-color: var(--wk-line); }
/* Lien de l'événement */
.org-v2 .o-link { display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 0; max-width: 330px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: inherit; font-weight: 700; font-size: 13px; text-decoration: none; overflow: hidden; }
.org-v2 .o-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; }
.o-hero { text-align: center; }
/* Nouveaux membres du Krew */
.org-newmembers .av-stack { gap: 0; } .org-newmembers .av-stack .av { margin-right: -8px; box-shadow: 0 0 0 2px var(--wk-surface); }
/* Notifications : balayer pour supprimer */
.notif-wrap { position: relative; overflow: hidden; border-radius: 18px; }
.notif-wrap .notif-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 22px; background: var(--wk-error, #D93025); color: #fff; font-weight: 700; font-size: 13px; border-radius: 18px; }
.notif-wrap .notif { position: relative; transition: transform .2s ease, opacity .2s ease; touch-action: pan-y; }
.notif-wrap.dragging .notif { transition: none; }
.notif-wrap.gone { transition: max-height .25s ease, opacity .2s ease, margin .25s ease; max-height: 0 !important; opacity: 0; margin: 0 !important; }
.notif .x { flex: none; align-self: center; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--wk-muted); font-size: 15px; }
.notif-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
/* Mot de passe : afficher / masquer */
.pw-wrap { position: relative; display: block; } .pw-wrap .input { padding-right: 52px; width: 100%; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--wk-muted); background: transparent; }
.pw-eye svg { width: 22px; height: 22px; } .pw-eye[aria-pressed="true"] { color: var(--wk-orange-500); }
.notif-tools .link { white-space: nowrap; flex: none; }

/* ---- « Défis vocaux — BÊTA » (1.26.0) : testeurs uniquement ---- */
.vg-beta { display: inline-block; vertical-align: middle; font-family: var(--wk-body); font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; background: var(--wk-orange-500); color: #fff; line-height: 1; }
.gamelist .gitem.dzone.vg-zone .vg-beta { font-size: 13px; transform: translateY(-14px); }
.vg-quota { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; border-radius: 16px; background: rgba(255,255,255,.08); font-size: 14px; }
.vg-quota b { font-family: var(--wk-display); font-size: 24px; color: var(--wk-orange-300); } .vg-quota span { font-size: 11.5px; opacity: .7; }
.vg-list { display: flex; flex-direction: column; gap: 10px; }
.vg-mission { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.08); color: inherit; border: 1px solid rgba(255,255,255,.1); }
.vg-mission:active { background: rgba(255,255,255,.16); }
.vg-mission b { display: block; font-size: 16px; } .vg-mission .tiny { display: block; opacity: .72; margin-top: 2px; }
.vg-emoji { font-size: 30px; line-height: 1; flex: none; min-width: 38px; text-align: center; }
.vg-wait { flex: none; font-size: 11px; font-weight: 800; padding: 5px 9px; border-radius: 999px; background: var(--wk-orange-500); color: #fff; }
.vg-wait.big { display: block; font-size: 13px; font-weight: 700; padding: 10px 12px; border-radius: 14px; text-align: center; }
.vg-head { display: flex; align-items: center; gap: 14px; } .vg-head h1 { margin: 6px 0 0; font-size: 24px; line-height: 1.15; }
.vg-big { font-size: 56px; line-height: 1; flex: none; }
.vg-starter { font-weight: 700; font-style: italic; }
.vg-chars { display: flex; gap: 8px; flex-wrap: wrap; }
.vg-char { flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; border: 2px solid var(--wk-line); background: var(--wk-surface); color: var(--wk-ink); font-size: 12.5px; font-weight: 700; }
.vg-char span { font-size: 28px; } .vg-char.on { border-color: var(--wk-orange-500); background: var(--wk-cream); } .vg-char:disabled { opacity: .55; }
.vg-busy { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 10px; text-align: center; }
.vg-busy .spin { width: 34px; height: 34px; border-color: rgba(238,136,6,.25); border-top-color: var(--wk-orange-500); border-width: 4px; }
.vg-player { flex-wrap: wrap; } .vg-pl { width: 100%; } .vg-player .abar { flex: 1; height: 6px; border-radius: 3px; background: var(--wk-line); overflow: hidden; } .vg-player .abar i { display: block; height: 100%; width: 0; background: var(--wk-orange-500); }
.vg-player.small .aplay { width: 36px; height: 36px; } .vg-player.small .aplay svg { width: 16px; height: 16px; }
.vg-orig { padding-top: 6px; border-top: 1px dashed var(--wk-line); }
.vg-fun { display: flex; justify-content: space-between; gap: 6px; } .vg-fun button { flex: 1; font-size: 26px; padding: 6px 0; border-radius: 12px; background: var(--wk-paper); filter: grayscale(.6); opacity: .7; }
.vg-fun button.on { filter: none; opacity: 1; background: var(--wk-cream); box-shadow: inset 0 0 0 2px var(--wk-orange-500); }
.vg-duel { padding: 14px; border-radius: 18px; border: 1px solid var(--wk-line); background: var(--wk-surface); }
.vg-entry { padding: 10px 12px; border-radius: 14px; background: var(--wk-paper); display: flex; flex-direction: column; gap: 6px; } .vg-entry.mine { background: var(--wk-cream); }
.vg-stars { display: flex; gap: 4px; } .vg-stars button { font-size: 26px; line-height: 1; padding: 2px 4px; color: var(--wk-line); } .vg-stars button.on { color: var(--wk-orange-500); }
.vg-banner { text-align: center; font-size: 16px; padding: 10px; border-radius: 14px; background: var(--wk-cream); color: var(--wk-ink); }
.vg-board { padding: 8px 0; border-bottom: 1px solid var(--wk-line); }

/* ---- 1.27.0 : « 🎯 Défier mes proches ! » dans « Moi » ---- */
.proches-card { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 18px; padding: 16px 16px 16px 14px; text-align: left; border-radius: var(--wk-r-card); background: var(--wk-grad-accent); color: var(--wk-green-900); box-shadow: 0 10px 26px var(--wk-accent-glow); transition: transform .12s; }
.proches-card:active { transform: scale(.98); }
.proches-card .pc-emo { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.55); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; flex: none; }
.proches-card .pc-t { display: block; font-family: var(--wk-display); font-size: 21px; line-height: 1.1; }
.proches-card .pc-s { display: block; font-size: 13.5px; font-weight: 600; margin-top: 3px; opacity: .85; }
.proches-card .chev { font-size: 28px; line-height: 1; opacity: .7; }

/* ===================== « Défis sportifs » (1.28.0, prototype privé) — ambiance BLEUE : bleu profond + bleu vif, fond clair ===================== */
.sport-screen { --sp-deep: #0B2D6B; --sp-blue: #1F6FE0; --sp-bright: #3A8DFF; --sp-sky: #EAF2FF; --sp-line: #D3E2FB; --sp-ink: #0B1F44; --sp-ok: #1C7C4A; --sp-ko: #C2413B;
  background: linear-gradient(180deg, #F3F7FF 0%, #EAF2FF 100%) !important; color: var(--sp-ink) !important; }
:root[data-mode="dark"] .sport-screen { background: linear-gradient(180deg, #F3F7FF 0%, #EAF2FF 100%) !important; }
.sport-screen .topbar .iconbtn { color: var(--sp-deep); }
.sp-hero { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--sp-deep) 0%, var(--sp-blue) 100%); color: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 12px 30px rgba(11, 45, 107, .25); }
.sp-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; } .sp-hero.small { padding: 14px 16px; }
.sp-title { font-family: var(--wk-display); font-size: 26px; line-height: 1.1; color: inherit; }
.sport-screen .stack > .sp-title, .sport-screen .center > .sp-title { color: var(--sp-deep); }
.sp-kicker { font-size: 12px; font-weight: 700; letter-spacing: .02em; opacity: .9; margin-bottom: 4px; }
.sp-mascot { width: 56px; height: 56px; flex: none; } .sp-mascot.big { width: 84px; height: 84px; }
.sp-beta { display: inline-block; font-family: var(--wk-body); font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: 999px; background: var(--sp-bright, #3A8DFF); color: #fff; vertical-align: middle; }
/* 1.30.0 : « Défis sportifs » blanc comme « On s’organise » / « Débrief » ; bleu (.live) seulement quand un défi est en cours dans le Krew */
.sp-entry { height: 56px; border-radius: 16px; border: 1.5px solid var(--kv-btnborder, var(--wk-line)) !important; background: var(--kv-btnfill, var(--wk-surface)) !important; color: var(--kv-btnink, var(--wk-ink)) !important; font-size: 15.5px; font-weight: 600; box-shadow: none !important; }
.sp-entry.live { background: linear-gradient(135deg, #0B2D6B, #1F6FE0) !important; color: #fff !important; border-color: transparent !important; }
.sport-screen .sp-cta { background: var(--sp-blue); color: #fff; box-shadow: 0 8px 20px rgba(31, 111, 224, .3); margin-top: 14px; } .sport-screen .sp-cta:hover { background: var(--sp-bright); }
.sport-screen .btn.white { color: var(--sp-deep); }
.sp-sec { font-family: var(--wk-display); font-size: 19px; color: var(--sp-deep); margin: 20px 0 8px; }
.sp-list { display: flex; flex-direction: column; gap: 8px; }
.sp-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--sp-line); border-radius: 16px; padding: 12px 14px; color: var(--sp-ink); }
.sp-row b, .sp-tpl b { display: block; font-size: 15px; } .sp-row .tiny, .sp-tpl .tiny { display: block; color: #4A5C7E; margin-top: 2px; }
.sp-row-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sp-sky); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.sp-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: #E3E9F4; color: #3B4C6B; white-space: nowrap; }
.sp-chip.run { background: #DCE9FF; color: var(--sp-blue); } .sp-chip.ok { background: #DDF2E6; color: var(--sp-ok); } .sp-chip.ko { background: #FBE3E1; color: var(--sp-ko); }
.sp-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .sp-cats::-webkit-scrollbar { display: none; }
.sp-cat { flex: none; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--sp-line); color: var(--sp-deep); font-weight: 600; font-size: 13px; }
.sp-cat.on { background: var(--sp-deep); color: #fff; border-color: var(--sp-deep); }
.sp-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sp-tpl { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: #fff; border: 1px solid var(--sp-line); border-radius: 18px; padding: 12px; color: var(--sp-ink); min-height: 132px; }
.sp-tpl.custom { border-style: dashed; border-color: var(--sp-bright); background: #F6F9FF; }
.sp-tpl-ico { font-size: 24px; line-height: 1; } .sp-tpl-meta { display: flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 700; color: #4A5C7E; }
.sp-mode { padding: 2px 7px; border-radius: 999px; background: #DCE9FF; color: var(--sp-blue); } .sp-mode.individual { background: #E6E2FF; color: #4B3BB5; }
.sp-del { position: absolute; top: 6px; right: 8px; font-size: 13px; color: #6B7C9A; padding: 4px; }
.sp-lbl { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; color: var(--sp-deep); }
.sp-in { width: 100%; min-height: 46px; border: 1px solid var(--sp-line); border-radius: 12px; padding: 10px 12px; background: #fff; color: var(--sp-ink); font: 500 15px var(--wk-body); }
.sp-in:focus { outline: 2px solid var(--sp-bright); border-color: transparent; } textarea.sp-in { resize: vertical; }
.sp-num { text-align: right; font-weight: 700; }
.sp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-modebtn { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 16px; background: #fff; border: 2px solid var(--sp-line); color: var(--sp-ink); }
.sp-modebtn span:first-child { font-size: 22px; } .sp-modebtn .tiny { color: #4A5C7E; } .sp-modebtn.on { border-color: var(--sp-blue); background: #EEF4FF; box-shadow: 0 0 0 3px rgba(58, 141, 255, .18); }
.sp-act { background: #fff; border: 1px solid var(--sp-line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sp-act-top { display: flex; gap: 6px; align-items: center; } .sp-ico-sel { width: 54px; min-height: 46px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-sky); font-size: 20px; text-align: center; }
.sp-tools { display: flex; } .sp-tools .iconbtn { width: 30px; height: 30px; font-size: 15px; color: var(--sp-deep); } .sp-tools .iconbtn[disabled] { opacity: .3; }
.sp-act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sp-act-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #4A5C7E; } .sp-act-grid .wide { grid-column: span 2; }
.sp-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-people { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-person { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--sp-line); color: var(--sp-ink); font-weight: 600; font-size: 14px; }
.sp-person.on { background: var(--sp-deep); color: #fff; border-color: var(--sp-deep); } .sp-person.off { opacity: .55; } .sp-person.test { background: #FFF6E5; border-color: #F4C378; }
.sp-x { border: 0; background: none; color: inherit; font-size: 12px; padding: 0 0 0 2px; }
.sp-box { background: #fff; border: 1px solid var(--sp-line); border-radius: 18px; padding: 14px; }
.sp-tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 2px 6px; border-radius: 6px; background: #FFF0D6; color: #8A5300; }
.sp-rules { background: #fff; border: 1px solid var(--sp-line); border-left: 5px solid var(--sp-blue); border-radius: 16px; padding: 14px; font-size: 14px; }
.sp-rules p { margin: 6px 0; } .sp-rules ul { margin: 6px 0; padding-left: 18px; } .sp-strict { font-weight: 700; color: var(--sp-deep); }
.sp-acts-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sp-big { background: #fff; border: 1px solid var(--sp-line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; } .sp-big b { font-family: var(--wk-display); font-size: 30px; color: var(--sp-deep); } .sp-big .tiny { color: #4A5C7E; }
.sp-big-ico { font-size: 26px; line-height: 1; }
.sp-prow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EEF2F9; } .sp-prow:last-child { border-bottom: 0; }
.sp-mini { display: flex; gap: 2px; } .sp-mini .iconbtn { width: 32px; height: 32px; color: var(--sp-deep); background: var(--sp-sky); border-radius: 10px; }
.sp-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--sp-sky); color: var(--sp-deep); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.sp-banner { background: #DCE9FF; color: var(--sp-deep); border-radius: 14px; padding: 12px 14px; font-weight: 600; font-size: 14px; } .sp-banner.ko { background: #FBE3E1; color: #8E2B26; }
.sp-card { background: #fff; border: 1px solid var(--sp-line); border-radius: 20px; padding: 14px; box-shadow: 0 6px 18px rgba(11, 45, 107, .06); }
.sp-card-top { display: flex; align-items: center; gap: 10px; } .sp-card-top b { display: block; } .sp-card-top .tiny { display: block; color: #4A5C7E; }
.sp-num-big { margin: 10px 0 6px; font-size: 15px; color: #4A5C7E; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sp-num-big b { font-family: var(--wk-display); font-size: 40px; line-height: 1; color: var(--sp-deep); } .sp-num-big em { margin-left: auto; font-style: normal; font-family: var(--wk-display); font-size: 24px; color: var(--sp-blue); }
.sp-gauge { position: relative; height: 14px; border-radius: 999px; background: #E3ECFA; overflow: visible; margin-top: 4px; }
.sp-gauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sp-blue), var(--sp-bright)); transition: width .4s ease; }
.sp-gauge.success i { background: linear-gradient(90deg, #1F6FE0, #2BB673); } .sp-gauge.failed i { background: linear-gradient(90deg, #8FA3C4, #A9B7CF); }
.sp-over { position: absolute; right: 0; top: -20px; font-size: 11px; color: var(--sp-blue); }
.sp-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 4px; }
.sp-dot { width: 22px; height: 22px; border-radius: 50%; background: #E3ECFA; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sp-dot.ok { background: var(--sp-blue); } .sp-dot.ko { background: var(--sp-ko); } .sp-dot.open { background: #fff; box-shadow: inset 0 0 0 3px var(--sp-bright); } .sp-dot.up { background: #EEF2F9; }
.sp-indiv { padding: 10px 0; border-top: 1px solid #EEF2F9; } .sp-indiv:first-of-type { margin-top: 8px; }
.sp-declare { display: flex; flex-direction: column; gap: 6px; } .sp-drow { padding-top: 10px; border-top: 1px solid #EEF2F9; display: flex; flex-direction: column; gap: 6px; } .sp-drow:first-of-type { border-top: 0; }
.sp-dctl { gap: 6px; flex-wrap: nowrap; } .sp-dctl .sp-num { width: 96px; flex: 1 1 80px; min-width: 70px; }
.sp-done { flex: none; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--sp-line); background: #fff; color: var(--sp-deep); font-weight: 700; font-size: 14px; }
.sp-done.on { background: var(--sp-blue); border-color: var(--sp-blue); color: #fff; } .sp-done.no.on { background: #8FA3C4; border-color: #8FA3C4; }
.sp-result { text-align: center; border-radius: 24px; padding: 22px 16px; color: #fff; background: linear-gradient(135deg, var(--sp-deep), var(--sp-blue)); box-shadow: 0 12px 30px rgba(11, 45, 107, .25); }
.sp-result .sp-title { font-size: 30px; margin-top: 8px; } .sp-result p { margin: 6px 0 0; opacity: .9; }
.sp-result.ko { background: #fff; color: var(--sp-ink); border: 1px solid var(--sp-line); box-shadow: none; } .sp-result.ko .sp-title { color: var(--sp-deep); }
.sp-modal .sp-catlist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-catitem { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 12px; border: 1px solid #D3E2FB; background: #F6F9FF; color: #0B1F44; font-weight: 600; font-size: 14px; text-align: left; } .sp-catitem span:first-child { font-size: 20px; }
.sport-screen .err { color: var(--sp-ko); font-weight: 600; }
@media (max-width: 370px) { .sp-tpls { grid-template-columns: 1fr; } .sp-dctl { flex-wrap: wrap; } .sp-title { font-size: 23px; } }
.sp-dates > label, .sp-act-grid > label { min-width: 0; } .sp-dates .sp-in, .sp-act-grid .sp-in { min-width: 0; max-width: 100%; }

/* ===================== « LE MITO » (1.29.0) — même style que le Quiz et le Vote (écran clair, cartes blanches, orange) ; aucun pictogramme,
   ni vert ni rouge. VRAI / FAUX : un seul interrupteur, curseur orange qui glisse à gauche (VRAI) ou à droite (FAUX). ===================== */
.mito .mt-kicker { margin: 0 0 -10px; font-size: 13px; font-weight: 700; color: var(--wk-muted); }
.mito .mt-field { display: flex; flex-direction: column; gap: 8px; }
.mito .mt-lbl { font-weight: 700; font-size: 15px; color: var(--wk-ink); }
.mito .mt-ta { width: 100%; min-height: 120px; resize: vertical; border-radius: 18px; border: 2px solid transparent; background: var(--wk-surface); color: var(--wk-ink); padding: 14px 16px; font: 600 15px/1.4 var(--wk-body); box-shadow: var(--wk-shadow); }
.mito .mt-ta:focus { outline: none; border-color: var(--wk-orange-500); background: var(--wk-selected-bg); }
.mito .mt-ta::placeholder { color: var(--wk-soft); font-weight: 500; }
.mito .mt-count { align-self: flex-end; font-size: 12px; font-weight: 700; color: var(--wk-muted); margin-top: -2px; }
.mt-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 6px; border-radius: var(--wk-r-pill); background: #E4E9EA; box-shadow: inset 0 2px 4px rgba(0, 50, 60, .12); touch-action: pan-y; user-select: none; -webkit-user-select: none; max-width: 420px; width: 100%; margin: 0 auto; }
.mt-switch .mt-opt { position: relative; z-index: 1; height: 54px; margin: 0 3px; border-radius: var(--wk-r-pill); background: var(--wk-white); color: #8C8C8C; font-family: var(--wk-display); font-size: 22px; letter-spacing: .01em; box-shadow: 0 3px 6px rgba(0, 50, 60, .14); transition: color .2s, background .2s; cursor: pointer; }
.mt-switch .mt-thumb { position: absolute; z-index: 2; top: 6px; left: 9px; width: calc(50% - 12px); height: 54px; border-radius: var(--wk-r-pill); background: var(--wk-orange-500); box-shadow: 0 6px 14px var(--wk-accent-glow); opacity: 0; transform: translateX(0); transition: transform .28s cubic-bezier(.3,.7,.2,1), opacity .15s; pointer-events: none; }
.mt-switch.is-left .mt-thumb, .mt-switch.is-right .mt-thumb { opacity: 1; } .mt-switch.is-right .mt-thumb { transform: translateX(calc(100% + 6px)); }
.mt-switch.dragging .mt-thumb { transition: none; }
.mt-switch .mt-opt[aria-checked="true"] { color: var(--wk-white); background: transparent; box-shadow: none; position: relative; z-index: 3; }
.mt-switch .mt-opt:focus-visible { outline: 3px solid var(--wk-orange-300); outline-offset: 2px; }
.mt-switch.readonly { max-width: 300px; padding: 4px; } .mt-switch.readonly .mt-opt { height: 40px; font-size: 17px; cursor: default; } .mt-switch.readonly .mt-thumb { top: 4px; height: 40px; left: 7px; width: calc(50% - 10px); }
.mt-switch.readonly.is-right .mt-thumb { transform: translateX(calc(100% + 6px)); }
.mito .mt-story-card { display: flex; flex-direction: column; gap: 12px; }
.mito .mt-author { display: flex; align-items: center; gap: 10px; } .mito .mt-author b { font-size: 16px; color: var(--wk-ink); }
.mito .mt-story { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--wk-ink); overflow-wrap: anywhere; white-space: pre-wrap; } .mito .mt-story.big { font-size: 18px; }
.mito .mt-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.mito .mt-pp { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 60px; opacity: .55; } .mito .mt-pp.ok { opacity: 1; } .mito .mt-pp.off { opacity: .35; }
.mito .mt-pp .tiny { font-weight: 700; color: var(--wk-ink); } .mito .mt-pp-st { font-size: 11px; font-weight: 700; color: var(--wk-muted); } .mito .mt-pp.ok .mt-pp-st { color: var(--wk-orange-700); }
.mito .mt-row { cursor: default; } .mito .mt-row .grow { font-weight: 600; }
.mito .mt-pts { font-family: var(--wk-display); font-size: 20px; color: var(--wk-orange-500); white-space: nowrap; }
.mito .mt-win { font-family: var(--wk-display); font-size: 21px; color: var(--wk-green-700); line-height: 1.2; }
.mito .mt-truthline { margin: 0; font-size: 13px; font-weight: 700; color: var(--wk-muted); text-align: center; }
.mito .mt-mychoice { margin: 0; font-weight: 700; font-size: 14px; color: var(--wk-muted); } .mito .mt-mychoice.ok { color: var(--wk-orange-700); }
.mito .mt-judges { display: flex; flex-wrap: wrap; gap: 6px; }
.mito .mt-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--wk-cream); color: var(--wk-muted); }
.mito .mt-chip.ok { background: var(--wk-orange-100); color: var(--wk-orange-700); }
.mito .tally .no b { font-size: 34px; }


/* 1.30.0 : « Genre » inclusif (Femme, Homme, puis Non-binaire/Autre, Je préfère ne pas répondre) : 2 × 2, textes longs sur deux lignes si besoin */
.segmented.gender button { height: auto; min-height: 46px; padding: 8px 12px; text-align: center; line-height: 1.2; font-size: 14px; }
/* 1.30.0 : détail d'une question — la réponse garde toute la largeur ; les personnes qui l'ont choisie passent EN DESSOUS (plus de texte écrasé à gauche) */
.answer.stacked { flex-wrap: wrap; row-gap: 4px; }
.answer.stacked .grow { flex: 1 1 0; min-width: 0; }
.answer.stacked .who { flex: 0 0 calc(100% - 42px); max-width: calc(100% - 42px); margin-left: 42px; box-sizing: border-box; text-align: left; font-size: 12.5px; line-height: 1.35; }
/* 1.30.0 : Débrief — carte « En parler au Débrief » et relance */
.event.share-card { text-align: left; } .event.share-card .ev-by { margin: 0 0 6px; font-size: 13px; }
.event.share-card .sc-box { background: var(--wk-cream); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--wk-shadow); }
.event.share-card .sc-title { margin: 0; font-size: 12px; font-weight: 700; color: var(--wk-orange-700); text-transform: uppercase; letter-spacing: .03em; }
.event.share-card .sc-q { margin: 4px 0 6px; font-family: var(--wk-display); font-size: 17px; line-height: 1.2; color: var(--wk-green-700); }
.event.share-card .sc-l { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: var(--wk-ink); }

/* 1.30.0 — sondage de date : compteurs cliquables (qui a validé) */
.org-counts .org-cnt { font: inherit; color: inherit; background: none; border: 0; padding: 2px 0; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; }
.org-counts .org-cnt:hover, .org-counts .org-cnt:focus-visible { color: var(--wk-ink); }
.org-who-grp .section-title { margin-top: 4px; }

/* 1.30.0 — pop-up « Mettre à jour l'application » à l'ouverture (iPhone et Android) */
.upd-pop { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 28, 28, .55); }
.upd-pop .upd-card { width: 100%; max-width: 340px; background: #FFF; color: #1F2A2A; border-radius: 24px; padding: 26px 22px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.upd-pop .upd-logo { width: 120px; height: auto; }
.upd-pop h2 { margin: 0; font-size: 21px; }
.upd-pop p { margin: 0; font-size: 15px; line-height: 1.4; }
.upd-pop .upd-go { width: 100%; border: 0; border-radius: 999px; padding: 14px; font: inherit; font-weight: 700; font-size: 16px; background: var(--wk-orange-500, #F28C28); color: #fff; cursor: pointer; }
.upd-pop .upd-later { border: 0; background: none; font: inherit; font-weight: 600; color: #5A6464; padding: 8px 14px; cursor: pointer; }
.upd-pop .upd-ver, .upd-wall .upd-ver { font-size: 12px; opacity: .6; }

/* 1.30.0 — tutoriel de démarrage : voile sombre en 4 panneaux (bloquants) autour de la zone éclairée */
.onb { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.onb[hidden] { display: none; }
.onb .onb-p { position: fixed; background: rgba(8, 22, 24, .78); pointer-events: auto; touch-action: none; transition: all .18s ease; }
.onb .onb-ring { position: fixed; pointer-events: none; box-shadow: 0 0 0 3px var(--wk-orange-500, #F28C28), 0 0 0 9px rgba(242, 140, 40, .28); animation: onbPulse 1.6s ease-in-out infinite; transition: all .18s ease; }
.onb .onb-tip { position: fixed; left: 50%; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); pointer-events: none; background: #FFF; color: #1F2A2A; border-radius: 18px; padding: 12px 16px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.35; transition: top .18s ease; }
.onb .onb-tip b { font-size: 16px; }
.onb .onb-tip .onb-n { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-orange-500, #F28C28); }
.onb .onb-tip.float { opacity: .97; }
.onb.nudge .onb-tip { animation: onbShake .35s ease; }
@keyframes onbPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--wk-orange-500, #F28C28), 0 0 0 8px rgba(242, 140, 40, .28); } 50% { box-shadow: 0 0 0 3px var(--wk-orange-500, #F28C28), 0 0 0 14px rgba(242, 140, 40, .12); } }
@keyframes onbShake { 0%, 100% { transform: translateX(-50%); } 25% { transform: translateX(calc(-50% - 6px)); } 75% { transform: translateX(calc(-50% + 6px)); } }
@media (prefers-reduced-motion: reduce) { .onb .onb-ring, .onb.nudge .onb-tip { animation: none; } .onb .onb-p, .onb .onb-ring { transition: none; } }

/* 1.30.0 — pictogramme de Djé sur « Défis sportifs » : même taille que « On s'organise » et « Débrief » */
.sp-entry { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sp-entry svg { width: 26px; height: 26px; flex: none; }

/* 1.31.0 — fiche Krew : « On s'organise » plus large, « Débrief » moins large ; l'espace libre est partagé à parts égales,
   donc le vide autour du picto et du texte est le même sur les deux boutons */
.kv2 .k-row2 { display: flex; gap: 11px; }
.kv2 .k-row2 > * { flex: 1 1 auto; min-width: 0; width: auto; }
.screen.krew.kv2 .k-row2 > .btn { width: auto; padding: 0 14px; }
.screen.krew.kv2 .k-row2 > #orgEntry > .btn { width: 100%; padding: 0 14px; }