/* Version fourrure : toute la page sur un fond de peluche rose */
/* La fourrure est portée par body (elle couvre tout le document, footer compris) ; html garde une couleur proche pour les rebonds iOS */
html { background: #D81C80; overscroll-behavior-y: none; }
body { background: #D81C80 url("fur-tile.webp") 0 0 / 900px auto repeat; overscroll-behavior-y: none; }

/* Le bas du hero se fond dans la fourrure de la page */
.hx { background: transparent; }
.hx-content { position: relative; }
.countdown div { background: rgba(14, 6, 18, .66); }

/* Sections : panneaux sombres et brillants posés sur la peluche */
.infos { background: none; }
.program, .infos { padding: clamp(36px, 4.5vw, 64px) 0; }
.program { padding-top: clamp(48px, 6vw, 88px);
  background: linear-gradient(180deg, #0A0610 0, rgba(10, 6, 16, .82) 60px, rgba(10, 6, 16, .45) 150px, rgba(10, 6, 16, .15) 230px, rgba(10, 6, 16, 0) 300px); }
.program > .wrap, .infos > .wrap {
  width: min(1180px, calc(100% - 2 * clamp(14px, 4vw, 64px))); padding: clamp(40px, 5vw, 76px) clamp(22px, 4.5vw, 72px);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(22, 8, 26, .80), rgba(12, 5, 16, .86));
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .28), 0 30px 70px -20px rgba(40, 0, 20, .65), 0 8px 24px rgba(40, 0, 20, .35); }
.kicker { color: var(--pink-2); }
.card { background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 60%); }

/* Pied de page : la boule pend au-dessus de la fourrure, texte sur panneau */
.foot { background: none; padding: 0 clamp(14px, 4vw, 64px) 40px; }
.ball { margin-top: 80px; }
.ball::before { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .85)); width: 2px; margin-left: -1px; }
.ball { box-shadow: inset -22px -26px 40px rgba(0, 0, 0, .65), inset 10px 12px 26px rgba(255, 255, 255, .25), 0 24px 50px rgba(60, 0, 30, .55), 0 0 80px rgba(255, 255, 255, .25); }
.foot-panel { width: min(1180px, 100%); margin: 48px auto 0; padding: clamp(40px, 5vw, 72px) 20px clamp(44px, 5vw, 76px);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(22, 8, 26, .80), rgba(12, 5, 16, .86));
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .28), 0 30px 70px -20px rgba(40, 0, 20, .65); }
.foot-big { margin-top: 0; }
.foot-sign { margin-top: 36px; display: inline-block; padding: 10px 18px 9px; border-radius: 999px; background: rgba(14, 6, 18, .72); color: var(--silver); }

@media (max-width: 900px) {
  body { background-size: 620px auto; }
  .program > .wrap, .infos > .wrap { width: calc(100% - 28px); padding: 40px 20px; }
  .program { padding-top: 40px; }
  .ball { width: 150px; height: 150px; margin-top: 64px; }
  .foot-panel { margin-top: 36px; padding: 40px 14px 44px; }
  .foot-sign { line-height: 1.8; }
}
.program.sparkle::before { display: none; }
.ball::before { top: -90px; height: 100px; }
@media (max-width: 900px) { .ball::before { top: -72px; height: 82px; } }

/* Sections sans libellés de face */
.sec-head h2 { margin-top: 0; }
.card h3:first-child { margin-top: 0; }

/* Tampon "in Kosovo" : accroché en bas à droite de "Love", dans le fondu sombre.
   CSS seul (pas de JS), masque PNG pour la texture d'encre, filtre et masque sur deux éléments distincts (robuste iOS Safari) */
.title-wrap { position: relative; width: -webkit-max-content; width: max-content; max-width: 100%; margin: 0 auto; }
.stamp { position: absolute; z-index: 2; right: 0; bottom: 0; margin: 0; pointer-events: none;
  -webkit-transform: translate(38%, 32%) rotate(-8deg); transform: translate(38%, 32%) rotate(-8deg);
  font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; font-size: clamp(28px, 2.8vw, 42px); line-height: 1; letter-spacing: .02em; white-space: nowrap; color: #FF3FA4;
  -webkit-filter: drop-shadow(0 1px 1px rgba(10, 6, 16, .7)) drop-shadow(0 0 10px rgba(255, 63, 164, .6)); filter: drop-shadow(0 1px 1px rgba(10, 6, 16, .7)) drop-shadow(0 0 10px rgba(255, 63, 164, .6)); }
.stamp-ink { position: relative; display: block; background: rgba(10, 6, 16, .62); padding: .3em .58em .34em; border: .2em solid currentColor; border-radius: .3em; -webkit-text-stroke: .045em currentColor;
  -webkit-mask-image: url("stamp-ink.png"); -webkit-mask-size: 200px 200px; -webkit-mask-repeat: repeat;
  mask-image: url("stamp-ink.png"); mask-size: 200px 200px; mask-repeat: repeat; }
.stamp-ink::before { content: ""; position: absolute; top: .12em; right: .12em; bottom: .12em; left: .12em; border: .07em solid currentColor; border-radius: .18em; }
@media (min-width: 901px) {
  .hx-row { margin-top: clamp(46px, 4.4vw, 64px); }
}
@media (max-width: 900px) {
  .stamp { font-size: 23px; -webkit-transform: translate(16%, 62%) rotate(-8deg); transform: translate(16%, 62%) rotate(-8deg); }
  .hx-row { margin-top: 50px; }
}
@media (max-width: 360px) {
  .sec-head h2 { font-size: 34px; }
}

/* Programme : trois cartes illustrées (dessins néon en SVG inline, pas de filtre SVG, lueur en CSS) */
.tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); border-top: 0; }
.track { display: flex; flex-direction: column; gap: 0; padding: 0 0 clamp(24px, 2.4vw, 32px); border: 0; border-radius: clamp(20px, 2vw, 26px); overflow: hidden;
  background: linear-gradient(170deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015) 55%), rgba(8, 4, 12, .45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .22); }
.t-art { margin: 0; padding: clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 24px) clamp(10px, 1vw, 14px);
  background: radial-gradient(ellipse 70% 80% at 50% 35%, rgba(255, 79, 163, .2), rgba(255, 79, 163, 0) 70%), #07040B;
  border-bottom: 1px solid rgba(255, 255, 255, .1); }
.t-art .ill { -webkit-filter: drop-shadow(0 0 2px rgba(255, 92, 173, .85)) drop-shadow(0 0 8px rgba(255, 92, 173, .4)); filter: drop-shadow(0 0 2px rgba(255, 92, 173, .85)) drop-shadow(0 0 8px rgba(255, 92, 173, .4)); }
.t-meta { display: flex; align-items: center; gap: 14px; padding: clamp(22px, 2vw, 28px) clamp(20px, 2vw, 28px) 0; }
.t-num { flex: none; }
.t-date { font-size: clamp(18px, 1.6vw, 22px); }
.t-date span { margin-bottom: 6px; }
.t-body { flex: 1; padding: clamp(16px, 1.6vw, 20px) clamp(20px, 2vw, 28px) 0; }
.t-body h3 { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.05; text-shadow: 0 0 18px rgba(255, 79, 163, .45); }
.t-body p { margin-top: 12px; font-size: 17px; line-height: 1.5; }
.track .t-tag { align-self: flex-start; justify-self: auto; margin: 22px clamp(20px, 2vw, 28px) 0; white-space: normal; line-height: 1.4; }

.ill { display:block; width:100%; height:auto; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.2; }
.ill .p { stroke:#FF5CAD; } .ill .s { stroke:#E6E6F0; }
.ill .pf { fill:#FF5CAD; } .ill .sf { fill:#F2F2F8; }
.ill .thin { stroke-width:1.3; } .ill .dash { stroke-width:1.6; stroke-dasharray:3 4; }
.ill .floor { stroke-width:1.2; stroke-dasharray:2 6; opacity:.6; }
.ill .beam { stroke-width:1.2; opacity:.55; } .ill .back { stroke-width:1.6; opacity:.55; }
@media (max-width: 1079px) and (min-width: 640px) {
  .tracks { grid-template-columns: 1fr; }
  .track { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: 0; }
  .t-art { grid-row: 1 / span 3; display: flex; align-items: center; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .1); }
  .t-meta { padding-top: 26px; }
  .track .t-tag { margin-bottom: 26px; }
}
@media (max-width: 639px) {
  .tracks { grid-template-columns: 1fr; gap: 18px; }
  .t-body h3 { font-size: 29px; }
  .t-body p { font-size: 16.5px; }
}
