/* ============================================================
   Poll the Band — design system
   Source de vérité : maquette/poll-the-band-maquette.html
   Mobile-first : tout est conçu pour 390px de large d'abord.
   ============================================================ */

:root{
  --paper:#FFF4E4;
  --ink:#26202B;
  --coral:#FF6250;
  --sun:#FFC53D;
  --grape:#7C5CFF;
  --mint:#2FC98C;
  --sky:#35B8D9;
  --pink:#FF8FC0;
  --card:#FFFDF7;
  --muted:#8A8093;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  font-family:'Nunito',sans-serif;font-weight:700;color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(#26202B0d 1.5px, transparent 1.5px);
  background-size:26px 26px;
  min-height:100vh;min-height:100dvh;
}
::selection{background:var(--sun)}

/* Colonne d'écran : plein cadre sur mobile, centrée sur grand écran */
.screen{
  max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;
  padding:26px 22px 44px;
}

/* ---------- typographie ---------- */
.wordmark{
  font-family:'Fredoka',sans-serif;font-weight:700;letter-spacing:-.02em;
  display:inline-block;position:relative;
}
.wordmark em{font-style:normal;color:var(--coral)}
.wordmark svg{position:absolute;left:8%;bottom:-14px;width:84%}

.q{
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.62rem;line-height:1.13;
  letter-spacing:-.01em;margin:16px 0 20px;
}
.small{font-size:.85rem;color:var(--muted);font-weight:800}

/* ---------- chip catégorie / groupe ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.05em;
  border:2.5px solid var(--ink);border-radius:999px;padding:6px 14px;background:#fff;
}
.chip.sun{background:var(--sun)}
.chip.grape{background:var(--grape);color:#fff}
.chip.coral{background:var(--coral);color:#fff}
.chip.pink{background:var(--pink)}
.chip.mint{background:var(--mint);color:#fff}
.chip.ink{background:var(--ink);color:var(--paper)}
.chip.sky{background:var(--sky);color:#fff}

/* ---------- boutons ---------- */
.btn{
  display:block;width:100%;text-align:center;cursor:pointer;user-select:none;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.15rem;color:var(--ink);
  background:#fff;border:3px solid var(--ink);border-radius:22px;
  padding:19px 16px;box-shadow:0 6px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;position:relative;
  text-decoration:none;
}
.btn + .btn{margin-top:14px}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.btn.coral{background:var(--coral);color:#fff}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.mint{background:var(--mint);color:#fff}
.btn.ghost{background:transparent;box-shadow:none;border-style:dashed;font-size:1rem;padding:13px}

/* option de vote sélectionnée */
.opt.on{background:var(--mint);color:#fff}
.opt.on::before{content:"✓ ";font-weight:700}

/* ---------- carte générique ---------- */
.card{
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 6px 0 var(--ink);padding:18px;
}

/* ---------- champ texte ---------- */
.name-input{
  width:100%;border:3px solid var(--ink);border-radius:18px;background:#fff;
  padding:16px 18px;font:800 1.05rem 'Nunito',sans-serif;color:var(--ink);
  margin-bottom:16px;outline:none;
}
.name-input:focus{box-shadow:0 0 0 4px var(--sun)}
.name-input::placeholder{color:#B9B2C0}

/* ---------- grille instruments (écran identité) ---------- */
.inst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:18px}
.inst{
  aspect-ratio:1/1.04;border:3px solid var(--ink);border-radius:20px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;box-shadow:0 5px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82rem;color:var(--ink);
}
.inst span:first-child{font-size:1.9rem;line-height:1}
.inst:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.inst:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.inst.on{background:var(--sun)}

/* ---------- écran d'entrée : bulles des places libres ---------- */
.claim-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.claim-bubble{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:110px;padding:16px 10px;cursor:pointer;
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 5px 0 var(--ink);color:var(--ink);
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;
  transition:transform .08s ease, box-shadow .08s ease;
}
.claim-bubble span{font-size:2.1rem;line-height:1}
.claim-bubble b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.claim-bubble:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.claim-bubble:focus-visible{outline:4px solid var(--sun);outline-offset:2px}

/* ---------- roster : lignes de musiciens ---------- */
.roster-row{
  display:flex;align-items:center;gap:11px;
  background:var(--card);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 4px 0 var(--ink);padding:10px 12px;margin-bottom:11px;
}
.roster-row.free{border-style:dashed;box-shadow:none;background:#FFFDF7cc}
.roster-face{
  flex:none;width:40px;height:40px;border-radius:50%;border:2.5px solid var(--ink);
  background:#fff;display:grid;place-items:center;font-size:1.15rem;
}
.roster-row.free .roster-face{border-style:dashed;opacity:.7}
.roster-main{flex:1;min-width:0}
.roster-main b{
  display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.roster-action{
  flex:none;min-width:40px;height:40px;padding:0 10px;cursor:pointer;
  background:#fff;border:2.5px solid var(--ink);border-radius:12px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.85rem;color:var(--ink);
  box-shadow:0 2px 0 var(--ink);
}
.roster-action:active{transform:translateY(2px);box-shadow:none}
.roster-edit{margin:-4px 0 14px;padding:0 4px}
.roster-select{
  width:100%;border:3px solid var(--ink);border-radius:14px;background:#fff;
  padding:12px 14px;font:800 .95rem 'Nunito',sans-serif;color:var(--ink);
}
.roster-add{margin-top:18px;padding-top:16px;border-top:2.5px dashed #26202B33}
.roster-add .name-input{margin-bottom:11px}
.roster-add .roster-select{margin-bottom:11px}

/* ---------- coller une liste (setlist) ---------- */
.paste-area{
  width:100%;border:3px solid var(--ink);border-radius:18px;background:#fff;
  padding:14px 16px;font:800 .95rem 'Nunito',sans-serif;color:var(--ink);
  resize:vertical;outline:none;margin-top:12px;
}
.paste-area:focus{box-shadow:0 0 0 4px var(--sun)}
.paste-area::placeholder{color:#B9B2C0}

/* ---------- galerie de modèles ---------- */
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.tpl{
  border:3px solid var(--ink);border-radius:20px;padding:16px 14px 14px;cursor:pointer;
  box-shadow:0 6px 0 var(--ink);min-height:118px;text-align:left;
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  transition:transform .08s ease, box-shadow .08s ease;
  font-family:inherit;color:var(--ink);
}
.tpl:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.tpl:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.tpl b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;line-height:1.15}
.tpl span{font-size:1.7rem;line-height:1;margin-bottom:auto}
.tpl small{font-size:.72rem;font-weight:800;opacity:.75}
.t-sun{background:var(--sun)} .t-grape{background:var(--grape);color:#fff}
.t-coral{background:var(--coral);color:#fff} .t-pink{background:var(--pink)}
.t-sky{background:var(--sky);color:#fff}
.t-mint{background:var(--mint);color:#fff} .t-ink{background:var(--ink);color:var(--paper)}

/* ---------- en-tête de la page de vote : chip + partage ---------- */
.vote-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vote-head .share-mini{position:static;flex:none;margin:-6px -10px -6px 0}
.share-mini-light{color:#fff}
.share-mini-light svg{opacity:.75}

/* ---------- vote pochettes : grille 2 colonnes ---------- */
.vote-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vote-grid .grid-span{grid-column:1 / -1;margin:0}
.img-cell{position:relative}
.img-opt{
  display:block;width:100%;padding:8px;cursor:pointer;text-align:center;
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 5px 0 var(--ink);color:var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;
}
.img-opt:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.img-opt:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.img-box{
  position:relative;display:block;aspect-ratio:1/1;border-radius:13px;
  background-size:cover;background-position:center;border:2px solid var(--ink);
}
.img-opt b{
  display:block;margin-top:8px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.92rem;
}
/* le ✓ générique des .opt.on ferait doublon sur les cartes médias */
.img-opt.on::before,.audio-opt.on::before{content:none}

/* voté : overlay mint + ✓ SUR l'image */
.img-opt.on .img-box::after{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(47,201,140,.55);border-radius:11px;
  color:#fff;font-size:3rem;font-weight:700;font-family:'Fredoka',sans-serif;
  text-shadow:0 2px 0 var(--ink);
}
.img-zoom{
  position:absolute;right:14px;bottom:44px;width:38px;height:38px;border-radius:50%;
  background:#fff;border:2.5px solid var(--ink);cursor:pointer;font-size:1rem;
  display:grid;place-items:center;box-shadow:0 2px 0 var(--ink);
}
.img-cell:has(.img-opt b) .img-zoom{bottom:52px}
.img-zoom:active{transform:translateY(2px)}
.img-viewer{
  position:fixed;inset:0;z-index:100;background:rgba(38,32,43,.93);
  display:grid;place-items:center;cursor:zoom-out;
}
.img-viewer[hidden]{display:none}
.img-viewer img{max-width:92vw;max-height:88vh;border-radius:14px;border:3px solid var(--paper)}

/* ---------- vote mixes : cartes avec player ---------- */
.audio-cell{position:relative;margin-bottom:14px}
.audio-opt{
  display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;text-align:left;
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 5px 0 var(--ink);padding:14px 16px 14px 76px;min-height:72px;
  color:var(--ink);transition:transform .08s ease, box-shadow .08s ease;
}
.audio-opt:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.audio-opt:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.audio-opt.on{background:var(--mint)}
.audio-opt.on b,.audio-opt.on .small{color:#fff}
.audio-opt.on b::before{content:"✓ "}
.audio-mid{flex:1;min-width:0}
.audio-mid b{
  display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.02rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.audio-track{
  display:block;margin-top:8px;height:7px;border:2px solid var(--ink);border-radius:999px;
  background:#fff;overflow:hidden;
}
.audio-track i{display:block;height:100%;width:0;background:var(--sky);transition:width .3s linear}
.audio-time{flex:none}
.play-btn{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:var(--coral);color:#fff;border:3px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);font-size:1.05rem;display:grid;place-items:center;
}
.play-btn:active{transform:translateY(calc(-50% + 2px));box-shadow:0 1px 0 var(--ink)}
.play-btn:focus-visible{outline:4px solid var(--sun);outline-offset:2px}

/* ---------- verdict média ---------- */
.stamp-img{
  max-width:70%;border-radius:16px;border:3px solid var(--ink);
  box-shadow:0 4px 0 var(--ink);margin:10px auto 6px;display:block;
}
.stamp audio{width:100%;margin-top:12px}

/* ---------- vote classement : badges façon carrousel Instagram ---------- */
.rank-opt{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 5px 0 var(--ink);padding:17px 56px 17px 18px;margin-bottom:13px;
  color:var(--ink);transition:transform .08s ease, box-shadow .08s ease;
}
.rank-opt:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.rank-opt:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.rank-opt b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.08rem}
.rank-opt.picked{background:#FFF0ED}
.rank-badge{
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;
  background:var(--coral);color:#fff;border:2.5px solid var(--ink);
  display:grid;place-items:center;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:.95rem;
  animation:pop .2s ease;
}
.rank-badge[hidden]{display:none}

/* classement collectif provisoire */
.section-title.coral-dash::before{background:var(--coral)}
.rank-row{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 4px 0 var(--ink);padding:12px 14px;margin-bottom:10px;
}
.rank-row b{flex:1;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem}
.rank-row .rank-num{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:.9rem;
}
.rank-row.zero{opacity:.45}
.rank-row.zero .rank-num{background:#B9B2C0}

/* verdict : la setlist numérotée dans le tampon */
.stamp-setlist{
  list-style:none;counter-reset:set;margin:14px 0 4px;text-align:left;
  display:inline-block;
}
.stamp-setlist li{
  counter-increment:set;display:flex;align-items:center;gap:10px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.25rem;line-height:1.9;
}
.stamp-setlist li::before{
  content:counter(set);flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--coral);color:#fff;border:2px solid var(--ink);
  display:grid;place-items:center;font-size:.85rem;font-weight:700;
}

/* ---------- galerie par catégories ---------- */
.tpl-section{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.08em;color:var(--muted);margin:22px 0 10px;
}
#tplGrid > .tpl-section:first-child{margin-top:4px}
/* la rangée des essentiels : titre discret, cartes plus premium */
.tpl-section.hero{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.tpl-hero{min-height:138px;box-shadow:0 8px 0 var(--ink)}
.tpl-hero span{font-size:1.9rem}
.tpl-hero b{font-size:1.12rem}

/* ---------- fenêtre élargie : navigation par semaines ---------- */
.week-nav{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:10px;
}
.week-nav b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem}
.week-btn{
  width:44px;height:44px;cursor:pointer;background:#fff;
  border:2.5px solid var(--ink);border-radius:12px;
  font-size:1.2rem;font-weight:900;color:var(--ink);
}
.week-btn:disabled{opacity:.3;cursor:default}
.week-page{width:100%}

/* ---------- lien d'écoute optionnel (option texte) ---------- */
.listen-input{margin-top:-6px;font-size:.85rem !important;opacity:.85}
.listen-cell{position:relative}
.listen-cell .btn.opt{padding-right:110px}
.listen-btn{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;min-height:38px;padding:0 12px;
  background:var(--sun);border:2.5px solid var(--ink);border-radius:11px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82rem;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}

/* ---------- reprise 🎵 : recherche Deezer à la création ---------- */
.opt-edit.track-row{flex-wrap:wrap}
.track-wrap{flex:1;position:relative;min-width:0}
.track-wrap .name-input{width:100%}
.opt-edit.track-row .listen-input{flex:1 1 100%}
.track-drop{max-height:322px;overflow-y:auto}
/* .loc-item.track-item : prime sur le display:block de .loc-item (défini plus bas) */
.loc-item.track-item{display:flex;align-items:center;gap:10px;width:100%}
.track-item img,.track-item .track-cover-fallback{
  flex:none;width:40px;height:40px;border-radius:9px;object-fit:cover;
  border:2px solid var(--ink);
}
.track-item > span:last-child{flex:1;min-width:0}
.track-item b,.track-item span span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.track-chosen{
  display:flex;align-items:center;gap:10px;background:#fff;
  border:2.5px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);
  padding:8px 10px;margin-bottom:11px;
}
.track-chosen .track-cover{width:44px;height:44px}
.track-chosen .track-mid b{font-size:.95rem}
.track-clear{
  flex:none;margin-left:auto;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--paper);border:none;font-size:.75rem;
  font-weight:900;cursor:pointer;display:grid;place-items:center;line-height:1;
}

/* ---------- reprise 🎵 : pochette + extrait 30 s au vote ---------- */
.track-cell{position:relative;margin-bottom:14px}
.track-opt{
  display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;text-align:left;
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 5px 0 var(--ink);padding:12px 64px 12px 12px;min-height:68px;
  color:var(--ink);transition:transform .08s ease, box-shadow .08s ease;
}
.track-opt:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.track-opt:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.track-opt.on{background:var(--mint)}
.track-opt.on b,.track-opt.on .small{color:#fff}
.track-opt.on b::before{content:"✓ "}
.track-cover{
  flex:none;width:48px;height:48px;border-radius:10px;object-fit:cover;
  border:2px solid var(--ink);
}
.track-cover-fallback{display:grid;place-items:center;background:#fff;font-size:1.15rem}
.track-mid{flex:1;min-width:0}
.track-mid b{
  display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.02rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.track-mid .small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-btn{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--ink);border:2.5px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);font-size:.95rem;display:grid;place-items:center;
}
.preview-btn:active{transform:translateY(calc(-50% + 2px));box-shadow:0 1px 0 var(--ink)}
.preview-btn:focus-visible{outline:4px solid var(--sun);outline-offset:2px}

/* verdict 📍 : itinéraire en deux modes, sous le lieu */
.route-links{display:flex;justify-content:center;gap:10px;margin-top:10px}
.route-link{
  display:inline-flex;align-items:center;min-height:38px;padding:0 13px;
  background:#fff;border:2.5px solid var(--ink);border-radius:11px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.84rem;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}

/* verdict : le morceau gagnant en grand */
.stamp-track-cover{max-width:52%}
.preview-btn-stamp{position:static;transform:none;margin:12px auto 0}
.preview-btn-stamp:active{transform:translateY(2px)}
.deezer-link{
  display:inline-flex;align-items:center;min-height:38px;padding:0 14px;
  background:#fff;border:2.5px solid var(--ink);border-radius:11px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.85rem;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}

/* ---------- vote anonyme : toggle à l'ajustement ---------- */
.anon-toggle{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  margin-top:16px;padding:12px 14px;background:var(--card);
  border:2.5px dashed var(--ink);border-radius:14px;
}
.anon-toggle input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--ink);cursor:pointer}
.anon-toggle b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem}
.anon-toggle .small{display:block;margin-top:2px}

/* ---------- sondage fans 🌍 (page publique) ---------- */
.fan-head{margin-bottom:6px}
.fan-thanks{
  margin-top:30px;background:var(--card);border:3px solid var(--ink);
  border-radius:22px;box-shadow:0 6px 0 var(--ink);padding:34px 22px;text-align:center;
  animation:pop .3s ease;
}
.fan-thanks-emoji{font-size:3rem;line-height:1;margin-bottom:12px}
.fan-thanks h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.5rem;margin-bottom:8px}
.fan-powered{text-align:center;margin-top:44px}
.fan-powered a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ---------- verdict : égalité parfaite 🤝 ---------- */
.tie-grid{display:flex;justify-content:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.tie-cell{flex:1;min-width:110px;max-width:180px}
.tie-img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;
  border:3px solid var(--ink);display:block;margin-bottom:8px;
}
.tie-cell b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem}

/* ---------- switch de langue (footer global) ---------- */
.lang-switch{
  margin-top:56px;text-align:center;display:flex;justify-content:center;
  align-items:center;gap:8px;color:var(--muted);
}
.lang-switch button{
  min-width:44px;min-height:44px;background:none;border:none;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:800;color:var(--muted);
  letter-spacing:.06em;
}
.lang-switch button.on{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.verdict-screen .lang-switch{position:relative;z-index:2}
.verdict-screen .lang-switch button{color:#ffffffb0}
.verdict-screen .lang-switch button.on{color:#fff}

/* ---------- home vitrine (visiteur sans groupe) ---------- */
.pitch-hero{text-align:center;padding-top:12px}
.pitch-title{
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:2rem;
  letter-spacing:-.02em;line-height:1.15;margin:26px 0 14px;
}
.pitch-sub{font-weight:800;color:var(--muted);font-size:1rem;line-height:1.5;margin-bottom:26px}
.pitch-hero .btn{margin-bottom:0}
.demo-card{
  margin-top:44px;background:var(--card);border:3px solid var(--ink);
  border-radius:22px;box-shadow:0 6px 0 var(--ink);padding:22px 18px;
}
.demo-card .chip{margin-bottom:4px}
.demo-q{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.3rem;margin:10px 0 16px}
.demo-note{text-align:center;margin-top:16px}
.screen-home .how{margin-top:44px}
.pitch-features{margin-top:44px}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.feat{
  background:var(--card);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 4px 0 var(--ink);padding:16px 14px;
}
.feat span{font-size:1.7rem;display:block;margin-bottom:8px;line-height:1}
.feat b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;line-height:1.35;display:block}
.pitch-honest{text-align:center;margin-top:40px;line-height:1.9}
.pitch-price{margin-top:44px}
.price-card{
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 6px 0 var(--ink);padding:22px 20px;text-align:center;margin-top:14px;
}
.price-free{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.4rem;margin-bottom:8px}
.price-then{font-weight:800;font-size:1rem;line-height:1.5;margin-bottom:10px}
.pitch-faq{margin-top:44px}
.faq-item{
  background:var(--card);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 4px 0 var(--ink);margin-bottom:12px;overflow:hidden;
}
.faq-item summary{
  list-style:none;cursor:pointer;padding:15px 16px;min-height:44px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"▾";color:var(--muted);flex:none;transition:transform .15s ease}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item p{padding:0 16px 15px;font-weight:700;color:var(--muted);font-size:.92rem;line-height:1.55}
.pitch-footer{text-align:center;margin-top:48px;line-height:1.9}
.pitch-footer a{color:var(--muted)}

/* ---------- carte installation PWA 📲 ---------- */
.pwa-card{
  position:relative;margin-top:18px;background:var(--card);
  border:2.5px dashed var(--ink);border-radius:16px;padding:16px 44px 16px 16px;
  text-align:left;animation:pop .3s ease;
}
.pwa-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.08rem;margin-bottom:6px}
.pwa-sub{font-size:.86rem;opacity:.75;margin-bottom:10px}
.pwa-close{
  position:absolute;top:6px;right:6px;width:38px;height:38px;cursor:pointer;
  background:none;border:none;font-weight:900;color:var(--muted);font-size:1rem;
}
.pwa-btn{margin-top:10px;padding:13px;font-size:1rem}
.pwa-step{
  display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:800;
  color:var(--ink);margin-top:8px;
}
.pwa-num{
  flex:none;width:22px;height:22px;border-radius:50%;background:var(--sun);
  border:2px solid var(--ink);display:grid;place-items:center;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.75rem;
}
.pwa-ic{width:22px;height:22px;flex:none;color:var(--ink)}

/* Animation installation iOS : 3 scènes en boucle (~4,2 s), le geste
   Safari réel. prefers-reduced-motion => guide statique. */
.pwa-anim{display:block;width:min(260px,100%);margin:8px auto 0}
.pwa-anim svg{display:block;width:100%;height:auto}
.pwa-static{display:none}
@media (prefers-reduced-motion:reduce){
  .pwa-anim{display:none}
  .pwa-static{display:block}
}
.pwa-anim .ps1{animation:pwaS1 4.2s infinite}
.pwa-anim .ps2{opacity:0;animation:pwaS2 4.2s infinite}
.pwa-anim .ps3{opacity:0;animation:pwaS3 4.2s infinite}
@keyframes pwaS1{0%,26%{opacity:1}33%,100%{opacity:0}}
@keyframes pwaS2{0%,30%{opacity:0}37%,59%{opacity:1}66%,100%{opacity:0}}
@keyframes pwaS3{0%,63%{opacity:0}70%,96%{opacity:1}100%{opacity:0}}
.pwa-anim .tap{transform-box:fill-box;transform-origin:center;animation:pwaTap 4.2s infinite}
@keyframes pwaTap{0%,8%{transform:scale(1)}12%{transform:scale(.85)}17%,100%{transform:scale(1)}}
.pwa-anim .sheet{animation:pwaSheet 4.2s infinite}
@keyframes pwaSheet{0%,31%{transform:translateY(30px)}41%,100%{transform:translateY(0)}}
.pwa-anim .tap2{transform-box:fill-box;transform-origin:center;animation:pwaTap2 4.2s infinite}
@keyframes pwaTap2{0%,46%{transform:scale(1)}50%{transform:scale(.9)}55%,100%{transform:scale(1)}}
.pwa-anim .ptbicon{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pwaPop 4.2s infinite}
@keyframes pwaPop{0%,68%{transform:scale(0)}78%{transform:scale(1.14)}84%,100%{transform:scale(1)}}

/* ---------- nudge compte 📬 (après le 2e vote) ---------- */
.nudge-card{
  margin-top:18px;background:var(--card);border:2.5px dashed var(--ink);
  border-radius:16px;padding:16px;text-align:left;animation:pop .3s ease;
}
.nudge-text b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem}
.nudge-text .small{display:block;margin-top:3px}
.nudge-actions{display:flex;align-items:center;gap:6px;margin-top:12px}
.nudge-actions .btn{margin:0;flex:1}
.nudge-no{
  flex:none;min-height:44px;padding:0 12px;background:none;border:none;cursor:pointer;
  font-size:.85rem;font-weight:800;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- pièces jointes "pour préparer" ---------- */
.attach-pending{
  display:flex;align-items:center;gap:9px;margin-bottom:9px;
  background:var(--card);border:2.5px solid var(--ink);border-radius:12px;padding:9px 12px;
}
.attach-pending b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.attach-pending i{font-style:normal;flex:none}
.attach-x{
  flex:none;width:34px;height:34px;cursor:pointer;background:#fff;
  border:2.5px solid var(--ink);border-radius:10px;font-weight:900;color:var(--ink);
}
.attach-card{
  margin-top:22px;background:var(--card);border:3px solid var(--ink);
  border-radius:16px;box-shadow:0 4px 0 var(--ink);padding:14px 16px;text-align:left;
}
.attach-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;margin-bottom:10px}
.attach-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.attach-row:last-child{margin-bottom:0}
.attach-ic{flex:none;font-size:1.2rem}
.attach-main{flex:1;min-width:0}
.attach-main b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-dl{
  flex:none;display:inline-flex;align-items:center;min-height:38px;padding:0 12px;
  background:#fff;border:2.5px solid var(--ink);border-radius:11px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82rem;color:var(--ink);text-decoration:none;
}
.attach-audio{width:100%;height:38px;margin:2px 0 10px}
.attach-dl.loading{opacity:.55;pointer-events:none}
.attach-note{margin-top:8px}
.verdict-screen .attach-card{box-shadow:0 4px 0 #00000055}

/* ---------- détail des classements (setlist) ---------- */
.rank-views-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rank-views-head .section-title{margin-bottom:0}
.rank-toggle{
  min-height:44px;padding:0 10px;background:none;border:none;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.9rem;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
.rank-exp{margin-bottom:10px}
.rank-exp summary{list-style:none;cursor:pointer}
.rank-exp summary::-webkit-details-marker{display:none}
.rank-exp .rank-row{margin-bottom:0}
.rank-caret{flex:none;font-size:.8rem;color:var(--muted);transition:transform .15s ease}
.rank-exp[open] .rank-caret{transform:rotate(180deg)}
.rank-detail{padding:9px 14px 2px;font-size:.82rem;font-weight:800;color:var(--muted)}
.rank-detail p{margin:0 0 6px}
.rank-detail b{color:var(--ink)}
.rank-nope{font-size:.75rem;opacity:.75}
.voter-cols{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 10px;-webkit-overflow-scrolling:touch}
.voter-col{
  flex:0 0 auto;min-width:118px;max-width:170px;background:var(--card);
  border:2.5px solid var(--ink);border-radius:14px;padding:12px 12px 10px;
}
.voter-col .face b{max-width:120px}
.voter-col ol{margin:8px 0 0;padding-left:20px;text-align:left;font-size:.82rem;font-weight:800;line-height:1.7}
/* variante verdict : dans le tampon */
#setlistDetail{margin:14px auto 0;max-width:340px;text-align:left}
#setlistDetail .rank-views-head{justify-content:center}
.stamp-exp{margin-bottom:2px}
.stamp-exp .stamp-row{
  display:flex;align-items:center;gap:10px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.25rem;line-height:1.9;
}
.set-num{
  flex:none;width:26px;height:26px;border-radius:50%;font-style:normal;
  background:var(--coral);color:#fff;border:2px solid var(--ink);
  display:grid;place-items:center;font-size:.85rem;font-weight:700;
}
.stamp-exp .rank-detail{padding:0 0 8px 36px}
#setlistDetail .voter-cols{justify-content:flex-start}

/* ---------- barres de résultats ---------- */
.bars{margin-top:20px;display:none}
.bars.show{display:block;animation:pop .3s ease}
.bar-row{margin-bottom:13px}
.bar-label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:900;margin-bottom:5px}
.bar{height:20px;border:2.5px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.bar i{display:block;height:100%;background:var(--mint);border-radius:999px;width:0;transition:width .7s cubic-bezier(.2,.9,.3,1.2)}
.bar.b2 i{background:var(--sky)}
.bar.b3 i{background:var(--sun)}

/* ---------- toast ---------- */
.toast{
  display:none;margin-top:18px;text-align:center;
  font-family:'Fredoka',sans-serif;font-weight:600;color:var(--mint);font-size:1.05rem;
}
.toast.show{display:block;animation:pop .3s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- second rôle 👥 : badge en coin de bulle (variante B) ---------- */
/* Mini-cercle papier OPAQUE, bordure ink 2px, l'emoji du second rôle à
   50 % du diamètre de la bulle (~23px sur une bulle 46px) — la seule
   taille où le second rôle se lit vraiment. Collé en bas à droite, jamais
   rogné ; sous ~36px de bulle on masque plutôt qu'écraser. */
.role-badge{
  position:absolute;right:-4px;bottom:-4px;width:50%;height:50%;
  min-width:23px;min-height:23px;
  background:var(--paper);border:2px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;font-style:normal;
  font-size:.72em;line-height:1;pointer-events:none;
}
.face span{position:relative}
.roster-face{position:relative}
.topbar-me .role-badge{font-size:.7rem}
.mini-face .role-badge{display:none} /* 26px : trop petit pour un badge */
.claim-emoji{position:relative;display:inline-grid;line-height:1}
.claim-emoji .role-badge{right:-10px;bottom:-5px;width:23px;height:23px;font-size:.8rem}
/* pictos du plan de scène 🎭 (76px) : même principe, proportionné au picto */
.stage-item .role-badge{
  top:48px;right:0;bottom:auto;width:30px;height:30px;font-size:1rem;
}
.stage-viewer .stage-item .role-badge{top:58px;right:0;width:36px;height:36px;font-size:1.2rem}
.tie-cell .role-badge{display:none} /* pictos 42px : sous le seuil utile */
.stage-chip .role-badge{display:none} /* rangée d'éditeur : 27px */

/* ---------- qui a répondu ---------- */
.who{margin-top:22px;border-top:2.5px dashed #26202B33;padding-top:16px}
.faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:13px;margin:10px 0 8px}
.face{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.face span{
  flex:none;width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);
  display:grid;place-items:center;font-size:1.25rem;background:#fff;
}
.face.f1 span{background:#FFE3A6}.face.f2 span{background:#D9F4E7}.face.f3 span{background:#E4DBFF}
.face.wait{opacity:.55}
.face.wait span{background:#F1EDE4;border-style:dashed}
.face b{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.58rem;font-weight:900;color:var(--muted);letter-spacing:.02em;
  text-transform:uppercase;
}

/* ---------- grille de dispos ---------- */
.grid-wrap{border:3px solid var(--ink);border-radius:20px;background:#fff;padding:13px;box-shadow:0 6px 0 var(--ink)}
.dgrid{display:grid;gap:6px;touch-action:none} /* touch-action:none = on peint au doigt sans scroller */
.dgrid.heat-mode{touch-action:auto}
.dh{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.8rem;text-align:center;padding-bottom:2px}
.dt{font-size:.72rem;font-weight:900;color:var(--muted);display:flex;align-items:center;justify-content:flex-end;padding-right:6px}
.cell{
  aspect-ratio:1.25/1;border:2.5px solid var(--ink);border-radius:10px;background:#F4EFE6;cursor:pointer;
  transition:background .1s ease, transform .06s ease;padding:0;position:relative;
}
/* amplitude Large (jusqu'à 16 lignes d'heures) : cases compactées — la
   grille reste entière à l'écran, le geste de peinture ne scrolle jamais */
.dgrid.dense{gap:5px}
.dgrid.dense .cell{aspect-ratio:1.6/1;border-radius:8px;border-width:2px}
.dgrid.dense .dt{font-size:.66rem;padding-right:5px}
.cell:active{transform:scale(.92)}
.cell.past{
  background:#EDE8DE !important;opacity:.45;cursor:not-allowed;
  background-image:repeating-linear-gradient(45deg,transparent 0 6px,#26202B12 6px 10px) !important;
}
.cell.past:active{transform:none}
.dh.past{opacity:.45}
.link-danger{
  background:none;border:none;cursor:pointer;padding:12px 10px;
  font-size:.85rem;font-weight:800;color:var(--coral);
  text-decoration:underline;text-underline-offset:3px;font-family:inherit;
}
/* trajet 🚄 : horaires proposés cochables + option de vote structurée */
.train-pick{
  display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:9px;
  background:#fff;border:2.5px solid var(--ink);border-radius:14px;cursor:pointer;
  box-shadow:0 3px 0 var(--ink);
}
.train-pick input{width:20px;height:20px;accent-color:var(--coral);flex:none}
.train-pick b{display:block;font-size:.95rem}
.train-pick .small{display:block}
.train-pick.used{opacity:.45}
.train-pick input:disabled{opacity:.5}
.train-added{color:var(--mint-ink, #1B7A55);font-weight:800}
.opt-edit.train-row{flex-wrap:wrap}
.opt-edit.train-row .train-sub{
  width:100%;margin:-7px 0 11px;padding-left:4px;color:var(--muted);font-weight:700;
}
.btn.opt.train-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.btn.opt.train-opt .small{font-weight:700}

/* lieu 📍 : dropdown de suggestions (proxy Places) et chips des lieux passés */
.loc-drop{
  position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:-6px;
  background:#fff;border:2.5px solid var(--ink);border-radius:14px;
  box-shadow:0 5px 0 var(--ink);overflow:hidden;
}
.loc-item{
  display:block;width:100%;text-align:left;padding:10px 14px;background:none;
  border:none;cursor:pointer;font-family:inherit;color:var(--ink);
}
.loc-item + .loc-item{border-top:1.5px solid #26202B22}
.loc-item b{display:block;font-size:.92rem;font-weight:800}
.loc-item span{display:block;font-size:.76rem;color:var(--muted);font-weight:700}
.loc-item:hover,.loc-item:focus-visible{background:var(--sun)}
.loc-empty{display:block;padding:12px 14px;color:var(--muted);font-weight:700}
.loc-chip.on{background:var(--sun)}

/* connexion par code 🔑 (PWA iOS : le lien du mail ouvre Safari) */
.code-input{text-transform:uppercase;letter-spacing:5px;text-align:center;font-weight:800;font-size:1.15rem}
#codeCard.code-first{border-color:var(--coral);box-shadow:0 5px 0 var(--coral)}

/* le même geste en version neutre (copier le message, micro-incitation 📣) */
.link-plain{
  background:none;border:none;cursor:pointer;padding:12px 10px;
  font-size:.85rem;font-weight:800;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;font-family:inherit;
}
.cell.heat{cursor:default}
.cell.heat:active{transform:none}
/* quorum 🎯 : créneau écarté (un indispensable a dit non) — gris, tapable pour le détail */
.cell.qblock{background:#E7E2D8;opacity:.75}
.cell .q-mark{
  position:absolute;right:2px;bottom:1px;font-size:.68rem;
  pointer-events:none;filter:grayscale(1);opacity:.8;
}
.cell .star{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:1rem;color:var(--ink);text-shadow:0 0 4px #fff;pointer-events:none;
}
.cell:focus-visible{outline:3px solid var(--grape);outline-offset:1px}
.cell.s1{background:var(--mint)}
.cell.s2{background:var(--sun)}
.cell.s3{background:#EF5350;background-image:repeating-linear-gradient(45deg,transparent 0 5px,#00000018 5px 9px)}
.legend{display:flex;gap:8px;margin:14px 0 18px;flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:900}
.dot{width:15px;height:15px;border-radius:5px;border:2px solid var(--ink);display:inline-block}
.dot.d1{background:var(--mint)}.dot.d2{background:var(--sun)}.dot.d3{background:#EF5350}

/* heatmap : "ça coince pour quelqu'un" — coin coral en haut à droite */
.cell .no-corner{
  position:absolute;top:0;right:0;width:0;height:0;pointer-events:none;
  border-top:13px solid var(--coral);border-left:13px solid transparent;
  border-top-right-radius:7px;
}
.cell .no-count{
  position:absolute;top:0;right:2px;pointer-events:none;
  font-size:.55rem;font-weight:900;color:#fff;line-height:1.1;
}
.dot.corner-sample{position:relative;background:#F4EFE6;overflow:hidden}
.dot.corner-sample::after{
  content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-top:8px solid var(--coral);border-left:8px solid transparent;
}

/* popover "qui a répondu quoi" sur une case de la heatmap */
.heat-pop{
  position:fixed;z-index:90;background:var(--card);color:var(--ink);
  border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);
  padding:12px 14px;
}
.heat-pop[hidden]{display:none}
.heat-pop b{
  display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.9rem;margin-bottom:8px;
}
.heat-pop-row{
  display:flex;align-items:flex-start;gap:8px;margin-top:6px;
  font-size:.82rem;font-weight:800;line-height:1.45;
}
.heat-pop-row .dot{flex:none;margin-top:2px}

/* ---------- verdict ---------- */
.verdict-screen{background:var(--grape);color:#fff;position:relative;overflow:hidden}
body:has(.verdict-screen){background:var(--grape);background-image:none}
.confetti{position:absolute;top:-14px;font-size:1.1rem;animation:fall linear infinite;pointer-events:none}
@keyframes fall{
  from{transform:translateY(-30px) rotate(0)}
  to{transform:translateY(110vh) rotate(340deg)}
}
.stamp{
  background:var(--card);color:var(--ink);border:3px solid var(--ink);border-radius:26px;
  box-shadow:10px 10px 0 var(--ink);padding:28px 22px;text-align:center;
  transform:rotate(-2deg);margin:34px 0 26px;position:relative;z-index:2;
}
.stamp .eyebrow{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.22em;
  color:var(--coral);
}
.stamp h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:2.7rem;letter-spacing:-.02em;margin:8px 0 4px}
.stamp h2 b{color:var(--mint)}
.stamp p{font-weight:800;color:var(--muted);font-size:.9rem}
.present{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.present .face span{width:42px;height:42px;font-size:1.1rem}
.v-btns{position:relative;z-index:2}
.v-note{text-align:center;margin-top:16px;font-size:.85rem;font-weight:800;color:#ffffffd0;position:relative;z-index:2}

/* ---------- picker emoji (création de groupe) ---------- */
.emoji-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.emoji{
  aspect-ratio:1/1;border:3px solid var(--ink);border-radius:18px;background:#fff;
  font-size:1.8rem;cursor:pointer;box-shadow:0 5px 0 var(--ink);
  display:grid;place-items:center;
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.emoji:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.emoji:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.emoji.on{background:var(--sun)}

/* ---------- éditeur d'options (ajustement) ---------- */
.opt-edit{display:flex;gap:10px;align-items:flex-start}
.opt-edit .name-input{flex:1;margin-bottom:11px}
.opt-remove{
  flex:none;width:46px;height:56px;border:3px solid var(--ink);border-radius:16px;
  background:#fff;font-size:1.05rem;font-weight:900;color:var(--ink);cursor:pointer;
  box-shadow:0 4px 0 var(--ink);
}
.opt-remove:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}

/* ---------- zones d'upload (pochettes & mixes, écran d'ajustement) ---------- */
.upload-zone{
  position:relative;flex:none;width:64px;height:56px;overflow:hidden;
  border:2.5px dashed var(--ink);border-radius:14px;background:#fff;
  display:grid;place-items:center;cursor:pointer;
  font-size:1.1rem;background-size:cover;background-position:center;
}
.upload-zone.done{border-style:solid}
.upload-zone.error{border-color:var(--coral)}
.upload-zone.drag-over{
  border-style:solid;border-width:3px;border-color:var(--mint);
  background-color:rgba(47,201,140,.12);
}
.upload-zone:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.upload-zone .up-face{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.9rem;color:var(--ink);
  display:grid;place-items:center;width:100%;padding:0 6px;
}
.upload-zone .up-bar{position:absolute;left:0;bottom:0;width:100%;height:5px}
.upload-zone .up-bar i{display:block;height:100%;width:0;background:var(--mint);transition:width .15s ease}
.up-remove{
  position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:var(--paper);border:none;font-size:.65rem;font-weight:900;
  cursor:pointer;display:grid;place-items:center;line-height:1;
}
/* mixes : zone pleine largeur au-dessus du champ label */
.opt-edit.media-audio{flex-wrap:wrap}
.opt-edit.media-audio .upload-zone{width:100%;height:52px}
.opt-edit.media-audio .upload-zone.done{height:auto;min-height:52px;padding:8px 30px 8px 8px}
.opt-edit.media-audio .upload-zone audio{width:100%;height:36px}

/* ---------- lien à partager ---------- */
.link-box{
  display:flex;align-items:center;gap:10px;
  border:3px solid var(--ink);border-radius:18px;background:#fff;padding:12px 14px;
  box-shadow:0 6px 0 var(--ink);
}
.link-url{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.9rem;font-weight:800;color:var(--muted);
}
.btn-copy{
  flex:none;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.9rem;
  border:2.5px solid var(--ink);border-radius:12px;background:var(--sun);
  padding:9px 14px;cursor:pointer;color:var(--ink);
}
.btn-copy:active{transform:translateY(2px)}
.btn.wa{background:#25D366;color:#fff}

/* ---------- QG du groupe : titres de section affirmés ---------- */
.section-title{
  display:flex;align-items:center;gap:9px;margin-bottom:12px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;
  letter-spacing:.07em;color:var(--ink);
}
.section-title::before{
  content:"";flex:none;width:20px;height:5px;border-radius:999px;background:var(--muted);
}
.section-title.sun::before{background:var(--sun)}
.section-title.mint::before{background:var(--mint)}
.section-title.grape::before{background:var(--grape)}

/* ---------- QG du groupe : cartes de sondage riches ---------- */
.poll-card{
  display:block;text-decoration:none;color:var(--ink);position:relative;
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 5px 0 var(--ink);padding:19px 18px;margin-bottom:14px;
  transition:transform .08s ease, box-shadow .08s ease;
}
.poll-card:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover){
  .poll-card:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
  .verdict-row:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--ink)}
}
.poll-card-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.poll-card-top .chip{padding:4px 10px;border-width:2px;font-size:.72rem;white-space:nowrap}
.poll-card-top .small{margin-left:auto;white-space:nowrap}
.badge-vote{white-space:nowrap}
.poll-card b{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.1rem;line-height:1.2}
.badge-vote{
  display:inline-flex;align-items:center;margin-bottom:9px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.03em;
  background:var(--coral);color:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:4px 10px;
}
.poll-card-progress{
  display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:13px;
}
.mini-faces{display:flex;gap:4px}
.mini-face{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);
  display:grid;place-items:center;font-size:.78rem;background:#fff;
}
.mini-face.f1{background:#FFE3A6}.mini-face.f2{background:#D9F4E7}.mini-face.f3{background:#E4DBFF}
.mini-face.wait{background:#F1EDE4;opacity:.5;border-style:dashed}
.progress-line{
  display:block;height:10px;margin-top:8px;
  border:2px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden;
}
.progress-line i{display:block;height:100%;background:var(--mint);border-radius:999px}

/* cartes compactes des décidés : en retrait, le verdict reste lisible */
.verdict-row{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  background:#F1EDE3;border:3px solid #26202Bbb;border-radius:16px;
  box-shadow:0 3px 0 #26202Bbb;padding:11px 14px;margin-bottom:11px;
}
.verdict-row:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.verdict-row .chip{padding:3px 9px;border-width:2px;font-size:.7rem;flex:none;filter:grayscale(.55);opacity:.65}
.verdict-row b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.98rem;color:var(--ink)}
.verdict-row .verdict-q{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.75rem;font-weight:800;color:var(--muted);opacity:.7;
}
.verdict-row .small{flex:none;opacity:.7}
.verdict-row .share-mini svg{opacity:.35}

/* icône partage discrète en coin de carte (zone de tap 44px) */
.share-mini{
  position:absolute;top:4px;right:4px;width:44px;height:44px;
  display:grid;place-items:center;padding:0;border:none;background:none;
  color:var(--ink);cursor:pointer;border-radius:14px;
}
.share-mini svg{opacity:.5;transition:opacity .12s ease}
.share-mini:hover svg,.share-mini:focus-visible svg{opacity:1}
.share-mini:active svg{transform:translateY(1px)}
.share-mini:focus-visible{outline:3px solid var(--sun);outline-offset:-4px}
.poll-card .poll-card-top{padding-right:38px} /* l'âge ne passe pas sous l'icône */
.verdict-row .share-mini{position:static;flex:none;margin:-10px -8px -10px -2px}

/* toast flottant des partages de cartes */
.toast-float{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  display:none;background:var(--card);color:var(--mint);
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
  border:2.5px solid var(--ink);border-radius:999px;padding:10px 20px;
  box-shadow:0 4px 0 var(--ink);
}
.toast-float.show{display:block;animation:pop .3s ease}

/* rangée des membres : une vraie carte, plus d'éléments flottants */
.band-members{
  margin-top:30px;background:var(--card);border:3px solid var(--ink);
  border-radius:20px;box-shadow:0 5px 0 var(--ink);padding:18px;
}
.band-title-row{display:inline-flex;align-items:center;gap:8px;border-radius:14px}
button.band-title-row{background:none;border:none;cursor:pointer;padding:0;text-align:left;font:inherit;color:inherit}
button.band-title-row::after{content:"✏️";font-size:.85rem;opacity:.5}

/* ---------- home : comment ça marche ---------- */
.how{display:flex;flex-direction:column;gap:13px;margin-top:36px}
.how-card{display:flex;gap:14px;align-items:flex-start}
.how-card b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem}
.how-card p{margin-top:3px}
.how-num{
  flex:none;width:38px;height:38px;border-radius:50%;border:2.5px solid var(--ink);
  display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;
}
.how-num.sun{background:var(--sun)}
.how-num.mint{background:var(--mint);color:#fff}
.how-num.grape{background:var(--grape);color:#fff}

/* ---------- pastilles tapables (jours / heures du modèle répète) ---------- */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.pill{
  position:relative;display:inline-flex;align-items:center;cursor:pointer;user-select:none;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.85rem;color:var(--ink);
  border:2.5px solid var(--ink);border-radius:999px;background:#fff;padding:8px 14px;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pill:has(input:checked){background:var(--sun)}
/* pastilles de MODE (fenêtre, amplitude — radios) : l'active doit sauter
   aux yeux, pas se fondre parmi les pastilles jour/heure cochées */
.pill:has(input[type=radio]:checked){background:var(--ink);color:#fff}
.pill:has(input:focus-visible){outline:3px solid var(--grape);outline-offset:2px}
.pill input{position:absolute;opacity:0;pointer-events:none}
/* « Voir plus loin ? » : une porte en pointillés au bout de la fenêtre */
.pill-more{border-style:dashed;box-shadow:none;background:transparent}

/* ---------- disposition de scène 🎭 ---------- */
.stage-zone{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border:3px solid var(--ink);border-radius:16px;background:var(--card);
  background-image:radial-gradient(#26202B14 1.5px, transparent 1.5px);
  background-size:18px 18px;
}
.stage-back{ /* fond de scène discret (backline) */
  position:absolute;inset:0 0 auto 0;height:13%;pointer-events:none;
  background:repeating-linear-gradient(90deg,#26202B0e 0 10px,transparent 10px 22px);
  border-bottom:2px dashed #26202B22;
}
.stage-public{
  position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none;
  background:var(--sun);border-top:3px solid var(--ink);
  display:grid;place-items:center;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.64rem;
  letter-spacing:.24em;color:var(--ink);
}
.stage-item{
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  display:flex;flex-direction:column;align-items:center;width:84px;
}
/* la planche validée (pictos-scene.svg, espace -50..50) rendue à 76px —
   membres ET objets à la même échelle */
.stage-pict{width:76px;height:76px}
.stage-item b{ /* le prénom, sur pastille papier — lisible par-dessus tout */
  max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.62rem;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);border-radius:999px;
  padding:0 8px;line-height:1.6;margin-top:-9px;
}

/* éditeur : la zone se manipule au doigt, jamais en scroll — et déborde
   du gabarit pour offrir de vraies cibles tactiles en 390px */
.stage-zone.editing{touch-action:none;cursor:pointer;margin:0 -14px;width:calc(100% + 28px)}
.stage-zone.editing .stage-item{pointer-events:auto;cursor:grab;touch-action:none}
.stage-item.dragging{cursor:grabbing}
.stage-item.sel{z-index:5}
.stage-item.sel::after{ /* halo corail (charte) sur l'élément saisi */
  content:"";position:absolute;inset:-6px;pointer-events:none;border-radius:20px;
  box-shadow:0 0 0 3px var(--coral), 0 0 14px 2px #FF625066;
}
.stage-x{
  position:absolute;top:-13px;right:-13px;z-index:6;width:27px;height:27px;
  border-radius:50%;background:var(--coral);color:#fff;border:2.5px solid var(--ink);
  font-size:.72rem;font-weight:900;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.stage-opt-edit{margin-bottom:26px}
.stage-tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.stage-chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:2.5px solid var(--ink);border-radius:12px;background:#fff;padding:4px 10px 4px 5px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.8rem;color:var(--ink);
  box-shadow:0 3px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;
}
.stage-chip svg{width:27px;height:27px;flex:none}
.stage-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.stage-chip.obj{border-style:dashed;box-shadow:none;background:#FFFDF7}
.stage-tray-label{margin:12px 0 -2px}

/* vote : la scène entière est le bouton, mécanique choice héritée */
.stage-cell{position:relative;margin-bottom:16px}
.stage-opt-btn{
  display:block;width:100%;padding:10px;cursor:pointer;text-align:left;
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 5px 0 var(--ink);color:var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;
}
.stage-opt-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.stage-opt-btn:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.stage-opt-btn.on{background:var(--mint)}
.stage-opt-btn.on::before{content:none}
.stage-opt-label{
  display:block;margin:2px 4px 9px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.02rem;
}
.stage-opt-btn.on .stage-opt-label{color:#fff}
.stage-opt-btn.on .stage-opt-label::before{content:"✓ "}
.stage-zoom{
  position:absolute;right:22px;bottom:22px;width:38px;height:38px;border-radius:50%;
  background:#fff;border:2.5px solid var(--ink);cursor:pointer;font-size:1rem;
  display:grid;place-items:center;box-shadow:0 2px 0 var(--ink);
}
.stage-zoom:active{transform:translateY(2px)}

/* plein écran d'un tap (pattern pochette) */
.stage-viewer{
  position:fixed;inset:0;z-index:100;background:rgba(38,32,43,.93);
  display:grid;place-items:center;cursor:zoom-out;padding:12px;
}
.stage-viewer[hidden]{display:none}
.stage-viewer .stage-zone{
  width:min(94vw, calc(86vh * 4 / 3));border-color:var(--paper);
}
.stage-viewer .stage-item{width:102px}
.stage-viewer .stage-pict{width:92px;height:92px}
.stage-viewer .stage-item b{font-size:.82rem;max-width:100px;margin-top:-11px}
.stage-viewer .stage-public{height:32px;font-size:.78rem}

/* verdict : la scène gagnante en grand dans le tampon */
.stamp .stage-zone{margin:14px auto 6px;text-align:initial}
.tie-cell .stage-zone{margin-bottom:8px}
.tie-cell .stage-pict{width:42px;height:42px}
.tie-cell .stage-item{width:48px}
.tie-cell .stage-item b{font-size:.5rem;max-width:48px;padding:0 4px;border-width:1.5px;margin-top:-5px}
.tie-cell .stage-public{height:16px;font-size:.5rem;border-top-width:2px}

/* ---------- header permanent 3 zones ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:10px;
  min-height:56px;padding:6px 14px;
  background:var(--paper);border-bottom:3px solid var(--ink);
}
.brand{
  flex:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;
}
.brand em{font-style:normal;color:var(--coral)}
.brand .brand-text{position:relative;display:inline-block;padding-bottom:5px}
.brand .brand-wave{position:absolute;left:4%;bottom:0;width:92%;height:5px;display:block}
.brand:focus-visible{outline:4px solid var(--sun);outline-offset:2px;border-radius:8px}
.topbar-band{flex:1;display:flex;justify-content:center;min-width:0}
.topbar-band-btn{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:44px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.88rem;color:var(--ink);
  background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:6px 14px;
  cursor:pointer;text-decoration:none;
}
.topbar-band-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-band-btn:active{transform:translateY(2px)}
.topbar-me{
  flex:none;width:42px;height:42px;border-radius:50%;border:2.5px solid var(--ink);
  background:#fff;display:grid;place-items:center;font-size:1.15rem;text-decoration:none;
}
.topbar-me.wait{border-style:dashed;background:#F1EDE4}

/* panneau de bascule entre groupes */
.band-switcher{
  position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:59;
  width:min(340px,calc(100vw - 32px));
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 6px 0 var(--ink);padding:8px;
}
.band-switcher-row{
  display:block;padding:13px 14px;border-radius:14px;text-decoration:none;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;color:var(--ink);
}
.band-switcher-row.current{background:var(--sun)}
.band-switcher-row.create{border-top:2px dashed #26202B33;border-radius:0;margin-top:4px;color:var(--muted)}
.band-switcher-row:active{transform:translateY(1px)}

/* retour contextuel vers le groupe, sous le contenu */
.back-line{text-align:center;margin-top:28px}
.back-line a{
  display:inline-block;padding:12px 10px;font-size:.85rem;font-weight:800;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.verdict-screen .back-line{position:relative;z-index:2}
.verdict-screen .back-line a{color:#ffffffd0}

/* retour contextuel en haut de page, sous le header global */
.back-top{text-align:left;margin:0 0 10px}
.back-top a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px 0 2px;
  font-size:.9rem;font-weight:800;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.verdict-screen .back-top{position:relative;z-index:2}
.verdict-screen .back-top a{color:#ffffffd0}

/* ---------- pastilles "Tes groupes" (home) ---------- */
.band-pills{display:flex;flex-wrap:wrap;gap:10px}
.band-pills .chip{text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.band-pills .chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}

/* pastille "à toi de voter" sur les pastilles de groupes */
.band-pills .chip{position:relative}
.pill-badge{
  position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 5px;
  border-radius:999px;background:var(--coral);color:#fff;border:2px solid var(--ink);
  display:grid;place-items:center;font-size:.7rem;font-weight:900;
}

/* bandeau discret "retrouve tes groupes" (invités avec ≥1 groupe) */
.home-notice{
  display:block;margin-top:14px;padding:11px 14px;
  background:#fff;border:2.5px dashed var(--ink);border-radius:16px;
  font-size:.85rem;font-weight:800;color:var(--ink);text-decoration:none;
}

/* ---------- toggle notifications (page compte) ---------- */
.notif-toggle{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.notif-toggle input{
  appearance:none;flex:none;width:52px;height:30px;border:2.5px solid var(--ink);
  border-radius:999px;background:#F1EDE4;position:relative;cursor:pointer;
  transition:background .15s ease;margin-top:2px;
}
.notif-toggle input::after{
  content:"";position:absolute;top:2px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);transition:transform .15s ease;
}
.notif-toggle input:checked{background:var(--mint)}
.notif-toggle input:checked::after{transform:translateX(20px)}
.notif-toggle input:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* ---------- bandeau "d'abord toi" (premier passage créateur) ---------- */
.first-banner{
  background:var(--sun);border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 5px 0 var(--ink);padding:13px 16px;margin-bottom:20px;
}
.first-banner b{
  display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.98rem;line-height:1.25;
}
.first-banner a{
  display:inline-block;margin-top:6px;font-size:.82rem;font-weight:900;color:var(--ink);
  opacity:.75;text-underline-offset:3px;
}

/* ---------- notices de plan (limites, archives) ---------- */
.plan-notice{
  padding:11px 14px;background:#fff;border:2.5px dashed var(--ink);border-radius:16px;
  font-size:.85rem;font-weight:800;color:var(--ink);
}

/* ---------- erreurs de formulaire ---------- */
.form-error{
  margin:-6px 0 14px;font-size:.85rem;font-weight:900;color:var(--coral);
}
/* bandeau d'échec serveur : impossible à rater, mobile compris */
.form-error-banner{
  margin:0 0 16px;padding:12px 14px;font-size:.9rem;
  background:#FFF0ED;border:2.5px solid var(--coral);border-radius:14px;
  box-shadow:0 4px 0 var(--ink);animation:pop .2s ease;
}

/* ---------- QG : blocs réordonnables (mobile inchangé, desktop 2 colonnes) ---------- */
/* Mobile : les wrappers s'effacent (display:contents) et l'ordre visuel
   reste exactement celui d'avant le Lot 6e. */
.band-cols{display:flex;flex-direction:column}
.band-main,.band-side{display:contents}
.band-block-id{order:1}
.band-block-new{order:2}
.band-block-open{order:3}
.band-block-closed{order:4}
.band-block-members{order:5}
.band-block-push{order:6} /* la carte 🔔 + le toggle, en fin de page mobile */

/* ============================================================
   Desktop (≥ 900px) — la même app, juste à l'aise.
   390px reste la référence : rien au-dessus ne s'applique en mobile.
   ============================================================ */
@media (min-width: 900px){
  .screen{max-width:560px;padding:36px 24px 64px}
  .topbar{
    padding-left:max(16px, calc((100vw - 1040px) / 2));
    padding-right:max(16px, calc((100vw - 1040px) / 2));
  }

  /* ----- home : hero généreux, pastilles en grille ----- */
  .screen-home{max-width:720px}
  .screen-home .wordmark{font-size:3.6rem !important}
  .screen-home .band-pills{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
  .screen-home .band-pills .chip{justify-content:center}
  .screen-home .home-cta{display:flex;gap:16px}
  .screen-home .home-cta .btn{flex:1}
  .screen-home .home-cta .btn + .btn{margin-top:0}
  .screen-home .how{flex-direction:row;gap:16px}
  .screen-home .how-card{flex:1}

  /* ----- vitrine : généreuse en desktop ----- */
  .pitch-title{font-size:2.9rem}
  .pitch-sub{font-size:1.1rem;max-width:560px;margin-left:auto;margin-right:auto}
  .pitch-hero .btn{max-width:460px;margin-left:auto;margin-right:auto}
  .demo-card{max-width:560px;margin-left:auto;margin-right:auto;padding:28px 26px}
  .feat-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .price-card{max-width:560px;margin-left:auto;margin-right:auto}
  .pitch-faq{max-width:640px;margin-left:auto;margin-right:auto}

  /* ----- galerie : 3 colonnes ----- */
  .screen-gallery{max-width:840px}
  .screen-gallery .tpl-grid{grid-template-columns:repeat(3,1fr);gap:16px}

  /* ----- grille de dispos : cellules plus grandes ----- */
  .screen-slots{max-width:760px}
  .screen-slots .dgrid{gap:9px}
  .screen-slots .grid-wrap{padding:16px}

  /* ----- verdict : le tampon grossit ----- */
  .verdict-screen{max-width:660px}
  .verdict-screen .stamp{padding:42px 30px;margin-top:44px}
  .verdict-screen .stamp h2{font-size:3.4rem}
  .verdict-screen .stamp p{font-size:1rem}

  /* ----- header : wordmark plus présent, hauteur inchangée ----- */
  .brand{font-size:1.5rem}

  /* ----- QG du groupe : 2/3 sondages, 1/3 colonne sticky ----- */
  .screen-band{max-width:920px}
  .band-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 32px;align-items:start}
  .poll-card{padding:23px 22px}
  .poll-card b{font-size:1.25rem}
  .band-main{display:block;grid-column:1;min-width:0}
  .band-side{
    display:flex;flex-direction:column;grid-column:2;grid-row:1;
    position:sticky;top:76px;
  }
  .band-side .band-block-new{order:1}
  .band-side .band-block-id{order:2;margin-top:22px}
  .band-side .band-block-members{order:3}
  .band-block-open{margin-top:6px !important}
  /* cartes En cours en 2 colonnes dès qu'il y en a plusieurs */
  .poll-grid:has(.poll-card:nth-child(2)){
    display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;
  }
  .poll-grid:has(.poll-card:nth-child(2)) .poll-card{margin-bottom:0}
}

/* ---------- accessibilité ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
  .confetti{display:none}
}


/* ---------- dashboard fondateurs (outil interne, dense) ---------- */
.screen-admin{max-width:1080px}
.adm-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.adm-nav{display:flex;gap:8px;flex-wrap:wrap}
.adm-nav a{font-weight:800;font-size:.82rem;text-decoration:none;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:5px 13px;background:var(--paper)}
.adm-nav a.on{background:var(--ink);color:var(--paper)}
.adm-cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.adm-card{flex:1 1 150px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:4px 4px 0 var(--ink);padding:12px 16px}
.adm-card b{display:block;font-family:'Fredoka',sans-serif;font-size:1.7rem;line-height:1.1}
.adm-card span{font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
.adm-card small{display:block;font-size:.74rem;opacity:.6;margin-top:2px}
.adm-card.mini{flex:1 1 90px;padding:8px 14px}
.adm-card.mini b{font-size:1.25rem}
.adm-card.baro{background:#FFF9EE;border-color:var(--coral)}
.adm-chart{border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:4px 4px 0 var(--ink);padding:12px 16px;margin-bottom:18px}
.adm-chart svg{display:block;width:100%;height:120px}
.adm-chart-title{font-weight:800;font-size:.85rem;margin-bottom:8px}
.adm-chart-x{display:flex;justify-content:space-between;font-size:.68rem;opacity:.6;margin-top:4px}
.adm-table-wrap{overflow-x:auto;border:2.5px solid var(--ink);border-radius:14px;background:#fff;box-shadow:4px 4px 0 var(--ink);margin-bottom:14px}
.adm-table{width:100%;border-collapse:collapse;font-size:.82rem}
.adm-table th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;padding:9px 10px;background:var(--paper);border-bottom:2.5px solid var(--ink);white-space:nowrap}
.adm-table td{padding:7px 10px;border-bottom:1px solid rgba(38,32,43,.12);white-space:nowrap}
.adm-table tr:last-child td{border-bottom:none}
.adm-table a{font-weight:800}
.adm-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;margin-bottom:12px}
.adm-tools a.on{font-weight:900;text-decoration:underline}
.adm-tools .small-btn{padding:7px 14px;font-size:.8rem;margin-left:auto}
.adm-h1{font-family:'Fredoka',sans-serif;font-size:1.5rem;margin-bottom:2px}
.adm-sub{font-weight:900;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;margin:16px 0 8px}
.adm-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.adm-two{grid-template-columns:1fr}}
.adm-note{opacity:.65;margin-top:12px}


/* ---------- widget feedback 💬 ---------- */
.fb-fab{position:fixed;right:14px;bottom:16px;z-index:60;width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-size:1.25rem;cursor:pointer;display:grid;place-items:center;padding:0}
.fb-fab:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink)}
/* la zone du fab ne recouvre jamais le dernier CTA d'une page */
body{padding-bottom:76px}
.fb-overlay{position:fixed;inset:0;z-index:70;background:rgba(38,32,43,.45);display:none;align-items:flex-end;justify-content:center;padding:14px}
.fb-overlay.open{display:flex}
@media (min-width:600px){.fb-overlay{align-items:center}}
.fb-modal{position:relative;width:min(460px,100%);background:var(--paper);border:3px solid var(--ink);
  border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:20px 18px}
.fb-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.05rem;cursor:pointer;padding:6px}
.fb-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.1rem;margin-bottom:12px}
.fb-types{display:flex;gap:10px;margin-bottom:14px}
.fb-type{flex:1;font-weight:800;font-size:.95rem;padding:11px 6px;border-radius:14px;background:#fff;
  border:2.5px solid var(--ink);cursor:pointer;font-family:inherit}
.fb-type.on{background:var(--sun);box-shadow:3px 3px 0 var(--ink)}
.fb-label{display:block;font-weight:800;font-size:.8rem;margin:10px 0 5px}
#fbForm textarea,#fbForm input[type=email]{width:100%;border:2.5px solid var(--ink);border-radius:12px;
  background:#fff;padding:10px 12px;font:inherit;font-size:.95rem}
#fbForm textarea:focus,#fbForm input[type=email]:focus{outline:3px solid var(--sun)}
.fb-send{width:100%;margin-top:16px}
#fbToast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:80;display:none;margin:0}
#fbToast.show{display:block}

.adm-badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--coral);color:#fff;font-size:.7rem;margin-left:4px}
.adm-card.alert{background:#FFF1EE;border-color:var(--coral)}
.adm-status{display:inline-block;font-size:.7rem;font-weight:900;text-transform:uppercase;padding:2px 9px;border-radius:999px;border:2px solid var(--ink)}
.adm-status.nouveau{background:var(--coral);color:#fff}
.adm-status.lu{background:var(--sun)}
.adm-status.traite{background:var(--mint);color:#fff}
.adm-pre{white-space:pre-wrap;background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:14px;font-size:.92rem}

/* ---------- grille complète 📊 : matrice membres × jours ---------- */
.gmatrix-wrap{
  overflow-x:auto;border:3px solid var(--ink);border-radius:16px;background:#fff;
  box-shadow:0 5px 0 var(--ink);margin-bottom:12px;
  -webkit-overflow-scrolling:touch;
}
.gmatrix{border-collapse:collapse;width:100%}
.gmatrix th,.gmatrix td{padding:8px 6px;text-align:center;font-size:.8rem}
.gmatrix .gname{
  position:sticky;left:0;background:#fff;text-align:left;z-index:1;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.8rem;
  white-space:nowrap;max-width:118px;overflow:hidden;text-overflow:ellipsis;
  box-shadow:2px 0 0 #26202B18;
}
.gmatrix thead th{border-bottom:2.5px solid var(--ink);vertical-align:bottom}
.gmatrix tbody tr+tr td,.gmatrix tbody tr+tr th{border-top:1.5px solid #26202B22}
.gday-btn{
  background:none;border:none;cursor:pointer;font:inherit;font-weight:800;
  color:var(--ink);padding:4px 2px;font-family:'Fredoka',sans-serif;white-space:nowrap;
}
.gday-btn small{display:block;font-weight:800;color:var(--muted);font-size:.68rem}
.gmatrix th.chosen .gday-btn{color:var(--coral)}
.gmatrix tr.chosen td,.gmatrix tr.chosen th{background:#FFF3E9}
.gcell{font-weight:900;min-width:38px}
.g-yes{background:var(--mint)}
.g-maybe{background:var(--sun)}
.g-no{background:#F8D7D5}
.g-none{color:var(--muted)}
.gcount{font-weight:900;color:var(--muted);white-space:nowrap}
.gday-detail>b{display:block;margin:16px 0 8px;font-family:'Fredoka',sans-serif;font-weight:600}
.gpick{
  background:var(--ink);color:#fff;border:none;border-radius:999px;cursor:pointer;
  padding:6px 11px;font-size:.72rem;font-weight:800;font-family:inherit;white-space:nowrap;
}
.gchosen{font-size:.72rem;font-weight:900;color:var(--coral);white-space:nowrap}

/* verdict : visage « autre réponse » sur le créneau (ni oui, ni silence) */
.face.part{opacity:.85}
.face.part span{background:#fff}