{"id":9,"date":"2026-04-13T12:23:32","date_gmt":"2026-04-13T12:23:32","guid":{"rendered":"http:\/\/lesrenverses.com\/?page_id=9"},"modified":"2026-04-22T08:03:52","modified_gmt":"2026-04-22T08:03:52","slug":"accueil","status":"publish","type":"page","link":"https:\/\/lesrenverses.com\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Les Renvers\u00e9s \u2013 Th\u00e9\u00e2tre pour tous<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\"\/>\n <style>\n \/* ============================================================\n VARIABLES & RESET\n ============================================================ *\/\n :root {\n \/* \u2500\u2500 Palette principale \u2500\u2500 *\/\n --c-bg: #f0f4f8; \/* fond global gris-bleu tr\u00e8s clair *\/\n --c-surface: #ffffff; \/* surfaces blanches *\/\n --c-ink: #0d1b2a; \/* texte fonc\u00e9 profond *\/\n --c-mid: #6b7d8f; \/* texte secondaire *\/\n --c-accent: #1a6eb5; \/* bleu accent principal *\/\n --c-accent2: #0d3f6e; \/* bleu fonc\u00e9 *\/\n --c-gold: #c8913a; \/* accent chaud *\/\n --c-light: #e8edf3; \/* zones l\u00e9g\u00e8res *\/\n\n \/* \u2500\u2500 D\u00e9grad\u00e9s \u2500\u2500 *\/\n --grad-hero: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 40%, #1a6eb5 100%);\n --grad-section:linear-gradient(160deg, #0f2540 0%, #1a6eb5 100%);\n --grad-soft: linear-gradient(160deg, #e8edf3 0%, #f0f4f8 60%, #e2eaf4 100%);\n --grad-card: linear-gradient(145deg, rgba(255,255,255,0.85) 0%, rgba(240,246,255,0.7) 100%);\n --grad-accent: linear-gradient(135deg, #1a6eb5 0%, #0d3f6e 100%);\n\n \/* \u2500\u2500 Liquid Glass \u2500\u2500 *\/\n --glass-bg: rgba(255,255,255,0.18);\n --glass-bg2: rgba(255,255,255,0.08);\n --glass-border:rgba(255,255,255,0.35);\n --glass-shadow:0 8px 32px rgba(13,27,42,0.18), inset 0 1px 0 rgba(255,255,255,0.4);\n --glass-blur: blur(18px) saturate(1.6);\n\n \/* \u2500\u2500 Legacy aliases (compatibilit\u00e9) \u2500\u2500 *\/\n --cream: #f0f4f8;\n --ink: #0d1b2a;\n --blue: #1a6eb5;\n --blue-dark:#0d3f6e;\n --blue-light:rgba(26,110,181,0.12);\n --gold: #c8913a;\n --sage: #4a8c7a;\n --light: #e8edf3;\n --mid: #6b7d8f;\n\n --ff-display: 'Playfair Display', Georgia, serif;\n --ff-body: 'DM Sans', sans-serif;\n --radius: 14px;\n --transition: 0.35s cubic-bezier(0.4,0,0.2,1);\n }\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html, body { width: 100%; max-width: 100%; overflow-x: hidden; }\n html { scroll-behavior: smooth; }\n body {\n background: var(--c-bg);\n background-image:\n radial-gradient(ellipse 80% 50% at 20% 0%, rgba(26,110,181,0.08) 0%, transparent 60%),\n radial-gradient(ellipse 60% 40% at 80% 100%, rgba(13,63,110,0.06) 0%, transparent 60%);\n color: var(--c-ink);\n font-family: var(--ff-body);\n font-size: 17px;\n line-height: 1.7;\n overflow-x: hidden;\n }\n img { display: block; width: 100%; }\n a { color: inherit; text-decoration: none; }\n\n \/* ============================================================\n BULLES ANIM\u00c9ES (inspir\u00e9es BULLES_RENVERSES)\n ============================================================ *\/\n .bubbles-canvas {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n overflow: hidden;\n }\n .bubble {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n animation: bubbleFloat linear infinite;\n \/* Liquid glass \u2014 fond d\u00e9grad\u00e9 translucide *\/\n background: radial-gradient(\n circle at 35% 35%,\n rgba(255,255,255,0.45) 0%,\n rgba(26,110,181,0.18) 40%,\n rgba(13,27,42,0.08) 100%\n );\n \/* Reflet interne en haut \u00e0 gauche *\/\n box-shadow:\n inset 2px 3px 8px rgba(255,255,255,0.55),\n inset -1px -1px 4px rgba(13,27,42,0.15),\n 0 6px 24px rgba(26,110,181,0.12);\n \/* Bordure tr\u00e8s fine iris\u00e9e *\/\n border: 1px solid rgba(255,255,255,0.4);\n }\n \/* Variantes de teinte via nth-child pour de la diversit\u00e9 *\/\n .bubble:nth-child(3n) {\n background: radial-gradient(\n circle at 35% 35%,\n rgba(255,255,255,0.4) 0%,\n rgba(200,145,58,0.14) 45%,\n rgba(13,27,42,0.06) 100%\n );\n box-shadow:\n inset 2px 3px 8px rgba(255,255,255,0.5),\n inset -1px -1px 4px rgba(13,27,42,0.1),\n 0 6px 24px rgba(200,145,58,0.1);\n border: 1px solid rgba(255,255,255,0.35);\n }\n .bubble:nth-child(5n) {\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255,255,255,0.5) 0%,\n rgba(74,140,122,0.12) 45%,\n rgba(13,27,42,0.06) 100%\n );\n box-shadow:\n inset 2px 3px 8px rgba(255,255,255,0.55),\n inset -1px -1px 4px rgba(13,27,42,0.1),\n 0 6px 24px rgba(74,140,122,0.1);\n }\n\n \/* D\u00e9sactiver les bulles si l'utilisateur pr\u00e9f\u00e8re moins de mouvement *\/\n @media (prefers-reduced-motion: reduce) {\n .bubbles-canvas { display: none; }\n }\n \/* D\u00e9sactiver les bulles sur mobile (< 768px) *\/\n @media (max-width: 768px) {\n .bubbles-canvas { display: none; }\n }\n @keyframes bubbleFloat {\n 0% { opacity: 0; transform: translateY(0) scale(0.5); }\n 8% { opacity: 0.55; }\n 75% { opacity: 0.38; }\n 95% { opacity: 0.05; }\n 100% { opacity: 0; transform: translateY(-108vh) scale(1.05); }\n }\n\n \/* ============================================================\n UTILITY\n ============================================================ *\/\n .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }\n .section { padding: 96px 0; }\n .label {\n font-family: var(--ff-body);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--blue);\n display: inline-block;\n margin-bottom: 18px;\n }\n .heading-xl {\n font-family: var(--ff-display);\n font-size: clamp(2.6rem, 5vw, 4.2rem);\n font-weight: 700;\n line-height: 1.1;\n letter-spacing: -0.02em;\n }\n .heading-lg {\n font-family: var(--ff-display);\n font-size: clamp(2rem, 3.5vw, 3rem);\n font-weight: 700;\n line-height: 1.15;\n \n }\n \n .heading-lg1 {\n font-family: var(--ff-display);\n font-size: clamp(2rem, 3.5vw, 3rem);\n font-weight: 700;\n line-height: 1.15;\n color: #ffffff;\n \n }\n .divider {\n width: 48px;\n height: 3px;\n background: var(--grad-accent);\n margin: 28px 0;\n border-radius: 2px;\n }\n .btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 14px 30px;\n border-radius: 40px;\n font-family: var(--ff-body);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.05em;\n cursor: pointer;\n transition: var(--transition);\n border: 2px solid transparent;\n }\n .btn-primary {\n background: var(--grad-accent);\n color: #fff;\n border: none;\n box-shadow: 0 4px 20px rgba(26,110,181,0.35);\n }\n .btn-primary:hover {\n background: linear-gradient(135deg, #0d3f6e 0%, #1a6eb5 100%);\n box-shadow: 0 6px 28px rgba(26,110,181,0.5);\n transform: translateY(-1px);\n }\n .btn-outline {\n background: transparent;\n border-color: var(--ink);\n color: var(--ink);\n }\n .btn-outline:hover {\n background: var(--ink);\n color: var(--cream);\n }\n\n \/* ============================================================\n HEADER \/ NAV\n ============================================================ *\/\n header {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 200;\n padding: 18px 0;\n background: transparent;\n transition: background 0.4s ease, padding 0.4s ease;\n }\n header.scrolled {\n background: rgba(13,27,42,0.55);\n backdrop-filter: var(--glass-blur);\n -webkit-backdrop-filter: var(--glass-blur);\n padding: 12px 0;\n border-bottom: none; \/* la banni\u00e8re colle directement dessous *\/\n box-shadow: none;\n }\n\n \/* ============================================================\n GROUPE FIXE : header + banni\u00e8re \u2014 un seul bloc coll\u00e9 en haut\n \u25b8 ACTIVER : BANNER_ACTIVE = true dans le JS\n \u25b8 D\u00c9SACTIVER : BANNER_ACTIVE = false dans le JS\n \u25b8 CONTENU : objet BANNER_DATA dans le JS\n ============================================================ *\/\n #site-header-group {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 200;\n display: flex;\n flex-direction: column;\n }\n\n \/* Le header perd son propre fixed \u2014 le groupe s'en charge *\/\n header {\n position: static !important;\n }\n\n \/* Ombre port\u00e9e sur l'ensemble au scroll *\/\n #site-header-group.scrolled {\n box-shadow: 0 6px 36px rgba(13,27,42,0.40);\n }\n\n \/* \u2500\u2500 Banni\u00e8re \u00e9v\u00e9nement \u2500\u2500 *\/\n #event-banner {\n position: static;\n overflow: hidden;\n background: linear-gradient(105deg,\n rgba(9,14,26,0.98) 0%,\n rgba(12,32,60,0.98) 45%,\n rgba(9,25,52,0.98) 75%,\n rgba(7,12,22,0.98) 100%\n );\n backdrop-filter: blur(22px) saturate(1.5);\n -webkit-backdrop-filter: blur(22px) saturate(1.5);\n \/* Filet dor\u00e9 s\u00e9parateur haut *\/\n border-top: 1px solid rgba(200,145,58,0.20);\n \/* Filet dor\u00e9 s\u00e9parateur bas *\/\n border-bottom: 1px solid rgba(200,145,58,0.28);\n \/* Animation : glisse en douceur depuis le haut *\/\n max-height: 0;\n opacity: 0;\n transition:\n max-height 0.55s cubic-bezier(0.4,0,0.2,1),\n opacity 0.40s ease 0.05s;\n will-change: max-height, opacity;\n }\n\n \/* Lueurs ambiantes internes *\/\n #event-banner::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 28% 140% at 6% 50%, rgba(200,145,58,0.07) 0%, transparent 70%),\n radial-gradient(ellipse 18% 140% at 94% 50%, rgba(26,110,181,0.05) 0%, transparent 70%);\n pointer-events: none;\n }\n\n \/* Banni\u00e8re d\u00e9ploy\u00e9e *\/\n #event-banner.banner-visible {\n max-height: 130px;\n opacity: 1;\n }\n\n \/* \u2500\u2500 Contenu interne \u2500\u2500 *\/\n .banner-inner {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 32px;\n display: flex;\n align-items: center;\n gap: 22px;\n height: 96px; \/* plus grand que v10 (88px) *\/\n position: relative;\n z-index: 1;\n }\n\n \/* \u2500\u2500 Vignette affiche \u2014 sans aucun cadre \u2500\u2500 *\/\n .banner-poster {\n flex-shrink: 0;\n width: 58px;\n height: 78px;\n border-radius: 6px;\n overflow: hidden;\n \/* Pas de border, pas de box-shadow *\/\n border: none;\n box-shadow: none;\n background: transparent;\n }\n .banner-poster img {\n width: 100%; height: 100%;\n object-fit: cover;\n display: block;\n border-radius: 6px;\n }\n .banner-poster-fallback {\n width: 100%; height: 100%;\n background: var(--grad-accent);\n display: flex; align-items: center; justify-content: center;\n font-size: 24px;\n border-radius: 6px;\n }\n\n \/* \u2500\u2500 S\u00e9parateur vertical \u2500\u2500 *\/\n .banner-sep {\n width: 1px;\n height: 44px;\n background: linear-gradient(to bottom,\n transparent,\n rgba(255,255,255,0.13) 25%,\n rgba(255,255,255,0.13) 75%,\n transparent\n );\n flex-shrink: 0;\n }\n\n \/* \u2500\u2500 Pastille statut \u2500\u2500 *\/\n .banner-badge {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: rgba(200,145,58,0.12);\n border: 1px solid rgba(200,145,58,0.40);\n border-radius: 20px;\n padding: 4px 12px 4px 8px;\n font-family: var(--ff-body);\n font-size: 9.5px;\n font-weight: 500;\n letter-spacing: 0.13em;\n text-transform: uppercase;\n color: var(--gold);\n white-space: nowrap;\n }\n .banner-badge-dot {\n width: 6px; height: 6px;\n border-radius: 50%;\n background: var(--gold);\n flex-shrink: 0;\n animation: bannerPulse 1.9s ease infinite;\n }\n @keyframes bannerPulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.3; transform: scale(0.65); }\n }\n\n \/* \u2500\u2500 Bloc texte : titre + m\u00e9tas empil\u00e9s \u2500\u2500 *\/\n .banner-info {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 7px;\n }\n\n \/* Titre \u2014 Playfair Display italique, typo du site *\/\n .banner-title {\n font-family: var(--ff-display);\n font-size: 1.12rem;\n font-weight: 700;\n font-style: italic;\n color: #fff;\n line-height: 1.15;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n \/* M\u00e9tas \u2014 DM Sans, typo du site *\/\n .banner-meta {\n display: flex;\n align-items: center;\n gap: 20px;\n }\n .banner-meta-item {\n display: flex;\n align-items: center;\n gap: 5px;\n font-family: var(--ff-body);\n font-size: 11.5px;\n font-weight: 400;\n color: rgba(255,255,255,0.50);\n white-space: nowrap;\n letter-spacing: 0.01em;\n }\n .banner-meta-item svg { opacity: 0.45; flex-shrink: 0; }\n .banner-meta-item strong {\n color: rgba(255,255,255,0.80);\n font-weight: 500;\n }\n\n \/* \u2500\u2500 CTA R\u00e9server \u2500\u2500 *\/\n .banner-cta {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 9px;\n padding: 11px 24px;\n background: var(--gold);\n color: #08101a;\n border-radius: 50px;\n font-family: var(--ff-body);\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n text-decoration: none;\n border: none;\n cursor: pointer;\n transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;\n box-shadow: 0 4px 18px rgba(200,145,58,0.36),\n inset 0 1px 0 rgba(255,255,255,0.20);\n white-space: nowrap;\n }\n .banner-cta:hover {\n background: #e0ad48;\n transform: translateY(-1px);\n box-shadow: 0 7px 24px rgba(200,145,58,0.52);\n }\n .banner-cta:active { transform: translateY(0); }\n .banner-cta svg { flex-shrink: 0; }\n\n \/* \u2500\u2500 Bouton fermeture \u2500\u2500 *\/\n .banner-close {\n flex-shrink: 0;\n width: 30px; height: 30px;\n border-radius: 50%;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.10);\n color: rgba(255,255,255,0.35);\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n font-size: 13px;\n line-height: 1;\n font-family: var(--ff-body);\n transition: background 0.2s, color 0.2s, border-color 0.2s;\n margin-left: 4px;\n }\n .banner-close:hover {\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.22);\n color: #fff;\n }\n\n \/* \u2500\u2500 Responsive mobile \u2500\u2500\n On conserve : titre, date, heure, lieu, bouton r\u00e9server\n On masque : affiche, s\u00e9parateurs, badge\n \u2500\u2500 *\/\n @media (max-width: 768px) {\n .banner-inner {\n padding: 12px 16px;\n height: auto;\n gap: 12px;\n align-items: center;\n flex-wrap: nowrap;\n }\n \/* Masqu\u00e9s sur mobile *\/\n .banner-poster,\n .banner-sep,\n .banner-badge { display: none; }\n\n \/* Infos : colonne, titre + m\u00e9tas bien lisibles *\/\n .banner-info {\n flex-direction: column;\n gap: 4px;\n align-items: flex-start;\n justify-content: center;\n }\n .banner-title {\n font-size: 0.88rem;\n font-style: italic;\n white-space: normal;\n line-height: 1.2;\n }\n .banner-meta { gap: 10px; flex-wrap: wrap; }\n .banner-meta-item { font-size: 10.5px; }\n \/* Tous les m\u00e9tas conserv\u00e9s : date, heure, lieu *\/\n\n \/* CTA compact mais lisible *\/\n .banner-cta {\n padding: 10px 16px;\n font-size: 11px;\n gap: 6px;\n flex-shrink: 0;\n }\n .banner-cta svg { display: none; }\n\n \/* max-height ajust\u00e9e pour mobile *\/\n #event-banner.banner-visible { max-height: 180px; }\n }\n\n @media (max-width: 480px) {\n .banner-inner { padding: 11px 14px; gap: 10px; }\n .banner-title { font-size: 0.82rem; }\n .banner-meta-item { font-size: 10px; }\n .banner-cta { padding: 9px 13px; font-size: 10.5px; }\n }\n\n \/* ============================================================\n BANNI\u00c8RE ANNONCE \u2014 gros titre + 2 lignes de texte\n M\u00eame syst\u00e8me d'activation : ANNOUNCE_ACTIVE dans le JS\n ============================================================ *\/\n #announce-banner {\n position: static;\n overflow: hidden;\n \/* Fond l\u00e9g\u00e8rement diff\u00e9rent : accent bleu profond avec nuance chaude *\/\n background: linear-gradient(100deg,\n rgba(8,12,24,0.98) 0%,\n rgba(14,38,72,0.98) 40%,\n rgba(11,30,60,0.98) 75%,\n rgba(7,11,22,0.98) 100%\n );\n backdrop-filter: blur(22px) saturate(1.5);\n -webkit-backdrop-filter: blur(22px) saturate(1.5);\n border-top: 1px solid rgba(26,110,181,0.22);\n border-bottom: 1px solid rgba(26,110,181,0.30);\n max-height: 0;\n opacity: 0;\n transition:\n max-height 0.55s cubic-bezier(0.4,0,0.2,1),\n opacity 0.40s ease 0.05s;\n will-change: max-height, opacity;\n position: relative;\n }\n\n \/* Lueurs ambiantes bleues *\/\n #announce-banner::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 30% 140% at 4% 50%, rgba(26,110,181,0.10) 0%, transparent 70%),\n radial-gradient(ellipse 20% 140% at 96% 50%, rgba(26,110,181,0.06) 0%, transparent 70%);\n pointer-events: none;\n }\n\n #announce-banner.banner-visible {\n max-height: 130px;\n opacity: 1;\n }\n\n \/* Contenu centr\u00e9 *\/\n .announce-inner {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 32px;\n height: 96px;\n position: relative;\n z-index: 1;\n }\n\n \/* Pastille optionnelle *\/\n .announce-badge {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: rgba(26,110,181,0.15);\n border: 1px solid rgba(26,110,181,0.45);\n border-radius: 20px;\n padding: 4px 12px 4px 8px;\n font-family: var(--ff-body);\n font-size: 9.5px;\n font-weight: 500;\n letter-spacing: 0.13em;\n text-transform: uppercase;\n color: #7bb8f0;\n white-space: nowrap;\n }\n .announce-badge-dot {\n width: 6px; height: 6px;\n border-radius: 50%;\n background: #7bb8f0;\n flex-shrink: 0;\n animation: bannerPulse 2s ease infinite;\n }\n\n \/* Bloc texte central *\/\n .announce-text {\n text-align: center;\n flex: 1;\n min-width: 0;\n }\n\n \/* Grand titre \u2014 Playfair Display *\/\n .announce-title {\n font-family: var(--ff-display);\n font-size: 1.25rem;\n font-weight: 700;\n font-style: italic;\n color: #fff;\n line-height: 1.1;\n letter-spacing: -0.01em;\n margin-bottom: 5px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n \/* 2 lignes de texte \u2014 DM Sans *\/\n .announce-lines {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n flex-wrap: wrap;\n }\n .announce-line {\n font-family: var(--ff-body);\n font-size: 11.5px;\n font-weight: 400;\n color: rgba(255,255,255,0.55);\n white-space: nowrap;\n letter-spacing: 0.01em;\n }\n .announce-line strong {\n color: rgba(255,255,255,0.82);\n font-weight: 500;\n }\n \/* S\u00e9parateur entre les 2 lignes *\/\n .announce-line-sep {\n width: 3px; height: 3px;\n border-radius: 50%;\n background: rgba(255,255,255,0.2);\n flex-shrink: 0;\n }\n\n \/* CTA optionnel *\/\n .announce-cta {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 11px 22px;\n background: rgba(26,110,181,0.18);\n color: #90c8ff;\n border-radius: 50px;\n border: 1px solid rgba(26,110,181,0.5);\n font-family: var(--ff-body);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n text-decoration: none;\n cursor: pointer;\n transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);\n white-space: nowrap;\n }\n .announce-cta:hover {\n background: rgba(26,110,181,0.38);\n color: #fff;\n transform: translateY(-1px);\n }\n .announce-cta:active { transform: translateY(0); }\n\n \/* Bouton fermeture \u2014 identique \u00e0 event-banner *\/\n .announce-close {\n flex-shrink: 0;\n width: 30px; height: 30px;\n border-radius: 50%;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.10);\n color: rgba(255,255,255,0.35);\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n font-size: 13px;\n line-height: 1;\n font-family: var(--ff-body);\n transition: background 0.2s, color 0.2s, border-color 0.2s;\n }\n .announce-close:hover {\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.22);\n color: #fff;\n }\n\n \/* Responsive mobile *\/\n @media (max-width: 768px) {\n .announce-inner {\n padding: 12px 16px;\n height: auto;\n gap: 10px;\n justify-content: space-between;\n }\n \/* Masquer badge sur mobile *\/\n .announce-badge { display: none; }\n\n .announce-text { text-align: left; flex: 1; }\n .announce-title { font-size: 0.90rem; white-space: normal; line-height: 1.2; }\n .announce-lines { justify-content: flex-start; gap: 6px; flex-wrap: wrap; }\n .announce-line { font-size: 10.5px; white-space: normal; }\n\n .announce-cta { padding: 9px 14px; font-size: 11px; }\n #announce-banner.banner-visible { max-height: 180px; }\n }\n @media (max-width: 480px) {\n .announce-inner { padding: 10px 14px; gap: 8px; }\n .announce-title { font-size: 0.82rem; }\n .announce-line { font-size: 10px; }\n .announce-cta { padding: 8px 12px; font-size: 10px; }\n }\n nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .logo-img {\n height: auto;\n width: 225px;\n display: block;\n object-fit: contain;\n filter: brightness(0) invert(1);\n }\n .nav-links {\n display: flex;\n gap: 32px;\n list-style: none;\n }\n .nav-links a {\n font-size: 13px;\n font-weight: 400;\n color: rgba(255,255,255,0.7);\n letter-spacing: 0.04em;\n transition: color var(--transition);\n white-space: nowrap;\n }\n .nav-links a:hover { color: #fff; }\n\n \/* ============================================================\n HERO \u2014 plein \u00e9cran, carrousel en fond, titre par-dessus\n ============================================================ *\/\n #hero {\n position: relative;\n width: 100%;\n height: 100vh;\n min-height: 600px;\n max-height: 900px;\n overflow: hidden;\n padding-top: 0;\n padding-bottom: 0;\n }\n\n \/* \u2500\u2500 Carrousel en fond \u2500\u2500 *\/\n .hero-carousel-wrap {\n position: absolute;\n inset: 0;\n z-index: 0;\n overflow: hidden;\n }\n .hero-slides {\n display: flex;\n width: 100%;\n height: 100%;\n transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);\n will-change: transform;\n }\n .hero-slide {\n min-width: 100%;\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n flex-shrink: 0;\n }\n .hero-slide img {\n width: 100%; height: 100%;\n object-fit: cover;\n display: block;\n transform: scale(1.04);\n transition: transform 6s ease;\n }\n .hero-slide.active img { transform: scale(1); }\n\n \/* \u2500\u2500 Overlay d\u00e9grad\u00e9 sombre \u2500\u2500 *\/\n .hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n background:\n linear-gradient(to right, rgba(8,15,24,0.78) 0%, rgba(13,27,42,0.4) 55%, transparent 100%),\n linear-gradient(to top, rgba(8,15,24,0.65) 0%, transparent 50%);\n }\n\n \/* \u2500\u2500 Contenu textuel par-dessus \u2500\u2500 *\/\n .hero-content {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 0 0 72px 0;\n }\n .hero-content-inner {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 64px;\n width: 100%;\n }\n\n \/* \u2500\u2500 Tag\/label \u2500\u2500 *\/\n .hero-tag-line {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 24px;\n }\n .hero-tag-pill {\n display: inline-block;\n background: var(--blue);\n color: #fff;\n font-family: var(--ff-body);\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n padding: 5px 14px;\n border-radius: 30px;\n }\n .hero-tag-text {\n font-family: var(--ff-body);\n font-size: 12px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.5);\n }\n\n \/* \u2500\u2500 Titre principal \u2500\u2500 *\/\n .hero-title {\n font-family: var(--ff-display);\n font-size: clamp(3rem, 6vw, 6rem);\n font-weight: 700;\n line-height: 1.0;\n letter-spacing: -0.03em;\n color: #fff;\n margin-bottom: 24px;\n max-width: 780px;\n }\n .hero-title em {\n font-style: normal;\n color: transparent;\n -webkit-text-stroke: 2px #fff;\n }\n .hero-title .accent { color: var(--blue); -webkit-text-stroke: 0; }\n\n \/* \u2500\u2500 Sous-titre \u2500\u2500 *\/\n .hero-subtitle {\n font-family: var(--ff-body);\n font-size: 1.05rem;\n color: rgba(255,255,255,0.7);\n max-width: 520px;\n line-height: 1.7;\n margin-bottom: 40px;\n }\n\n \/* \u2500\u2500 Boutons \u2500\u2500 *\/\n .hero-actions {\n display: flex;\n gap: 14px;\n flex-wrap: wrap;\n align-items: center;\n }\n .hero-btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 16px 32px;\n \/* Fond plein opaque \u2014 le d\u00e9grad\u00e9 ne fonctionnait pas sur fond transparent *\/\n background: linear-gradient(135deg, #1a6eb5 0%, #0d3f6e 100%);\n background-color: #1a6eb5; \/* fallback *\/\n color: #fff;\n border-radius: 50px;\n font-family: var(--ff-body);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-decoration: none;\n border: 2px solid transparent;\n box-shadow: 0 4px 20px rgba(26,110,181,0.45);\n transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;\n \/* Assure que le background s'applique bien sur l'\u00e9l\u00e9ment *\/\n -webkit-background-clip: padding-box;\n background-clip: padding-box;\n }\n .hero-btn-primary:hover {\n background: transparent;\n background-color: transparent;\n border-color: rgba(255,255,255,0.6);\n box-shadow: none;\n transform: translateY(-1px);\n }\n .hero-btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 16px 32px;\n background: rgba(255,255,255,0.1);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n color: #fff;\n border-radius: 50px;\n font-family: var(--ff-body);\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0.04em;\n text-decoration: none;\n border: 1px solid rgba(255,255,255,0.3);\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);\n transition: all 0.3s ease;\n }\n .hero-btn-secondary:hover {\n background: rgba(255,255,255,0.1);\n border-color: rgba(255,255,255,0.65);\n }\n\n \/* \u2500\u2500 Fl\u00e8che navigation \u2500\u2500 *\/\n .hero-nav-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 3;\n width: 52px; height: 52px;\n min-width: 52px; min-height: 52px;\n border-radius: 50% !important;\n background: rgba(255,255,255,0.12);\n backdrop-filter: blur(16px) saturate(1.5);\n -webkit-backdrop-filter: blur(16px) saturate(1.5);\n border: 1px solid rgba(255,255,255,0.28);\n box-shadow: 0 4px 16px rgba(13,27,42,0.25), inset 0 1px 0 rgba(255,255,255,0.3);\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n color: #fff;\n font-size: 18px;\n line-height: 1;\n padding: 0;\n transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;\n aspect-ratio: 1 \/ 1;\n }\n .hero-nav-btn:hover {\n background: rgba(0,103,157,0.6);\n border-color: var(--blue);\n }\n .hero-nav-btn.prev { left: 28px; }\n .hero-nav-btn.next { right: 90px; } \/* d\u00e9cal\u00e9 pour ne pas chevaucher le compteur *\/\n @media (max-width: 768px) {\n .hero-nav-btn { width: 42px; height: 42px; min-width: 42px; min-height: 42px; font-size: 15px; }\n .hero-nav-btn.prev { left: 14px; }\n .hero-nav-btn.next { right: 14px; }\n \/* Masquer le compteur sur mobile pour lib\u00e9rer de l'espace *\/\n .hero-counter { display: none; }\n }\n\n \/* \u2500\u2500 Dots de progression \u2014 supprim\u00e9s \u2500\u2500 *\/\n\n \/* \u2500\u2500 Compteur slide \u2500\u2500 *\/\n .hero-counter {\n position: absolute;\n top: 50%;\n right: 28px;\n transform: translateY(-50%);\n z-index: 3;\n writing-mode: vertical-lr;\n font-family: var(--ff-body);\n font-size: 11px;\n letter-spacing: 0.12em;\n color: rgba(255,255,255,0.4);\n }\n .hero-counter span { color: #fff; }\n\n \/* \u2500\u2500 Scroll indicator \u2500\u2500 *\/\n .hero-scroll {\n position: absolute;\n bottom: 36px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n color: rgba(255,255,255,0.35);\n font-size: 10px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n }\n .hero-scroll-line {\n width: 1px;\n height: 32px;\n background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);\n animation: scrollPulse 2s ease infinite;\n }\n @keyframes scrollPulse {\n 0%, 100% { opacity: 0.4; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.2); }\n }\n\n \/* \u2500\u2500 Responsive hero \u2014 tablette \u2500\u2500 *\/\n @media (max-width: 1024px) {\n .hero-content-inner { padding: 0 40px; }\n }\n\n \/* \u2500\u2500 Responsive hero \u2014 mobile \u2500\u2500 *\/\n @media (max-width: 768px) {\n \/* Section pleine hauteur avec hauteur dynamique mobile *\/\n #hero {\n height: 100svh;\n height: 100dvh; \/* dynamic viewport pour iOS Safari *\/\n min-height: 500px;\n max-height: none;\n overflow: hidden;\n }\n\n \/* Carrousel : chaque slide exactement 100vw, pas de d\u00e9bordement *\/\n .hero-carousel-wrap {\n position: absolute;\n inset: 0;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n .hero-slides {\n width: 100%;\n height: 100%;\n display: flex;\n flex-wrap: nowrap;\n will-change: transform;\n }\n .hero-slide {\n min-width: 100vw;\n width: 100vw;\n max-width: 100vw;\n height: 100%;\n flex-shrink: 0;\n position: relative;\n overflow: hidden;\n }\n\n \/* Image recadr\u00e9e horizontalement \u2014 pleine largeur, centr\u00e9e *\/\n .hero-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n transform: none; \/* supprime le Ken Burns sur mobile *\/\n transition: none;\n display: block;\n }\n .hero-slide.active img { transform: none; }\n\n \/* Overlay plus dense sur mobile pour lisibilit\u00e9 du texte *\/\n .hero-overlay {\n background:\n linear-gradient(to top, rgba(10,8,6,0.88) 0%, rgba(10,8,6,0.45) 45%, rgba(10,8,6,0.15) 100%),\n linear-gradient(to right, rgba(10,8,6,0.4) 0%, transparent 80%);\n }\n\n \/* Contenu ancr\u00e9 en bas sur mobile *\/\n .hero-content {\n justify-content: flex-end;\n padding: 0 0 80px 0;\n }\n .hero-content-inner {\n padding: 0 22px;\n }\n\n \/* Titre plus compact *\/\n .hero-title {\n font-size: clamp(2rem, 9vw, 3rem);\n letter-spacing: -0.02em;\n margin-bottom: 14px;\n max-width: 100%;\n }\n \/* Outline texte r\u00e9duit sur mobile *\/\n .hero-title em { -webkit-text-stroke: 1.5px #fff; }\n\n \/* Sous-titre *\/\n .hero-subtitle {\n font-size: 0.9rem;\n margin-bottom: 24px;\n max-width: 100%;\n }\n\n \/* Tag line plus compact *\/\n .hero-tag-line { margin-bottom: 14px; }\n .hero-tag-pill { font-size: 9px; padding: 4px 10px; }\n .hero-tag-text { font-size: 10px; }\n\n \/* Boutons empil\u00e9s et pleine largeur sur mobile *\/\n .hero-actions {\n flex-direction: column;\n align-items: stretch;\n gap: 10px;\n }\n .hero-btn-primary,\n .hero-btn-secondary {\n padding: 13px 20px;\n font-size: 13px;\n justify-content: center;\n text-align: center;\n }\n\n \/* Indicateur scroll masqu\u00e9 sur mobile *\/\n .hero-scroll { display: none; }\n }\n\n \/* \u2500\u2500 Responsive hero \u2014 tr\u00e8s petit \u00e9cran (\u2264 390px) \u2500\u2500 *\/\n @media (max-width: 390px) {\n .hero-title { font-size: clamp(1.75rem, 10vw, 2.4rem); }\n .hero-subtitle { display: none; } \/* lib\u00e8re de la place sur petits \u00e9crans *\/\n .hero-content { padding: 0 0 70px 0; }\n }\n\n \/* ============================================================\n YOUTUBE ENCADR\u00c9\n ============================================================ *\/\n \n \n .yt-section {\n background: var(--ink);\n padding: 40px 0 64px;\n }\n .yt-wrapper {\n max-width: 860px;\n margin: 0 auto;\n border: 1px solid rgba(26,110,181,0.25);\n border-radius: 24px;\n overflow: hidden;\n box-shadow: 0 24px 64px rgba(13,27,42,0.2), inset 0 1px 0 rgba(255,255,255,0.4);\n position: relative;\n background: rgba(255,255,255,0.7);\n backdrop-filter: blur(8px);\n }\n .yt-embed {\n width: 100%;\n aspect-ratio: 16\/9;\n display: block;\n border: none;\n }\n .yt-legend {\n background: rgba(26,110,181,0.08);\n border-top: 1px solid rgba(26,110,181,0.15);\n padding: 18px 28px;\n display: flex;\n align-items: center;\n gap: 14px;\n }\n .yt-arrow {\n font-size: 22px;\n animation: arrowBounce 1.4s ease infinite;\n display: inline-block;\n color: var(--blue);\n flex-shrink: 0;\n }\n @keyframes arrowBounce {\n 0%, 100% { transform: translateX(0); }\n 50% { transform: translateX(7px); }\n }\n\n \/* \u2500\u2500 Fa\u00e7ade YouTube \u2500\u2500 *\/\n .yt-facade {\n position: relative;\n width: 100%;\n aspect-ratio: 16\/9;\n cursor: pointer;\n background: #000;\n border-radius: 0;\n overflow: hidden;\n display: block;\n }\n .yt-facade img {\n width: 100%; height: 100%;\n object-fit: cover;\n display: block;\n transition: opacity 0.3s ease;\n }\n .yt-facade:hover img { opacity: 0.85; }\n .yt-facade-btn {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n width: 68px; height: 68px;\n border-radius: 50%;\n background: rgba(200,30,30,0.92);\n border: none;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: background 0.2s, transform 0.2s;\n box-shadow: 0 4px 24px rgba(0,0,0,0.5);\n }\n .yt-facade-btn:hover {\n background: rgba(220,40,40,1);\n transform: translate(-50%,-50%) scale(1.08);\n }\n .yt-facade-btn svg { margin-left: 5px; }\n .yt-facade-label {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);\n color: rgba(255,255,255,0.9);\n font-size: 12px;\n padding: 20px 14px 10px;\n font-family: var(--ff-body);\n }\n\n .yt-legend-text {\n font-family: var(--ff-display);\n font-style: italic;\n font-size: 1.05rem;\n color: rgba(250,247,242,0.85);\n }\n \n\n \/* ============================================================\n CHIFFRES CL\u00c9S\n ============================================================ *\/\n #chiffres {\n background: var(--grad-accent);\n padding: 28px 0;\n position: relative; z-index: 1;\n }\n .chiffres-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2px;\n }\n .chiffre-item {\n padding: 20px 24px;\n text-align: center;\n border-right: 1px solid rgba(255,255,255,0.18);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n .chiffre-item:last-child { border-right: none; }\n .chiffre-num {\n font-family: var(--ff-display);\n font-size: 2rem;\n font-weight: 700;\n color: #fff;\n line-height: 1;\n flex-shrink: 0;\n \/* Compteur anim\u00e9 : d\u00e9marre invisible, glisse vers le haut *\/\n opacity: 0;\n transform: translateY(12px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n }\n .chiffre-num.counted {\n opacity: 1;\n transform: translateY(0);\n }\n .chiffre-label {\n font-size: 12px;\n color: rgba(255,255,255,0.7);\n letter-spacing: 0.04em;\n text-align: left;\n line-height: 1.3;\n \/* Fondu l\u00e9ger *\/\n opacity: 0;\n transition: opacity 0.8s ease 0.4s;\n }\n .chiffre-label.visible {\n opacity: 1;\n }\n\n \/* ============================================================\n PR\u00c9SENTATION\n ============================================================ *\/\n #presentation {\n background:\n linear-gradient(135deg,\n #f0f7ff 0%,\n #e8f4ff 15%,\n #ffe8f5 35%,\n #fff3e0 55%,\n #e8fff5 75%,\n #eef0ff 100%\n );\n position: relative;\n }\n \/* Couche de profondeur subtle *\/\n #presentation::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 70% 60% at 20% 30%, rgba(26,110,181,0.10) 0%, transparent 60%),\n radial-gradient(ellipse 50% 50% at 80% 70%, rgba(200,145,58,0.10) 0%, transparent 60%),\n radial-gradient(ellipse 40% 40% at 60% 10%, rgba(74,140,122,0.08) 0%, transparent 55%);\n pointer-events: none;\n z-index: 0;\n }\n #presentation .container { position: relative; z-index: 1; }\n\n #presentation .pres-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 64px;\n align-items: center;\n }\n \/* Remplace pres-img-wrap : conteneur vid\u00e9o YT int\u00e9gr\u00e9 *\/\n .pres-yt-wrap {\n width: 100%;\n }\n \/* Contour liquid-glass + ombre r\u00e9duite *\/\n .pres-yt-wrap .yt-wrapper {\n max-width: none;\n margin: 0;\n border-radius: 22px;\n \/* Ombre port\u00e9e r\u00e9duite *\/\n box-shadow:\n 0 8px 28px rgba(0,0,0,0.10),\n 0 2px 8px rgba(0,0,0,0.06);\n \/* Contour liquid-glass *\/\n border: 1px solid rgba(255,255,255,0.65);\n outline: 2.5px solid rgba(255,255,255,0.25);\n outline-offset: 3px;\n background: rgba(255,255,255,0.55);\n backdrop-filter: blur(20px) saturate(1.8) brightness(1.08);\n -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.08);\n \/* Reflet interne liquid *\/\n position: relative;\n overflow: hidden;\n }\n .pres-yt-wrap .yt-wrapper::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 22px;\n background: linear-gradient(\n 135deg,\n rgba(255,255,255,0.40) 0%,\n rgba(255,255,255,0.10) 40%,\n rgba(255,255,255,0.02) 100%\n );\n pointer-events: none;\n z-index: 2;\n }\n .pres-yt-wrap .yt-wrapper .yt-embed {\n position: relative;\n z-index: 1;\n border-radius: 20px 20px 0 0;\n }\n .pres-img-wrap {\n border-radius: 20px;\n overflow: hidden;\n aspect-ratio: 1\/1;\n background: var(--light);\n }\n .placeholder-img {\n width: 100%; height: 100%;\n min-height: 300px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: var(--mid);\n font-size: 13px;\n gap: 12px;\n }\n .placeholder-img svg { opacity: 0.4; }\n .pres-text .lead {\n font-size: 1.15rem;\n font-weight: 500;\n color: var(--ink);\n margin-bottom: 20px;\n font-family: var(--ff-display);\n font-style: italic;\n }\n .pres-text p { color: #5a5148; margin-bottom: 16px; }\n .pres-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }\n .tag {\n padding: 6px 16px;\n border-radius: 30px;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.06em;\n border: 1.5px solid;\n }\n .tag-blue { border-color: var(--blue); color: var(--blue); }\n .tag-sage { border-color: var(--sage); color: var(--sage); }\n .tag-gold { border-color: var(--gold); color: #b8872a; }\n\n \/* Bouton t\u00e9l\u00e9chargement DP *\/\n .btn-download {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n margin-top: 32px;\n padding: 14px 28px;\n background: var(--ink);\n color: #fff;\n border-radius: 40px;\n font-family: var(--ff-body);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-decoration: none;\n transition: background var(--transition), transform var(--transition);\n border: 2px solid var(--ink);\n }\n .btn-download:hover {\n background: transparent;\n color: var(--ink);\n transform: translateY(-2px);\n }\n .btn-download svg { flex-shrink: 0; }\n\n \/* ============================================================\n VALEURS\n ============================================================ *\/\n #valeurs { background: var(--grad-soft); }\n .valeurs-header { text-align: center; max-width: 600px; margin: 0 auto 64px; }\n .valeurs-header .divider { margin: 20px auto; }\n .valeurs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }\n .valeur-card {\n background: var(--grad-card);\n backdrop-filter: var(--glass-blur);\n -webkit-backdrop-filter: var(--glass-blur);\n border-radius: 20px;\n padding: 40px 32px;\n border: 1px solid var(--glass-border);\n box-shadow: var(--glass-shadow);\n transition: transform var(--transition), box-shadow var(--transition);\n }\n .valeur-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 24px 56px rgba(13,27,42,0.16), inset 0 1px 0 rgba(255,255,255,0.5);\n }\n .valeur-icon {\n \n\t\twidth: 84px; height: 114px;\n border-radius: 14px;\n overflow: hidden;\n margin-bottom: 24px;\n flex-shrink: 0;\n }\n .valeur-icon img {\n \t\twidth: 100%; height: 100%;\n object-fit: cover;\n display: block;\n }\n \/* Fallback color\u00e9 si pas d'image *\/\n .valeur-icon.icon-blue { background: var(--cream); }\n .valeur-icon.icon-sage { background: var(--cream); }\n .valeur-icon.icon-gold { background: var(--cream); }\n .valeur-card h3 { font-family: var(--ff-display); font-size: 1.3rem; margin-bottom: 12px; }\n .valeur-card p { color: #6b5f57; font-size: 0.95rem; }\n\n \/* ============================================================\n TROUPE \u2014 FLIP CARDS\n ============================================================ *\/\n #troupe { background: var(--c-bg); }\n .troupe-header { text-align: center; max-width: 600px; margin: 0 auto 64px; }\n .troupe-header .divider { margin: 20px auto; }\n .comediens-grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 20px;\n }\n .comedien-flip {\n perspective: 900px;\n aspect-ratio: 3\/4;\n cursor: pointer;\n }\n .comedien-flip-inner {\n position: relative;\n width: 100%; height: 100%;\n transform-style: preserve-3d;\n transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);\n border-radius: 16px;\n }\n .comedien-flip:hover .comedien-flip-inner,\n .comedien-flip.flipped .comedien-flip-inner {\n transform: rotateY(180deg);\n }\n .flip-front, .flip-back {\n position: absolute;\n inset: 0;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n border-radius: 16px;\n overflow: hidden;\n }\n .flip-front {\n background: var(--light);\n }\n .flip-front .comedien-ph {\n width: 100%; height: 100%;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n color: var(--mid); gap: 8px; font-size: 12px;\n }\n .flip-front img {\n width: 100%; height: 100%;\n object-fit: cover;\n }\n .flip-front-overlay {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n background: linear-gradient(to top, rgba(0,50,80,0.85), transparent);\n padding: 16px 14px 14px;\n }\n .flip-front-name {\n color: #fff;\n font-family: var(--ff-display);\n font-size: 0.95rem;\n font-weight: 700;\n line-height: 1.2;\n }\n .flip-front-role {\n color: rgba(255,255,255,0.65);\n font-size: 10px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n margin-top: 3px;\n }\n .flip-back {\n background: var(--grad-accent);\n transform: rotateY(180deg);\n padding: 18px 16px 16px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n }\n .flip-back-name {\n font-family: var(--ff-display);\n font-size: 1rem;\n font-weight: 700;\n color: #fff;\n line-height: 1.1;\n margin-bottom: 3px;\n align-self: flex-start;\n }\n .flip-back-role {\n font-size: 10px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.6);\n margin-bottom: 12px;\n align-self: flex-start;\n }\n .flip-back-divider {\n display: none; \/* supprim\u00e9 *\/\n }\n .flip-back-bio {\n font-size: 11.5px;\n line-height: 1.5;\n color: rgba(255,255,255,0.85);\n flex: 1;\n overflow-y: auto;\n }\n .flip-hint {\n position: absolute;\n top: 10px; right: 10px;\n width: 22px; height: 22px;\n border-radius: 50%;\n background: rgba(0,103,157,0.7);\n display: flex; align-items: center; justify-content: center;\n font-size: 11px; color: #fff;\n backdrop-filter: blur(4px);\n }\n \/* Couleurs de fond vari\u00e9es *\/\n .bg-1 { background: linear-gradient(135deg,#00304a,#00679d); }\n .bg-2 { background: linear-gradient(135deg,#dde8df,#bdd0c2); }\n .bg-3 { background: linear-gradient(135deg,#e8e3d3,#d0c8a8); }\n .bg-4 { background: linear-gradient(135deg,#e3dde8,#c5bad0); }\n .bg-5 { background: linear-gradient(135deg,#004f7a,#0088cc); }\n\n \/* ============================================================\n SPECTACLES \u2014 avec carrousel de photos\n ============================================================ *\/\n #spectacles { background: linear-gradient(160deg, #080f18 0%, #0f2540 60%, #0d3f6e 100%); color: #f0f4f8; }\n .spectacles-header { max-width: 600px; margin: 0 auto 56px; text-align: center; }\n .spectacles-header .label { color: var(--gold); }\n .spectacles-header .divider { background: var(--gold); margin: 20px auto; }\n .spectacles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\n .spectacle-card {\n background: rgba(255,255,255,0.05);\n backdrop-filter: blur(12px) saturate(1.4);\n -webkit-backdrop-filter: blur(12px) saturate(1.4);\n border: 1px solid rgba(255,255,255,0.12);\n border-radius: 20px;\n overflow: hidden;\n transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);\n cursor: pointer;\n }\n .spectacle-card:hover {\n border-color: rgba(26,110,181,0.6);\n transform: translateY(-5px);\n box-shadow: 0 20px 48px rgba(13,27,42,0.4);\n }\n\n \/* Mini carrousel dans chaque spectacle *\/\n .spec-carousel {\n position: relative;\n aspect-ratio: 16\/9;\n overflow: hidden;\n background: #111;\n }\n .spec-slides {\n display: flex;\n height: 100%;\n transition: transform 0.6s cubic-bezier(0.77,0,0.175,1);\n }\n .spec-slide {\n min-width: 100%;\n height: 100%;\n }\n .spec-slide img { width: 100%; height: 100%; object-fit: cover; }\n .spec-slide-ph {\n width: 100%; height: 100%;\n display: flex; align-items: center; justify-content: center;\n font-size: 36px;\n }\n .spec-slide-ph:nth-child(odd) { background: #151515; }\n .spec-slide-ph:nth-child(even) { background: #0d0d0d; }\n .spec-nav {\n position: absolute;\n bottom: 10px; right: 12px;\n display: flex; gap: 6px; z-index: 5;\n }\n .spec-nav button {\n width: 28px; height: 28px;\n min-width: 28px; min-height: 28px;\n border-radius: 50% !important;\n background: rgba(0,103,157,0.7);\n border: none; cursor: pointer; color: #fff;\n font-size: 11px;\n line-height: 1;\n padding: 0;\n transition: background var(--transition);\n display: flex; align-items: center; justify-content: center;\n aspect-ratio: 1 \/ 1;\n }\n .spec-nav button:hover { background: var(--blue); }\n .spec-count {\n position: absolute;\n top: 10px; left: 12px;\n background: rgba(0,0,0,0.6);\n color: rgba(255,255,255,0.7);\n font-size: 10px;\n padding: 3px 9px;\n border-radius: 20px;\n backdrop-filter: blur(4px);\n }\n .spectacle-body { padding: 28px; position: relative; padding-bottom: 48px; }\n .spectacle-date { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }\n .spectacle-title { font-family: var(--ff-display); font-size: 1.3rem; margin-bottom: 12px; line-height: 1.2; }\n .spectacle-desc { font-size: 0.88rem; color: rgba(250,247,242,0.55); line-height: 1.6; }\n .spectacle-link {\n position: absolute;\n bottom: 20px;\n right: 22px;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.06em;\n color: var(--gold);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 5px;\n transition: color 0.3s ease, gap 0.3s ease;\n border-bottom: 1px solid rgba(200,145,58,0.35);\n padding-bottom: 2px;\n }\n .spectacle-link:hover {\n color: #e0a84a;\n gap: 9px;\n }\n\n \/* ============================================================\n AUDIT BOUTONS RONDS \u2014 garantie globale\n Tous les boutons circulaires du site sont parfaitement ronds\n ============================================================ *\/\n .hero-nav-btn,\n .spec-nav button,\n .banner-close,\n .announce-close,\n .flip-hint,\n .anciens-hint,\n .social-link,\n .press-nav-btn,\n .press-close-btn,\n .lightbox-close {\n border-radius: 50% !important;\n aspect-ratio: 1 \/ 1;\n }\n \/* Scroll indicator (hero-scroll-line) n'est pas un bouton, pas besoin *\/\n\n \/* ============================================================\n LA PRESSE EN PARLE \u2014 carrousel + lightbox\n ============================================================ *\/\n \/* \u2500\u2500 Responsive presse \u2500\u2500 *\/\n @media (max-width: 768px) {\n .presse-block {\n margin-top: 48px;\n padding-top: 40px;\n }\n\n .presse-header {\n margin-bottom: 32px;\n }\n\n \/* Wrap : hauteur explicite pour que les cartes translateX soient visibles.\n overflow: hidden n\u00e9cessaire pour le clip du carrousel JS. *\/\n .presse-carousel-wrap {\n overflow: hidden;\n \/* Hauteur = thumbnail 16\/9 sur 260px + body texte \u2248 90px *\/\n min-height: 290px;\n }\n\n \/* Masquer les fondus lat\u00e9raux sur mobile *\/\n .presse-carousel-wrap::before,\n .presse-carousel-wrap::after {\n display: none;\n }\n\n \/* Track JS : padding int\u00e9rieur pour que les cartes ne collent pas au bord *\/\n .presse-track {\n padding: 8px 16px 20px;\n gap: 14px;\n }\n\n \/* Largeur de carte adapt\u00e9e mobile *\/\n .presse-card {\n width: 260px;\n }\n\n .presse-nav {\n margin-top: 20px;\n }\n\n .lightbox-prev { left: -8px; }\n .lightbox-next { right: -8px; }\n .lightbox-content { max-width: 95vw; }\n .lightbox-prev, .lightbox-next { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 14px; }\n }\n @media (max-width: 480px) {\n .presse-card { width: 230px; }\n .presse-carousel-wrap { min-height: 270px; }\n .presse-nav-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 14px; }\n }\n\n \/* \u2500\u2500 Bloc presse int\u00e9gr\u00e9 dans la section spectacles \u2500\u2500 *\/\n .presse-block {\n margin-top: 72px;\n border-top: 1px solid rgba(255,255,255,0.08);\n padding-top: 64px;\n }\n .presse-header {\n max-width: 600px;\n margin: 0 auto 48px;\n text-align: center;\n }\n .presse-header .label { color: var(--gold); }\n .presse-header .divider { background: var(--gold); margin: 20px auto; }\n\n \/* \u2500\u2500 Wrapper carrousel \u2500\u2500 *\/\n .presse-carousel-wrap {\n position: relative;\n overflow: hidden;\n }\n \/* Fondu lat\u00e9ral estomp\u00e9 \u2014 tr\u00e8s doux, presque invisible *\/\n .presse-carousel-wrap::before,\n .presse-carousel-wrap::after {\n content: '';\n position: absolute;\n top: 0; bottom: 0;\n width: 60px;\n z-index: 4;\n pointer-events: none;\n }\n .presse-carousel-wrap::before {\n left: 0;\n \/* Opacit\u00e9 tr\u00e8s r\u00e9duite : 0.35 max au lieu de 0.95 *\/\n background: linear-gradient(to right,\n rgba(8,15,24,0.35) 0%,\n rgba(8,15,24,0.12) 60%,\n transparent 100%\n );\n }\n .presse-carousel-wrap::after {\n right: 0;\n background: linear-gradient(to left,\n rgba(8,15,24,0.35) 0%,\n rgba(8,15,24,0.12) 60%,\n transparent 100%\n );\n }\n\n \/* \u2500\u2500 Track \u2500\u2500 *\/\n .presse-track {\n display: flex;\n gap: 20px;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n padding: 8px 80px 24px;\n \/* Masquer la scrollbar *\/\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n .presse-track::-webkit-scrollbar { display: none; }\n\n \/* \u2500\u2500 Carte m\u00e9dia \u2500\u2500 *\/\n .presse-card {\n flex-shrink: 0;\n width: 300px;\n scroll-snap-align: start;\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n \/* Align\u00e9 sur .spectacle-card : rgba(255,255,255,0.05) + border 0.12 *\/\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.14);\n transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;\n position: relative;\n }\n .presse-card:hover {\n border-color: rgba(200,145,58,0.55);\n transform: translateY(-4px);\n box-shadow: 0 16px 40px rgba(0,0,0,0.45);\n }\n\n \/* Thumbnail *\/\n .presse-thumb {\n position: relative;\n aspect-ratio: 16\/9;\n overflow: hidden;\n background: #0a0a0a;\n }\n .presse-thumb img {\n width: 100%; height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease;\n }\n .presse-card:hover .presse-thumb img {\n transform: scale(1.04);\n }\n\n \/* Badge type : photo ou vid\u00e9o *\/\n .presse-type-badge {\n position: absolute;\n top: 10px; left: 10px;\n display: flex; align-items: center; gap: 5px;\n background: rgba(0,0,0,0.65);\n backdrop-filter: blur(8px);\n border-radius: 20px;\n padding: 4px 10px 4px 7px;\n font-family: var(--ff-body);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.85);\n border: 1px solid rgba(255,255,255,0.12);\n }\n .presse-type-badge svg { flex-shrink: 0; }\n .presse-type-badge.type-video { color: #f87171; }\n .presse-type-badge.type-photo { color: #93c5fd; }\n .presse-type-badge.type-link { color: var(--gold); }\n\n \/* Ic\u00f4ne play sur les vid\u00e9os *\/\n .presse-play-overlay {\n position: absolute;\n inset: 0;\n display: flex; align-items: center; justify-content: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n .presse-card:hover .presse-play-overlay { opacity: 1; }\n .presse-play-icon {\n width: 52px; height: 52px;\n border-radius: 50%;\n background: rgba(200,145,58,0.90);\n backdrop-filter: blur(6px);\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 4px 20px rgba(0,0,0,0.5);\n }\n\n \/* Corps de la carte \u2014 opacit\u00e9 align\u00e9e sur .spectacle-body *\/\n .presse-body {\n padding: 16px 18px 18px;\n \/* Fond l\u00e9ger pour diff\u00e9rencier du thumbnail *\/\n background: rgba(255,255,255,0.03);\n }\n .presse-source {\n font-family: var(--ff-body);\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 6px;\n }\n .presse-caption {\n font-family: var(--ff-display);\n font-style: italic;\n font-size: 0.95rem;\n \/* M\u00eame opacit\u00e9 que .spectacle-desc : rgba(250,247,242,0.75) *\/\n color: rgba(250,247,242,0.78);\n line-height: 1.45;\n }\n\n \/* \u2500\u2500 Navigation carrousel \u2500\u2500 *\/\n .presse-nav {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n margin-top: 32px;\n }\n .presse-nav-btn {\n width: 44px; height: 44px;\n min-width: 44px; min-height: 44px;\n border-radius: 50% !important;\n aspect-ratio: 1 \/ 1;\n background: rgba(255,255,255,0.08);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255,255,255,0.18);\n color: #fff;\n font-size: 16px;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n transition: background 0.25s, border-color 0.25s, transform 0.2s;\n padding: 0;\n line-height: 1;\n }\n .presse-nav-btn:hover {\n background: rgba(200,145,58,0.3);\n border-color: rgba(200,145,58,0.6);\n transform: scale(1.08);\n }\n\n \/* \u2500\u2500 LIGHTBOX \u2500\u2500 *\/\n #presse-lightbox {\n position: fixed;\n inset: 0;\n z-index: 9000;\n display: flex;\n align-items: center;\n justify-content: center;\n \/* Fond flout\u00e9 *\/\n background: rgba(5,10,20,0.92);\n backdrop-filter: blur(16px) saturate(1.2);\n -webkit-backdrop-filter: blur(16px) saturate(1.2);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.35s ease;\n }\n #presse-lightbox.lb-open {\n opacity: 1;\n pointer-events: all;\n }\n\n \/* Bouton fermeture \u2014 parfaitement rond *\/\n .lightbox-close {\n position: absolute;\n top: 20px; right: 20px;\n width: 46px; height: 46px;\n min-width: 46px; min-height: 46px;\n border-radius: 50% !important;\n aspect-ratio: 1 \/ 1;\n background: rgba(255,255,255,0.10);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255,255,255,0.22);\n color: rgba(255,255,255,0.80);\n font-size: 18px;\n line-height: 1;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n font-family: var(--ff-body);\n transition: background 0.2s, color 0.2s, transform 0.2s;\n padding: 0;\n z-index: 9010;\n }\n .lightbox-close:hover {\n background: rgba(255,255,255,0.22);\n color: #fff;\n transform: scale(1.08) rotate(90deg);\n }\n\n \/* Contenu lightbox *\/\n .lightbox-content {\n position: relative;\n max-width: 90vw;\n max-height: 88vh;\n width: 860px;\n }\n\n \/* Image en lightbox *\/\n .lightbox-img {\n width: 100%;\n max-height: 80vh;\n object-fit: contain;\n border-radius: 12px;\n display: block;\n box-shadow: 0 24px 80px rgba(0,0,0,0.7);\n }\n \/* Image masqu\u00e9e par d\u00e9faut *\/\n .lightbox-img.lb-hidden { display: none; }\n\n \/* Iframe YouTube en lightbox *\/\n .lightbox-yt {\n width: 100%;\n aspect-ratio: 16\/9;\n border: none;\n border-radius: 12px;\n box-shadow: 0 24px 80px rgba(0,0,0,0.7);\n display: block;\n }\n .lightbox-yt.lb-hidden { display: none; }\n\n \/* L\u00e9gende *\/\n .lightbox-caption {\n margin-top: 16px;\n text-align: center;\n font-family: var(--ff-display);\n font-style: italic;\n font-size: 0.95rem;\n color: rgba(250,247,242,0.65);\n }\n\n \/* Fl\u00e8ches lightbox prev\/next *\/\n .lightbox-prev,\n .lightbox-next {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 46px; height: 46px;\n min-width: 46px; min-height: 46px;\n border-radius: 50% !important;\n aspect-ratio: 1 \/ 1;\n background: rgba(255,255,255,0.10);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255,255,255,0.20);\n color: #fff;\n font-size: 18px;\n line-height: 1;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n padding: 0;\n transition: background 0.2s, transform 0.2s;\n z-index: 9010;\n }\n .lightbox-prev { left: -64px; }\n .lightbox-next { right: -64px; }\n .lightbox-prev:hover,\n .lightbox-next:hover {\n background: rgba(200,145,58,0.3);\n transform: translateY(-50%) scale(1.1);\n }\n\n \/* responsive presse d\u00e9plac\u00e9 ci-dessus dans .presse-block *\/\n\n \/* ============================================================\n T\u00c9MOIGNAGES\n ============================================================ *\/\n #temoignages { background: var(--c-bg); }\n .temoignages-header { text-align: center; max-width: 540px; margin: 0 auto 56px; }\n .temoignages-header .divider { margin: 20px auto; }\n .temoignages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\n .temoignage-card {\n background: var(--grad-card);\n backdrop-filter: var(--glass-blur);\n -webkit-backdrop-filter: var(--glass-blur);\n border: 1px solid var(--glass-border);\n box-shadow: var(--glass-shadow);\n border-radius: 20px;\n padding: 36px 28px;\n position: relative;\n }\n .temoignage-card::before {\n content: '\\201C';\n font-family: var(--ff-display);\n font-size: 6rem;\n color: var(--blue);\n opacity: 0.15;\n position: absolute;\n top: 10px; left: 20px;\n line-height: 1;\n }\n .temoignage-text {\n font-family: var(--ff-display);\n font-style: italic;\n font-size: 1.05rem;\n line-height: 1.6;\n color: var(--ink);\n margin-bottom: 24px;\n }\n .temoignage-author { display: flex; align-items: center; gap: 14px; }\n .author-avatar {\n width: 44px; height: 44px;\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-family: var(--ff-display);\n font-size: 1.1rem;\n color: var(--cream);\n font-weight: 700;\n flex-shrink: 0;\n }\n .author-name { font-weight: 500; font-size: 0.9rem; }\n .author-role { font-size: 0.78rem; color: var(--mid); }\n\n \/* ============================================================\n PARRAINS\n ============================================================ *\/\n #parrains { background: linear-gradient(160deg, #080f18 0%, #0f2540 60%, #0d3f6e 100%); padding: 96px 0; }\n .parrains-header { text-align: center; max-width: 560px; margin: 0 auto 64px; }\n .parrains-header .label { color: var(--gold); }\n .parrains-header h2 { color: var(--cream); }\n .parrains-header .divider { margin: 20px auto; background: var(--gold); }\n .parrains-header p { color: rgba(250,247,242,0.55); }\n .parrains-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }\n .parrain-card {\n \/* Align\u00e9 sur .spectacle-card *\/\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.14);\n border-radius: 20px;\n padding: 36px 28px 28px;\n text-align: center;\n transition: background var(--transition), border-color var(--transition), transform var(--transition);\n display: flex;\n flex-direction: column;\n }\n .parrain-card:hover {\n background: rgba(0,103,157,0.16);\n border-color: rgba(0,103,157,0.5);\n transform: translateY(-5px);\n }\n .parrain-photo {\n width: 120px; height: 120px;\n border-radius: 50%;\n margin: 0 auto 22px;\n overflow: hidden;\n border: 3px solid rgba(0,103,157,0.5);\n background: rgba(255,255,255,0.06);\n display: flex; align-items: center; justify-content: center;\n }\n .parrain-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }\n .parrain-photo-ph {\n width: 100%; height: 100%;\n display: flex; align-items: center; justify-content: center;\n font-family: var(--ff-display);\n font-size: 2rem;\n font-weight: 700;\n color: rgba(255,255,255,0.3);\n }\n .parrain-name {\n font-family: var(--ff-display);\n font-size: 1.3rem;\n font-weight: 700;\n color: var(--cream);\n margin-bottom: 4px;\n }\n .parrain-title {\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 16px;\n }\n .parrain-quote {\n font-family: var(--ff-display);\n font-style: italic;\n font-size: 0.95rem;\n color: rgba(250,247,242,0.65);\n line-height: 1.65;\n border-left: 2px solid rgba(0,103,157,0.5);\n padding-left: 14px;\n text-align: left;\n flex-grow: 1; \/* pousse l'ic\u00f4ne instagram vers le bas *\/\n }\n\n \/* \u2500\u2500 Ic\u00f4ne Instagram dans les cards \u2500\u2500 *\/\n .card-instagram {\n display: flex;\n justify-content: center;\n margin-top: auto; \/* colle l'ic\u00f4ne au bas de la card *\/\n padding-top: 20px;\n }\n .card-instagram a {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 34px; height: 34px;\n border-radius: 50%;\n background: rgba(255,255,255,0.08);\n border: 1px solid rgba(255,255,255,0.15);\n color: rgba(255,255,255,0.55);\n transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;\n text-decoration: none;\n }\n .card-instagram a:hover {\n background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);\n border-color: transparent;\n color: #fff;\n transform: scale(1.12);\n }\n .card-instagram svg {\n width: 16px; height: 16px;\n flex-shrink: 0;\n }\n \/* Version compacte pour professionnel-card \u2014 ic\u00f4ne align\u00e9e en bas *\/\n .professionnel-card .card-instagram {\n margin-top: auto;\n padding-top: 10px;\n }\n .professionnel-card .card-instagram a {\n width: 24px; height: 24px;\n }\n .professionnel-card .card-instagram svg {\n width: 11px; height: 11px;\n }\n\n \/* ============================================================\n PARTENAIRES\n ============================================================ *\/\n #partenaires { background: var(--grad-soft); padding: 64px 0; }\n .partenaires-label {\n text-align: center;\n color: var(--mid);\n font-size: 12px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n margin-bottom: 40px;\n }\n .partenaires-logos {\n display: flex; align-items: center; justify-content: center;\n gap: 48px; flex-wrap: wrap;\n }\n .partenaire-logo {\n font-family: var(--ff-display);\n font-size: 1rem;\n font-weight: 700;\n color: var(--mid);\n opacity: 0.5;\n transition: opacity var(--transition);\n letter-spacing: 0.04em;\n }\n .partenaire-logo:hover { opacity: 0.9; }\n\n \/* ============================================================\n CONTACT \u2014 HelloAsso\n ============================================================ *\/\n #contact { background: var(--c-bg); }\n .contact-inner {\n display: grid;\n grid-template-columns: 1fr 1.4fr;\n gap: 64px;\n align-items: start;\n }\n .contact-info p { color: #5a5148; margin-bottom: 32px; }\n .contact-detail {\n display: flex; align-items: flex-start;\n gap: 16px; margin-bottom: 20px;\n }\n .contact-icon {\n width: 40px; height: 40px;\n border-radius: 10px;\n background: rgba(26,110,181,0.1);\n backdrop-filter: blur(8px);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0; font-size: 16px;\n }\n .contact-detail-text .small { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); }\n .contact-detail-text .val { font-weight: 500; margin-top: 2px; }\n\n \/* \u2500\u2500 Fa\u00e7ade HelloAsso \u2500\u2500 *\/\n .ha-facade {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n padding: 48px 32px;\n text-align: center;\n cursor: pointer;\n }\n .ha-facade-icon {\n width: 72px; height: 72px;\n border-radius: 50%;\n background: rgba(26,110,181,0.12);\n display: flex; align-items: center; justify-content: center;\n font-size: 32px;\n }\n .ha-facade-title {\n font-family: var(--ff-display);\n font-size: 1.1rem;\n font-weight: 700;\n color: rgba(250,247,242,0.9);\n margin-bottom: 6px;\n }\n .ha-facade-sub {\n font-size: 0.88rem;\n color: rgba(250,247,242,0.5);\n }\n .ha-facade-btn {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n padding: 13px 28px;\n background: var(--grad-accent);\n color: #fff;\n border: none;\n border-radius: 40px;\n font-family: var(--ff-body);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n box-shadow: 0 4px 20px rgba(26,110,181,0.35);\n transition: box-shadow 0.2s, transform 0.2s;\n }\n .ha-facade-btn:hover {\n box-shadow: 0 6px 28px rgba(26,110,181,0.5);\n transform: translateY(-1px);\n }\n .ha-facade-note {\n font-size: 11px;\n color: rgba(250,247,242,0.35);\n }\n\n .helloasso-block {\n border: 1px solid rgba(26,110,181,0.2);\n border-radius: 24px;\n overflow: hidden;\n background: rgba(255,255,255,0.85);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n box-shadow: 0 12px 40px rgba(13,27,42,0.12), inset 0 1px 0 rgba(255,255,255,0.8);\n }\n .helloasso-header {\n background: var(--grad-accent);\n padding: 18px 24px;\n display: flex; align-items: center; gap: 12px;\n color: #fff;\n }\n .helloasso-logo-text {\n font-family: var(--ff-display);\n font-size: 1.1rem;\n font-weight: 700;\n }\n .helloasso-sub { font-size: 12px; opacity: 0.75; margin-top: 2px; }\n .helloasso-iframe {\n width: 100%;\n height: 500px;\n border: none;\n display: block;\n }\n\n \/* ============================================================\n FOOTER\n ============================================================ *\/\n footer {\n background: linear-gradient(160deg, #060d16 0%, #0d1b2a 100%);\n color: rgba(250,247,242,0.5);\n padding: 48px 0 32px;\n }\n .footer-inner {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 48px;\n margin-bottom: 48px;\n }\n .footer-logo-img {\n height: auto;\n width: 200px;\n object-fit: contain;\n display: block;\n margin-bottom: 18px;\n opacity: 0.9;\n }\n .footer-brand p { font-size: 11px; line-height: 1.7; }\n .footer-col h4 {\n font-size: 11px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: rgba(250,247,242,0.25);\n margin-bottom: 16px;\n }\n .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }\n .footer-col ul li a { font-size: 13px; transition: color var(--transition); }\n .footer-col ul li a:hover { color: var(--cream); }\n .footer-bottom {\n border-top: 1px solid rgba(255,255,255,0.06);\n padding-top: 28px;\n display: flex; align-items: center; justify-content: space-between;\n font-size: 12px;\n }\n .social-links { display: flex; gap: 16px; }\n .social-link {\n width: 36px; height: 36px;\n border-radius: 8px;\n background: rgba(255,255,255,0.06);\n display: flex; align-items: center; justify-content: center;\n font-size: 14px;\n color: rgba(255,255,255,0.5);\n transition: background var(--transition), color var(--transition);\n }\n .social-link:hover { background: var(--blue); color: #fff; }\n .scroll-indicator {\n margin-top: 48px;\n display: flex; align-items: center; gap: 12px;\n color: rgba(26,23,20,0.35);\n font-size: 11px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n justify-content: center;\n }\n .scroll-line { width: 40px; height: 1px; background: rgba(26,23,20,0.2); }\n\n \/* ============================================================\n ANIMATIONS SCROLL\n ============================================================ *\/\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(28px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* ============================================================\n RESPONSIVE\n ============================================================ *\/\n \/* responsive d\u00e9plac\u00e9 dans le bloc consolid\u00e9 ci-dessous *\/\n \/* ============================================================\n PROFESSIONNELS QUI NOUS SOUTIENNENT\n ============================================================ *\/\n .professionnels-wrap {\n border-top: 1px solid rgba(255,255,255,0.08);\n margin-top: 72px;\n padding-top: 64px;\n }\n .professionnels-header { text-align: center; max-width: 520px; margin: 0 auto 48px; }\n .professionnels-header h3 {\n font-family: var(--ff-display);\n font-size: clamp(1.5rem, 2.5vw, 2rem);\n font-weight: 700;\n color: var(--cream);\n margin-bottom: 10px;\n }\n .professionnels-header p { color: rgba(250,247,242,0.5); font-size: 0.95rem; }\n .professionnels-header .divider { margin: 16px auto; background: rgba(255,255,255,0.2); }\n .professionnels-grid {\n display: grid;\n grid-template-columns: repeat(8, 1fr);\n gap: 12px;\n }\n .professionnel-card {\n text-align: center;\n padding: 14px 8px 12px;\n border-radius: 14px;\n \/* Align\u00e9 sur .spectacle-card *\/\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.12);\n transition: background var(--transition), transform var(--transition);\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .professionnel-card:hover {\n background: rgba(0,103,157,0.16);\n border-color: rgba(0,103,157,0.42);\n transform: translateY(-4px);\n }\n .professionnel-photo {\n width: 72px; height: 72px;\n border-radius: 50%;\n margin: 0 auto 10px;\n overflow: hidden;\n border: 2px solid rgba(0,103,157,0.5);\n background: rgba(255,255,255,0.06);\n flex-shrink: 0;\n }\n .professionnel-photo img {\n width: 100%; height: 100%;\n object-fit: cover; border-radius: 50%;\n }\n .professionnel-name {\n font-family: var(--ff-display);\n font-size: 0.78rem;\n font-weight: 700;\n color: var(--cream);\n line-height: 1.2;\n margin-bottom: 4px;\n }\n .professionnel-fonction {\n font-size: 9px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: rgba(250,247,242,0.45);\n line-height: 1.4;\n \/* hauteur fixe pour aligner les ic\u00f4nes instagram *\/\n min-height: 2.8em;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n }\n\n \/* ============================================================\n SECTION ASSOCIATION\n ============================================================ *\/\n #association {\n background: var(--grad-soft);\n padding: 96px 0;\n }\n .association-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: start;\n }\n .association-visual {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n .association-img-wrap {\n border-radius: 20px;\n overflow: hidden;\n aspect-ratio: 4\/3;\n \n position: relative;\n }\n .association-img-wrap img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n }\n \/* Deuxi\u00e8me photo l\u00e9g\u00e8rement plus petite *\/\n .association-img-wrap--2 {\n aspect-ratio: 16\/9;\n }\n .association-badge {\n position: absolute;\n bottom: -14px; right: -14px;\n background: var(--grad-accent);\n color: #fff;\n padding: 14px 18px;\n border-radius: 14px;\n box-shadow: 0 12px 32px rgba(0,103,157,0.35);\n text-align: center;\n z-index: 2;\n }\n .association-badge-num {\n font-family: var(--ff-display);\n font-size: 1.8rem;\n font-weight: 700;\n line-height: 1;\n }\n .association-badge-label {\n font-size: 10px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n opacity: 0.75;\n margin-top: 3px;\n }\n .association-text p { color: #5a5148; margin-bottom: 16px; font-size: 1rem; }\n .association-infos {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-top: 32px;\n }\n .assoc-info-item {\n background: var(--light);\n border-radius: 12px;\n padding: 16px 18px;\n border-left: 3px solid var(--blue);\n }\n .assoc-info-label {\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--mid);\n margin-bottom: 4px;\n }\n .assoc-info-value {\n font-family: var(--ff-display);\n font-size: 0.95rem;\n font-weight: 700;\n color: var(--ink);\n }\n\n \/* responsive d\u00e9plac\u00e9 dans le bloc consolid\u00e9 ci-dessous *\/\n\n \/* \u2500\u2500 Membres du bureau \u2500\u2500 *\/\n .bureau-section {\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid rgba(26,23,20,0.1);\n }\n .bureau-title {\n font-family: var(--ff-display);\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--ink);\n margin-bottom: 14px;\n }\n .bureau-subtitle {\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--blue);\n margin-bottom: 6px;\n }\n .bureau-list {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0 24px;\n }\n .bureau-item {\n display: flex;\n align-items: baseline;\n gap: 0;\n padding: 7px 0;\n border-bottom: 1px solid rgba(13,27,42,0.06);\n }\n .bureau-item:last-child { border-bottom: none; }\n .bureau-nom {\n font-weight: 600;\n font-size: 0.88rem;\n color: var(--ink);\n min-width: 160px;\n }\n .bureau-role {\n font-size: 0.82rem;\n color: var(--mid);\n letter-spacing: 0.02em;\n }\n .bureau-role::before {\n content: '\u2014 ';\n opacity: 0.4;\n }\n\n \/* \u2500\u2500 Bouton Adh\u00e9rer \u2500\u2500 *\/\n .btn-adherer {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 14px 28px;\n background: rgba(26,110,181,0.08);\n backdrop-filter: blur(8px);\n color: var(--c-accent);\n border: 1.5px solid rgba(26,110,181,0.35);\n border-radius: 40px;\n font-family: var(--ff-body);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-decoration: none;\n transition: all var(--transition);\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);\n }\n .btn-adherer:hover {\n background: var(--grad-accent);\n color: #fff;\n border-color: transparent;\n box-shadow: 0 6px 24px rgba(26,110,181,0.35);\n }\n\n \/* \u2500\u2500 Sous-menu Nos cr\u00e9ations \u2500\u2500 *\/\n .has-submenu { position: relative; }\n \/* Lien parent actif quand le sous-menu est ouvert *\/\n .has-submenu:hover > a,\n .has-submenu:focus-within > a {\n color: var(--blue) !important;\n background: rgba(0,103,157,0.12);\n border-radius: 6px;\n padding: 4px 8px;\n margin: -4px -8px;\n white-space: nowrap;\n display: inline-flex;\n align-items: center;\n }\n \/* Pont invisible qui comble le gap entre le lien et le menu\n \u2192 emp\u00eache la fermeture quand la souris traverse l'espace *\/\n .has-submenu > a::before {\n content: '';\n position: absolute;\n top: 100%;\n left: -20px;\n right: -20px;\n height: 18px; \/* couvre tout le gap top: calc(100% + 10px) + marge *\/\n background: transparent;\n }\n .submenu {\n position: absolute;\n top: calc(100% + 10px);\n left: 50%;\n transform: translateX(-50%) translateY(-6px);\n background: rgba(13,27,42,0.6);\n backdrop-filter: blur(24px) saturate(1.8);\n -webkit-backdrop-filter: blur(24px) saturate(1.8);\n border: 1px solid rgba(255,255,255,0.14);\n border-top: 2px solid rgba(26,110,181,0.8);\n border-radius: 0 0 16px 16px;\n min-width: 230px;\n padding: 6px 0 10px;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n box-shadow: 0 24px 56px rgba(13,27,42,0.5), inset 0 1px 0 rgba(255,255,255,0.1);\n \/* d\u00e9lai de fermeture : 300ms pour laisser le temps de d\u00e9placer la souris *\/\n transition: opacity 0.2s ease 0s,\n transform 0.2s ease 0s,\n visibility 0s linear 0.3s;\n z-index: 500;\n box-shadow: 0 20px 48px rgba(0,0,0,0.5);\n }\n .has-submenu:hover .submenu,\n .has-submenu:focus-within .submenu {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n transform: translateX(-50%) translateY(0);\n \/* Ouverture imm\u00e9diate, pas de d\u00e9lai *\/\n transition: opacity 0.2s ease 0s,\n transform 0.2s ease 0s,\n visibility 0s linear 0s;\n }\n .submenu a {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 11px 20px;\n font-size: 13px;\n color: rgba(250,247,242,0.7) !important;\n white-space: nowrap;\n transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;\n letter-spacing: 0.02em;\n text-decoration: none;\n border-left: 2px solid transparent;\n }\n .submenu a::before {\n content: '';\n width: 5px; height: 5px;\n border-radius: 50%;\n background: var(--blue);\n opacity: 0;\n flex-shrink: 0;\n transition: opacity 0.2s ease;\n }\n .submenu a:hover {\n color: #fff !important;\n background: rgba(0,103,157,0.18);\n padding-left: 24px;\n border-left-color: var(--blue);\n }\n .submenu a:hover::before { opacity: 1; }\n \/* Indicateur fl\u00e8che sous le lien parent *\/\n .has-submenu > a::after {\n content: ' \u25be';\n font-size: 9px;\n opacity: 0.55;\n transition: transform 0.2s ease;\n display: inline-block;\n }\n .has-submenu:hover > a::after {\n transform: rotate(180deg);\n opacity: 1;\n }\n\n \/* \u2500\u2500 Module \"Renvers\u00e9(e) un jour\" \u2014 carrousel flip \u2500\u2500 *\/\n .anciens-module {\n margin-top: 72px;\n background: var(--grad-section);\n border-radius: 24px;\n \/* Padding droit : marge visible entre carrousel et bord du cadre *\/\n padding: 48px 48px 48px 56px;\n display: flex;\n align-items: center;\n gap: 48px;\n position: relative;\n overflow: hidden;\n }\n .anciens-module::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(0,103,157,0.2) 0%, transparent 70%);\n pointer-events: none;\n }\n\n \/* \u2500\u2500 Texte gauche \u2500\u2500 *\/\n .anciens-text {\n position: relative;\n z-index: 2;\n flex-shrink: 0;\n max-width: 220px;\n }\n .anciens-label {\n font-size: 10px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--blue);\n margin-bottom: 10px;\n display: block;\n }\n .anciens-title {\n font-family: var(--ff-display);\n font-size: clamp(1.3rem, 2vw, 1.9rem);\n font-weight: 700;\n color: var(--cream);\n line-height: 1.15;\n margin-bottom: 10px;\n }\n .anciens-sub {\n font-size: 0.9rem;\n color: rgba(250,247,242,0.5);\n font-style: italic;\n font-family: var(--ff-display);\n }\n\n \/* \u2500\u2500 Wrapper carrousel desktop : d\u00e9filement infini \u2500\u2500 *\/\n .anciens-carousel-wrap {\n flex: 1;\n min-width: 0;\n position: relative;\n overflow: hidden;\n height: 188px;\n z-index: 2;\n }\n\n \/* Track d\u00e9filant *\/\n .anciens-carousel-track {\n display: flex;\n gap: 14px;\n position: absolute;\n top: 0; left: 0;\n height: 100%;\n will-change: transform;\n }\n\n \/* \u2500\u2500 Carte flip (desktop) \u2500\u2500 *\/\n .anciens-flip {\n flex-shrink: 0;\n width: 140px;\n height: 188px;\n perspective: 800px;\n cursor: pointer;\n border-radius: 14px;\n }\n .anciens-flip-inner {\n position: relative;\n width: 100%; height: 100%;\n transform-style: preserve-3d;\n transition: transform 0.65s cubic-bezier(0.4,0.2,0.2,1);\n border-radius: 14px;\n }\n .anciens-flip.flipped .anciens-flip-inner {\n transform: rotateY(180deg);\n }\n\n \/* Faces avant \/ arri\u00e8re partag\u00e9es *\/\n .anciens-front,\n .anciens-back {\n position: absolute;\n inset: 0;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n border-radius: 14px;\n overflow: hidden;\n }\n .anciens-front { background: var(--c-bg); }\n .anciens-front img {\n width: 100%; height: 100%;\n object-fit: cover;\n display: block;\n }\n .anciens-front-overlay {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n background: linear-gradient(to top, rgba(0,30,60,0.88), transparent);\n padding: 14px 10px 10px;\n }\n .anciens-front-name {\n color: #fff;\n font-family: var(--ff-display);\n font-size: 0.85rem;\n font-weight: 700;\n line-height: 1.2;\n }\n .anciens-front-role {\n color: rgba(255,255,255,0.6);\n font-size: 9px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n margin-top: 2px;\n }\n .anciens-hint {\n position: absolute;\n top: 8px; right: 8px;\n width: 20px; height: 20px;\n border-radius: 50%;\n background: rgba(0,103,157,0.75);\n display: flex; align-items: center; justify-content: center;\n font-size: 10px; color: #fff;\n backdrop-filter: blur(4px);\n pointer-events: none;\n }\n .anciens-back {\n background: var(--grad-accent);\n transform: rotateY(180deg);\n padding: 14px 12px 12px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n }\n .anciens-back-name {\n font-family: var(--ff-display);\n font-size: 0.9rem;\n font-weight: 700;\n color: #fff;\n line-height: 1.1;\n margin-bottom: 2px;\n }\n .anciens-back-role {\n font-size: 9px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.6);\n margin-bottom: 10px;\n }\n .anciens-back-bio {\n font-size: 10.5px;\n line-height: 1.5;\n color: rgba(255,255,255,0.85);\n overflow-y: auto;\n flex: 1;\n }\n\n \/* Fondus bords carrousel desktop *\/\n .anciens-fade {\n position: absolute;\n top: 0; bottom: 0;\n width: 60px;\n z-index: 3;\n pointer-events: none;\n }\n .anciens-fade--left {\n left: 0;\n background: linear-gradient(to right, rgba(15,37,64,0.97) 0%, transparent 100%);\n }\n .anciens-fade--right {\n right: 0;\n background: linear-gradient(to left, rgba(15,37,64,0.97) 0%, transparent 100%);\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n RESPONSIVE MOBILE anciens-module\n Layout : colonne \u2014 titre en HAUT, carrousel 1 photo en BAS\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n \/* Masquer les dots sur desktop *\/\n .anciens-dots { display: none; }\n\n @media (max-width: 768px) {\n\n \/* Module : colonne, padding uniforme \u2014 overflow visible pour ne pas\n couper le carrousel qui d\u00e9borde lat\u00e9ralement sur mobile *\/\n .anciens-module {\n flex-direction: column;\n align-items: stretch;\n padding: 36px 24px 32px;\n gap: 28px;\n border-radius: 20px;\n overflow: visible; \/* \u2190 \u00e9tait hidden, coupait le carrousel *\/\n }\n\n \/* Texte : pleine largeur, lisible *\/\n .anciens-text {\n max-width: 100%;\n flex-shrink: 0;\n }\n .anciens-title {\n font-size: clamp(1.45rem, 6vw, 1.85rem);\n line-height: 1.15;\n }\n\n \/* \u2500\u2500 Carrousel mobile : 1 seule photo, pleine largeur \u2500\u2500 *\/\n .anciens-carousel-wrap {\n width: 100%;\n height: 260px;\n overflow: hidden; \/* on clipe ici, pas sur le module *\/\n position: relative;\n border-radius: 16px;\n flex-shrink: 0;\n display: block; \/* garantit la visibilit\u00e9 *\/\n }\n\n \/* Sur mobile le track d\u00e9file en slides de 100% *\/\n .anciens-carousel-track {\n gap: 0;\n transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);\n will-change: transform;\n }\n\n \/* Chaque carte = 100% de la fen\u00eatre *\/\n .anciens-flip {\n width: 100%;\n min-width: 100%;\n height: 260px;\n border-radius: 16px;\n }\n\n \/* Masquer les fondus (inutiles en mode 1 photo) *\/\n .anciens-fade { display: none; }\n\n \/* Dots de navigation mobile *\/\n .anciens-dots {\n display: flex;\n justify-content: center;\n gap: 7px;\n margin-top: 14px;\n }\n .anciens-dot {\n width: 7px; height: 7px;\n border-radius: 50%;\n background: rgba(255,255,255,0.25);\n cursor: pointer;\n transition: background 0.3s, transform 0.3s;\n border: none;\n padding: 0;\n flex-shrink: 0;\n }\n .anciens-dot.active {\n background: #fff;\n transform: scale(1.25);\n }\n }\n\n @media (max-width: 480px) {\n .anciens-module { padding: 28px 18px 26px; gap: 22px; }\n .anciens-carousel-wrap { height: 220px; }\n .anciens-flip { height: 220px; }\n .anciens-title { font-size: clamp(1.3rem, 7vw, 1.6rem); }\n }\n\n \/* ============================================================\n RESPONSIVE MOBILE \u2014 CORRECTIONS GLOBALES\n ============================================================ *\/\n @media (max-width: 768px) {\n \/* \u2500\u2500 Espacement global \u2500\u2500 *\/\n .section { padding: 60px 0; }\n .container { padding: 0 18px; }\n\n \/* \u2500\u2500 Nav links masqu\u00e9es \u2500\u2500 *\/\n .nav-links { display: none; }\n\n \/* \u2500\u2500 Section pr\u00e9sentation \u2500\u2500 *\/\n #presentation .pres-inner { grid-template-columns: 1fr; gap: 36px; }\n .pres-yt-wrap { order: -1; }\n\n \/* \u2500\u2500 Valeurs \u2500\u2500 *\/\n .valeurs-grid { grid-template-columns: 1fr; gap: 18px; }\n .valeurs-header { margin-bottom: 40px; }\n\n \/* \u2500\u2500 Spectacles \u2500\u2500 *\/\n .spectacles-grid { grid-template-columns: 1fr; gap: 20px; }\n .spectacles-header { margin-bottom: 36px; }\n\n \/* \u2500\u2500 T\u00e9moignages \u2500\u2500 *\/\n .temoignages-grid { grid-template-columns: 1fr; gap: 18px; }\n\n \/* \u2500\u2500 Parrains \u2500\u2500 *\/\n .parrains-grid { grid-template-columns: 1fr; gap: 24px; max-width: 400px; margin-left: auto; margin-right: auto; }\n\n \/* \u2500\u2500 Association \u2500\u2500 *\/\n .association-inner { grid-template-columns: 1fr; gap: 36px; }\n .association-infos { grid-template-columns: 1fr 1fr; }\n .association-badge { bottom: -10px; right: -10px; padding: 10px 14px; }\n\n \/* \u2500\u2500 Contact \u2500\u2500 *\/\n .contact-inner { grid-template-columns: 1fr; gap: 36px; }\n .helloasso-iframe { height: 420px; }\n\n \/* \u2500\u2500 Footer \u2500\u2500 *\/\n .footer-inner { grid-template-columns: 1fr; gap: 28px; }\n .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }\n\n \/* \u2500\u2500 Professionnels \u2500\u2500 *\/\n .professionnels-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }\n\n \/* \u2500\u2500 Flip cards troupe \u2500\u2500 *\/\n .comediens-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }\n\n \/* \u2500\u2500 Module anciens : responsive g\u00e9r\u00e9 dans les styles du composant \u2500\u2500 *\/\n\n \/* \u2500\u2500 Boutons hero \u2500\u2500 *\/\n .hero-btn-primary, .hero-btn-secondary { width: 100%; justify-content: center; }\n\n \/* \u2500\u2500 Sections heading \u2500\u2500 *\/\n .heading-xl { font-size: clamp(2rem, 8vw, 3rem); }\n .heading-lg, .heading-lg1 { font-size: clamp(1.7rem, 6vw, 2.4rem); }\n\n \/* \u2500\u2500 Nav CTA \u2500\u2500 *\/\n .nav-cta { padding: 9px 14px !important; font-size: 11px !important; letter-spacing: 0.02em; gap: 6px !important; }\n\n \/* \u2500\u2500 Chiffres mobile : 2 colonnes compactes \u2500\u2500 *\/\n #chiffres { padding: 20px 0; }\n .chiffres-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }\n .chiffre-item {\n padding: 14px 12px;\n flex-direction: column;\n gap: 4px;\n border-right: 1px solid rgba(255,255,255,0.12);\n border-bottom: 1px solid rgba(255,255,255,0.12);\n }\n .chiffre-item:nth-child(2n) { border-right: none; }\n .chiffre-item:nth-child(3), .chiffre-item:nth-child(4) { border-bottom: none; }\n .chiffre-num { font-size: 1.4rem; }\n .chiffre-label { font-size: 10px; text-align: center; letter-spacing: 0.02em; }\n\n \/* \u2500\u2500 Bureau \u2500\u2500 *\/\n .bureau-list { grid-template-columns: 1fr; }\n\n \/* \u2500\u2500 Association infos \u2500\u2500 *\/\n .association-badge { position: static; margin-top: 12px; width: fit-content; }\n }\n\n @media (max-width: 480px) {\n .comediens-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }\n .professionnels-grid { grid-template-columns: repeat(2, 1fr); }\n .parrains-grid { grid-template-columns: 1fr; }\n .valeur-card { padding: 28px 22px; }\n .chiffres-grid { grid-template-columns: 1fr 1fr; }\n .chiffre-item { padding: 12px 8px; }\n .chiffre-num { font-size: 1.25rem; }\n .chiffre-label { font-size: 9px; }\n .nav-cta { padding: 8px 10px !important; font-size: 10px !important; }\n .association-infos { grid-template-columns: 1fr; }\n .helloasso-iframe { height: 380px; }\n .spectacle-body { padding: 20px 18px 44px; }\n }\n\n @media (max-width: 390px) {\n .hero-title { font-size: clamp(1.75rem, 10vw, 2.4rem); }\n .hero-subtitle { display: none; }\n .hero-content { padding: 0 0 70px 0; }\n .comediens-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\n }\n\n \/* \u2500\u2500 Tablet adjustments \u2500\u2500 *\/\n @media (max-width: 1024px) and (min-width: 769px) {\n .comediens-grid { grid-template-columns: repeat(4, 1fr); }\n .chiffres-grid { grid-template-columns: repeat(2, 1fr); }\n .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }\n .parrains-grid { grid-template-columns: 1fr 1fr; }\n .professionnels-grid { grid-template-columns: repeat(4, 1fr); }\n }\n\n <\/style>\n<\/head>\n<body>\n\n\n<!-- ============================================================\n BULLES ANIM\u00c9ES (fond discret inspir\u00e9 BULLES_RENVERSES)\n============================================================ -->\n<div class=\"bubbles-canvas\" id=\"bubblesCanvas\" aria-hidden=\"true\"><\/div>\n\n<!-- ============================================================\n HEADER\n============================================================ -->\n<!-- ============================================================\n GROUPE FIXE \u2014 header + banni\u00e8re soud\u00e9s (un seul position:fixed)\n============================================================ -->\n<div id=\"site-header-group\">\n\n<header>\n <div class=\"container\">\n <nav>\n <!-- Logo PNG blanc -->\n <a href=\"#\">\n <img decoding=\"async\"\n src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/LOGO_LR_BLANC_OK.png\"\n alt=\"Les Renvers\u00e9s \u2014 Th\u00e9\u00e2tre pour tous\"\n class=\"logo-img\"\n onerror=\"this.style.display='none';this.nextElementSibling.style.display='block';\"\n \/>\n \n <\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#presentation\">La compagnie<\/a><\/li>\n <li><a href=\"#troupe\">La troupe<\/a><\/li>\n <li><a href=\"#association\">L'association<\/a><\/li>\n <li class=\"has-submenu\">\n <a href=\"#spectacles\">Nos cr\u00e9ations<\/a>\n <div class=\"submenu\">\n <a href=\"#spectacles\">Un royaume renversant<\/a>\n <a href=\"#spectacles\">Je me souviens<\/a>\n <a href=\"#spectacles\">Tout est provisoire<\/a>\n <a href=\"#spectacles\">Tout est po\u00e9sie(s)<\/a>\n <a href=\"#spectacles\">C'est quoi le doute<\/a>\n <\/div>\n <\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <a href=\"https:\/\/www.helloasso.com\/associations\/les-renverses\/formulaires\/1\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-primary nav-cta\">Nous soutenir<\/a>\n <\/nav>\n <\/div>\n<\/header>\n\n<!-- ============================================================\n BANNI\u00c8RE \u00c9V\u00c9NEMENT\n \u25b8 ACTIVER \/ D\u00c9SACTIVER : BANNER_ACTIVE = true \/ false dans le JS\n \u25b8 MODIFIER LE CONTENU : objet BANNER_DATA dans le JS\n============================================================ -->\n<div id=\"event-banner\" role=\"banner\" aria-live=\"polite\">\n <div class=\"banner-inner\">\n\n <!-- Vignette affiche (masqu\u00e9e mobile) -->\n <div class=\"banner-poster\" id=\"bannerPoster\"><\/div>\n\n <div class=\"banner-sep\"><\/div>\n\n <!-- Pastille statut (masqu\u00e9e mobile) -->\n <div class=\"banner-badge\">\n <span class=\"banner-badge-dot\"><\/span>\n <span id=\"bannerBadgeText\"><\/span>\n <\/div>\n\n <div class=\"banner-sep\"><\/div>\n\n <!-- Titre + m\u00e9tas -->\n <div class=\"banner-info\">\n <div class=\"banner-title\" id=\"bannerTitle\"><\/div>\n <div class=\"banner-meta\" id=\"bannerMeta\"><\/div>\n <\/div>\n\n <!-- CTA -->\n <a id=\"bannerCta\" href=\"#\" target=\"_blank\" rel=\"noopener\" class=\"banner-cta\">\n <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"\/><path d=\"M8 3v4M16 3v4M2 10h20\"\/><\/svg>\n <span id=\"bannerCtaText\"><\/span>\n <\/a>\n\n <!-- Fermeture -->\n <button class=\"banner-close\" id=\"bannerClose\" aria-label=\"Fermer\">✕<\/button>\n\n <\/div>\n<\/div><!-- \/#event-banner -->\n\n<!-- ============================================================\n BANNI\u00c8RE ANNONCE \u2014 gros titre + 2 lignes de texte\n \u25b8 ACTIVER \/ D\u00c9SACTIVER : ANNOUNCE_ACTIVE = true \/ false dans le JS\n \u25b8 MODIFIER LE CONTENU : objet ANNOUNCE_DATA dans le JS\n============================================================ -->\n<div id=\"announce-banner\" role=\"banner\" aria-live=\"polite\">\n <div class=\"announce-inner\">\n\n <!-- Pastille type (masqu\u00e9e mobile) -->\n <div class=\"announce-badge\">\n <span class=\"announce-badge-dot\"><\/span>\n <span id=\"announceBadgeText\"><\/span>\n <\/div>\n\n <!-- Bloc texte central -->\n <div class=\"announce-text\">\n <div class=\"announce-title\" id=\"announceTitle\"><\/div>\n <div class=\"announce-lines\">\n <span class=\"announce-line\" id=\"announceLine1\"><\/span>\n <span class=\"announce-line-sep\"><\/span>\n <span class=\"announce-line\" id=\"announceLine2\"><\/span>\n <\/div>\n <\/div>\n\n <!-- CTA (optionnel \u2014 masqu\u00e9 si ctaHref vide) -->\n <a id=\"announceCta\" href=\"#\" target=\"_blank\" rel=\"noopener\" class=\"announce-cta\">\n <span id=\"announceCtaText\"><\/span>\n <\/a>\n\n <!-- Fermeture -->\n <button class=\"announce-close\" id=\"announceClose\" aria-label=\"Fermer\">✕<\/button>\n\n <\/div>\n<\/div>\n\n<\/div><!-- \/#site-header-group -->\n\n<!-- ============================================================\n HERO \u2014 plein \u00e9cran, carrousel fond, titre par-dessus\n============================================================ -->\n<section id=\"hero\">\n\n <!-- Carrousel en fond -->\n <div class=\"hero-carousel-wrap\" id=\"heroCarousel\">\n <div class=\"hero-slides\" id=\"heroSlides\">\n <div class=\"hero-slide active\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-4147-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4434-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4586-copie-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/P1047846-64-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/P1220798-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/P1047946-119-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4645-copie-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4519-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4416-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4464-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4454-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4611-copie-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/P1220832-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/LES_RENVERSES_JEMESOUVIENS_40x60_300DPI_RVB_V4-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <div class=\"hero-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3805-1.jpg\" alt=\"Les Renvers\u00e9s sur sc\u00e8ne\" \/><\/div>\n <\/div>\n <\/div>\n\n <!-- Overlay sombre -->\n <div class=\"hero-overlay\"><\/div>\n\n <!-- Contenu textuel -->\n <div class=\"hero-content\">\n <div class=\"hero-content-inner\">\n \n <h1 class=\"hero-title\">\n L'art de la sc\u00e8ne,<br>\n <span class=\"accent\">sans limites<\/span>\n <\/h1>\n <p class=\"hero-subtitle\">\n Les Renvers\u00e9s accompagnent des personnes en situation de handicap dans la pratique du th\u00e9\u00e2tre \u2014 pour bousculer les regards et renverser les id\u00e9es re\u00e7ues.\n <\/p>\n <div class=\"hero-actions\">\n <a href=\"#presentation\" class=\"hero-btn-primary\">\n Entrez dans l'univers des Renvers\u00e9s\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/a>\n <a href=\"#troupe\" class=\"hero-btn-secondary\">D\u00e9couvrir les com\u00e9diens<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Fl\u00e8ches navigation -->\n <button class=\"hero-nav-btn prev\" id=\"heroPrev\" aria-label=\"Pr\u00e9c\u00e9dent\">←<\/button>\n <button class=\"hero-nav-btn next\" id=\"heroNext\" aria-label=\"Suivant\">→<\/button>\n\n <!-- Compteur -->\n <div class=\"hero-counter\" id=\"heroCounter\"><span>01<\/span> \/ 15<\/div>\n\n <!-- Scroll indicator -->\n <div class=\"hero-scroll\">\n <span class=\"hero-scroll-line\"><\/span>\n <span>Scroll<\/span>\n <\/div>\n\n<\/section>\n\n<!-- ============================================================\n PR\u00c9SENTATION\n============================================================ -->\n<section id=\"presentation\" class=\"section\">\n <div class=\"container\">\n <div class=\"pres-inner\">\n\n <!-- Vid\u00e9o YouTube \u2014 fa\u00e7ade (iframe charg\u00e9e au clic uniquement) -->\n <div class=\"pres-yt-wrap\">\n <div class=\"yt-wrapper\">\n <div class=\"yt-facade\" id=\"ytFacade\" data-ytid=\"zAuNW1FDbqI\" data-ytt=\"7\" role=\"button\" tabindex=\"0\"\n aria-label=\"Lire la vid\u00e9o : Les \u00e9quipes de Brut sont venues rendre visite aux Renvers\u00e9s\">\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/zAuNW1FDbqI\/maxresdefault.jpg\"\n onerror=\"this.src='https:\/\/img.youtube.com\/vi\/zAuNW1FDbqI\/hqdefault.jpg'\"\n alt=\"Aper\u00e7u vid\u00e9o \u2014 Les \u00e9quipes de Brut sont venues rendre visite aux Renvers\u00e9s\"\n loading=\"lazy\" \/>\n <button class=\"yt-facade-btn\" aria-hidden=\"true\" tabindex=\"-1\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <\/button>\n <div class=\"yt-facade-label\">Les \u00e9quipes de Brut sont venues rendre visite aux Renvers\u00e9s<\/div>\n <\/div>\n <div class=\"yt-legend\">\n <span class=\"yt-arrow\">→<\/span>\n <span class=\"yt-legend-text\" style=\"color:var(--blue);\">Les \u00e9quipes de Brut sont venues rendre visite aux Renvers\u00e9s<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"pres-text\">\n <span class=\"label\">Notre histoire<\/span>\n <h2 class=\"heading-lg\">Une compagnie qui renverse les codes<\/h2>\n <div class=\"divider\"><\/div>\n <p class=\"lead\">\u00ab Renverser les regards, lib\u00e9rer les corps, faire entendre les voix. \u00bb<\/p>\n <p>La compagnie <strong>Les Renvers\u00e9s<\/strong>, c'est la rencontre entre des personnes porteuses d'un handicap mental et\/ou en situation d'exclusion, des personnes sensibles \u00e0 notre d\u00e9marche et des artistes autour d'un projet th\u00e9\u00e2tral commun.<\/p>\n <p>Ce qui nous lie aux Renvers\u00e9s, c'est l'envie de jouer, de chercher, d\u00e9couvrir un rythme commun pour cr\u00e9er ensemble sur des sujets qui nous traversent.<\/p>\n <p>Fond\u00e9e en 2016, l'association intervient dans des \u00e9tablissements sp\u00e9cialis\u00e9s, des \u00e9coles, des collectivit\u00e9s publiques, et propose des cr\u00e9ations originales et collectives pr\u00e9sent\u00e9es au public.<\/p>\n <a href=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/LES_RENVERSES_JE_ME_SOUVIENS_DP_A5.pdf\" download class=\"btn-download\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n T\u00e9l\u00e9charger le dossier de presse\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================================\n CHIFFRES CL\u00c9S\n============================================================ -->\n<section id=\"chiffres\">\n <div class=\"container\">\n <div class=\"chiffres-grid\">\n <div class=\"chiffre-item\">\n <div class=\"chiffre-num\">+10<\/div>\n <div class=\"chiffre-label\">Ann\u00e9es <br>d'exp\u00e9rience<\/div>\n <\/div>\n <div class=\"chiffre-item\">\n <div class=\"chiffre-num\">+50<\/div>\n <div class=\"chiffre-label\">Com\u00e9diens<br>accompagn\u00e9s<\/div>\n <\/div>\n <div class=\"chiffre-item\">\n <div class=\"chiffre-num\">+800<\/div>\n <div class=\"chiffre-label\">Heures de<br>r\u00e9p\u00e9titions<\/div>\n <\/div>\n <div class=\"chiffre-item\">\n <div class=\"chiffre-num\">+1500<\/div>\n <div class=\"chiffre-label\">Spectateurs<br>touch\u00e9s<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================================\n VALEURS\n============================================================ -->\n<section id=\"valeurs\" class=\"section\">\n <div class=\"container\">\n <div class=\"valeurs-header\">\n <span class=\"label\">Ce qui nous guide<\/span>\n <h2 class=\"heading-lg\">Nos valeurs fondatrices<\/h2>\n <div class=\"divider\"><\/div>\n <p style=\"color:#6b5f57;\">Tout ce que nous faisons est guid\u00e9 par trois piliers essentiels, au service des personnes et de l'art.<\/p>\n <\/div>\n <div class=\"valeurs-grid\">\n <div class=\"valeur-card\">\n <!-- \ud83d\udcf7 IC\u00d4NE VALEUR 1 \u2014 remplacez src=\"votre-icone-1.jpg\" par votre image 52\u00d752px -->\n <div class=\"valeur-icon icon-blue\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/Bulle_03.png\" alt=\"Inclusion totale\" onerror=\"this.parentElement.innerHTML='\ud83c\udfad';this.parentElement.style.display='flex';this.parentElement.style.alignItems='center';this.parentElement.style.justifyContent='center';this.parentElement.style.fontSize='24px';\" loading=\"lazy\" \/>\n <\/div>\n <h3>Inclusion totale<\/h3>\n <p>Nous croyons que chaque personne, quelles que soient ses capacit\u00e9s, a quelque chose d'unique \u00e0 exprimer sur sc\u00e8ne. Nos ateliers accueillent tous les profils avec la m\u00eame exigence artistique.<\/p>\n <\/div>\n <div class=\"valeur-card\">\n <!-- \ud83d\udcf7 IC\u00d4NE VALEUR 2 \u2014 remplacez src=\"votre-icone-2.jpg\" par votre image 52\u00d752px -->\n <div class=\"valeur-icon icon-sage\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/Bulle_02.png\" alt=\"Bienveillance\" onerror=\"this.parentElement.innerHTML='\ud83c\udf3f';this.parentElement.style.display='flex';this.parentElement.style.alignItems='center';this.parentElement.style.justifyContent='center';this.parentElement.style.fontSize='24px';\" loading=\"lazy\" \/>\n <\/div>\n <h3>Bienveillance<\/h3>\n <p>Un cadre de confiance, de respect et d'\u00e9coute est indispensable \u00e0 la cr\u00e9ation. Nous veillons \u00e0 ce que chacun se sente valoris\u00e9, soutenu et libre d'explorer.<\/p>\n <\/div>\n <div class=\"valeur-card\">\n <!-- \ud83d\udcf7 IC\u00d4NE VALEUR 3 \u2014 remplacez src=\"votre-icone-3.jpg\" par votre image 52\u00d752px -->\n <div class=\"valeur-icon icon-gold\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/Bulle_01.png\" onerror=\"this.parentElement.innerHTML='\u2728';this.parentElement.style.display='flex';this.parentElement.style.alignItems='center';this.parentElement.style.justifyContent='center';this.parentElement.style.fontSize='24px';\" loading=\"lazy\" \/>\n <\/div>\n <h3>Exigence artistique<\/h3>\n <p>L'inclusivit\u00e9 n'est pas synonyme de compromis sur la qualit\u00e9. Nous portons des projets ambitieux et des cr\u00e9ations originales.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================================\n TROUPE \u2014 FLIP CARDS (vrais noms extraits du dossier de presse)\n============================================================ -->\n<section id=\"troupe\" class=\"section\">\n <div class=\"container\">\n <div class=\"troupe-header\">\n <span class=\"label\">Rencontrez-les<\/span>\n <h2 class=\"heading-lg\">La troupe des Renvers\u00e9s<\/h2>\n <div class=\"divider\"><\/div>\n <p style=\"color:#6b5f57;\">21 com\u00e9diens d'exception qui montent sur sc\u00e8ne chaque saison. <br> Survolez leur portrait pour les d\u00e9couvrir.<\/p>\n <\/div>\n <div class=\"comediens-grid\">\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3748.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Maylis<\/div><div class=\"flip-front-role\">Com\u00e9dienne<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Maylis<\/div><div class=\"flip-back-role\">Com\u00e9dienne<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Je m'appelle Ma\u00eflis,\nJ'aime faire de la moto\nJ'aime la batterie, la boxe, la danse\nJ'aime danser sur Mickael Jackson et sur d'autres musiques\nJ'aime me d\u00e9guiser en \" police\"\nJ'ai pas de choses que j'aime pas, rien qui m'\u00e9nerve.\nJ'aime la neige, j'aime pas trop quand il pleut.\nEt moi, je joue bien au th\u00e9\u0101tre.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-4037-scaled.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Mat\u00e9o<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Mat\u00e9o<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">J'aime bien \u00eatre sur l'ordinateur, je regarde mes mails, youtube et les informations.\nJ'aime le t\u00e9l\u00e9phone pour \u00eatre sur what's app et \u00e9couter mes messages.\nJ'aime lire, et tout comprendre. J'aime me promener dans Paris et \u00e0 la campagne.\nJ'aime le th\u00e9\u00e2tre, \u00eatre com\u00e9dien comme Muriel Robin.\nJ'aime pas trop la cuisine, mais j'aime bien manger\nJ'aime bien ma famille.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3897.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Valentin<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Valentin<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Ajoutez ici la biographie de Valentin.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC00723.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">C\u00e9lian<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">C\u00e9lian<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Ajoutez ici la biographie de C\u00e9lian.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC00786.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Enzo<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Enzo<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Bonjour tout le monde,\nJe m\u2019appelle Enzo\nJ\u2019adore \u00e9couter les musiques\nJ\u2019adore faire du v\u00e9lo\nC\u2019est sportif, \u00e7a fait muscler les jambes\nJ\u2019adore me promener\nJ\u2019adore faire des photos\nJ\u2019adore les souvenirs comme New York, c\u2019est mon pr\u00e9f\u00e9r\u00e9.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC00977.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Hugo<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Hugo<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Je m\u2019appelle Hugo\nJ\u2019aime la musique d\u2019amour\nJ\u2019aime les musiques du Maroc\nJ\u2019aime Nolwen Leroy\nJ\u2019aime le cheval\nLa musique des Enfoir\u00e9s\nJ\u2019ai regard\u00e9 les films du monde entier\nJ\u2019ai tout regard\u00e9\nMais pas les films italiens, juste les films Fran\u00e7ais.\nJ\u2019ai pas fait du kayak en parasol\nMais j\u2019ai gagn\u00e9 un parapluie \u00e0 une course en kayak.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3644.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Ketty<\/div><div class=\"flip-front-role\">Com\u00e9dienne<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Ketty<\/div><div class=\"flip-back-role\">Com\u00e9dienne<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Je m'appelle Ketty,\nJ'aime les voyages.\nMon r\u00eave, ce serait de faire le tour du monde, pour le moment, j'en ai fait que le\nquart.\nJ'aime aller \u00e0 la plage et me baigner.\nJ'aime \u00eatre entre amis.\nJ'aime beaucoup le th\u00e9\u00e2tre.\nJ'adore la vie.\nJe n'aime pas la m\u00e9chancet\u00e9, donc gardez- l\u00e0 pour vous.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3631.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Anthony<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Anthony<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">J'aime faire du th\u00e9\u00e2tre\nJ'aime chanter, filmer, faire des photos\nJ'aime courir (je cours vite)\nJ'aime les animaux\nJ'aime faire des activit\u00e9s\nJ'aime \u00eatre en famille et avec mes amis\nJe n'aime pas les endroits sombres\nJ'aime \"vivre\"....\nEt je vous aime<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3680.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">C\u00f4me<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">C\u00f4me<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Ajoutez ici la biographie de C\u00f4me.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3586.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Pierrot<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Pierrot<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Ajoutez ici la biographie de Pierrot.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3854.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Roman<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Roman<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Ajoutez ici la biographie de Roman.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3973.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Lorraine<\/div><div class=\"flip-front-role\">Com\u00e9dienne<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Lorraine<\/div><div class=\"flip-back-role\">Com\u00e9dienne<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Ajoutez ici la biographie de Lorraine.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3658.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Marie Liesse<\/div><div class=\"flip-front-role\">Com\u00e9dienne<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Marie Liesse<\/div><div class=\"flip-back-role\">Com\u00e9dienne<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Ajoutez ici la biographie de Marie Liesse.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3761.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Matthieu<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Matthieu<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Ajoutez ici la biographie de Matthieu.<\/p><\/div>\n <\/div>\n <\/div>\n\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3518.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Laurie<\/div><div class=\"flip-front-role\">Com\u00e9dienne & Dir. Artistique<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Laurie<\/div><div class=\"flip-back-role\">Directrice artistique<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Laurie Marzougui \u2014 fondatrice et directrice artistique des Renvers\u00e9s.<\/p><\/div>\n <\/div>\n <\/div>\n\n <!-- Com\u00e9diens 16 \u00e0 20 -->\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3708.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Doriel<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Doriel<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">J'aime sortir pour voir des potes,les jeux vid\u00e9os et faire des activit\u00e9s sportives.\nMon r\u00eave, ce serait d'avoir une voiture et une grande maison \u00e0 la campagne.\nJ'aime pas les gens qui se m\u00ealent des affaires des autres.\nJ'aime Les Renvers\u00e9s parce qu'on rigole bien.\nMoi Doriel, je suis comme je suis. Je suis ordinaire, m\u00eame si j'ai des probl\u00e8mes dans\nma t\u00eate. Et surtout je suis un mec cool.<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-4108.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Damia<\/div><div class=\"flip-front-role\">Com\u00e9dienne<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Damia<\/div><div class=\"flip-back-role\">Com\u00e9dienne<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Biographie \u00e0 renseigner.<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3716-Portraut.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Nicolas<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Nicolas<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Biographie \u00e0 renseigner.<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-3813.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Alicia<\/div><div class=\"flip-front-role\">Com\u00e9dienne<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Alicia<\/div><div class=\"flip-back-role\">Com\u00e9dienne<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Biographie \u00e0 renseigner.<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC00901.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Ahoua<\/div><div class=\"flip-front-role\">Com\u00e9dienne<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Ahoua<\/div><div class=\"flip-back-role\">Com\u00e9dienne<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Biographie \u00e0 renseigner.<\/p><\/div>\n <\/div>\n <\/div>\n\n<!-- Com\u00e9diens 21 \u00e0 25 -->\n <div class=\"comedien-flip\" onclick=\"this.classList.toggle('flipped')\">\n <div class=\"comedien-flip-inner\">\n <div class=\"flip-front\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SLibermann-LesRenverses-4139_.jpg\" alt=\"Com\u00e9dien des Renvers\u00e9s\" style=\"width:100%;height:100%;object-fit:cover;\" loading=\"lazy\" \/>\n <div class=\"flip-front-overlay\"><div class=\"flip-front-name\">Basile<\/div><div class=\"flip-front-role\">Com\u00e9dien<\/div><\/div>\n <div class=\"flip-hint\">\u21bb<\/div><\/div>\n <div class=\"flip-back\"><div class=\"flip-back-name\">Basile<\/div><div class=\"flip-back-role\">Com\u00e9dien<\/div><div class=\"flip-back-divider\"><\/div><p class=\"flip-back-bio\">Biographie \u00e0 renseigner.<\/p><\/div>\n <\/div>\n <\/div>\n \n \n \n \n\n <\/div><!-- \/comediens-grid -->\n\n <!-- Module \u2014 Renvers\u00e9(e) un jour : carrousel flip -->\n <div class=\"anciens-module\">\n <div class=\"anciens-text\">\n <div class=\"anciens-label\">Anciens membres<\/div>\n <h3 class=\"anciens-title\">Renvers\u00e9(e)<br> un jour,<br>Renvers\u00e9(e)<br> toujours<\/h3>\n <p class=\"anciens-sub\">Ils & Elles sont pass\u00e9s<br>par les Renvers\u00e9s<\/p>\n <\/div>\n\n <!-- Carrousel flip anciens -->\n <div class=\"anciens-carousel-wrap\">\n <div class=\"anciens-carousel-track\" id=\"anciensTrack\">\n\n <!-- Carte 1 -->\n <div class=\"anciens-flip\" >\n <div class=\"anciens-flip-inner\">\n <div class=\"anciens-front\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/AR_01.jpg\" alt=\"Ancien membre\" loading=\"lazy\" \/>\n <div class=\"anciens-front-overlay\">\n <div class=\"anciens-front-name\">Ma\u00eblys<\/div>\n <div class=\"anciens-front-role\">Ancienne com\u00e9dienne<\/div>\n <\/div>\n <div class=\"anciens-hint\">\u21bb<\/div>\n <\/div>\n <div class=\"anciens-back\">\n <div class=\"anciens-back-name\">Ma\u00eblys<\/div>\n <div class=\"anciens-back-role\">Ancienne com\u00e9dienne<\/div>\n <p class=\"anciens-back-bio\">Renvers\u00e9e un jour, renvers\u00e9e toujours. Ma\u00eblys a apport\u00e9 sa joie et son \u00e9nergie \u00e0 la troupe pendant trois saisons inoubliables.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Carte 2 -->\n <div class=\"anciens-flip\" >\n <div class=\"anciens-flip-inner\">\n <div class=\"anciens-front\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/AR_02.jpg\" alt=\"Ancien membre\" loading=\"lazy\" \/>\n <div class=\"anciens-front-overlay\">\n <div class=\"anciens-front-name\">Th\u00e9o<\/div>\n <div class=\"anciens-front-role\">Ancien com\u00e9dien<\/div>\n <\/div>\n <div class=\"anciens-hint\">\u21bb<\/div>\n <\/div>\n <div class=\"anciens-back\">\n <div class=\"anciens-back-name\">Th\u00e9o<\/div>\n <div class=\"anciens-back-role\">Ancien com\u00e9dien<\/div>\n <p class=\"anciens-back-bio\">Th\u00e9o a marqu\u00e9 la troupe par sa pr\u00e9sence sc\u00e9nique et son sens du collectif. Toujours dans nos c\u0153urs.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Carte 3 -->\n <div class=\"anciens-flip\" >\n <div class=\"anciens-flip-inner\">\n <div class=\"anciens-front\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/AR_03.jpg\" alt=\"Ancien membre\" loading=\"lazy\" \/>\n <div class=\"anciens-front-overlay\">\n <div class=\"anciens-front-name\">Clara<\/div>\n <div class=\"anciens-front-role\">Ancienne com\u00e9dienne<\/div>\n <\/div>\n <div class=\"anciens-hint\">\u21bb<\/div>\n <\/div>\n <div class=\"anciens-back\">\n <div class=\"anciens-back-name\">Clara<\/div>\n <div class=\"anciens-back-role\">Ancienne com\u00e9dienne<\/div>\n <p class=\"anciens-back-bio\">Clara a illumin\u00e9 chaque r\u00e9p\u00e9tition de sa cr\u00e9ativit\u00e9 d\u00e9bordante. Son passage a laiss\u00e9 une empreinte ind\u00e9l\u00e9bile.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Carte 4 -->\n <div class=\"anciens-flip\" >\n <div class=\"anciens-flip-inner\">\n <div class=\"anciens-front\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/AR_04.jpg\" alt=\"Ancien membre\" loading=\"lazy\" \/>\n <div class=\"anciens-front-overlay\">\n <div class=\"anciens-front-name\">Samuel<\/div>\n <div class=\"anciens-front-role\">Ancien com\u00e9dien<\/div>\n <\/div>\n <div class=\"anciens-hint\">\u21bb<\/div>\n <\/div>\n <div class=\"anciens-back\">\n <div class=\"anciens-back-name\">Samuel<\/div>\n <div class=\"anciens-back-role\">Ancien com\u00e9dien<\/div>\n <p class=\"anciens-back-bio\">Samuel, com\u00e9dien passionn\u00e9, a partag\u00e9 deux saisons avec la troupe. Son humour et sa g\u00e9n\u00e9rosit\u00e9 manquent \u00e0 tous.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Carte 5 -->\n <div class=\"anciens-flip\" >\n <div class=\"anciens-flip-inner\">\n <div class=\"anciens-front\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/AR_05.jpg\" alt=\"Ancien membre\" loading=\"lazy\" \/>\n <div class=\"anciens-front-overlay\">\n <div class=\"anciens-front-name\">In\u00e8s<\/div>\n <div class=\"anciens-front-role\">Ancienne com\u00e9dienne<\/div>\n <\/div>\n <div class=\"anciens-hint\">\u21bb<\/div>\n <\/div>\n <div class=\"anciens-back\">\n <div class=\"anciens-back-name\">In\u00e8s<\/div>\n <div class=\"anciens-back-role\">Ancienne com\u00e9dienne<\/div>\n <p class=\"anciens-back-bio\">In\u00e8s a d\u00e9couvert le th\u00e9\u00e2tre avec les Renvers\u00e9s et y a trouv\u00e9 une vraie famille. Sa voix r\u00e9sonne encore sur sc\u00e8ne.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Carte 6 -->\n <div class=\"anciens-flip\" >\n <div class=\"anciens-flip-inner\">\n <div class=\"anciens-front\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/AR_06.jpg\" alt=\"Ancien membre\" loading=\"lazy\" \/>\n <div class=\"anciens-front-overlay\">\n <div class=\"anciens-front-name\">Julien<\/div>\n <div class=\"anciens-front-role\">Ancien com\u00e9dien<\/div>\n <\/div>\n <div class=\"anciens-hint\">\u21bb<\/div>\n <\/div>\n <div class=\"anciens-back\">\n <div class=\"anciens-back-name\">Julien<\/div>\n <div class=\"anciens-back-role\">Ancien com\u00e9dien<\/div>\n <p class=\"anciens-back-bio\">Julien aimait improviser, surprendre, faire rire. La sc\u00e8ne \u00e9tait pour lui un terrain de jeu infini.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Carte 7 -->\n <div class=\"anciens-flip\" >\n <div class=\"anciens-flip-inner\">\n <div class=\"anciens-front\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/AR_07.jpg\" alt=\"Ancien membre\" loading=\"lazy\" \/>\n <div class=\"anciens-front-overlay\">\n <div class=\"anciens-front-name\">Ambre<\/div>\n <div class=\"anciens-front-role\">Ancienne com\u00e9dienne<\/div>\n <\/div>\n <div class=\"anciens-hint\">\u21bb<\/div>\n <\/div>\n <div class=\"anciens-back\">\n <div class=\"anciens-back-name\">Ambre<\/div>\n <div class=\"anciens-back-role\">Ancienne com\u00e9dienne<\/div>\n <p class=\"anciens-back-bio\">Ambre a apport\u00e9 sa sensibilit\u00e9 po\u00e9tique et sa tendresse \u00e0 chaque cr\u00e9ation. Elle reste dans l'\u00e2me des Renvers\u00e9s.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Carte 8 -->\n <div class=\"anciens-flip\" >\n <div class=\"anciens-flip-inner\">\n <div class=\"anciens-front\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/AR_08.jpg\" alt=\"Ancien membre\" loading=\"lazy\" \/>\n <div class=\"anciens-front-overlay\">\n <div class=\"anciens-front-name\">Lucas<\/div>\n <div class=\"anciens-front-role\">Ancien com\u00e9dien<\/div>\n <\/div>\n <div class=\"anciens-hint\">\u21bb<\/div>\n <\/div>\n <div class=\"anciens-back\">\n <div class=\"anciens-back-name\">Lucas<\/div>\n <div class=\"anciens-back-role\">Ancien com\u00e9dien<\/div>\n <p class=\"anciens-back-bio\">Lucas a grandi avec les Renvers\u00e9s. Son courage sur sc\u00e8ne a inspir\u00e9 toute la troupe.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n\n \n\n <\/div><!-- \/anciens-carousel-track -->\n <!-- Fondu gauche\/droite -->\n <div class=\"anciens-fade anciens-fade--left\"><\/div>\n <div class=\"anciens-fade anciens-fade--right\"><\/div>\n <\/div><!-- \/anciens-carousel-wrap -->\n\n <!-- Dots de navigation (mobile uniquement, affich\u00e9 via CSS) -->\n <div class=\"anciens-dots\" id=\"anciensDots\" aria-hidden=\"true\"><\/div>\n\n <\/div><!-- \/anciens-module -->\n\n <\/div>\n<\/section>\n\n<!-- ============================================================\n SPECTACLES \u2014 avec mini carrousels\n============================================================ -->\n<section id=\"spectacles\" class=\"section\">\n <div class=\"container\">\n <div class=\"spectacles-header\">\n <span class=\"label\">Sur sc\u00e8ne<\/span>\n <h2 class=\"heading-lg1\">Nos cr\u00e9ations<\/h2>\n <div class=\"divider\"><\/div>\n <p style=\"color:rgba(250,247,242,0.5);\">Des spectacles vivants, g\u00e9n\u00e9reux et profond\u00e9ment humains, n\u00e9s de l'imaginaire collectif de la troupe.<\/p>\n <\/div>\n <div class=\"spectacles-grid\">\n\n <!-- Spectacle 1 -->\n <div class=\"spectacle-card\">\n <div class=\"spec-carousel\" id=\"spec1\">\n <div class=\"spec-slides\">\n <div class=\"spec-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/URR_titre.jpg\" alt=\"Les Renvers\u00e9s \u2014 spectacle\" loading=\"lazy\" \/><\/div>\n <div class=\"spec-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4636-copie.jpg\" alt=\"Les Renvers\u00e9s \u2014 spectacle\" loading=\"lazy\" \/><\/div>\n <div class=\"spec-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4643-copie.jpg\" alt=\"Les Renvers\u00e9s \u2014 spectacle\" loading=\"lazy\" \/><\/div>\n <!-- Ajoutez jusqu'\u00e0 15 slides : <div class=\"spec-slide\"><img decoding=\"async\" src=\"photo.jpg\" alt=\"...\" loading=\"lazy\" \/><\/div> -->\n <\/div>\n <span class=\"spec-count\" id=\"spec1Count\">1 \/ 3<\/span>\n <div class=\"spec-nav\">\n <button onclick=\"specPrev('spec1')\" aria-label=\"Pr\u00e9c\u00e9dent\">←<\/button>\n <button onclick=\"specNext('spec1')\" aria-label=\"Suivant\">→<\/button>\n <\/div>\n <\/div>\n <div class=\"spectacle-body\">\n <div class=\"spectacle-date\">actuellement<\/div>\n <div class=\"spectacle-title\">Un royaume renversant<\/div>\n <div class=\"spectacle-desc\">Cr\u00e9ation en cours de travail et de r\u00e9p\u00e9titions.<\/div>\n <a href=\"#spectacles\" class=\"spectacle-link\">d\u00e9couvrir + <svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n\n <!-- Spectacle 2 -->\n <div class=\"spectacle-card\">\n <div class=\"spec-carousel\" id=\"spec2\">\n <div class=\"spec-slides\">\n <div class=\"spec-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/JMS_titre.jpg\" alt=\"Les Renvers\u00e9s \u2014 spectacle\" loading=\"lazy\" \/><\/div>\n <div class=\"spec-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4528.jpg\" alt=\"Les Renvers\u00e9s \u2014 spectacle\" loading=\"lazy\" \/><\/div>\n <div class=\"spec-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4518.jpg\" alt=\"Les Renvers\u00e9s \u2014 spectacle\" loading=\"lazy\" \/><\/div>\n <\/div>\n <span class=\"spec-count\" id=\"spec2Count\">1 \/ 3<\/span>\n <div class=\"spec-nav\">\n <button onclick=\"specPrev('spec2')\" aria-label=\"Pr\u00e9c\u00e9dent\">←<\/button>\n <button onclick=\"specNext('spec2')\" aria-label=\"Suivant\">→<\/button>\n <\/div>\n <\/div>\n <div class=\"spectacle-body\">\n <div class=\"spectacle-date\">Saison 2023 \u2013 2025<\/div>\n <div class=\"spectacle-title\">Je me souviens pour ne pas oublier qui nous sommes<\/div>\n <div class=\"spectacle-desc\">Une com\u00e9die absurde sur le souvenir. Chaque souvenir cache le secret invisible d'\u00eatre vu et entendu au-del\u00e0 des mots.<\/div>\n <a href=\"#spectacles\" class=\"spectacle-link\">d\u00e9couvrir + <svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n\n <!-- Spectacle 3 -->\n <div class=\"spectacle-card\">\n <div class=\"spec-carousel\" id=\"spec3\">\n <div class=\"spec-slides\">\n <div class=\"spec-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/83363445_2261621787468321_8015826141744988160_n.jpg\" alt=\"Les Renvers\u00e9s \u2014 spectacle\" loading=\"lazy\" \/><\/div>\n <div class=\"spec-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC00328.jpg\" alt=\"Les Renvers\u00e9s \u2014 spectacle\" loading=\"lazy\" \/><\/div>\n <div class=\"spec-slide\"><img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC00653.jpg\" alt=\"Les Renvers\u00e9s \u2014 spectacle\" loading=\"lazy\" \/><\/div>\n <\/div>\n <span class=\"spec-count\" id=\"spec3Count\">1 \/ 3<\/span>\n <div class=\"spec-nav\">\n <button onclick=\"specPrev('spec3')\" aria-label=\"Pr\u00e9c\u00e9dent\">←<\/button>\n <button onclick=\"specNext('spec3')\" aria-label=\"Suivant\">→<\/button>\n <\/div>\n <\/div>\n <div class=\"spectacle-body\">\n <div class=\"spectacle-date\">Saison 2018 \u2013 2020<\/div>\n <div class=\"spectacle-title\">Tout est po\u00e9sie(s)<\/div>\n <div class=\"spectacle-desc\">Description de la cr\u00e9ation, son propos, son univers visuel et les th\u00e8mes qu'elle explore avec la troupe.<\/div>\n <a href=\"#spectacles\" class=\"spectacle-link\">d\u00e9couvrir + <svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n\n <\/div><!-- \/spectacles-grid -->\n\n <!-- \u2500\u2500 LA PRESSE EN PARLE \u2014 int\u00e9gr\u00e9e dans la section spectacles \u2500\u2500\n \u25b8 Pour ajouter un m\u00e9dia : dupliquer un bloc .presse-card\n \u25b8 data-type=\"photo\" \u2192 image en lightbox\n \u25b8 data-type=\"video\" \u2192 vid\u00e9o YouTube en lightbox (ID dans data-yt)\n \u25b8 data-type=\"link\" \u2192 ouvre un lien dans un nouvel onglet\n \u2500\u2500 -->\n <div class=\"presse-block\">\n <div class=\"presse-header\">\n <span class=\"label\">Ils en parlent<\/span>\n <h2 class=\"heading-lg1\">La presse en parle<\/h2>\n <div class=\"divider\"><\/div>\n <p style=\"color:rgba(250,247,242,0.5);\">Regards crois\u00e9s sur nos cr\u00e9ations \u2014 photos, reportages et vid\u00e9os.<\/p>\n <\/div>\n\n <div class=\"presse-carousel-wrap\">\n <div class=\"presse-track\" id=\"presseTrack\">\n\n<!-- =====================================================================\n LA PRESSE EN PARLE \u2014 GUIDE D'\u00c9DITION DES CARTES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Il existe 3 types de cartes :\n\n \u2460 VID\u00c9O YOUTUBE\n data-type=\"video\"\n data-yt=\"IDENTIFIANT_YOUTUBE\" \u2190 remplacez uniquement cet ID\n Exemple : pour https:\/\/www.youtube.com\/watch?v=zAuNW1FDbqI\n l'ID est : zAuNW1FDbqI\n\n \u2461 PHOTO (s'ouvre en grand au clic)\n data-type=\"photo\"\n data-src=\"URL_DE_LA_PHOTO\" \u2190 URL compl\u00e8te de la photo HD\n\n \u2462 ARTICLE \/ LIEN EXTERNE (ouvre un nouvel onglet)\n data-type=\"link\"\n data-href=\"URL_DE_L_ARTICLE\" \u2190 URL compl\u00e8te de la page\n\n Dans tous les cas, modifiez aussi :\n data-caption=\"...\" \u2190 texte affich\u00e9 sous le m\u00e9dia\n .presse-source \u2190 nom du m\u00e9dia \/ source\n .presse-caption \u2190 accroche \/ extrait de citation\n L'attribut src de <img loading=\"lazy\"> \u2190 vignette affich\u00e9e dans la carte\n\n Pour ajouter une carte : dupliquez un bloc complet ci-dessous.\n Pour supprimer une carte : supprimez le bloc complet.\n====================================================================== -->\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTE 1 \u2014 VID\u00c9O YOUTUBE\n \u2460 Remplacez l'ID YouTube ci-dessous (data-yt)\n \u2461 Remplacez la vignette src de l'img\n \u2462 Remplacez source et caption\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"presse-card\"\n data-type=\"video\"\n data-yt=\"zAuNW1FDbqI\"\n data-caption=\"BRUT\">\n <div class=\"presse-thumb\">\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/zAuNW1FDbqI\/maxresdefault.jpg\"\n onerror=\"this.src='https:\/\/img.youtube.com\/vi\/zAuNW1FDbqI\/hqdefault.jpg'\"\n alt=\"Vid\u00e9o \u2014 Les Renvers\u00e9s\" loading=\"lazy\" \/>\n <div class=\"presse-type-badge type-video\">\n <svg width=\"11\" height=\"11\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z\"\/><\/svg>\n Vid\u00e9o\n <\/div>\n <div class=\"presse-play-overlay\"><div class=\"presse-play-icon\"><svg width=\"20\" height=\"20\" fill=\"#fff\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\n <\/div>\n <div class=\"presse-body\">\n <div class=\"presse-source\">Brut<\/div>\n <div class=\"presse-caption\">En r\u00e9p\u00e9tition avec la troupe de th\u00e9\u00e2tre \"Les renvers\u00e9s\"<\/div>\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTE 2 \u2014 PHOTO\n \u2460 Remplacez data-src par l'URL de votre photo HD\n \u2461 Remplacez src de l'img par l'URL de la vignette\n \u2462 Remplacez source et caption\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"presse-card\"\n data-type=\"photo\"\n data-src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/LR_PLEINE_VIE_2026_DP.jpg\"\n data-caption=\"\u00ab On est tous tr\u00e8s diff\u00e9rents, et pourtant, on se ressemble\">\n <div class=\"presse-thumb\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/LR_PLEINE_VIE_2026_DP.jpg\"\n alt=\"Les Renvers\u00e9s\" loading=\"lazy\" \/>\n <div class=\"presse-type-badge type-photo\">\n <svg width=\"11\" height=\"11\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n Photo\n <\/div>\n <div class=\"presse-play-overlay\"><div class=\"presse-play-icon\"><svg width=\"20\" height=\"20\" fill=\"#fff\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\n <\/div>\n <div class=\"presse-body\">\n <div class=\"presse-source\">Pleine vie<\/div><!-- \u2190 Nom du m\u00e9dia -->\n <div class=\"presse-caption\">\u00ab On est tous tr\u00e8s diff\u00e9rents, et pourtant, on se ressemble \u00bb<\/div><!-- \u2190 Accroche -->\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTE 3 \u2014 ARTICLE \/ LIEN EXTERNE\n \u2460 Remplacez data-href par l'URL de l'article\n \u2461 Remplacez src de l'img par la vignette de l'article\n \u2462 Remplacez source et caption\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"presse-card\"\n data-type=\"link\"\n data-href=\"https:\/\/www.facebook.com\/watch\/?v=600801476371274\"\n data-caption=\"Article complet sur lesrenverses.com\">\n <div class=\"presse-thumb\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/P1220798.jpg\"\n alt=\"Les Renvers\u00e9s\" loading=\"lazy\" \/>\n <div class=\"presse-type-badge type-link\">\n <svg width=\"11\" height=\"11\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><polyline points=\"15 3 21 3 21 9\"\/><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/><\/svg>\n Vid\u00e9o\n <\/div>\n <div class=\"presse-play-overlay\"><div class=\"presse-play-icon\"><svg width=\"20\" height=\"20\" fill=\"#fff\" viewBox=\"0 0 24 24\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><polyline points=\"15 3 21 3 21 9\"\/><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/><\/svg><\/div><\/div>\n <\/div>\n <div class=\"presse-body\">\n <div class=\"presse-source\">L'est Republicain<\/div><!-- \u2190 Nom du m\u00e9dia -->\n <div class=\"presse-caption\">\u00ab On vient avec qui on est, les diff\u00e9rences s\u2019oublient. \u00bb<\/div><!-- \u2190 Accroche -->\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTE 4 \u2014 PHOTO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"presse-card\"\n data-type=\"photo\"\n data-src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4434.jpg\"\n data-caption=\"R\u00e9p\u00e9titions \u2014 saison 2024\">\n <div class=\"presse-thumb\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4434.jpg\"\n alt=\"Les Renvers\u00e9s\" loading=\"lazy\" \/>\n <div class=\"presse-type-badge type-photo\">\n <svg width=\"11\" height=\"11\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n Photo\n <\/div>\n <div class=\"presse-play-overlay\"><div class=\"presse-play-icon\"><svg width=\"20\" height=\"20\" fill=\"#fff\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\n <\/div>\n <div class=\"presse-body\">\n <div class=\"presse-source\">Photo de r\u00e9p\u00e9tition<\/div>\n <div class=\"presse-caption\">\u00ab Ces com\u00e9diens r\u00e9inventent la sc\u00e8ne \u00e0 leur fa\u00e7on. \u00bb<\/div>\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTE 5 \u2014 VID\u00c9O YOUTUBE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"presse-card\"\n data-type=\"video\"\n data-yt=\"MMC9h6Ld3E8\"\n data-caption=\"Teaser \u2014 Je me souviens pour ne pas oublier\">\n <div class=\"presse-thumb\">\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/MMC9h6Ld3E8\/maxresdefault.jpg\"\n onerror=\"this.src='https:\/\/img.youtube.com\/vi\/MMC9h6Ld3E8\/hqdefault.jpg'\"\n alt=\"Vid\u00e9o \u2014 Les Renvers\u00e9s\" loading=\"lazy\" \/>\n <div class=\"presse-type-badge type-video\">\n <svg width=\"11\" height=\"11\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z\"\/><\/svg>\n Vid\u00e9o\n <\/div>\n <div class=\"presse-play-overlay\"><div class=\"presse-play-icon\"><svg width=\"20\" height=\"20\" fill=\"#fff\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\n <\/div>\n <div class=\"presse-body\">\n <div class=\"presse-source\">Teaser spectacle<\/div>\n <div class=\"presse-caption\">Je me souviens pour ne pas oublier qui nous sommes<\/div>\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARTE 6 \u2014 PHOTO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"presse-card\"\n data-type=\"photo\"\n data-src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4645-copie.jpg\"\n data-caption=\"Les Renvers\u00e9s \u2014 soir\u00e9e de repr\u00e9sentation\">\n <div class=\"presse-thumb\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC4645-copie.jpg\"\n alt=\"Les Renvers\u00e9s\" loading=\"lazy\" \/>\n <div class=\"presse-type-badge type-photo\">\n <svg width=\"11\" height=\"11\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n Photo\n <\/div>\n <div class=\"presse-play-overlay\"><div class=\"presse-play-icon\"><svg width=\"20\" height=\"20\" fill=\"#fff\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\n <\/div>\n <div class=\"presse-body\">\n <div class=\"presse-source\">Soir\u00e9e de repr\u00e9sentation<\/div>\n <div class=\"presse-caption\">\u00ab Une troupe qui renverse tous les codes du th\u00e9\u00e2tre. \u00bb<\/div>\n <\/div>\n <\/div>\n\n <\/div><!-- \/presse-track -->\n <\/div><!-- \/presse-carousel-wrap -->\n\n <!-- Navigation -->\n <div class=\"presse-nav\">\n <button class=\"presse-nav-btn\" id=\"pressePrev\" aria-label=\"Pr\u00e9c\u00e9dent\">←<\/button>\n <button class=\"presse-nav-btn\" id=\"presseNext\" aria-label=\"Suivant\">→<\/button>\n <\/div>\n <\/div><!-- \/presse-block -->\n\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500 LIGHTBOX \u2500\u2500 -->\n<div id=\"presse-lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"M\u00e9dia en grand \u00e9cran\">\n <button class=\"lightbox-close\" id=\"lbClose\" aria-label=\"Fermer\">✕<\/button>\n <button class=\"lightbox-prev\" id=\"lbPrev\" aria-label=\"Pr\u00e9c\u00e9dent\">←<\/button>\n <button class=\"lightbox-next\" id=\"lbNext\" aria-label=\"Suivant\">→<\/button>\n <div class=\"lightbox-content\">\n <img decoding=\"async\" class=\"lightbox-img lb-hidden\" id=\"lbImg\" src=\"\" alt=\"\" \/>\n <iframe class=\"lightbox-yt lb-hidden\" id=\"lbYt\"\n allow=\"autoplay; fullscreen\"\n src=\"\" frameborder=\"0\"><\/iframe>\n <div class=\"lightbox-caption\" id=\"lbCaption\"><\/div>\n <\/div>\n<\/div>\n\n<!-- ============================================================\n T\u00c9MOIGNAGES\n============================================================ -->\n<section id=\"temoignages\" class=\"section\">\n <div class=\"container\">\n <div class=\"temoignages-header\">\n <span class=\"label\">Ils t\u00e9moignent<\/span>\n <h2 class=\"heading-lg\">Des paroles qui renversent<\/h2>\n <div class=\"divider\"><\/div>\n <\/div>\n <div class=\"temoignages-grid\">\n <div class=\"temoignage-card\">\n <p class=\"temoignage-text\">Le th\u00e9\u00e2tre m'a appris \u00e0 m'exprimer autrement, \u00e0 prendre ma place. Sur sc\u00e8ne, je suis entier.<\/p>\n <div class=\"temoignage-author\">\n <div class=\"author-avatar\" style=\"background:var(--blue);\">M<\/div>\n <div><div class=\"author-name\">Com\u00e9dien des Renvers\u00e9s<\/div><div class=\"author-role\">Troupe Les Renvers\u00e9s<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"temoignage-card\">\n <p class=\"temoignage-text\">Ce spectacle m'a profond\u00e9ment touch\u00e9. On sort de l\u00e0 avec un regard diff\u00e9rent sur l'autre, sur le handicap, sur la vie.<\/p>\n <div class=\"temoignage-author\">\n <div class=\"author-avatar\" style=\"background:var(--sage);\">S<\/div>\n <div><div class=\"author-name\">Spectatrice<\/div><div class=\"author-role\">Paris<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"temoignage-card\">\n <p class=\"temoignage-text\">Travailler avec les Renvers\u00e9s, c'est comprendre ce que le th\u00e9\u00e2tre peut vraiment changer dans une vie.<\/p>\n <div class=\"temoignage-author\">\n <div class=\"author-avatar\" style=\"background:#b8872a;\">L<\/div>\n <div><div class=\"author-name\">\u00c9ducatrice partenaire<\/div><div class=\"author-role\">Institution sp\u00e9cialis\u00e9e<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================================\n PARRAINS D'HONNEUR (donn\u00e9es r\u00e9elles du dossier de presse)\n============================================================ -->\n<section id=\"parrains\">\n <div class=\"container\">\n <div class=\"parrains-header\">\n <span class=\"label\">Ils nous soutiennent<\/span>\n <h2 class=\"heading-lg\">Nos parrains d'honneur<\/h2>\n <div class=\"divider\"><\/div>\n <p>Des personnalit\u00e9s engag\u00e9es qui croient en notre d\u00e9marche et portent notre voix.<\/p>\n <\/div>\n <div class=\"parrains-grid\">\n\n <div class=\"parrain-card\">\n <div class=\"parrain-photo\">\n <!-- Remplacez par : <img decoding=\"async\" src=\"romane-bohringer.jpg\" alt=\"Romane Bohringer\" loading=\"lazy\" \/> -->\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/PARRAINS_RB_2.png\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"parrain-name\">Romane Bohringer<\/div>\n <div class=\"parrain-title\">Actrice \u00b7 Sc\u00e9nariste \u00b7 R\u00e9alisatrice<\/div>\n <blockquote class=\"parrain-quote\">\n \u00ab J'ai toujours cru que le th\u00e9\u00e2tre \u00e9tait un lieu d'esp\u00e9rance. Une oasis d'o\u00f9 pouvait encore jaillir le meilleur de l'humanit\u00e9. Sur sc\u00e8ne, leur parole est d'or et leur singularit\u00e9 un tr\u00e9sor. \u00bb\n <\/blockquote>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/romanebohringerofficiel\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram de Romane Bohringer\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"parrain-card\">\n <div class=\"parrain-photo\">\n <!-- Remplacez par : <img decoding=\"async\" src=\"bruno-gaccio.jpg\" alt=\"Bruno Gaccio\" loading=\"lazy\" \/> -->\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/PARRAINS_BG_2.png\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"parrain-name\">Bruno Gaccio<\/div>\n <div class=\"parrain-title\">Auteur \u00b7 Sc\u00e9nariste<\/div>\n <blockquote class=\"parrain-quote\">\n \u00ab Chaque fois que je les croise ces Renvers\u00e9s d'amour c'est un voyage dans un monde extra-ordinaire. <br> Bravo \u00e0 Laurie qui orchestre cette troupe incroyable. \u00bb<\/blockquote>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/brunogaccio\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram de Bruno Gaccio\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"parrain-card\">\n <div class=\"parrain-photo\">\n <!-- Remplacez par : <img decoding=\"async\" src=\"veronique-poulain.jpg\" alt=\"V\u00e9ronique Poulain\" loading=\"lazy\" \/> -->\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/PARRAINS_VP_2.png\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"parrain-name\">V\u00e9ronique Poulain<\/div>\n <div class=\"parrain-title\">\u00c9crivaine<\/div>\n <blockquote class=\"parrain-quote\">\n \u00ab Un shoot de po\u00e9sie. Un endroit dans le monde o\u00f9 2+2 peut \u00eatre \u00e9gal \u00e0 5. Ils m'ont transport\u00e9e, transperc\u00e9e, boulevers\u00e9e et... renvers\u00e9e. \u00bb\n <\/blockquote>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/veropoulain\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram de V\u00e9ronique Poulain\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <\/div><!-- \/parrains-grid -->\n\n <!-- \u2500\u2500 SOUS-SECTION : LES PROFESSIONNELS QUI NOUS SOUTIENNENT \u2500\u2500 -->\n <div class=\"professionnels-wrap\">\n <div class=\"professionnels-header\">\n <span class=\"label\" style=\"color:rgba(250,247,242,0.4);\">R\u00e9seau<\/span>\n <h3>Les professionnels qui nous soutiennent<\/h3>\n <div class=\"divider\"><\/div>\n <p>Des artistes engag\u00e9s \u00e0 nos c\u00f4t\u00e9s.<\/p>\n <\/div>\n <div class=\"professionnels-grid\">\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 1 \u2014 remplacez src, nom et fonction -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/CHRISTINE_ANGLIO_.jpg\" alt=\"Professionnel 1\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Christine<br>Anglio<\/div>\n <div class=\"professionnel-fonction\">Com\u00e9dienne . Autrice . metteure sc\u00e8ne<\/div>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/christineanglio\/?hl=fr\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram de Christine Anglio\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 2 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/NICOLAS_GIRAUDI.jpg\" alt=\"Professionnel 2\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Nicolas<br>Giraudi<\/div>\n <div class=\"professionnel-fonction\">Com\u00e9dien<\/div>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/nicolas.giraudi\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram de Nicolas Giraudi\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 3 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/ANNE-LAURE_GRUET.jpg\" alt=\"Professionnel 3\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Anne-Laure<br>Gruet<\/div>\n <div class=\"professionnel-fonction\">Actrice<\/div>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/annelauregruet\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram de Anne-Laure Gruet\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 4 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/OLIVE_.jpg\" alt=\"Professionnel 4\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Olive<br>Santaoloria<\/div>\n <div class=\"professionnel-fonction\">Photographe . Musicien <\/div>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/olive_santaoloria\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram de Olive Santaoloria\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 5 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/GUILLAUME_MELANIE.jpg\" alt=\"Professionnel 5\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Guillaume<br>M\u00e9lanie<\/div>\n <div class=\"professionnel-fonction\">Com\u00e9dien . Auteur . Metteur en sc\u00e8ne<\/div>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/guillaumelanie\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram de Sophie Libermann\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 6 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/b01.png\" alt=\"Professionnel 6\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Gaspard<br>Durosel<\/div>\n <div class=\"professionnel-fonction\">Cr\u00e9ation lumi\u00e8re . Chef op\u00e9rateur<\/div>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/gaspard_duroselle\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram de Elvire Cassan\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 7 \u2014 remplacez src, nom et fonction -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SOPHIE_LIB.jpg\" alt=\"Professionnel 7\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Sophie<br>Libermann<\/div>\n <div class=\"professionnel-fonction\">Photographe<\/div>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/sophielibermann\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 8 \u2014 remplacez src, nom et fonction -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/ELVIRE.jpg\" alt=\"Professionnel 8\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Elvire<br>Cassan<\/div>\n <div class=\"professionnel-fonction\">Journaliste<\/div>\n <!-- Instagram \u2014 remplacez href par le lien du profil -->\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/elvireju\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\n <circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 9 \u2014 remplacez src, nom et fonction -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/b02.png\" alt=\"Professionnel 9\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Odile<br>Huleux<\/div>\n <div class=\"professionnel-fonction\">Photographe<\/div>\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 10 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/ABEILLE.jpg\" alt=\"Professionnel 10\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Abeille<br>Brissaud<\/div>\n <div class=\"professionnel-fonction\">Directrice Artistique mapping<\/div>\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/abeille_brissaud\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 11 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/ALEX_VITRAC.jpg\" alt=\"Professionnel 11\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Alex<br>Vitrac<\/div>\n <div class=\"professionnel-fonction\">Ing\u00e9nieur arrangeur du son au studio CBE<\/div>\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/alex_nem_vitrac\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 12 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/SANTANA.jpg\" alt=\"Professionnel 12\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Santana<br>Susnja<\/div>\n <div class=\"professionnel-fonction\">Com\u00e9dienne . chor\u00e9graphe <\/div>\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/noesisdanse\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 13 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/b03.png\" alt=\"Professionnel 13\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Florent<br>Marois<\/div>\n <div class=\"professionnel-fonction\">Menuisier D\u00e9corateur<\/div>\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/marois.florent\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 14 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/b04.png\" alt=\"Professionnel 14\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Francois<br>Frigg\u00e8re<\/div>\n <div class=\"professionnel-fonction\">Menuisier D\u00e9corateur<\/div>\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 15 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/b05.png\" alt=\"Professionnel 15\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">Fanny<br>Abitbol <\/div>\n <div class=\"professionnel-fonction\">Peintre d\u00e9coratrice<\/div>\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- \ud83d\udcf7 PROFESSIONNEL 16 -->\n <div class=\"professionnel-card\">\n <div class=\"professionnel-photo\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DAVID_BOIN_.jpg\" alt=\"Professionnel 16\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"professionnel-name\">David<br>Boin Carly <\/div>\n <div class=\"professionnel-fonction\">musicien . chanteur<\/div>\n <div class=\"card-instagram\">\n <a href=\"https:\/\/www.instagram.com\/davidboincarly\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <\/div><!-- \/professionnels-grid -->\n <\/div><!-- \/professionnels-wrap -->\n\n <\/div>\n<\/section>\n\n<!-- ============================================================\n L'ASSOCIATION\n============================================================ -->\n<section id=\"association\">\n <div class=\"container\">\n <div class=\"association-inner\">\n\n <!-- Visuel gauche -->\n <div class=\"association-visual\">\n <div class=\"association-img-wrap\">\n <!-- \ud83d\udcf7 PHOTO ASSOCIATION 1 \u2014 remplacez src par votre image -->\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/LOGO_RENVERSES_ASSO.png\" alt=\"Les Renvers\u00e9s \u2014 l'association\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"association-badge\">\n <div class=\"association-badge-num\">2016<\/div>\n <div class=\"association-badge-label\">Fond\u00e9e \u00e0 Paris<\/div>\n <\/div>\n <!-- \ud83d\udcf7 PHOTO ASSOCIATION 2 \u2014 remplacez src par votre image -->\n <div class=\"association-img-wrap association-img-wrap--2\">\n <img decoding=\"async\" src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/DSC8115-scaled.jpg\" alt=\"Les Renvers\u00e9s \u2014 l'association\" loading=\"lazy\" \/>\n <\/div>\n <\/div>\n\n <!-- Texte droite -->\n <div class=\"association-text\">\n <span class=\"label\">Qui sommes-nous ?<\/span>\n <h2 class=\"heading-lg\">L'Association<\/h2>\n <div class=\"divider\"><\/div>\n <p>\n <strong>Les Renvers\u00e9s<\/strong> est une association socioculturelle loi 1901 \u00e0 but non lucratif,\n d\u00e9clar\u00e9e le 6 juillet 2016 \u00e0 la pr\u00e9fecture de police de Paris.\n <\/p>\n <p>\n Elle a pour objet de favoriser l'adaptation de tout public aux personnes porteuses d'un handicap\n mental et\/ou moteur, en situation d'exclusion, et \u00e0 toute personne d\u00e9sirant partager et explorer\n une d\u00e9marche de cr\u00e9ation artistique principalement par l'expression th\u00e9\u00e2trale.\n <\/p>\n <p>\n Les Renvers\u00e9s proposent \u00e0 tous un espace de cr\u00e9ation accessible, ouvert et libre \u00e0 travers une\n \u00e9criture de plateau. Elle privil\u00e9gie la mixit\u00e9 de ses com\u00e9diens, favorise le partage et l'\u00e9change,\n et participe \u00e0 sortir de l'isolement par le biais de repr\u00e9sentations et de rencontres artistiques.\n <\/p>\n\n <!-- Membres du bureau -->\n <div class=\"bureau-section\">\n <div class=\"bureau-subtitle\">Bureau de l'association<\/div>\n <h3 class=\"bureau-title\">Membres du bureau<\/h3>\n <div class=\"bureau-list\">\n <div class=\"bureau-item\">\n <div class=\"bureau-nom\">Christian D\u00e9tr\u00e9<\/div>\n <div class=\"bureau-role\">Pr\u00e9sident<\/div>\n <\/div>\n <div class=\"bureau-item\">\n <div class=\"bureau-nom\">Gerry F\u00e9licit\u00e9<\/div>\n <div class=\"bureau-role\">Vice-pr\u00e9sident<\/div>\n <\/div>\n <div class=\"bureau-item\">\n <div class=\"bureau-nom\">Pierre Poussin<\/div>\n <div class=\"bureau-role\">Vice-pr\u00e9sident<\/div>\n <\/div>\n <div class=\"bureau-item\">\n <div class=\"bureau-nom\">Myriam D\u00e9tr\u00e9<\/div>\n <div class=\"bureau-role\">Secr\u00e9taire<\/div>\n <\/div>\n <div class=\"bureau-item\">\n <div class=\"bureau-nom\">Yann Cornec<\/div>\n <div class=\"bureau-role\">Tr\u00e9sorier<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bouton Adh\u00e9rer uniquement -->\n <div style=\"margin-top:28px;\">\n <a href=\"https:\/\/www.helloasso.com\/associations\/les-renverses\/adhesions\/adherer-aux-renverses\"\n target=\"_blank\" rel=\"noopener\"\n class=\"btn-adherer\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n Adh\u00e9rer aux Renvers\u00e9s\n <\/a>\n <\/div>\n\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================================\n PARTENAIRES\n============================================================ -->\n<section id=\"partenaires\">\n <div class=\"container\">\n <div class=\"partenaires-label\">Ils nous font confiance<\/div>\n <div class=\"partenaires-logos\">\n <span class=\"partenaire-logo\">MPAA<\/span>\n <span class=\"partenaire-logo\">Caf\u00e9 de la Gare<\/span>\n <span class=\"partenaire-logo\">CAP' Mairie de Paris<\/span>\n <span class=\"partenaire-logo\">Odile HULEUX<\/span>\n <span class=\"partenaire-logo\">Studio CBE<\/span>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================================\n CONTACT \u2014 HelloAsso widget\n============================================================ -->\n<section id=\"contact\" class=\"section\">\n <div class=\"container\">\n <div class=\"contact-inner\">\n <div class=\"contact-info\">\n <span class=\"label\">Restons en lien<\/span>\n <h2 class=\"heading-lg\">Nous soutenir<\/h2>\n <div class=\"divider\"><\/div>\n <p>Vous souhaitez soutenir la compagnie, rejoindre la troupe, ou nous accueillir pour une repr\u00e9sentation ? Chaque geste compte et nous permet de continuer cette aventure artistique unique.<\/p>\n <div class=\"contact-detail\">\n <div class=\"contact-icon\">\u2709\ufe0f<\/div>\n <div class=\"contact-detail-text\">\n <div class=\"small\">Email<\/div>\n <div class=\"val\">lesrenverses@gmail.com<\/div>\n <\/div>\n <\/div>\n <div class=\"contact-detail\">\n <div class=\"contact-icon\">\ud83c\udf10<\/div>\n <div class=\"contact-detail-text\">\n <div class=\"small\">Site web<\/div>\n <div class=\"val\">lesrenverses.com<\/div>\n <\/div>\n <\/div>\n <div style=\"margin-top:32px;\">\n <a href=\"https:\/\/www.helloasso.com\/associations\/les-renverses\/formulaires\/1\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-primary\" style=\"font-size:15px;padding:16px 36px;\">\n \u2764\ufe0f  Faire un don sur HelloAsso\n <\/a>\n <\/div>\n <\/div>\n <!-- Widget HelloAsso \u2014 fa\u00e7ade (iframe charg\u00e9e au clic) -->\n <div class=\"helloasso-block\" id=\"haBlock\">\n <div class=\"helloasso-header\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 40 40\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"rgba(255,255,255,0.15)\"\/>\n <path d=\"M12 20c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8-8-3.6-8-8z\" fill=\"white\" opacity=\"0.8\"\/>\n <\/svg>\n <div>\n <div class=\"helloasso-logo-text\">Soutenir Les Renvers\u00e9s<\/div>\n <div class=\"helloasso-sub\">Via HelloAsso \u2014 100% des dons revers\u00e9s \u00e0 l'association<\/div>\n <\/div>\n <\/div>\n <!-- Fa\u00e7ade : le widget ne se charge qu'au clic -->\n <div class=\"ha-facade\" id=\"haFacade\">\n <div class=\"ha-facade-icon\">\u2764\ufe0f<\/div>\n <div>\n <div class=\"ha-facade-title\">Faire un don aux Renvers\u00e9s<\/div>\n <div class=\"ha-facade-sub\">Formulaire s\u00e9curis\u00e9 via HelloAsso<\/div>\n <\/div>\n <button class=\"ha-facade-btn\" id=\"haLoadBtn\" aria-label=\"Ouvrir le formulaire de don HelloAsso\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/><\/svg>\n Soutenir la compagnie\n <\/button>\n <div class=\"ha-facade-note\">100% des dons revers\u00e9s \u00e0 l'association \u00b7 Paiement s\u00e9curis\u00e9<\/div>\n <\/div>\n <!-- Iframe charg\u00e9e dynamiquement -->\n <iframe\n class=\"helloasso-iframe\"\n id=\"haIframe\"\n style=\"display:none;\"\n title=\"Formulaire de don HelloAsso \u2014 Les Renvers\u00e9s\"\n allow=\"payment\">\n <\/iframe>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================================================\n FOOTER\n============================================================ -->\n<footer>\n <div class=\"container\">\n <div class=\"footer-inner\">\n <div class=\"footer-brand\">\n <img decoding=\"async\"\n src=\"http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/LOGO_LR_BLANC_OK.png\"\n alt=\"Les Renvers\u00e9s\"\n class=\"footer-logo-img\"\n onerror=\"this.style.display='none';this.nextElementSibling.style.display='block';\"\n \/>\n <span style=\"display:none;font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:rgba(250,247,242,0.9);letter-spacing:0.06em;display:block;margin-bottom:16px;\"><\/span>\n <p>Association loi 1901 \u00e0 but non lucratif \u2014 Th\u00e9\u00e2tre pour tous.<br>SIRET 822 829 925 00012<br> \u00a9 photos O. Santaoloria - S. Libermann - N. Demare - Les Renvers\u00e9s\n<\/p>\n <\/div>\n <div class=\"footer-col\">\n <h4>Navigation<\/h4>\n <ul>\n <li><a href=\"#presentation\">La compagnie<\/a><\/li>\n <li><a href=\"#valeurs\">Nos valeurs<\/a><\/li>\n <li><a href=\"#troupe\">La troupe<\/a><\/li>\n <li><a href=\"#spectacles\">Spectacles<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-col\">\n <h4>Participer<\/h4>\n <ul>\n <li><a href=\"https:\/\/www.helloasso.com\/associations\/les-renverses\/formulaires\/1\" target=\"_blank\" rel=\"noopener\">Faire un don<\/a><\/li>\n <li><a href=\"#contact\">Nous inviter<\/a><\/li>\n <li><a href=\"#parrains\">Nos parrains<\/a><\/li>\n <li><a href=\"#partenaires\">Partenaires<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-col\">\n <h4>Contact<\/h4>\n <ul>\n <li><a href=\"mailto:lesrenverses@gmail.com\">lesrenverses@gmail.com<\/a><\/li>\n <li><a href=\"https:\/\/lesrenverses.com\" target=\"_blank\" rel=\"noopener\">lesrenverses.com<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <span>\u00a9 2026 Les Renvers\u00e9s \u2014 Association loi 1901<\/span>\n <div class=\"social-links\">\n <a href=\"https:\/\/facebook.com\/lesrenverses\" target=\"_blank\" rel=\"noopener\" class=\"social-link\" title=\"Facebook\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/instagram.com\/les_renverses\" target=\"_blank\" rel=\"noopener\" class=\"social-link\" title=\"Instagram\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/www.youtube.com\/watch?v=zAuNW1FDbqI\" target=\"_blank\" rel=\"noopener\" class=\"social-link\" title=\"YouTube\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z\"\/><polygon points=\"9.75 15.02 15.5 12 9.75 8.98 9.75 15.02\" fill=\"white\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/footer>\n\n<!-- ============================================================\n SCRIPTS\n============================================================ -->\n<script>\n\/* ---- BULLES ANIM\u00c9ES \u2014 liquid glass ---- *\/\n(function() {\n \/* Ne pas cr\u00e9er de bulles si mobile ou prefers-reduced-motion *\/\n if (window.innerWidth <= 768) return;\n if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n var canvas = document.getElementById('bubblesCanvas');\n if (!canvas) return;\n var count = 9;\n for (var i = 0; i < count; i++) {\n var b = document.createElement('div');\n b.className = 'bubble';\n var size = i % 4 === 0\n ? 80 + Math.random() * 80\n : i % 3 === 0\n ? 40 + Math.random() * 40\n : 20 + Math.random() * 30;\n var left = Math.random() * 96;\n var delay = Math.random() * 24;\n var dur = 18 + Math.random() * 26;\n b.style.cssText = [\n 'width:' + size + 'px',\n 'height:' + size + 'px',\n 'left:' + left + '%',\n 'bottom:-' + (size + 30) + 'px',\n 'animation-duration:'+ dur + 's',\n 'animation-delay:' + delay + 's'\n ].join(';');\n canvas.appendChild(b);\n }\n})();\n\n\/* ================================================================\n BANNI\u00c8RES \u2014 CONFIGURATION CENTRALE\n ================================================================\n\n \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\n \u2551 INTERRUPTEUR PRINCIPAL \u2014 choisir quelle banni\u00e8re afficher \u2551\n \u2551 \u2551\n \u2551 'event' \u2192 Banni\u00e8re \u00e9v\u00e9nement (affiche + date + lieu) \u2551\n \u2551 'announce' \u2192 Banni\u00e8re annonce (gros titre + 2 textes) \u2551\n \u2551 false \u2192 Aucune banni\u00e8re \u2551\n \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\n*\/\nvar ACTIVE_BANNER = 'announce'; \/* \u2190 changer ici : 'event' | 'announce' | false *\/\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n BANNI\u00c8RE \u00c9V\u00c9NEMENT \u2014 contenu\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nvar BANNER_DATA = {\n badge: '\u00e9v\u00e8nement',\n title: 'Un royaume renversant',\n date: 'Samedi 17 octobre 2026',\n time: '20h',\n venue: 'Caf\u00e9 de la gare \u2014 41 rue du Temple 75004 Paris',\n posterSrc: 'http:\/\/lesrenverses.com\/wp-content\/uploads\/2026\/04\/LES_RENVERSES_UNROYAUMERENVERSANT_20x30_150DPI_RVB_TOURNEE.jpg',\n ctaText: 'R\u00e9server vos places',\n ctaHref: 'https:\/\/cafedelagareparis.com\/j\/index.php'\n};\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n BANNI\u00c8RE ANNONCE \u2014 contenu\n Gros titre + ligne 1 + ligne 2 (+ CTA optionnel)\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nvar ANNOUNCE_DATA = {\n badge: 'Nouveau',\n title: 'La compagnie des Renvers\u00e9s travaille sur une nouvelle cr\u00e9ation !',\n line1: '',\n line2: '',\n ctaText: 'En savoir plus',\n ctaHref: '#spectacles'\n \/* Pour masquer le CTA, laisser ctaHref vide : ctaHref: '' *\/\n};\n\n\n\/* ================================================================\n LOGIQUE \u2014 ne pas modifier ci-dessous\n================================================================ *\/\n(function () {\n var eventBanner = document.getElementById('event-banner');\n var announceBanner = document.getElementById('announce-banner');\n var group = document.getElementById('site-header-group');\n if (!group) return;\n\n \/* \u2500\u2500 1. Masquer les deux par d\u00e9faut \u2500\u2500 *\/\n if (eventBanner) eventBanner.style.display = 'none';\n if (announceBanner) announceBanner.style.display = 'none';\n\n \/* \u2500\u2500 2. Aucune banni\u00e8re active \u2500\u2500 *\/\n if (!ACTIVE_BANNER) return;\n\n \/* \u2500\u2500 3. Banni\u00e8re \u00c9V\u00c9NEMENT \u2500\u2500 *\/\n if (ACTIVE_BANNER === 'event' && eventBanner) {\n eventBanner.style.display = '';\n\n var posterEl = document.getElementById('bannerPoster');\n if (posterEl) {\n if (BANNER_DATA.posterSrc) {\n var img = document.createElement('img');\n img.src = BANNER_DATA.posterSrc;\n img.alt = BANNER_DATA.title;\n img.onerror = function () {\n posterEl.innerHTML = '<div class=\"banner-poster-fallback\">\ud83c\udfad<\/div>';\n };\n posterEl.appendChild(img);\n } else {\n posterEl.innerHTML = '<div class=\"banner-poster-fallback\">\ud83c\udfad<\/div>';\n }\n }\n var badgeEl = document.getElementById('bannerBadgeText');\n if (badgeEl) badgeEl.textContent = BANNER_DATA.badge;\n\n var titleEl = document.getElementById('bannerTitle');\n if (titleEl) titleEl.textContent = BANNER_DATA.title;\n\n var metaEl = document.getElementById('bannerMeta');\n if (metaEl) {\n metaEl.innerHTML =\n '<span class=\"banner-meta-item\">' +\n '<svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"\/><path d=\"M8 3v4M16 3v4M2 10h20\"\/><\/svg>' +\n '<strong>' + BANNER_DATA.date + '<\/strong>' +\n '<\/span>' +\n '<span class=\"banner-meta-item\">' +\n '<svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>' +\n '<strong>' + BANNER_DATA.time + '<\/strong>' +\n '<\/span>' +\n '<span class=\"banner-meta-item\">' +\n '<svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>' +\n BANNER_DATA.venue +\n '<\/span>';\n }\n var ctaEl = document.getElementById('bannerCta');\n var ctaTextEl = document.getElementById('bannerCtaText');\n if (ctaEl) ctaEl.href = BANNER_DATA.ctaHref;\n if (ctaTextEl) ctaTextEl.textContent = BANNER_DATA.ctaText;\n\n _showBanner(eventBanner, 'event-dismissed');\n _attachClose(document.getElementById('bannerClose'), eventBanner, 'event-dismissed');\n }\n\n \/* \u2500\u2500 4. Banni\u00e8re ANNONCE \u2500\u2500 *\/\n if (ACTIVE_BANNER === 'announce' && announceBanner) {\n announceBanner.style.display = '';\n\n var aBadgeEl = document.getElementById('announceBadgeText');\n if (aBadgeEl) aBadgeEl.textContent = ANNOUNCE_DATA.badge;\n\n var aTitleEl = document.getElementById('announceTitle');\n if (aTitleEl) aTitleEl.textContent = ANNOUNCE_DATA.title;\n\n var aLine1 = document.getElementById('announceLine1');\n if (aLine1) aLine1.innerHTML = ANNOUNCE_DATA.line1;\n\n var aLine2 = document.getElementById('announceLine2');\n if (aLine2) aLine2.innerHTML = ANNOUNCE_DATA.line2;\n\n var aCtaEl = document.getElementById('announceCta');\n var aCtaTextEl = document.getElementById('announceCtaText');\n if (aCtaEl) {\n if (ANNOUNCE_DATA.ctaHref) {\n aCtaEl.href = ANNOUNCE_DATA.ctaHref;\n if (aCtaTextEl) aCtaTextEl.textContent = ANNOUNCE_DATA.ctaText;\n } else {\n aCtaEl.style.display = 'none'; \/* CTA masqu\u00e9 si pas de lien *\/\n }\n }\n\n _showBanner(announceBanner, 'announce-dismissed');\n _attachClose(document.getElementById('announceClose'), announceBanner, 'announce-dismissed');\n }\n\n \/* \u2500\u2500 Helpers \u2500\u2500 *\/\n function _showBanner(el, storageKey) {\n var dismissed = false;\n try { dismissed = sessionStorage.getItem(storageKey) === '1'; } catch(e) {}\n if (!dismissed) {\n setTimeout(function () { el.classList.add('banner-visible'); }, 380);\n } else {\n el.style.display = 'none';\n }\n }\n\n function _attachClose(btn, el, storageKey) {\n if (!btn) return;\n btn.addEventListener('click', function () {\n el.classList.remove('banner-visible');\n setTimeout(function () { el.style.display = 'none'; }, 560);\n try { sessionStorage.setItem(storageKey, '1'); } catch(e) {}\n });\n }\n\n})();\n\n\/* ---- HEADER SCROLL \u2014 appliqu\u00e9 sur le groupe fixe entier ---- *\/\n(function () {\n var group = document.getElementById('site-header-group');\n var hdr = document.querySelector('header');\n window.addEventListener('scroll', function () {\n var scrolled = window.scrollY > 60;\n if (group) group.classList.toggle('scrolled', scrolled);\n if (hdr) hdr.classList.toggle('scrolled', scrolled);\n }, { passive: true });\n})();\n\n\/* ---- HERO CAROUSEL plein \u00e9cran ---- *\/\n(function() {\n var TOTAL = 15;\n var cur = 0;\n var slidesEl = document.getElementById('heroSlides');\n if (!slidesEl) return;\n var allSlides = slidesEl.querySelectorAll('.hero-slide');\n if (!allSlides.length) return;\n TOTAL = allSlides.length;\n var counter = document.getElementById('heroCounter');\n\n \/* S'assurer que chaque slide fait exactement 100% de la largeur *\/\n function setSlideSizes() {\n var w = slidesEl.parentElement.offsetWidth;\n allSlides.forEach(function(s) {\n s.style.minWidth = w + 'px';\n s.style.width = w + 'px';\n });\n }\n setSlideSizes();\n window.addEventListener('resize', setSlideSizes, { passive: true });\n\n function goTo(n) {\n allSlides[cur].classList.remove('active');\n cur = (n + TOTAL) % TOTAL;\n allSlides[cur].classList.add('active');\n var w = slidesEl.parentElement.offsetWidth;\n slidesEl.style.transform = 'translateX(-' + (cur * w) + 'px)';\n if (counter) {\n var num = (cur + 1 < 10 ? '0' : '') + (cur + 1);\n counter.innerHTML = '<span>' + num + '<\/span> \/ ' + (TOTAL < 10 ? '0' : '') + TOTAL;\n }\n }\n\n var prevBtn = document.getElementById('heroPrev');\n var nextBtn = document.getElementById('heroNext');\n if (prevBtn) prevBtn.addEventListener('click', function() { goTo(cur - 1); });\n if (nextBtn) nextBtn.addEventListener('click', function() { goTo(cur + 1); });\n\n \/\/ Auto-play 5s\n var timer = setInterval(function() { goTo(cur + 1); }, 5000);\n var heroEl = document.getElementById('hero');\n if (heroEl) {\n heroEl.addEventListener('mouseenter', function() { clearInterval(timer); });\n heroEl.addEventListener('mouseleave', function() {\n timer = setInterval(function() { goTo(cur + 1); }, 5000);\n });\n \/\/ Swipe touch\n var ts = 0;\n heroEl.addEventListener('touchstart', function(e) { ts = e.touches[0].clientX; }, { passive: true });\n heroEl.addEventListener('touchend', function(e) {\n var dx = e.changedTouches[0].clientX - ts;\n if (Math.abs(dx) > 40) goTo(dx < 0 ? cur + 1 : cur - 1);\n });\n }\n})();\n\n\/* ---- SPECTACLES MINI CARROUSELS ---- *\/\nvar specState = {};\nfunction specGoTo(id, n) {\n var wrap = document.getElementById(id);\n var sl = wrap.querySelector('.spec-slides');\n var total = sl.children.length;\n if (!specState[id]) specState[id] = 0;\n specState[id] = (n + total) % total;\n sl.style.transform = 'translateX(-' + (specState[id] * 100) + '%)';\n document.getElementById(id + 'Count').textContent = (specState[id]+1) + ' \/ ' + total;\n}\nfunction specPrev(id) { specGoTo(id, (specState[id] || 0) - 1); }\nfunction specNext(id) { specGoTo(id, (specState[id] || 0) + 1); }\n\n\/* ---- SCROLL ANIMATIONS ---- *\/\nvar observer = new IntersectionObserver(function (entries) {\n entries.forEach(function (e) {\n if (e.isIntersecting) {\n e.target.style.opacity = '1';\n e.target.style.transform = 'translateY(0)';\n }\n });\n}, { threshold: 0.08 });\n\ndocument.querySelectorAll(\n '.valeur-card, .comedien-flip, .spectacle-card, .temoignage-card, .parrain-card, .partenaire-logo'\n).forEach(function (el) {\n el.style.opacity = '0';\n el.style.transform = 'translateY(24px)';\n el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n observer.observe(el);\n});\n\n\/* chiffre-item : animation d\u00e9clench\u00e9e s\u00e9par\u00e9ment par le compteur JS *\/\ndocument.querySelectorAll('.chiffre-item').forEach(function (el) {\n observer.observe(el);\n});\/* ---- COMPTEUR ANIM\u00c9 \u2014 chiffres-cl\u00e9s ---- *\/\n(function () {\n var items = document.querySelectorAll('.chiffre-item');\n if (!items.length) return;\n\n function easeOut(t) { return 1 - Math.pow(1 - t, 3); }\n\n function animateCounter(el) {\n var numEl = el.querySelector('.chiffre-num');\n var labelEl = el.querySelector('.chiffre-label');\n if (!numEl || numEl.dataset.animated) return;\n numEl.dataset.animated = '1';\n\n \/* Extraire pr\u00e9fixe (+) et valeur cible *\/\n var raw = numEl.textContent.trim(); \/* ex: \"+10\", \"+200\", \"+1000\" *\/\n var prefix = raw.replace(\/[0-9]\/g, '');\n var target = parseInt(raw.replace(\/\\D\/g, ''), 10);\n var duration = 1400; \/* ms *\/\n var start = null;\n\n function step(ts) {\n if (!start) start = ts;\n var elapsed = ts - start;\n var progress = Math.min(elapsed \/ duration, 1);\n var value = Math.round(easeOut(progress) * target);\n numEl.textContent = prefix + value;\n if (progress < 1) {\n requestAnimationFrame(step);\n } else {\n numEl.textContent = raw; \/* restaurer la valeur exacte *\/\n }\n }\n\n \/* D\u00e9clencher l'apparition *\/\n numEl.classList.add('counted');\n if (labelEl) {\n setTimeout(function () { labelEl.classList.add('visible'); }, 150);\n }\n requestAnimationFrame(step);\n }\n\n var obs = new IntersectionObserver(function (entries) {\n entries.forEach(function (e) {\n if (e.isIntersecting) animateCounter(e.target);\n });\n }, { threshold: 0.5 });\n\n items.forEach(function (item) { obs.observe(item); });\n})();\n\n\/* ---- MOBILE \u2014 emp\u00eacher le scroll horizontal parasite ---- *\/\n(function () {\n \/* Forcer overflow-x hidden sur html\/body *\/\n document.documentElement.style.overflowX = 'hidden';\n document.body.style.overflowX = 'hidden';\n\n \/* Fix iOS Safari : emp\u00eacher l'\u00e9lastique horizontal *\/\n document.addEventListener('touchmove', function (e) {\n \/* Autoriser le scroll vertical uniquement *\/\n }, { passive: true });\n})();\n\n\/* ---- ANCIENS \u2014 carrousel : infini desktop \/ slides mobile ---- *\/\n(function () {\n var track = document.getElementById('anciensTrack');\n if (!track) return;\n\n \/* \u2500\u2500 Donn\u00e9es \u2500\u2500 *\/\n var paused = false;\n var isMobile = false;\n var mobileIdx = 0; \/* slide courant sur mobile *\/\n var origCount = 0;\n var speed = 0.45;\n var pos = 0;\n var singleSetW = 0;\n var rafId = null;\n\n \/* D\u00e9tecter mobile *\/\n function checkMobile() { return window.innerWidth <= 768; }\n\n \/* \u2500\u2500 Attacher flip sur chaque carte \u2500\u2500 *\/\n function attachFlip(card) {\n card.style.cursor = 'pointer';\n card.addEventListener('click', function () {\n card.classList.toggle('flipped');\n if (!isMobile) {\n paused = true;\n setTimeout(function () { paused = false; }, 1500);\n }\n });\n }\n\n \/* \u2500\u2500 Pr\u00e9parer les cartes originales \u2500\u2500 *\/\n var origCards = Array.from(track.children);\n origCount = origCards.length;\n origCards.forEach(attachFlip);\n\n \/* \u2500\u2500 Cloner pour la boucle infinie desktop \u2500\u2500 *\/\n origCards.forEach(function (card) {\n var clone = card.cloneNode(true);\n attachFlip(clone);\n clone.setAttribute('data-clone', '1');\n track.appendChild(clone);\n });\n\n \/* \u2500\u2500 DOTS mobile \u2500\u2500 *\/\n var dotsWrap = document.getElementById('anciensDots');\n var dots = [];\n if (dotsWrap) {\n origCards.forEach(function (_, i) {\n var d = document.createElement('button');\n d.className = 'anciens-dot' + (i === 0 ? ' active' : '');\n d.setAttribute('aria-label', 'Photo ' + (i + 1));\n d.addEventListener('click', function () { mobileGoTo(i); });\n dotsWrap.appendChild(d);\n dots.push(d);\n });\n }\n\n function updateDots(idx) {\n dots.forEach(function (d, i) {\n d.classList.toggle('active', i === idx);\n });\n }\n\n \/* \u2500\u2500 Navigation mobile \u2014 slide discret \u2500\u2500 *\/\n function mobileGoTo(idx) {\n \/* R\u00e9initialiser tous les flips *\/\n track.querySelectorAll('.anciens-flip').forEach(function (c) {\n c.classList.remove('flipped');\n });\n mobileIdx = ((idx % origCount) + origCount) % origCount;\n var cardW = track.querySelector('.anciens-flip').offsetWidth;\n track.style.transition = 'transform 0.55s cubic-bezier(0.4,0,0.2,1)';\n track.style.transform = 'translateX(-' + (mobileIdx * cardW) + 'px)';\n updateDots(mobileIdx);\n }\n\n \/* \u2500\u2500 Largeur desktop \u2500\u2500 *\/\n function calcDesktopWidth() {\n var allCards = track.querySelectorAll('.anciens-flip:not([data-clone])');\n singleSetW = 0;\n allCards.forEach(function (c) { singleSetW += c.offsetWidth + 14; });\n }\n\n \/* \u2500\u2500 Loop desktop \u2500\u2500 *\/\n function tickDesktop() {\n if (!paused) {\n pos += speed;\n if (pos >= singleSetW) pos -= singleSetW;\n track.style.transform = 'translateX(-' + pos + 'px)';\n }\n rafId = requestAnimationFrame(tickDesktop);\n }\n\n \/* \u2500\u2500 Swipe touch (mobile) \u2500\u2500 *\/\n var tsX = 0, tsY = 0, swipeLocked = false;\n track.addEventListener('touchstart', function (e) {\n tsX = e.touches[0].clientX;\n tsY = e.touches[0].clientY;\n swipeLocked = false;\n }, { passive: true });\n track.addEventListener('touchend', function (e) {\n if (swipeLocked) return;\n var dx = e.changedTouches[0].clientX - tsX;\n var dy = e.changedTouches[0].clientY - tsY;\n if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 36) {\n mobileGoTo(mobileIdx + (dx < 0 ? 1 : -1));\n }\n }, { passive: true });\n track.addEventListener('touchmove', function (e) {\n var dy = Math.abs(e.touches[0].clientY - tsY);\n var dx = Math.abs(e.touches[0].clientX - tsX);\n if (dy > dx) swipeLocked = true; \/* scroll vertical \u2192 pas de swipe *\/\n }, { passive: true });\n\n \/* \u2500\u2500 Auto-avance mobile (toutes les 4s) \u2500\u2500 *\/\n var mobileTimer = null;\n function startMobileAuto() {\n mobileTimer = setInterval(function () { mobileGoTo(mobileIdx + 1); }, 4000);\n }\n function stopMobileAuto() { clearInterval(mobileTimer); }\n\n \/* \u2500\u2500 Init \/ reinit selon mode \u2500\u2500 *\/\n function initDesktop() {\n isMobile = false;\n stopMobileAuto();\n cancelAnimationFrame(rafId);\n\n \/* Montrer les clones, masquer dots *\/\n track.querySelectorAll('[data-clone]').forEach(function (c) { c.style.display = ''; });\n track.style.transition = 'none';\n track.style.transform = 'translateX(0)';\n pos = 0;\n\n calcDesktopWidth();\n tickDesktop();\n\n \/* Pause hover *\/\n var wrap = track.parentElement;\n wrap.onmouseenter = function () { paused = true; };\n wrap.onmouseleave = function () { paused = false; };\n }\n\n function initMobile() {\n isMobile = true;\n cancelAnimationFrame(rafId);\n paused = false;\n\n \/* Masquer les clones *\/\n track.querySelectorAll('[data-clone]').forEach(function (c) { c.style.display = 'none'; });\n\n \/* Chaque carte prend 100% de la largeur du wrap *\/\n var wrapW = track.parentElement.offsetWidth;\n track.querySelectorAll('.anciens-flip:not([data-clone])').forEach(function (c) {\n c.style.minWidth = wrapW + 'px';\n c.style.width = wrapW + 'px';\n });\n\n \/* Revenir au slide 0 sans transition *\/\n track.style.transition = 'none';\n track.style.transform = 'translateX(0)';\n mobileIdx = 0;\n updateDots(0);\n\n stopMobileAuto();\n startMobileAuto();\n\n \/* Pause sur touch *\/\n var wrap = track.parentElement;\n wrap.onmouseenter = null;\n wrap.onmouseleave = null;\n }\n\n \/* \u2500\u2500 Responsive switch \u2500\u2500 *\/\n function onResize() {\n var nowMobile = checkMobile();\n if (nowMobile && !isMobile) { initMobile(); }\n else if (!nowMobile && isMobile) { initDesktop(); }\n else if (nowMobile) {\n \/* Recalibrer les largeurs si fen\u00eatre change encore *\/\n var wrapW = track.parentElement.offsetWidth;\n track.querySelectorAll('.anciens-flip:not([data-clone])').forEach(function (c) {\n c.style.minWidth = wrapW + 'px';\n c.style.width = wrapW + 'px';\n });\n mobileGoTo(mobileIdx);\n } else {\n calcDesktopWidth();\n }\n }\n window.addEventListener('resize', onResize, { passive: true });\n\n \/* \u2500\u2500 D\u00e9marrage \u2500\u2500 *\/\n requestAnimationFrame(function () {\n if (checkMobile()) { initMobile(); }\n else { initDesktop(); }\n });\n})();\n\n\/* ---- PRESSE \u2014 carrousel infini + lightbox ---- *\/\n(function () {\n var track = document.getElementById('presseTrack');\n var prevBtn = document.getElementById('pressePrev');\n var nextBtn = document.getElementById('presseNext');\n if (!track) return;\n\n \/* \u2500\u2500 Lightbox refs \u2500\u2500 *\/\n var lbOverlay = document.getElementById('presse-lightbox');\n var lbClose = document.getElementById('lbClose');\n var lbPrev = document.getElementById('lbPrev');\n var lbNext = document.getElementById('lbNext');\n var lbImg = document.getElementById('lbImg');\n var lbYt = document.getElementById('lbYt');\n var lbCaption = document.getElementById('lbCaption');\n\n \/* \u2500\u2500 D\u00e9sactiver le scroll natif du track \u2014 on g\u00e8re translateX \u2500\u2500 *\/\n track.style.overflowX = 'visible';\n track.style.overflow = 'visible';\n track.style.display = 'flex';\n track.style.gap = '20px';\n track.style.transition = 'none';\n track.style.willChange = 'transform';\n track.style.scrollSnapType = 'none';\n\n \/* \u2500\u2500 Cloner les cartes pour la boucle infinie \u2500\u2500 *\/\n var origCards = Array.from(track.querySelectorAll('.presse-card'));\n var origCount = origCards.length;\n\n origCards.forEach(function (card) {\n var clone = card.cloneNode(true);\n clone.setAttribute('data-clone', '1');\n track.appendChild(clone);\n });\n\n \/* Toutes les cartes (originales + clones) *\/\n var allCards = track.querySelectorAll('.presse-card');\n\n \/* \u2500\u2500 Calcul de la largeur d'un jeu complet \u2500\u2500 *\/\n var gap = 20;\n var cardW = 0;\n var setW = 0;\n\n function calcSizes() {\n if (!origCards[0]) return;\n cardW = origCards[0].offsetWidth;\n setW = origCount * (cardW + gap);\n }\n\n \/* \u2500\u2500 Position courante (en px) \u2500\u2500 *\/\n var posX = 0;\n var isAnimating = false;\n\n function applyPos(px, animated) {\n track.style.transition = animated\n ? 'transform 0.55s cubic-bezier(0.4,0,0.2,1)'\n : 'none';\n track.style.transform = 'translateX(-' + px + 'px)';\n }\n\n \/* \u2500\u2500 Avancer d'un nombre de cartes \u2500\u2500 *\/\n function scrollCards(delta) {\n if (isAnimating) return;\n isAnimating = true;\n calcSizes();\n posX += delta * (cardW + gap);\n\n \/* Transition anim\u00e9e *\/\n applyPos(posX, true);\n\n \/* Apr\u00e8s l'animation : v\u00e9rifier si on doit boucler *\/\n setTimeout(function () {\n \/* Si on a d\u00e9pass\u00e9 le premier set \u2192 revenir au d\u00e9but du deuxi\u00e8me *\/\n if (posX >= setW) { posX -= setW; applyPos(posX, false); }\n \/* Si on remonte avant 0 \u2192 sauter \u00e0 la fin du premier set *\/\n if (posX < 0) { posX += setW; applyPos(posX, false); }\n isAnimating = false;\n }, 560);\n }\n\n if (prevBtn) prevBtn.addEventListener('click', function () { scrollCards(-2); });\n if (nextBtn) nextBtn.addEventListener('click', function () { scrollCards(2); });\n\n \/* \u2500\u2500 Init taille \u2500\u2500 *\/\n calcSizes();\n window.addEventListener('resize', function () {\n calcSizes();\n applyPos(posX, false);\n }, { passive: true });\n\n \/* \u2500\u2500 Swipe touch \u2500\u2500 *\/\n var touchStartX = 0;\n track.addEventListener('touchstart', function (e) {\n touchStartX = e.touches[0].clientX;\n }, { passive: true });\n track.addEventListener('touchend', function (e) {\n var dx = e.changedTouches[0].clientX - touchStartX;\n if (Math.abs(dx) > 40) scrollCards(dx < 0 ? 1 : -1);\n }, { passive: true });\n\n \/* \u2500\u2500 Lightbox \u2014 index courant dans les cartes ORIGINALES \u2500\u2500 *\/\n var currentIdx = 0;\n\n function openLightbox(idx) {\n if (!lbOverlay) return;\n var card = origCards[idx];\n if (!card) return;\n currentIdx = idx;\n\n var type = card.dataset.type;\n var caption = card.dataset.caption || '';\n\n lbImg.classList.add('lb-hidden');\n lbYt.classList.add('lb-hidden');\n lbYt.src = '';\n\n if (type === 'video') {\n lbYt.src = 'https:\/\/www.youtube.com\/embed\/' + card.dataset.yt + '?autoplay=1&rel=0&modestbranding=1';\n lbYt.classList.remove('lb-hidden');\n } else if (type === 'photo') {\n lbImg.src = card.dataset.src;\n lbImg.alt = caption;\n lbImg.classList.remove('lb-hidden');\n } else if (type === 'link') {\n window.open(card.dataset.href, '_blank', 'noopener,noreferrer');\n return;\n }\n\n if (lbCaption) lbCaption.textContent = caption;\n lbOverlay.classList.add('lb-open');\n document.body.style.overflow = 'hidden';\n }\n\n function closeLightbox() {\n if (!lbOverlay) return;\n lbOverlay.classList.remove('lb-open');\n document.body.style.overflow = '';\n setTimeout(function () { lbYt.src = ''; }, 350);\n }\n\n function lbNavigate(dir) {\n var newIdx = (currentIdx + dir + origCount) % origCount;\n var tries = 0;\n while (origCards[newIdx] && origCards[newIdx].dataset.type === 'link' && tries < origCount) {\n newIdx = (newIdx + dir + origCount) % origCount;\n tries++;\n }\n openLightbox(newIdx);\n }\n\n \/* Attacher click sur toutes les cartes (originales + clones) *\/\n allCards.forEach(function (card) {\n var origIdx = parseInt(card.getAttribute('data-orig-idx') || '0', 10);\n card.addEventListener('click', function () {\n \/* Trouver l'index original *\/\n var idx = origCards.indexOf(card);\n if (idx === -1) {\n \/* C'est un clone \u2192 retrouver l'index via data-orig-idx *\/\n idx = origIdx;\n }\n openLightbox(idx);\n });\n card.setAttribute('tabindex', '0');\n card.setAttribute('role', 'button');\n card.addEventListener('keydown', function (e) {\n if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); }\n });\n });\n\n \/* Stocker l'index original sur chaque carte originale pour les clones *\/\n origCards.forEach(function (card, i) {\n card.setAttribute('data-orig-idx', String(i));\n \/* Copier sur le clone d\u00e9j\u00e0 cr\u00e9\u00e9 *\/\n var clone = track.querySelector('[data-clone=\"1\"]:nth-of-type(' + (origCount + i + 1) + ')');\n });\n \/* Plus propre : remettre data-orig-idx sur tous apr\u00e8s clonage *\/\n Array.from(track.querySelectorAll('.presse-card')).forEach(function (card, i) {\n card.setAttribute('data-orig-idx', String(i % origCount));\n });\n\n if (lbClose) lbClose.addEventListener('click', closeLightbox);\n if (lbPrev) lbPrev.addEventListener('click', function () { lbNavigate(-1); });\n if (lbNext) lbNext.addEventListener('click', function () { lbNavigate(1); });\n\n if (lbOverlay) {\n lbOverlay.addEventListener('click', function (e) {\n if (e.target === lbOverlay) closeLightbox();\n });\n }\n\n document.addEventListener('keydown', function (e) {\n if (!lbOverlay || !lbOverlay.classList.contains('lb-open')) return;\n if (e.key === 'Escape') closeLightbox();\n if (e.key === 'ArrowLeft') lbNavigate(-1);\n if (e.key === 'ArrowRight') lbNavigate(1);\n });\n})();\n\n\/* ---- FA\u00c7ADE YOUTUBE ---- *\/\n(function () {\n var facade = document.getElementById('ytFacade');\n if (!facade) return;\n function loadYt() {\n var ytid = facade.dataset.ytid;\n var ytt = facade.dataset.ytt || '0';\n var iframe = document.createElement('iframe');\n iframe.className = 'yt-embed';\n iframe.src = 'https:\/\/www.youtube.com\/embed\/' + ytid + '?t=' + ytt + '&autoplay=1&rel=0&modestbranding=1';\n iframe.title = facade.getAttribute('aria-label') || 'Vid\u00e9o YouTube';\n iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';\n iframe.allowFullscreen = true;\n iframe.style.border = 'none';\n \/* Remplacer la fa\u00e7ade par l'iframe *\/\n facade.parentNode.replaceChild(iframe, facade);\n }\n facade.addEventListener('click', loadYt);\n facade.addEventListener('keydown', function (e) {\n if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); loadYt(); }\n });\n})();\n\n\/* ---- FA\u00c7ADE HELLOASSO ---- *\/\n(function () {\n var btn = document.getElementById('haLoadBtn');\n var facade = document.getElementById('haFacade');\n var iframe = document.getElementById('haIframe');\n if (!btn || !facade || !iframe) return;\n btn.addEventListener('click', function () {\n iframe.src = 'https:\/\/www.helloasso.com\/associations\/les-renverses\/formulaires\/1\/widget';\n facade.style.display = 'none';\n iframe.style.display = 'block';\n \/* Scroll doux vers le widget *\/\n setTimeout(function () {\n iframe.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 200);\n });\n})();\n\n<\/script>\n<\/body>\n<\/html>\n\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>Les Renvers\u00e9s \u2013 Th\u00e9\u00e2tre pour tous La compagnie La troupe L’association Nos cr\u00e9ations Un royaume renversant Je me souviens Tout […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lesrenverses.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lesrenverses.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lesrenverses.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lesrenverses.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lesrenverses.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":409,"href":"https:\/\/lesrenverses.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":603,"href":"https:\/\/lesrenverses.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/603"}],"wp:attachment":[{"href":"https:\/\/lesrenverses.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}