/* =============================================================================
   Villette — Jazz à la Villette (overrides, charger après site.css)
   Palette forcée (--vl-*)
   ============================================================================= */

:root {
  --vl-bg: #000;
  --vl-ink: #fff;
  --vl-muted: #9a9a9a;
  --vl-yellow: #ffe600;
  --vl-blue: #2e6bff;
  --vl-red: #e31c23;
  --vl-green: #00a651;
  --vl-orange: #ff6a00;
  --vl-font: "Montserrat", system-ui, sans-serif;
  --vl-grain: 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='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* cadres doodle : --vl-frame (trait unique sur img) */
  --vl-frame-a-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M8 14 Q14 6 20 14 Q26 6 32 14 Q38 6 44 14 Q50 6 56 14 Q62 6 68 14 Q74 6 80 14 Q86 6 92 14 Q94 22 92 28 Q98 34 92 40 Q98 46 92 52 Q98 58 92 64 Q98 70 92 76 Q94 86 84 86 Q78 94 72 86 Q66 94 60 86 Q54 94 48 86 Q42 94 36 86 Q30 94 24 86 Q14 92 14 82 Q6 76 14 70 Q6 64 14 58 Q6 52 14 46 Q6 40 14 34 Q6 28 14 22 Q6 16 8 14 Z' stroke='%23fff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-a-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M8 14 Q14 6 20 14 Q26 6 32 14 Q38 6 44 14 Q50 6 56 14 Q62 6 68 14 Q74 6 80 14 Q86 6 92 14 Q94 22 92 28 Q98 34 92 40 Q98 46 92 52 Q98 58 92 64 Q98 70 92 76 Q94 86 84 86 Q78 94 72 86 Q66 94 60 86 Q54 94 48 86 Q42 94 36 86 Q30 94 24 86 Q14 92 14 82 Q6 76 14 70 Q6 64 14 58 Q6 52 14 46 Q6 40 14 34 Q6 28 14 22 Q6 16 8 14 Z' stroke='%23ffe600' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-a-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M8 14 Q14 6 20 14 Q26 6 32 14 Q38 6 44 14 Q50 6 56 14 Q62 6 68 14 Q74 6 80 14 Q86 6 92 14 Q94 22 92 28 Q98 34 92 40 Q98 46 92 52 Q98 58 92 64 Q98 70 92 76 Q94 86 84 86 Q78 94 72 86 Q66 94 60 86 Q54 94 48 86 Q42 94 36 86 Q30 94 24 86 Q14 92 14 82 Q6 76 14 70 Q6 64 14 58 Q6 52 14 46 Q6 40 14 34 Q6 28 14 22 Q6 16 8 14 Z' stroke='%232e6bff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-a-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M8 14 Q14 6 20 14 Q26 6 32 14 Q38 6 44 14 Q50 6 56 14 Q62 6 68 14 Q74 6 80 14 Q86 6 92 14 Q94 22 92 28 Q98 34 92 40 Q98 46 92 52 Q98 58 92 64 Q98 70 92 76 Q94 86 84 86 Q78 94 72 86 Q66 94 60 86 Q54 94 48 86 Q42 94 36 86 Q30 94 24 86 Q14 92 14 82 Q6 76 14 70 Q6 64 14 58 Q6 52 14 46 Q6 40 14 34 Q6 28 14 22 Q6 16 8 14 Z' stroke='%23e31c23' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-a-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M8 14 Q14 6 20 14 Q26 6 32 14 Q38 6 44 14 Q50 6 56 14 Q62 6 68 14 Q74 6 80 14 Q86 6 92 14 Q94 22 92 28 Q98 34 92 40 Q98 46 92 52 Q98 58 92 64 Q98 70 92 76 Q94 86 84 86 Q78 94 72 86 Q66 94 60 86 Q54 94 48 86 Q42 94 36 86 Q30 94 24 86 Q14 92 14 82 Q6 76 14 70 Q6 64 14 58 Q6 52 14 46 Q6 40 14 34 Q6 28 14 22 Q6 16 8 14 Z' stroke='%2300a651' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-a-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M8 14 Q14 6 20 14 Q26 6 32 14 Q38 6 44 14 Q50 6 56 14 Q62 6 68 14 Q74 6 80 14 Q86 6 92 14 Q94 22 92 28 Q98 34 92 40 Q98 46 92 52 Q98 58 92 64 Q98 70 92 76 Q94 86 84 86 Q78 94 72 86 Q66 94 60 86 Q54 94 48 86 Q42 94 36 86 Q30 94 24 86 Q14 92 14 82 Q6 76 14 70 Q6 64 14 58 Q6 52 14 46 Q6 40 14 34 Q6 28 14 22 Q6 16 8 14 Z' stroke='%23ff6a00' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-b-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M22 10 Q50 0 78 12 Q94 28 88 50 Q96 72 74 90 Q48 98 22 86 Q6 68 12 46 Q6 24 22 10 Z' stroke='%23fff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-b-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M22 10 Q50 0 78 12 Q94 28 88 50 Q96 72 74 90 Q48 98 22 86 Q6 68 12 46 Q6 24 22 10 Z' stroke='%23ffe600' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-b-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M22 10 Q50 0 78 12 Q94 28 88 50 Q96 72 74 90 Q48 98 22 86 Q6 68 12 46 Q6 24 22 10 Z' stroke='%232e6bff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-b-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M22 10 Q50 0 78 12 Q94 28 88 50 Q96 72 74 90 Q48 98 22 86 Q6 68 12 46 Q6 24 22 10 Z' stroke='%23e31c23' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-b-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M22 10 Q50 0 78 12 Q94 28 88 50 Q96 72 74 90 Q48 98 22 86 Q6 68 12 46 Q6 24 22 10 Z' stroke='%2300a651' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-b-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M22 10 Q50 0 78 12 Q94 28 88 50 Q96 72 74 90 Q48 98 22 86 Q6 68 12 46 Q6 24 22 10 Z' stroke='%23ff6a00' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-c-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 22 L24 8 L40 18 L56 6 L74 16 L90 8 L92 30 L80 44 L94 56 L82 70 L92 88 L68 94 L52 82 L34 94 L12 84 L8 64 L20 50 L8 36 Z' stroke='%23fff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-c-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 22 L24 8 L40 18 L56 6 L74 16 L90 8 L92 30 L80 44 L94 56 L82 70 L92 88 L68 94 L52 82 L34 94 L12 84 L8 64 L20 50 L8 36 Z' stroke='%23ffe600' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-c-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 22 L24 8 L40 18 L56 6 L74 16 L90 8 L92 30 L80 44 L94 56 L82 70 L92 88 L68 94 L52 82 L34 94 L12 84 L8 64 L20 50 L8 36 Z' stroke='%232e6bff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-c-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 22 L24 8 L40 18 L56 6 L74 16 L90 8 L92 30 L80 44 L94 56 L82 70 L92 88 L68 94 L52 82 L34 94 L12 84 L8 64 L20 50 L8 36 Z' stroke='%23e31c23' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-c-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 22 L24 8 L40 18 L56 6 L74 16 L90 8 L92 30 L80 44 L94 56 L82 70 L92 88 L68 94 L52 82 L34 94 L12 84 L8 64 L20 50 L8 36 Z' stroke='%2300a651' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-c-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 22 L24 8 L40 18 L56 6 L74 16 L90 8 L92 30 L80 44 L94 56 L82 70 L92 88 L68 94 L52 82 L34 94 L12 84 L8 64 L20 50 L8 36 Z' stroke='%23ff6a00' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-d-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M12 14 Q32 4 52 10 Q66 16 72 8 Q94 24 90 48 Q96 70 78 90 Q52 98 22 88 Q8 70 12 48 Q8 28 12 14 Z' stroke='%23fff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-d-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M12 14 Q32 4 52 10 Q66 16 72 8 Q94 24 90 48 Q96 70 78 90 Q52 98 22 88 Q8 70 12 48 Q8 28 12 14 Z' stroke='%23ffe600' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-d-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M12 14 Q32 4 52 10 Q66 16 72 8 Q94 24 90 48 Q96 70 78 90 Q52 98 22 88 Q8 70 12 48 Q8 28 12 14 Z' stroke='%232e6bff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-d-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M12 14 Q32 4 52 10 Q66 16 72 8 Q94 24 90 48 Q96 70 78 90 Q52 98 22 88 Q8 70 12 48 Q8 28 12 14 Z' stroke='%23e31c23' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-d-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M12 14 Q32 4 52 10 Q66 16 72 8 Q94 24 90 48 Q96 70 78 90 Q52 98 22 88 Q8 70 12 48 Q8 28 12 14 Z' stroke='%2300a651' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-d-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M12 14 Q32 4 52 10 Q66 16 72 8 Q94 24 90 48 Q96 70 78 90 Q52 98 22 88 Q8 70 12 48 Q8 28 12 14 Z' stroke='%23ff6a00' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-e-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 14 Q26 4 38 16 Q50 3 62 16 Q76 4 90 12 Q96 36 84 48 Q96 58 88 72 Q96 88 74 92 Q56 82 42 94 Q26 84 10 90 Q2 70 14 60 Q2 46 12 32 Q4 20 10 14 Z' stroke='%23fff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-e-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 14 Q26 4 38 16 Q50 3 62 16 Q76 4 90 12 Q96 36 84 48 Q96 58 88 72 Q96 88 74 92 Q56 82 42 94 Q26 84 10 90 Q2 70 14 60 Q2 46 12 32 Q4 20 10 14 Z' stroke='%23ffe600' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-e-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 14 Q26 4 38 16 Q50 3 62 16 Q76 4 90 12 Q96 36 84 48 Q96 58 88 72 Q96 88 74 92 Q56 82 42 94 Q26 84 10 90 Q2 70 14 60 Q2 46 12 32 Q4 20 10 14 Z' stroke='%232e6bff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-e-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 14 Q26 4 38 16 Q50 3 62 16 Q76 4 90 12 Q96 36 84 48 Q96 58 88 72 Q96 88 74 92 Q56 82 42 94 Q26 84 10 90 Q2 70 14 60 Q2 46 12 32 Q4 20 10 14 Z' stroke='%23e31c23' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-e-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 14 Q26 4 38 16 Q50 3 62 16 Q76 4 90 12 Q96 36 84 48 Q96 58 88 72 Q96 88 74 92 Q56 82 42 94 Q26 84 10 90 Q2 70 14 60 Q2 46 12 32 Q4 20 10 14 Z' stroke='%2300a651' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-e-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M10 14 Q26 4 38 16 Q50 3 62 16 Q76 4 90 12 Q96 36 84 48 Q96 58 88 72 Q96 88 74 92 Q56 82 42 94 Q26 84 10 90 Q2 70 14 60 Q2 46 12 32 Q4 20 10 14 Z' stroke='%23ff6a00' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-f-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M30 8 Q52 12 72 8 Q90 20 86 42 Q92 60 82 78 Q66 94 44 88 Q22 96 12 74 Q6 52 16 34 Q10 16 30 8 Z' stroke='%23fff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-f-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M30 8 Q52 12 72 8 Q90 20 86 42 Q92 60 82 78 Q66 94 44 88 Q22 96 12 74 Q6 52 16 34 Q10 16 30 8 Z' stroke='%23ffe600' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-f-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M30 8 Q52 12 72 8 Q90 20 86 42 Q92 60 82 78 Q66 94 44 88 Q22 96 12 74 Q6 52 16 34 Q10 16 30 8 Z' stroke='%232e6bff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-f-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M30 8 Q52 12 72 8 Q90 20 86 42 Q92 60 82 78 Q66 94 44 88 Q22 96 12 74 Q6 52 16 34 Q10 16 30 8 Z' stroke='%23e31c23' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-f-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M30 8 Q52 12 72 8 Q90 20 86 42 Q92 60 82 78 Q66 94 44 88 Q22 96 12 74 Q6 52 16 34 Q10 16 30 8 Z' stroke='%2300a651' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-frame-f-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible' fill='none'%3E%3Cpath d='M30 8 Q52 12 72 8 Q90 20 86 42 Q92 60 82 78 Q66 94 44 88 Q22 96 12 74 Q6 52 16 34 Q10 16 30 8 Z' stroke='%23ff6a00' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  /* trait horizontal gribouillé (séparateurs) */
  --vl-scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M1 4 Q12 1 28 5 Q45 8 62 3 Q80 0 98 5 Q115 9 132 2 Q150 6 168 3 Q185 7 199 4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-scribble-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M1 4 Q12 1 28 5 Q45 8 62 3 Q80 0 98 5 Q115 9 132 2 Q150 6 168 3 Q185 7 199 4' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-scribble-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M1 4 Q12 1 28 5 Q45 8 62 3 Q80 0 98 5 Q115 9 132 2 Q150 6 168 3 Q185 7 199 4' stroke='%232e6bff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-scribble-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M1 4 Q12 1 28 5 Q45 8 62 3 Q80 0 98 5 Q115 9 132 2 Q150 6 168 3 Q185 7 199 4' stroke='%23e31c23' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-scribble-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M1 4 Q12 1 28 5 Q45 8 62 3 Q80 0 98 5 Q115 9 132 2 Q150 6 168 3 Q185 7 199 4' stroke='%2300a651' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --vl-scribble-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M1 4 Q12 1 28 5 Q45 8 62 3 Q80 0 98 5 Q115 9 132 2 Q150 6 168 3 Q185 7 199 4' stroke='%23ff6a00' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  /* clip pastilles titre / back */
  --vl-clip-pill: polygon(
    2% 32%,
    8% 12%,
    22% 3%,
    48% 6%,
    72% 1%,
    90% 8%,
    98% 22%,
    99% 48%,
    95% 72%,
    88% 92%,
    62% 99%,
    28% 97%,
    8% 90%,
    1% 68%,
    3% 45%
  );
}

/* Accueil — palette noire forcée */
body:not(.page-mixtape-body) {
  --bg: var(--vl-bg);
  --ink: var(--vl-ink);
  --ink-alt: var(--vl-bg);
  --muted: var(--vl-muted);
  --accent: var(--vl-yellow);
  --line: var(--vl-ink);
  --font-display: var(--vl-font);
  --font-body: var(--vl-font);
  --on-accent: #000;
  background: var(--vl-bg);
  color: var(--vl-ink);
}

/* fallback si pas de frame inline — player.js lit --accent/--muted */
.page-mixtape-body {
  --font-display: var(--vl-font);
  --font-body: var(--vl-font);
  --ink: var(--vl-ink) !important;
  --muted: #c4c4c4 !important;
  --accent: var(--vl-yellow);
  --on-accent: #000;
  --line: var(--vl-ink) !important;
}

/* =============================================================================
   Base
   ============================================================================= */

body:not(.page-mixtape-body) {
  position: relative;
  isolation: isolate;
}

body:not(.page-mixtape-body)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: screen;
  background-image: var(--vl-grain);
}

body:not(.page-mixtape-body) a:not(.global-player-title) {
  color: var(--vl-yellow);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

body:not(.page-mixtape-body) a:not(.global-player-title):hover {
  color: var(--vl-orange);
}

footer {
  border-top: none;
  background: var(--vl-scribble) top center / 100% 8px no-repeat;
  padding-top: 1.5rem;
  letter-spacing: 0.02em;
}

body:not(.page-mixtape-body) footer,
.page-mixtape-body footer {
  color: var(--vl-muted);
  border-top: none;
}

/* =============================================================================
   Accueil — tuiles doodle + titres
   ============================================================================= */

.page-list .site-header {
  background: transparent;
  border-bottom: none;
  padding: 1.5rem 1rem 0.5rem;
}

.brand {
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--vl-ink);
}

.mixtape-grid {
  gap: 3.25rem;
  padding: 1.5rem;
  overflow: visible;
}

.mixtape-grid > li {
  overflow: visible;
}

@media (min-width: 640px) {
  .mixtape-grid {
    gap: 4rem;
    padding: 2rem 10vw;
  }
}

@media (min-width: 960px) {
  .mixtape-grid {
    gap: 4.75rem;
    padding: 2.25rem 15vw;
  }
}

.mixtape-tile {
  container-type: inline-size;
  overflow: visible !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  transition: transform 0.15s ease;
}

.mixtape-tile:hover {
  opacity: 1;
}

.mixtape-grid > li:nth-child(6n + 1) .mixtape-tile {
  transform: rotate(-1.2deg);
}

.mixtape-grid > li:nth-child(6n + 2) .mixtape-tile {
  transform: rotate(0.9deg);
}

.mixtape-grid > li:nth-child(6n + 3) .mixtape-tile {
  transform: rotate(-0.5deg);
}

.mixtape-grid > li:nth-child(6n + 4) .mixtape-tile {
  transform: rotate(1.1deg);
}

.mixtape-grid > li:nth-child(6n + 5) .mixtape-tile {
  transform: rotate(-0.8deg);
}

.mixtape-grid > li:nth-child(6n + 6) .mixtape-tile {
  transform: rotate(1.4deg);
}

.mixtape-grid > li .mixtape-tile:hover {
  transform: rotate(0deg) scale(1.02);
}

/* un seul trait doodle épais en overlay — image non clipée */
.mixtape-tile img {
  z-index: 1;
  border-radius: 0;
  clip-path: none;
}

.mixtape-tile::after,
.page-mixtape-body .cover-frame::after,
.page-mixtape-body .photo-frame::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 2;
  pointer-events: none;
  background: var(--vl-frame-a-yellow) center / 100% 100% no-repeat;
}

.mixtape-grid > li:nth-child(6n + 1) .mixtape-tile::after {
  background-image: var(--vl-frame-a-yellow);
}

.mixtape-grid > li:nth-child(6n + 2) .mixtape-tile::after {
  background-image: var(--vl-frame-b-blue);
}

.mixtape-grid > li:nth-child(6n + 3) .mixtape-tile::after {
  background-image: var(--vl-frame-c-red);
}

.mixtape-grid > li:nth-child(6n + 4) .mixtape-tile::after {
  background-image: var(--vl-frame-d-green);
}

.mixtape-grid > li:nth-child(6n + 5) .mixtape-tile::after {
  background-image: var(--vl-frame-e-orange);
}

.mixtape-grid > li:nth-child(6n + 6) .mixtape-tile::after {
  background-image: var(--vl-frame-f-yellow);
}

.mixtape-grid > li:nth-child(6n + 1) .mixtape-tile:hover::after {
  background-image: var(--vl-frame-a-white);
}

.mixtape-grid > li:nth-child(6n + 2) .mixtape-tile:hover::after {
  background-image: var(--vl-frame-b-white);
}

.mixtape-grid > li:nth-child(6n + 3) .mixtape-tile:hover::after {
  background-image: var(--vl-frame-c-white);
}

.mixtape-grid > li:nth-child(6n + 4) .mixtape-tile:hover::after {
  background-image: var(--vl-frame-d-white);
}

.mixtape-grid > li:nth-child(6n + 5) .mixtape-tile:hover::after {
  background-image: var(--vl-frame-e-white);
}

.mixtape-grid > li:nth-child(6n + 6) .mixtape-tile:hover::after {
  background-image: var(--vl-frame-f-white);
}

/* pastilles titre — clip doodle + padding (ignore --tile-title) */
.mixtape-tile-title {
  left: 0.35rem;
  right: auto;
  bottom: 0.35rem;
  z-index: 3;
  max-width: calc(100% - 0.5rem);
  width: max-content;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid #000;
  border-radius: 0;
  clip-path: var(--vl-clip-pill);
  font-weight: 800;
  font-size: clamp(0.85rem, 7.5cqw, 1.45rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: none;
  transform: rotate(-2deg);
  box-shadow: none;
}

.mixtape-grid > li:nth-child(6n + 1) .mixtape-tile-title {
  background: var(--vl-yellow);
  color: var(--vl-blue);
  transform: rotate(-2.5deg);
}

.mixtape-grid > li:nth-child(6n + 2) .mixtape-tile-title {
  background: var(--vl-blue);
  color: var(--vl-yellow);
  transform: rotate(1.8deg);
}

.mixtape-grid > li:nth-child(6n + 3) .mixtape-tile-title {
  background: var(--vl-red);
  color: #fff;
  transform: rotate(-1.2deg);
}

.mixtape-grid > li:nth-child(6n + 4) .mixtape-tile-title {
  background: var(--vl-green);
  color: #fff;
  transform: rotate(2deg);
}

.mixtape-grid > li:nth-child(6n + 5) .mixtape-tile-title {
  background: var(--vl-orange);
  color: #fff;
  transform: rotate(-0.8deg);
}

.mixtape-grid > li:nth-child(6n + 6) .mixtape-tile-title {
  background: var(--vl-yellow);
  color: var(--vl-blue);
  transform: rotate(1.5deg);
}

/* pastille player global — couleurs fixes, indépendantes du thème page */
.global-player {
  padding: 0.55rem 1.1rem;
  border: 1.5px solid #000;
  border-radius: 0;
  clip-path: var(--vl-clip-pill);
  background: #ffe600;
  color: #2e6bff;
  font-weight: 800;
  font-size: clamp(0.85rem, 3.5vw, 1.05rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 20px rgb(0 0 0 / 35%);
  transition: transform 0.15s ease;
}

.global-player:hover {
  transform: rotate(-0.5deg);
}

.global-player-title {
  color: #2e6bff;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
}

.global-player-title:hover {
  color: #2e6bff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* =============================================================================
   Page mixtape — chrome 100% --vl-*
   ============================================================================= */

.page-mixtape-body {
  background-color: var(--vl-bg);
  color: var(--vl-ink);
  border-top: none;
}

.page-mixtape-body::before {
  display: block;
  opacity: 0.1;
  mix-blend-mode: screen;
  filter: none;
  background: var(--vl-grain);
}

.page-mixtape-body::after {
  display: none;
}

.page-mixtape-body .site-header {
  padding: 0;
  margin: 1rem;
}

.page-mixtape-body .back {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 0;
  clip-path: var(--vl-clip-pill);
  background: var(--vl-ink);
  color: var(--vl-bg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: none;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.page-mixtape-body .back:hover {
  background: var(--accent);
  color: var(--on-accent);
  transform: rotate(-1.5deg);
}

/* cover carrée + un trait doodle */
.page-mixtape-body .cover-frame {
  position: relative;
  width: min(100%, 20rem);
  margin-inline: auto;
}

.page-mixtape-body .cover {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  filter: none;
}

.page-mixtape-body .cover-frame::after {
  background-image: var(--vl-cover-frame, var(--vl-frame-a-yellow));
}

.page-mixtape-body .cover-frame:hover::after {
  background-image: var(--vl-cover-frame-hover, var(--vl-frame-a-white));
}

@media (min-width: 640px) {
  .page-mixtape-body .cover-frame {
    margin-inline: 0;
    width: 14rem;
  }
}

.page-mixtape-body h2 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--vl-ink);
}

.page-mixtape-body section + section {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: none;
  background: var(--vl-scribble) top center / 100% 8px no-repeat;
}

.page-mixtape-body .identity-text time,
.page-mixtape-body .summary {
  color: var(--vl-muted);
}

.page-mixtape-body .identity-text h1,
.page-mixtape-body .title,
.page-mixtape-body .identity-text {
  color: var(--vl-ink);
}

/* --- Player --- */

.page-mixtape-body .player {
  padding: 0.25rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--vl-ink);
  box-shadow: none;
}

/* cadre doodle autour de la waveform (pas tout le player) */
.page-mixtape-body .player-wave {
  position: relative;
  padding: 0.35rem 0.5rem;
}

.page-mixtape-body .player-wave input[type="range"] {
  accent-color: var(--accent);
}

.page-mixtape-body .player-toggle {
  border: 2.5px solid #000;
  border-radius: 0;
  clip-path: var(--vl-clip-pill);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
  transition: transform 0.15s ease;
}

.page-mixtape-body .player-toggle:hover {
  transform: rotate(-3deg) scale(1.05);
  filter: brightness(1.12);
}

.page-mixtape-body .player-toggle:active {
  transform: rotate(0deg) scale(0.98);
}

.page-mixtape-body .player-times {
  color: var(--vl-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- Tracklist --- */

.page-mixtape-body .tracklist ol {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--vl-ink);
  box-shadow: none;
  overflow: visible;
}

.page-mixtape-body .tracklist li {
  position: relative;
  border-top: none;
  border-bottom: none;
}

.page-mixtape-body .tracklist li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 8px;
  pointer-events: none;
  background: var(--vl-scribble) center / 100% 100% no-repeat;
}

.page-mixtape-body .tracklist li:nth-child(even):not(:first-child)::before {
  background-image: var(--vl-scribble-accent, var(--vl-scribble-yellow));
  transform: scaleY(-1);
}

.page-mixtape-body .track-seek,
.page-mixtape-body .track-static {
  padding: 0.9rem 0.85rem;
}

.page-mixtape-body .track-seek:hover,
.page-mixtape-body .track-seek:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

.page-mixtape-body .track-seek.is-current {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}

.page-mixtape-body .timecode {
  color: var(--vl-muted);
  font-variant-numeric: tabular-nums;
}

.page-mixtape-body .track-seek:hover .timecode,
.page-mixtape-body .track-seek.is-current .timecode {
  color: inherit;
  opacity: 0.75;
}

/* --- Photos --- */

.page-mixtape-body .photo-frame {
  position: relative;
}

.page-mixtape-body .photo-flow img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
}

.page-mixtape-body .photo-frame:nth-child(odd)::after {
  background-image: var(--vl-frame-a-blue);
}

.page-mixtape-body .photo-frame:nth-child(even)::after {
  background-image: var(--vl-frame-c-green);
}

.page-mixtape-body .photo-frame:hover::after {
  background-image: var(--vl-frame-a-white);
}

.page-mixtape-body .photo-frame:nth-child(even):hover::after {
  background-image: var(--vl-frame-c-white);
}

/* --- Références --- */

.page-mixtape-body .references-body a {
  font-weight: 800;
  color: var(--accent);
}

.page-mixtape-body .references-body a:hover {
  color: color-mix(in srgb, var(--accent) 70%, white);
}

/* =============================================================================
   Accessibilité
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .mixtape-tile,
  .global-player,
  .page-mixtape-body .player-toggle,
  .page-mixtape-body .back {
    transition: none;
  }

  .mixtape-grid > li:nth-child(6n + 1) .mixtape-tile,
  .mixtape-grid > li:nth-child(6n + 2) .mixtape-tile,
  .mixtape-grid > li:nth-child(6n + 3) .mixtape-tile,
  .mixtape-grid > li:nth-child(6n + 4) .mixtape-tile,
  .mixtape-grid > li:nth-child(6n + 5) .mixtape-tile,
  .mixtape-grid > li:nth-child(6n + 6) .mixtape-tile,
  .mixtape-tile:hover,
  .mixtape-tile-title,
  .mixtape-grid > li:nth-child(6n + 1) .mixtape-tile-title,
  .mixtape-grid > li:nth-child(6n + 2) .mixtape-tile-title,
  .mixtape-grid > li:nth-child(6n + 3) .mixtape-tile-title,
  .mixtape-grid > li:nth-child(6n + 4) .mixtape-tile-title,
  .mixtape-grid > li:nth-child(6n + 5) .mixtape-tile-title,
  .mixtape-grid > li:nth-child(6n + 6) .mixtape-tile-title,
  .global-player,
  .global-player:hover,
  .page-mixtape-body .back:hover,
  .page-mixtape-body .player-toggle:hover,
  .page-mixtape-body .player-toggle:active {
    transform: none;
  }
}