/* =========================================================
   Musifans : système de design « Nuit de concert »
   Fond noir chaud, cartes graphite, accents or et ambre, cœur rose.
   Mobile d'abord. Aucune dépendance.
   ========================================================= */

:root {
  --bg: #0C0A0D;
  --bg-2: #141116;
  --surface: #1A161C;
  --surface-2: #211C23;
  --surface-3: #2A242C;
  --ink: #F6F1EA;
  --ink-2: #CFC6BB;
  --muted: #918980;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --gold: #F8C25C;
  --gold-2: #F4A63A;
  --gold-soft: rgba(248, 194, 92, .12);
  --pink: #FF4F79;
  --violet: #A98BFF;
  --on-grad: #1B1206;
  --grad: linear-gradient(100deg, #FFD98C 0%, #F8BD55 42%, #F5A06C 78%, #F2898A 100%);
  --grad-gold: linear-gradient(180deg, #FFD683 0%, #F4AB3F 100%);
  --grad-soft: linear-gradient(135deg, rgba(248, 194, 92, .17) 0%, rgba(242, 137, 138, .10) 100%);
  --success: #3DD68C;
  --danger: #FF5C6C;
  --warning: #F8C25C;
  --r-lg: 24px;
  --r: 18px;
  --r-sm: 12px;
  --edge: inset 0 1px 0 rgba(255, 255, 255, .045);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --glow: 0 10px 30px rgba(248, 180, 80, .28);
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Outfit", "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(248, 170, 70, .10), transparent 62%),
    radial-gradient(900px 520px at -12% 108%, rgba(242, 110, 120, .07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: rgba(248, 194, 92, .45); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
small, .small { font-size: .86rem; }
code { font-size: .88em; color: var(--ink-2); }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(248, 194, 92, .6); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(248, 194, 92, .3); color: #fff; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.container-sm { max-width: 720px; }
.container-xs { max-width: 480px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.section { padding: 64px 0; }
@media (min-width: 900px) { .section { padding: 96px 0; } }

/* ---------- Boutons ---------- */
.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font: 600 1rem/1 var(--font); text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; box-shadow: var(--edge);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, border-color .18s, opacity .18s, color .18s;
}
.btn:hover { color: var(--ink); border-color: rgba(248, 194, 92, .45); background: var(--surface-3); }
.btn:active { transform: scale(.97); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn-grad {
  border: 0; color: var(--on-grad); background: var(--grad); background-size: 150% 150%; background-position: 0% 50%;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease);
}
.btn-grad:hover { color: var(--on-grad); background: var(--grad); background-size: 150% 150%; background-position: 100% 50%; box-shadow: 0 14px 36px rgba(248, 170, 80, .38), inset 0 1px 0 rgba(255, 255, 255, .4); transform: translateY(-1px); }
/* Bouton fort neutre : ivoire sur fond sombre. */
.btn-dark { border: 0; background: #F3EDE4; color: #151012; box-shadow: none; }
.btn-dark:hover { color: #151012; background: #FFFFFF; border: 0; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: transparent; }
.btn-soft { background: var(--gold-soft); border-color: rgba(248, 194, 92, .25); color: var(--gold); }
.btn-soft:hover { background: rgba(248, 194, 92, .2); color: #FFD98C; border-color: rgba(248, 194, 92, .45); }
.btn-danger { color: #FF8592; border-color: rgba(255, 92, 108, .35); background: transparent; }
.btn-danger:hover { background: rgba(255, 92, 108, .12); color: #FFA1AA; border-color: var(--danger); }
.btn-sm { min-height: 38px; padding: 0 15px; font-size: .9rem; }
.btn-xs { min-height: 30px; padding: 0 11px; font-size: .8rem; gap: .35em; }
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 1.08rem; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; }
.btn .price { font-weight: 800; opacity: .95; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: var(--ink); animation: spin .7s linear infinite; }
.btn-grad.is-loading::after, .btn-dark.is-loading::after { border-color: rgba(27, 18, 6, .25); border-top-color: var(--on-grad); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- En-tête public ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(12, 10, 13, .72);
  backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 1.4rem/1 var(--display); letter-spacing: -.03em; }
.brand:hover { color: var(--ink); }
.brand img { width: 36px; height: 36px; border-radius: 11px; box-shadow: 0 6px 18px rgba(248, 170, 80, .3); }
.brand b { font-weight: 800; }
.brand .fans { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: none; gap: 4px; align-items: center; }
.nav-links a { text-decoration: none; padding: 10px 14px; border-radius: 999px; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
/* Liens sur une seule ligne : affichés seulement quand tout l'en-tête tient (thème, langue et boutons compris). */
.nav-links a { white-space: nowrap; padding: 10px 10px; }
.site-header .brand { flex-shrink: 0; }
@media (min-width: 1180px) { .nav-links { display: flex; } }
.header-actions { display: flex; gap: 8px; align-items: center; }
/* Sélecteur de langue : pastille discrète FR / EN */
.lang-switch { display: inline-grid; place-items: center; min-width: 38px; height: 32px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font: 700 .78rem var(--font); letter-spacing: .06em; text-decoration: none; }
.lang-switch:hover { color: var(--gold); border-color: rgba(248, 194, 92, .5); }
.seg .seg-link { padding: 7px 14px; border-radius: 999px; font: 600 .84rem var(--font); color: var(--ink-2); text-decoration: none; }
.seg .seg-link[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(248, 194, 92, .45); }
@media (max-width: 420px) { .header-actions .btn-grad { display: none; } }

/* ---------- Pied de page ---------- */
.site-footer { padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); margin-top: 40px; color: var(--muted); font-size: .92rem; }
.site-footer .cols { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer a { color: var(--ink-2); text-decoration: none; display: block; padding: 4px 0; }
.site-footer a:hover { color: var(--gold); }
.site-footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin-bottom: 10px; }
.powered { text-align: center; padding: 28px 16px 40px; color: var(--muted); font-size: .85rem; }
.powered a { text-decoration: none; font-weight: 700; color: var(--ink-2); }

/* ---------- Cartes ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--edge), var(--shadow-sm); min-width: 0; }
.card-lg { padding: 28px; border-radius: var(--r-lg); }
.card-flat { box-shadow: none; background: var(--bg-2); }
.card-hover { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--edge), var(--shadow); border-color: var(--line-2); }
.card h3 { margin-bottom: .35em; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.divider { height: 1px; background: var(--line); margin: 20px 0; border: 0; }

/* ---------- Pastilles, badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(255, 255, 255, .07); color: var(--ink-2); white-space: nowrap; }
.badge-success { background: rgba(61, 214, 140, .14); color: #6BE6A9; }
.badge-danger { background: rgba(255, 92, 108, .14); color: #FF8C97; }
.badge-warning { background: rgba(248, 194, 92, .14); color: #FFD27A; }
.badge-violet { background: rgba(169, 139, 255, .14); color: #C6B4FF; }
.badge-pink { background: rgba(255, 79, 121, .14); color: #FF92AB; }
.badge-grad { background: var(--grad); color: var(--on-grad); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface-2);
  font-weight: 600; cursor: pointer; transition: all .15s var(--ease); color: var(--ink); font-size: .95rem; text-decoration: none;
}
.chip:hover { border-color: rgba(248, 194, 92, .5); color: var(--ink); }
.chip.is-active, .chip[aria-pressed="true"], input:checked + .chip { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); box-shadow: 0 0 0 3px rgba(248, 194, 92, .1); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Formulaires ---------- */
.field { display: block; margin-bottom: 18px; min-width: 0; }
.field > label, .label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 7px; color: var(--ink); }
.field .hint { font-size: .84rem; color: var(--muted); margin-top: 6px; }
.input, .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=url], .field input[type=tel],
.field input[type=date], .field input[type=time], .field input[type=search], .field input[type=color], .field select, .field textarea, select.input, textarea.input {
  width: 100%; min-height: 50px; padding: 12px 15px;
  border: 1.5px solid var(--line-2); border-radius: 14px;
  background: var(--bg-2); color: var(--ink);
  font: 1rem/1.4 var(--font);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: #6E675F; }
.field input[type=date]::-webkit-calendar-picker-indicator, .field input[type=time]::-webkit-calendar-picker-indicator { filter: invert(.85); }
.field input[type=color] { padding: 4px; height: 50px; }
.field input:disabled { opacity: .6; }
.field textarea, textarea.input { min-height: 110px; resize: vertical; }
.field select, select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23CFC6BB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field select option { background: var(--surface); color: var(--ink); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(248, 194, 92, .14); }
.input-group { display: flex; align-items: stretch; border: 1.5px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.input-group:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(248, 194, 92, .14); }
.input-group .addon { display: flex; align-items: center; padding: 0 12px; background: var(--surface-2); color: var(--muted); font-size: .92rem; white-space: nowrap; }
.input-group input { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-width: 0; flex: 1; }
.form-row { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.check input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; accent-color: var(--gold); }
/* interrupteur */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 6px 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field > label.switch { display: flex; margin-bottom: 0; } /* interrupteur posé dans un champ : il reste en ligne */
.switch .track { flex: 0 0 52px; height: 30px; border-radius: 999px; background: var(--surface-3); position: relative; transition: background .2s; box-shadow: inset 0 0 0 1px var(--line-2); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #F3EDE4; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); }
.switch input:checked + .track { background: var(--grad); box-shadow: none; }
.switch input:checked + .track::after { transform: translateX(22px); background: #1B1206; }
.switch input:focus-visible + .track { outline: 3px solid rgba(248, 194, 92, .6); outline-offset: 2px; }
.switch .txt b { display: block; }
.switch .txt small { color: var(--muted); }

/* Zone de dépôt de fichiers */
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
  min-height: 170px; padding: 24px; border: 2px dashed var(--line-2); border-radius: var(--r);
  background: var(--bg-2); cursor: pointer; transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--gold); background: rgba(248, 194, 92, .05); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone .dz-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--grad-soft); display: grid; place-items: center; font-size: 1.5rem; }
.dropzone.has-file { border-style: solid; border-color: var(--success); background: rgba(61, 214, 140, .05); }
.dropzone .dz-preview { width: 120px; height: 120px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); }
.dropzone-avatar { min-height: 150px; }
.dropzone-avatar .dz-preview { border-radius: 50%; }
.dropzone.is-missing { border-color: var(--danger); background: rgba(255, 92, 108, .06); }
.progress { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--grad); transition: width .2s; }

/* ---------- Messages ---------- */
.flashes { position: fixed; z-index: 120; left: 50%; transform: translateX(-50%); top: calc(var(--header-h) + 10px); width: min(560px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.flash { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); box-shadow: var(--shadow-lg); border: 1px solid var(--line-2); font-weight: 500; animation: flashIn .4s var(--ease); }
.flash .ico { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; color: #0C0A0D; font-weight: 800; }
.flash-success .ico { background: var(--success); }
.flash-error .ico { background: var(--danger); }
.flash-info .ico { background: var(--gold); }
.flash .x { margin-left: auto; background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: var(--muted); line-height: 1; padding: 0 2px; }
.flash.is-out { opacity: 0; transform: translateY(-8px); transition: all .3s; }
@keyframes flashIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.notice { padding: 14px 16px; border-radius: 14px; background: rgba(248, 194, 92, .08); border: 1px solid rgba(248, 194, 92, .18); color: #EBDCC4; font-size: .94rem; display: flex; gap: 12px; align-items: flex-start; }
.notice-warning { background: rgba(248, 160, 60, .1); border-color: rgba(248, 160, 60, .28); color: #FFD9A8; }
.notice-success { background: rgba(61, 214, 140, .09); border-color: rgba(61, 214, 140, .25); color: #A9F0CC; }
.notice-danger { background: rgba(255, 92, 108, .09); border-color: rgba(255, 92, 108, .28); color: #FFB3BB; }
.notice a:not(.btn) { color: inherit; }
.notice > :last-child { margin-bottom: 0; }
.notice .btn { margin-top: 6px; }

/* ---------- Feuille du bas (dialog) ---------- */
dialog.sheet {
  border: 0; padding: 0; margin: 0; max-width: none; max-height: none; background: transparent; color: var(--ink);
  width: 100%; height: 100%; inset: 0; overflow: hidden;
}
dialog.sheet::backdrop { background: rgba(5, 4, 6, .66); backdrop-filter: blur(4px); }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #1E191F 0%, #161217 100%); border: 1px solid var(--line-2); border-bottom: 0;
  border-radius: 28px 28px 0 0; padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 50px rgba(0, 0, 0, .6);
  animation: sheetUp .38s var(--ease);
}
.sheet-panel::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto 14px; }
@media (min-width: 700px) {
  .sheet-panel { left: 50%; right: auto; bottom: auto; top: 50%; width: 520px; transform: translate(-50%, -50%); border-radius: 28px; border-bottom: 1px solid var(--line-2); padding: 28px; animation: sheetPop .3s var(--ease); }
  .sheet-panel::before { display: none; }
}
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes sheetPop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
.sheet-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .07); cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--ink-2); }
.sheet-close:hover { background: rgba(255, 255, 255, .12); color: var(--ink); }
.sheet h2 { font-size: 1.45rem; padding-right: 40px; }
.sheet-sub { color: var(--ink-2); margin-top: -4px; }

/* ---------- Page d'accueil ---------- */
.hero { position: relative; overflow: hidden; padding: 40px 0 56px; }
.hero::before {
  content: ""; position: absolute; inset: -30% -20% auto auto; width: 70vw; height: 70vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(closest-side, rgba(248, 170, 70, .2), transparent 70%), radial-gradient(closest-side at 70% 60%, rgba(242, 110, 120, .12), transparent 70%);
  filter: blur(10px); z-index: -1; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; left: -15%; bottom: -30%; width: 60vw; height: 60vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(closest-side, rgba(248, 194, 92, .1), transparent 70%); z-index: -1; pointer-events: none;
}
.hero-grid { display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .hero { padding: 72px 0 96px; } .hero-grid { grid-template-columns: 1.05fr .95fr; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); font-size: .88rem; font-weight: 600; color: var(--ink-2); margin-bottom: 20px; }
.eyebrow .badge-grad { padding: 3px 9px; }
.hero h1 { margin-bottom: 18px; }
.hero .lead { font-size: clamp(1.08rem, 2.4vw, 1.3rem); color: var(--ink-2); max-width: 560px; margin-bottom: 28px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-proof { display: flex; gap: 22px; margin-top: 30px; flex-wrap: wrap; color: var(--muted); font-size: .92rem; }
.hero-proof b { color: var(--gold); font-family: var(--display); font-size: 1.15rem; }

/* maquette de téléphone de l'accueil : cadre noir à liseré métallique */
.phone {
  position: relative; width: min(330px, 86vw); margin: 0 auto; aspect-ratio: 9 / 18.6;
  border-radius: 46px; padding: 11px; background: linear-gradient(145deg, #3A3236 0%, #121014 30%, #0A0809 70%, #2C2629 100%);
  box-shadow: 0 50px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 80px rgba(248, 170, 70, .12);
  transform: rotate(-3deg);
}
/* L'écran découpe tout ce qu'il contient selon ses coins arrondis. isolation + masque :
   sans eux, Safari ne rogne pas les enfants d'un parent pivoté (transform) et les coins débordent. */
.phone-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #0F0C10; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
/* Pastille de caméra discrète, posée sur la photo comme sur un vrai téléphone. */
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 28%; height: 20px; background: #050405; border-radius: 999px; z-index: 3; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.mock-cover { height: 46%; background: #2A1A2E; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 18px; color: #fff; }
/* La photo remplit tout le haut de l'écran, jusque dans les coins arrondis. */
.mock-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 0%; }
/* Voiles : léger en haut (la pastille se fond), fondu vers l'écran en bas (titre lisible). */
.mock-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 11, .35) 0%, rgba(10, 8, 11, 0) 18%, rgba(10, 8, 11, 0) 42%, rgba(15, 12, 16, .92) 100%); }
.mock-cover > div { position: relative; z-index: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.mock-cover .t { position: relative; z-index: 1; font: 800 1.5rem/1 var(--display); }
.mock-cover .a { position: relative; z-index: 1; opacity: .9; font-size: .85rem; margin-top: 4px; }
.mock-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mock-wave { display: flex; align-items: center; gap: 2px; height: 34px; }
.mock-wave i { flex: 1; background: rgba(255, 255, 255, .16); border-radius: 2px; }
.mock-wave i.on { background: var(--gold); }
.mock-btn { height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 700; font-size: .82rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.mock-btn.g { background: var(--grad); color: var(--on-grad); border: 0; box-shadow: 0 6px 16px rgba(248, 170, 80, .3); }
.float-card { position: absolute; background: rgba(33, 28, 35, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line-2); border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow-lg); font-size: .82rem; font-weight: 600; display: flex; gap: 10px; align-items: center; animation: floaty 6s ease-in-out infinite; color: var(--ink); }
.float-card .e { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-soft); font-size: 1.05rem; }
.float-card small { display: block; color: var(--muted); font-weight: 500; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
.hero-visual { position: relative; padding: 20px 0; }
.hero-visual .fc1 { top: 47%; left: 0; }
.hero-visual .fc2 { bottom: 16%; right: 0; animation-delay: -3s; }
@media (max-width: 520px) { .hero-visual .fc1 { left: -4px; } .hero-visual .fc2 { right: -4px; } }

/* Visuels photo de l'accueil */
.shot { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-lg), 0 0 90px rgba(248, 170, 70, .1); background: var(--surface); }
.shot img { width: 100%; height: auto; }
.shot-caption { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 16px; background: rgba(15, 12, 16, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line-2); font-size: .88rem; color: var(--ink-2); }
.shot-caption b { color: var(--ink); }
.shot-caption .e { flex: 0 0 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); }
.showcase { position: relative; }
.showcase .shot { border-radius: 32px; }
@media (min-width: 900px) { .showcase .shot { border-radius: 40px; } }

.kicker { display: inline-block; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: 12px; }
.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head p { color: var(--ink-2); font-size: 1.08rem; }
.section-alt { background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps { counter-reset: s; }
.step { position: relative; padding: 24px; }
.step .n { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); font: 800 1.2rem var(--display); margin-bottom: 16px; box-shadow: var(--glow); }
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature .e { flex: 0 0 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .14); font-size: 1.35rem; }
.feature h3 { margin-bottom: 4px; font-size: 1.08rem; }
.feature p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.band { background: linear-gradient(140deg, #231C20 0%, #151115 60%, #1A1418 100%); border: 1px solid var(--line-2); color: var(--ink); border-radius: 32px; padding: 40px 24px; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(248, 170, 70, .28), transparent); }
.band::after { content: ""; position: absolute; inset: -50% auto auto -10%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(242, 110, 120, .16), transparent); }
.band > * { position: relative; z-index: 1; }
.band p { color: var(--ink-2); }
@media (min-width: 900px) { .band { padding: 64px; } }
.money-split { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
@media (min-width: 640px) { .money-split { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.money-split div { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 18px; padding: 18px; }
.money-split b { display: block; font: 800 1.8rem var(--display); color: var(--ink); }
.money-split div:last-child b { color: var(--gold); }
.money-split span { color: var(--muted); font-size: .9rem; }
.loop-demo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.loop-demo span { padding: 10px 14px; border-radius: 12px; color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .04em; }
.loop-demo .arrow { color: var(--muted); padding: 0; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px 20px; margin-bottom: 10px; }
.faq details[open] { border-color: rgba(248, 194, 92, .25); }
.faq summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--gold); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); }

/* ---------- Page morceau ---------- */
.track-hero { position: relative; padding: 24px 0 8px; overflow: hidden; isolation: isolate; }
.track-hero .bg { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(56px) saturate(1.25) brightness(.8); opacity: .6; transform: scale(1.1); }
.track-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 13, .15) 0%, rgba(12, 10, 13, .7) 55%, var(--bg) 100%); }
.track-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .track-layout { grid-template-columns: 420px minmax(0, 1fr); gap: 48px; padding-top: 24px; } .track-aside { position: sticky; top: calc(var(--header-h) + 20px); } }
.cover { position: relative; width: 100%; aspect-ratio: 1; border-radius: 26px; overflow: hidden; background: var(--grad); box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-ph { display: grid; place-items: center; color: var(--on-grad); font: 800 4rem var(--display); }
.track-cover-wrap { max-width: 400px; margin: 0 auto; width: 100%; }
@media (max-width: 899px) { .track-cover-wrap { max-width: 300px; } }
.track-title { text-align: center; margin-top: 22px; }
.track-title h1 { font-size: clamp(2rem, 7vw, 3.2rem); margin-bottom: 8px; }
.artist-chip { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); font-weight: 600; color: var(--ink); backdrop-filter: blur(8px); }
.artist-chip:hover { color: var(--ink); border-color: rgba(248, 194, 92, .5); }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--grad); color: var(--on-grad); display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: 0 0 auto; }
.avatar-lg { width: 120px; height: 120px; font-size: 2.6rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 3px var(--bg), 0 0 0 5px rgba(248, 194, 92, .7); }
.avatar-md { width: 56px; height: 56px; font-size: 1.3rem; }
.meta-line { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
@media (min-width: 900px) { .track-title { text-align: left; margin-top: 0; } .meta-line { justify-content: flex-start; } }

/* Lecteur */
.player { display: flex; align-items: center; gap: 14px; background: rgba(26, 22, 28, .85); backdrop-filter: blur(12px); border: 1px solid var(--line-2); border-radius: 22px; padding: 12px 16px 12px 12px; box-shadow: var(--edge), var(--shadow); margin-top: 22px; }
.play-btn { position: relative; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; background: var(--grad-gold); color: var(--on-grad); display: grid; place-items: center; box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .15s var(--ease); }
.play-btn:hover { transform: scale(1.05); }
.play-btn:active { transform: scale(.95); }
.play-btn:disabled { opacity: .5; cursor: default; }
.play-btn svg { width: 24px; height: 24px; }
.play-btn .i-pause { display: none; }
.is-playing .play-btn .i-play { display: none; }
.is-playing .play-btn .i-pause { display: block; }
.play-btn.is-buffering::after { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--gold); animation: spin 1s linear infinite; }
.player-main { flex: 1; min-width: 0; }
.wave { position: relative; height: 54px; cursor: pointer; touch-action: none; }
.wave canvas { width: 100%; height: 100%; }
.player-times { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.player-label { font-size: .78rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }

/* Actions du fan */
.fan-intro { margin: 30px 0 16px; text-align: center; }
.fan-intro h2 { font-size: 1.55rem; margin-bottom: 6px; }
.fan-intro p { color: var(--ink-2); margin: 0 auto; max-width: 460px; }
@media (min-width: 900px) { .fan-intro { text-align: left; } .fan-intro p { margin: 0; } }
.actions { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.action {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font: inherit; color: var(--ink); text-decoration: none; box-shadow: var(--edge), var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.action:hover { transform: translateY(-2px); box-shadow: var(--edge), var(--shadow); color: var(--ink); border-color: rgba(248, 194, 92, .35); }
.action:active { transform: scale(.985); }
.action .e { flex: 0 0 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 1.45rem; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .12); overflow: hidden; }
.action .t { flex: 1; min-width: 0; }
.action .t b { display: block; font-size: 1.04rem; }
.action .t small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.action .p { font: 800 1.05rem var(--display); white-space: nowrap; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); color: var(--ink); }
.action.primary { background: var(--grad); border: 0; color: var(--on-grad); box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .4); }
.action.primary .e { background: rgba(27, 18, 6, .12); border-color: transparent; }
.action.primary .t small { color: rgba(27, 18, 6, .72); }
.action.primary .p { background: rgba(27, 18, 6, .14); border-color: transparent; color: var(--on-grad); }
.action.primary:hover { color: var(--on-grad); box-shadow: 0 16px 40px rgba(248, 170, 80, .4), inset 0 1px 0 rgba(255, 255, 255, .4); }
.action.is-off { opacity: .45; cursor: not-allowed; }
.action.is-off[data-blocked], .btn[data-blocked] { opacity: .55; cursor: pointer; filter: saturate(.5); }
.btn[data-blocked]:disabled { pointer-events: none; }
.pb-what { margin: -6px 0 14px; text-align: center; font-size: 1.02rem; }
.pb-what span { color: var(--ink-2); }
.pb-ask { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--gold-soft); font-size: .9rem; text-align: center; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 36px 0 14px; }
.section-title h2 { font-size: 1.35rem; margin: 0; }
.benefit { display: flex; gap: 14px; align-items: center; }
.benefit .img { flex: 0 0 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--grad-soft); display: grid; place-items: center; font-size: 1.8rem; }
.benefit .img img { width: 100%; height: 100%; object-fit: cover; }
.benefit .txt { flex: 1; min-width: 0; }
.benefit .txt b { display: block; }
.benefit .txt p { margin: 2px 0 0; font-size: .9rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.benefit .left { font-size: .78rem; font-weight: 700; color: var(--gold); }
.concert { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.concert:last-child { border-bottom: 0; }
.date-tile { flex: 0 0 58px; height: 62px; border-radius: 15px; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--ink); text-align: center; display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.date-tile b { font: 800 1.45rem var(--display); color: var(--gold); }
.date-tile span { font-size: .66rem; letter-spacing: .08em; margin-top: 3px; color: var(--ink-2); }
.concert .info { flex: 1; min-width: 0; }
.concert .info b { display: block; }
.concert .info small { color: var(--muted); }
.artist-style { margin: -4px 0 12px; }
.artist-style span { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--gold); background: var(--gold-soft); padding: 3px 12px; border-radius: 99px; }
/* Accueil : artistes qui viennent de rejoindre Musifans. */
.new-artists { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .new-artists { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.new-artist { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 10px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--edge); text-decoration: none; color: var(--ink); min-width: 0; transition: transform .2s var(--ease), border-color .2s; }
.new-artist:hover { transform: translateY(-3px); border-color: rgba(248, 194, 92, .35); color: var(--ink); }
.new-artist .na-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 2px var(--bg), 0 0 0 4px rgba(248, 194, 92, .65); }
.new-artist b { font-size: .98rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.new-artist .na-style { font-size: .78rem; font-weight: 700; color: var(--gold); background: var(--gold-soft); padding: 2px 10px; border-radius: 99px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-tracks { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .mini-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mini-track { text-decoration: none; color: var(--ink); }
.mini-track .cover { border-radius: 18px; box-shadow: var(--shadow); transition: transform .2s var(--ease); }
.mini-track:hover .cover { transform: translateY(-3px); }
.mini-track b { display: block; margin-top: 8px; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-track small { color: var(--muted); }
.sticky-buy {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(30, 25, 32, .92); border: 1px solid var(--line-2); color: var(--ink); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(140%); transition: transform .35s var(--ease);
}
.sticky-buy.is-visible { transform: none; }
/* Bulle du chat de support (cadre fixe de 96 × 96 px en bas à droite) : la barre d'achat s'arrête avant elle. */
.has-chat .sticky-buy { right: 96px; }
.sticky-buy .t { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .sticky-buy { display: none; } }
/* Montants : la case choisie s'allume en or, comme sur les maquettes. */
.amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.amounts label { position: relative; }
.amounts input { position: absolute; opacity: 0; }
.amounts span { display: flex; align-items: center; justify-content: center; height: 64px; border-radius: 18px; border: 1.5px solid var(--line-2); font: 800 1.35rem var(--display); cursor: pointer; transition: all .15s var(--ease); background: rgba(255, 255, 255, .03); color: var(--ink); }
.amounts span:hover { border-color: rgba(248, 194, 92, .45); }
.amounts input:checked + span { border: 2px solid var(--gold); background: rgba(248, 194, 92, .1); color: var(--gold); box-shadow: 0 0 0 4px rgba(248, 194, 92, .1), 0 10px 26px rgba(248, 170, 80, .18); transform: scale(1.03); }
.amounts input:focus-visible + span { outline: 3px solid rgba(248, 194, 92, .6); }
.secure-line { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--muted); font-size: .82rem; margin-top: 12px; text-align: center; }
.pay-logos { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.pay-logos span { font-size: .7rem; font-weight: 700; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-2); }

/* ---------- Page artiste ---------- */
.artist-hero { position: relative; text-align: center; padding: 44px 0 24px; overflow: hidden; isolation: isolate; }
.artist-hero .bg { position: absolute; inset: 0 0 25% 0; z-index: -1; background: radial-gradient(60% 80% at 50% 0%, rgba(248, 170, 70, .22), transparent 70%); }
.artist-hero .avatar-lg { margin: 0 auto 18px; }
.artist-hero h1 { font-size: clamp(2rem, 7vw, 3rem); margin-bottom: 8px; }
.artist-hero .bio { max-width: 560px; margin: 0 auto; color: var(--ink-2); }
.socials { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.socials a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); text-decoration: none; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.track-list .item { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 18px; text-decoration: none; color: var(--ink); transition: background .15s; }
.track-list .item:hover { background: rgba(255, 255, 255, .04); color: var(--ink); }
.track-list .item .cover { flex: 0 0 64px; width: 64px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.track-list .item .t { flex: 1; min-width: 0; }
.track-list .item .t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-list .item .t small { color: var(--muted); }

/* ---------- Remix Studio ---------- */
.studio { padding-bottom: 120px; }
.studio-head { display: flex; gap: 14px; align-items: center; margin: 22px 0; }
.studio-head .cover { flex: 0 0 72px; width: 72px; border-radius: 16px; }
.studio-head h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); margin: 0; }
.palette { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .palette { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .palette { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.loop-block {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 84px; padding: 12px 14px;
  border: 0; border-radius: 18px; color: #fff; text-align: left; cursor: pointer; font: inherit;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c, #F8C25C) 100%, #fff 0%) 0%, color-mix(in srgb, var(--c, #F8C25C) 78%, #000) 100%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c, #F8C25C) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s var(--ease), box-shadow .15s;
}
.loop-block:hover { transform: translateY(-2px); }
.loop-block:active { transform: scale(.96); }
.loop-block b { font: 800 1rem var(--display); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.loop-block small { opacity: .9; font-size: .78rem; }
.loop-block .add { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: grid; place-items: center; font-weight: 800; }
.loop-block .listen { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .22); color: #fff; cursor: pointer; display: grid; place-items: center; }
.loop-block .listen:hover { background: rgba(0, 0, 0, .35); }
.timeline { min-height: 120px; padding: 14px; border-radius: 22px; border: 2px dashed var(--line-2); background: var(--bg-2); display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.timeline.is-empty { display: grid; place-items: center; color: var(--muted); text-align: center; }
.seq-item {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 8px 9px 12px; border-radius: 14px;
  background: var(--c, var(--gold)); color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase;
  cursor: grab; user-select: none; touch-action: none; transition: transform .15s var(--ease), box-shadow .15s, opacity .15s;
}
.seq-item .num { font-size: .68rem; opacity: .8; font-weight: 700; }
.seq-item button { border: 0; background: rgba(0, 0, 0, .2); color: #fff; width: 24px; height: 24px; border-radius: 8px; cursor: pointer; font-size: .9rem; line-height: 1; display: grid; place-items: center; }
.seq-item button:hover { background: rgba(0, 0, 0, .35); }
.seq-item.is-now { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold), 0 0 24px rgba(248, 194, 92, .5); transform: scale(1.06); }
.seq-item.is-dragging { opacity: .4; }
.seq-item.drop-before::before { content: ""; position: absolute; left: -6px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--gold); }
.seq-ghost { position: fixed; pointer-events: none; z-index: 200; transform: rotate(-4deg) scale(1.05); box-shadow: var(--shadow-lg); }
.studio-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(18, 15, 19, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line-2);
}
.studio-bar .container { display: flex; gap: 12px; align-items: center; }
.studio-bar .play-btn { flex: 0 0 56px; width: 56px; height: 56px; }
.studio-bar .info { flex: 1; min-width: 0; }
.studio-bar .info b { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-bar .info small { color: var(--muted); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font: 600 .88rem var(--font); cursor: pointer; color: var(--ink-2); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(248, 194, 92, .45); }
.fx { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .fx { grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px; } }
.fx .label { font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.progress-seq { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.progress-seq span { display: block; height: 100%; width: 0; background: var(--grad); }
.loading-audio { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(248, 194, 92, .08); border: 1px solid rgba(248, 194, 92, .2); color: #EBDCC4; font-weight: 600; }
.loading-audio .spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(248, 194, 92, .25); border-top-color: var(--gold); animation: spin .8s linear infinite; }

/* ---------- Espace artiste / admin ---------- */
.app { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .app { grid-template-columns: 260px minmax(0, 1fr); } }
.sidebar { display: none; }
@media (min-width: 1024px) {
  .sidebar { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; padding: 22px 16px; border-right: 1px solid var(--line); background: rgba(18, 15, 19, .85); overflow-y: auto; }
  .sidebar .brand { padding: 4px 8px 22px; }
}
.side-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; text-decoration: none; font-weight: 600; color: var(--ink-2); font-size: .96rem; }
.side-link:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.side-link.is-active { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(248, 194, 92, .22); }
.side-link .i { width: 22px; text-align: center; font-size: 1.05rem; }
.side-link .count { margin-left: auto; background: var(--pink); color: #fff; font-size: .72rem; padding: 2px 8px; border-radius: 999px; }
.side-sep { height: 1px; background: var(--line); margin: 10px 6px; }
.side-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 10px 14px 4px; font-weight: 700; }
.side-foot { margin-top: auto; padding-top: 16px; }
.app-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 60px; padding: 0 16px; background: rgba(12, 10, 13, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .app-top .brand { display: none; } }
@media (min-width: 1024px) { .hide-desktop { display: none !important; } }
.save-bar { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 5; }
@media (min-width: 1024px) { .save-bar { bottom: 20px; } }
.app-main { padding: 22px 16px 110px; max-width: 1180px; width: 100%; margin: 0 auto; min-width: 0; }
@media (min-width: 1024px) { .app-main { padding: 32px 36px 60px; } }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.crumbs { font-size: .86rem; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(16, 13, 17, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line-2);
}
@media (min-width: 1024px) { .tabbar { display: none; } }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; text-decoration: none; font-size: .68rem; font-weight: 600; color: var(--muted); border-radius: 12px; }
.tabbar a .i { font-size: 1.25rem; line-height: 1; }
.tabbar a.is-active { color: var(--gold); }
.tabbar a.add .i { width: 46px; height: 46px; margin-top: -20px; border-radius: 16px; background: var(--grad); color: var(--on-grad); display: grid; place-items: center; font-size: 1.6rem; box-shadow: var(--glow); }
.admin-nav { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(18, 15, 19, .9); scrollbar-width: none; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .88rem; color: var(--ink-2); background: rgba(255, 255, 255, .05); }
.admin-nav a.is-active { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(248, 194, 92, .35); }
@media (min-width: 1024px) { .admin-nav { display: none; } }

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; min-width: 0; box-shadow: var(--edge); }
.stat .k { font-size: .82rem; color: var(--muted); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.stat .v { font: 800 1.75rem/1.1 var(--display); margin-top: 6px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .s { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.stat-hero { background: linear-gradient(140deg, #2B2116 0%, #1C1719 70%); border: 1px solid rgba(248, 194, 92, .25); position: relative; overflow: hidden; }
.stat-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(248, 170, 70, .45), transparent); }
.stat-hero .v { color: #FFD98C; position: relative; z-index: 1; }
.stat-hero .k, .stat-hero .s { color: #CDB89A; position: relative; z-index: 1; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .stats-3 { gap: 8px; } .stats-3 .stat { padding: 12px; } .stats-3 .v { font-size: 1.2rem; } .stats-3 .k { font-size: .74rem; } }
.period-title { font: 700 .8rem var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 26px 0 10px; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 10px; }
.bars i { flex: 1; min-height: 3px; border-radius: 4px 4px 2px 2px; background: rgba(255, 255, 255, .07); position: relative; }
.bars i.has { background: linear-gradient(180deg, #FFD98C 0%, #F4A63A 100%); }
.bars i:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; background: #F3EDE4; color: #151012; padding: 4px 8px; border-radius: 8px; font-size: .72rem; white-space: nowrap; font-style: normal; z-index: 2; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist .c { flex: 0 0 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: .8rem; color: #0C0A0D; font-weight: 800; }
.checklist li.done .c { background: var(--success); border-color: var(--success); }
.checklist li.done span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .2); }
.checklist a { margin-left: auto; }
.meter { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.track-row { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: box-shadow .2s, transform .2s, border-color .2s; box-shadow: var(--edge); }
.track-row:hover { box-shadow: var(--edge), var(--shadow); color: var(--ink); transform: translateY(-1px); border-color: rgba(248, 194, 92, .3); }
.track-row .cover { flex: 0 0 64px; width: 64px; border-radius: 14px; }
.track-row .t { flex: 1; min-width: 0; }
.track-row .t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-row .nums { display: none; gap: 20px; text-align: right; }
.track-row .nums div b { display: block; font-family: var(--display); }
.track-row .nums div small { color: var(--muted); }
@media (min-width: 760px) { .track-row .nums { display: flex; } }
/* Éditeur de boucles : grille rythmique. */
.rhythm, .rhythm-wait, .rhythm-none { margin-top: 12px; }
.rhythm-wait { display: flex; align-items: center; gap: 8px; }
.rhythm-wait.hidden, .rhythm-none.hidden, .rhythm.hidden, .rhythm-fix.hidden { display: none; }
.rhythm { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.rhythm-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rhythm-bpm { font-size: .95rem; }
.rhythm-bpm b { font-family: var(--display); font-size: 1.15rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.rhythm-snap { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--muted); margin: 0; }
.rhythm-snap select { width: auto; min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
.rhythm-main [data-rhythm-toggle] { margin-left: auto; }
.rhythm-fix { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.editor-wave .sel-len { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: rgba(12, 10, 13, .82); color: var(--gold); pointer-events: none; }
.editor-wave .sel-len:empty { display: none; }
/* Super Admin : aperçu de l'e-mail à un artiste. */
.mail-preview { border-radius: 14px; background: var(--bg); border: 1px solid var(--line); padding: 14px 16px; font-size: .92rem; line-height: 1.55; max-height: 420px; overflow: auto; overflow-wrap: anywhere; }
.mail-preview .mp-subj { font-weight: 700; color: var(--ink); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.mail-preview .mp-subj:empty::before { content: "…"; color: var(--muted); }
.mail-preview .mp-body p { margin: 0 0 10px; color: var(--ink-2); }
.mail-preview a { color: var(--gold); }
.propose-opts { display: grid; gap: 6px; margin-bottom: 12px; }
.propose-opts label { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; margin: 0; cursor: pointer; }
.propose-opts input { margin-top: 3px; accent-color: var(--gold); flex: 0 0 auto; }
.propose .hidden { display: none; }
.artist-qr { display: grid; gap: 20px; align-items: center; }
.artist-qr .qr-box { justify-self: center; }
.artist-qr .qr-box img { width: 200px; height: 200px; display: block; }
.artist-qr-txt { min-width: 0; }
@media (min-width: 760px) { .artist-qr { grid-template-columns: auto minmax(0, 1fr); } }
.qr-mini { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.qr-mini img { width: 56px; height: 56px; border-radius: 10px; background: #fff; padding: 4px; flex: 0 0 56px; }
.qr-mini .t { flex: 1; min-width: 0; }
.perk-head .cover { flex: 0 0 52px; width: 52px; border-radius: 12px; }
.perk-head b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Onglets soulignés d'or, comme « Morceaux » sur les maquettes. */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: 0 0 auto; padding: 12px 14px; text-decoration: none; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .95rem; }
.tabs a:hover { color: var(--ink); }
.tabs a.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.notif { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .93rem; color: var(--ink-2); }
.notif:last-child { border-bottom: 0; }
.notif.unread { font-weight: 600; color: var(--ink); }
.notif time { margin-left: auto; color: var(--muted); font-size: .78rem; white-space: nowrap; font-weight: 400; }
.empty { text-align: center; padding: 40px 20px; }
.empty .e { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 16px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .14); font-size: 2rem; }
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--muted); max-width: 400px; margin: 0 auto 18px; }

/* Tableaux : défilement horizontal maîtrisé sur mobile */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: rgba(255, 255, 255, .025); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tfoot td { font-weight: 700; background: var(--bg-2); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin: 0; flex: 1 1 140px; min-width: 0; }
.filters .field input, .filters .field select { min-height: 44px; padding: 8px 12px; }
.filters .field select { padding-right: 34px; }

/* Éditeur de boucles */
.editor-wave { position: relative; height: 140px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; touch-action: none; cursor: crosshair; user-select: none; }
.editor-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.editor-wave .sel { position: absolute; top: 0; bottom: 0; background: rgba(248, 194, 92, .14); border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); pointer-events: none; }
.editor-wave .sel .h { position: absolute; top: 50%; width: 14px; height: 38px; margin-top: -19px; border-radius: 6px; background: var(--gold); pointer-events: auto; cursor: ew-resize; }
.editor-wave .sel .h.l { left: -8px; }
.editor-wave .sel .h.r { right: -8px; }
.editor-wave .cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); pointer-events: none; }
.editor-wave .preview-zone { position: absolute; top: 0; height: 6px; background: var(--grad); pointer-events: none; }
.editor-wave .loop-mark { position: absolute; bottom: 0; height: 22px; border-radius: 6px 6px 0 0; color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; opacity: .92; }
.loop-list .lp { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 8px; }
.loop-list .lp .sw { flex: 0 0 12px; height: 36px; border-radius: 6px; }
.loop-list .lp input { min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: inherit; min-width: 0; }
.loop-list .lp input:focus { outline: none; border-color: var(--gold); }
.loop-list .lp .nm { flex: 1 1 120px; font-weight: 600; }
.loop-list .lp .tm { width: 76px; font-variant-numeric: tabular-nums; }
.loop-list .lp .ctl { display: flex; gap: 4px; }
@media (max-width: 560px) { .loop-list .lp { flex-wrap: wrap; } .loop-list .lp .nm { flex-basis: calc(100% - 30px); } }

/* QR / partage : le QR reste noir sur blanc, condition d'une lecture fiable. */
.qr-box { background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(248, 194, 92, .25); max-width: 300px; margin: 0 auto; }
.qr-box img { width: 100%; }
.copy-field { display: flex; gap: 8px; align-items: center; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; padding: 6px 6px 6px 14px; }
.copy-field code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; color: var(--ink); }

/* Pages simples (connexion, erreur...) */
.auth { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 32px 16px 64px; position: relative; overflow: hidden; }
.auth::before { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, rgba(248, 170, 70, .14), transparent); top: -220px; right: -160px; z-index: -1; }
.auth::after { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 110, 120, .09), transparent); bottom: -220px; left: -160px; z-index: -1; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card h1 { font-size: 2rem; }
.big-emoji { font-size: 3rem; line-height: 1; margin-bottom: 14px; }
/* Guide des artistes. */
.guide-hero { text-align: center; padding: 48px 0 26px; background: radial-gradient(60% 80% at 50% 0%, rgba(248, 170, 70, .16), transparent 70%); }
.guide-hero h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 8px 0 12px; }
.guide-hero .lead { color: var(--ink-2); font-size: 1.05rem; max-width: 620px; margin: 0 auto 20px; }
.guide-toc { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 8px 0 28px; }
.guide-toc a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; min-width: 0; }
.guide-toc a:hover { border-color: rgba(248, 194, 92, .4); color: var(--ink); }
.guide-toc .n { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; font-size: .78rem; }
.guide-sec { padding: 26px 0 8px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.guide-sec h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.35rem, 4vw, 1.7rem); margin: 0 0 12px; }
.guide-sec h2 .n { flex: 0 0 36px; height: 36px; border-radius: 12px; background: var(--grad); color: var(--on-grad); display: grid; place-items: center; font-size: 1rem; }
.guide-sec h3 { font-size: 1.08rem; margin: 22px 0 8px; color: var(--gold); }
.guide-sec p, .guide-sec li { color: var(--ink-2); line-height: 1.6; }
.guide-sec li { margin-bottom: 6px; }
.guide-sec b { color: var(--ink); }
.guide-sec code { font-size: .86em; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); overflow-wrap: anywhere; }
.guide-steps { counter-reset: st; list-style: none; padding: 0; margin: 12px 0; }
.guide-steps li { counter-increment: st; position: relative; padding: 10px 12px 10px 50px; margin-bottom: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-steps li::before { content: counter(st); position: absolute; left: 12px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.guide-check { list-style: none; padding: 0; }
.guide-check li { position: relative; padding-left: 28px; }
.guide-check li::before { content: "✓"; position: absolute; left: 4px; color: var(--success); font-weight: 800; }
.guide-key { position: relative; }
.guide-points { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin: 14px 0 6px; }
.guide-points div { padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(248, 194, 92, .22); }
.guide-points b { display: block; margin-bottom: 4px; }
.guide-points span { color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.guide-example { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); padding: 6px 16px; margin: 12px 0; }
.guide-example div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.guide-example div:last-child { border-bottom: 0; }
.guide-example span { color: var(--ink-2); }
.guide-example .tot b { color: var(--gold); text-align: right; }
.guide-sec details { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; margin-bottom: 8px; }
.guide-sec summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.guide-sec details p { margin: 10px 0 0; }
.guide-end { text-align: center; margin: 30px 0 48px; padding: 28px 18px; border-radius: 22px; background: var(--surface); border: 1px solid rgba(248, 194, 92, .25); }
.guide-end h2 { margin: 0 0 8px; }
.guide-end p { color: var(--ink-2); }
@media print { .site-header, .site-footer, .guide-hero .row, .guide-end .btn { display: none !important; } .guide-sec details { break-inside: avoid; } }
.legal h2 { font-size: 1.3rem; margin-top: 2em; }
.legal p, .legal li { color: var(--ink-2); }
.demo-banner { background: repeating-linear-gradient(-45deg, rgba(248, 194, 92, .12), rgba(248, 194, 92, .12) 12px, rgba(248, 194, 92, .06) 12px, rgba(248, 194, 92, .06) 24px); color: var(--gold); text-align: center; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-bottom: 1px solid rgba(248, 194, 92, .2); }

/* Impression */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Animations d'apparition */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Accueil : simulateur de revenus d'un concert ---------- */
.sim { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sim { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; } }
.sim-controls, .sim-result { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--edge), var(--shadow-sm); padding: 22px 18px; min-width: 0; }
@media (min-width: 640px) { .sim-controls, .sim-result { padding: 28px; } }
.sim-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sim-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 0 6px; border-top: 1px solid var(--line); }
.sim-presets + .sim-row { border-top: 0; }
.sim-row label { font-weight: 700; color: var(--ink); font-size: .96rem; }
.sim-sub label { font-weight: 600; color: var(--ink-2); padding-left: 16px; position: relative; }
.sim-sub label::before { content: ""; position: absolute; left: 2px; top: .15em; width: 8px; height: .65em; border-left: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); border-bottom-left-radius: 4px; }
.sim-sub2 { border-top-style: dashed; }
.sim-sub2 label { padding-left: 32px; }
.sim-sub2 label::before { left: 18px; }
.sim-row output { font: 800 1.05rem var(--display); color: var(--gold); font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }
.sim-row input[type=range] { grid-column: 1 / -1; width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 50%; }
.sim-row input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #F8BD55, #F2898A) 0 / var(--p) 100% no-repeat, var(--surface-3); }
.sim-row input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--surface-3); }
.sim-row input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #F8BD55, #F2898A); }
.sim-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #FFE2A8; border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(0, 0, 0, .5); transition: transform .15s var(--ease); }
.sim-row input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #FFE2A8; border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(0, 0, 0, .5); }
.sim-row input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.sim-row input[type=range]:focus-visible { outline: none; }
.sim-row input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--gold), 0 0 0 7px rgba(248, 194, 92, .25); }
.sim-ideas { margin: 14px 0 0; }
.sim-result { position: relative; overflow: hidden; text-align: center; background: linear-gradient(160deg, #241C20 0%, #17131A 70%); border-color: var(--line-2); }
@media (min-width: 900px) { .sim-result { position: sticky; top: 88px; } }
.sim-result::before { content: ""; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 120%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(248, 170, 70, .2), transparent); pointer-events: none; }
.sim-result > * { position: relative; }
.sim-cap { display: block; color: var(--ink-2); font-weight: 600; }
.sim-total { display: block; font: 900 clamp(3rem, 12vw, 4.6rem)/1.05 var(--display); letter-spacing: -.03em; margin: 6px 0 16px; font-variant-numeric: tabular-nums; }
.sim-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-3); margin-bottom: 14px; }
.sim-bar i { display: block; height: 100%; transition: width .45s var(--ease); }
.sim .b1 { background: #4C8DFF; }
.sim .b2 { background: #FF4F79; }
.sim .b3 { background: linear-gradient(90deg, #FFD98C, #F4A63A); }
.sim-lines { list-style: none; margin: 0; padding: 0; text-align: left; }
.sim-lines li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sim-lines .dot { width: 10px; height: 10px; border-radius: 50%; }
.sim-lines em { font-style: normal; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.sim-lines b { font: 800 1.05rem var(--display); min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.sim-net { margin-top: 12px; text-align: left; font-size: .92rem; }
.sim-net div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--muted); }
.sim-net b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-net .sim-mine { margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--gold-soft); border: 1px solid rgba(248, 194, 92, .3); color: var(--ink); font-weight: 700; align-items: center; }
.sim-net .sim-mine b { font: 900 1.5rem var(--display); color: var(--gold); }
.sim-cta { width: 100%; margin-top: 18px; }
.sim-note { margin: 14px 0 0; text-align: left; }
.sim-note + .sim-note { margin-top: 4px; }

/* ---------- Accueil : carrousel du top des concerts ---------- */
.top-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.top-head h2 { margin-bottom: 6px; }
.top-head p { margin: 0; max-width: 560px; }
.top-nav { display: none; gap: 8px; flex: none; }
@media (min-width: 760px) { .top-nav { display: flex; } }
.top-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: 400 1.7rem/1 var(--display); cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.top-arrow:hover { border-color: rgba(248, 194, 92, .55); color: var(--gold); transform: translateY(-1px); }
.top-arrow[hidden] { display: none; }
.top-carousel { position: relative; }
.top-carousel:not(.fits)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 30px; width: 44px; background: linear-gradient(90deg, rgba(12, 10, 13, 0), var(--bg)); pointer-events: none; }
.top-track { list-style: none; margin: 0; padding: 14px 4px 18px; display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 250px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 4px; overscroll-behavior-x: contain; scrollbar-width: none; outline: none; }
.top-track::-webkit-scrollbar { display: none; }
.top-track:focus-visible { box-shadow: 0 0 0 2px var(--gold); border-radius: 22px; }
@media (min-width: 760px) { .top-track { grid-auto-columns: calc((100% - 3 * 16px - 8px) / 4); gap: 16px; } }
@media (min-width: 1100px) { .top-track { grid-auto-columns: calc((100% - 4 * 16px - 8px) / 5); } }
.top-card { scroll-snap-align: start; min-width: 0; }
.top-card a { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; height: 100%; padding: 28px 14px 20px; border-radius: 24px; background: linear-gradient(170deg, var(--surface-2) 0%, var(--surface) 65%); border: 1px solid var(--line); box-shadow: var(--edge), var(--shadow-sm); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.top-card a:hover { transform: translateY(-4px); border-color: rgba(248, 194, 92, .4); box-shadow: var(--edge), var(--shadow); color: var(--ink); }
.top-card a::before { content: ""; position: absolute; inset: -30% -20% auto; height: 70%; background: radial-gradient(closest-side, rgba(248, 170, 70, .13), transparent); pointer-events: none; }
.top-rank { position: absolute; top: 12px; left: 12px; min-width: 34px; height: 26px; padding: 0 9px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font: 800 .8rem var(--display); color: var(--ink-2); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); }
.top-photo { position: relative; width: 112px; height: 112px; border-radius: 50%; padding: 3px; background: var(--line-2); margin-bottom: 10px; flex: none; }
.top-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--bg-2); }
.top-name { font: 800 1.08rem/1.2 var(--display); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-style { font-size: .76rem; font-weight: 700; color: var(--gold); background: var(--gold-soft); padding: 2px 10px; border-radius: 99px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-amount { margin-top: auto; padding-top: 12px; font: 900 2.1rem/1 var(--display); letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.top-meta { font-size: .8rem; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium .top-photo { background: var(--grad); box-shadow: 0 10px 30px rgba(248, 170, 80, .25); }
.podium.p1 a { border-color: rgba(248, 194, 92, .45); background: linear-gradient(170deg, #2C2219 0%, var(--surface) 70%); }
.p1 .top-rank { background: var(--grad); color: var(--on-grad); border: 0; }
.p2 .top-rank { background: linear-gradient(180deg, #F1F1F4, #B9BCC6); color: #1B1B22; border: 0; }
.p3 .top-rank { background: linear-gradient(180deg, #F0B98A, #B9733F); color: #24140A; border: 0; }
.p1 .top-rank::before { content: "👑\00a0"; }
.top-dots { display: flex; justify-content: center; gap: 7px; }
.top-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line-2); transition: width .3s var(--ease), background .3s; }
.top-dots i.on { width: 22px; background: var(--gold); }
.fits .top-dots { display: none; }
@media (prefers-reduced-motion: reduce) { .top-card a, .sim-bar i, .top-dots i { transition: none; } }

/* ---------- Super Admin : newsletter ---------- */
.nl-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1480px) { .nl-grid { grid-template-columns: minmax(420px, 1fr) 640px; } }
.nl-main { display: grid; gap: 18px; min-width: 0; }
.nl-step h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.nl-n { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--grad); color: var(--on-grad); font: 800 .9rem var(--display); flex: none; }
.nl-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.nl-progress { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 14px; }
.nl-progress i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .6s var(--ease); }
.nl-edit-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.nl-edit-head h3 { margin: 0; }
.nl-sec { border-top: 1px dashed var(--line-2); margin-top: 18px; padding-top: 16px; }
.nl-sec-n { font-weight: 800; color: var(--gold); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.nl-img-block { margin: 6px 0 16px; padding: 12px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.nl-img-title { font-weight: 700; font-size: .88rem; margin-bottom: 8px; }
.nl-img { aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; margin-bottom: 8px; max-width: 420px; }
.nl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-img.is-empty span { color: var(--muted); font-size: .9rem; }
.nl-img-block details { margin: 4px 0 8px; font-size: .86rem; color: var(--ink-2); }
.nl-img-block summary { cursor: pointer; }
.nl-prompt { width: 100%; margin-top: 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); padding: 8px 10px; font: .86rem var(--font); }
.nl-send-box { margin-top: 18px; padding: 18px; border-radius: 16px; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .25); }
.nl-side { position: sticky; top: 84px; min-width: 0; }
.nl-prev-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.nl-frame { border-radius: 18px; border: 1px solid var(--line-2); background: #0C0A0D; overflow: auto; max-height: calc(100vh - 150px); display: flex; justify-content: center; }
.nl-frame iframe { border: 0; width: 600px; max-width: 100%; height: 900px; display: block; background: #0C0A0D; }
@media (max-width: 1479px) { .nl-side { position: static; } .nl-frame { max-height: none; } }
.nl-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.nl-test-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.nl-test-row input { flex: 1 1 220px; min-width: 0; padding: 11px 14px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--bg-2); color: var(--ink); font: 1rem var(--font); }
.nl-test-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(248, 194, 92, .14); }
.nl-test-row .btn { flex: 0 1 auto; max-width: 100%; white-space: normal; }
.nl-img-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.nl-sec-head .nl-sec-n { margin: 0; }
.btn-danger-soft { color: #FFB3BB; border-color: rgba(255, 92, 108, .3); }
.btn-danger-soft:hover { color: #fff; border-color: var(--danger); }
/* Boutons de la newsletter : jamais plus larges que leur carte, le texte passe à la ligne si besoin. */
.nl-step .btn { max-width: 100%; white-space: normal; text-align: center; height: auto; padding-top: 8px; padding-bottom: 8px; }

/* ---------- Accueil : ce qui se perd après un concert ---------- */
.moments { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 860px) { .moments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.moment { position: relative; padding: 24px 22px 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--edge), var(--shadow-sm); min-width: 0; }
.moment .when { display: inline-block; font: 800 .78rem var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); }
.moment .e { display: block; font-size: 1.9rem; margin: 14px 0 6px; }
.moment h3 { margin: 0 0 8px; font-size: 1.12rem; }
.moment p { margin: 0; color: var(--ink-2); }
/* L'émotion s'éteint d'une carte à l'autre. */
.moment.m1 { background: linear-gradient(160deg, #2E2219 0%, var(--surface) 75%); border-color: rgba(248, 194, 92, .45); box-shadow: var(--edge), 0 14px 40px rgba(248, 170, 80, .18); }
.moment.m1 .when { background: var(--grad); color: var(--on-grad); }
.moment.m2 { opacity: .82; }
.moment.m3 { opacity: .55; filter: grayscale(.6); }
.moment-answer { margin: 26px auto 0; max-width: 820px; text-align: center; padding: 30px 22px; border-radius: 26px; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .28); }
.moment-answer .quote { font: 800 clamp(1.3rem, 3.4vw, 1.75rem)/1.3 var(--display); color: var(--ink); margin: 0 0 14px; letter-spacing: -.01em; }
.moment-answer p { color: var(--ink-2); margin: 0 0 10px; }
.moment-answer .answer-strong { color: var(--gold); font-weight: 800; margin: 0; }

/* ---------- Accueil : restez artiste ---------- */
.pillars { gap: 16px; }
.pillar { padding: 26px 22px; }
.pillar .e { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.pillar h3 { margin: 0 0 8px; font-size: 1.1rem; }
.pillar p { margin: 0; }

/* ---------- Accueil : essayer sur un seul concert ---------- */
.try-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); counter-reset: t; }
@media (min-width: 760px) { .try-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.try-steps li { counter-increment: t; position: relative; padding: 16px 16px 16px 54px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); min-width: 0; }
.try-steps li::before { content: counter(t); position: absolute; left: 14px; top: 15px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); font: 800 .9rem var(--display); }
.try-steps b { display: block; color: var(--ink); margin-bottom: 2px; }
.try-steps span { color: var(--ink-2); font-size: .93rem; }
/* Guillemets selon la langue de la page : le texte reste une phrase simple pour le dictionnaire anglais. */
.moment-answer .quote { quotes: "«\00a0" "\00a0»"; }
:lang(en) .moment-answer .quote { quotes: "\201C" "\201D"; }
.moment-answer .quote::before { content: open-quote; }
.moment-answer .quote::after { content: close-quote; }
.hero h1.h1-long { font-size: clamp(2rem, 4.4vw, 3.15rem); line-height: 1.08; }
@media (max-width: 520px) { .hero-ctas .btn { width: 100%; max-width: 100%; white-space: normal; text-align: center; padding-left: 18px; padding-right: 18px; } }

/* ---------- Menu de langue (FR / EN / ES) ---------- */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu[open] > summary { color: var(--gold); border-color: rgba(248, 194, 92, .5); }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 140px; padding: 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: grid; gap: 2px; }
.lang-list a { padding: 9px 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .92rem; }
.lang-list a:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.lang-list a[aria-current] { color: var(--gold); background: var(--gold-soft); }

/* ---------- Bandeau de consentement (pixel Meta) ---------- */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 80; width: min(420px, calc(100vw - 32px)); padding: 18px 18px 16px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.consent[hidden] { display: none; }
.consent-t { margin: 0 0 6px; font-weight: 800; color: var(--ink); }
.consent-p { margin: 0 0 14px; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Refuser et Accepter ont exactement le même poids visuel (exigence CNIL). */
.consent-actions .btn { flex: 1 1 110px; background: var(--surface-3); border-color: var(--line-2); color: var(--ink); }
.consent-actions .btn:hover { border-color: rgba(248, 194, 92, .5); color: var(--gold); }
.consent-more { font-size: .84rem; color: var(--muted); }
/* Sur mobile, au-dessus de la bulle du chat de support. */
@media (max-width: 640px) { .has-chat .consent { bottom: 104px; } }

/* ---------- Section « La force des boucles » (accueil) ---------- */
.loops-why { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.loops-why li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); }
.loops-why .e { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: var(--gold-soft); }
.loops-why h3 { font-size: 1.02rem; margin: 2px 0 4px; }
.loops-why p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.loops-shot { margin: 0; align-self: center; }
.loops-shot img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); background: #fff; }
.loops-shot figcaption { margin-top: 12px; font-size: .86rem; color: var(--muted); text-align: center; }

/* ---------- Drapeaux des langues ---------- */
.flag { display: inline-block; flex: 0 0 auto; width: 21px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); vertical-align: -2px; }
.lang-switch { display: inline-flex; gap: 6px; align-items: center; }
.lang-list a, .seg .seg-link { display: inline-flex; align-items: center; gap: 9px; }
.powered-langs a { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px; white-space: nowrap; }
.powered-langs .flag { width: 18px; height: 12px; }

/* ---------- Bouton mode clair / sombre ---------- */
.theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.theme-toggle:hover { color: var(--gold); border-color: rgba(248, 194, 92, .5); }
.theme-toggle .ico-moon { display: none; }
[data-theme="light"] .theme-toggle .ico-sun { display: none; }
[data-theme="light"] .theme-toggle .ico-moon { display: block; }

/* =========================================================
   Mode clair : mêmes composants, jetons de couleur inversés.
   Ce qui imite un appareil (téléphone de démonstration) ou un e-mail reste sombre.
   ========================================================= */
:root { --wave-idle: rgba(255, 255, 255, .16); --wave-grid: rgba(255, 255, 255, .09); }
:root[data-theme="light"] {
  --bg: #F6F3F8;
  --bg-2: #EEE9F2;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #F1ECF4;
  --ink: #1E1724;
  --ink-2: #4A4152;
  --muted: #7A7182;
  --line: rgba(40, 24, 56, .08);
  --line-2: rgba(40, 24, 56, .14);
  --gold: #B8690A;
  --gold-2: #D9821C;
  --gold-soft: rgba(236, 150, 40, .13);
  --pink: #E3356A;
  --violet: #6E4FE0;
  --grad-soft: linear-gradient(135deg, rgba(248, 180, 80, .20) 0%, rgba(242, 137, 138, .14) 100%);
  --success: #12A066;
  --danger: #D9364A;
  --warning: #B8690A;
  --edge: inset 0 1px 0 rgba(255, 255, 255, .7);
  --shadow-sm: 0 1px 2px rgba(40, 24, 56, .06), 0 4px 14px rgba(40, 24, 56, .06);
  --shadow: 0 10px 30px rgba(40, 24, 56, .10);
  --shadow-lg: 0 24px 60px rgba(40, 24, 56, .16);
  --glow: 0 10px 26px rgba(240, 140, 60, .30);
  --wave-idle: rgba(40, 24, 56, .16);
  --wave-grid: rgba(40, 24, 56, .10);
  color-scheme: light;
}
[data-theme="light"] body {
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(248, 170, 70, .12), transparent 62%),
    radial-gradient(900px 520px at -12% 108%, rgba(169, 139, 255, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="light"] ::selection { color: var(--ink); }
[data-theme="light"] a { text-decoration-color: rgba(184, 105, 10, .45); }
[data-theme="light"] .btn-dark { background: #1E1724; color: #fff; }
[data-theme="light"] .btn-dark:hover { background: #000; color: #fff; }
[data-theme="light"] .btn-ghost:hover, [data-theme="light"] .nav-links a:hover, [data-theme="light"] .side-link:hover,
[data-theme="light"] .lang-list a:hover, [data-theme="light"] .track-list .item:hover { background: rgba(40, 24, 56, .05); }
[data-theme="light"] .table tr:hover td { background: rgba(40, 24, 56, .025); }
[data-theme="light"] .btn-soft:hover { color: #9A5606; }
[data-theme="light"] .btn-danger { color: #C42A3E; }
[data-theme="light"] .btn-danger:hover { color: #A31F31; }
[data-theme="light"] .btn-danger-soft { color: #C42A3E; }
[data-theme="light"] .btn-danger-soft:hover { color: #A31F31; }
[data-theme="light"] .btn.is-loading::after { border-color: rgba(40, 24, 56, .2); border-top-color: var(--ink); }
[data-theme="light"] .site-header { background: rgba(246, 243, 248, .8); }
[data-theme="light"] .app-top { background: rgba(246, 243, 248, .82); }
[data-theme="light"] .sidebar { background: rgba(255, 255, 255, .88); }
[data-theme="light"] .side-link.is-active { background: #1E1724; color: #fff; box-shadow: none; }
[data-theme="light"] .tabbar { background: rgba(255, 255, 255, .95); }
[data-theme="light"] .admin-nav { background: rgba(255, 255, 255, .9); }
[data-theme="light"] .admin-nav a { background: rgba(40, 24, 56, .05); }
[data-theme="light"] .studio-bar { background: rgba(255, 255, 255, .92); }
[data-theme="light"] .sheet-panel { background: #fff; box-shadow: 0 -16px 50px rgba(40, 24, 56, .18); }
[data-theme="light"] .sheet-close { background: rgba(40, 24, 56, .06); }
[data-theme="light"] .sheet-close:hover { background: rgba(40, 24, 56, .1); }
[data-theme="light"] .badge { background: rgba(40, 24, 56, .06); }
[data-theme="light"] .badge-success { background: rgba(18, 160, 102, .12); color: #0B7A4C; }
[data-theme="light"] .badge-danger { background: rgba(217, 54, 74, .1); color: #B4253A; }
[data-theme="light"] .badge-warning { background: rgba(236, 150, 40, .14); color: #8F5207; }
[data-theme="light"] .badge-violet { background: rgba(110, 79, 224, .1); color: #5536C4; }
[data-theme="light"] .badge-pink { background: rgba(227, 53, 106, .1); color: #B8204F; }
[data-theme="light"] .field input::placeholder, [data-theme="light"] .field textarea::placeholder, [data-theme="light"] .input::placeholder { color: #A39BAA; }
[data-theme="light"] .switch .track::after { background: #fff; box-shadow: 0 2px 6px rgba(40, 24, 56, .25); }
[data-theme="light"] .notice { background: rgba(236, 150, 40, .09); border-color: rgba(236, 150, 40, .25); color: #5E4313; }
[data-theme="light"] .notice-warning { color: #6E4208; }
[data-theme="light"] .notice-success { color: #0B6440; }
[data-theme="light"] .notice-danger { color: #8E1F2D; }
[data-theme="light"] .loading-audio { color: #5E4313; }
[data-theme="light"] .eyebrow, [data-theme="light"] .artist-chip, [data-theme="light"] .socials a,
[data-theme="light"] .money-split div, [data-theme="light"] .try-steps li { background: rgba(255, 255, 255, .75); }
[data-theme="light"] .section-alt { background: linear-gradient(180deg, rgba(40, 24, 56, .025), rgba(40, 24, 56, 0)); }
[data-theme="light"] .band { background: linear-gradient(140deg, #FFF3E2 0%, #FFFFFF 55%, #FCEFF4 100%); }
[data-theme="light"] .track-hero .bg::after { background: linear-gradient(180deg, rgba(246, 243, 248, .25) 0%, rgba(246, 243, 248, .8) 55%, var(--bg) 100%); }
[data-theme="light"] .cover { box-shadow: 0 30px 70px rgba(40, 24, 56, .25), 0 0 0 1px rgba(40, 24, 56, .06); }
[data-theme="light"] .avatar-lg, [data-theme="light"] .new-artist .na-photo { box-shadow: 0 12px 30px rgba(40, 24, 56, .2), 0 0 0 3px var(--bg), 0 0 0 5px rgba(236, 150, 40, .7); }
[data-theme="light"] .player { background: rgba(255, 255, 255, .88); }
[data-theme="light"] .action .p { background: rgba(40, 24, 56, .05); }
[data-theme="light"] .stat-hero { background: linear-gradient(140deg, #FFEFD6 0%, #FFFFFF 70%); }
[data-theme="light"] .stat-hero .v { color: #A85E06; }
[data-theme="light"] .stat-hero .k, [data-theme="light"] .stat-hero .s { color: #876647; }
[data-theme="light"] .bars i { background: rgba(40, 24, 56, .07); }
[data-theme="light"] .bars i:hover::after { background: #1E1724; color: #fff; }
[data-theme="light"] .checklist li.done span { text-decoration-color: rgba(40, 24, 56, .25); }
[data-theme="light"] .rhythm { background: rgba(40, 24, 56, .03); }
[data-theme="light"] .editor-wave .sel-len { background: rgba(255, 255, 255, .9); }
[data-theme="light"] .guide-sec code { background: rgba(40, 24, 56, .06); }
[data-theme="light"] .sim-result { background: linear-gradient(160deg, #FFF2E0 0%, #FFFFFF 70%); }
[data-theme="light"] .sim-row input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(40, 24, 56, .25); }
[data-theme="light"] .top-carousel:not(.fits)::after { background: linear-gradient(90deg, rgba(246, 243, 248, 0), var(--bg)); }
[data-theme="light"] .podium.p1 a, [data-theme="light"] .moment.m1 { background: linear-gradient(170deg, #FFF0DA 0%, var(--surface) 70%); }
[data-theme="light"] .moment.m1 { box-shadow: var(--edge), 0 14px 40px rgba(240, 150, 60, .16); }
[data-theme="light"] .lang-menu[open] > summary, [data-theme="light"] .lang-switch:hover { border-color: rgba(184, 105, 10, .45); }
[data-theme="light"] .consent { box-shadow: 0 24px 60px rgba(40, 24, 56, .22); }
/* Le téléphone de démonstration reste un objet sombre : on y garde les couleurs de la nuit. */
[data-theme="light"] .phone { --ink: #F6F1EA; --ink-2: #CFC6BB; --muted: #918980; --surface: #1A161C; --surface-2: #211C23; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13); --gold: #F8C25C; color: var(--ink); }
[data-theme="light"] .loops-why li { background: rgba(255, 255, 255, .8); }
/* Texte en dégradé : version plus soutenue, lisible sur fond clair. */
[data-theme="light"] .grad-text, [data-theme="light"] .brand .fans { background: linear-gradient(100deg, #E08A12 0%, #E5683F 55%, #DC3F6A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Sur téléphone, un bouton à long libellé (plus long en italien ou en espagnol) passe à la ligne plutôt que d'élargir la page. */
@media (max-width: 520px) { .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; } }
/* En-têtes sur téléphone : le drapeau suffit, et les boutons restent sur une ligne. */
@media (max-width: 520px) { .lang-switch span { display: none; } .lang-switch { padding: 0 9px; } .app-top .row { flex-wrap: nowrap; gap: 6px; } .app-top .btn { white-space: nowrap; } .header-actions { gap: 6px; } }
/* Espace artiste sur petit téléphone : le logo seul, pour laisser la place au thème, à la langue et à « Ma page ». */
@media (max-width: 440px) { .app-top .brand span { display: none; } }

/* ---------- « J'aime » sur la page d'un artiste ---------- */
.like-row { margin-top: 14px; }
.like-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: 700 .95rem var(--font); cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s var(--ease); }
.like-btn:hover { border-color: rgba(255, 79, 121, .55); }
.like-btn:active { transform: scale(.96); }
.like-btn[disabled] { opacity: .7; cursor: wait; }
.like-btn .heart { fill: none; stroke: var(--pink); stroke-width: 2; stroke-linejoin: round; transition: fill .15s; }
.like-btn .l-on { display: none; }
.like-btn[aria-pressed="true"] { border-color: rgba(255, 79, 121, .55); background: rgba(255, 79, 121, .12); }
.like-btn[aria-pressed="true"] .heart { fill: var(--pink); }
.like-btn[aria-pressed="true"] .l-on { display: inline; }
.like-btn[aria-pressed="true"] .l-off { display: none; }
.like-n { font-family: var(--display); }
.like-n:not(:empty)::before { content: "·"; margin-right: 6px; color: var(--muted); font-weight: 400; }
.like-btn.pop .heart { animation: like-pop .4s var(--ease); }
@keyframes like-pop { 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .like-btn.pop .heart { animation: none; } }

/* ---------- Studio : export WAV ---------- */
.studio-dl .row { gap: 10px; }
/* Ancres du menu (#comment, #simulateur, #gratuit…) : le titre de la section ne passe pas sous l'en-tête fixe. */
main section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
.perk-head .avatar-md { flex: 0 0 52px; width: 52px; height: 52px; }
/* Mode clair : la légende posée sur la photo et les cartes flottantes du hero restent des objets « de nuit »
   (fond sombre translucide), donc texte clair. La barre d'achat fixe du téléphone passe en verre clair. */
[data-theme="light"] .float-card, [data-theme="light"] .shot-caption { --ink: #F6F1EA; --ink-2: #CFC6BB; --muted: #A79F96; --line-2: rgba(255, 255, 255, .13); color: var(--ink); }
[data-theme="light"] .shot-caption { color: var(--ink-2); }
[data-theme="light"] .sticky-buy { background: rgba(255, 255, 255, .94); }

/* ---------- Hero : arguments et compteur mis en valeur ---------- */
.hero-proof { align-items: center; gap: 14px 22px; font-size: 1rem; color: var(--ink-2); }
.hero-proof > span:first-child b { font-size: 1.6rem; }
/* Carte du compteur : pastille « en direct », gros chiffre en dégradé, entrée animée. */
#compteur {
  position: relative; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 14px 22px 14px 42px; border-radius: 20px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
  border: 1.5px solid transparent; box-shadow: var(--shadow), 0 0 0 6px var(--gold-soft);
  color: var(--ink-2); font-size: 1.02rem; font-weight: 600;
  animation: compteur-in .9s var(--ease) .25s both;
}
#compteur::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(61, 214, 140, .6);
  animation: compteur-live 1.8s ease-out infinite;
}
#compteur b[data-compteur] {
  font: 800 clamp(1.9rem, 4.2vw, 2.7rem)/1 var(--display); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] #compteur b[data-compteur] { background: linear-gradient(100deg, #E08A12 0%, #E5683F 55%, #DC3F6A 100%); -webkit-background-clip: text; background-clip: text; }
@keyframes compteur-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes compteur-live { 0% { box-shadow: 0 0 0 0 rgba(61, 214, 140, .55); } 70% { box-shadow: 0 0 0 10px rgba(61, 214, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0); } }
@media (max-width: 520px) { #compteur { width: 100%; padding: 12px 16px 12px 38px; } #compteur::before { left: 16px; } }
@media (prefers-reduced-motion: reduce) { #compteur, #compteur::before { animation: none; } }

/* ---------- Pop-up concours « Une journée en studio » ---------- */
dialog.promo { padding: 0; border: 0; background: transparent; max-width: min(760px, calc(100vw - 24px)); width: 100%; max-height: calc(100vh - 24px); overflow: visible; color: var(--ink); }
dialog.promo::backdrop { background: rgba(5, 4, 6, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .25s; }
dialog.promo.is-in::backdrop { opacity: 1; }
.promo-card { position: relative; display: grid; grid-template-columns: 42% minmax(0, 1fr); border-radius: 26px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg), 0 0 0 6px var(--gold-soft); opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .3s var(--ease), transform .35s var(--ease); }
dialog.promo.is-in .promo-card { opacity: 1; transform: none; }
.promo-photo { position: relative; min-height: 100%; background: #0C0A0D; }
.promo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 13, 0) 55%, rgba(12, 10, 13, .55) 100%); }
.promo-tag { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 7px 12px; border-radius: 999px; background: var(--grad); color: var(--on-grad); font: 800 .85rem var(--font); box-shadow: var(--glow); }
.promo-body { padding: 34px 30px 28px; display: flex; flex-direction: column; justify-content: center; }
.promo-body h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); line-height: 1.1; margin: 8px 0 6px; }
.promo-sub { margin: 0 0 16px; font: 700 1.08rem var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .promo-sub { background: linear-gradient(100deg, #E08A12 0%, #E5683F 55%, #DC3F6A 100%); -webkit-background-clip: text; background-clip: text; }
.promo-text { margin: 0 0 22px; color: var(--ink-2); font-size: 1.05rem; }
.promo-note { margin: 12px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }
.promo-form .field { margin-bottom: 12px; }
.promo-form .btn { margin-top: 6px; }
.promo-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.35rem; line-height: 1; background: rgba(12, 10, 13, .55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.promo-close:hover { background: rgba(12, 10, 13, .8); }
@media (max-width: 640px) {
  .promo-card { grid-template-columns: minmax(0, 1fr); }
  .promo-photo { height: 210px; min-height: 0; }
  .promo-photo img { object-position: center 40%; }
  .promo-body { padding: 22px 20px 20px; }
  .promo-text { margin-bottom: 14px; }
}
/* Petits écrans : la photo raccourcit et la fenêtre défile, le bouton reste atteignable clavier ouvert. */
@media (max-width: 640px) and (max-height: 760px) {
  dialog.promo { overflow-y: auto; }
  .promo-photo { height: 140px; }
}
@media (prefers-reduced-motion: reduce) { .promo-card, dialog.promo::backdrop { transition: none; } }

/* ---------- Mon groupe : membres, parts et reversements ---------- */
.band-rows { display: grid; gap: 8px; }
.band-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 104px 34px; gap: 8px; align-items: center; }
.band-row .input, .band-row .input-group input { min-height: 42px; }
.band-share input { text-align: right; }
.band-total { margin-left: auto; font-weight: 700; color: var(--success); }
.band-total.is-bad { color: var(--danger); }
.band-net { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 12px; }
.band-net b { font: 800 2rem/1.1 var(--display); }
.band-net > span { color: var(--muted); font-size: .9rem; }
.band-split { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.band-split li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.band-split .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.band-split .pc { color: var(--muted); font-size: .86rem; }
.band-split b { font-family: var(--display); }
.band-concert { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
@media (max-width: 560px) {
  .band-row { grid-template-columns: minmax(0, 1fr) 96px 34px; }
  .band-row input[type=email] { grid-column: 1 / -1; grid-row: 2; }
}
.band-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .band-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.band-pending .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }

/* ---------- Accueil : « Vous jouez en groupe ? » ---------- */
.band-show { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .band-show { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; } }
.band-shot, .band-mail { margin: 0; }
.band-shot img, .band-mail img { width: 100%; height: auto; display: block; border-radius: 20px; border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.band-shot figcaption, .band-mail figcaption { margin-top: 10px; text-align: center; font-size: .86rem; color: var(--muted); }
.band-steps { list-style: none; counter-reset: b; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.band-steps li { counter-increment: b; position: relative; padding: 14px 16px 14px 56px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); }
.band-steps li::before { content: counter(b); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); font: 800 .9rem var(--display); }
.band-steps b { display: block; font-family: var(--display); }
.band-steps span { color: var(--ink-2); font-size: .94rem; }
/* Guide : copies d'écran */
.guide-shot { margin: 18px 0; }
.guide-shot img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.guide-shot-sm { max-width: 460px; }
.guide-shot figcaption { margin-top: 8px; font-size: .85rem; color: var(--muted); }
#groupe + .section { padding-top: 72px !important; }

/* ---------- Page artiste : partage, discographie, espace pro ---------- */
.like-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.share-btn:hover { border-color: var(--line-2); background: var(--surface-3); }
.share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.share-it { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 600 .8rem var(--font); text-decoration: none; cursor: pointer; transition: transform .15s var(--ease), border-color .15s; }
.share-it:hover { transform: translateY(-2px); border-color: var(--line-2); }
.share-it .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #5A5160; }
.share-wa .ic { background: #25D366; } .share-fb .ic { background: #1877F2; } .share-x .ic { background: #111; }
.share-tg .ic { background: #229ED9; } .share-in .ic { background: #0A66C2; } .share-sms .ic { background: #34B76A; }
.share-mail .ic { background: var(--grad); color: var(--on-grad); }
@media (max-width: 380px) { .share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.disco { display: grid; gap: 12px; }
.disco-item { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 6px; box-shadow: var(--edge), var(--shadow-sm); }
.disco-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; }
.disco-title { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
div.disco-title { cursor: default; }
.disco-title b { font: 700 1rem var(--font); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.disco-title .y { color: var(--muted); font-weight: 500; }
.disco-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.disco-tab { border: 0; background: none; padding: 6px 9px; border-radius: 999px; color: var(--ink-2); font: 600 .88rem var(--font); cursor: pointer; text-decoration: none; }
.disco-tab:hover { color: var(--ink); background: var(--surface-2); }
.disco-item.is-open .disco-tab.is-on { color: var(--ink); background: var(--surface-3); }
.disco-chev { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: transform .2s var(--ease); transform: rotate(180deg); }
.disco-item.is-open .disco-chev { transform: none; }
.disco-player { display: none; padding: 2px 4px 4px; }
.disco-item.is-open .disco-player { display: block; }
.disco-player iframe { display: block; width: 100%; border: 0; border-radius: 14px; background: var(--surface-2); }
.disco-player.is-video iframe { aspect-ratio: 16 / 9; height: auto; }

.pro-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pro-txt { flex: 1 1 260px; min-width: 0; }
.pro-txt b { display: block; font-size: 1.02rem; }
.pro-txt p { margin: 4px 0 0; color: var(--ink-2); font-size: .94rem; }
.pro-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Profil : discographie et kit presse */
.disco-rows { display: grid; gap: 12px; margin-bottom: 12px; }
.disco-row { margin: 0; padding: 14px 14px 2px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); min-width: 0; }
.disco-row-head { display: grid; grid-template-columns: minmax(0, 1fr) 110px 36px; gap: 10px; align-items: end; }
.disco-del { margin-bottom: 18px; }
.disco-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-bottom: 14px; }
.disco-link .addon { flex: 0 0 104px; justify-content: flex-start; font-size: .84rem; font-weight: 700; }
.disco-link input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: .95rem var(--font); padding: 11px 12px; outline: none; }
@media (max-width: 760px) { .disco-links { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .disco-row-head { grid-template-columns: minmax(0, 1fr) 84px 32px; } }
.pro-set { display: grid; gap: 4px 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .pro-set { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.file-input { width: 100%; padding: 8px; border: 1.5px dashed var(--line-2); border-radius: 14px; background: var(--bg-2); color: var(--ink-2); font: .9rem var(--font); cursor: pointer; }
.file-input::file-selector-button { margin-right: 12px; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-3); color: var(--ink); font: 600 .88rem var(--font); cursor: pointer; }
.epk-current { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.epk-rm { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }

/* Demandes pro */
.pro-msg.is-new { border-color: rgba(169, 139, 255, .45); }
.pro-msg-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pro-msg-head h3 { margin: 8px 0 2px; font-size: 1.1rem; }
.pro-msg-head h3 small { color: var(--ink-2); font-weight: 500; font-size: .85em; }
.pro-msg-body { margin: 14px 0 10px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); line-height: 1.6; overflow-wrap: anywhere; }
.pro-msg-meta a { color: var(--ink-2); }

/* ---------- Lien magique (Super Admin dans l'espace d'un artiste) ---------- */
.imp-bar { position: relative; z-index: 90; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; padding: 8px 16px; background: linear-gradient(90deg, #6E4FE0, #C24FA8); color: #fff; font-size: .88rem; font-weight: 600; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
.imp-bar .imp-txt { min-width: 0; text-align: center; }
.imp-bar .imp-left { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .78rem; }
.imp-bar form { margin: 0; }
.imp-bar .btn { background: #fff; color: #2A1F3D; border-color: transparent; }

/* ---------- Accueil : « Prochaines dates » en cartes-billets ---------- */
.dates-strip { position: relative; padding: 18px 0 16px; background: linear-gradient(180deg, rgba(139, 108, 242, .07), rgba(244, 166, 207, .05)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dates-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.dates-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dates-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8B6CF2, #F4A6CF); box-shadow: 0 6px 18px rgba(139, 108, 242, .3); }
.dates-title h2 { font-size: 1.2rem; margin: 0; line-height: 1.2; }
.dates-title p { margin: 2px 0 0; font-size: .86rem; color: var(--muted); }
.dates-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.dates-arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .15s, transform .15s var(--ease); box-shadow: var(--shadow-sm); }
.dates-arrow:hover { background: var(--surface-2); transform: scale(1.06); }
.dates-rail { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; outline: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.dates-rail::-webkit-scrollbar { display: none; }
.dates-rail.is-drag { cursor: grabbing; user-select: none; }
.dates-rail.is-drag .tick-item { pointer-events: none; }
.dates-row { display: flex; gap: 12px; width: max-content; padding: 6px max(16px, calc((100vw - 1180px) / 2)) 10px; }
.tick-item { position: relative; display: flex; align-items: center; gap: 12px; width: 268px; min-height: 86px; padding: 12px 14px 12px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--edge), var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; }
a.tick-item:hover, a.tick-item:focus-visible { transform: translateY(-3px); border-color: rgba(139, 108, 242, .45); box-shadow: var(--edge), 0 12px 28px rgba(139, 108, 242, .18); }
.tk-cal { flex: 0 0 auto; width: 54px; height: 60px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, #8B6CF2, #C384E6 60%, #F4A6CF); color: #fff; box-shadow: 0 6px 14px rgba(139, 108, 242, .28); }
.tk-cal b { font: 800 1.45rem/1 var(--display); }
.tk-cal small { margin-top: 3px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .95; }
.tk-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tk-when { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #B06BD8; }
.tick-item.is-soon .tk-when { color: #E0569A; }
.tick-item.is-soon .tk-when::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #E0569A; vertical-align: 1px; animation: tkPulse 1.6s ease-in-out infinite; }
@keyframes tkPulse { 50% { opacity: .35; transform: scale(.8); } }
.tk-artist { font-size: 1rem; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-place { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-go { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: #8B6CF2; transition: background-color .15s, color .15s; }
a.tick-item:hover .tk-go { background: linear-gradient(135deg, #8B6CF2, #F4A6CF); color: #fff; }
.tick-item.is-mf::after { content: "♪"; position: absolute; top: 8px; right: 12px; font-size: .75rem; color: #B06BD8; opacity: .8; }
.tick-item.is-mf .tk-go { margin-top: 10px; }
.tick-item.is-static { cursor: default; }
@media (max-width: 640px) {
  .dates-strip { padding: 14px 0 12px; }
  .dates-nav { display: none; }
  .tick-item { width: 236px; min-height: 80px; }
  .dates-title p { font-size: .8rem; }
}
/* Fiche artiste : concert ciblé depuis le bandeau */
.concert { scroll-margin-top: 110px; }
.concert:target { animation: concertGlow 2.4s var(--ease) 1; border-radius: 14px; }
@keyframes concertGlow { 0%, 40% { background: rgba(248, 178, 60, .18); box-shadow: 0 0 0 2px rgba(248, 178, 60, .6); } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }


.tm-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.tm-countries label { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; cursor: pointer; }

.ticker-window { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.ticker-window > div:first-child { flex: 1 1 320px; min-width: 0; }
.ticker-window select { min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: .95rem var(--font); }
.dates-region { margin: 0 auto 8px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dates-region b { color: #B06BD8; font-weight: 800; }
/* Région du bandeau : nom cliquable et petit menu */
.dates-region { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.region-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(176, 107, 216, .35); background: rgba(176, 107, 216, .08); color: #B06BD8; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background-color .15s, border-color .15s; }
.region-btn:hover, .region-btn[aria-expanded="true"] { background: rgba(176, 107, 216, .16); border-color: rgba(176, 107, 216, .6); }
.region-btn svg { transition: transform .15s; }
.region-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.region-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 16px; min-width: 220px; max-height: 300px; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); text-transform: none; letter-spacing: 0; }
.region-opt { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 600 .9rem var(--font); text-align: left; cursor: pointer; }
.region-opt:hover, .region-opt:focus-visible { background: var(--surface-2); outline: none; }
.region-opt.is-on { color: #B06BD8; background: rgba(176, 107, 216, .1); }
.dates-region[hidden] { display: none; }
.geo-credit a { color: inherit; opacity: .7; }
/* Bandeau « Ils viennent de rejoindre Musifans » (sous celui des dates) */
.people-strip { padding: 4px 0 18px; background: linear-gradient(180deg, rgba(244, 166, 207, .05), rgba(139, 108, 242, .03)); border-bottom: 1px solid var(--line); }
.dates-strip + .people-strip { margin-top: -1px; border-top: 0; }
.strip-label { margin: 0 auto 8px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.people-row { gap: 10px; padding-top: 2px; padding-bottom: 4px; }
.person { display: flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; white-space: nowrap; transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.person:hover, .person:focus-visible { transform: translateY(-2px); border-color: rgba(224, 86, 154, .45); box-shadow: 0 10px 24px rgba(224, 86, 154, .16); }
.person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; padding: 3px; background: linear-gradient(135deg, #8B6CF2, #F4A6CF); }
.person-txt { display: flex; flex-direction: column; line-height: 1.2; }
.person-txt b { font-size: 1.08rem; font-weight: 800; }
.person-txt small { font-size: .85rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) { .people-strip { padding-bottom: 14px; } .person img { width: 60px; height: 60px; } .person-txt b { font-size: 1rem; } }
/* ---------- Accueil : l'objection « je suis déjà payé » (ambiance chaude des photos, dans les deux thèmes) ---------- */
.objection { position: relative; overflow: hidden; color: #F6EDE2; background: radial-gradient(1100px 520px at 85% 0%, rgba(248, 170, 70, .22), transparent 60%), radial-gradient(900px 600px at 0% 100%, rgba(194, 84, 168, .18), transparent 60%), linear-gradient(180deg, #1A120E 0%, #120C0A 100%); }
.objection .kicker { color: #F8C25C; }
.objection .section-head p { color: #D8CABB; }
.obj-quote { font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.18; color: #FFF6EA; }
.obj-quote::before { content: "« "; color: #F8C25C; }
.obj-quote::after { content: " »"; color: #F8C25C; }
.obj-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 26px; }
@media (min-width: 900px) { .obj-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; } }
.obj-scene, .obj-phone { margin: 0; }
.obj-scene img, .obj-phone img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid rgba(255, 220, 170, .14); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 80px rgba(248, 170, 70, .12); }
.obj-scene figcaption, .obj-phone figcaption { margin-top: 10px; font-size: .88rem; color: #BFAF9E; text-align: center; }
.obj-compare { display: flex; flex-direction: column; gap: 10px; }
.obj-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: rgba(255, 245, 230, .05); border: 1px solid rgba(255, 220, 170, .14); }
.obj-card-mf { background: linear-gradient(135deg, rgba(139, 108, 242, .2), rgba(244, 166, 207, .12)); border-color: rgba(196, 140, 230, .4); }
.obj-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: rgba(255, 245, 230, .08); }
.obj-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #F8C25C; margin-bottom: 4px; }
.obj-card-mf .obj-tag { color: #E4B4F0; }
.obj-card h3 { margin: 0 0 4px; font-size: 1.12rem; color: #FFF6EA; line-height: 1.3; }
.obj-card p { margin: 0; color: #D8CABB; font-size: .95rem; }
.obj-neq { align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 1.4rem var(--display); color: #1A120E; background: linear-gradient(135deg, #F8C25C, #F4A6CF); box-shadow: 0 6px 18px rgba(248, 170, 70, .35); }
.obj-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; margin: 10px 0 34px; }
@media (min-width: 980px) { .obj-story { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 26px; } }
@media (max-width: 979px) { .obj-story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .obj-tip { grid-column: 1 / -1; order: -1; } }
@media (max-width: 639px) { .obj-phone figcaption { font-size: .78rem; } .obj-scene img, .obj-phone img { border-radius: 16px; } }
.obj-tip { padding: 26px 26px 22px; border-radius: 24px; background: rgba(255, 245, 230, .06); border: 1px solid rgba(255, 220, 170, .16); text-align: center; }
.obj-tip-ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 1.6rem; background: rgba(248, 194, 92, .14); margin-bottom: 8px; }
.obj-tip p { margin: 0 0 10px; color: #E2D5C6; line-height: 1.6; }
.obj-tip .obj-tip-lead { font: 800 1.3rem var(--display); color: #FFF6EA; }
.obj-tip .obj-tip-same { font-weight: 800; color: #F8C25C; }
.obj-tip .obj-tip-problem { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed rgba(255, 220, 170, .2); color: #FFF6EA; font-weight: 600; }
.obj-says { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.obj-not { font-size: 1.1rem; color: #D8CABB; margin: 0 0 4px; }
.obj-not s { text-decoration-thickness: 2px; text-decoration-color: #F0503C; color: #BFAF9E; }
.obj-not s::before { content: "« "; } .obj-not s::after { content: " »"; }
.obj-simply { margin: 0 0 12px; color: #D8CABB; }
.obj-bubble { position: relative; display: inline-block; margin: 0; padding: 18px 26px; border-radius: 22px 22px 22px 6px; font: 700 clamp(1.15rem, 2.6vw, 1.5rem)/1.35 var(--display); color: #1A120E; background: linear-gradient(135deg, #FFE2A8, #F8C25C 55%, #F4A6CF); box-shadow: 0 16px 40px rgba(248, 170, 70, .25); }
.obj-final { text-align: center; max-width: 860px; margin: 0 auto; }
.obj-risk { margin: 0; font: 700 clamp(1.25rem, 3vw, 1.75rem)/1.3 var(--display); color: #FFF6EA; }
.obj-risk-2 { margin: 8px 0 26px; font: 800 clamp(1.5rem, 4vw, 2.4rem)/1.2 var(--display); }
.obj-risk-2 .grad-text { background: linear-gradient(90deg, #F8C25C, #F4A6CF 55%, #B79CFF); -webkit-background-clip: text; background-clip: text; }
html[lang="en"] .obj-quote::before, html[lang="en"] .obj-not s::before { content: "“"; }
html[lang="en"] .obj-quote::after, html[lang="en"] .obj-not s::after { content: "”"; }
/* Groupe : premier membre (vous), partage automatique, comptes des membres, invitation */
.band-name { position: relative; min-width: 0; }
.band-row.is-self .band-name .input { padding-left: 62px; }
.band-you { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); pointer-events: auto; font-size: .7rem; }
.band-remove-ph { width: 34px; }
.band-auto.is-on { border-color: rgba(61, 214, 140, .45); background: linear-gradient(135deg, rgba(61, 214, 140, .08), transparent 60%), var(--surface); }
.band-acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.band-acct-who { display: flex; flex-direction: column; min-width: 0; }
.band-acct-who .small { overflow-wrap: anywhere; }
.band-acct-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.band-acct-act form { margin: 0; }
.band-join h1 { margin: 2px 0; font-size: 1.6rem; }
.band-join-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.band-join-share { display: flex; flex-direction: column; align-items: center; padding: 18px; margin-bottom: 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(139, 108, 242, .14), rgba(244, 166, 207, .1)); border: 1px solid rgba(176, 107, 216, .3); text-align: center; }
.band-join-share span { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #B06BD8; }
.band-join-share b { font: 800 2.4rem/1.1 var(--display); }
.band-join-share small { color: var(--muted); }
.band-join-list { margin: 0 0 18px; padding-left: 20px; line-height: 1.7; }
.band-example { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(61, 214, 140, .1); border: 1px solid rgba(61, 214, 140, .3); font-size: .95rem; }

/* ---------- Carte des concerts (/carte, assets/js/map.js) ----------
   Toujours sombre, quel que soit le thème du site : le fond de carte l'est, les panneaux aussi. */
.mapx { --mx-glass: rgba(20, 16, 22, .8); --mx-line: rgba(255, 255, 255, .1); --mx-ink: #F6F1EA; --mx-ink2: #CFC6BB; --mx-muted: #918980;
  position: relative; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); min-height: 480px; overflow: hidden; background: #0C0A0D; color: var(--mx-ink); isolation: isolate; }
.mapx .mapx-canvas { position: absolute; inset: 0; width: auto; height: auto; } /* plus fort que .maplibregl-map { position: relative }, chargé après */
.mapx .maplibregl-ctrl-attrib { background: rgba(12, 10, 13, .6) !important; color: var(--mx-muted); font-size: 10px; }
.mapx .maplibregl-ctrl-attrib a { color: var(--mx-muted); }
.mapx .maplibregl-ctrl-attrib-button { filter: invert(1) opacity(.6); }
.mapx .maplibregl-ctrl-group { background: var(--mx-glass); border: 1px solid var(--mx-line); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; }
.mapx .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.mapx .maplibregl-ctrl-group button + button { border-top: 1px solid var(--mx-line); }
.mapx .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) opacity(.75); }
.mapx .maplibregl-ctrl-bottom-right { bottom: 92px; }
.mapx-title, .mapx-chips, .mapx-zone, .mapx-list { background: var(--mx-glass); border: 1px solid var(--mx-line); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: var(--shadow); }

/* Haut : titre et périodes */
.mapx-top { position: absolute; z-index: 3; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; pointer-events: none; animation: mx-drop .6s var(--ease) both; }
.mapx-top > * { pointer-events: auto; }
.mapx-title { padding: 10px 16px; border-radius: 18px; }
.mapx-title h1 { margin: 0; font: 800 1.25rem/1.1 var(--display); letter-spacing: -.01em; color: var(--mx-ink); }
.mapx-kicker { display: flex; align-items: center; gap: 7px; font: 700 .68rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: #F8C25C; }
.mapx-live { width: 7px; height: 7px; border-radius: 50%; background: #F2898A; animation: mx-live 1.8s infinite; }
.mapx-chips { display: flex; gap: 6px; padding: 5px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.mapx-chips::-webkit-scrollbar { display: none; }
.mapx-chips button { flex: none; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: transparent; color: var(--mx-ink2); font: 600 .86rem var(--font); white-space: nowrap; transition: background-color .2s, color .2s, transform .15s; }
.mapx-chips button:hover { color: var(--mx-ink); background: rgba(255, 255, 255, .06); }
.mapx-chips button:active { transform: scale(.96); }
.mapx-chips button[aria-pressed="true"] { background: var(--grad); color: var(--on-grad); box-shadow: 0 6px 18px rgba(248, 180, 80, .3); }

/* Autour de moi */
.mapx-locate { position: absolute; z-index: 3; right: 16px; bottom: 182px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--grad); color: var(--on-grad); font: 800 .92rem var(--font); box-shadow: 0 10px 30px rgba(248, 180, 80, .35); transition: transform .2s var(--ease), box-shadow .2s; animation: mx-rise .6s .15s var(--ease) both; }
.mapx-locate:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(248, 180, 80, .45); }
.mapx-locate:active { transform: scale(.97); }
.mapx-locate.is-busy svg { animation: mx-spin 1s linear infinite; }
.mapx-locate.is-on { background: rgba(20, 16, 22, .88); color: #FFD98C; box-shadow: var(--shadow), inset 0 0 0 1px rgba(248, 194, 92, .45); }

/* Zone visible */
.mapx-zone { position: absolute; z-index: 3; right: 16px; bottom: 16px; min-width: 200px; padding: 12px 18px; border-radius: 18px; text-align: right; border-color: rgba(248, 194, 92, .28); box-shadow: var(--shadow-lg); animation: mx-rise .6s .25s var(--ease) both; }
.mapx-zone b { display: block; font: 800 1.55rem/1.05 var(--display); letter-spacing: -.01em; text-transform: uppercase; color: var(--mx-ink); max-width: 260px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapx-zone small { display: block; margin-top: 4px; font: 800 .72rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: #F8C25C; }
.has-chat .mapx-zone { bottom: 90px; }
.has-chat .mapx-locate { bottom: 256px; }
.has-chat .mapx .maplibregl-ctrl-bottom-right { bottom: 166px; }

/* Liste de la zone (colonne à gauche sur ordinateur) */
.mapx-list { position: absolute; z-index: 2; top: 92px; left: 16px; bottom: 16px; width: 372px; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); animation: mx-slide .7s .1s var(--ease) both; }
.mapx-list-head { position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 16px 18px 12px; border: 0; background: none; color: inherit; text-align: left; cursor: default; border-bottom: 1px solid rgba(255, 255, 255, .07); font: inherit; }
.mapx-list-head b { font: 800 1.02rem var(--display); color: var(--mx-ink); }
.mapx-list-head small { color: var(--mx-muted); font-size: .82rem; }
.mapx-handle { display: none; }
.mapx-items { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.mapx-items li { animation: mx-item .45s calc(var(--k) * 35ms) var(--ease) both; }
.mapx-item { width: 100%; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid transparent; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
.mapx-item:hover { background: rgba(255, 255, 255, .05); transform: translateX(3px); }
.mapx-item.is-sel { background: rgba(248, 194, 92, .1); border-color: rgba(248, 194, 92, .35); }
.mapx-cal { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 54px; border-radius: 14px; background: rgba(248, 194, 92, .1); border: 1px solid rgba(248, 194, 92, .22); color: #F8C25C; }
.mapx-cal b { font: 800 1.3rem/1 var(--display); }
.mapx-cal small { font: 700 .66rem var(--font); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.is-mf .mapx-cal { background: rgba(242, 137, 138, .12); border-color: rgba(242, 137, 138, .35); color: #F7A5A3; }
.is-tonight .mapx-cal { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.mapx-it { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mapx-it small { font: 700 .72rem var(--font); letter-spacing: .04em; text-transform: uppercase; color: #F8C25C; }
.mapx-it b { font: 700 .98rem var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mx-ink); }
.mapx-it span { font-size: .82rem; color: var(--mx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapx-km { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 700 .78rem var(--font); color: var(--mx-ink2); white-space: nowrap; }
.mapx-km em { font-style: normal; font-size: .66rem; padding: 2px 7px; border-radius: 999px; background: rgba(242, 137, 138, .16); color: #F7A5A3; }
.mapx-none { margin: 0; padding: 22px 20px; color: var(--mx-muted); font-size: .9rem; text-align: center; }

/* Fiche d'un concert (popup) */
.mapx-pop .maplibregl-popup-content { padding: 0; background: transparent; box-shadow: none; }
.mapx-pop .maplibregl-popup-tip { border-top-color: rgba(26, 22, 28, .95) !important; border-bottom-color: rgba(26, 22, 28, .95) !important; }
.mapx-pop { animation: mx-pop .35s var(--ease) both; }
.mapx-card { position: relative; width: 300px; max-width: calc(100vw - 48px); padding: 16px 18px 14px; border-radius: 18px; background: rgba(26, 22, 28, .96); border: 1px solid rgba(248, 194, 92, .35); box-shadow: var(--shadow-lg), 0 0 40px rgba(248, 180, 80, .12); color: var(--mx-ink); font-family: var(--font); }
.is-mf .mapx-card { border-color: rgba(242, 137, 138, .5); }
.mapx-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .06); color: var(--mx-ink2); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.mapx-x:hover { background: rgba(255, 255, 255, .12); }
.mapx-av { float: right; width: 52px; height: 52px; margin: 18px 0 6px 10px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(242, 137, 138, .6); }
.mapx-k { display: block; padding-right: 28px; font: 800 .68rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: #F8C25C; }
.mapx-card h3 { margin: 6px 0 8px; font: 800 1.35rem/1.1 var(--display); letter-spacing: -.01em; text-transform: uppercase; color: var(--mx-ink); }
.mapx-t { margin: -2px 0 8px; font-size: .86rem; color: var(--mx-ink2); }
.mapx-l { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: .9rem; color: var(--mx-ink2); }
.mapx-l svg { flex: none; color: #F8C25C; }
.mapx-foot { clear: both; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.mapx-dir { font-size: .82rem; color: var(--mx-muted); text-decoration: none; }
.mapx-dir:hover { color: var(--mx-ink); }
.mapx-go { display: inline-flex; align-items: center; gap: 7px; font: 800 .86rem var(--font); color: var(--mx-ink); text-decoration: none; }
.mapx-go:hover { color: #FFD98C; }
.mapx-badge { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 9px 0 7px; background: var(--grad); color: var(--on-grad); font-size: .78rem; clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%); }

/* Repères animés : point sélectionné, position du visiteur */
.mapx-sel { position: relative; width: 0; height: 0; pointer-events: none; }
.mapx-sel i { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #F8C25C; opacity: 0; }
.mapx-sel.is-mf i { border-color: #F2898A; }
.mapx-sel.is-in i { animation: mx-ring 1.6s var(--ease) infinite; }
.mapx-sel.is-in i + i { animation-delay: .8s; }
.mapx-me { position: relative; width: 0; height: 0; }
.mapx-me b { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #A98BFF; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(169, 139, 255, .3), 0 4px 12px rgba(0, 0, 0, .5); }
.mapx-me i { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; background: rgba(169, 139, 255, .28); animation: mx-me 2.4s ease-out infinite; }
.mapx-me i + i { animation-delay: 1.2s; }

/* Chargement et messages */
.mapx-loading { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(circle at 50% 45%, rgba(248, 194, 92, .1), #0C0A0D 60%); color: var(--mx-ink2); font-weight: 600; text-align: center; padding: 20px; transition: opacity .5s; }
.mapx-loading.is-out { opacity: 0; pointer-events: none; }
.mapx-pin { width: 18px; height: 18px; border-radius: 50%; background: #F8C25C; animation: mx-live 1.4s infinite; }
.mapx-toast { position: absolute; z-index: 6; left: 50%; top: 92px; max-width: min(460px, calc(100% - 32px)); padding: 12px 16px; border-radius: 14px; background: rgba(26, 22, 28, .96); border: 1px solid rgba(255, 255, 255, .12); color: var(--mx-ink); font-size: .9rem; box-shadow: var(--shadow-lg); transform: translate(-50%, -10px); opacity: 0; transition: opacity .3s, transform .3s var(--ease); }
.mapx-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

@keyframes mx-live { 0% { box-shadow: 0 0 0 0 rgba(242, 137, 138, .7); } 70% { box-shadow: 0 0 0 10px rgba(242, 137, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 137, 138, 0); } }
@keyframes mx-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes mx-me { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes mx-spin { to { transform: rotate(360deg); } }
@keyframes mx-drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes mx-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes mx-slide { from { opacity: 0; transform: translateX(-24px); } }
@keyframes mx-item { from { opacity: 0; transform: translateY(8px); } }
@keyframes mx-pop { from { opacity: 0; } }

/* Mobile : la liste devient une feuille qu'on tire vers le haut */
@media (max-width: 820px) {
  .mapx-top { top: 10px; left: 10px; right: 10px; gap: 8px; }
  .mapx-title { padding: 8px 12px; border-radius: 14px; }
  .mapx-title h1 { font-size: 1.05rem; }
  .mapx-chips button { padding: 7px 11px; font-size: .8rem; }
  .mapx-list { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 62%; border-radius: 22px 22px 0 0; border-bottom: 0; transform: translateY(calc(100% - 70px)); transition: transform .45s var(--ease); animation: none; }
  .mapx-list.is-open { transform: none; }
  .mapx-list-head { cursor: pointer; padding: 22px 18px 14px; justify-content: center; text-align: center; }
  .mapx-handle { display: block; position: absolute; top: 9px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 99px; background: rgba(255, 255, 255, .25); }
  .mapx-zone { right: 10px; bottom: 82px; min-width: 0; padding: 9px 14px; border-radius: 14px; }
  .mapx-zone b { font-size: 1.15rem; max-width: 46vw; }
  .mapx-zone small { font-size: .64rem; }
  .mapx-locate { right: auto; left: 10px; bottom: 82px; padding: 10px 14px 10px 12px; font-size: .84rem; }
  .mapx .maplibregl-ctrl-bottom-right { display: none; }
  .has-chat .mapx-zone, .has-chat .mapx-locate { bottom: 82px; }
  .mapx-toast { top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .mapx *, .mapx-pop { animation: none !important; transition: none !important; }
}
.page-map .site-footer { display: none; }

/* Accès à la carte des concerts : lien du menu, icône de l'en-tête (petits écrans, pages fans), bouton de l'accueil */
.nav-links .nav-map { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); }
.nav-links .nav-map svg { flex: none; }
.map-link { display: inline-grid; place-items: center; width: 34px; height: 32px; border-radius: 999px; border: 1px solid rgba(248, 194, 92, .45); color: var(--gold); background: var(--gold-soft); text-decoration: none; transition: background-color .2s, transform .2s var(--ease); }
.map-link:hover { background: rgba(248, 194, 92, .22); transform: translateY(-1px); }
@media (min-width: 1180px) { .map-link:not(.is-fan) { display: none; } }
.dates-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 auto 10px; }
.dates-bar .dates-region { margin: 0; }
.map-cta { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px; text-decoration: none; font: 700 .9rem var(--font); color: var(--ink);
  background: linear-gradient(100deg, rgba(139, 108, 242, .16), rgba(244, 166, 207, .14)); border: 1px solid rgba(176, 107, 216, .38); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.map-cta:hover { transform: translateY(-1px); border-color: rgba(176, 107, 216, .65); box-shadow: 0 8px 22px rgba(139, 108, 242, .25); }
.map-cta-ico { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #8B6CF2, #F4A6CF); color: #fff; }
.map-cta-ico i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(176, 107, 216, .6); animation: mx-ring 2s var(--ease) infinite; }
.map-cta-go { color: #B06BD8; transition: transform .2s var(--ease); }
.map-cta:hover .map-cta-go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .map-cta-ico i { animation: none; display: none; } }
.mapx-group { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 260px; overflow-y: auto; }
.mapx-group button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); color: var(--mx-ink); text-align: left; cursor: pointer; font: inherit; transition: background-color .2s, border-color .2s; }
.mapx-group button:hover { background: rgba(248, 194, 92, .1); border-color: rgba(248, 194, 92, .35); }
.mapx-group small { font: 700 .7rem var(--font); letter-spacing: .04em; text-transform: uppercase; color: #F8C25C; }
.mapx-group b { font: 700 .95rem var(--display); }

/* Carte : bouton fond clair / sombre */
.mapx-theme { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--mx-ink); background: var(--mx-glass); border: 1px solid var(--mx-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); transition: transform .2s var(--ease), color .2s; }
.mapx-theme:hover { transform: rotate(-15deg); color: #F8C25C; }
.mapx-theme .ico-sun { display: none; }
.mapx[data-mtheme="dark"] .mapx-theme .ico-sun { display: block; }
.mapx[data-mtheme="dark"] .mapx-theme .ico-moon { display: none; }

/* Carte sur fond clair (par défaut) : panneaux blancs translucides, texte sombre, or plus soutenu */
.mapx[data-mtheme="light"] { --mx-glass: rgba(255, 255, 255, .86); --mx-line: rgba(60, 40, 70, .12); --mx-ink: #1F1A24; --mx-ink2: #4B4452; --mx-muted: #7D7584; background: #F6F2EF; color: var(--mx-ink); }
.mapx[data-mtheme="light"] .mapx-title, .mapx[data-mtheme="light"] .mapx-chips, .mapx[data-mtheme="light"] .mapx-zone, .mapx[data-mtheme="light"] .mapx-list,
.mapx[data-mtheme="light"] .mapx-theme { box-shadow: 0 8px 24px rgba(60, 40, 70, .12); }
.mapx[data-mtheme="light"] .mapx-kicker, .mapx[data-mtheme="light"] .mapx-zone small, .mapx[data-mtheme="light"] .mapx-it small,
.mapx[data-mtheme="light"] .mapx-k, .mapx[data-mtheme="light"] .mapx-group small { color: #B8700E; }
.mapx[data-mtheme="light"] .mapx-zone { border-color: rgba(226, 150, 40, .35); box-shadow: 0 14px 34px rgba(60, 40, 70, .16); }
.mapx[data-mtheme="light"] .mapx-chips button:hover { background: rgba(60, 40, 70, .06); }
.mapx[data-mtheme="light"] .mapx-locate.is-on { background: #fff; color: #B8700E; box-shadow: 0 8px 24px rgba(60, 40, 70, .14), inset 0 0 0 1px rgba(226, 150, 40, .5); }
.mapx[data-mtheme="light"] .mapx-list-head { border-bottom-color: rgba(60, 40, 70, .08); }
.mapx[data-mtheme="light"] .mapx-items { scrollbar-color: rgba(60, 40, 70, .2) transparent; }
.mapx[data-mtheme="light"] .mapx-item:hover { background: rgba(60, 40, 70, .045); }
.mapx[data-mtheme="light"] .mapx-item.is-sel { background: rgba(248, 194, 92, .16); border-color: rgba(226, 150, 40, .45); }
.mapx[data-mtheme="light"] .mapx-cal { background: rgba(248, 194, 92, .16); border-color: rgba(226, 150, 40, .32); color: #B8700E; }
.mapx[data-mtheme="light"] .is-mf .mapx-cal { background: rgba(228, 86, 111, .1); border-color: rgba(228, 86, 111, .32); color: #C9405A; }
.mapx[data-mtheme="light"] .is-tonight .mapx-cal { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.mapx[data-mtheme="light"] .mapx-km em { background: rgba(228, 86, 111, .12); color: #C9405A; }
.mapx[data-mtheme="light"] .mapx-card { background: rgba(255, 255, 255, .98); border-color: rgba(226, 150, 40, .4); box-shadow: 0 18px 44px rgba(60, 40, 70, .2); }
.mapx[data-mtheme="light"] .is-mf .mapx-card { border-color: rgba(228, 86, 111, .45); }
.mapx[data-mtheme="light"] .mapx-pop .maplibregl-popup-tip { border-top-color: #fff !important; border-bottom-color: #fff !important; }
.mapx[data-mtheme="light"] .mapx-x { background: rgba(60, 40, 70, .06); }
.mapx[data-mtheme="light"] .mapx-x:hover { background: rgba(60, 40, 70, .12); }
.mapx[data-mtheme="light"] .mapx-l svg { color: #C9800F; }
.mapx[data-mtheme="light"] .mapx-foot { border-top-color: rgba(60, 40, 70, .1); }
.mapx[data-mtheme="light"] .mapx-go:hover { color: #B8700E; }
.mapx[data-mtheme="light"] .mapx-group button { border-color: rgba(60, 40, 70, .1); background: rgba(60, 40, 70, .03); }
.mapx[data-mtheme="light"] .mapx-group button:hover { background: rgba(248, 194, 92, .14); border-color: rgba(226, 150, 40, .4); }
.mapx[data-mtheme="light"] .mapx-toast { background: #fff; border-color: rgba(60, 40, 70, .12); box-shadow: 0 14px 34px rgba(60, 40, 70, .18); }
.mapx[data-mtheme="light"] .mapx-loading { background: radial-gradient(circle at 50% 45%, rgba(248, 194, 92, .2), #F6F2EF 60%); }
.mapx[data-mtheme="light"] .mapx-handle { background: rgba(60, 40, 70, .2); }
.mapx[data-mtheme="light"] .maplibregl-ctrl-attrib { background: rgba(255, 255, 255, .7) !important; }
.mapx[data-mtheme="light"] .maplibregl-ctrl-attrib-button, .mapx[data-mtheme="light"] .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: none; }
.mapx[data-mtheme="light"] .mapx-me b { box-shadow: 0 0 0 4px rgba(169, 139, 255, .3), 0 4px 12px rgba(60, 40, 70, .3); }
.mapx[data-mtheme="light"] .mapx-sel i { border-color: #D98A1A; }
.mapx[data-mtheme="light"] .mapx-sel.is-mf i { border-color: #E4566F; }

/* ---------- Billetterie : page de vente, billets du fan (app/views/public/tickets*.php) ---------- */
.tkt { max-width: 640px; margin: 0 auto; padding: 28px 16px 56px; }
.tkt-hero { text-align: center; margin-bottom: 22px; animation: tk-rise .6s var(--ease) both; }
.tkt-artist { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-2); font-weight: 700; }
.tkt-artist .avatar { box-shadow: 0 0 0 4px var(--gold-soft), var(--glow); }
.tkt-hero h1 { margin: 14px 0 10px; font: 800 clamp(1.7rem, 5vw, 2.4rem)/1.08 var(--display); letter-spacing: -.02em; }
.tkt-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tkt-meta span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .25); font-weight: 600; font-size: .92rem; }
.tkt-meta svg { color: var(--gold); flex: none; }
.tkt-desc { max-width: 520px; margin: 14px auto 0; color: var(--ink-2); }
.tkt-buy { animation: tk-rise .6s .1s var(--ease) both; }
.tkt-buy h2 { margin: 0 0 14px; font-size: 1.2rem; }
.tkt-types { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.tkt-type { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 14px 14px 18px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--surface-2); transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.tkt-type.is-on { border-color: rgba(248, 194, 92, .6); background: var(--grad-soft); transform: translateY(-1px); }
.tkt-type.is-out { opacity: .55; }
.tkt-type-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tkt-type-txt b { font: 700 1.02rem var(--display); }
.tkt-price { font-weight: 800; color: var(--gold); }
.tkt-left { font-size: .8rem; font-weight: 700; color: #F2898A; }
.tkt-left.is-out { color: var(--muted); }
.tkt-step { display: flex; align-items: center; gap: 4px; flex: none; padding: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); }
.tkt-step button { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font: 700 1.25rem/1 var(--font); color: var(--ink); background: var(--surface-3); transition: transform .15s, background-color .2s; }
.tkt-step button:hover:not(:disabled) { background: var(--grad); color: var(--on-grad); }
.tkt-step button:active:not(:disabled) { transform: scale(.9); }
.tkt-step button:disabled { opacity: .35; cursor: default; }
.tkt-step input { width: 40px; border: 0; background: transparent; text-align: center; font: 800 1.1rem var(--font); color: var(--ink); -moz-appearance: textfield; appearance: textfield; padding: 0; }
.tkt-step input::-webkit-inner-spin-button, .tkt-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tkt-total { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 14px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.tkt-total span { font-weight: 700; color: var(--ink-2); }
.tkt-total b { font: 800 1.6rem var(--display); }
.tkt-total b.is-bump { animation: tk-bump .3s var(--ease); }
.tkt-safe { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
.tkt-closed { animation: tk-rise .6s var(--ease) both; }
.tkt-status { display: inline-block; padding: 8px 16px; border-radius: 999px; font-weight: 800; }
.tkt-status.is-ok { background: rgba(61, 214, 140, .15); color: #3DD68C; }
.tkt-status.is-used { background: rgba(248, 194, 92, .15); color: var(--gold); }
.tkt-status.is-void { background: rgba(255, 92, 108, .15); color: var(--danger); }
/* Billet à l'écran : bandeau sombre, encoches de découpe, QR code */
.tkt-wallet { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.tkt-card { position: relative; width: 100%; max-width: 380px; border-radius: 22px; overflow: hidden; background: #FFFFFF; color: #1F1A24; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); animation: tk-rise .6s var(--ease) both; }
.tkt-card + .tkt-card { animation-delay: .08s; }
.tkt-card-top { position: relative; padding: 18px 22px 20px; background: #1A161C; color: #F6F1EA; border-bottom: 6px solid #F8BD55; box-shadow: 0 3px 0 #F2898A; }
.tkt-card-brand { font: 800 .95rem var(--display); }
.tkt-card-brand b { color: #F8C25C; }
.tkt-card-n { position: absolute; top: 20px; right: 22px; font: 700 .7rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: #918980; }
.tkt-card-top h3 { margin: 14px 0 4px; font: 800 1.55rem/1.1 var(--display); color: #F6F1EA; }
.tkt-card-top p { margin: 0; color: #CFC6BB; }
.tkt-card-top small { display: block; margin-top: 10px; font: 800 .74rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: #F8C25C; }
.tkt-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 22px; }
.tkt-card-body .wide { grid-column: 1 / -1; }
.tkt-card-body span { display: block; font: 700 .66rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: #918980; }
.tkt-card-body b { font-size: .98rem; }
.tkt-card-qr { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 22px 22px; border-top: 2px dashed #E3DCD8; }
.tkt-card-qr::before, .tkt-card-qr::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.tkt-card-qr::before { left: -12px; }
.tkt-card-qr::after { right: -12px; }
.tkt-qr { width: 200px; max-width: 70%; }
.tkt-qr svg { display: block; width: 100%; height: auto; }
.tkt-card-qr code { font: 800 1rem var(--font); letter-spacing: .08em; color: #1F1A24; background: none; }
.tkt-card.is-used .tkt-qr { opacity: .35; }
.tkt-card.is-void { filter: grayscale(1); opacity: .7; }
.tkt-void { padding: 40px 0; font-weight: 800; color: var(--danger); }
@keyframes tk-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes tk-bump { 40% { transform: scale(1.08); } }

/* ---------- Billetterie : espace artiste ---------- */
.tk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tk-stat { padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--edge); }
.tk-stat span { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
.tk-stat b { display: block; margin-top: 4px; font: 800 1.6rem var(--display); }
.tk-stat b small { font-size: .9rem; color: var(--muted); font-weight: 600; }
.tk-bar { display: block; height: 6px; margin-top: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.tk-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .6s var(--ease); }
@media (max-width: 760px) { .tk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tk-types { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tk-type-head, .tk-type-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 80px 34px; gap: 8px; align-items: center; }
.tk-type-head span { font-size: .76rem; font-weight: 700; color: var(--muted); }
.tk-type-row { position: relative; }
.tk-type-row input { width: 100%; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: inherit; }
.tk-type-row.is-removed { opacity: .4; }
.tk-sold { grid-column: 1 / -1; margin-top: -2px; font-size: .74rem; font-weight: 700; color: var(--success); }
.tk-link { display: flex; gap: 8px; }
.tk-link input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 600 .9rem var(--font); }
.tk-share-row { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.tk-share-qr { width: 120px; flex: none; padding: 6px; border-radius: 14px; background: #fff; }
.tk-share-qr svg { display: block; width: 100%; height: auto; }
.tk-how { margin: 0; padding-left: 18px; line-height: 1.6; }
.tk-how li + li { margin-top: 6px; }

/* ---------- Scanner d'entrée (plein écran) ---------- */
.scan { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: #050405; color: #fff; }
.scan-top { display: flex; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 14px 12px; background: rgba(26, 22, 28, .95); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.scan-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; font-size: 1.5rem; flex: none; }
.scan-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scan-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-title small, .scan-count small { color: #918980; font-size: .78rem; }
.scan-count { text-align: right; }
.scan-count b { font: 800 1.5rem var(--display); color: #F8C25C; }
.scan-view { position: relative; flex: 1; overflow: hidden; }
.scan-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; left: 50%; top: 50%; width: min(70vw, 300px); aspect-ratio: 1; transform: translate(-50%, -55%); }
.scan-frame i { position: absolute; width: 38px; height: 38px; border: 4px solid #F8C25C; }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.scan-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.scan-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.scan-laser { position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, #F2898A, transparent); box-shadow: 0 0 12px #F2898A; animation: scan-laser 2.2s ease-in-out infinite; }
@keyframes scan-laser { 0%, 100% { top: 12%; } 50% { top: 88%; } }
.scan-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-weight: 700; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); padding: 0 16px; }
.scan-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(5, 4, 5, .85); }
.scan-result { position: fixed; left: 12px; right: 12px; bottom: 96px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 18px; border-radius: 24px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); animation: scan-pop .25s var(--ease); cursor: pointer; }
.scan-result.is-ok { background: #1DB46A; }
.scan-result.is-warn { background: #E0901A; }
.scan-result.is-bad { background: #D9364A; }
.scan-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .22); font: 800 2.4rem/1 var(--display); }
.scan-result b { font: 800 1.5rem var(--display); }
.scan-result span { font-weight: 600; }
.scan-result small { opacity: .85; letter-spacing: .06em; }
@keyframes scan-pop { from { transform: scale(.9); opacity: 0; } }
.scan-manual { display: flex; gap: 8px; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); background: rgba(26, 22, 28, .95); border-top: 1px solid rgba(255, 255, 255, .08); }
.scan-manual input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .15); background: #0C0A0D; color: #fff; font: 700 1rem var(--font); letter-spacing: .06em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .tkt *, .scan-laser, .scan-result { animation: none !important; } }
/* Très petits écrans : l'icône de la carte laisse la place au bouton « Je suis artiste » (pages fans). */
@media (max-width: 400px) { .map-link.is-fan { display: none; } }
.scan-manual input::placeholder { text-transform: none; letter-spacing: 0; color: #6E665F; }
.tkt-safe { display: block; }
.tkt-safe svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* ---------- Accueil : section Billetterie, captures en 3D ---------- */
.tix { overflow: hidden; }
.tix-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.tix-points { list-style: none; margin: 22px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tix-points li { display: flex; gap: 12px; align-items: flex-start; }
.tix-points li > span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .25); font-size: 1.15rem; }
.tix-points b { display: block; font: 700 1rem var(--display); color: var(--ink); }
.tix-points div { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.tix-stage { position: relative; height: 640px; perspective: 1600px; }
.tix-scene { --rx: 0deg; --ry: 0deg; position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); }
.tix-scene figure { position: absolute; margin: 0; }
.tix-scene img { display: block; width: 100%; height: auto; }
.tix-desk { top: 0; right: -8%; width: 96%; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 255, 255, .03);
  transform: rotateY(-22deg) rotateX(8deg) translateZ(-120px); transform-origin: right center; opacity: .92; }
.tix-phone { width: 30%; max-width: 190px; border-radius: 28px; padding: 6px; background: #0E0B10; box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.tix-phone::before { content: ""; position: absolute; top: 12px; left: 50%; z-index: 2; width: 26%; height: 6px; margin-left: -13%; border-radius: 99px; background: #0E0B10; }
.tix-phone picture, .tix-phone img { border-radius: 22px; overflow: hidden; }
.tix-p1 { left: 0; top: 250px; transform: rotateY(18deg) rotateZ(-3deg) translateZ(60px); animation: tix-float 6s ease-in-out infinite; }
.tix-p2 { left: 31%; top: 200px; transform: translateZ(140px) rotateY(4deg); animation: tix-float 6s 1.2s ease-in-out infinite; z-index: 2; }
.tix-p3 { right: 2%; top: 290px; transform: rotateY(-16deg) rotateZ(3deg) translateZ(80px); animation: tix-float 6s 2.4s ease-in-out infinite; }
.tix-chip { position: absolute; z-index: 3; padding: 9px 14px; border-radius: 999px; font: 800 .86rem var(--font); box-shadow: var(--shadow); transform: translateZ(200px); animation: tix-float 5s ease-in-out infinite; white-space: nowrap; }
.tix-c1 { right: 4%; top: 262px; background: #1DB46A; color: #fff; }
.tix-c2 { left: 2%; top: 212px; background: var(--grad); color: var(--on-grad); animation-delay: 1.6s; }
@keyframes tix-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 980px) {
  .tix-grid { grid-template-columns: minmax(0, 1fr); }
  .tix-stage { height: 560px; max-width: 620px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
  .tix-stage { height: 430px; }
  .tix-phone { border-radius: 20px; padding: 4px; }
  .tix-phone picture, .tix-phone img { border-radius: 16px; }
  .tix-p1 { top: 150px; } .tix-p2 { top: 110px; } .tix-p3 { top: 175px; }
  .tix-chip { font-size: .74rem; padding: 7px 11px; }
  .tix-desk { right: 0; width: 92%; }
  .tix-p3 { right: 0; }
  .tix-c1 { right: 2%; }
  .tix-c1 { top: 150px; } .tix-c2 { top: 112px; }
}
@media (prefers-reduced-motion: reduce) { .tix-phone, .tix-chip { animation: none; } .tix-scene { transition: none; } }

/* ---------- Menu des petits écrans (burger) ---------- */
.site-header { position: sticky; }
.nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; }
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; }
.nav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mnav { position: absolute; top: 100%; left: 0; right: 0; z-index: 49; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 16px; background: var(--surface); border-bottom: 1px solid var(--line-2); box-shadow: 0 24px 48px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .25s var(--ease); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mnav.is-in { opacity: 1; transform: none; }
.mnav[hidden] { display: none; }
.mnav > a { display: block; padding: 13px 12px; border-radius: 14px; text-decoration: none; color: var(--ink); font: 600 1.05rem var(--font); }
.mnav > a:hover { background: rgba(255, 255, 255, .05); }
.mnav .mnav-map { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; margin-bottom: 6px; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .3); }
.mnav .mnav-map svg { grid-row: span 2; color: var(--gold); }
.mnav .mnav-map span { font-weight: 800; }
.mnav .mnav-map small { color: var(--muted); font-size: .82rem; font-weight: 600; }
.mnav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.mnav-actions .btn:only-child { grid-column: 1 / -1; }
[data-theme="light"] .mnav > a:hover { background: rgba(60, 40, 70, .05); }
@media (min-width: 1180px) { .nav-burger, .mnav { display: none !important; } }
/* Sous 1180 px, la carte est dans le menu : l'icône de l'en-tête reste seulement sur les pages fans (sans menu). */
@media (max-width: 1179px) { .map-link:not(.is-fan) { display: none; } }
@media (max-width: 640px) { .header-actions .hd-login { display: none; } }

/* Billetterie : fenêtre « Inscription manuelle » */
dialog.tk-dialog { padding: 0; border: 0; background: transparent; width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 24px); color: var(--ink); }
dialog.tk-dialog::backdrop { background: rgba(5, 4, 6, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tk-dialog-card { position: relative; padding: 24px 22px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); animation: tk-rise .3s var(--ease) both; }
.tk-dialog-card h3 { margin: 0 0 6px; font: 800 1.3rem var(--display); }
.tk-dialog-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--ink-2); font-size: 1.3rem; cursor: pointer; }
.tk-modes { display: grid; gap: 8px; margin: 14px 0 16px; }
.tk-mode { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; transition: border-color .2s, background-color .2s; }
.tk-mode input { margin-top: 4px; accent-color: #F4A63A; }
.tk-mode span { display: flex; flex-direction: column; gap: 2px; }
.tk-mode small { color: var(--muted); font-size: .84rem; }
.tk-mode:has(input:checked) { border-color: rgba(248, 194, 92, .6); background: var(--grad-soft); }
.scan-result.is-due { background: #E0901A; }
.scan-result.is-due b { font-size: 1.9rem; }

/* ---------- Ajout automatique des morceaux (espace artiste) ---------- */
.imp { display: flex; flex-direction: column; gap: 22px; max-width: 920px; }
.imp-step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 1.15rem var(--display); color: var(--ink); }
.imp-step span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: var(--on-grad); font-size: .95rem; flex: none; }
.imp-search-row { display: flex; gap: 10px; }
.imp-search-row input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 700 1.05rem var(--font); }
.imp-block { animation: tk-rise .5s var(--ease) both; }
.imp-wait { padding: 18px 0; }
.imp-artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.imp-artist { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img txt src" "img btn btn"; gap: 6px 12px; align-items: center; padding: 12px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; animation: tk-rise .45s calc(var(--k) * 40ms) var(--ease) both; }
.imp-artist:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.imp-artist.is-on { border-color: rgba(248, 194, 92, .7); background: var(--grad-soft); }
.imp-artist img, .imp-artist .imp-ini { grid-area: img; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.imp-ini { display: grid; place-items: center; background: var(--surface-3); color: var(--gold); font: 800 1.3rem var(--display); }
.imp-a-txt { grid-area: txt; min-width: 0; display: flex; flex-direction: column; }
.imp-a-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-a-txt small { color: var(--muted); font-size: .8rem; }
.imp-src { grid-area: src; align-self: start; padding: 3px 8px; border-radius: 999px; font: 700 .68rem var(--font); }
.imp-src-deezer { background: rgba(162, 56, 255, .15); color: #B57BFF; }
.imp-src-apple { background: rgba(250, 87, 113, .15); color: #FF7A90; }
.imp-artist .btn { grid-area: btn; justify-self: start; }
.imp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.imp-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.imp-price-all { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-2); }
.imp-price-all input { width: 70px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 700 .95rem var(--font); text-align: right; }
.imp-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.imp-track { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); opacity: .6; transition: opacity .2s, border-color .2s; animation: tk-rise .4s calc(var(--k) * 25ms) var(--ease) both; }
.imp-track.is-on { opacity: 1; border-color: rgba(248, 194, 92, .4); }
.imp-track.is-exists { opacity: .45; }
.imp-track > input[type=checkbox] { width: 20px; height: 20px; accent-color: #F4A63A; }
.imp-track img, .imp-track .imp-ini { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.imp-t-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.imp-t-txt input { width: 100%; padding: 6px 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: 700 .98rem var(--font); }
.imp-t-txt input:hover, .imp-t-txt input:focus { border-color: var(--line-2); background: var(--bg-2); }
.imp-t-txt small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-t-price { display: flex; align-items: center; gap: 4px; }
.imp-t-price input { width: 64px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 700 .92rem var(--font); text-align: right; }
.imp-t-price small { color: var(--muted); font-size: .76rem; }
.imp-confirm { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 12px; }
.imp-progress, .tf-prog { width: 100%; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.imp-progress i, .tf-prog i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .3s var(--ease); }
.imp-done { animation: tk-rise .5s var(--ease) both; }
@media (max-width: 560px) {
  .imp-track { grid-template-columns: 22px 44px minmax(0, 1fr); }
  .imp-track img, .imp-track .imp-ini { width: 44px; height: 44px; }
  .imp-t-price { grid-column: 3; }
}
/* Fichiers audio en lot */
.tf { display: flex; flex-direction: column; gap: 14px; max-width: 920px; }
.tf-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; border-radius: 22px; border: 2px dashed rgba(248, 194, 92, .45); background: var(--grad-soft); text-align: center; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.tf-drop.is-over { border-color: var(--gold); transform: scale(1.01); }
.tf-drop-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--grad); color: var(--on-grad); font-size: 1.5rem; }
.tf-drop small { color: var(--muted); }
.tf-extra { padding: 10px 14px; border-radius: 14px; background: rgba(248, 194, 92, .1); color: var(--ink-2); font-size: .88rem; }
.tf-list { display: flex; flex-direction: column; gap: 6px; }
.tf-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 300px); gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s; }
.tf-row .cover, .tf-row img { width: 52px; height: 52px; border-radius: 10px; }
.tf-row.is-matched { border-color: rgba(248, 194, 92, .45); }
.tf-row.is-done { border-color: rgba(61, 214, 140, .5); }
.tf-row.is-fail { border-color: rgba(255, 92, 108, .5); }
.tf-t { min-width: 0; display: flex; flex-direction: column; }
.tf-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-t small { color: var(--muted); font-size: .8rem; }
.tf-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tf-slot select { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 600 .86rem var(--font); }
.tf-state { font-size: .78rem; font-weight: 700; color: var(--muted); }
.tf-row.is-done .tf-state { color: var(--success); }
.tf-row.is-fail .tf-state { color: var(--danger); }
.tf-go { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 640px) { .tf-row { grid-template-columns: 44px minmax(0, 1fr); } .tf-slot { grid-column: 1 / -1; } }

/* ---------- Page « Soutenir » (QR code de l'artiste) ---------- */
.sup { max-width: 460px; margin: 0 auto; padding: 18px 14px 48px; display: flex; flex-direction: column; gap: 16px; }
.sup-card { border-radius: 28px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); animation: tk-rise .5s var(--ease) both; }
.sup-photo { position: relative; aspect-ratio: 4 / 3; background: #0C0A0D; overflow: hidden; }
.sup-photo img { width: 100%; height: 100%; object-fit: cover; display: block; animation: sup-zoom 9s ease-out both; }
.sup-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 13, 0) 45%, rgba(12, 10, 13, .85) 100%); }
.sup-photo.is-empty { display: grid; place-items: center; background: var(--grad); }
.sup-photo.is-empty > span { font: 800 6rem var(--display); color: var(--on-grad); opacity: .85; }
.sup-name { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; color: #fff; }
.sup-name b { font: 800 1.6rem/1.1 var(--display); letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.sup-name small { color: #FFD98C; font-weight: 700; font-size: .85rem; }
.sup-body { padding: 22px 20px 20px; }
.sup-body h1 { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 8px; font: 800 1.7rem var(--display); text-align: center; }
.sup-heart { color: #FF4F79; font-size: 1.6rem; animation: sup-beat 1.6s ease-in-out infinite; }
.sup-lead { margin: 0 0 18px; text-align: center; color: var(--ink-2); line-height: 1.55; }
.sup-amounts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.sup-amt { position: relative; cursor: pointer; }
.sup-amt input { position: absolute; opacity: 0; pointer-events: none; }
.sup-amt span { display: grid; place-items: center; height: 64px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface-2); font: 800 1.15rem var(--display); color: var(--ink); transition: border-color .2s, background-color .2s, transform .15s var(--ease), box-shadow .2s; }
.sup-other span { font: 700 .95rem var(--font); color: var(--ink-2); }
.sup-amt:hover span { border-color: rgba(248, 194, 92, .45); }
.sup-amt input:checked + span { border-color: #F8C25C; background: var(--grad-soft); box-shadow: 0 0 0 3px rgba(248, 194, 92, .18); transform: translateY(-1px); }
.sup-amt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.sup-other-box { margin-top: 10px; }
.sup-info { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.sup-info > span { font-size: 1.35rem; }
.sup-info b { display: block; font-size: .92rem; }
.sup-info small { color: var(--muted); font-size: .8rem; }
.sup-msg { margin: 16px 0 14px; }
.sup-msg summary { cursor: pointer; color: var(--ink-2); font-weight: 600; font-size: .9rem; list-style: none; }
.sup-msg summary::-webkit-details-marker { display: none; }
.sup-msg textarea { width: 100%; margin-top: 8px; min-height: 64px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: inherit; resize: vertical; }
.sup-go { font-size: 1.12rem; padding-top: 17px; padding-bottom: 17px; }
.sup-go:disabled { opacity: .55; }
.sup-secure { display: block; margin: 12px 0 0; text-align: center; font-size: .78rem; color: var(--muted); }
.sup-secure svg { display: inline-block; vertical-align: -1px; margin-right: 3px; }
.sup-more { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); text-decoration: none; color: var(--ink); transition: transform .2s var(--ease), border-color .2s; animation: tk-rise .5s .15s var(--ease) both; }
.sup-more:hover { transform: translateY(-2px); border-color: rgba(248, 194, 92, .45); }
.sup-more .avatar { width: 44px; height: 44px; flex: none; }
.sup-more-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sup-more-txt small { color: var(--muted); font-size: .82rem; }
.sup-more-go { font-size: 1.3rem; color: var(--gold); transition: transform .2s var(--ease); }
.sup-more:hover .sup-more-go { transform: translateX(4px); }
@keyframes sup-zoom { from { transform: scale(1.08); } }
@keyframes sup-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
@media (max-width: 380px) { .sup-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .sup-photo img, .sup-heart { animation: none; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Fans : fenêtre « Préviens-moi de tes prochains concerts », page « Mes fans » ---------- */
dialog.fanpop { padding: 0; border: 0; background: transparent; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: visible; color: var(--ink); }
dialog.fanpop::backdrop { background: rgba(5, 4, 6, .6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .25s; }
dialog.fanpop.is-in::backdrop { opacity: 1; }
.fanpop-card { position: relative; padding: 26px 22px 20px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg), 0 0 0 6px var(--gold-soft); opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .3s var(--ease), transform .35s var(--ease); max-height: calc(100vh - 24px); overflow-y: auto; }
dialog.fanpop.is-in .fanpop-card { opacity: 1; transform: none; }
.fanpop-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--ink-2); font-size: 1.3rem; cursor: pointer; }
.fanpop-head { position: relative; width: 74px; height: 74px; margin: 0 auto 12px; }
.fanpop-head .avatar, .fanpop-av { width: 74px !important; height: 74px !important; border-radius: 50%; box-shadow: 0 0 0 4px var(--gold-soft); }
.fanpop-ico { position: absolute; right: -8px; bottom: -4px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--grad); font-size: 1rem; box-shadow: var(--glow); animation: fan-ring 2.4s ease-in-out infinite; }
.fanpop h2 { margin: 0 0 8px; font: 800 1.3rem/1.2 var(--display); text-align: center; letter-spacing: -.01em; }
.fanpop-sub { margin: 0 0 16px; text-align: center; color: var(--ink-2); font-size: .94rem; }
.fanpop .field { margin-bottom: 12px; }
.fanpop-note { margin: 10px 0 0; text-align: center; font-size: .78rem; color: var(--muted); }
.fanpop-done { text-align: center; padding: 6px 0; }
.fanpop-check { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: rgba(61, 214, 140, .15); color: var(--success); font: 800 2rem var(--display); animation: tk-rise .4s var(--ease) both; }
@keyframes fan-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 85% { transform: rotate(8deg); } 90% { transform: rotate(-5deg); } }
.fan-cta { display: flex; align-items: center; gap: 14px; }
.fan-cta > span { font-size: 1.6rem; }
.fan-cta > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fan-cta small { color: var(--muted); }
@media (max-width: 560px) { .fan-cta { flex-wrap: wrap; } .fan-cta .btn { width: 100%; } }
.fanw-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: -4px; }
.fanw-models { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .22); }
.fan-concert { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.fan-concert:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .fanpop-ico { animation: none; } .fanpop-card { transition: none; } }

/* Espace artiste, petits écrans : menu complet sous la barre du haut (la barre latérale n'apparaît qu'à 1024 px). */
.app-mnav { max-height: calc(100vh - 60px - 70px); }
.app-mnav > a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; font-size: 1rem; }
.app-mnav > a .i { width: 24px; text-align: center; }
.app-mnav > a .count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--grad); color: var(--on-grad); font-size: .75rem; font-weight: 800; text-align: center; }
.app-mnav > a.is-active { background: var(--grad-soft); color: var(--gold); }
@media (min-width: 1024px) { .app-mnav { display: none !important; } }

/* Accueil : « Tes fans » (scène à gauche) et « Carte des concerts » (fenêtre de navigateur inclinée). */
.tix-grid.is-flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.tix-grid.is-flip .tix-stage { order: -1; }
.fanx-stage .tix-desk { right: auto; left: -8%; }
.fanx-p1 { right: 24%; top: 230px; transform: rotateY(-14deg) rotateZ(-2deg) translateZ(90px); animation: tix-float 6s ease-in-out infinite; z-index: 2; }
.fanx-p2 { right: -2%; top: 270px; transform: rotateY(-20deg) rotateZ(3deg) translateZ(60px); animation: tix-float 6s 1.6s ease-in-out infinite; }
.fanx-c1 { left: 2%; top: 300px; background: var(--grad); color: var(--on-grad); }
.fanx-c2 { right: 6%; top: 222px; background: #1DB46A; color: #fff; animation-delay: 1.2s; }
.lmap { overflow: hidden; }
.lmap-stage { position: relative; height: 600px; perspective: 1600px; }
.lmap-frame { position: absolute; top: 20px; left: 4%; width: 92%; margin: 0; border-radius: 16px; overflow: hidden; background: #F4F1EC; border: 1px solid var(--line-2);
  box-shadow: 0 50px 90px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 255, 255, .03); transform: rotateY(-14deg) rotateX(7deg) rotateZ(1deg); transform-origin: 30% 50%; }
.lmap-frame img { display: block; width: 100%; height: auto; }
.lmap-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #1E1A20; }
.lmap-bar i { width: 10px; height: 10px; border-radius: 50%; background: #F2898A; }
.lmap-bar i:nth-child(2) { background: #F8C25C; } .lmap-bar i:nth-child(3) { background: #1DB46A; }
.lmap-bar span { margin: 0 auto; padding: 3px 14px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); font: 600 .74rem var(--font); }
.lmap-c1 { left: 0; top: 66%; background: var(--grad); color: var(--on-grad); }
.lmap-c2 { right: 0; top: 26%; background: #1DB46A; color: #fff; animation-delay: 1.4s; }
.lmap-shot { position: relative; }
.lmap-pulse { position: absolute; left: 70.9%; top: 73.3%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #F8BD55; box-shadow: 0 0 0 0 rgba(248, 189, 85, .7); animation: lmap-pulse 2s ease-out infinite; }
@keyframes lmap-pulse { 0% { box-shadow: 0 0 0 0 rgba(248, 189, 85, .7); } 100% { box-shadow: 0 0 0 26px rgba(248, 189, 85, 0); } }
@media (max-width: 980px) {
  .tix-grid.is-flip { grid-template-columns: minmax(0, 1fr); }
  .tix-grid.is-flip .tix-stage { order: 0; }
  .lmap-stage { height: auto; max-width: 620px; width: 100%; margin: 0 auto; padding: 10px 0 40px; }
  .lmap-stage .tix-scene { position: relative; }
  .lmap-stage .lmap-frame { position: relative; top: 0; left: 0; width: 100%; transform: rotateY(-8deg) rotateX(5deg); }
}
@media (max-width: 560px) {
  .fanx-p1 { top: 135px; right: 26%; } .fanx-p2 { top: 165px; right: 0; }
  .fanx-stage .tix-desk { left: 0; }
  .fanx-c1 { top: 110px; } .fanx-c2 { top: 140px; right: 2%; }
  .lmap-c1 { top: auto; bottom: -14px; left: 4px; } .lmap-c2 { top: 22%; right: 4px; }
}
@media (prefers-reduced-motion: reduce) { .lmap-pulse { animation: none; } }
/* Accueil : « Booking » (fenêtre inclinée vers la droite, tableau des prospects posé devant). */
.tix-grid.is-flip .bkx-stage { order: -1; }
.bkx-stage .lmap-frame { left: 2%; transform: rotateY(14deg) rotateX(7deg) rotateZ(-1deg); transform-origin: 70% 50%; }
.bkx-board { position: absolute; z-index: 3; right: -2%; bottom: 36px; width: 330px; padding: 14px 14px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45); transform: translateZ(160px) rotateZ(-2deg); animation: tix-float 6s 1s ease-in-out infinite; font-size: .78rem; }
.bkx-board > b { display: block; margin-bottom: 10px; font-size: .86rem; }
.bkx-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bkx-cols > div { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; background: var(--surface-2, rgba(127, 127, 127, .08)); }
.bkx-cols small { color: var(--ink-3, #9C939F); font-weight: 800; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.bkx-cols i { display: block; padding: 6px 7px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-style: normal; font-weight: 700; line-height: 1.25; }
.bkx-cols em { display: block; margin-top: 4px; font-style: normal; font-weight: 700; font-size: .66rem; color: #F2898A; }
.bkx-cols .is-hot { background: rgba(248, 189, 85, .14); }
.bkx-c1 { left: auto; right: 9%; top: 15%; bottom: auto; }
.bkx-c2 { right: auto; left: 0; top: 58%; bottom: auto; }
@media (max-width: 980px) {
  .tix-grid.is-flip .bkx-stage { order: 0; }
  .bkx-stage .lmap-frame { left: 0; transform: rotateY(8deg) rotateX(5deg); }
  .bkx-board { position: relative; right: auto; bottom: auto; margin: 18px 0 0 auto; transform: rotateZ(-2deg); }
}
@media (max-width: 560px) {
  .bkx-board { width: 92%; margin-top: 14px; }
  .bkx-c1 { top: 3%; bottom: auto; left: auto; right: 4px; } .bkx-c2 { top: 36%; bottom: auto; left: 4px; right: auto; }
}


/* ---------- Boutique (merch sans file d'attente) ---------- */
.shop { max-width: 560px; margin: 0 auto; padding: 18px 14px 48px; display: flex; flex-direction: column; gap: 16px; }
.shop-head { text-align: center; }
.shop-artist { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 700; text-decoration: none; }
.shop-artist .avatar { width: 34px; height: 34px; }
.shop-head h1 { margin: 6px 0 8px; font: 800 2rem var(--display); }
.shop-promise { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.shop-promise span { padding: 6px 11px; border-radius: 999px; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .25); font-size: .8rem; font-weight: 700; color: var(--ink); }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shop-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease), border-color .2s; animation: tk-rise .5s var(--ease) both; }
.shop-card:hover { transform: translateY(-3px); border-color: rgba(248, 194, 92, .45); }
.shop-card.is-off { opacity: .6; }
.shop-img { position: relative; aspect-ratio: 1; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.shop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-img i { font-style: normal; font-size: 3.4rem; }
.shop-badge { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--grad); color: var(--on-grad); font: 800 .7rem var(--font); text-transform: uppercase; letter-spacing: .06em; }
.shop-badge.is-out { left: auto; right: 8px; background: #2A242C; color: #F6F1EA; }
.shop-txt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.shop-txt b { font-size: .95rem; line-height: 1.25; }
.shop-price { color: var(--gold); font-weight: 800; }
.shop-grid-sm { margin-bottom: 6px; }
@media (min-width: 640px) { .container .shop-grid-sm, .tkt-shop .shop-grid-sm { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-note { margin: 4px 0 0; }
.shop-how { padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); }
.shop-how ol { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); line-height: 1.6; }
.shop-back { text-decoration: none; }
.shop-product { border-radius: 28px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); animation: tk-rise .5s var(--ease) both; }
.shop-photo { aspect-ratio: 1; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.shop-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-photo i { font-style: normal; font-size: 6rem; }
.shop-body { padding: 20px 18px; }
.shop-body h1 { margin: 0; font: 800 1.6rem/1.15 var(--display); }
.shop-price-lg { margin: 4px 0 10px; color: var(--gold); font: 800 1.5rem var(--display); }
.shop-desc { margin: 0 0 14px; }
.shop-pack { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .25); }
.shop-pack ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.shop-opt, .shop-pickup { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.shop-opt legend, .shop-pickup legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.shop-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-pill { position: relative; cursor: pointer; }
.shop-pill input { position: absolute; opacity: 0; pointer-events: none; }
.shop-pill span { display: grid; place-items: center; min-width: 48px; min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface-2); font-weight: 700; transition: border-color .15s, background-color .15s, transform .15s var(--ease); }
.shop-pill input:checked + span { border-color: var(--gold); background: var(--grad-soft); color: var(--ink); transform: translateY(-1px); }
.shop-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.shop-pill.is-out span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.shop-left { margin: -6px 0 12px; color: var(--gold); font-weight: 700; }
.shop-left.is-out { color: #F2898A; }
.shop-qty { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; font-weight: 700; }
.shop-concert { display: flex; gap: 10px; align-items: center; padding: 11px 13px; margin-bottom: 6px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface-2); cursor: pointer; }
.shop-concert:has(input:checked) { border-color: var(--gold); background: var(--grad-soft); }
.shop-concert input { accent-color: #F8C25C; }
.shop-go { margin-top: 4px; }
.shop-ticket { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 14px 0 12px; padding: 16px; border-radius: 18px; border: 2px dashed rgba(248, 194, 92, .5); background: var(--grad-soft); }
.shop-ticket small { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.shop-ticket b { font: 800 2.4rem/1.1 var(--display); letter-spacing: .18em; color: var(--gold); }
.shop-ticket span { font-size: .88rem; color: var(--ink-2); text-align: center; }
.sup-shop { background: var(--grad-soft); border-color: rgba(248, 194, 92, .35); }
.sup-shop-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--grad); font-size: 1.4rem; }
.tkt-shop { margin-top: 22px; }
.tkt-shop h2 { margin: 0 0 4px; font: 800 1.25rem var(--display); }
.tkt-shop p { margin: 0 0 12px; }
.shop-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shop-tool { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; transition: border-color .2s; }
.shop-tool:hover { border-color: rgba(248, 194, 92, .45); }
.shop-tool > span:first-child { font-size: 1.6rem; }
.shop-tool small { display: block; color: var(--muted); font-size: .82rem; }
.shop-tool .count { margin-left: auto; min-width: 26px; padding: 2px 8px; border-radius: 99px; background: var(--grad); color: var(--on-grad); font-weight: 800; text-align: center; }
.shop-optbox { margin: 0 0 16px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); }
.shop-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.shop-stock label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.shop-stock input { min-height: 40px; }
.shop-tracks { display: grid; gap: 6px; max-height: 200px; overflow-y: auto; }
.shop-prep { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shop-prep li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.shop-prep b { color: var(--gold); font-size: 1.1rem; white-space: nowrap; }
.shop-search { width: 100%; min-height: 46px; margin-bottom: 10px; font-size: 1.05rem; }
.shop-pick-list { display: grid; gap: 8px; }
.shop-pick { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.shop-pick[hidden] { display: none; }
.shop-pick-code { flex: none; font: 800 1.1rem var(--display); letter-spacing: .12em; color: var(--gold); }
.shop-pick-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-pick-txt small { color: var(--muted); }
.shop-hand { flex: none; }
.shop-hand .when-done, .shop-pick.is-done .shop-hand .when-ready { display: none; }
.shop-pick.is-done .shop-hand .when-done { display: inline; }
.shop-pick.is-done { opacity: .55; }
.shop-pick.is-done .shop-pick-code { text-decoration: line-through; }
@media (max-width: 560px) { .shop-tools { grid-template-columns: minmax(0, 1fr); } }
.chip .count { margin-left: 6px; padding: 0 7px; border-radius: 99px; background: var(--grad); color: var(--on-grad); font-size: .75rem; font-weight: 800; }

/* Accueil : « Boutique » (scène à gauche : l'espace de l'artiste, puis le parcours du fan sur trois téléphones). */
.shopx-stage .tix-desk { right: auto; left: -8%; }
.shopx-c1 { right: 2%; top: 248px; background: #1DB46A; color: #fff; }
.shopx-c2 { left: 8%; top: 196px; background: var(--grad); color: var(--on-grad); animation-delay: 1.4s; }
@media (max-width: 560px) {
  .shopx-stage .tix-desk { left: 0; }
  .shopx-c1 { top: 146px; right: 9%; } .shopx-c2 { top: 106px; left: 3%; }
}
.shop-optbox[hidden], .form-row[hidden], .shop-pickup[hidden] { display: none; }
.shop-ship-list { display: grid; gap: 12px; }
.shop-ship { display: grid; gap: 8px; }
.shop-ship-what small { display: block; margin-top: 2px; }
.shop-addr { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font: 600 .95rem/1.45 var(--font); white-space: pre-wrap; color: var(--ink); }
.shop-ship-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shop-ship-form input[type=text] { flex: 1; min-width: 160px; min-height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: inherit; }
.danger-zone { border-color: rgba(255, 92, 108, .45); background: linear-gradient(180deg, rgba(255, 92, 108, .06), transparent 60%), var(--surface); }
/* Application installable : bouton de la barre du haut, page Application, carte du tableau de bord, fenêtre iPhone. */
.pwa-top span { margin-left: 2px; }
@media (max-width: 520px) { .pwa-top { display: none !important; } } /* téléphone : la carte du tableau de bord et la page Application suffisent */
.is-standalone .pwa-top { display: none !important; }
.pwa-ok { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(29, 180, 106, .12); border: 1px solid rgba(29, 180, 106, .35); }
.pwa-list { list-style: none; margin: 16px 0 12px; padding: 0; display: grid; gap: 12px; }
.pwa-list li { display: flex; gap: 12px; align-items: flex-start; }
.pwa-list li > span { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grad-soft); border: 1px solid rgba(248, 194, 92, .25); }
.pwa-list b { display: block; color: var(--ink); }
.pwa-list div { color: var(--ink-2); font-size: .93rem; line-height: 1.45; }
.pwa-how summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.pwa-how p { margin: 8px 0 0; font-size: .92rem; color: var(--ink-2); }
.pwa-state { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.pwa-state[data-state="on"] { background: rgba(29, 180, 106, .12); border-color: rgba(29, 180, 106, .35); }
.pwa-state[data-state="denied"], .pwa-state[data-state="unsupported"] { background: rgba(255, 92, 108, .09); border-color: rgba(255, 92, 108, .28); }
.pwa-device { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.pwa-device > span { font-size: 1.5rem; }
.pwa-device > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pwa-card { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 44px 14px 16px; background: var(--grad-soft); border-color: rgba(248, 194, 92, .35); }
.pwa-card[hidden] { display: none; }
.pwa-card > div:nth-child(2) { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.pwa-card small { color: var(--ink-2); }
.pwa-card-ico { font-size: 1.8rem; }
.pwa-card-x, .pwa-dlg-x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.3rem; cursor: pointer; }
.pwa-dlg { width: min(420px, calc(100vw - 32px)); padding: 24px 22px 20px; border-radius: 24px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.pwa-dlg::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.pwa-dlg h2 { margin: 0 0 12px; font: 800 1.35rem var(--display); }
.pwa-dlg ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; }
.pwa-share { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--gold); color: var(--gold); font-size: .8rem; }
/* Un bouton masqué (attribut hidden) reste masqué, malgré le display de .btn. */
.btn[hidden] { display: none !important; }

/* Inscription : artiste ou professionnel */
.reg-type { border: 0; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.reg-choice { position: relative; display: block; }
.reg-choice input { position: absolute; opacity: 0; pointer-events: none; }
.reg-choice span { display: block; height: 100%; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line-2); cursor: pointer; transition: border-color .15s, background .15s; }
.reg-choice b { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.reg-choice small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.35; }
.reg-choice input:checked + span { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 3px rgba(248, 194, 92, .12); }
.reg-choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.reg-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
@media (max-width: 420px) { .reg-type { grid-template-columns: 1fr; } }
/* Espace pro : artistes récemment inscrits */
.pro-artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.pro-artist { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.pro-artist img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px; }
.pro-artist span { min-width: 0; display: flex; flex-direction: column; }
.pro-artist b, .pro-artist small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field[hidden] { display: none !important; } /* la capacité n'apparaît qu'aux lieux et festivals */
/* Espace pro : demandes de dates, recherche d'artistes */
.pro-req { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); padding: 12px 14px; }
.pro-req.is-new { border-color: rgba(255, 79, 121, .5); }
.pro-req img, .pro-req-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--surface-3); }
.pro-req-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pro-req-main .ink2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-req-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pro-thread { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.pro-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.pro-msg p { margin: 4px 0 0; overflow-wrap: anywhere; }
.pro-msg-pro { align-self: flex-end; background: var(--gold-soft); border-color: rgba(248, 194, 92, .35); }
.pro-msg-system { align-self: center; background: none; border-style: dashed; text-align: center; }
.pro-artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.pro-ac { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 14px; }
.pro-ac img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.pro-dlg { width: min(560px, calc(100% - 24px)); border: 1px solid var(--line-2); border-radius: 22px; background: var(--bg-2); color: var(--ink); padding: 22px; }
.pro-dlg::backdrop { background: rgba(6, 4, 3, .6); }
.pro-dlg h2 { margin-top: 0; font-size: 1.3rem; }
@media (max-width: 640px) { .pro-req { grid-template-columns: 44px minmax(0, 1fr); } .pro-req-side { grid-column: 2; flex-direction: row; align-items: center; } }

/* Captcha invisible (assets/js/captcha.js) : petit encart sous les champs, champ piège hors de l'écran. */
.mf-captcha { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: .82rem; font-weight: 600; }
.mf-captcha-ico { font-size: 1rem; line-height: 1; }
.mf-captcha.is-ok { border-color: rgba(29, 180, 106, .45); color: #1DB46A; }
.mf-captcha.is-ok .mf-captcha-ico { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1DB46A; color: #fff; font-size: .75rem; }
.mf-captcha.is-ko { border-color: rgba(242, 137, 138, .5); color: #F2898A; }
.mf-captcha-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- Apparence de la page artiste (v39, app/page_design.php) ---------- */
.pd-sec { scroll-margin-top: calc(var(--header-h) + 14px); }
.pd-cover { position: absolute; left: 0; right: 0; top: 0; height: clamp(170px, 40vw, 340px); z-index: -1; background-size: cover; background-repeat: no-repeat; }
.pd-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 40%, var(--bg) 100%); }
.artist-hero.has-cover { padding-top: calc(clamp(170px, 40vw, 340px) - 70px); }
.artist-hero.has-cover .avatar-lg { position: relative; box-shadow: 0 0 0 4px var(--bg), var(--shadow); }
.pd-une { margin: 24px 0 6px; padding: 22px; border: 1px solid var(--line-2); background: var(--grad-soft), var(--surface); }
.pd-une-k { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.pd-une h2 { font-size: 1.4rem; margin: 0 0 8px; }
.pd-une p { color: var(--ink-2); margin: 0 0 14px; }
.pd-une .disco-player { display: block; padding: 0; margin-top: 4px; }
.pd-une-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 16px; }
.pd-une-concert { display: flex; gap: 16px; align-items: flex-start; }
.pd-une-txt { min-width: 0; flex: 1; }
body.pd-font-elegant .artist-hero h1, body.pd-font-elegant .section-title h2, body.pd-font-elegant .pd-une h2 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-weight: 600; letter-spacing: 0; }
body.pd-font-affiche .artist-hero h1, body.pd-font-affiche .section-title h2, body.pd-font-affiche .pd-une h2 { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }

/* Éditeur (espace/ma-page) */
.pd-edit { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; }
.pd-form { display: grid; gap: 18px; min-width: 0; }
.pd-form [hidden] { display: none !important; }
.pd-form .card h3 { margin-top: 0; }
.pd-prev { position: sticky; top: calc(var(--header-h) + 12px); }
.pd-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pd-frame { width: 390px; max-width: 100%; margin: 0 auto; height: calc(100vh - var(--header-h) - 90px); min-height: 520px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--bg); }
.pd-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.pd-frame.is-desk { width: 100%; }
.pd-frame.is-desk iframe { width: 1280px; height: calc(100% / var(--s, .328)); transform: scale(var(--s, .328)); transform-origin: 0 0; }
.pd-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pd-theme { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); cursor: pointer; background: var(--surface-2); }
.pd-theme input { position: absolute; opacity: 0; pointer-events: none; }
.pd-theme:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.pd-theme:has(input:focus-visible) { outline: 3px solid rgba(248, 194, 92, .6); outline-offset: 2px; }
.pd-sw { flex: 0 0 46px; height: 46px; border-radius: 12px; position: relative; overflow: hidden; border: 1px solid var(--line-2); }
.pd-sw i { position: absolute; left: 7px; right: 7px; bottom: 7px; height: 14px; border-radius: 5px; }
.pd-sw b { position: absolute; top: 7px; right: 7px; width: 14px; height: 14px; border-radius: 50%; }
.pd-tx { min-width: 0; line-height: 1.25; }
.pd-tx b { display: block; font-size: .92rem; }
.pd-tx small { color: var(--muted); font-size: .78rem; }
.pd-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.pd-colors input[type=color] { width: 46px; height: 36px; padding: 2px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; }
.pd-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; padding: 0; }
.pd-seg { position: relative; display: inline-flex; }
.pd-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pd-seg span { padding: 8px 14px; border-radius: 999px; font: 600 .88rem var(--font); color: var(--ink-2); cursor: pointer; }
.pd-seg input:checked + span { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(248, 194, 92, .45); }
.pd-seg input:focus-visible + span { outline: 3px solid rgba(248, 194, 92, .6); }
.pd-img { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pd-img img { width: 100%; max-height: 170px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line-2); }
.pd-secs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); }
.pd-row.is-drag { opacity: .5; border-style: dashed; }
.pd-row input[type=text] { flex: 1; min-width: 0; }
.pd-grip { cursor: grab; color: var(--muted); font-weight: 700; letter-spacing: -2px; user-select: none; }
.pd-show { display: inline-flex; gap: 6px; align-items: center; font-size: .84rem; color: var(--ink-2); white-space: nowrap; }
.pd-lock { width: 74px; text-align: center; }
.pd-move { display: inline-flex; gap: 2px; }
.pd-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
@media (max-width: 1100px) {
  .pd-edit { grid-template-columns: minmax(0, 1fr); }
  .pd-prev { position: static; order: -1; }
  .pd-frame { height: 560px; min-height: 0; }
}
@media (max-width: 560px) {
  .pd-row { flex-wrap: wrap; }
  .pd-row input[type=text] { flex-basis: calc(100% - 30px); }
  .pd-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- Accueil : la page artiste, mieux qu'un site ou qu'un Linktree (#ma-page) ---------- */
.mpx-stage { position: relative; height: 560px; perspective: 1600px; }
.mpx-phone { position: absolute; font-size: 11px; width: 20em; height: 41em; padding: 0 0 1.2em; border-radius: 2.6em; overflow: hidden; background: var(--pb); color: var(--pi);
  border: .55em solid #1A1619; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); display: flex; flex-direction: column; align-items: center; text-align: center; }
.mpx-cover { align-self: stretch; height: 9.5em; background: var(--pc); flex: none; }
.mpx-av { width: 5.6em; height: 5.6em; margin-top: -2.9em; border-radius: 50%; background: var(--pv); box-shadow: 0 0 0 .35em var(--pb); flex: none; overflow: hidden; }
.mpx-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mpx-name { margin-top: .6em; font: 800 1.55em/1.1 var(--display); color: var(--pi); }
.mpx-tag { margin-top: .5em; padding: .2em .8em; border-radius: 99px; font-weight: 700; font-size: .9em; color: var(--pa); background: color-mix(in srgb, var(--pa) 14%, transparent); }
.mpx-btn { margin: 1em 0 .9em; padding: .85em 1.6em; border-radius: 99px; font-weight: 800; font-size: 1.05em; background: var(--pa); color: var(--po); box-shadow: 0 .6em 1.6em color-mix(in srgb, var(--pa) 35%, transparent); }
.mpx-une { position: relative; align-self: stretch; margin: 0 1em .7em; padding: .9em 1em; border-radius: 1.1em; text-align: left; background: var(--ps); border: 1px solid color-mix(in srgb, var(--pi) 10%, transparent); }
.mpx-une small { display: block; font-size: .78em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pa); }
.mpx-une b { display: block; margin-top: .2em; font-size: 1.1em; }
.mpx-une i { position: absolute; right: .9em; top: 50%; transform: translateY(-50%); width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--pa); color: var(--po); font-size: .9em; }
.mpx-row { align-self: stretch; display: flex; align-items: center; gap: .6em; margin: 0 1em .5em; padding: .65em .8em; border-radius: .9em; background: var(--ps); text-align: left; font-size: .95em; }
.mpx-row b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.mpx-row em { font-style: normal; font-weight: 800; font-size: .9em; color: var(--pa); }
.mpx-scene { --pb: #0B0708; --ps: #1B1214; --pi: #F8EEEE; --pa: #FF3B4E; --po: #14100C; --pc: radial-gradient(60% 90% at 30% 20%, #ff6b5a 0, transparent 60%), linear-gradient(160deg, #6a1222, #0B0708); --pv: linear-gradient(135deg, #ff8a5c, #b0244a); }
.mpx-ocean { --pb: #061217; --ps: #0F232C; --pi: #EAF6F8; --pa: #3FB7E8; --po: #14100C; --pc: radial-gradient(70% 90% at 70% 10%, #5fd3f0 0, transparent 60%), linear-gradient(160deg, #0f4c63, #061217); --pv: linear-gradient(135deg, #7be0f5, #2a6fb0); }
.mpx-papier { --pb: #F7F2E9; --ps: #FFFDF8; --pi: #221B14; --pa: #B3412E; --po: #FFFFFF; --pc: radial-gradient(60% 90% at 40% 0, #f3d2a4 0, transparent 65%), linear-gradient(160deg, #d9a77e, #F7F2E9); --pv: linear-gradient(135deg, #e7b27c, #9b3f2c); border-color: #2a2420; }
.mpx-papier .mpx-name { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 600; }
.mpx-scene .mpx-name { text-transform: uppercase; letter-spacing: .04em; }
.mpx-p1 { left: 0; top: 70px; transform: rotateY(20deg) translateZ(-40px); }
.mpx-p2 { left: calc(50% - 11em); top: 10px; z-index: 2; transform: translateZ(60px); }
.mpx-p3 { right: 0; top: 80px; transform: rotateY(-20deg) translateZ(-40px); }
.mpx-c1 { left: 2%; bottom: 18px; background: var(--grad); color: var(--on-grad); }
.mpx-c2 { right: 2%; top: 22px; background: #1DB46A; color: #fff; animation-delay: 1.4s; }
.mpx-vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; align-items: stretch; }
.mpx-col { position: relative; }
.mpx-col h3 { margin: 0 0 14px; font-size: 1.12rem; }
.mpx-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mpx-col li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
.mpx-col li::before { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 900; }
.mpx-col li.no::before { content: "✕"; background: rgba(242, 137, 138, .16); color: #F2898A; }
.mpx-col li.yes::before { content: "✓"; background: rgba(61, 214, 140, .16); color: var(--success); }
.mpx-col.is-best { border-color: rgba(248, 194, 92, .55); box-shadow: var(--glow); background: var(--grad-soft), var(--surface); }
.mpx-col.is-best li { color: var(--ink); }
.mpx-badge { position: absolute; top: -12px; left: 20px; padding: 4px 12px; border-radius: 99px; background: var(--grad); color: var(--on-grad); font: 800 .76rem var(--font); }
@media (max-width: 1100px) {
  .mpx-stage { height: 520px; max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-width: 900px) {
  .mpx-vs { grid-template-columns: minmax(0, 1fr); }
  .mpx-col.is-best { order: -1; margin-top: 10px; }
}
@media (max-width: 560px) {
  .mpx-stage { height: 450px; }
  .mpx-phone { font-size: 8px; }
  .mpx-p2 { top: 46px; } .mpx-p1 { top: 86px; } .mpx-p3 { top: 92px; }
  .mpx-stage .tix-chip { transform: translateZ(90px); font-size: .8rem; }
  .mpx-c1 { left: 12px; bottom: 6px; } .mpx-c2 { right: 12px; top: 2px; }
}

/* ---------- Agenda (v40, app/agenda.php) ---------- */
.ag { --k-concert: #F8C25C; --k-rehearsal: #5B8CFF; --k-event: #B07CFF; --k-off: #3DD68C; --k-info: #FF8A9A; --k-import: #8FA3B8; }
[data-theme="light"] .ag { --k-concert: #C77A0A; --k-rehearsal: #2F62E0; --k-event: #7B4FE0; --k-off: #12A066; --k-info: #D9466A; --k-import: #5D6F82; }
.ag .k-concert { --k: var(--k-concert); } .ag .k-rehearsal { --k: var(--k-rehearsal); } .ag .k-event { --k: var(--k-event); } .ag .k-off { --k: var(--k-off); } .ag .k-info { --k: var(--k-info); } .ag .k-import { --k: var(--k-import); }
.ag-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-bar-r { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.ag-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: 600 .84rem var(--font); cursor: pointer; transition: opacity .15s, border-color .15s; }
.ag-chip > i { width: 9px; height: 9px; border-radius: 50%; background: var(--k, var(--muted)); }
.ag-chip[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.ag-chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--k, var(--gold)) 55%, transparent); color: var(--ink); }
.ag-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.ag-av { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: #14100C; font: 800 .78rem var(--font); }
.ag-person { padding-left: 5px; }
.ag-person .ag-av { width: 22px; height: 22px; font-size: .7rem; }
.ag-month-h { margin: 22px 0 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ag-month-h:first-of-type { margin-top: 6px; }
.ag-rows { display: grid; gap: 8px; }
.ag-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.ag-row:hover { border-color: color-mix(in srgb, var(--k) 60%, transparent); transform: translateY(-1px); }
.ag-row.is-past { opacity: .55; }
.ag-row.is-today { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.ag-row.k-off { background: repeating-linear-gradient(135deg, var(--surface) 0 10px, color-mix(in srgb, var(--k-off) 7%, var(--surface)) 10px 20px); }
.ag-date { flex: 0 0 44px; text-align: center; line-height: 1.05; }
.ag-date b { display: block; font: 800 1.35rem var(--display); }
.ag-date small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.ag-bar-k { flex: 0 0 4px; align-self: stretch; border-radius: 4px; background: var(--k); }
.ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ag-t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ag-s { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: .84rem; }
.ag-tag { color: var(--gold); font-weight: 700; }
.ag-priv { color: var(--ink-2); }
.ag-warn { display: block; color: #F2898A; font-size: .82rem; font-weight: 600; }
[data-theme="light"] .ag-warn { color: #C42A3E; }
.ag-past { text-align: center; margin: 0 0 4px; }
.ag-empty { margin-top: 10px; }
.ag-mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ag-mhead h2 { margin: 0; min-width: 190px; text-align: center; font-size: 1.25rem; text-transform: capitalize; }
.ag-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--line); gap: 1px; }
.ag-wd { padding: 8px 10px; background: var(--surface-2); color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ag-cell { position: relative; min-height: 104px; padding: 6px; border: 0; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-cell:hover { background: var(--surface-2); }
.ag-cell.is-out { background: var(--bg-2); color: var(--muted); }
.ag-cell.has-off { background-image: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--k-off) 9%, transparent) 9px 18px); }
.ag-cell.is-sel { box-shadow: inset 0 0 0 2px var(--gold); }
.ag-n { font-weight: 800; font-size: .88rem; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.ag-cell.is-today .ag-n { background: var(--grad); color: var(--on-grad); }
.ag-pills { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-pill { display: block; padding: 2px 6px; border-radius: 6px; font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--k) 18%, transparent); color: var(--ink); border-left: 3px solid var(--k); }
.ag-more { font-size: .7rem; color: var(--muted); font-weight: 700; padding-left: 4px; }
.ag-dots { display: none; gap: 3px; flex-wrap: wrap; }
.ag-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); }
.ag-dayview { margin-top: 16px; display: grid; gap: 8px; }
.ag-day-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ag-day-h h3 { margin: 0; font-size: 1.05rem; }
.ag-day-h h3::first-letter { text-transform: uppercase; }
.ag-row-sm { padding: 9px 12px 9px 9px; }
.ag-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ag-pick-it { display: grid; grid-template-columns: 38px 1fr; column-gap: 10px; align-items: center; padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); text-align: left; font: inherit; cursor: pointer; text-decoration: none; transition: border-color .15s; }
.ag-pick-it:hover { border-color: var(--k); color: var(--ink); }
.ag-pick-it span { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--k) 18%, transparent); font-size: 1.2rem; }
.ag-pick-it small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.ag-kinds { margin-bottom: 14px; }
.ag-conflict { margin: 4px 0 12px; }
.ag-form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ag-grow { flex: 1; }
.ag-view p { margin: 0 0 8px; }
.ag-notes { white-space: pre-line; color: var(--ink-2); }
.ag-sync { display: grid; gap: 8px; }
.ag-sync-it { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); text-decoration: none; }
.ag-sync-it:hover { border-color: var(--gold); color: var(--ink); }
.ag-sync-it small { color: var(--muted); text-align: right; }
.ag-members { display: grid; gap: 8px; }
.ag-member { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); flex-wrap: wrap; }
.ag-member-t { flex: 1; min-width: 140px; line-height: 1.25; }
.ag-member-t small { display: block; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.ag-public { padding-top: 26px; padding-bottom: 30px; }
.ag-hello { margin: 0 0 4px; font-size: 1.1rem; }
.ag [hidden] { display: none !important; }
.dash-agenda { margin-top: 24px; }
.dash-agenda .ag-rows { margin-top: 6px; }
@media (max-width: 700px) {
  .ag-bar-r { width: 100%; }
  .ag-bar-r .btn-grad { order: -1; flex: 1 1 100%; }
  .ag-cell { min-height: 58px; padding: 4px; align-items: center; }
  .ag-pills { display: none; }
  .ag-dots { display: flex; justify-content: center; }
  .ag-wd { padding: 6px 2px; text-align: center; font-size: .66rem; }
  .ag-mhead h2 { min-width: 0; flex: 1; font-size: 1.05rem; }
  .ag-row { gap: 10px; }
  .ag-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px 4px; scrollbar-width: none; }
  .ag-filters::-webkit-scrollbar { display: none; }
  .ag-chip { flex: none; }
}

/* Accueil : l'agenda du groupe (#agenda) */
.agx-stage { position: relative; height: 520px; perspective: 1600px; }
.agx-card { position: absolute; top: 40px; left: 6%; width: 86%; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); transform: rotateY(-10deg) rotateX(6deg); }
.agx-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 1.05rem; }
.agx-head span { display: flex; }
.agx-av { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--surface); font: 800 .74rem var(--font); font-style: normal; color: #14100C; }
.agx-card .ag-row { cursor: default; }
.agx-card .ag-row:hover { transform: none; }
.agx-c1 { left: 0; bottom: 34px; background: var(--grad); color: var(--on-grad); }
.agx-c2 { right: 0; top: 8px; background: #1DB46A; color: #fff; animation-delay: 1.4s; }
@media (max-width: 900px) {
  .agx-stage { height: auto; max-width: 560px; width: 100%; margin: 0 auto; padding: 30px 0 50px; }
  .agx-stage .tix-scene { position: relative; padding: 24px 0 26px; }
  .agx-card { position: relative; top: 0; left: 0; width: 100%; transform: none; }
  .agx-c1 { bottom: 0; left: 8px; } .agx-c2 { top: 0; right: 8px; }
  .agx-stage { padding: 10px 0 30px; }
  .agx-stage .tix-chip { transform: none; font-size: .8rem; }
}

/* Agenda : entrées cliquables dans le calendrier, agendas importés (v41) */
.ag-pill { width: 100%; text-align: left; border: 0; border-left: 3px solid var(--k); cursor: pointer; font-family: inherit; }
.ag-pill:hover, .ag-pill:focus-visible { background: color-mix(in srgb, var(--k) 32%, transparent); outline: none; }
.ag-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ag-row.k-import { border-style: dashed; }
.ag-pill.k-import { border-left-style: dashed; }
.ag-import { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.ag-import h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ag-feeds { display: grid; gap: 8px; margin: 10px 0 14px; }
.ag-feed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.ag-feed.is-ko { border-color: rgba(242, 137, 138, .5); }
.ag-feed-t { flex: 1 1 180px; min-width: 0; line-height: 1.3; }
.ag-feed-t small { display: block; color: var(--muted); font-size: .8rem; }
.ag-feed select { width: auto; max-width: 100%; padding: 6px 30px 6px 10px; font-size: .82rem; min-height: 0; }
.ag-howto { margin-top: 12px; font-size: .88rem; color: var(--ink-2); }
.ag-howto summary { cursor: pointer; font-weight: 700; color: var(--gold); }
.ag-howto ol { margin: 6px 0 10px; padding-left: 20px; }
.ag-howto p { margin: 8px 0; }

/* ---------- Accueil : tableau des fonctions (#fonctions), accès professionnels ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-pro { margin: 14px 0 0; font-size: .95rem; }
.hero-pro a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dashed var(--line-2); }
.hero-pro a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.fx-wrap { max-width: 1000px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow-sm); }
.fx-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.fx-table thead th { text-align: left; padding: 14px 20px; font: 700 .76rem var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.fx-table .fx-group th { text-align: left; padding: 16px 20px 8px; font: 800 1rem var(--display); color: var(--gold); background: transparent; border-top: 1px solid var(--line-2); }
.fx-table tbody:first-of-type .fx-group th { border-top: 0; }
.fx-table tbody tr:not(.fx-group) th, .fx-table tbody tr:not(.fx-group) td { padding: 11px 20px; vertical-align: top; border-top: 1px solid var(--line); text-align: left; }
.fx-table tbody tr:not(.fx-group) th { width: 34%; font-weight: 700; color: var(--ink); }
.fx-table tbody tr:not(.fx-group) td { color: var(--ink-2); line-height: 1.5; }
.fx-table tbody tr:not(.fx-group):hover { background: var(--gold-soft); }
.fx-ico { float: left; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px 10px 0 0; border-radius: 9px; background: var(--grad-soft); }
.fx-txt { display: block; overflow: hidden; line-height: 1.4; }
.fx-table tbody tr:not(.fx-group) th::after { content: ""; display: table; clear: both; }
.fx-new { display: inline-block; margin-left: 4px; white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: var(--grad); color: var(--on-grad); font: 800 .66rem var(--font); letter-spacing: .03em; vertical-align: 2px; }
.fx-go { width: 70px; white-space: nowrap; text-align: right !important; }
.fx-go a { font-weight: 700; text-decoration: none; color: var(--gold); }
.fx-go a::after { content: " →"; }
@media (max-width: 720px) {
  .fx-table thead { display: none; }
  .fx-table, .fx-table tbody, .fx-table tr, .fx-table th, .fx-table td { display: block; width: auto !important; }
  .fx-table .fx-group th { padding: 16px 16px 6px; }
  .fx-table tbody tr:not(.fx-group) { position: relative; padding: 12px 16px; border-top: 1px solid var(--line); }
  .fx-table tbody tr:not(.fx-group) th, .fx-table tbody tr:not(.fx-group) td { padding: 0; border: 0; }
  .fx-table tbody tr:not(.fx-group) th { padding-right: 56px; margin-bottom: 4px; }
  .fx-table .fx-go { position: absolute; top: 16px; right: 16px; }
}

/* ---------- Accueil : rythme clair / foncé ----------
   Quelques sections inversent le thème (foncées dans le thème clair, claires dans le thème sombre) pour scander la page :
   la douleur, le gain chiffré, la page artiste, la carte, le remix, les professionnels et le dernier appel.
   Les composants lisent tous var(--…) : redéfinir les variables sur la section suffit à la retourner. */
.tone-inv { position: relative; color: var(--ink); border: 0; padding-top: 64px !important; padding-bottom: 64px !important;
  background: radial-gradient(1000px 480px at 88% 0%, var(--tone-glow-1), transparent 62%), radial-gradient(820px 520px at 0% 100%, var(--tone-glow-2), transparent 60%), var(--bg); }
.tone-inv + .section { padding-top: 64px !important; }
@media (min-width: 900px) { .tone-inv { padding-top: 96px !important; padding-bottom: 96px !important; } .tone-inv + .section { padding-top: 96px !important; } }
:root[data-theme="light"] .tone-inv {
  --bg: #17111B; --bg-2: #1E1723; --surface: #231B29; --surface-2: #2A2130; --surface-3: #322838;
  --ink: #F7F1EA; --ink-2: #D6CBD3; --muted: #A097A6; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --gold: #F8C25C; --gold-2: #F4A63A; --gold-soft: rgba(248, 194, 92, .13); --pink: #FF4F79; --violet: #B79CFF;
  --grad-soft: linear-gradient(135deg, rgba(248, 194, 92, .17) 0%, rgba(242, 137, 138, .10) 100%);
  --success: #3DD68C; --danger: #FF5C6C; --warning: #F8C25C; --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25); --shadow: 0 10px 30px rgba(0, 0, 0, .45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --glow: 0 10px 30px rgba(248, 180, 80, .28); --wave-idle: rgba(255, 255, 255, .16); --wave-grid: rgba(255, 255, 255, .09);
  --tone-glow-1: rgba(248, 170, 70, .16); --tone-glow-2: rgba(169, 139, 255, .16);
  color-scheme: dark;
}
:root:not([data-theme="light"]) .tone-inv {
  --bg: #F3EEF2; --bg-2: #ECE5EE; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F1ECF4;
  --ink: #1E1724; --ink-2: #4A4152; --muted: #756C7D; --line: rgba(40, 24, 56, .08); --line-2: rgba(40, 24, 56, .14);
  --gold: #B8690A; --gold-2: #D9821C; --gold-soft: rgba(236, 150, 40, .13); --pink: #E3356A; --violet: #6E4FE0;
  --grad-soft: linear-gradient(135deg, rgba(248, 180, 80, .20) 0%, rgba(242, 137, 138, .14) 100%);
  --success: #12A066; --danger: #D9364A; --warning: #B8690A; --edge: inset 0 1px 0 rgba(255, 255, 255, .7);
  --shadow-sm: 0 1px 2px rgba(40, 24, 56, .06), 0 4px 14px rgba(40, 24, 56, .06); --shadow: 0 10px 30px rgba(40, 24, 56, .10); --shadow-lg: 0 24px 60px rgba(40, 24, 56, .16);
  --glow: 0 10px 26px rgba(240, 140, 60, .30); --wave-idle: rgba(40, 24, 56, .16); --wave-grid: rgba(40, 24, 56, .10);
  --tone-glow-1: rgba(248, 170, 70, .14); --tone-glow-2: rgba(169, 139, 255, .12);
  color-scheme: light;
}
/* Ce que le thème clair retouche à la main (dégradés codés en dur) suit lui aussi la section inversée. */
:root[data-theme="light"] .tone-inv .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .tone-inv a { text-decoration-color: rgba(248, 194, 92, .45); }
:root[data-theme="light"] .tone-inv .sim-result { background: linear-gradient(160deg, #241C20 0%, #17131A 70%); }
:root[data-theme="light"] .tone-inv .moment.m1 { background: linear-gradient(160deg, #2E2219 0%, var(--surface) 75%); box-shadow: var(--edge), 0 14px 40px rgba(248, 170, 80, .18); }
:root:not([data-theme="light"]) .tone-inv .grad-text { background: linear-gradient(100deg, #E08A12 0%, #E5683F 55%, #DC3F6A 100%); -webkit-background-clip: text; background-clip: text; }
:root:not([data-theme="light"]) .tone-inv a { text-decoration-color: rgba(184, 105, 10, .45); }
:root:not([data-theme="light"]) .tone-inv .sim-result { background: linear-gradient(160deg, #FFF2E0 0%, #FFFFFF 70%); }
:root:not([data-theme="light"]) .tone-inv .moment.m1 { background: linear-gradient(170deg, #FFF0DA 0%, var(--surface) 70%); box-shadow: var(--edge), 0 14px 40px rgba(240, 150, 60, .16); }

/* ---------- Espace Média : classement « Ça monte », agenda de la zone (app/views/pro/media_*.php) ---------- */
.md-list { display: grid; gap: 10px; }
.md-art { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px 16px; }
.md-rank { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--gold-soft); color: var(--gold); }
.md-art img, .md-noav { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.md-noav { display: grid; place-items: center; font-size: 28px; background: var(--surface-2); }
.md-art > .md-rank, .md-art > img, .md-art > .md-noav { grid-row: span 2; align-self: start; }
.md-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.md-main > b { font-size: 1.05rem; }
.md-why b { font-weight: 700; color: var(--ink); }
.md-why { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.md-why li { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .82rem; background: var(--surface-2); color: var(--ink-2); }
.md-acts { grid-column: 3; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.md-agenda { padding: 4px 0; }
.md-gig { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.md-gig:last-child { border-bottom: 0; }
a.md-gig:hover { background: var(--surface-2); }
.md-date { flex: 0 0 46px; height: 50px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); line-height: 1; }
.md-date b { font-size: 1.2rem; }
.md-date small { font-size: .66rem; font-weight: 800; letter-spacing: .05em; margin-top: 3px; }
.md-gig-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.md-gig-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-gig-t b, .md-gig-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-gig-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.md-why li > span:first-child { margin-right: 5px; }
.md-how summary { cursor: pointer; }
.md-how p { margin: 10px 0 0; }
@media (max-width: 700px) {
  .md-art { grid-template-columns: auto minmax(0, 1fr); }
  .md-rank { display: none; }
  .md-art > img, .md-art > .md-noav { grid-row: auto; }
  .md-acts { grid-column: 1 / -1; }
  .md-gig { flex-wrap: wrap; }
  .md-gig-acts { width: 100%; justify-content: flex-start; padding-left: 58px; }
  .md-gig-t b, .md-gig-t small { white-space: normal; }
}

/* ---------- Super Admin › Médias : tableau des rédactions (app/views/admin/medias.php) ---------- */
.md-tbl table { table-layout: auto; }
.md-tbl tr.is-off { opacity: .55; }
.md-tbl td { vertical-align: top; }
.md-tbl-name { min-width: 0; overflow-wrap: anywhere; }
.md-tbl-name > a, .md-tbl-name > span { display: block; margin-top: 3px; }
.md-tbl-city { width: 14%; }
.md-tbl-st { width: 16%; }
.md-tbl-acts { width: 1%; white-space: nowrap; }
/* Les boutons vivent dans un bloc intérieur : une cellule de tableau en display:flex perd sa largeur (28 px, boutons débordants). */
.md-acts-in, .md-acts-in form { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.md-tbl-acts .btn { white-space: nowrap; justify-content: center; width: 100%; }
@media (max-width: 900px) {
  .md-tbl thead { display: none; }
  .md-tbl table, .md-tbl tbody, .md-tbl tr, .md-tbl td { display: block; width: auto; }
  .md-tbl tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .md-tbl td { padding: 2px 0; border: 0; }
  .md-tbl-city:not(:empty)::before { content: "📍 "; }
  .md-tbl-acts { white-space: normal; }
  .md-acts-in, .md-acts-in form { flex-direction: row; flex-wrap: wrap; margin-top: 6px; }
  .md-tbl-acts .btn { width: auto; }
}

/* Super Admin › Médias : mots exclus (une liste à gauche, les compteurs par mot à droite) */
.md-words { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.md-words textarea { width: 100%; min-height: 220px; font-family: ui-monospace, Consolas, monospace; font-size: .88rem; line-height: 1.5; resize: vertical; }
.md-words-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.md-words-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.md-words-counts a { padding: 3px 10px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); text-decoration: none; }
.md-words-counts a b { color: var(--gold); margin-left: 3px; }
@media (max-width: 760px) { .md-words { grid-template-columns: 1fr; } }

/* ---------- Musifans Mag : espace Rédaction (app/routes/mag.php, assets/js/mag-editor.js) ---------- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-latin.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/newsreader-latin.woff2') format('woff2'); }
.mge-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.stat { text-decoration: none; color: inherit; transition: border-color .15s; }
a.stat:hover { border-color: var(--line-2); }
.mge-list { display: flex; flex-direction: column; }
.mge-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; min-width: 0; }
.mge-row:first-child { border-top: 0; }
a.mge-row:hover .mge-row-t { color: var(--gold); }
.mge-row-img { flex: none; width: 74px; height: 50px; border-radius: 8px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; font-weight: 800; color: var(--gold); }
.mge-row-img img { width: 100%; height: 100%; object-fit: cover; }
.mge-row-img.is-round { width: 46px; height: 46px; border-radius: 50%; }
.mge-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mge-row-t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.mge-row-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mge-row-go { color: var(--muted); font-size: 1.4rem; }
.mge-row form { flex: none; flex-wrap: wrap; justify-content: flex-end; }
.mge-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; padding: 12px; }
.mge-filters select, .mge-filters input { flex: 1 1 160px; min-width: 0; }
.mge-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.mge-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.mge-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.mge-side .card { padding: 16px; }
.mge-side h3 { font-size: 1rem; }
.mge-paper { padding: 28px clamp(16px, 4vw, 44px) 22px; }
.mge-rubrics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.mge-rub input { position: absolute; opacity: 0; pointer-events: none; }
.mge-rub span { display: inline-block; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--line-2); font-size: .82rem; font-weight: 700; cursor: pointer; color: var(--ink-2); }
.mge-rub input:checked + span { background: var(--gold-soft); color: var(--gold); border-color: rgba(248, 194, 92, .5); }
.mge-rub input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.mge-title, .mge-dek { width: 100%; border: 0 !important; background: none !important; box-shadow: none !important; resize: none; padding: 0 !important; color: var(--ink); overflow: hidden; }
.mge-title { font: 800 clamp(1.7rem, 3.6vw, 2.5rem)/1.12 'Fraunces', Georgia, serif; letter-spacing: -.02em; }
.mge-dek { font: 400 1.18rem/1.45 'Newsreader', Georgia, serif; color: var(--ink-2); margin-top: 10px; }
.mge-title:focus, .mge-dek:focus { outline: none; }
.mge-cover { margin: 20px 0 8px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 14px; }
.mge-cover-img img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 12px; }
.mge-cover-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mge-cover-meta { margin-top: 12px; }
.mge-cover-meta .field { margin-bottom: 0; }
.mge-ai-prompt { margin-top: 10px; }
.mge-ai-prompt textarea { width: 100%; margin-top: 6px; }
.mge-body { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mge-b { position: relative; border: 1px solid transparent; border-radius: 12px; padding: 8px 10px 10px; transition: border-color .15s, background .15s; }
.mge-b:hover, .mge-b:focus-within { border-color: var(--line-2); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.mge-b-tools { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; opacity: .45; transition: opacity .15s; }
.mge-b:hover .mge-b-tools, .mge-b:focus-within .mge-b-tools { opacity: 1; }
.mge-b-type { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: auto; }
.mge-b-tools button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; font-size: .95rem; }
.mge-b-tools button:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.mge-b-tools button:disabled { opacity: .3; cursor: default; }
.mge-b-tools .mge-del:hover { color: var(--danger) !important; }
.mge-b-tools .mge-fmt-b { font-weight: 900; }
.mge-b-tools .mge-fmt-i { font-style: italic; font-family: Georgia, serif; }
.mge-b-tools .mge-fmt-a { font-size: .85rem; }
.mge-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.mge-link { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.mge-link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.mge-link-row .input { width: 100%; min-width: 0; }
.mge-link-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mge-link .err { margin: 6px 0 0; color: var(--danger); }
@media (max-width: 560px) { .mge-link-row { grid-template-columns: minmax(0, 1fr); } }
.mge-b-in { display: flex; flex-direction: column; gap: 8px; }
.mge-b textarea, .mge-b input[type=text], .mge-b input[type=search] { width: 100%; }
.mge-b textarea { resize: none; overflow: hidden; }
.mge-b .input { min-height: 0; }
.mge-filters .input { width: auto; min-height: 42px; padding: 8px 12px; }
.mge-p { font: 400 1.1rem/1.6 'Newsreader', Georgia, serif !important; }
.mge-h { font: 700 1.3rem/1.25 'Fraunces', Georgia, serif !important; }
.mge-q { font: italic 400 1.25rem/1.4 'Fraunces', Georgia, serif !important; }
.mge-small { font-size: .9rem !important; }
.mge-b-quote { border-left: 3px solid var(--gold); }
.mge-b-box { background: color-mix(in srgb, var(--gold-soft) 50%, transparent); }
.mge-img img { width: 100%; max-height: 420px; object-fit: contain; background: var(--surface-3); border-radius: 10px; display: block; }
.mge-img-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mge-img-meta .check { grid-column: 1 / -1; }
.mge-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px; border: 2px dashed var(--line-2); border-radius: 12px; cursor: pointer; font-weight: 700; color: var(--ink-2); text-align: center; }
.mge-drop:hover { border-color: var(--gold); color: var(--gold); }
.mge-drop small { font-weight: 400; color: var(--muted); }
.mge-drop.is-busy { opacity: .6; pointer-events: none; }
.mge-video-prev { position: relative; }
.mge-video-prev img { width: 100%; max-width: 420px; border-radius: 10px; display: block; }
.mge-video-prev .badge { position: absolute; left: 10px; top: 10px; background: rgba(0, 0, 0, .7); color: #fff; }
.mge-artist-card, .mge-artist-opt { display: flex; align-items: center; gap: 12px; }
.mge-artist-card img, .mge-artist-opt img, .mge-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--surface-3); font-weight: 800; color: var(--gold); }
.mge-artist-card > div { flex: 1; min-width: 0; }
.mge-artist-res { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mge-artist-opt { width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; font: inherit; }
.mge-artist-opt:hover { background: var(--surface-3); }
.mge-artist-opt img, .mge-artist-opt .mge-av { width: 34px; height: 34px; }
.mge-start { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px; border: 2px dashed var(--line-2); border-radius: 14px; background: none; color: var(--ink-2); font: 600 1.05rem var(--font); cursor: pointer; }
.mge-start span { font: 700 1.6rem 'Fraunces', Georgia, serif; color: var(--gold); }
.mge-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mge-add.is-inline { margin: 2px 0 6px; padding: 10px; border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-soft); }
.mge-add button { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 .84rem var(--font); cursor: pointer; }
.mge-add button:hover { border-color: var(--gold); color: var(--gold); }
.mge-help { margin: 12px 0 0; }
.mge-help code, .mge-help kbd { font-size: .8rem; padding: 1px 5px; border-radius: 5px; background: var(--surface-3); }
.mge-sched summary { cursor: pointer; color: var(--ink-2); }
.mge-ai .seg { display: flex; }
.mge-ai .seg button { flex: 1; padding: 7px 8px; font-size: .8rem; }
[data-ai-msg].ok { color: var(--success); }
[data-ai-msg].err { color: var(--danger); }
.mge-danger { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mge-danger .btn { color: var(--danger); }
.mge-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.mge-idea { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.mge-idea-img { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--surface-3); font-size: 2rem; }
.mge-idea-img img { width: 100%; height: 100%; object-fit: cover; }
.mge-idea-in { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mge-idea h3 { margin: 0; font: 700 1.1rem/1.25 'Fraunces', Georgia, serif; }
.mge-idea h3 a { color: inherit; text-decoration: none; }
.mge-idea p { margin: 0; color: var(--ink-2); flex: 1; }
.mge-invite { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.mge-invite .field { margin: 0; }
.mge-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mge-style { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; }
.mge-style:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.mge-style span { display: flex; flex-direction: column; gap: 4px; }
.mge-style small { color: var(--muted); line-height: 1.4; }
.mge-prof { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.mge-prof-av { width: 84px; height: 84px; font-size: 1.8rem; }
@media (max-width: 1100px) {
  .mge-grid { grid-template-columns: 1fr; }
  .mge-side { position: static; }
}
@media (max-width: 760px) {
  .mge-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mge-invite, .mge-styles, .mge-img-meta { grid-template-columns: 1fr; }
  .mge-row { flex-wrap: wrap; }
  .mge-row form { width: 100%; justify-content: flex-start; }
  .mge-row-img { width: 60px; height: 42px; }
  .mge-b-tools { opacity: 1; }
}

/* Accueil : section Musifans Mag, en papier de magazine dans les deux thèmes */
.magx { background: #F6F0E6; color: #17131A; position: relative; overflow: hidden; padding-top: 80px !important; padding-bottom: 80px !important; margin-bottom: 56px; }
.magx .kicker { color: #C93D24; }
.magx h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; color: #17131A; margin: 8px 0 0; }
.magx-it { font-style: italic; font-weight: 400; color: #C93D24; }
.magx-lead { font-family: 'Newsreader', Georgia, serif; font-size: 1.24rem; line-height: 1.5; color: #463F4B; margin: 18px 0 0; max-width: 34em; }
.magx-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.magx-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.magx-points li { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid rgba(23, 19, 26, .12); }
.magx-points li > span { font-size: 1.4rem; line-height: 1; margin-top: 2px; }
.magx-points b { color: #17131A; }
.magx-points p { margin: 3px 0 0; color: #463F4B; line-height: 1.5; }
.magx-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.magx .btn-ghost { color: #17131A; border-color: rgba(23, 19, 26, .25); }
.magx .btn-ghost:hover { background: #17131A; color: #F6F0E6; }
.magx-vis { position: relative; height: 470px; perspective: 1600px; }
.magx-page { position: absolute; width: 270px; height: 380px; background: #FFFDF9; border-radius: 4px 10px 10px 4px; box-shadow: 0 30px 60px rgba(23, 19, 26, .22), inset 6px 0 10px -6px rgba(0, 0, 0, .25); padding: 14px 14px 16px; display: flex; flex-direction: column; text-decoration: none; color: #17131A; transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.magx-p1 { left: 4%; top: 46px; transform: rotateY(18deg) rotateZ(-6deg); z-index: 1; }
.magx-p2 { left: 22%; top: 18px; transform: rotateY(10deg) rotateZ(-1deg); z-index: 2; }
.magx-p3 { left: 42%; top: 54px; transform: rotateY(2deg) rotateZ(5deg); z-index: 3; }
.magx-vis:hover .magx-p3 { transform: rotateY(-28deg) rotateZ(5deg); }
.magx-vis:hover .magx-p2 { transform: rotateY(-8deg) rotateZ(-1deg); }
.magx-mast { font: 800 1.3rem/1 'Fraunces', Georgia, serif; letter-spacing: -.03em; padding-bottom: 8px; border-bottom: 2px solid #17131A; margin-bottom: 10px; }
.magx-mast i { font-weight: 400; color: #C93D24; }
.magx-page img { width: 100%; height: 190px; object-fit: cover; display: block; }
.magx-k { font: 800 .62rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #C93D24; margin-top: 12px; }
.magx-t { font: 700 1.22rem/1.15 'Fraunces', Georgia, serif; letter-spacing: -.01em; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 960px) {
  .magx-in { grid-template-columns: 1fr; gap: 30px; }
  .magx-vis { height: 400px; max-width: 520px; width: 100%; margin: 0 auto; }
  .magx-page { width: 220px; height: 320px; }
  .magx-page img { height: 150px; }
}
@media (max-width: 560px) {
  .magx { padding-top: 56px !important; padding-bottom: 56px !important; }
  .magx-vis { height: 340px; }
  .magx-page { width: 180px; height: 270px; padding: 10px; }
  .magx-page img { height: 120px; }
  .magx-t { font-size: 1rem; }
  .magx-p1 { left: 0; } .magx-p2 { left: 20%; } .magx-p3 { left: 40%; }
  @media (prefers-reduced-motion: reduce) { .magx-page { transition: none; } }
}

/* Page artiste : articles de Musifans Mag qui le présentent */
.mag-seen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mag-seen-a { display: flex; gap: 12px; align-items: center; padding: 10px; text-decoration: none; color: inherit; }
.mag-seen-a img { width: 86px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.mag-seen-a span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mag-seen-a small { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.mag-seen-a b { font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; line-height: 1.25; }

/* Rédaction › Lettre aux pros : choix et ordre des articles */
.mlt-arts { display: flex; flex-direction: column; gap: 8px; }
.mlt-art { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.mlt-art.is-on { border-color: rgba(248, 194, 92, .55); background: var(--gold-soft); }
.mlt-art img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.mlt-art > span:not(.mlt-move) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mlt-art small { color: var(--muted); }
.mlt-move { display: flex; gap: 2px; }
.mlt-move button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--surface-3); color: var(--ink); cursor: pointer; }

/* Rédaction › Lecteurs abonnés (views/redaction/readers.php) */
.mlr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mlr-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 0 0 12px; font-size: .9rem; }
.mlr-bar-v { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mlr-bar-t { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mlr-bar-t i { display: block; height: 100%; border-radius: inherit; background: var(--grad, #F8BD55); }
.mlr-weeks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items: end; height: 150px; }
.mlr-week { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.mlr-week i { display: block; width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: var(--grad, #F8BD55); }
.mlr-week-n { font-size: .75rem; font-weight: 700; color: var(--ink-2); min-height: 1em; }
.mlr-week-d { font-size: .7rem; color: var(--muted); }
.mlr-h3 { font-size: .95rem; margin: 0 0 12px; }
.mlr-table td { vertical-align: middle; }
.mlr-act { display: flex; gap: 6px; justify-content: flex-end; }
.mlr-act form { margin: 0; }
.magx-sub { margin: 14px 0 0; font-size: .92rem; }
.magx-sub a { font-weight: 700; }
@media (max-width: 860px) { .mlr-grid { grid-template-columns: 1fr; } }

/* Rédaction › Partenaires (views/redaction/sponsors.php, sponsor.php) */
.msp-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.msp-price { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.msp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.msp-prev { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.msp-prev img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; }
.msp-grid form { margin: 0; }
@media (max-width: 960px) { .msp-grid { grid-template-columns: 1fr; } }

/* Super Admin › Newsletter : modèles prêts */
.nl-tpls { margin: 0 0 16px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; }
.nl-tpl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.nl-import { margin-top: 12px; }
.nl-import > summary { cursor: pointer; font-weight: 700; font-size: .92rem; }
.nl-import > form { margin-top: 12px; }
.nl-code, textarea.nl-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.45; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.nl-warn { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(248, 189, 85, .5); background: rgba(248, 189, 85, .1); font-size: .85rem; }
.nl-warn p { margin: 0 0 4px; }

/* Super Admin › Newsletter › Atelier GIF */
.nl-head-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.gif-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .gif-grid { grid-template-columns: 290px minmax(0, 1fr); } }
.gif-side h3 { margin-bottom: 10px; }
.gif-side textarea { width: 100%; }
.gif-presets { display: grid; gap: 4px; }
.gif-group { font: 700 .72rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, var(--ink-2)); margin: 12px 0 4px; }
.gif-group:first-child { margin-top: 0; }
.gif-preset { text-align: left; border: 1px solid transparent; background: transparent; color: var(--ink-2); padding: 8px 12px; border-radius: 10px; font: 600 .9rem var(--font); cursor: pointer; }
.gif-preset:hover { background: var(--bg-2); color: var(--ink); }
.gif-preset[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold); border-color: rgba(248, 194, 92, .45); }
.gif-stage { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.gif-stage canvas { display: block; width: 100%; height: auto; cursor: pointer; }
.gif-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.gif-fields { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .gif-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gif-fields .gif-wide { grid-column: 1 / -1; } }
.gif-fields input, .gif-fields textarea { width: 100%; }
.gif-make { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gif-lib { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gif-card { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.gif-card img { display: block; width: 100%; height: auto; }
.gif-card figcaption { padding: 10px 12px 12px; display: grid; gap: 4px; }
.gif-card-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nl-gif-pick { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nl-gif-pick > div { background: var(--surface, var(--bg)); border: 1px solid var(--line); border-radius: 18px; padding: 18px; width: min(860px, 100%); max-height: 86vh; overflow: auto; }
.nl-gif-pick .gif-lib { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 12px; }
.nl-gif-pick .gif-card { cursor: pointer; text-align: left; padding: 0; color: inherit; font: inherit; }
.nl-gif-pick .gif-card:hover { border-color: var(--gold); }
.gif-ask { display: flex; gap: 8px; }
.gif-ask input { flex: 1; min-width: 0; }
.gif-plan summary { cursor: pointer; font: 600 .86rem var(--font); color: var(--ink-2); }
.gif-plan textarea { width: 100%; margin-top: 8px; font-size: .78rem; }

/* =========================================================
   Projets à financer (app/fund.php) : page du projet (.fd-*), liste des projets (.fds-*),
   espace artiste (.fdx-*). La jauge .fd-bar sert partout ; .fd-anim attend d'être à l'écran.
   ========================================================= */
.fd { max-width: 1120px; margin: 0 auto; padding: 18px 16px 96px; }
.fd-draft { margin-bottom: 16px; }
.fd-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "gauge" "story" "rewards" "more"; }
.fd-head { grid-area: head; }
.fd-media { grid-area: media; }
.fd-story { grid-area: story; min-width: 0; }
.fd-more { grid-area: more; min-width: 0; }
.fd-side { display: contents; }
.fd-gauge { grid-area: gauge; }
.fd-rewards { grid-area: rewards; }
@media (min-width: 960px) {
  .fd { padding-top: 28px; }
  .fd-grid { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); column-gap: 28px; grid-template-areas: "head ." "media side" "story side" "more side"; align-items: start; }
  .fd-side { display: flex; flex-direction: column; gap: 18px; grid-area: side; min-width: 0; }
}
.fd-by { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink-2); font-size: .92rem; margin-bottom: 10px; }
.fd-by .avatar { width: 30px; height: 30px; font-size: .8rem; }
.fd-by b { color: var(--ink); }
.fd-title { font-size: clamp(1.9rem, 5vw, 3rem); margin: 0 0 8px; }
.fd-pitch { font-size: 1.12rem; color: var(--ink-2); margin: 0; max-width: 46em; }
.fd-media { border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); aspect-ratio: 16 / 9; box-shadow: var(--shadow); }
.fd-media img { width: 100%; height: 100%; object-fit: cover; }
.fd-video, .fd-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.fd-noimg { width: 100%; height: 100%; display: grid; place-items: center; background: var(--grad-soft); position: relative; }
.fd-noimg > span { position: absolute; right: 18px; bottom: 12px; font-size: 2.6rem; }

/* La jauge */
.fd-gauge { padding: 22px 20px 20px; position: relative; overflow: hidden; }
.fd-gauge::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.fd-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(61, 214, 140, .14); color: var(--success); font-weight: 800; font-size: .82rem; margin-bottom: 12px; }
.fd-badge.is-muted { background: var(--surface-3); color: var(--ink-2); }
.fd-raised { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.fd-raised b { font: 800 clamp(2rem, 6vw, 2.6rem)/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fd-raised > span { color: var(--muted); font-size: .95rem; }
.fd-bar { position: relative; display: block; height: 14px; border-radius: 999px; background: var(--surface-3); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.fd-bar-sm { height: 8px; }
.fd-fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit; background: var(--grad); animation: fd-grow 1.3s var(--ease) both; overflow: hidden; }
.fd-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); transform: translateX(-100%); animation: fd-shine 2.8s 1.4s ease-in-out infinite; }
.fd-anim .fd-fill { width: 0; animation: none; }
.fd-anim.is-in .fd-fill { width: var(--w, 0%); animation: fd-grow 1.4s var(--ease) both; }
.fd-bar.is-over .fd-fill, .is-over > .fd-bar .fd-fill { background: linear-gradient(100deg, #3DD68C 0%, #8BE07A 45%, #F8C25C 100%); }
.fd-tick { position: absolute; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(255, 255, 255, .22); z-index: 1; }
.fd-tick.is-on { background: rgba(27, 18, 6, .35); }
@keyframes fd-grow { from { width: 0; } }
@keyframes fd-shine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .fd-fill, .fd-anim.is-in .fd-fill { animation: none; } .fd-fill::after { display: none; } }
.fd-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; margin: 16px 0 14px; }
.fd-stats > div { display: flex; flex-direction: column; min-width: 0; }
.fd-stats b { font: 800 1.35rem/1.15 var(--display); font-variant-numeric: tabular-nums; }
.fd-stats small { color: var(--muted); font-size: .8rem; line-height: 1.25; }
.fd-hot { display: flex; align-items: center; gap: 6px; margin: -2px 0 14px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 79, 121, .1); color: var(--ink-2); font-size: .88rem; }
.fd-hot b { color: var(--pink); }
.fd-share { margin-top: 8px; gap: 8px; }
.fd-note { display: flex; gap: 10px; margin: 14px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.fd-end { font-size: .95rem; color: var(--ink-2); margin: 0 0 12px; }

/* Contreparties */
.fd-h2 { font-size: 1.3rem; margin: 0 0 12px; }
.fd-rewards { display: flex; flex-direction: column; gap: 12px; }
.fd-rewards .fd-h2 { margin-bottom: 0; }
.fd-rw { padding: 16px 18px; transition: border-color .2s, transform .2s var(--ease); }
.fd-rw:hover { border-color: rgba(248, 194, 92, .4); }
.fd-rw.is-out { opacity: .6; }
.fd-rw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.fd-rw-amt b { font: 800 1.25rem var(--display); color: var(--gold); }
.fd-rw-amt small { color: var(--muted); }
.fd-rw-left { font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); white-space: nowrap; }
.fd-rw-left.is-out { background: var(--surface-3); color: var(--muted); }
.fd-rw h3 { font-size: 1.05rem; margin: 0 0 6px; }
.fd-rw p { margin: 0 0 8px; font-size: .92rem; }
.fd-rw-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); }
.fd-rw-go { margin-top: 4px; }

/* Présentation, budget, nouvelles, contributeurs */
.fd-sec { margin-bottom: 26px; }
.fd-sec.card { padding: 20px; }
.fd-text { font-size: 1.04rem; line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.fd-text p { margin: 0 0 1em; }
.fd-uses-bar { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.fd-uses-bar i { display: block; min-width: 6px; }
.fd-uses-bar[hidden] { display: none; }
.fd-uses-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.fd-uses-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 46px; align-items: center; gap: 10px; font-size: .95rem; }
.fd-uses-list li > i { width: 12px; height: 12px; border-radius: 4px; }
.fd-uses-list small { color: var(--muted); text-align: right; }
.fd-news { display: flex; flex-direction: column; gap: 14px; }
.fd-new { border-left: 3px solid var(--line-2); padding: 2px 0 2px 16px; }
.fd-new.is-goal { border-left-color: var(--success); }
.fd-new time { font-size: .8rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fd-new h3 { margin: 4px 0 6px; font-size: 1.1rem; }
.fd-new .fd-text { font-size: .98rem; }
.fd-wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fd-wall li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.fd-av { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: #1B1206; }
.fd-wall-txt { display: flex; flex-direction: column; min-width: 0; font-size: .9rem; }
.fd-wall-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-wall-txt small { color: var(--muted); font-size: .76rem; }
.fd-wall-txt q { margin-top: 4px; color: var(--ink-2); font-style: italic; overflow-wrap: anywhere; }
.fd-empty { padding: 26px 18px; }
.fd-artist { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; }
.fd-artist > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fd-artist small { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.fd-artist b { font: 700 1.15rem var(--display); }
.fd-artist .ink2 { font-size: .88rem; }

/* Barre « Contribuer » du téléphone */
.fd-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); }
.fd-sticky[hidden] { display: none; }
.fd-sticky > div { display: flex; flex-direction: column; min-width: 0; }
.fd-sticky b { font: 800 1.15rem var(--display); }
.fd-sticky small { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) { .fd-sticky { display: none !important; } }
.has-chat .fd-sticky { padding-right: 96px; }

/* Fenêtre de contribution */
.fd-pick { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.fd-pick legend, .fd-addr legend { font-weight: 700; font-size: .93rem; margin-bottom: 8px; padding: 0; }
.fd-opt { position: relative; cursor: pointer; display: block; }
.fd-opt input { position: absolute; opacity: 0; pointer-events: none; }
.fd-opt > span { display: flex; flex-direction: column; padding: 11px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface-2); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.fd-opt b { font-size: .95rem; }
.fd-opt small { color: var(--muted); font-size: .82rem; }
.fd-opt input:checked + span { border-color: var(--gold); background: var(--grad-soft); box-shadow: 0 0 0 3px rgba(248, 194, 92, .16); }
.fd-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.fd-opt.is-out { opacity: .5; cursor: not-allowed; }
.fd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fd-chips .chip { min-height: 38px; font-size: .92rem; }
.chip.is-on { border-color: var(--gold); background: var(--grad-soft); }
.fd-addr { border: 1px solid var(--line-2); border-radius: 16px; padding: 14px; margin: 0 0 16px; }
.fd-addr[hidden] { display: none; }

/* Encart sur la page de l'artiste */
.fd-card { display: block; padding: 0; overflow: hidden; text-decoration: none; margin: 18px 0; border-color: rgba(248, 194, 92, .3); }
.fd-card:hover { color: inherit; border-color: rgba(248, 194, 92, .55); }
.fd-card-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fd-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.fd-card-k { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.fd-card-t { font: 800 1.35rem/1.2 var(--display); }
.fd-card-meta { font-size: .88rem; color: var(--muted); margin-top: 2px; }
.fd-card-meta b { color: var(--ink); }
.fd-card .fd-bar { margin-top: 6px; }
.fd-thanks { margin: 4px 0 14px; }
.fd-thanks p { margin: 8px 0 0; color: var(--ink-2); }

/* Liste des projets */
.fds { padding-top: 26px; padding-bottom: 60px; }
.fds-head { max-width: 720px; margin-bottom: 22px; }
.fds-head h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.fds-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fds-card { padding: 0; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .2s var(--ease), border-color .2s; }
.fds-card:hover { color: inherit; transform: translateY(-2px); border-color: rgba(248, 194, 92, .4); }
.fds-img { aspect-ratio: 16 / 9; background: var(--grad-soft); display: grid; place-items: center; font-size: 2.4rem; }
.fds-img img { width: 100%; height: 100%; object-fit: cover; }
.fds-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fds-by { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-2); }
.fds-by .avatar { width: 24px; height: 24px; font-size: .7rem; }
.fds-body h2 { font-size: 1.2rem; margin: 0; }
.fds-body p { margin: 0; font-size: .9rem; }
.fds-body .fd-bar { margin-top: auto; }
.fds-meta { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; color: var(--muted); }
.fds-meta > b { color: var(--ink); }

/* Espace artiste */
.fdx-intro h2 { font-size: 1.5rem; }
.fdx-steps { list-style: none; padding: 0; margin: 16px 0 18px; display: grid; gap: 12px; }
@media (min-width: 900px) { .fdx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fdx-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.fdx-steps li > span { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-grad); font-weight: 800; }
.fdx-steps b { display: block; }
.fdx-steps small { color: var(--muted); }
.fdx-facts p { display: flex; gap: 10px; margin: 0 0 10px; color: var(--ink-2); }
.fdx-facts p:last-child { margin-bottom: 0; }
.fdx-intro .fdx-facts { margin-bottom: 20px; }
.fdx-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.fdx-thumb { width: 96px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--grad-soft); display: grid; place-items: center; font-size: 1.6rem; }
.fdx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fdx-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fdx-title { font-size: 1.05rem; }
.fdx-acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 760px) { .fdx-row { grid-template-columns: 110px minmax(0, 1fr) auto; } .fdx-thumb { width: 110px; } .fdx-acts { grid-column: auto; justify-content: flex-end; } }
.fdx-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .fdx-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); } .fdx-aside { position: sticky; top: calc(var(--header-h) + 16px); } }
.fdx-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fdx-form h3 { margin-bottom: 14px; }
.fdx-days { display: flex; gap: 6px; flex-wrap: wrap; }
.fdx-days label { position: relative; cursor: pointer; }
.fdx-days input { position: absolute; opacity: 0; pointer-events: none; }
.fdx-days span { display: flex; align-items: baseline; gap: 4px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface-2); }
.fdx-days small { color: var(--muted); }
.fdx-days input:checked + span { border-color: var(--gold); background: var(--grad-soft); }
.fdx-days input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.fdx-drop { min-height: 140px; }
.fdx-drop .dz-preview { max-height: 200px; width: auto; border-radius: 10px; }
.fdx-hints { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.fdx-hints span { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); }
.fdx-rw { padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); }
.fdx-rw .field { margin-bottom: 12px; }
@media (max-width: 560px) { .fdx-rw .form-row { grid-template-columns: minmax(0, 1fr) !important; } }
.fdx-use { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
.fdx-save { display: flex; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(180deg, transparent, var(--bg) 40%); z-index: 2; }
.fdx-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fdx-preview { padding: 0; overflow: hidden; }
.fdx-pv-img { aspect-ratio: 16 / 9; background: var(--grad-soft); display: grid; place-items: center; font-size: 2rem; }
.fdx-pv-img img { width: 100%; height: 100%; object-fit: cover; }
.fdx-pv-t { font: 800 1.15rem/1.25 var(--display); display: block; }
.fdx-check ul { list-style: none; margin: 10px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fdx-check li { display: flex; gap: 8px; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
.fdx-check li.is-must { color: var(--ink); }
.fdx-live { margin-bottom: 16px; border-color: rgba(61, 214, 140, .35); background: rgba(61, 214, 140, .06); }
.fdx-sum-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.fdx-sum-top > div { display: flex; flex-direction: column; }
.fdx-big { font: 800 clamp(1.9rem, 5vw, 2.4rem)/1.05 var(--display); }
.fdx-pct { font: 800 1.4rem var(--display); color: var(--gold); }
.fdx-pct.is-over { color: var(--success); }
.fdx-stat { display: block; font: 800 1.5rem/1.2 var(--display); margin-top: 2px; }
.fdx-pl { padding: 14px 16px; }
.fdx-pl.is-refunded { opacity: .6; }
.fdx-pl-top { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.fdx-pl-amt { font: 800 1.15rem var(--display); color: var(--gold); min-width: 82px; }
.fdx-pl-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fdx-pl-who small { overflow-wrap: anywhere; }
.fdx-pl-rw { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: .92rem; }
.fdx-pl-addr { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-3); color: var(--ink-2); }
.fdx-pl-msg { display: block; margin-top: 8px; color: var(--ink-2); font-style: italic; }
.fdx-news { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fdx-news li { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fdx-news li:last-child { border-bottom: 0; padding-bottom: 0; }
.fdx-aside .fdx-news li { flex-direction: column; }
.fdx-aside .card .fdx-news li:has(> b:last-child) { flex-direction: row; justify-content: space-between; align-items: center; }
[data-theme="light"] .fd-tick { background: rgba(40, 24, 56, .18); }
[data-theme="light"] .fd-bar { box-shadow: inset 0 1px 2px rgba(40, 24, 56, .12); }
[data-theme="light"] .fd-sticky { box-shadow: 0 -10px 30px rgba(40, 24, 56, .12); }

/* Projets à financer, v51 : chanson du projet, paliers, Fans fondateurs, assistant d'écriture, suivi */
.fd-grid { grid-template-areas: "head" "media" "gauge" "story" "rewards" "stretch" "more"; }
.fd-stretch-wrap { grid-area: stretch; min-width: 0; }
@media (min-width: 960px) { .fd-grid { grid-template-areas: "head ." "media side" "story side" "stretch side" "more side"; } }
.fd-next, .fd-founders { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: .9rem; color: var(--ink-2); }
.fd-next b { color: var(--success); }
.fd-founders b { color: var(--gold); }
.fd-fbadge { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-weight: 700; font-size: .7rem; }
.fd-fnote { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--gold-soft); border: 1px solid rgba(248, 194, 92, .25); font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.fd-song { display: flex; gap: 14px; align-items: center; padding: 14px; margin-bottom: 22px; }
.fd-song .cover { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 14px; }
.fd-song-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.fd-song-txt small { color: var(--gold); font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.fd-song-txt b { font: 700 1.1rem var(--display); }
.fd-song audio { width: 100%; height: 36px; }
.fd-stretch ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fd-stretch li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.fd-stretch li b { font: 800 1rem var(--display); color: var(--ink); }
.fd-stretch li.is-on { border-color: rgba(61, 214, 140, .4); background: rgba(61, 214, 140, .08); }
.fd-stretch li.is-on b::before { content: "✓ "; color: var(--success); }
.fd-card-song { border-color: rgba(169, 139, 255, .45); margin: 0 0 14px; }
.fdx-ai summary { cursor: pointer; list-style: none; }
.fdx-ai summary::-webkit-details-marker { display: none; }
.fdx-ai summary::after { content: " ▾"; color: var(--muted); }
.fdx-ai details[open] summary::after { content: " ▴"; }
.fdx-qn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: var(--on-grad); font-size: .75rem; font-weight: 800; margin-right: 4px; }
.fdx-script { margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-2); }
.fdx-script[hidden] { display: none; }
.fdx-script ol { margin: 12px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.fdx-sc-h { display: flex; flex-direction: column; }
.fdx-sc-h small { color: var(--muted); font-size: .78rem; }
.fdx-script p { margin: 4px 0 0; color: var(--ink-2); line-height: 1.6; white-space: pre-line; }
.fdx-plan summary { cursor: pointer; }
.fdx-plan ol { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.fdx-plan b { color: var(--ink); }
.fdx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (min-width: 760px) { .fdx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fdx-kpis > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; }
.fdx-kpis b { font: 800 1.3rem var(--display); }
.fdx-kpis small { color: var(--muted); font-size: .8rem; }
.fdx-invite { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--grad-soft); }
.fdx-invite > div { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; }
.fdx-invite small { color: var(--ink-2); }
/* ---------- Super Admin : projets à financer (views/admin/funds.php, fund.php) ---------- */
.fda-gauge { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.fda-gauge-lg b { font: 800 1.7rem/1.1 var(--display); }
.fda-pct { margin-left: auto; font-weight: 800; color: var(--accent, #F8C25C); }
.fda-pct.is-over { color: #3DD68C; }
.fda-card { padding: 20px 22px; }
.fda-table td { vertical-align: middle; }
.stra-due { margin: 0; padding-left: 16px; }
.stra-due li { margin: 2px 0; }
.stra-due li.is-err { color: var(--danger, #e5484d); font-weight: 600; }
.stra-blk { color: var(--danger, #e5484d); }
.pb-dash { display: inline-block; margin: 4px 0 2px; color: var(--danger, #e5484d); }
a.stat { color: inherit; text-decoration: none; }
a.stat:hover { border-color: var(--line-2); }