{"id":327,"date":"2026-03-23T17:56:45","date_gmt":"2026-03-23T17:56:45","guid":{"rendered":"https:\/\/www.asylum-art.com\/?page_id=327"},"modified":"2026-03-31T21:05:10","modified_gmt":"2026-03-31T21:05:10","slug":"test","status":"publish","type":"page","link":"https:\/\/www.asylum-art.com\/","title":{"rendered":"Asylum Art Evenements &#8211; Com\u00e9dies musicales pour petits &amp; grands"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"327\" class=\"elementor elementor-327\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f415a81 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"f415a81\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c4a88e3 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"c4a88e3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b6861f elementor-widget elementor-widget-heading\" data-id=\"1b6861f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Le plan \u00e9tait parfait. C'est tout le reste qui va rater.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39ac7ea elementor-widget elementor-widget-text-editor\" data-id=\"39ac7ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>D\u00e9couvrez le nouveau spectacle de la troupe Asylum, et embarquez pour un voyage avec les plus grands m\u00e9chants de l&rsquo;histoire !<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fbe332 elementor-widget elementor-widget-html\" data-id=\"6fbe332\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<style>\r\n\/* ============================================================\r\n   BOUTON \u2014 reste dans le flux Elementor, pas de position fixed\r\n   ============================================================ *\/\r\n.parchment-trigger {\r\n  position: relative;\r\n  padding: clamp(0.8rem, 2vw, 1.2rem) clamp(1.5rem, 4vw, 3rem);\r\n  background: transparent;\r\n  border: 2px solid #c9a227;\r\n  color: #ffd700;\r\n  font-family: 'Cinzel Decorative', serif;\r\n  font-size: clamp(0.7rem, 1.8vw, 1rem);\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  cursor: pointer;\r\n  transition: all 0.4s ease;\r\n  overflow: hidden;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.6em;\r\n  \/* Pas de margin\/padding parasite *\/\r\n  margin: 0;\r\n  vertical-align: middle;\r\n}\r\n.parchment-trigger::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(135deg, rgba(201,162,39,0.15), transparent, rgba(201,162,39,0.1));\r\n  opacity: 0;\r\n  transition: opacity 0.4s;\r\n}\r\n.parchment-trigger::after {\r\n  content: '';\r\n  position: absolute; top:-100%; left:-100%;\r\n  width: 300%; height: 300%;\r\n  background: linear-gradient(105deg, transparent 40%, rgba(255,215,0,0.25) 50%, transparent 60%);\r\n  transition: transform 0.7s ease;\r\n  transform: translateX(-100%);\r\n}\r\n.parchment-trigger:hover::before { opacity: 1; }\r\n.parchment-trigger:hover::after  { transform: translateX(50%); }\r\n.parchment-trigger:hover {\r\n  border-color: #ffd700;\r\n  box-shadow: 0 0 30px rgba(255,215,0,0.3), inset 0 0 20px rgba(255,215,0,0.1);\r\n  letter-spacing: 0.35em;\r\n  color: #fff;\r\n  background:transparent !important;\r\n}\r\n.parchment-trigger .btn-corner {\r\n  position: absolute;\r\n  width: 8px; height: 8px;\r\n  border-color: #ffd700; border-style: solid;\r\n  transition: all 0.4s; pointer-events: none;\r\n}\r\n.parchment-trigger .btn-corner.tl { top:-1px; left:-1px;   border-width:2px 0 0 2px; }\r\n.parchment-trigger .btn-corner.tr { top:-1px; right:-1px;  border-width:2px 2px 0 0; }\r\n.parchment-trigger .btn-corner.bl { bottom:-1px; left:-1px; border-width:0 0 2px 2px; }\r\n.parchment-trigger .btn-corner.br { bottom:-1px; right:-1px;border-width:0 2px 2px 0; }\r\n.parchment-trigger:hover .btn-corner { width:14px; height:14px; }\r\n.parchment-trigger .btn-quill {\r\n  width:1.1em; height:1.1em; flex-shrink:0;\r\n  fill:#ffd700; transition:fill 0.4s;\r\n}\r\n.parchment-trigger:hover .btn-quill { fill:#fff; }\r\n\r\n\/* ============================================================\r\n   TOUT LE RESTE est inject\u00e9 dans <body> par JS\r\n   Ces styles utilisent un pr\u00e9fixe .pchmnt- pour ne pas\r\n   entrer en conflit avec les styles Elementor\/WordPress\r\n   ============================================================ *\/\r\n\r\n\/* Overlay *\/\r\n.pchmnt-overlay {\r\n  position: fixed !important;\r\n  inset: 0 !important;\r\n  z-index: 999990 !important;\r\n  pointer-events: none;        \/* \u2190 d\u00e9j\u00e0 pr\u00e9sent normalement *\/\r\n  opacity: 0;\r\n  background: rgba(5,5,20,0.75);\r\n  backdrop-filter: blur(2px);\r\n  transition: opacity 0.5s ease;\r\n  margin: 0 !important; padding: 0 !important;\r\n  width: 100% !important; height: 100% !important;\r\n  top: 0 !important; left: 0 !important;\r\n  transform: none !important;\r\n}\r\n.pchmnt-overlay.active {\r\n  pointer-events: all;\r\n  opacity: 1;\r\n}\r\n\r\n.pchmnt-scroll {\r\n  position: fixed !important;\r\n  bottom: 0 !important;\r\n  left: 50% !important;\r\n  transform: translateX(-50%) translateY(105%) !important;\r\n  width: min(900px, 95vw) !important;\r\n  z-index: 999995 !important;\r\n  pointer-events: none !important;   \/* \u2190 AJOUTER cette ligne *\/\r\n  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1) !important;\r\n  margin: 0 !important;\r\n  max-width: none !important;\r\n}\r\n.pchmnt-scroll.unfurled {\r\n  transform: translateX(-50%) translateY(0) !important;\r\n  pointer-events: all !important;    \/* \u2190 AJOUTER cette ligne *\/\r\n}\r\n\r\n\/* Corps *\/\r\n.pchmnt-body {\r\n  position: relative;\r\n  min-height: 100vh;\r\n  background:\r\n    url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='400' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='saturate' values='0'\/%3E%3C\/filter%3E%3Crect width='400' height='600' filter='url(%23n)' opacity='0.08'\/%3E%3C\/svg%3E\"),\r\n    radial-gradient(ellipse at 15% 20%, rgba(150,90,20,0.12) 0%, transparent 40%),\r\n    radial-gradient(ellipse at 85% 70%, rgba(120,70,10,0.10) 0%, transparent 35%),\r\n    linear-gradient(180deg,\r\n      #e8d4a0 0%,#f2e4b8 8%,#f4e9c4 20%,\r\n      #ede0ae 40%,#f0e4b8 60%,\r\n      #e8d69e 80%,#dcc882 92%,#c9b060 100%\r\n    );\r\n  padding: clamp(3rem,8vh,6rem) clamp(1.5rem,5vw,5rem) clamp(5rem,12vh,9rem);\r\n  border-left:  3px solid rgba(139,105,20,0.3);\r\n  border-right: 3px solid rgba(139,105,20,0.3);\r\n  overflow: hidden;\r\n  box-sizing: border-box;\r\n}\r\n.pchmnt-body::before {\r\n  content:'';\r\n  position:absolute; inset:0;\r\n  background:\r\n    linear-gradient(to right,  rgba(100,60,10,0.25) 0%,transparent 6%,transparent 94%,rgba(100,60,10,0.25) 100%),\r\n    linear-gradient(to bottom, rgba(80,50,5,0.2) 0%,transparent 5%,transparent 95%,rgba(80,50,5,0.3) 100%);\r\n  pointer-events:none;\r\n}\r\n\r\n\/* Filigrane *\/\r\n.pchmnt-watermark {\r\n  position:absolute; top:50%; left:50%;\r\n  transform:translate(-50%,-50%);\r\n  width:min(70vw,500px); opacity:0.028;\r\n  pointer-events:none; z-index:0;\r\n}\r\n\r\n\/* Lignes de r\u00e8gle *\/\r\n.pchmnt-ruled {\r\n  position:absolute;\r\n  inset: clamp(3rem,8vh,6rem) clamp(1.5rem,5vw,5rem) clamp(5rem,12vh,9rem);\r\n  background-image:repeating-linear-gradient(\r\n    transparent, transparent calc(1.9em - 1px),\r\n    rgba(139,105,20,0.13) calc(1.9em - 1px),\r\n    rgba(139,105,20,0.13) 1.9em\r\n  );\r\n  pointer-events:none; z-index:1;\r\n}\r\n\r\n\/* Trous de ver *\/\r\n.pchmnt-worm {\r\n  position:absolute; border-radius:50%;\r\n  background:radial-gradient(circle,rgba(100,70,20,0.4),rgba(139,105,20,0.1));\r\n  opacity:0.5; z-index:2;\r\n}\r\n\r\n\/* Cylindre dor\u00e9 *\/\r\n.pchmnt-rod {\r\n  position:absolute; left:-12px; right:-12px;\r\n  height:clamp(28px,5vw,50px); border-radius:50%; z-index:10;\r\n  background:linear-gradient(180deg,\r\n    #f5c842 0%,#c9a227 15%,#8b6914 30%,\r\n    #c9a227 45%,#ffd700 50%,#c9a227 55%,\r\n    #8b6914 70%,#c9a227 85%,#f5c842 100%\r\n  );\r\n  box-shadow:0 4px 15px rgba(0,0,0,0.5),inset 0 2px 4px rgba(255,255,255,0.3);\r\n}\r\n.pchmnt-rod.top    { top:    calc(-1 * clamp(14px,2.5vw,25px)); }\r\n.pchmnt-rod.bottom { bottom: calc(-1 * clamp(14px,2.5vw,25px));\r\n  box-shadow:0 6px 20px rgba(0,0,0,0.7),inset 0 2px 4px rgba(255,255,255,0.3); }\r\n.pchmnt-rod::before,.pchmnt-rod::after {\r\n  content:''; position:absolute; top:50%; transform:translateY(-50%);\r\n  width:clamp(18px,3vw,30px); height:clamp(18px,3vw,30px);\r\n  border-radius:50%;\r\n  background:radial-gradient(circle at 35% 35%,#ffd700,#8b6914);\r\n  box-shadow:0 2px 8px rgba(0,0,0,0.5);\r\n}\r\n.pchmnt-rod::before { left:  calc(-1 * clamp(9px,1.5vw,15px)); }\r\n.pchmnt-rod::after  { right: calc(-1 * clamp(9px,1.5vw,15px)); }\r\n\r\n\/* Contenu *\/\r\n.pchmnt-content { position:relative; z-index:2; }\r\n\r\n.pchmnt-header { text-align:center; margin-bottom:clamp(1.5rem,4vh,3rem); }\r\n\r\n.pchmnt-seal {\r\n  width:clamp(60px,10vw,100px); height:clamp(60px,10vw,100px);\r\n  margin:0 auto 1rem;\r\n  filter:drop-shadow(0 2px 8px rgba(139,0,0,0.5));\r\n  display:block;\r\n}\r\n\r\n.pchmnt-title {\r\n  font-family:'Cinzel Decorative',serif;\r\n  font-size:clamp(1.4rem,4vw,3rem);\r\n  color:#1a0a00; font-weight:900; line-height:1.2;\r\n  opacity:0; transition:opacity 0.8s ease;\r\n  margin:0; padding:0;\r\n}\r\n.pchmnt-subtitle {\r\n  font-family:'IM Fell English',serif; font-style:italic;\r\n  font-size:clamp(0.9rem,2vw,1.3rem);\r\n  color:#3d1a00; margin-top:0.3rem;\r\n  opacity:0; transition:opacity 0.6s ease 0.3s;\r\n  padding:0;\r\n}\r\n.pchmnt-divider {\r\n  text-align:center; color:#8b6914;\r\n  font-size:clamp(0.8rem,1.5vw,1.1rem);\r\n  letter-spacing:0.5em;\r\n  margin:clamp(0.8rem,2vh,1.5rem) 0;\r\n  opacity:0; transition:opacity 0.5s ease 0.5s;\r\n}\r\n.pchmnt-title.show,.pchmnt-subtitle.show,.pchmnt-divider.show { opacity:1; }\r\n\r\n\/* Texte plume *\/\r\n.pchmnt-text {\r\n  font-family:'IM Fell English',serif;\r\n  font-size:clamp(0.9rem,2vw,1.2rem);\r\n  line-height:1.9; color:#1a0a00;\r\n}\r\n.pchmnt-para { margin-bottom:clamp(0.8rem,2vh,1.4rem); }\r\n.pchmnt-para.indent { text-indent:2em; }\r\n.pchmnt-para.cited {\r\n  font-style:italic; opacity:0.85;\r\n  border-left:2px solid rgba(139,105,20,0.3);\r\n  padding-left:1em; margin-left:1em;\r\n  font-size:clamp(0.85rem,1.8vw,1.05rem);\r\n}\r\n\r\n\/* Curseur *\/\r\n.pchmnt-cursor {\r\n  display:inline-block; width:2px; height:1.1em;\r\n  background:linear-gradient(to bottom,#1a0a00,transparent);\r\n  vertical-align:text-bottom; margin-left:1px;\r\n  animation:pchmntBlink 0.6s ease-in-out infinite alternate;\r\n  opacity:0;\r\n}\r\n.pchmnt-cursor.active { opacity:1; }\r\n@keyframes pchmntBlink {\r\n  from { opacity:1; transform:scaleY(1); }\r\n  to   { opacity:0.3; transform:scaleY(0.8); }\r\n}\r\n\r\n\/* Plume *\/\r\n.pchmnt-quill {\r\n  position:fixed !important;\r\n  z-index:999999 !important;\r\n  pointer-events:none;\r\n  opacity:0; transition:opacity 0.3s;\r\n  transform:rotate(-35deg);\r\n  width:clamp(24px,3.5vw,40px); height:auto;\r\n  top:0 !important; left:0 !important;\r\n  margin:0 !important;\r\n}\r\n.pchmnt-quill.writing { opacity:1; }\r\n\r\n\/* Signature *\/\r\n.pchmnt-sig {\r\n  margin-top:clamp(2rem,5vh,4rem);\r\n  display:flex; justify-content:space-between;\r\n  align-items:flex-end; flex-wrap:wrap; gap:1.5rem;\r\n  opacity:0; transition:opacity 1s ease;\r\n}\r\n.pchmnt-sig.show { opacity:1; }\r\n.pchmnt-sig-left {\r\n  font-family:'IM Fell English',serif; font-style:italic;\r\n  color:#1a0a00; font-size:clamp(0.75rem,1.5vw,0.95rem);\r\n  opacity:0.7; line-height:1.6;\r\n}\r\n.pchmnt-sig-name {\r\n  font-family:'Cinzel Decorative',serif;\r\n  font-size:clamp(1.2rem,3vw,2.2rem);\r\n  color:#8b0000; font-style:italic; line-height:1.3;\r\n  text-shadow:1px 1px 3px rgba(139,0,0,0.3);\r\n}\r\n.pchmnt-sig-caption {\r\n  font-family:'IM Fell English',serif; font-style:italic;\r\n  font-size:clamp(0.7rem,1.3vw,0.85rem);\r\n  color:#3d1a00; margin-top:0.3rem; opacity:0.7;\r\n}\r\n.pchmnt-wax { width:clamp(55px,9vw,90px); height:clamp(55px,9vw,90px); flex-shrink:0; }\r\n\r\n\/* Fermer *\/\r\n.pchmnt-close {\r\n  position:fixed !important;\r\n  top:clamp(0.8rem,2vh,1.5rem) !important;\r\n  right:clamp(0.8rem,2vw,1.5rem) !important;\r\n  z-index:999999 !important;\r\n  background:rgba(5,5,20,0.85);\r\n  border:1px solid #c9a227; color:#c9a227;\r\n  width:clamp(36px,5vw,48px); height:clamp(36px,5vw,48px);\r\n  border-radius:50%;\r\n  font-size:clamp(1rem,2vw,1.3rem);\r\n  cursor:pointer; display:flex;\r\n  align-items:center; justify-content:center;\r\n  opacity:0;\r\n  transform:rotate(-90deg) scale(0.5) !important;\r\n  transition:opacity 0.5s cubic-bezier(0.34,1.56,0.64,1),\r\n             transform 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;\r\n  backdrop-filter:blur(10px);\r\n  margin:0 !important; padding:0 !important;\r\n  line-height:1;\r\n  font-family:sans-serif;\r\n}\r\n.pchmnt-close.visible {\r\n  opacity:1;\r\n  transform:rotate(0deg) scale(1) !important;\r\n}\r\n.pchmnt-close:hover {\r\n  background:rgba(201,162,39,0.2);\r\n  box-shadow:0 0 20px rgba(201,162,39,0.4);\r\n  transform:rotate(90deg) scale(1.1) !important;\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<button class=\"parchment-trigger\" id=\"parchmentBtn\">\r\n  <svg class=\"btn-quill\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n    <path d=\"M20.707 3.293a1 1 0 0 0-1.414 0C17.5 5.086 13 10 10 14c-1 1.333-1.8 2.6-2 3.5L7 21l3.5-1c.9-.2 2.167-1 3.5-2 4-3 8.914-7.5 10.707-9.293a1 1 0 0 0 0-1.414l-4-4zM8.5 17.5c.3-.8.9-1.8 1.7-2.8L18 7l1 1-7.8 7.8c-1 .8-2 1.4-2.7 1.7z\"\/>\r\n    <path d=\"M6 20 Q5 22 3 22 Q5 20 6 18z\" opacity=\"0.6\"\/>\r\n  <\/svg>\r\n  Lire le Parchemin Maudit\r\n<\/button>\r\n\r\n<script>\r\n(function () {\r\n  \/* ============================================================\r\n     On injecte TOUT dans document.body pour \u00e9chapper \u00e0\r\n     tous les contextes d'empilement d'Elementor\r\n     ============================================================ *\/\r\n\r\n  \/* ---------- HTML \u00e0 injecter ---------- *\/\r\n  const html = `\r\n  <!-- Overlay -->\r\n  <div class=\"pchmnt-overlay\" id=\"pchmntOverlay\"><\/div>\r\n\r\n  <!-- Bouton fermer -->\r\n  <button class=\"pchmnt-close\" id=\"pchmntClose\" aria-label=\"Fermer\">&#x2715;<\/button>\r\n\r\n  <!-- Plume -->\r\n  <svg class=\"pchmnt-quill\" id=\"pchmntQuill\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n    <defs>\r\n      <linearGradient id=\"qg2\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n        <stop offset=\"0%\"   stop-color=\"#f5f0e0\"\/>\r\n        <stop offset=\"40%\"  stop-color=\"#d4c88a\"\/>\r\n        <stop offset=\"100%\" stop-color=\"#8b7030\"\/>\r\n      <\/linearGradient>\r\n    <\/defs>\r\n    <line x1=\"26\" y1=\"4\" x2=\"8\" y2=\"28\" stroke=\"#6b5010\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/>\r\n    <path d=\"M26,4 Q22,10 20,14 Q24,8 26,4Z\"   fill=\"url(#qg2)\" opacity=\"0.9\"\/>\r\n    <path d=\"M24,7 Q19,13 17,17 Q22,11 24,7Z\"   fill=\"url(#qg2)\" opacity=\"0.85\"\/>\r\n    <path d=\"M22,10 Q17,15 15,19 Q19,14 22,10Z\" fill=\"url(#qg2)\" opacity=\"0.8\"\/>\r\n    <path d=\"M20,13 Q15,17 13,21 Q17,16 20,13Z\" fill=\"url(#qg2)\" opacity=\"0.75\"\/>\r\n    <path d=\"M18,16 Q13,19 11,23 Q15,18 18,16Z\" fill=\"url(#qg2)\" opacity=\"0.7\"\/>\r\n    <path d=\"M26,4 Q20,8 17,13 Q21,6 26,4Z\"     fill=\"url(#qg2)\" opacity=\"0.7\"\/>\r\n    <path d=\"M24,7 Q18,11 15,16 Q19,9 24,7Z\"    fill=\"url(#qg2)\" opacity=\"0.65\"\/>\r\n    <path d=\"M22,10 Q16,13 13,18 Q17,12 22,10Z\" fill=\"url(#qg2)\" opacity=\"0.6\"\/>\r\n    <path d=\"M10,26 Q9,29 8,30 Q9,27 11,24Z\" fill=\"#3a2000\"\/>\r\n    <ellipse cx=\"8\" cy=\"29.5\" rx=\"1\" ry=\"1.5\" fill=\"#1a0a00\" opacity=\"0.7\"\/>\r\n  <\/svg>\r\n\r\n  <!-- Parchemin -->\r\n  <div class=\"pchmnt-scroll\" id=\"pchmntScroll\">\r\n    <div class=\"pchmnt-rod top\"><\/div>\r\n    <div class=\"pchmnt-body\">\r\n      <div class=\"pchmnt-ruled\"><\/div>\r\n\r\n      <!-- Filigrane -->\r\n      <svg class=\"pchmnt-watermark\" viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n        <ellipse cx=\"100\" cy=\"85\" rx=\"60\" ry=\"65\" fill=\"#8b6914\"\/>\r\n        <ellipse cx=\"75\"  cy=\"90\" rx=\"18\" ry=\"20\" fill=\"#f4e4c1\"\/>\r\n        <ellipse cx=\"125\" cy=\"90\" rx=\"18\" ry=\"20\" fill=\"#f4e4c1\"\/>\r\n        <ellipse cx=\"100\" cy=\"115\" rx=\"8\" ry=\"6\"  fill=\"#f4e4c1\"\/>\r\n        <rect x=\"70\"  y=\"130\" width=\"16\" height=\"20\" rx=\"4\" fill=\"#8b6914\"\/>\r\n        <rect x=\"92\"  y=\"130\" width=\"16\" height=\"20\" rx=\"4\" fill=\"#8b6914\"\/>\r\n        <rect x=\"114\" y=\"130\" width=\"16\" height=\"20\" rx=\"4\" fill=\"#8b6914\"\/>\r\n      <\/svg>\r\n\r\n      <!-- Trous de ver -->\r\n      <div class=\"pchmnt-worm\" style=\"width:8px;height:8px;top:15%;left:8%\"><\/div>\r\n      <div class=\"pchmnt-worm\" style=\"width:5px;height:5px;top:35%;right:10%\"><\/div>\r\n      <div class=\"pchmnt-worm\" style=\"width:6px;height:6px;top:62%;left:5%\"><\/div>\r\n      <div class=\"pchmnt-worm\" style=\"width:4px;height:4px;top:78%;right:7%\"><\/div>\r\n\r\n      <div class=\"pchmnt-content\">\r\n        <!-- En-t\u00eate -->\r\n        <div class=\"pchmnt-header\">\r\n          <svg class=\"pchmnt-seal\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <defs>\r\n              <radialGradient id=\"sg2\" cx=\"40%\" cy=\"40%\">\r\n                <stop offset=\"0%\"   stop-color=\"#c0392b\"\/>\r\n                <stop offset=\"100%\" stop-color=\"#5a0000\"\/>\r\n              <\/radialGradient>\r\n            <\/defs>\r\n            <polygon points=\"50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35\"\r\n              fill=\"url(#sg2)\" stroke=\"#c9a227\" stroke-width=\"1.5\"\/>\r\n            <ellipse cx=\"50\" cy=\"46\" rx=\"12\" ry=\"13\" fill=\"#c9a227\" opacity=\"0.85\"\/>\r\n            <ellipse cx=\"44\" cy=\"49\" rx=\"4\"  ry=\"4.5\" fill=\"#5a0000\"\/>\r\n            <ellipse cx=\"56\" cy=\"49\" rx=\"4\"  ry=\"4.5\" fill=\"#5a0000\"\/>\r\n            <ellipse cx=\"50\" cy=\"58\" rx=\"3\"  ry=\"2\"   fill=\"#5a0000\"\/>\r\n            <rect x=\"43\" y=\"62\" width=\"4\" height=\"5\" rx=\"1.5\" fill=\"#c9a227\" opacity=\"0.85\"\/>\r\n            <rect x=\"49\" y=\"62\" width=\"4\" height=\"5\" rx=\"1.5\" fill=\"#c9a227\" opacity=\"0.85\"\/>\r\n            <rect x=\"55\" y=\"62\" width=\"4\" height=\"5\" rx=\"1.5\" fill=\"#c9a227\" opacity=\"0.85\"\/>\r\n            <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" stroke=\"#c9a227\" stroke-width=\"1\" stroke-dasharray=\"3,3\"\/>\r\n          <\/svg>\r\n          <div class=\"pchmnt-title\"    id=\"pchmntTitle\">Oh ! Les vilains !<\/div>\r\n          <div class=\"pchmnt-subtitle\" id=\"pchmntSub\">Anno Domini Maleficorum \u2014 En cette nuit sans lune<\/div>\r\n          <div class=\"pchmnt-divider\"  id=\"pchmntDiv\">\u2014 &nbsp; &#9875; &nbsp; &#10022; &nbsp; &#9875; &nbsp; \u2014<\/div>\r\n        <\/div>\r\n\r\n        <!-- Texte \u00e0 la plume -->\r\n        <div class=\"pchmnt-text\">\r\n          <div class=\"pchmnt-para indent\" id=\"pp1\"><\/div>\r\n          <div class=\"pchmnt-para indent\" id=\"pp2\"><\/div>\r\n          <div class=\"pchmnt-para indent\" id=\"pp3\"><\/div>\r\n          <div class=\"pchmnt-para indent\"  id=\"pp4\"><\/div>\r\n          <div class=\"pchmnt-para indent\" id=\"pp5\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- Signature -->\r\n        <div class=\"pchmnt-sig\" id=\"pchmntSig\">\r\n          <div class=\"pchmnt-sig-left\">\r\n            R\u00e9dig\u00e9 de ma propre griffe<br>\r\n            \u00e0 bord du Jolly Roger<br>\r\n            <em>Par vent et mar\u00e9e noire<\/em>\r\n          <\/div>\r\n          <div>\r\n            <div class=\"pchmnt-sig-name\">Capitaine J. Crochet\r\n              <svg style=\"width:0.8em;height:0.8em;vertical-align:middle;margin-left:0.1em\" viewBox=\"0 0 40 60\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                <path d=\"M20 5 L20 38 Q20 52 32 55 Q44 58 44 46 Q44 38 36 38\"\r\n                  fill=\"none\" stroke=\"#8b0000\" stroke-width=\"5\" stroke-linecap=\"round\"\/>\r\n                <line x1=\"13\" y1=\"5\" x2=\"27\" y2=\"5\" stroke=\"#8b0000\" stroke-width=\"5\" stroke-linecap=\"round\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"pchmnt-sig-caption\">Commandant des Mers Maudites<\/div>\r\n          <\/div>\r\n          <svg class=\"pchmnt-wax\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <defs>\r\n              <radialGradient id=\"wg2\" cx=\"35%\" cy=\"35%\">\r\n                <stop offset=\"0%\"   stop-color=\"#c0392b\"\/>\r\n                <stop offset=\"60%\"  stop-color=\"#8b0000\"\/>\r\n                <stop offset=\"100%\" stop-color=\"#4a0000\"\/>\r\n              <\/radialGradient>\r\n            <\/defs>\r\n            <path d=\"M50,8 Q63,6 69,13 Q79,8 83,19 Q93,17 95,29 Q101,33 99,45 Q105,53 99,61 Q103,71 95,77 Q95,89 83,91 Q79,99 67,99 Q59,105 51,101 Q41,107 33,101 Q23,101 19,91 Q9,89 9,77 Q3,69 7,59 Q1,49 7,41 Q5,29 15,25 Q17,13 29,11 Q35,5 50,8Z\" fill=\"url(#wg2)\"\/>\r\n            <ellipse cx=\"50\" cy=\"46\" rx=\"16\" ry=\"17\" fill=\"rgba(201,162,39,0.55)\"\/>\r\n            <ellipse cx=\"43\" cy=\"50\" rx=\"5.5\" ry=\"6\" fill=\"rgba(60,0,0,0.6)\"\/>\r\n            <ellipse cx=\"57\" cy=\"50\" rx=\"5.5\" ry=\"6\" fill=\"rgba(60,0,0,0.6)\"\/>\r\n            <ellipse cx=\"50\" cy=\"61\" rx=\"4\"   ry=\"3\"  fill=\"rgba(60,0,0,0.5)\"\/>\r\n            <rect x=\"43\" y=\"66\" width=\"5\" height=\"7\" rx=\"2\" fill=\"rgba(201,162,39,0.55)\"\/>\r\n            <rect x=\"50\" y=\"66\" width=\"5\" height=\"7\" rx=\"2\" fill=\"rgba(201,162,39,0.55)\"\/>\r\n            <rect x=\"57\" y=\"66\" width=\"5\" height=\"7\" rx=\"2\" fill=\"rgba(201,162,39,0.55)\"\/>\r\n            <text x=\"50\" y=\"85\" text-anchor=\"middle\" font-size=\"7\" fill=\"rgba(201,162,39,0.4)\"\r\n              font-family=\"serif\" letter-spacing=\"1\">CROCHET<\/text>\r\n            <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"rgba(201,162,39,0.2)\" stroke-width=\"1\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div><!-- \/pchmnt-content -->\r\n    <\/div><!-- \/pchmnt-body -->\r\n    <div class=\"pchmnt-rod bottom\"><\/div>\r\n  <\/div><!-- \/pchmnt-scroll -->\r\n  `;\r\n\r\n  \/* Injecter dans <body> *\/\r\n  const wrapper = document.createElement('div');\r\n  wrapper.innerHTML = html;\r\n  while (wrapper.firstChild) document.body.appendChild(wrapper.firstChild);\r\n\r\n  \/* ---- Textes ---- *\/\r\n  const PARAGRAPHS = [\r\n    { id:'pp1', text:\"Je suis furieux ! On ose m'annoncer que je vais perdre ma carte du Club des M\u00e9chants\u2026  Hors de question !\" },\r\n    { id:'pp2', text:\"Mon plan ? Une soir\u00e9e ultra-secr\u00e8te, des m\u00e9chants l\u00e9gendaires invit\u00e9s \u00e0 bord, et un objectif compl\u00e8tement fou : leur voler tous leurs secrets pour devenir le vilain ultime !\" },\r\n    { id:'pp3', text:\"Filtres magiques, complots, catastrophes en cha\u00eene\u2026 Avec l\u2019aide (plus ou moins fiable) de la F\u00e9e Clochette, la soir\u00e9e s\u2019organise\u2026 mais je sens que rien ne va se passer comme pr\u00e9vu !\" },\r\n    { id:'pp4', text:\"Embarque avec moi sur le bateau du terrible capitaine Crochet, retrouve les pires m\u00e9chants de tes histoires pr\u00e9f\u00e9r\u00e9es, frissonne un peu\u2026 et explose de rire dans un spectacle musical d\u00e9jant\u00e9, magique et plein de surprises !\" }\r\n  ];\r\n\r\n  \/* ---- \u00c9tat ---- *\/\r\n  let isOpen = false;\r\n  let timers = [];\r\n\r\n  \/* ---- R\u00e9f\u00e9rences ---- *\/\r\n  const btn      = document.getElementById('parchmentBtn');\r\n  const overlay  = document.getElementById('pchmntOverlay');\r\n  const scroll   = document.getElementById('pchmntScroll');\r\n  const closeBtn = document.getElementById('pchmntClose');\r\n  const quill    = document.getElementById('pchmntQuill');\r\n\r\n  \/* ---- Ouvrir ---- *\/\r\n  btn.addEventListener('click', open);\r\n  overlay.addEventListener('click', close);\r\n  closeBtn.addEventListener('click', close);\r\n\r\n  function open() {\r\n    if (isOpen) return;\r\n    isOpen = true;\r\n    overlay.classList.add('active');\r\n    scroll.classList.add('unfurled');\r\n    t(1200, () => closeBtn.classList.add('visible'));\r\n    t(1700, startWriting);\r\n  }\r\n\r\n  \/* ---- Fermer ---- *\/\r\n  function close() {\r\n    if (!isOpen) return;\r\n    isOpen = false;\r\n    timers.forEach(clearTimeout); timers = [];\r\n    stopQuill();\r\n    closeBtn.classList.remove('visible');\r\n    document.getElementById('pchmntScroll').style.pointerEvents = 'none';\r\n    setTimeout(() => {\r\n      scroll.classList.remove('unfurled');\r\n      overlay.classList.remove('active');\r\n      reset();\r\n    }, 300);\r\n  }\r\n\r\n  function reset() {\r\n    ['pchmntTitle','pchmntSub','pchmntDiv'].forEach(id =>\r\n      document.getElementById(id).classList.remove('show')\r\n    );\r\n    document.getElementById('pchmntSig').classList.remove('show');\r\n    PARAGRAPHS.forEach(p => { document.getElementById(p.id).innerHTML = ''; });\r\n  }\r\n\r\n  \/* ---- \u00c9criture ---- *\/\r\n  function startWriting() {\r\n    let delay = 0;\r\n    t(delay, () => document.getElementById('pchmntTitle').classList.add('show')); delay += 500;\r\n    t(delay, () => document.getElementById('pchmntSub').classList.add('show'));   delay += 400;\r\n    t(delay, () => document.getElementById('pchmntDiv').classList.add('show'));   delay += 700;\r\n\r\n    PARAGRAPHS.forEach(p => {\r\n      t(delay, () => typeText(p.id, p.text, 22));\r\n      delay += p.text.length * 23 + 600;\r\n    });\r\n\r\n    t(delay, () => {\r\n      stopQuill();\r\n      document.getElementById('pchmntSig').classList.add('show');\r\n    });\r\n  }\r\n\r\n  function t(delay, fn) { timers.push(setTimeout(fn, delay)); }\r\n\r\n  \/* ---- Typewriter ---- *\/\r\n  function typeText(id, text, speed) {\r\n    const el = document.getElementById(id);\r\n    if (!el) return;\r\n    let i = 0;\r\n    const cursor = document.createElement('span');\r\n    cursor.className = 'pchmnt-cursor active';\r\n    el.appendChild(cursor);\r\n    startQuill();\r\n\r\n    function type() {\r\n      if (i >= text.length) {\r\n        cursor.classList.remove('active');\r\n        cursor.remove();\r\n        stopQuill();\r\n        return;\r\n      }\r\n      const ch = text[i];\r\n      cursor.remove();\r\n      const span = document.createElement('span');\r\n      span.textContent = ch;\r\n      const d = Math.random() * 0.12;\r\n      span.style.color = `rgba(${26+Math.round(d*18)},${10+Math.round(d*8)},0,${0.88+Math.random()*0.12})`;\r\n      el.appendChild(span);\r\n      el.appendChild(cursor);\r\n      i++;\r\n\r\n      let wait = speed;\r\n      if ('!?;'.includes(ch)) wait = speed * 9;\r\n      else if (ch === '.')   wait = speed * 9;\r\n      else if (ch === ',')   wait = speed * 4;\r\n      else if (ch === '\u2014')   wait = speed * 5;\r\n      else if (ch === ' ')   wait = speed * 0.7;\r\n      else                   wait = speed + Math.random() * speed * 0.9;\r\n\r\n      timers.push(setTimeout(type, wait));\r\n      moveQuill(cursor);\r\n    }\r\n    type();\r\n  }\r\n\r\n  \/* ---- Plume ---- *\/\r\n  function startQuill() { quill.classList.add('writing'); }\r\n  function stopQuill()  { quill.classList.remove('writing'); }\r\n  function moveQuill(cursor) {\r\n    if (!quill.classList.contains('writing')) return;\r\n    const r = cursor.getBoundingClientRect();\r\n    quill.style.left = (r.left - (quill.offsetWidth || 32) * 0.3) + 'px';\r\n    quill.style.top  = (r.top  - (quill.offsetHeight || 48) * 1.6) + 'px';\r\n  }\r\n\r\n})();\r\n<\/script>\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6132ec3 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"6132ec3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-398dd15 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"398dd15\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-535bd9b e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"535bd9b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-5f60cbf e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"5f60cbf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-677581e elementor-widget elementor-widget-image\" data-id=\"677581e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"687\" height=\"687\" src=\"https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-02-20-at-08.31.19-1.jpg\" class=\"attachment-large size-large wp-image-398\" alt=\"\" srcset=\"https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-02-20-at-08.31.19-1.jpg 687w, https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-02-20-at-08.31.19-1-300x300.jpg 300w, https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-02-20-at-08.31.19-1-150x150.jpg 150w\" sizes=\"(max-width: 687px) 100vw, 687px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-46230c7 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"46230c7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b18040f elementor-widget elementor-widget-heading\" data-id=\"b18040f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Les personnages<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36e70b2 elementor-widget elementor-widget-text-editor\" data-id=\"36e70b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Sept m\u00e9chants sur sc\u00e8ne, pour vous faire mourir&#8230; de rire !<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0766387 elementor-widget elementor-widget-html\" data-id=\"0766387\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CAROUSEL PERSONNAGES \u2014 Compatible Elementor\r\n     Colle TOUT ce bloc dans un widget HTML Elementor\r\n     ============================================================ -->\r\n\r\n<style>\r\n\/* === BOUTON DECLENCHEUR === *\/\r\n.crs-trigger {\r\n  position: relative;\r\n  padding: clamp(.8rem,2vw,1.2rem) clamp(1.5rem,4vw,3rem);\r\n  background: transparent;\r\n  border: 2px solid #c9a227;\r\n  color: #ffd700;\r\n  font-family: 'Cinzel Decorative', serif;\r\n  font-size: clamp(.65rem,1.8vw,1rem);\r\n  letter-spacing: .2em;\r\n  text-transform: uppercase;\r\n  cursor: pointer;\r\n  transition: all .4s ease;\r\n  overflow: hidden;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: .6em;\r\n  margin: 0;\r\n  vertical-align: middle;\r\n}\r\n.crs-trigger::before {\r\n  content:''; position:absolute; inset:0;\r\n  background:linear-gradient(135deg,rgba(201,162,39,.15),transparent,rgba(201,162,39,.1));\r\n  opacity:0; transition:opacity .4s;\r\n}\r\n.crs-trigger::after {\r\n  content:''; position:absolute; top:-100%; left:-100%;\r\n  width:300%; height:300%;\r\n  background:linear-gradient(105deg,transparent 40%,rgba(255,215,0,.25) 50%,transparent 60%);\r\n  transition:transform .7s; transform:translateX(-100%);\r\n}\r\n.crs-trigger:hover::before { opacity:1; }\r\n.crs-trigger:hover::after  { transform:translateX(50%); }\r\n.crs-trigger:hover {\r\n  border-color:#ffd700;\r\n  box-shadow:0 0 30px rgba(255,215,0,.3),inset 0 0 20px rgba(255,215,0,.1);\r\n  letter-spacing:.35em; color:#fff;\r\n}\r\n.crs-trigger .cc { position:absolute; width:8px; height:8px; border-color:#ffd700; border-style:solid; transition:all .4s; pointer-events:none; }\r\n.crs-trigger .cc.tl{top:-1px;left:-1px;  border-width:2px 0 0 2px}\r\n.crs-trigger .cc.tr{top:-1px;right:-1px; border-width:2px 2px 0 0}\r\n.crs-trigger .cc.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}\r\n.crs-trigger .cc.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}\r\n.crs-trigger:hover .cc{width:14px;height:14px}\r\n.crs-trigger svg{width:1.1em;height:1.1em;fill:#ffd700;transition:fill .4s;flex-shrink:0}\r\n.crs-trigger:hover svg{fill:#fff}\r\n\r\n\/* === OVERLAY \u2014 fond sombre === *\/\r\n.crs-ov {\r\n  position:fixed!important; inset:0!important;\r\n  z-index:999980!important;\r\n  background:rgba(0,0,0,.82);\r\n  backdrop-filter:blur(6px);\r\n  opacity:0; pointer-events:none;\r\n  transition:opacity .5s ease;\r\n  margin:0!important; padding:0!important;\r\n}\r\n.crs-ov.on { opacity:1; pointer-events:all; }\r\n\r\n\/* === PANNEAU \u2014 plein \u00e9cran transparent, contenu centr\u00e9 === *\/\r\n.crs-panel {\r\n  position:fixed!important;\r\n  inset:0!important;\r\n  z-index:999985!important;\r\n  background:transparent!important;\r\n  border:none!important;\r\n  box-shadow:none!important;\r\n  margin:0!important; padding:0!important; max-width:none!important;\r\n\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  opacity:0;\r\n  transform:translateY(60px)!important;\r\n  pointer-events:none;\r\n  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)!important;\r\n}\r\n.crs-panel.on {\r\n  opacity:1;\r\n  transform:translateY(0)!important;\r\n  pointer-events:all;\r\n}\r\n\r\n\/* Bouton fermer \u2014 flottant en haut \u00e0 droite *\/\r\n.crs-x {\r\n  position:fixed!important;\r\n  top:clamp(.8rem,2vh,1.5rem)!important;\r\n  right:clamp(.8rem,2vw,1.5rem)!important;\r\n  z-index:999999!important;\r\n  background:rgba(0,0,0,.55);\r\n  border:1px solid rgba(201,162,39,.45); color:#c9a227;\r\n  width:clamp(32px,4.5vw,44px); height:clamp(32px,4.5vw,44px);\r\n  border-radius:50%;\r\n  font-size:clamp(.85rem,1.8vw,1.1rem);\r\n  cursor:pointer; display:flex; align-items:center; justify-content:center;\r\n  transition:all .3s; font-family:sans-serif; backdrop-filter:blur(8px);\r\n}\r\n.crs-x:hover{background:rgba(201,162,39,.18);border-color:#ffd700;box-shadow:0 0 15px rgba(201,162,39,.35);transform:rotate(90deg)}\r\n\r\n\/* Titre flottant au-dessus des cartes *\/\r\n.crs-hd-title {\r\n  font-family:'Cinzel Decorative',serif;\r\n  font-size:clamp(.7rem,2.2vw,1.15rem);\r\n  color:#c9a227;\r\n  letter-spacing:.25em;\r\n  text-transform:uppercase;\r\n  margin-bottom:clamp(1rem,3vh,2rem);\r\n  text-shadow:0 0 30px rgba(201,162,39,.4);\r\n  opacity:.9;\r\n}\r\n\r\n\/* === SCENE === *\/\r\n.crs-scene {\r\n  display:flex; align-items:center; justify-content:center;\r\n  width:100%;\r\n}\r\n.crs-arr {\r\n  flex-shrink:0;\r\n  width:clamp(36px,5.5vw,52px); height:clamp(36px,5.5vw,52px);\r\n  background:rgba(0,0,0,.45); border:1px solid rgba(201,162,39,.38); border-radius:50%;\r\n  color:#c9a227; cursor:pointer; display:flex; align-items:center; justify-content:center;\r\n  transition:all .3s; backdrop-filter:blur(8px);\r\n  margin:0 clamp(6px,1.5vw,18px); z-index:10; user-select:none;\r\n  -webkit-tap-highlight-color:transparent;\r\n}\r\n.crs-arr:hover{background:rgba(201,162,39,.2);border-color:#ffd700;box-shadow:0 0 20px rgba(201,162,39,.4);transform:scale(1.1)}\r\n.crs-arr:active{transform:scale(.93)}\r\n\r\n\/* Viewport + variables carte *\/\r\n.crs-vp {\r\n  flex:1; display:flex; align-items:center; justify-content:center;\r\n  overflow:visible; position:relative;\r\n  --cw: min(185px, 50vw);\r\n  --ch: calc(var(--cw) * 1.55);\r\n  height:calc(var(--ch) + 50px);\r\n}\r\n@media(min-width:540px){ .crs-vp{ --cw: min(210px, 36vw); } }\r\n@media(min-width:860px){ .crs-vp{ --cw: 225px; } }\r\n\r\n.crs-track {\r\n  display:flex; align-items:center; justify-content:center;\r\n  gap:clamp(10px,2.5vw,24px);\r\n}\r\n\r\n\/* === CARTE === *\/\r\n.crs-cw {\r\n  flex-shrink:0; width:var(--cw); height:var(--ch);\r\n  perspective:1100px; cursor:pointer;\r\n  transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .4s, filter .4s;\r\n  user-select:none; -webkit-tap-highlight-color:transparent;\r\n}\r\n.crs-cw.c-mid  { transform:scale(1.08)!important; z-index:6; filter:none!important; opacity:1!important; }\r\n.crs-cw.c-adj  { opacity:.5; filter:brightness(.58) saturate(.65); transform:scale(.86)!important; z-index:4; }\r\n.crs-cw.c-far  { opacity:.18; filter:brightness(.38) saturate(.45); transform:scale(.71)!important; z-index:2; }\r\n.crs-cw.c-hide { opacity:0; pointer-events:none; transform:scale(.6)!important; }\r\n\r\n.crs-inner {\r\n  width:100%; height:100%; position:relative;\r\n  transform-style:preserve-3d;\r\n  transition:transform .75s cubic-bezier(.4,0,.2,1);\r\n  border-radius:14px;\r\n}\r\n.crs-cw.flipped .crs-inner { transform:rotateY(180deg)!important; }\r\n\r\n.crs-face {\r\n  position:absolute; inset:0; border-radius:14px;\r\n  backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden;\r\n}\r\n\r\n\/* RECTO *\/\r\n.crs-front {\r\n  background:#0a0315;\r\n  border:2px solid #5a3e0a;\r\n  box-shadow:0 0 0 1px rgba(201,162,39,.12),0 25px 60px rgba(0,0,0,.9),inset 0 0 25px rgba(35,16,64,.5);\r\n}\r\n.crs-front::before {\r\n  content:''; position:absolute; inset:7px;\r\n  border:1px solid rgba(201,162,39,.22); border-radius:10px; z-index:3; pointer-events:none;\r\n}\r\n.crs-front::after {\r\n  content:''; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:14px;\r\n  background:linear-gradient(135deg,rgba(255,255,255,.035) 0%,transparent 50%,rgba(0,0,0,.08) 100%);\r\n}\r\n.crs-rank { position:absolute; z-index:5; font-family:'Cinzel Decorative',serif; font-size:clamp(.42rem,1.1vw,.62rem); color:rgba(201,162,39,.5); line-height:1; }\r\n.crs-rank.tl{top:9px;left:9px} .crs-rank.br{bottom:9px;right:9px;transform:rotate(180deg)}\r\n.crs-img { width:100%; height:72%; object-fit:cover; object-position:top center; display:block; filter:contrast(1.05) saturate(1.1); }\r\n.crs-img-ph { width:100%; height:72%; background:linear-gradient(160deg,#231040,#0a0315); display:flex; align-items:center; justify-content:center; }\r\n.crs-img-ph svg{width:38%;opacity:.28}\r\n.crs-fade { position:absolute; bottom:0; left:0; right:0; height:42%; z-index:1; pointer-events:none; background:linear-gradient(to top,rgba(10,3,21,1) 0%,rgba(10,3,21,.88) 35%,transparent 100%); }\r\n.crs-info { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:clamp(.5rem,1.5vw,.85rem) clamp(.5rem,1.5vw,.85rem) clamp(.4rem,1.2vw,.7rem); text-align:center; }\r\n.crs-name { font-family:'Cinzel Decorative',serif; font-size:clamp(.58rem,1.55vw,.86rem); color:#ffd700; line-height:1.25; text-shadow:0 0 18px rgba(255,215,0,.35); margin-bottom:.18em; }\r\n.crs-role { font-family:'IM Fell English',serif; font-style:italic; font-size:clamp(.48rem,1.15vw,.68rem); color:rgba(245,230,200,.52); }\r\n\r\n\/* VERSO *\/\r\n.crs-back {\r\n  transform:rotateY(180deg);\r\n  background:linear-gradient(145deg,#0a0315 0%,#231040 45%,#170a2a 100%);\r\n  border:2px solid #c9a227;\r\n  box-shadow:0 0 0 1px rgba(201,162,39,.18),0 25px 60px rgba(0,0,0,.9),inset 0 0 35px rgba(35,16,64,.6);\r\n  display:flex; flex-direction:column; align-items:center; justify-content:center;\r\n  gap:clamp(.6rem,1.8vw,1.2rem); padding:clamp(.7rem,2.5vw,1.3rem); text-align:center;\r\n}\r\n.crs-back::before {\r\n  content:''; position:absolute; inset:0; pointer-events:none;\r\n  background-image:radial-gradient(circle at 50% 50%,rgba(201,162,39,.07) 0%,transparent 55%),\r\n    repeating-linear-gradient(45deg,transparent,transparent 16px,rgba(201,162,39,.035) 16px,rgba(201,162,39,.035) 17px);\r\n}\r\n.crs-back::after { content:''; position:absolute; inset:7px; border:1px solid rgba(201,162,39,.2); border-radius:10px; pointer-events:none; }\r\n.crs-seal { width:clamp(36px,9vw,56px); height:clamp(36px,9vw,56px); opacity:.72; flex-shrink:0; position:relative; z-index:1; }\r\n.crs-slabel { font-family:'IM Fell English',serif; font-style:italic; font-size:clamp(.48rem,1.15vw,.66rem); color:rgba(201,162,0,.62); letter-spacing:.12em; text-transform:uppercase; position:relative; z-index:1; }\r\n.crs-stitle { font-family:'Cinzel Decorative',serif; font-size:clamp(.6rem,1.55vw,.88rem); color:#ffd700; line-height:1.3; text-shadow:0 0 18px rgba(255,215,0,.3); position:relative; z-index:1; }\r\n.crs-play {\r\n  display:flex; align-items:center; gap:.45em;\r\n  padding:clamp(.32rem,1.1vw,.58rem) clamp(.65rem,2.2vw,1.1rem);\r\n  background:transparent; border:1px solid #c9a227; color:#ffd700;\r\n  font-family:'Cinzel Decorative',serif; font-size:clamp(.48rem,1.15vw,.66rem);\r\n  letter-spacing:.12em; cursor:pointer; border-radius:4px; transition:all .3s;\r\n  position:relative; z-index:2;\r\n}\r\n.crs-play:hover{background:rgba(201,162,39,.15);box-shadow:0 0 18px rgba(201,162,39,.3);border-color:#ffd700;transform:scale(1.05)}\r\n.crs-play.on{background:rgba(201,162,39,.22);border-color:#ffd700;color:#fff}\r\n.crs-play svg{width:clamp(8px,1.7vw,12px);height:clamp(8px,1.7vw,12px);fill:currentColor;flex-shrink:0}\r\n\r\n\/* DOTS *\/\r\n.crs-dots { display:flex; justify-content:center; gap:7px; margin-top:clamp(.9rem,2.5vh,1.6rem); flex-wrap:wrap; }\r\n.crs-dot { width:6px; height:6px; border-radius:50%; background:rgba(201,162,39,.22); border:1px solid rgba(201,162,39,.3); cursor:pointer; transition:all .3s; padding:0; }\r\n.crs-dot.on { width:18px; border-radius:3px; background:#c9a227; box-shadow:0 0 8px rgba(255,215,0,.42); }\r\n\r\n\/* BARRE AUDIO *\/\r\n.crs-abar {\r\n  display:flex; align-items:center; gap:clamp(.4rem,1.5vw,.9rem);\r\n  margin-top:clamp(.6rem,1.8vh,1.2rem);\r\n  padding:clamp(.35rem,1vw,.6rem) clamp(.8rem,3vw,2rem);\r\n  border:1px solid rgba(201,162,39,.15);\r\n  border-radius:6px;\r\n  background:rgba(0,0,0,.35);\r\n  backdrop-filter:blur(8px);\r\n  width:min(480px,88vw);\r\n  opacity:0; pointer-events:none; transition:opacity .4s; min-height:38px;\r\n}\r\n.crs-abar.on{opacity:1;pointer-events:all}\r\n.crs-aname{ font-family:'IM Fell English',serif; font-style:italic; font-size:clamp(.52rem,1.3vw,.76rem); color:rgba(201,162,39,.8); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\r\n.crs-prog { flex:2; height:3px; background:rgba(201,162,39,.15); border-radius:2px; cursor:pointer; }\r\n.crs-progf{ height:100%; border-radius:2px; background:linear-gradient(90deg,#7a5c10,#ffd700); width:0%; transition:width .1s linear; pointer-events:none; }\r\n.crs-atime{ font-family:monospace; font-size:clamp(.48rem,1.1vw,.66rem); color:rgba(201,162,39,.45); white-space:nowrap; }\r\n<\/style>\r\n\r\n<!-- Bouton d\u00e9clencheur -->\r\n<button class=\"crs-trigger\" id=\"crsBtn\">\r\n  <span class=\"cc tl\"><\/span><span class=\"cc tr\"><\/span><span class=\"cc bl\"><\/span><span class=\"cc br\"><\/span>\r\n  <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"\/><\/svg>\r\n  D\u00e9couvrir les Personnages\r\n<\/button>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/* ============================================================\r\n   PERSONNAGES\r\n   Remplace les \"\" par tes URLs :\r\n   img  : '\/wp-content\/uploads\/mon-image.jpg'\r\n   audio: '\/wp-content\/uploads\/ma-chanson.mp3'\r\n   ============================================================ *\/\r\nvar CHARS = [\r\n  { name:'Capitaine Crochet',  role:'Ma\u00eetre des Mers Maudites', rank:'I',   img:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-14-at-13.21.02-1.jpeg', audio:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/Crochet.mp3', song:'Respect pour Capitaine Crochet'      },\r\n  { name:'La f\u00e9e Clochette', role:'Acolyte d\u00e9rang\u00e9e',   rank:'II',  img:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-14-at-13.20.14.jpeg', audio:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/Clochette.mp3', song:'Les Ailes Du Bonheur' },\r\n  { name:'La M\u00e9chante Reine',             role:'Sorci\u00e8re des Abysses',     rank:'III', img:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-14-at-13.20.33.jpeg', audio:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/La-mechante-reine.mp3', song:'Ma Beaut\u00e9'    },\r\n  { name:'La reine de Coeur',             role:'Le Glorieux Fanfaron',     rank:'IV',  img:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-14-at-13.21.02-2.jpeg', audio:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/Reine-de-coeur.mp3', song:\"J'ai Toujours Raison\"  },\r\n  { name:'Mercredi',              role:'Grand Vizir des Sables',   rank:'V',   img:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-14-at-13.21.15.jpeg', audio:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/Mercredi.mp3', song:'Le Plus Moche Jour De Ta Vie'     },\r\n  { name:'Cruella',            role:'Reine de la D\u00e9mesure',     rank:'VI',  img:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-14-at-13.21.27.jpeg', audio:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/Cruella.mp3', song:'De Bottes En Peau De Gu\u00e9pard'      },\r\n  { name:'Had\u00e8s',               role:'Le Dieu des Enfers',      rank:'VII', img:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-14-at-13.21.02.jpeg', audio:'https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Audio-2026-02-22-at-12.02.11.mp3', song:'Je Ne Vous Aime Pas'              }\r\n];\r\n\r\nvar N = CHARS.length;\r\n\r\nvar SEAL = '<svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><radialGradient id=\"csg\" cx=\"40%\" cy=\"40%\"><stop offset=\"0%\" stop-color=\"#c0392b\"\/><stop offset=\"100%\" stop-color=\"#5a0000\"\/><\/radialGradient><\/defs><polygon points=\"50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35\" fill=\"url(#csg)\" stroke=\"#c9a227\" stroke-width=\"1.5\"\/><ellipse cx=\"50\" cy=\"46\" rx=\"12\" ry=\"13\" fill=\"#c9a227\" opacity=\".8\"\/><ellipse cx=\"44\" cy=\"49\" rx=\"4\" ry=\"4.5\" fill=\"#5a0000\"\/><ellipse cx=\"56\" cy=\"49\" rx=\"4\" ry=\"4.5\" fill=\"#5a0000\"\/><ellipse cx=\"50\" cy=\"58\" rx=\"3\" ry=\"2\" fill=\"#5a0000\"\/><rect x=\"43\" y=\"62\" width=\"4\" height=\"5\" rx=\"1.5\" fill=\"#c9a227\" opacity=\".8\"\/><rect x=\"49\" y=\"62\" width=\"4\" height=\"5\" rx=\"1.5\" fill=\"#c9a227\" opacity=\".8\"\/><rect x=\"55\" y=\"62\" width=\"4\" height=\"5\" rx=\"1.5\" fill=\"#c9a227\" opacity=\".8\"\/><\/svg>';\r\nvar IPLAY  = '<svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>';\r\nvar IPAUSE = '<svg viewBox=\"0 0 24 24\"><path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\"\/><\/svg>';\r\nvar IARRL  = '<svg viewBox=\"0 0 24 24\" width=\"19\" height=\"19\" fill=\"currentColor\"><path d=\"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z\"\/><\/svg>';\r\nvar IARRR  = '<svg viewBox=\"0 0 24 24\" width=\"19\" height=\"19\" fill=\"currentColor\"><path d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z\"\/><\/svg>';\r\n\r\nfunction cards_html(){\r\n  return CHARS.map(function(c,i){\r\n    var img_block = c.img\r\n      ? '<img decoding=\"async\" class=\"crs-img\" src=\"'+c.img+'\" alt=\"'+c.name+'\" loading=\"lazy\">'\r\n      : '<div class=\"crs-img-ph\">'+SEAL+'<\/div>';\r\n    return '<div class=\"crs-cw\" data-i=\"'+i+'\">'\r\n      +'<div class=\"crs-inner\">'\r\n      +'<div class=\"crs-face crs-front\">'\r\n      +'<span class=\"crs-rank tl\">'+c.rank+'<\/span>'\r\n      +'<span class=\"crs-rank br\">'+c.rank+'<\/span>'\r\n      +img_block\r\n      +'<div class=\"crs-fade\"><\/div>'\r\n      +'<div class=\"crs-info\"><div class=\"crs-name\">'+c.name+'<\/div><div class=\"crs-role\">'+c.role+'<\/div><\/div>'\r\n      +'<\/div>'\r\n      +'<div class=\"crs-face crs-back\">'\r\n      +'<div class=\"crs-seal\">'+SEAL+'<\/div>'\r\n      +'<div><div class=\"crs-slabel\">Chanson<\/div><div class=\"crs-stitle\">'+c.song+'<\/div><\/div>'\r\n      +'<button class=\"crs-play\" data-i=\"'+i+'\">'+IPLAY+' <span>\u00c9couter<\/span><\/button>'\r\n      +'<\/div>'\r\n      +'<\/div>'\r\n      +'<\/div>';\r\n  }).join('');\r\n}\r\n\r\nfunction dots_html(){\r\n  return CHARS.map(function(_,i){\r\n    return '<button class=\"crs-dot'+(i===0?' on':'')+'\" data-d=\"'+i+'\"><\/button>';\r\n  }).join('');\r\n}\r\n\r\n\/* Injection dans body *\/\r\nvar wrap = document.createElement('div');\r\nwrap.innerHTML =\r\n  '<div class=\"crs-ov\" id=\"crsOv\"><\/div>'\r\n  +'<div class=\"crs-panel\" id=\"crsPan\">'\r\n  +'<button class=\"crs-x\" id=\"crsX\">&#x2715;<\/button>'\r\n  +'<div class=\"crs-hd-title\">Les Personnages<\/div>'\r\n  +'<div class=\"crs-scene\">'\r\n  +'<button class=\"crs-arr\" id=\"crsL\">'+IARRL+'<\/button>'\r\n  +'<div class=\"crs-vp\"><div class=\"crs-track\" id=\"crsTr\">'+cards_html()+'<\/div><\/div>'\r\n  +'<button class=\"crs-arr\" id=\"crsR\">'+IARRR+'<\/button>'\r\n  +'<\/div>'\r\n  +'<div class=\"crs-dots\" id=\"crsDots\">'+dots_html()+'<\/div>'\r\n  +'<div class=\"crs-abar\" id=\"crsAbar\">'\r\n  +'<div class=\"crs-aname\" id=\"crsAname\">\\u2014<\/div>'\r\n  +'<div class=\"crs-prog\" id=\"crsProg\"><div class=\"crs-progf\" id=\"crsProgF\"><\/div><\/div>'\r\n  +'<div class=\"crs-atime\" id=\"crsAtime\">0:00<\/div>'\r\n  +'<\/div>'\r\n  +'<\/div>';\r\nwhile(wrap.firstChild) document.body.appendChild(wrap.firstChild);\r\n\r\n\/* R\u00e9f\u00e9rences *\/\r\nvar ov      = document.getElementById('crsOv');\r\nvar pan     = document.getElementById('crsPan');\r\nvar xBtn    = document.getElementById('crsX');\r\nvar track   = document.getElementById('crsTr');\r\nvar lBtn    = document.getElementById('crsL');\r\nvar rBtn    = document.getElementById('crsR');\r\nvar dWrap   = document.getElementById('crsDots');\r\nvar abar    = document.getElementById('crsAbar');\r\nvar aname   = document.getElementById('crsAname');\r\nvar prog    = document.getElementById('crsProg');\r\nvar progF   = document.getElementById('crsProgF');\r\nvar atime   = document.getElementById('crsAtime');\r\nvar trig    = document.getElementById('crsBtn');\r\nvar cards   = Array.from(track.querySelectorAll('.crs-cw'));\r\nvar dots    = Array.from(dWrap.querySelectorAll('.crs-dot'));\r\n\r\nvar cur     = 0;\r\nvar isOpen  = false;\r\nvar aud     = null;\r\nvar playIdx = -1;\r\n\r\n\/* OPEN \/ CLOSE *\/\r\ntrig.addEventListener('click', open);\r\nov.addEventListener('click',   close);\r\nxBtn.addEventListener('click', close);\r\n\r\nfunction open(){\r\n  if(isOpen) return;\r\n  isOpen = true;\r\n  document.body.style.overflow = 'hidden';\r\n  ov.classList.add('on');\r\n  pan.classList.add('on');\r\n  render(0);\r\n}\r\n\r\nfunction close(){\r\n  if(!isOpen) return;\r\n  isOpen = false;\r\n  document.body.style.overflow = '';\r\n  ov.classList.remove('on');\r\n  pan.classList.remove('on');\r\n  stopAudio();\r\n  cards.forEach(function(c){ c.classList.remove('flipped'); resetTilt(c); });\r\n}\r\n\r\n\/* RENDER *\/\r\nfunction render(idx){\r\n  cur = ((idx % N) + N) % N;\r\n  cards.forEach(function(card, i){\r\n    card.classList.remove('c-mid','c-adj','c-far','c-hide');\r\n    var rel = ((i - cur) % N + N) % N;\r\n    if     (rel === 0)                card.classList.add('c-mid');\r\n    else if(rel===1 || rel===N-1)     card.classList.add('c-adj');\r\n    else if(rel===2 || rel===N-2)     card.classList.add('c-far');\r\n    else                              card.classList.add('c-hide');\r\n  });\r\n  for(var k=1;k<=Math.floor(N\/2);k++) track.appendChild(cards[(cur-k+N)%N]);\r\n  track.appendChild(cards[cur]);\r\n  for(var j=1;j<=Math.floor(N\/2);j++) track.appendChild(cards[(cur+j)%N]);\r\n  dots.forEach(function(d,i){ d.classList.toggle('on', i===cur); });\r\n}\r\n\r\n\/* NAVIGATION *\/\r\nfunction goTo(idx){\r\n  cards[cur].classList.remove('flipped');\r\n  resetTilt(cards[cur]);\r\n  render(idx);\r\n}\r\n\r\nlBtn.addEventListener('click', function(){ goTo(cur-1); });\r\nrBtn.addEventListener('click', function(){ goTo(cur+1); });\r\ndots.forEach(function(d,i){ d.addEventListener('click', function(){ goTo(i); }); });\r\n\r\nvar tx0 = 0;\r\npan.addEventListener('touchstart', function(e){ tx0 = e.touches[0].clientX; },{passive:true});\r\npan.addEventListener('touchend',   function(e){\r\n  var dx = e.changedTouches[0].clientX - tx0;\r\n  if(Math.abs(dx)>38){ dx<0 ? goTo(cur+1) : goTo(cur-1); }\r\n},{passive:true});\r\n\r\ndocument.addEventListener('keydown', function(e){\r\n  if(!isOpen) return;\r\n  if(e.key==='ArrowLeft')  goTo(cur-1);\r\n  if(e.key==='ArrowRight') goTo(cur+1);\r\n  if(e.key==='Escape')     close();\r\n});\r\n\r\n\/* FLIP *\/\r\ncards.forEach(function(card,i){\r\n  card.addEventListener('click', function(e){\r\n    if(e.target.closest('.crs-play')) return;\r\n    if(!card.classList.contains('c-mid')){ goTo(i); return; }\r\n    card.classList.toggle('flipped');\r\n    if(!card.classList.contains('flipped')) resetTilt(card);\r\n  });\r\n});\r\n\r\n\/* TILT *\/\r\nvar hasHover = window.matchMedia('(hover:hover)').matches;\r\nif(hasHover){\r\n  cards.forEach(function(card){\r\n    card.addEventListener('mousemove', function(e){\r\n      if(!card.classList.contains('c-mid')) return;\r\n      if(card.classList.contains('flipped')) return;\r\n      var r=card.getBoundingClientRect();\r\n      var dx=(e.clientX-(r.left+r.width\/2))\/(r.width\/2);\r\n      var dy=(e.clientY-(r.top+r.height\/2))\/(r.height\/2);\r\n      var inn=card.querySelector('.crs-inner');\r\n      inn.style.transition='transform .08s linear';\r\n      inn.style.transform='rotateX('+(-dy*10)+'deg) rotateY('+(dx*14)+'deg)';\r\n    });\r\n    card.addEventListener('mouseleave', function(){\r\n      if(!card.classList.contains('flipped')) resetTilt(card);\r\n    });\r\n  });\r\n}\r\n\r\nfunction resetTilt(card){\r\n  var inn=card.querySelector('.crs-inner');\r\n  inn.style.transition='transform .6s cubic-bezier(.03,.98,.52,.99)';\r\n  inn.style.transform='';\r\n  setTimeout(function(){ inn.style.transition=''; },680);\r\n}\r\n\r\n\/* AUDIO *\/\r\nfunction fmt(s){ var m=Math.floor(s\/60),sc=Math.floor(s%60); return m+':'+(sc<10?'0':'')+sc; }\r\n\r\nfunction stopAudio(){\r\n  if(!aud) return;\r\n  aud.pause(); aud=null;\r\n  document.querySelectorAll('.crs-play').forEach(function(b){\r\n    b.classList.remove('on');\r\n    b.innerHTML=IPLAY+' <span>\u00c9couter<\/span>';\r\n  });\r\n  abar.classList.remove('on'); playIdx=-1;\r\n}\r\n\r\nfunction playChar(idx){\r\n  var c=CHARS[idx], btn=cards[idx].querySelector('.crs-play');\r\n  if(!c.audio){\r\n    btn.style.borderColor='#e05555';\r\n    btn.querySelector('span').textContent='Bient\u00f4t\u2026';\r\n    setTimeout(function(){ btn.style.borderColor=''; btn.querySelector('span').textContent='\u00c9couter'; },2200);\r\n    return;\r\n  }\r\n  if(playIdx===idx){ stopAudio(); return; }\r\n  stopAudio();\r\n  aud=new Audio(c.audio); playIdx=idx;\r\n  btn.classList.add('on'); btn.innerHTML=IPAUSE+' <span>Pause<\/span>';\r\n  abar.classList.add('on'); aname.textContent=c.name+' \\u2014 '+c.song;\r\n  aud.addEventListener('timeupdate',function(){\r\n    if(!aud||!aud.duration) return;\r\n    progF.style.width=(aud.currentTime\/aud.duration*100)+'%';\r\n    atime.textContent=fmt(aud.currentTime);\r\n  });\r\n  aud.addEventListener('ended',stopAudio);\r\n  aud.play().catch(function(){ btn.querySelector('span').textContent='Erreur'; setTimeout(stopAudio,2000); });\r\n}\r\n\r\npan.addEventListener('click',function(e){\r\n  var b=e.target.closest('.crs-play');\r\n  if(!b) return;\r\n  e.stopPropagation();\r\n  playChar(parseInt(b.getAttribute('data-i'),10));\r\n});\r\n\r\nprog.addEventListener('click',function(e){\r\n  if(!aud||!aud.duration) return;\r\n  var r=prog.getBoundingClientRect();\r\n  aud.currentTime=((e.clientX-r.left)\/r.width)*aud.duration;\r\n});\r\n\r\nrender(0);\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b02c9f e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"2b02c9f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e024f64 elementor-widget elementor-widget-image\" data-id=\"e024f64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/481150870_1068602645300082_7730769400052092052_n-1024x1024.jpg\" class=\"attachment-large size-large wp-image-414\" alt=\"\" srcset=\"https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/481150870_1068602645300082_7730769400052092052_n-1024x1024.jpg 1024w, https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/481150870_1068602645300082_7730769400052092052_n-300x300.jpg 300w, https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/481150870_1068602645300082_7730769400052092052_n-150x150.jpg 150w, https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/481150870_1068602645300082_7730769400052092052_n-768x768.jpg 768w, https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/481150870_1068602645300082_7730769400052092052_n-1536x1536.jpg 1536w, https:\/\/www.asylum-art.com\/wp-content\/uploads\/2026\/03\/481150870_1068602645300082_7730769400052092052_n.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b16ea40 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"b16ea40\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a0348a elementor-widget elementor-widget-heading\" data-id=\"7a0348a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Nos actualit\u00e9s<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9309f01 elementor-widget elementor-widget-text-editor\" data-id=\"9309f01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Retrouvez nos annonces en avant-premi\u00e8re et nos prochaines dates sur nos r\u00e9seaux sociaux.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e91703b e-grid-align-left elementor-shape-rounded elementor-grid-0 elementor-widget elementor-widget-social-icons\" data-id=\"e91703b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\" role=\"list\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-7345234\" href=\"https:\/\/www.facebook.com\/TroupeAsylum?locale=fr_FR\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook<\/span>\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-facebook\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-1c7894e\" href=\"https:\/\/www.instagram.com\/latroupeasylum\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Instagram<\/span>\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-instagram\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8726104 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"8726104\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b6dfa3 contact elementor-widget elementor-widget-heading\" data-id=\"2b6dfa3\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"contact\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Nous contacter<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2c1ba1 elementor-widget elementor-widget-text-editor\" data-id=\"f2c1ba1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Demandez plus d&rsquo;informations ou r\u00e9servez votre prochain spectacle via le formulaire ci-dessous.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2dd3d5c elementor-widget elementor-widget-shortcode\" data-id=\"2dd3d5c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f419-o1\" lang=\"fr-FR\" dir=\"ltr\" data-wpcf7-id=\"419\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F327#wpcf7-f419-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulaire de contact\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"419\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"fr_FR\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f419-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><label> Votre nom<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span> <\/label>\n<\/p>\n<p><label> Votre e-mail<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span> <\/label>\n<\/p>\n<p><label> Votre t\u00e9l\u00e9phone<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tel-416\"><input size=\"40\" maxlength=\"10\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"tel\" name=\"tel-416\" \/><\/span> <\/label>\n<\/p>\n<p><label> Soci\u00e9t\u00e9 (facultatif)<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-company\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" autocomplete=\"company\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-company\" \/><\/span> <\/label>\n<\/p>\n<p><label> Votre message (facultatif)<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span> <\/label>\n<\/p>\n<div class=\"wpcf7-submit-container\">\n\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Envoyer\" \/>\n\t<\/p>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sublimez vos \u00e9v\u00e9nements avec Asylum Art \u00c9v\u00e9nements. Une troupe de com\u00e9diens experts en com\u00e9dies musicales pour entreprises et collectivit\u00e9s. <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-327","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.asylum-art.com\/index.php?rest_route=\/wp\/v2\/pages\/327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.asylum-art.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.asylum-art.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.asylum-art.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.asylum-art.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=327"}],"version-history":[{"count":116,"href":"https:\/\/www.asylum-art.com\/index.php?rest_route=\/wp\/v2\/pages\/327\/revisions"}],"predecessor-version":[{"id":468,"href":"https:\/\/www.asylum-art.com\/index.php?rest_route=\/wp\/v2\/pages\/327\/revisions\/468"}],"wp:attachment":[{"href":"https:\/\/www.asylum-art.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}