/* Pages de contenu piste C : Freelance et À propos (puis Atelier, Musique, Artiste).
   Texte sur carte ivoire : #0F1013 / #3A3830 ; repères bronze sur carte : #6E4F0F ; or plein : #E8B04A. */

.pg-k { margin: 0; font-size: 13px; color: var(--acc); }
.pg-h1 { margin: 0; font: 400 92px/.95 var(--f-serif); }
.pg-h2 { margin: 0 0 36px; font: 400 56px/1 var(--f-serif); }
.pg-h2--s { font-size: 44px; margin-bottom: 24px; }
.pg-lead { margin: 0; max-width: 720px; font-size: 20px; color: var(--fg2); }
.pg-muted { color: var(--mut); }
.pg-sec { padding-block: 88px; }
.pg-band { background: var(--bg2); border-block: 1px solid var(--line); }
.pg-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 40px; }
.pg-head .pg-h2 { margin: 0; }
.pg-btn { padding: 16px 24px; font-size: 16px; }
.c-main .c-btn--gold, .c-main .c-btn--gold:hover { color: #0F1013; }
.pg-status {
  margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border: 1px solid var(--okbd); border-radius: 999px; background: var(--okbg); color: var(--oktx); font-size: 14px;
}
.pg-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* Apparition au défilement (pages.js ajoute .is-in) */
.js [data-reveal]:not(.is-in) .fl-ring { transform: scale(.4); opacity: 0; }

/* ================= Freelance ================= */
.fl-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px; padding-block: 80px 64px; }
.fl-hero-txt { flex: 2 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.fl-h1-k { margin: 0 0 14px; font: 500 14px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--acc); }
.fl-h1-t em { color: var(--acc); }
.fl-hero-cta { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.fl-hero-cta p { margin: 0; text-align: center; font-size: 14px; color: var(--mut); }

.fl-offers-sec { padding-top: 0; }
.fl-offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px; }
.fl-offer {
  display: flex; flex-direction: column; gap: 12px; padding: 22px;
  background: var(--card); color: #0F1013; border: 6px solid #E8B04A; border-radius: 14px; box-shadow: 0 18px 36px var(--sh);
  transform: rotate(var(--tilt)); transition: transform .25s var(--ease-c);
}
.fl-offer:hover { transform: rotate(0deg) translateY(-6px); }
.fl-offer-top { display: flex; justify-content: space-between; font-size: 11px; color: #3A3830; }
.fl-offer-t { margin: 0; font: 400 34px/1 var(--f-serif); }
.fl-offer-d { margin: 0; font-size: 15px; color: #3A3830; }
.fl-offer-k { margin: 6px 0 0; font-size: 11px; color: #6E4F0F; }
.fl-offer ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.c-main .fl-offer-more, .c-main .fl-offer-more:hover { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; color: #0F1013; font-weight: 500; }
.fl-offers-more { margin: 32px 0 0; font-size: 17px; color: var(--fg2); }
.fl-offers-more a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; }
.fl-tm { padding-top: 0; }

/* ================= Page prestation ================= */
.sv-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px; padding-block: 40px 72px; }
.sv-hero-txt { flex: 2 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sv-h1 { margin: 0; font: 400 80px/.98 var(--f-serif); max-width: 16ch; }
.sv-price { margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg2); }
.sv-price span { font-size: 12px; color: var(--mut); }
.sv-price strong { font: 400 44px/1 var(--f-serif); color: var(--acc); }
.sv-inc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px 32px; max-width: 1040px; }
.sv-inc li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line2); font-size: 18px; }
.sv-inc .c-mono { flex: none; padding-top: 4px; font-size: 13px; color: var(--acc); }
.sv-ex { list-style: none; margin: 0; padding: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px; }
.sv-ex-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--card); border-radius: 10px; box-shadow: 0 14px 30px var(--sh);
  text-decoration: none; transform: rotate(var(--tilt)); transition: transform .25s var(--ease-c);
}
.c-main .sv-ex-card, .c-main .sv-ex-card:hover { color: #0F1013; }
.sv-ex-card:hover, .sv-ex-card:focus-visible { transform: rotate(0deg) translateY(-4px); }
.sv-ex-card .c-mono { font-size: 11px; color: #3A3830; }
.sv-ex-pic { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(135deg, #DDD8CE 0 8px, #E5E1D8 8px 16px); }
.sv-ex-pic img { width: 100%; height: 100%; object-fit: cover; }
.sv-ex-name { font: 400 28px/1.05 var(--f-serif); }
.sv-ex-sub { font-size: 14px; color: #3A3830; }
.sv-more { display: inline-flex; align-items: center; min-height: 44px; }
.sv-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.sv-cta .pg-h2 { margin: 0 0 8px; }
.sv-cta p { margin: 0; color: var(--fg2); }
.sv-draft { margin: 0 0 24px; padding: 12px 16px; border: 1px dashed var(--bd); border-radius: 8px; color: var(--fg2); font-size: 14px; }

.fl-how-sub { margin: -24px 0 36px; }
.fl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.fl-steps li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg); font-size: 17px; }
.fl-step-n { font: 400 48px/1 var(--f-serif); color: var(--acc); }
.fl-steps strong { font-weight: 600; }

.fl-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.fl-zone-txt { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.fl-zone-txt .pg-h2 { margin: 0; }
.fl-zone-txt .pg-lead { font-size: 18px; }
.fl-zones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fl-zones li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.fl-zones .c-mono { color: var(--acc); font-size: 15px; }
.fl-rings { position: relative; flex: 1 1 420px; max-width: 460px; aspect-ratio: 1; margin-inline: auto; }
.fl-ring { position: absolute; border-radius: 50%; transition: transform .7s var(--ease-c), opacity .7s; }
.fl-ring--4 { inset: 0; border: 1px dashed var(--bd); transition-delay: .3s; }
.fl-ring--3 { inset: 15%; border: 1px dashed var(--line2); transition-delay: .2s; }
.fl-ring--2 { inset: 30%; border: 1px solid var(--acc); background: color-mix(in srgb, #E8B04A 7%, transparent); transition-delay: .1s; }
.fl-ring--1 { inset: 43.5%; background: #E8B04A; }
.fl-ring-l { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.fl-ring-l--1 { top: 58%; font: 400 26px var(--f-serif); }
.fl-ring-l--2 { top: 33%; font-size: 11px; color: var(--fg2); }
.fl-ring-l--3 { top: 18%; font-size: 11px; color: var(--mut); }
.fl-ring-l--4 { top: 3%; font-size: 11px; color: var(--mut); }

.fl-faq { max-width: 1040px; }
.fl-faq .pg-h2 { margin-bottom: 32px; }
.fl-q { border-top: 1px solid var(--line2); }
.fl-q:last-child { border-bottom: 1px solid var(--line2); }
.fl-q summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; font: 400 28px/1.15 var(--f-serif); }
.fl-q summary::-webkit-details-marker { display: none; }
.fl-plus { flex: none; font: 28px var(--f-sans); color: var(--acc); transition: transform .2s var(--ease-c); }
.fl-q[open] .fl-plus { transform: rotate(45deg); }
.fl-a p { margin: 0 0 22px; max-width: 760px; font-size: 17px; color: var(--fg2); }
.fl-q[open] .fl-a { animation: pg-open .2s var(--ease-c); }
@keyframes pg-open { from { opacity: 0; transform: translateY(-6px); } }

/* ================= À propos ================= */
.ab-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 80px; padding-block: 80px 64px; }
.ab-card-zone { flex: 0 1 380px; min-width: 280px; perspective: 1400px; }
.ab-flip { position: relative; transform-style: preserve-3d; transform: rotate(-3deg); transition: transform .9s var(--ease-c); }
.js .ab-flip:not(.is-in) { transform: rotate(-3deg) rotateY(180deg); }
.ab-face { backface-visibility: hidden; border: 8px solid #E8B04A; border-radius: 16px; box-shadow: 0 30px 60px var(--sh); }
.ab-front { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--card); color: #0F1013; }
.ab-card-top { display: flex; justify-content: space-between; font-size: 11px; color: #3A3830; }
.ab-portrait { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(135deg, #DDD8CE 0 8px, #E5E1D8 8px 16px); display: flex; align-items: flex-end; justify-content: center; }
.ab-portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Photo détourée : le cadre suit son format, sans bandes hachurées autour */
.ab-portrait.is-cutout { aspect-ratio: auto; background: #E5E1D8; }
.ab-portrait.is-cutout img { height: auto; }
.ab-front figcaption { display: flex; flex-direction: column; }
.ab-card-name { font: 400 40px/1 var(--f-serif); }
.ab-card-tag { font: italic 400 20px/1.3 var(--f-serif); color: #6E4F0F; }
.ab-back {
  position: absolute; inset: 0; transform: rotateY(180deg); background: var(--ph2); color: var(--acc);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px;
}
.ab-back-mark { font: italic 400 120px/1 var(--f-serif); }
.ab-intro { flex: 999 1 560px; min-width: 0; max-width: 820px; display: flex; flex-direction: column; gap: 24px; }
.ab-h1 { font-size: 88px; }
.ab-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; padding: 18px 0; border-block: 1px solid var(--bd); }
.ab-facts dt { font-size: 12px; color: var(--mut); }
.ab-facts dd { margin: 4px 0 0; }
.ab-bio { padding-bottom: 80px; }
.ab-prose { font-size: 19px; max-width: 820px; margin-inline: auto; }

.ab-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 28px; }
.ab-job {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px;
  background: var(--card); color: #0F1013; border-radius: 10px; box-shadow: 0 14px 28px var(--sh);
  transform: rotate(var(--tilt)); transition: transform .6s var(--ease-c), opacity .6s;
}
.js .ab-job:not(.is-in) { opacity: 0; transform: translateY(40px) rotate(calc(var(--tilt) * 4)); }
.ab-tape { position: absolute; top: -10px; left: 50%; width: 72px; height: 22px; background: color-mix(in srgb, #E8B04A 35%, transparent); transform: translateX(-50%) rotate(-3deg); }
.ab-job-when { font-size: 12px; color: #6E4F0F; }
.ab-job-role { margin: 0; font: 400 28px/1.05 var(--f-serif); }
.ab-job-org { font-size: 14px; font-weight: 600; }
.ab-job-desc { margin: 0; font-size: 14px; color: #3A3830; }

.ab-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 64px; }
.ab-school { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ab-school li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ab-school .c-mono { font-size: 13px; color: var(--acc); }
.ab-school-t { display: block; }
.ab-school .pg-muted { font-size: 14px; }
.ab-skills { margin-bottom: 20px; }
.ab-skills h3 { margin: 0 0 10px; font-size: 12px; font-weight: 400; color: var(--mut); }
.ab-skills ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-skills li { padding: 6px 12px; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg); font-size: 15px; }

.ab-side-sub { margin: -28px 0 32px; }
.ab-side { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.ab-side li > * { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 20px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg); text-decoration: none; transform: rotate(var(--tilt)); }
.ab-side a:hover { border-color: var(--acc); }
.ab-side .c-mono { font-size: 11px; color: var(--acc); }
.ab-side-t { font: 400 28px/1.1 var(--f-serif); color: var(--fg); }
.ab-side-d { font-size: 14px; color: var(--mut); }

.ab-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.ab-cta-t { margin: 0; max-width: 900px; font: 400 72px/1 var(--f-serif); }
.ab-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ================= Mobile ================= */
@media (max-width: 1023px) {
  .pg-sec { padding-block: 48px; }
  .pg-h1 { font-size: 52px; }
  .pg-h2 { font-size: 36px; margin-bottom: 24px; }
  .pg-h2--s { font-size: 32px; }
  .pg-lead { font-size: 17px; }
  .fl-hero, .ab-hero { padding-block: 32px 40px; gap: 32px; }
  .fl-h1-k { font-size: 13px; letter-spacing: 0; }
  .fl-hero-cta { flex-basis: 100%; }
  .fl-offers { gap: 20px; }
  .sv-hero { padding-block: 24px 40px; gap: 28px; }
  .sv-h1 { font-size: 46px; }
  .sv-inc li { font-size: 16px; padding: 12px 0; }
  .sv-ex-card { transform: none; }
  .sv-price strong { font-size: 36px; }
  .fl-offer { border-width: 5px; transform: none; }
  .fl-offer-t { font-size: 28px; }
  .fl-how-sub { margin: -12px 0 24px; }
  .fl-step-n { font-size: 36px; }
  .fl-zone { gap: 32px; }
  .fl-rings { flex-basis: 100%; max-width: 340px; }
  .fl-q summary { font-size: 22px; padding: 18px 0; }
  .fl-a p { font-size: 16px; }
  .ab-card-zone { flex-basis: 100%; max-width: 320px; margin-inline: auto; min-width: 0; }
  .ab-h1 { font-size: 48px; }
  .ab-h1-sub { display: block; font-size: 26px; line-height: 1.15; margin-top: 8px; }
  .ab-prose { font-size: 17px; }
  .ab-bio { padding-bottom: 48px; }
  .ab-job { padding: 20px; }
  .ab-job-role { font-size: 24px; }
  .ab-school li { grid-template-columns: 1fr; gap: 2px; }
  .ab-two { gap: 40px; }
  .ab-side-sub { margin: -12px 0 24px; }
  .ab-side li > * { transform: none; }
  .ab-cta-t { font-size: 40px; }
  .ab-cta-btns { width: 100%; flex-direction: column; }
  .ab-cta-btns .c-btn { justify-content: center; }
}

/* ================= Tampons et barres d'avancement (Atelier, Musique) ================= */
.pg-stamp { display: inline-block; padding: 3px 10px; border: 2px solid var(--mut); border-radius: 4px; font-size: 12px; color: var(--fg2); transform: rotate(-3deg); transition: transform .4s ease-out, opacity .4s; }
.pg-stamp.is-soon { border-color: var(--acc); color: var(--acc); }
.pg-stamp.is-out { border-color: var(--ok); color: var(--ok); }
.js .pg-stamp[data-reveal]:not(.is-in) { transform: rotate(-3deg) scale(1.3); opacity: 0; }
.pg-prog { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.pg-prog-bar { flex: 1; max-width: 320px; height: 6px; border-radius: 3px; background: var(--line2); overflow: hidden; }
.pg-prog-bar span { display: block; height: 100%; border-radius: 3px; background: #E8B04A; transform-origin: left; transform: scaleX(var(--p)); transition: transform 1.2s ease-out .3s; }
.js .pg-prog-bar span[data-reveal]:not(.is-in) { transform: scaleX(0); }
.pg-cta-row { margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pg-cta-t { margin: 0; font: 400 64px/1 var(--f-serif); }
.at-secret { position: absolute; inset: auto 8px 8px; text-align: center; font-size: 11px; color: #ECE9E3; }

/* ================= Atelier ================= */
.at { padding-top: 72px; }
.at-h1 { font-size: 88px; max-width: 1100px; }
.at-h1 em { color: var(--acc); }
.at-lead { margin-top: 16px; font-size: 19px; }
.at-empty { margin-top: 48px; }
.at-groups { margin-top: 64px; display: flex; flex-direction: column; gap: 72px; }
.at-group-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.at-group-head .pg-stamp { font-size: 13px; padding: 4px 12px; }
.at-group-t { margin: 0; font-size: 44px; }
.at-group-t .c-mono { font-size: 14px; }
.at-lots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.at-lot {
  max-width: 1000px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding: 18px;
  background: var(--card); border-radius: 14px; box-shadow: 0 18px 36px var(--sh); text-decoration: none;
  transform: rotate(var(--tilt)); transition: transform .25s var(--ease-c);
}
.c-main .at-lot, .c-main .at-lot:hover { color: #0F1013; }
a.at-lot:hover, a.at-lot:focus-visible { transform: rotate(0deg) translateY(-6px); }
.at-lot-pic { position: relative; flex: none; width: 200px; height: 200px; border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(135deg, #DDD8CE 0 8px, #E5E1D8 8px 16px); }
.at-lot-pic img, .af-cover img { width: 100%; height: 100%; object-fit: cover; }
.is-blur img { filter: blur(14px); transform: scale(1.15); }
.at-lot-body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.at-lot-k { font-size: 12px; color: #6E4F0F; }
.at-lot-t { margin: 0; font: 400 40px/1 var(--f-serif); }
.at-lot-d { color: #3A3830; }
.at-lot .pg-prog { color: #3A3830; }
.at-lot .pg-prog-bar { background: #C9C4B9; }
.at-lot .pg-prog-bar span { background: #6E4F0F; }
.at-lot-cta { align-self: flex-start; margin-top: 6px; padding: 10px 16px; border-radius: 6px; background: #0F1013; color: #ECE9E3; font-size: 14px; font-weight: 600; }

/* Fiche atelier */
.af-grid { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 72px; align-items: flex-start; }
.af-side { flex: 0 1 400px; min-width: 280px; position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }
.af-cover { position: relative; aspect-ratio: 2 / 3; padding: 14px; border: 8px solid #E8B04A; border-radius: 14px; background: var(--card); transform: rotate(-2deg); box-shadow: 0 30px 60px var(--sh); overflow: hidden; }
.af-cover img { border-radius: 6px; }
.af-cta { justify-content: center; }
.af-body { flex: 999 1 560px; min-width: 0; max-width: 780px; display: flex; flex-direction: column; gap: 28px; }
.af-meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.af-meta .c-mono.pg-muted { font-size: 13px; }
.af-h1 { font-size: 84px; overflow-wrap: anywhere; }
.af-lead { margin: 0; font: 400 32px/1.2 var(--f-serif); }
.af-prog { margin: 0; color: var(--mut); }
.af-prose { font-size: 18px; max-width: none; }
.af-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ================= Musique ================= */
.mu-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px; padding-block: 72px 56px; }
.mu-hero-txt { flex: 2 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.mu-h1 { font-size: 112px; line-height: .9; }
.mu-intro { font-size: 20px; max-width: 680px; }
.mu-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.mu-plats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mu-plats::before { content: "AUSSI SUR"; align-self: center; margin-right: 4px; font: 400 12px var(--f-mono); letter-spacing: .08em; color: var(--mut); }
.mu-plats a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--bd); border-radius: 999px; color: var(--fg); font-size: 15px; text-decoration: none; }
.mu-plats a:hover { border-color: var(--acc); }
.mu-stats { flex: 1 1 320px; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mu-stats div { display: flex; flex-direction: column-reverse; }
.mu-stats dt { font-size: 14px; color: var(--mut); }
.mu-stats dd { margin: 0; font: 400 64px/1 var(--f-serif); color: var(--acc); }
.mu-artists-sec { padding-block: 24px 96px; }
.mu-artists-sec .pg-h2 { margin-bottom: 12px; }
.mu-artists-sub { margin: 0 0 40px; max-width: 720px; }
.mu-artists { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 28px; }
.mu-art { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 14px; border-radius: 12px; background: var(--card); text-decoration: none; box-shadow: 0 16px 32px var(--sh); transform: rotate(var(--tilt)); }
.c-main .mu-art, .c-main .mu-art:hover { color: #0F1013; }
.mu-stack { position: absolute; left: 14px; right: 14px; top: 14px; aspect-ratio: 1; }
.mu-s1, .mu-s2 { position: absolute; inset: 8px; border-radius: 4px; background: var(--ph1); border: 1px solid var(--line2); transition: transform .3s ease-out; }
.mu-art:hover .mu-s1, .mu-art:focus-visible .mu-s1 { transform: rotate(-10deg) translateX(-18px); }
.mu-art:hover .mu-s2, .mu-art:focus-visible .mu-s2 { transform: rotate(9deg) translateX(18px); }
.mu-art-pic { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(135deg, #DDD8CE 0 8px, #E5E1D8 8px 16px); }
.mu-art-pic img, .ar-card-pic img, .ar-album-pic img { width: 100%; height: 100%; object-fit: cover; }
.mu-art-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #6E4F0F; }
.mu-art-name { margin: 0; font: 400 36px/1 var(--f-serif); }
.mu-art-tag { font-size: 14px; color: #3A3830; }

.mu-listen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 64px; }
.mu-tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.mu-tracks li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line2); }
.mu-track { flex: 1; min-width: 0; min-height: 48px; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.mu-track .c-mono { font-size: 13px; color: var(--acc); }
.mu-track-play { color: var(--mut); font-size: 12px; }
.mu-track:hover .mu-track-play, .mu-track[aria-pressed="true"] .mu-track-play { color: var(--acc); }
.mu-track[aria-pressed="true"] { color: var(--acc); }
.mu-track-link { flex: none; font-size: 13px; color: var(--mut); }
.c-main .mu-track-link { color: var(--mut); }
.mu-player { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line2); border-radius: 10px; background: var(--ph1); overflow: hidden; }
.mu-player--album { aspect-ratio: auto; min-height: 160px; }
.mu-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mu-player--album iframe { position: static; height: 450px; display: block; }
.mu-player-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.mu-player--album .mu-player-idle { position: static; min-height: 160px; }
.mu-player-idle[hidden] { display: none; }
.mu-player-idle p { margin: 0; max-width: 360px; font-size: 14px; color: var(--mut); }

/* Artiste */
.ar-hero { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 72px; }
.ar-card { flex: 0 1 420px; min-width: 280px; margin: 0; padding: 14px; border: 8px solid #E8B04A; border-radius: 16px; background: var(--card); transform: rotate(-2.5deg); box-shadow: 0 30px 60px var(--sh); }
.ar-card-pic { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(135deg, #DDD8CE 0 8px, #E5E1D8 8px 16px); }
.ar-card figcaption { display: flex; justify-content: space-between; padding-top: 10px; font-size: 11px; color: #3A3830; }
.ar-card figcaption span + span { color: #6E4F0F; }
.ar-intro { flex: 999 1 520px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.ar-h1 { font-size: 128px; line-height: .9; overflow-wrap: anywhere; }
.ar-tag { margin: 0; font: italic 400 30px/1.2 var(--f-serif); }
.ar-bio { font-size: 18px; }
.ar-links, .ar-album-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ar-credits { margin: 0; font-size: 14px; }
.ar-disco { margin-top: 112px; }
.ar-uni { margin-top: 112px; }
.ar-uni-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 48px; margin-bottom: 40px; }
.ar-uni-mood { flex: 1 1 420px; margin: 0; max-width: 760px; font: italic 400 30px/1.25 var(--f-serif); color: var(--fg2); }
/* Rangées justifiées : chaque image grandit selon son format (--r = largeur / hauteur), d'où des rangées de hauteur égale, dans l'ordre choisi */
.ar-uni-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 32px 24px; }
.ar-uni-item { flex: var(--r) 1 calc(var(--r) * 200px); min-width: 0; }
.ar-uni-fig { margin: 0; }
.ar-uni-fig img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--ph1); box-shadow: 0 16px 32px var(--sh); }
.ar-uni-fig figcaption { display: flex; gap: 12px; padding-top: 10px; font-size: 12px; color: var(--mut); }
.ar-uni-fig figcaption span:first-child { color: var(--acc); }
.ar-uni-kit { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 56px; }
.ar-uni-k { margin: 0 0 16px; font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.ar-uni-pal, .ar-uni-fonts, .ar-uni-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ar-uni-pal li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; }
.ar-uni-sw { width: 40px; height: 40px; border-radius: 50%; background: var(--sw); border: 1px solid var(--bd); }
.ar-uni-pal .c-mono { font-size: 12px; }
.ar-uni-fonts li { display: flex; flex-direction: column; gap: 2px; }
.ar-uni-fn { font: 400 26px/1.1 var(--f-serif); }
.ar-uni-rules { counter-reset: r; }
.ar-uni-rules li { counter-increment: r; display: grid; grid-template-columns: 32px 1fr; gap: 8px; color: var(--fg2); }
.ar-uni-rules li::before { content: counter(r, decimal-leading-zero); font: 12px/1.9 var(--f-mono); color: var(--acc); }
.ar-albums { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 40px; }
.ar-album { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.ar-album-pic { flex: none; width: 240px; height: 240px; border-radius: 6px; overflow: hidden; background: var(--ph1); transform: rotate(var(--tilt)); box-shadow: 0 16px 32px var(--sh); }
.ar-album-body { flex: 1 1 480px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.ar-album-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ar-album-meta .c-mono.pg-muted { font-size: 12px; }
.ar-album-t { margin: 0; font: 400 44px/1 var(--f-serif); }
.ar-album-d { font-size: 17px; }
.ar-album-links { flex-direction: column; gap: 6px; }
.ar-tracks summary { cursor: pointer; color: var(--mut); }
.ar-tracks ol { margin: 10px 0 0; padding-left: 1.4em; color: var(--fg2); columns: 2; column-gap: 32px; }
.ar-family { margin-top: 72px; }
.ar-family p { margin: 0 0 16px; font-size: 12px; }
.ar-family ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ar-family a { display: block; padding: 12px 18px; border: 1px solid var(--bd); border-radius: 6px; font: 400 24px var(--f-serif); text-decoration: none; }
.ar-family a:hover { border-color: var(--acc); }
.c-main .ar-family .ar-family-all { border-color: transparent; font: 16px var(--f-sans); padding-top: 18px; }

@media (max-width: 1023px) {
  .pg-cta-t { font-size: 40px; }
  .pg-cta-row { margin-top: 56px; padding-top: 32px; }
  .at { padding-top: 32px; }
  .at-h1, .af-h1 { font-size: 48px; }
  .at-lead { font-size: 17px; }
  .at-groups { margin-top: 40px; gap: 48px; }
  .at-group-t { font-size: 32px; }
  .at-lot { flex-direction: column; align-items: stretch; gap: 16px; padding: 14px; transform: rotate(calc(var(--tilt) / 2)); }
  .at-lot-pic { width: 100%; height: auto; aspect-ratio: 1; }
  .at-lot-body { flex: none; }
  .at-lot-t { font-size: 30px; }
  .af-grid { margin-top: 24px; gap: 32px; }
  .af-side { position: static; flex-basis: 100%; max-width: 320px; margin-inline: auto; min-width: 0; }
  .af-lead { font-size: 24px; }
  .af-prose { font-size: 17px; }
  .mu-hero { padding-block: 32px 40px; gap: 32px; }
  .mu-h1 { font-size: 64px; }
  .mu-intro { font-size: 17px; }
  .mu-stats dd { font-size: 44px; }
  .mu-artists-sec { padding-block: 16px 56px; }
  .mu-artists-sub { margin-bottom: 24px; }
  .mu-artists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .mu-art { padding: 8px; gap: 6px; }
  .mu-stack { left: 8px; right: 8px; top: 8px; }
  .mu-art-name { font-size: 24px; }
  .mu-art-tag, .mu-art-meta span:first-child { display: none; }
  .mu-listen { gap: 40px; }
  .mu-track-link { display: none; }
  .ar-hero { margin-top: 24px; gap: 32px; }
  .ar-card { flex-basis: 100%; max-width: 320px; margin-inline: auto; min-width: 0; border-width: 6px; }
  .ar-h1 { font-size: 64px; }
  .ar-tag { font-size: 22px; }
  .ar-bio { font-size: 17px; }
  .ar-disco { margin-top: 56px; }
  .ar-uni { margin-top: 56px; }
  .ar-uni-head { margin-bottom: 24px; }
  .ar-uni-mood { font-size: 22px; flex-basis: 100%; }
  .ar-uni-grid { gap: 20px 12px; }
  .ar-uni-item { flex-basis: calc(var(--r) * 140px); }
  .ar-uni-fig figcaption { flex-direction: column; gap: 2px; font-size: 11px; }
  .ar-uni-kit { margin-top: 40px; padding-top: 32px; gap: 32px; }
  .ar-album { gap: 20px; }
  .ar-album-pic { width: 160px; height: 160px; }
  .ar-album-t { font-size: 32px; }
  .ar-tracks ol { columns: 1; }
  .ar-family a { font-size: 20px; padding: 10px 14px; }
}

/* ---------- Lien de partage d'accès (/acces/…) ---------- */
.ax { max-width: 640px; margin: 0 auto; padding: 48px 20px 80px; }
.ax-brand { margin: 0 0 40px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.ax h1 { margin: 0 0 16px; font-family: var(--f-serif); font-weight: 400; font-size: 44px; line-height: 1.1; }
.ax p { margin: 0 0 16px; color: var(--fg2); }
.ax a { color: var(--acc); }
.ax-meta { font-family: var(--f-mono); font-size: 12px; color: var(--mut); }
.ax-error { color: var(--err); font-weight: 500; }
.ax-warn { padding: 14px 16px; border: 1px solid var(--okbd); border-radius: 10px; background: var(--okbg); color: var(--oktx); }
.ax-form { display: grid; gap: 10px; margin-top: 24px; }
.ax-form label { font-family: var(--f-mono); font-size: 12px; color: var(--mut); }
.ax-form input { min-height: 48px; padding: 0 14px; border: 1px solid var(--bd); border-radius: 8px; background: var(--bg2); color: var(--fg); font: 16px var(--f-mono); }
.ax-btn { min-height: 48px; padding: 0 20px; border: 0; border-radius: 8px; background: #E8B04A; color: var(--accent-ink); font: 500 16px var(--f-sans); cursor: pointer; justify-self: start; }
.ax-card { margin-top: 16px; padding: 20px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2); }
.ax-card h2 { margin: 0 0 12px; font-family: var(--f-serif); font-weight: 400; font-size: 26px; }
.ax-card h2 span { font-family: var(--f-mono); font-size: 12px; color: var(--mut); }
.ax-card dl { margin: 0; display: grid; gap: 10px; }
.ax-card dt { font-family: var(--f-mono); font-size: 12px; color: var(--mut); }
.ax-card dd { margin: 2px 0 0; color: var(--fg); overflow-wrap: anywhere; }
.ax-card code { font: 15px var(--f-mono); user-select: all; }