/* Sites d'artistes générés — six ambiances sur une même structure. */
.tpl-club {
  --a-bg: #0b0b10; --a-bg2: #13121c; --a-ink: #f4f2fb; --a-muted: #a4a0b8; --a-line: #26243a;
  --a-acc: #ff3d9a; --a-acc2: #22d3ee; --a-on-acc: #0b0b10;
  --a-display: "Syne", "Helvetica Neue", Arial, sans-serif; --a-display-w: 700; --a-case: none; --a-track: -0.02em;
  --a-body: "Instrument Sans", system-ui, sans-serif;
}
.tpl-acoustique {
  --a-bg: #fbfaf7; --a-bg2: #eef1ec; --a-ink: #22281f; --a-muted: #5f6a5e; --a-line: #dbe0d7;
  --a-acc: #3f6650; --a-acc2: #b08a4f; --a-on-acc: #ffffff;
  --a-display: "Cormorant Garamond", Georgia, serif; --a-display-w: 600; --a-case: none;
  --a-body: "Instrument Sans", system-ui, sans-serif;
}
.tpl-organique {
  --a-bg: #f3ebde; --a-bg2: #e8dcc8; --a-ink: #2e2419; --a-muted: #6e5d49; --a-line: #d6c6ad;
  --a-acc: #9a5a26; --a-acc2: #6f7d3a; --a-on-acc: #fff8ef;
  --a-display: "Young Serif", Georgia, serif; --a-display-w: 400; --a-case: none;
  --a-body: "Instrument Sans", system-ui, sans-serif;
}
.tpl-studio {
  --a-bg: #f3f3f0; --a-bg2: #e7e7e2; --a-ink: #121212; --a-muted: #5c5c58; --a-line: #d4d4cd;
  --a-acc: #e2401c; --a-acc2: #e2401c; --a-on-acc: #ffffff;
  --a-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif; --a-display-w: 600; --a-case: none; --a-track: -0.03em;
  --a-body: "Instrument Sans", system-ui, sans-serif;
}
.tpl-vinyle {
  --a-bg: #2a1216; --a-bg2: #36181d; --a-ink: #f6e7d0; --a-muted: #c9b29a; --a-line: #4d2a2f;
  --a-acc: #e9a53b; --a-acc2: #e9a53b; --a-on-acc: #2a1216;
  --a-display: "DM Serif Display", Georgia, serif; --a-display-w: 400; --a-case: none;
  --a-body: "Instrument Sans", system-ui, sans-serif;
}
.tpl-lagon {
  --a-bg: #0e2a31; --a-bg2: #12343c; --a-ink: #e7f4f1; --a-muted: #9fc0ba; --a-line: #1f4a52;
  --a-acc: #7fd6c6; --a-acc2: #f2c48d; --a-on-acc: #0e2a31;
  --a-display: "Bricolage Grotesque", system-ui, sans-serif; --a-display-w: 500; --a-case: none; --a-track: -0.02em;
  --a-body: "Instrument Sans", system-ui, sans-serif;
}

.tpl-encre {
  --a-bg: #0f1424; --a-bg2: #161d33; --a-ink: #eef1fb; --a-muted: #9aa3c2; --a-line: #253054;
  --a-acc: #ffd23f; --a-acc2: #5b8cff; --a-on-acc: #0f1424;
  --a-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --a-display-w: 700; --a-case: uppercase; --a-track: -0.01em;
  --a-body: "Instrument Sans", system-ui, sans-serif;
}
.tpl-aurore {
  --a-bg: #fff3ee; --a-bg2: #fde4da; --a-ink: #2b1a22; --a-muted: #7a5a62; --a-line: #f1cfc3;
  --a-acc: #e8505b; --a-acc2: #f59e6b; --a-on-acc: #ffffff;
  --a-display: "Fraunces", Georgia, serif; --a-display-w: 600; --a-case: none; --a-track: -0.02em;
  --a-body: "Work Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.artiste { background: var(--a-bg); color: var(--a-ink); font: 400 17px/1.6 var(--a-body); min-height: 100vh; overflow-x: hidden; }
.artiste img { max-width: 100%; height: auto; display: block; }
#wpadminbar img.site-icon, #wpadminbar img.blavatar, #wpadminbar #wp-admin-bar-site-name img, #wpadminbar #wp-admin-bar-wp-logo img { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; display: inline-block !important; vertical-align: middle; object-fit: contain; }
#wpadminbar img.avatar { width: 16px !important; height: 16px !important; display: inline-block !important; max-width: none !important; }
#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper img.avatar { width: 64px !important; height: 64px !important; }
.artiste a { color: inherit; }
.artiste h1, .artiste h2, .artiste h3 { font-family: var(--a-display); font-weight: var(--a-display-w); text-transform: var(--a-case); line-height: 1; margin: 0; text-wrap: balance; letter-spacing: var(--a-track, 0); }
.artiste p { margin: 0; }
.a-wrap { max-width: 1080px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.a-bar { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px clamp(16px, 4vw, 32px); background: #ffb21e; color: #1b1300; font: 600 14px/1.3 "Instrument Sans", system-ui, sans-serif; }
.a-bar a { background: #1b1300; color: #fff; text-decoration: none; padding: 9px 14px; border-radius: 99px; white-space: nowrap; }
.a-bar--ok { background: #c9f2dc; color: #0f3a24; }
/* v1.1 : sélecteur d'ambiances des sites exemples */
.a-bar--demo { padding-block: 8px; }
.a-switch { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.a-switch::-webkit-scrollbar { display: none; }
.a-switch-label { margin-right: 6px; font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.a-bar .a-switch button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border: 0; border-radius: 99px; background: transparent; color: #1b1300; font: 600 13px/1 "Instrument Sans", system-ui, sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(27, 19, 0, .2); transition: background-color .2s, box-shadow .2s, transform .2s; }
.a-bar .a-switch button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px rgba(27, 19, 0, .55); }
.a-bar .a-switch button[aria-pressed="true"] { background: #1b1300; color: #fff; box-shadow: none; }
.a-switch i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
@media (max-width: 719px) { .a-switch-label { display: none; } .a-bar .a-switch button { padding: 4px; } .a-switch button span { display: none; } .a-switch i { width: 22px; height: 22px; } }
.a-bar:has(.a-amb) { flex-wrap: wrap; }
.a-amb { display: flex; gap: 6px; width: 100%; overflow-x: auto; scrollbar-width: none; }
.a-bar .a-amb a { background: transparent; color: #1b1300; box-shadow: inset 0 0 0 1.5px rgba(27, 19, 0, .35); padding: 6px 12px; font-size: 13px; }
.a-bar .a-amb a[aria-current="true"] { background: #1b1300; color: #fff; box-shadow: none; }

.a-nav { position: absolute; z-index: 5; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 4vw, 32px); color: #fff; }
.a-logo { font: var(--a-display-w) 26px/1 var(--a-display); text-transform: var(--a-case); text-decoration: none; letter-spacing: .02em; }
.a-nav nav { display: none; gap: 22px; font-size: 15px; }
.a-nav nav a { text-decoration: none; opacity: .85; }
.a-nav nav a:hover { opacity: 1; }
@media (min-width: 720px) { .a-nav nav { display: flex; } }

.a-hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; color: #fff; background: var(--a-bg2); }
.artiste .a-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.a-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.75) 100%); }
.a-hero-in { position: relative; z-index: 2; width: 100%; max-width: 1080px; margin-inline: auto; padding: 120px clamp(16px, 4vw, 32px) clamp(32px, 6vw, 64px); }
.a-kicker { font: 500 13px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.a-hero h1 { font-size: clamp(56px, 14vw, 156px); line-height: .95; margin-top: 10px; }
.tpl-acoustique .a-hero h1, .tpl-organique .a-hero h1 { font-size: clamp(60px, 14vw, 150px); }
.a-tag { margin-top: 14px; font-size: clamp(18px, 2.4vw, 22px); max-width: 30em; }
.a-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.a-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.5em; border-radius: 99px; background: var(--a-acc); color: var(--a-on-acc); border: 0; font: 600 16px var(--a-body); text-decoration: none; cursor: pointer; }
.a-btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.tpl-club .a-btn { box-shadow: 0 0 24px -4px var(--a-acc); }
.tpl-club .a-btn--line { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }

.a-sec { padding-block: clamp(56px, 9vw, 110px); }
.a-sec--alt { background: var(--a-bg2); }
.a-sec--flush { padding-block: 0; }
.a-sec h2 { font-size: clamp(42px, 7vw, 76px); margin-top: 8px; }
.a-eyebrow { font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--a-acc); }
.tpl-club .a-eyebrow { color: var(--a-acc2); }
.a-split { display: grid; gap: 28px; }
@media (min-width: 860px) { .a-split { grid-template-columns: .8fr 1.2fr; gap: 56px; } }
.a-prose { display: grid; gap: 1em; max-width: 38em; font-size: 18px; }
.a-prose blockquote { margin: .5em 0 0; padding-left: 18px; border-left: 3px solid var(--a-acc); font-family: var(--a-display); font-size: 24px; line-height: 1.25; text-transform: none; }

.a-embed { margin-top: 28px; border-radius: 14px; overflow: hidden; }
.a-embed iframe { width: 100%; display: block; border: 0; }
.a-video iframe { aspect-ratio: 16 / 9; height: auto; }
.a-player { margin-top: 28px; display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 16px; background: var(--a-bg2); border: 1px solid var(--a-line); }
.a-play { width: 56px; height: 56px; border-radius: 50%; background: var(--a-acc); flex: none; position: relative; }
.a-play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 16px solid var(--a-on-acc); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.a-wave { flex: 1; height: 44px; background: repeating-linear-gradient(90deg, var(--a-muted) 0 3px, transparent 3px 7px); -webkit-mask: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask: radial-gradient(ellipse 60% 50% at 40% 50%, #000 40%, transparent 100%); opacity: .7; }
.a-note { margin-top: 10px; font-size: 14px; color: var(--a-muted); }
.a-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.a-pill { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--a-line); text-decoration: none; font-size: 15px; }

.a-dates { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--a-line); }
.a-dates li { display: grid; grid-template-columns: 7.5em 1fr; gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid var(--a-line); align-items: baseline; }
.a-dates time { font: 500 14px "JetBrains Mono", ui-monospace, monospace; color: var(--a-acc); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.tpl-club .a-dates time { color: var(--a-acc2); }
.a-dates b { font-family: var(--a-display); font-weight: var(--a-display-w); text-transform: var(--a-case); font-size: 26px; line-height: 1.1; }
.a-dates span { grid-column: 2; color: var(--a-muted); font-size: 15px; }
@media (min-width: 720px) { .a-dates li { grid-template-columns: 9em 1fr auto; } .a-dates span { grid-column: auto; } }

.a-cards { display: grid; gap: 14px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.a-cards article { padding: 22px; border-radius: 16px; background: var(--a-bg); border: 1px solid var(--a-line); display: grid; gap: 8px; align-content: start; }
.a-cards h3 { font-size: 28px; }
.a-cards p { color: var(--a-muted); font-size: 16px; }

.a-refs, .a-members, .a-roster { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--a-display); font-weight: var(--a-display-w); text-transform: var(--a-case); font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; }
.a-refs li:not(:last-child)::after { content: " /"; color: var(--a-acc); margin-left: 14px; }

.a-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
@media (min-width: 860px) { .a-gallery { grid-template-columns: repeat(3, 1fr); } }
.a-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.a-pitch { margin-top: 18px; font-size: 18px; max-width: 30em; }
.a-direct { margin-top: 18px; font: 500 15px/1.7 "JetBrains Mono", ui-monospace, monospace; color: var(--a-muted); overflow-wrap: anywhere; }
.a-form { display: grid; gap: 14px; }
.a-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.a-form input, .a-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--a-line); background: var(--a-bg2); color: var(--a-ink); font: 400 16px var(--a-body); }
.a-form textarea { min-height: 120px; }
.a-form input:focus, .a-form textarea:focus { outline: none; border-color: var(--a-acc); }
.a-form .a-btn { justify-self: start; }

.a-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 28px clamp(16px, 4vw, 32px); border-top: 1px solid var(--a-line); color: var(--a-muted); font-size: 14px; }
.a-locked { padding-block: 120px; }

/* Filigrane de l'aperçu */
.is-watermark::after {
  content: ""; position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220'%3E%3Ctext x='20' y='130' transform='rotate(-24 180 110)' font-family='Arial,sans-serif' font-size='44' font-weight='700' fill='%23888'%3EAPER%C3%87U%3C/text%3E%3C/svg%3E");
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--a-acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
html { scroll-behavior: smooth; }

/* Animations : entrée du hero, apparition au défilement, survols. Désactivées si l'utilisateur réduit les animations. */
.a-gallery figure { margin: 0; overflow: hidden; }
@media (max-width: 859px) { .a-gallery figure:first-child { grid-column: span 2; } .a-gallery figure:first-child img { aspect-ratio: 2 / 1; } }
@media (prefers-reduced-motion: no-preference) {
  .artiste .a-hero { overflow: hidden; }
  .artiste .a-hero-img { animation: bk-zoom 14s cubic-bezier(.2, .6, .2, 1) both; will-change: transform; }
  .a-hero-in > * { animation: bk-rise 1s cubic-bezier(.2, .7, .2, 1) both; }
  .a-hero-in > :nth-child(2) { animation-delay: .12s; }
  .a-hero-in > :nth-child(3) { animation-delay: .24s; }
  .a-hero-in > :nth-child(4) { animation-delay: .36s; }
  .a-nav { animation: bk-fade 1.2s .2s both; }
  .bk-anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
  .bk-anim .reveal.is-in { opacity: 1; transform: none; }
  .bk-anim .a-gallery figure.reveal { transform: scale(.96); }
  .bk-anim .a-gallery figure.reveal.is-in { transform: none; }
  .a-gallery img { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
  .a-gallery figure:hover img { transform: scale(1.06); }
  .a-btn { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, filter .3s; }
  .a-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
  .a-cards article:hover { border-color: var(--a-acc); }
  .a-pill { transition: border-color .3s; }
  .a-pill:hover { border-color: var(--a-acc); }
}
@keyframes bk-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes bk-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }

/* v0.4 : titres plus sobres, hero sans photo, contact retravaillé */
.a-sec h2 { font-size: clamp(36px, 5.6vw, 64px); }
.a-hero--nophoto { color: var(--a-ink); background: radial-gradient(ellipse at 78% 18%, color-mix(in srgb, var(--a-acc) 45%, transparent), transparent 60%), radial-gradient(ellipse at 12% 88%, color-mix(in srgb, var(--a-acc2) 32%, transparent), transparent 55%), var(--a-bg2); }
.a-hero--nophoto::after { background: none; }
.a-hero--nophoto .a-btn--line { color: var(--a-ink); box-shadow: inset 0 0 0 1.5px var(--a-line); }
.artiste:has(.a-hero--nophoto) .a-nav { color: var(--a-ink); }
.a-photo-note { margin-top: 22px; font: 500 12px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.a-contact .a-split { align-items: start; }
.a-channels { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--a-line); }
.a-channels li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--a-line); align-items: baseline; }
.a-channels span { font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); }
.a-channels a, .a-channels b { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.a-channels a:hover { color: var(--a-acc); }
.a-form { padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: var(--a-bg2); border: 1px solid var(--a-line); }
.a-form input, .a-form textarea { background: var(--a-bg); }
.a-form label { font-weight: 500; color: var(--a-muted); }
.a-form-row { display: grid; gap: 14px; }
@media (min-width: 600px) { .a-form-row { grid-template-columns: 1fr 1fr; } }
.a-form .a-btn { width: 100%; }
.artiste .a-btn { color: var(--a-on-acc); }
.artiste .a-btn--line { color: inherit; }

/* v0.7 : menu collant, retour en haut */
.artiste .a-sec, .artiste .a-hero { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 60px); }
@media (prefers-reduced-motion: no-preference) { html:has(.artiste) { scroll-behavior: smooth; } }
.a-nav.is-stuck { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); z-index: 25; padding-block: 8px; color: var(--a-ink); background: color-mix(in srgb, var(--a-bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--a-line); animation: bk-drop .35s cubic-bezier(.2, .7, .2, 1) both; }
.a-nav.is-stuck .a-logo { font-size: 20px; flex-shrink: 0; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-nav.is-stuck nav { display: flex; gap: 16px; font-size: 14px; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.a-nav.is-stuck nav::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .a-nav.is-stuck nav { font-size: 15px; gap: 22px; } }
@keyframes bk-drop { from { transform: translateY(-100%); } to { transform: none; } }
.a-totop { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 39; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--a-ink); color: var(--a-bg); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.a-totop.is-on { opacity: 1; pointer-events: auto; transform: none; }
.a-totop svg { width: 20px; height: 20px; }
.artiste:has(.bk-perso-btn) .a-totop { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

/* v0.6 : panneau « Personnaliser » */
.bk-perso-btn { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; padding: 14px 20px; border-radius: 99px; border: 0; background: #17151f; color: #fff; font: 600 15px "Instrument Sans", system-ui, sans-serif; box-shadow: 0 0 0 2px #ffb21e, 0 12px 30px -8px rgba(0, 0, 0, .55); cursor: pointer; }
.bk-perso { position: fixed; z-index: 41; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: min(392px, calc(100vw - 32px)); max-height: min(72vh, 640px); overflow-y: auto; padding: 18px; border-radius: 20px; background: #17151f; color: #f4f2fb; font: 400 14px/1.4 "Instrument Sans", system-ui, sans-serif; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65); }
.bk-perso[hidden] { display: none; }
.bk-perso-head { display: flex; justify-content: space-between; align-items: center; }
.bk-perso-head b { font-size: 17px; }
.bk-perso-head button { background: none; border: 0; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.bk-perso-label { margin: 16px 0 8px; font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #a4a0b8; }
.bk-perso-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.bk-perso-row button { display: grid; gap: 6px; justify-items: center; padding: 8px 4px; border-radius: 12px; border: 1.5px solid #2d2a3c; background: #1f1d2b; color: inherit; font: inherit; cursor: pointer; transition: border-color .2s, transform .2s; }
.bk-perso-row button:hover { transform: translateY(-1px); }
.bk-perso-row button[aria-pressed="true"] { border-color: #ffb21e; box-shadow: inset 0 0 0 1px #ffb21e; }
.bk-perso-row i { display: block; width: 100%; height: 30px; border-radius: 8px; }
.bk-perso-row small { font-size: 11px; color: #c9c5d8; }
.bk-perso-row span { font-size: 24px; line-height: 30px; height: 30px; }
.bk-perso-row--acc { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
.bk-perso-row--acc button { padding: 5px; border-radius: 50%; aspect-ratio: 1; }
.bk-perso-row--acc i { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.bk-auto { background: conic-gradient(#ff3d9a, #e9a53b, #3f6650, #22d3ee, #7c5cff, #ff3d9a); }
.bk-li { position: relative; overflow: hidden; background: #3a3650; }
.bk-li--plein { background: linear-gradient(160deg, #7a6cff, #ff7aa8); }
.bk-li--split { background: linear-gradient(90deg, #3a3650 50%, #7a6cff 50%); }
.bk-li--cadre::after { content: ""; position: absolute; right: 14%; top: 14%; width: 32%; height: 72%; border-radius: 3px; background: linear-gradient(160deg, #7a6cff, #ff7aa8); rotate: 4deg; }
.bk-perso-note { color: #a4a0b8; font-size: 13px; margin: 0; }
.bk-perso-save { margin-top: 18px; width: 100%; padding: 14px; border: 0; border-radius: 99px; background: #ffb21e; color: #1b1300; font: 600 15px "Instrument Sans", system-ui, sans-serif; cursor: pointer; }
.bk-perso-msg { display: block; margin-top: 8px; color: #c9c5d8; min-height: 1em; }

/* v0.5 : ordre des sections selon l'objectif */
.a-main { display: flex; flex-direction: column; }
.a-obj-mariages #prestations { order: -1; }
.a-obj-cours #bio { order: -1; }
.a-amb + .a-amb { margin-top: -2px; }

/* v0.5 : mise en page « Côte à côte » */
.lay-split .a-hero { background: var(--a-bg); color: var(--a-ink); }
.lay-split .a-hero::after { display: none; }
.lay-split .a-btn--line { color: var(--a-ink); box-shadow: inset 0 0 0 1.5px var(--a-line); }
.lay-split .a-hero h1 { font-size: clamp(52px, 8vw, 120px); }
@media (min-width: 860px) {
  .lay-split .a-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .lay-split .a-hero-img { position: relative; inset: auto; grid-column: 2; grid-row: 1; height: 100%; }
  .lay-split .a-hero-in { grid-column: 1; grid-row: 1; align-self: end; max-width: none; padding: 140px clamp(24px, 4vw, 56px) 64px; }
  .lay-split .a-nav { color: var(--a-ink); }
  .lay-split .a-nav nav { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
}
@media (max-width: 859px) {
  .lay-split .a-hero { flex-direction: column; align-items: stretch; }
  .lay-split .a-hero-img { position: relative; inset: auto; height: 58vh; }
  .lay-split .a-hero-in { padding-top: 28px; }
}

/* v0.5 : mise en page « Photo encadrée » */
.lay-cadre .a-hero { color: var(--a-ink); background: radial-gradient(ellipse at 78% 18%, color-mix(in srgb, var(--a-acc) 40%, transparent), transparent 60%), radial-gradient(ellipse at 12% 88%, color-mix(in srgb, var(--a-acc2) 30%, transparent), transparent 55%), var(--a-bg2); }
.lay-cadre .a-hero::after { display: none; }
.lay-cadre .a-nav { color: var(--a-ink); }
.lay-cadre .a-btn--line { color: var(--a-ink); box-shadow: inset 0 0 0 1.5px var(--a-line); }
.artiste.lay-cadre .a-hero-img { position: absolute; inset: auto; right: clamp(16px, 7vw, 120px); top: 110px; width: min(36vw, 440px); height: auto; aspect-ratio: 4 / 5; border-radius: 18px; rotate: 2.5deg; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .55); }
.lay-cadre .a-hero-in { position: relative; z-index: 2; }
@media (min-width: 860px) { .lay-cadre .a-hero-in { padding-right: calc(min(36vw, 440px) + 120px); } }
@media (max-width: 859px) {
  .lay-cadre .a-hero { flex-direction: column; align-items: stretch; }
  .artiste.lay-cadre .a-hero-img { position: relative; top: auto; right: auto; width: 72%; margin: 96px auto 0; }
  .lay-cadre .a-hero-in { padding-top: 32px; }
}
/* v2.0 : aperçu plus élégant */
/* Plus de filigrane sur toute la page : une pastille « Aperçu » qui tourne, en bas à gauche. */
.is-watermark::after { content: none; display: none; }
.a-stamp { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--a-acc); color: var(--a-on-acc); text-decoration: none; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5); transition: transform .35s cubic-bezier(.2, .9, .25, 1.3); }
.a-stamp svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); overflow: visible; animation: a-spin 18s linear infinite; }
.a-stamp text { font: 600 10px/1 var(--a-body); letter-spacing: .16em; text-transform: uppercase; fill: currentColor; }
.a-stamp b { font-family: var(--a-display); font-weight: var(--a-display-w); font-size: 16px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.a-stamp:hover { transform: scale(1.07) rotate(-8deg); }
@keyframes a-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .a-stamp { left: 10px; bottom: 10px; width: 76px; height: 76px; } .a-stamp text { font-size: 9px; letter-spacing: .12em; } .a-stamp b { font-size: 13px; } }

/* Sans photo : une affiche de concert vivante (lumières, couleurs de l'ambiance, grain, nom en filigrane). */
.a-hero--nophoto { overflow: hidden; isolation: isolate; background: var(--a-bg2); }
.a-hero-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.a-hero-art::after { content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.a-blob { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(70px); }
.a-blob--1 { top: -28vmax; right: -18vmax; background: var(--a-acc); opacity: .55; }
.a-blob--2 { bottom: -34vmax; left: -22vmax; background: var(--a-acc2); opacity: .42; }
.a-beam { position: absolute; top: -12%; width: 40vw; height: 135%; transform-origin: 50% 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 78%); opacity: .16; mix-blend-mode: soft-light; }
.a-beam--1 { left: 6%; transform: rotate(-10deg); }
.a-beam--2 { right: 4%; transform: rotate(12deg); }
.a-ghost { position: absolute; right: -3vw; bottom: -4vw; font-family: var(--a-display); font-weight: var(--a-display-w); font-size: clamp(140px, 30vw, 440px); line-height: .8; text-transform: uppercase; letter-spacing: -.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--a-ink) 18%, transparent); }
.a-hero--nophoto .a-hero-in { z-index: 2; }
.a-photo-note { display: inline-flex; padding: 8px 14px; border-radius: 99px; background: color-mix(in srgb, var(--a-ink) 8%, transparent); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .a-blob--1 { animation: a-drift 16s ease-in-out infinite alternate; }
  .a-blob--2 { animation: a-drift 21s ease-in-out infinite alternate-reverse; }
  .a-beam--1 { animation: a-sweep-1 9s ease-in-out infinite alternate; }
  .a-beam--2 { animation: a-sweep-2 12s ease-in-out infinite alternate; }
  .a-ghost { animation: bk-fade 2s .3s both; }
}
@keyframes a-drift { to { transform: translate(-9vmax, 7vmax) scale(1.12); } }
@keyframes a-sweep-1 { from { transform: rotate(-16deg); } to { transform: rotate(6deg); } }
@keyframes a-sweep-2 { from { transform: rotate(16deg); } to { transform: rotate(-4deg); } }

/* Photo trop petite : encadrée et nette, posée sur la même photo floutée. */
.a-hero--lowres { overflow: hidden; isolation: isolate; }
.artiste .a-hero-blur { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); max-width: none; object-fit: cover; filter: blur(42px) saturate(1.25); opacity: .6; z-index: 0; }
.a-hero--lowres::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--a-bg2) 55%, transparent), color-mix(in srgb, var(--a-bg2) 85%, transparent)); }
.artiste .a-hero--lowres .a-hero-img { z-index: 1; }
/* v2.0.1 : pastille lisible partout */
.a-stamp { background: #101015; color: #fff; box-shadow: 0 0 0 2px var(--a-acc), 0 16px 34px -14px rgba(0, 0, 0, .6); }
.a-stamp b { font-family: var(--a-body); font-size: 26px; font-weight: 500; color: var(--a-acc); text-transform: none; }
.a-stamp text { font-size: 10.5px; letter-spacing: .2em; }
@media (max-width: 600px) { .a-stamp b { font-size: 20px; } .a-stamp text { font-size: 10px; letter-spacing: .14em; } }
/* v2.1 : aperçu vivant */
.a-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.a-hero-art .a-stage { z-index: 1; }
.a-marquee { overflow: hidden; background: var(--a-acc); color: var(--a-on-acc); padding: 16px 0; }
.a-marquee-in { display: flex; width: max-content; gap: 28px; align-items: center; padding-right: 28px; font-family: var(--a-display); font-weight: var(--a-display-w); text-transform: uppercase; font-size: clamp(20px, 3vw, 34px); line-height: 1; white-space: nowrap; animation: a-marq 40s linear infinite; }
.a-marquee i { font-style: normal; font-size: .55em; opacity: .6; }
@keyframes a-marq { to { transform: translateX(-50%); } }
.a-player--live .a-play { border: 0; padding: 0; cursor: pointer; transition: transform .2s; }
.a-player--live .a-play:hover { transform: scale(1.06); }
.a-play.is-on { animation: a-ping 1.6s ease-out infinite; }
.a-play.is-on::after { left: 19px; top: 18px; width: 6px; height: 20px; border: 0; background: var(--a-on-acc); box-shadow: 12px 0 0 var(--a-on-acc); }
@keyframes a-ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a-acc) 60%, transparent); } to { box-shadow: 0 0 0 20px transparent; } }
.a-trk { flex: 1; min-width: 0; }
.a-trk-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 8px; }
.a-trk-top strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-time { color: var(--a-muted); font-variant-numeric: tabular-nums; }
.a-viz { display: block; width: 100%; height: 48px; }
.a-clip { position: relative; margin-top: 28px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--a-acc) 35%, #0b0b10), #07070b 70%); isolation: isolate; }
.a-clip-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 1.4s ease, transform 8s linear; }
.a-clip-img.is-on { opacity: 1; transform: scale(1.14); }
.a-clip--photos .a-stage { mix-blend-mode: screen; z-index: 1; }
.a-clip::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 28%, transparent 62%, rgba(0, 0, 0, .6)); }
.a-clip-live, .a-clip-tc { position: absolute; top: 16px; z-index: 3; font: 600 12px/1 var(--a-body); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.a-clip-live { left: 18px; display: flex; align-items: center; gap: 8px; }
.a-clip-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; animation: a-blink 1.2s steps(2) infinite; }
@keyframes a-blink { 50% { opacity: .2; } }
.a-clip-tc { right: 18px; font-variant-numeric: tabular-nums; opacity: .8; }
.a-clip-play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: transform .25s, background .25s, opacity .3s; }
.a-clip-play::after { content: ""; position: absolute; left: 31px; top: 25px; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.a-clip-play:hover { transform: scale(1.08); background: var(--a-acc); }
.a-clip-play.is-on { opacity: 0; }
.a-clip:hover .a-clip-play.is-on, .a-clip-play.is-on:focus-visible { opacity: 1; }
.a-clip-play.is-on::after { left: 28px; top: 27px; width: 7px; height: 24px; border: 0; background: #fff; box-shadow: 14px 0 0 #fff; }
.a-clip-cap { position: absolute; left: 18px; bottom: 16px; z-index: 3; margin: 0; color: #fff; font-size: 14px; opacity: .85; }
.a-hero h1.is-split { animation: none; }
.a-hero h1 .w { display: inline-block; white-space: nowrap; }
.a-hero h1 .c { display: inline-block; animation: a-letter .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes a-letter { from { opacity: 0; transform: translateY(.45em) rotate(5deg); filter: blur(6px); } }
@media (max-width: 600px) { .a-clip { aspect-ratio: 4 / 5; } .a-clip-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .a-clip-play::after { left: 25px; top: 20px; border-left-width: 18px; border-top-width: 12px; border-bottom-width: 12px; } }
@media (prefers-reduced-motion: reduce) { .a-marquee-in, .a-clip-live i, .a-play.is-on { animation: none; } }
/* v2.1.1 */
.a-stamp text, .artiste .a-stamp text { font-size: 9.5px; letter-spacing: .12em; }
/* v2.1.2 : mobile aéré */
@media (max-width: 600px) {
  .a-bar { padding: 8px 16px; font-size: 13px; }
  .a-bar a { padding: 7px 12px; font-size: 13px; }
  .a-bar-x { display: none; }
  .a-stamp { display: none; }
  .bk-perso-btn { padding: 11px 16px; font-size: 14px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .a-totop { width: 40px; height: 40px; right: 12px; }
  .artiste:has(.bk-perso-btn) .a-totop { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .a-ghost, .a-photo-note { display: none; }
  .a-hero--nophoto .a-hero-in { padding-bottom: 96px; }
  .a-blob { filter: blur(50px); }
  .a-blob--1 { opacity: .4; } .a-blob--2 { opacity: .3; }
  .a-marquee { padding: 11px 0; }
  .a-marquee-in { font-size: 17px; gap: 16px; padding-right: 16px; }
  .a-player { padding: 14px; gap: 14px; }
  .a-trk-top { font-size: 13px; }
  .a-viz { height: 40px; }
  .a-note { margin-top: 12px; font-size: 13px; line-height: 1.5; }
  .a-clip { aspect-ratio: 4 / 3; margin-top: 40px; border-radius: 12px; }
  .a-clip-live, .a-clip-tc { top: 12px; font-size: 10px; }
  .a-clip-live { left: 14px; } .a-clip-tc { right: 14px; }
  .a-clip-cap { left: 14px; bottom: 12px; font-size: 12px; }
  .a-clip-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .a-clip-play::after { left: 22px; top: 17px; border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
  .a-clip-play.is-on::after { left: 20px; top: 18px; width: 5px; height: 18px; box-shadow: 10px 0 0 #fff; }
}
/* v3.7 : aperçu bien visible, retour vers Backstage, contenu d'exemple signalé */
.a-bar--apercu { position: sticky; top: 0; z-index: 45; background: #ffb21e; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .45); font-size: 15px; }
.a-bar--apercu .a-bar-title b { letter-spacing: .12em; margin-right: 4px; }
.a-bar-nav { display: inline-flex; align-items: center; gap: 8px; }
.a-bar a.a-bar-back { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px rgba(27, 19, 0, .35); }
.a-bar a.a-bar-back:hover { background: rgba(27, 19, 0, .1); }
@media (max-width: 719px) { .a-bar--apercu { flex-wrap: wrap; font-size: 13px; } .a-bar--apercu .a-bar-title { order: -1; width: 100%; } }
.a-ribbon { position: fixed; top: 64px; right: -46px; z-index: 44; transform: rotate(45deg); width: 190px; padding: 7px 0; text-align: center; background: #ffb21e; color: #1b1300; font: 800 13px/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); pointer-events: none; }
.is-watermark::after { content: ""; display: block; position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220'%3E%3Ctext x='20' y='130' transform='rotate(-24 180 110)' font-family='Arial,sans-serif' font-size='44' font-weight='700' fill='%23888'%3EAPER%C3%87U%3C/text%3E%3C/svg%3E"); }
.a-stamp { width: 112px; height: 112px; animation: a-stamp-pulse 2.6s ease-in-out infinite; }
@keyframes a-stamp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 178, 30, .55), 0 16px 34px -14px rgba(0, 0, 0, .6); } 50% { box-shadow: 0 0 0 12px rgba(255, 178, 30, 0), 0 16px 34px -14px rgba(0, 0, 0, .6); } }
@media (prefers-reduced-motion: reduce) { .a-stamp { animation: none; } }
.a-ex { display: inline-block; vertical-align: middle; margin: 0 0 6px 12px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 178, 30, .18); color: inherit; border: 1px dashed rgba(255, 178, 30, .8); font: 600 11px/1.2 "Instrument Sans", system-ui, sans-serif; letter-spacing: .04em; }
.a-foot a { color: inherit; }
.artiste:has(.bk-perso-btn) .a-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }