
<!--
HISTORIQUE DES MODIFICATIONS
Date : 28/08/2026
- Modifications précédentes : fichier fourni par l'utilisateur, contenu conservé.
- Nouvelle modification : sur téléphone et tablette uniquement (max-width: 1024px), le menu SoundYoga est désormais fixé en haut de l'écran dès l'arrivée sur le header plein écran. Le comportement ordinateur reste inchangé. Le tiroir du menu mobile est placé au-dessus du contenu et sous l'écran d'accueil.
Date : 28/08/2026
- Modifications précédentes : historique existant conservé ci-dessus sans suppression.
- Nouvelle modification : sur téléphone et tablette uniquement (max-width: 1024px), le bandeau promotionnel SoundYoga est positionné juste sous le menu fixe de 72 px afin d’éviter toute superposition. Aucun changement sur ordinateur.
Date : 03/09/2026
- Modifications précédentes : historique existant conservé ci-dessus sans suppression.
- Nouvelle modification : sur la première page d’accueil immersive, remplacement du bloc éditorial « Bouger, respirer, ressentir » par la vidéo Wix fournie. La vidéo est affichée dans une fenêtre verticale 9:16 avec recadrage central par overflow afin de masquer les bandes noires latérales intégrées au fichier, sans déformer l’image. Lecture automatique silencieuse, en boucle et compatible mobile. Aucun autre contenu ni comportement du site n’est modifié.
Date : 03/09/2026
- Modifications précédentes : historique existant conservé ci-dessus sans suppression.
- Nouvelle modification : remplacement du bandeau aléatoire Bois Saint-Mard par 10 propositions de bandeaux « Promo Rentrée » pour la carte 20 séances à 340 €, soit 17 € la séance au lieu de 24 €. Ajout d’un compte à rebours J/H/M/S sans cadre englobant, placé à gauche, avec échéance au 28/09/2026 à 00:00 heure de Paris. La remise « -29 % » est mise en évidence dans chacune des 10 propositions. Sur le bandeau noir, la comparaison avec le tarif total de 480 € est supprimée. Les boutons renvoient vers la page Formules et tarifs existante. Aucun autre contenu ni comportement du site n’est modifié.
Date : 03/09/2026
- Modifications précédentes : historique existant conservé ci-dessus sans suppression.
- Nouvelle modification : sur téléphone et tablette uniquement (max-width: 1024px), le bandeau Promo Rentrée est désormais placé tout en haut de l’écran, au-dessus du menu mobile. La hauteur réelle du bandeau est mesurée dynamiquement afin de positionner le menu juste en dessous sans chevauchement, y compris lorsque le bandeau change de design ou passe sur plusieurs lignes. Le tiroir du menu mobile s’ouvre également sous le bandeau et le header. Aucun changement sur ordinateur.
Date : 03/09/2026
- Modifications précédentes : historique existant conservé ci-dessus sans suppression.
- Nouvelle modification : mise à jour des 10 bandeaux « Promo Rentrée » : suppression de tous les prix, des références à la carte 20 séances, du prix par séance et des économies en euros. La remise « -29 % » est conservée et la promotion est désormais présentée comme valable sur toutes les cartes de cours. Le compte à rebours J/H/M/S, l’échéance au 28/09/2026 à 00:00 heure de Paris, la sélection aléatoire des 10 propositions et le positionnement du bandeau au-dessus du menu sur mobile sont conservés. Aucun autre contenu ni comportement du site n’est modifié.
Date : 04/09/2026
- Modifications précédentes : historique existant conservé ci-dessus sans suppression.
- Nouvelle modification : dans la section plein écran « story », remplacement de la vidéo principale par la nouvelle vidéo Wix 360p fournie. Suppression du contenu « Voyage en Inde à travers les Arts » et remplacement par « Centre de Yoga et Soins Sonores », « Trouver votre Yoga » et « jusqu'à 16 séances différentes par semaine ». Le titre principal conserve exactement la même typographie que l’ancien titre. Ajout d’un fondu lent en boucle sur le bloc de texte uniquement ; le bouton « Les réservations sont ouvertes sur le planning ! » reste visible en permanence et conserve son lien existant. Aucun autre contenu ni comportement du site n’est modifié.
Date : 04/09/2026
- Modifications précédentes : historique existant conservé ci-dessus sans suppression.
- Nouvelle modification : dans la section plein écran « story », remplacement de la vidéo 360p par la version Wix 1080p fournie, correction du titre « Trouver votre Yoga » en « Trouvez votre Yoga » et remplacement du libellé du bouton « Les réservations sont ouvertes sur le planning ! » par « Agenda » en conservant son lien. Sur téléphone et tablette uniquement (max-width: 1024px), le header fixe « Centre de Yoga et Soins Sonores » se masque lors du défilement vers le bas et réapparaît dès que l’utilisateur défile vers le haut ; le comportement ordinateur reste inchangé.
-->
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SoundYoga — Bains sonores, Yoga & Méditation • Compiègne</title>
  <meta name="description"
    content="Centre SoundYoga à Compiègne. Bains sonores aux gongs et diapasons, yoga & méditation. Réservations en ligne, ouvert 7J/7." />
  <meta name="theme-color" content="#E8640E" />
  <!-- Favicon -->
  <link rel="icon" type="image/png" href="https://soundyoga.fr/wp-content/uploads/2020/04/LOGO-SYOGA-Ccolors.png">
  <link
    href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Inter:wght@400;600;700&display=swap"
    rel="stylesheet">
  <style>
    :root {
      /* --- VARIABLES DE BASE (Mood: Zen par défaut) --- */
      --violet: #6C3BB8;
      --violet-dark: #4B1FA8;
      --orange: #E8640E;
      --text: #2F2A28;
      --muted: #6b6663;
      --line: #eee;
      --bg: #fff;
      --soft: #FAF7FF;
      --badge-rose: #EEDDD6;
      --badge-bleu: #E9F1F5;
      --badge-gris: #F1F1F3;
      --max: 1140px;
      --sidebar: 300px;

      /* Variables Dopamine */
      --particle-color: rgba(232, 100, 14, 0.8);
      /* Poussière d'or */
      --breathing-opacity: 0.4;
    }

    /* --- THEMES (MOOD SLIDER) --- */
    body.mood-fire {
      --violet: #D93025;
      /* Rouge énergique */
      --violet-dark: #A50E0E;
      --orange: #F9AB00;
      --soft: #FFF0E6;
      --bg: #FFFBF7;
      --particle-color: rgba(217, 48, 37, 0.8);
    }

    body.mood-forest {
      --violet: #188038;
      /* Vert nature */
      --violet-dark: #0D652D;
      --orange: #1E8E3E;
      --soft: #F1F8E9;
      --bg: #F9FBF9;
      --particle-color: rgba(24, 128, 56, 0.8);
    }

    /* === BREATHING BACKGROUND (Fond qui respire) === */
    .breathing-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 50%, var(--soft) 0%, transparent 80%);
      z-index: -1;
      pointer-events: none;
      animation: breatheBg 10s infinite ease-in-out;
      opacity: var(--breathing-opacity);
    }

    @keyframes breatheBg {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.3;
      }

      50% {
        transform: scale(1.15);
        opacity: 0.6;
      }
    }

    /* === PARTICULES MAGIQUES === */
    .magic-particle {
      position: fixed;
      width: 6px;
      height: 6px;
      background: var(--particle-color);
      border-radius: 50%;
      pointer-events: none;
      box-shadow: 0 0 6px var(--particle-color);
      animation: fadeOutParticle 1s forwards;
      z-index: 9999;
    }

    @keyframes fadeOutParticle {
      0% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
      }

      100% {
        transform: scale(0) translate(var(--tx), var(--ty));
        opacity: 0;
      }
    }

    /* === START AUDIO OVERLAY (Pour activer l'Audio API) === */
    #start-overlay {
      position: fixed;
      inset: 0;
      background: rgba(255, 255, 255, 0.95);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: opacity 0.5s;
    }

    #start-overlay h2 {
      font-family: "Cormorant Garamond", serif;
      font-size: 32px;
      color: var(--violet);
      margin-bottom: 20px;
      text-align: Center;
    }

    #start-overlay p {
      color: var(--muted);
      margin-bottom: 30px;
      text-align: center;
    }

    #start-overlay {
      justify-content: flex-start;
      overflow-y: auto;
      padding: 24px 18px 54px;
    }

    #start-overlay .sy-start-page {
      width: min(920px, 100%);
      margin: 0 auto;
      text-align: center;
    }

    #start-overlay .sy-start-intro {
      padding: 12px 10px 34px;
    }

    #start-overlay .sy-start-logo {
      display: inline-block;
      margin: 0 0 8px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    #start-overlay .sy-start-logo img {
      width: 86px;
      height: 86px;
      object-fit: contain;
      display: block;
      transition: transform .2s ease;
    }

    #start-overlay .sy-start-logo:hover img {
      transform: scale(1.04);
    }

    #start-overlay .sy-start-intro h1,
    #start-overlay .sy-start-intro h2 {
      font-family: "Cormorant Garamond", serif;
      color: var(--violet);
    }

    #start-overlay .sy-start-intro h1 {
      font-size: clamp(31px, 5vw, 46px);
      line-height: 1.05;
      margin: 0 0 10px;
      font-weight: 700;
    }

    #start-overlay .sy-start-intro h2 {
      font-size: clamp(19px, 3vw, 27px);
      line-height: 1.2;
      margin: 4px 0;
      font-weight: 600;
    }

    #start-overlay .sy-start-since {
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(18px, 2.5vw, 23px);
      color: var(--orange);
      font-weight: 700;
      margin-top: 6px;
    }

    #start-overlay .sy-start-address {
      margin: 28px 0 18px;
      font-size: 15px;
      color: var(--muted);
    }

    #start-overlay .sy-start-phone {
      display: block;
      width: fit-content;
      margin: 15px auto 0;
      color: var(--violet);
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    #start-overlay .sy-start-phone:hover {
      text-decoration: underline;
    }

    #start-overlay .sy-start-separator {
      width: 72px;
      height: 1px;
      background: #e9e3df;
      margin: 2px auto 34px;
    }

    #start-overlay .sy-start-fact-card {
      position: relative;
      overflow: hidden;
      min-height: 370px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 12px 34px rgba(0, 0, 0, .055);
      padding: 48px 84px 48px 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #start-overlay .sy-start-eyebrow {
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 12px;
      font-weight: 700;
      color: var(--violet);
      margin-bottom: 24px;
    }

    #start-overlay .sy-start-fact {
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(26px, 4vw, 38px);
      line-height: 1.3;
      color: #342f2d;
      max-width: 720px;
      margin-bottom: 28px;
      font-weight: 600;
    }

    #start-overlay .sy-start-session {
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(21px, 3vw, 27px);
      font-weight: 700;
      color: var(--violet);
      margin-bottom: 7px;
    }

    #start-overlay .sy-start-detail {
      max-width: 620px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.65;
      margin-bottom: 22px;
    }

    #start-overlay .sy-start-course-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      padding: 11px 16px;
      background: var(--violet);
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
    }

    #start-overlay .sy-start-course-link:hover {
      background: var(--violet-dark);
    }

    #start-overlay .sy-start-next {
      position: absolute;
      top: 0;
      right: 0;
      width: 56px;
      height: 100%;
      border: 0;
      margin: 0;
      padding: 0;
      border-radius: 0;
      background: var(--orange);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Arial, sans-serif;
      font-size: 44px;
      font-weight: 300;
      line-height: 1;
      transition: filter .18s ease, width .18s ease;
    }

    #start-overlay .sy-start-next:hover {
      filter: brightness(.95);
      width: 61px;
    }

    @media (max-width: 600px) {
      #start-overlay {
        padding: 18px 12px 40px;
      }

      #start-overlay .sy-start-logo img {
        width: 74px;
        height: 74px;
      }

      #start-overlay .sy-start-address {
        margin-top: 22px;
      }

      #start-overlay .sy-start-fact-card {
        min-height: 420px;
        padding: 38px 64px 38px 24px;
        border-radius: 18px;
      }

      #start-overlay .sy-start-next,
      #start-overlay .sy-start-next:hover {
        width: 48px;
        font-size: 38px;
      }
    }

    /* MOOD SLIDER STYLES */
    .mood-selector {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      background: var(--soft);
      padding: 8px;
      border-radius: 30px;
    }

    .mood-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      transition: transform 0.2s;
    }

    .mood-btn:hover {
      transform: scale(1.2);
    }

    .mood-btn.active {
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* ORACLE SONORE STYLES */
    .oracle-section {
      background: var(--bg);
      padding: 60px 0;
      text-align: center;
      border-top: 1px solid var(--line);
    }

    .gong-container {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 0 auto 30px;
      cursor: pointer;
      transition: transform 0.1s;
    }

    .gong-visual {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }

    .gong-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }


    .gong-center {
      width: 20%;
      height: 20%;
      background: #DAA520;
      border-radius: 50%;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .gong-container:active {
      transform: scale(0.95);
    }

    .gong-container.vibrating {
      animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
    }

    @keyframes shake {

      10%,
      90% {
        transform: translate3d(-2px, 0, 0) scale(1.05);
      }

      20%,
      80% {
        transform: translate3d(4px, 0, 0) scale(1.05);
      }

      30%,
      50%,
      70% {
        transform: translate3d(-8px, 0, 0) scale(1.05);
      }

      40%,
      60% {
        transform: translate3d(8px, 0, 0) scale(1.05);
      }
    }

    .oracle-result {
      font-family: "Cormorant Garamond", serif;
      font-size: 24px;
      color: var(--violet);
      min-height: 40px;
      opacity: 0;
      transition: opacity 1s;
      margin-top: 20px;
    }

    /* === PLAN 2: HOVER MOVEMENTS (FLOAT) === */
    @keyframes float {
      0% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-3px);
      }

      100% {
        transform: translateY(0);
      }
    }

    .btn-primary:hover,
    .btn-accent:hover {
      animation: float 2s ease-in-out infinite;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    /* Animation "Jelly" au clic pour les boutons */
    .btn {
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }

    .btn:active {
      transform: scale(0.95);
    }

    .btn.clicked {
      animation: jelly 0.5s;
    }

    @keyframes jelly {

      0%,
      100% {
        transform: scale(1, 1);
      }

      25% {
        transform: scale(0.9, 1.1);
      }

      50% {
        transform: scale(1.1, 0.9);
      }

      75% {
        transform: scale(0.95, 1.05);
      }
    }

    /* Reset doux */
    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%;
      overflow-x: hidden;
    }

    /* Empêche TOUT scroll horizontal */
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      /* Empêche le scroll horizontal lié aux animations 3D */
      transition: background 0.8s ease, color 0.8s ease;
    }

    img {
      max-width: 100%;
      display: block
    }

    a {
      color: inherit;
      text-decoration: none
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 28px
    }

    /* --- AJOUT DE LA BANDE PROMOTIONNELLE --- */
    .promo-banner {
      background-color: var(--orange);
      color: white;
      text-align: center;
      padding: 18px 5px;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 0.03em;
      line-height: 1.4;
    }

    .promo-banner .discount {
      background-color: var(--violet);
      padding: 4px 10px;
      border-radius: 6px;
      margin: 0 6px;
      font-size: 21px;
    }

    /* Style pour le compteur dans le bandeau */
    #banner-countdown {
      font-size: 18px;
      background-color: rgba(0, 0, 0, 0.15);
      padding: 4px 12px;
      border-radius: 6px;
      margin-left: 15px;
    }

    @media (max-width: 768px) {
      .promo-banner {
        flex-direction: column;
        gap: 8px;
        padding: 12px 5px;
      }

      #banner-countdown {
        margin-left: 0;
      }
    }

    /* OPTION 1 : Bandeau Noël Compact */
    .promo-banner {
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center;
      gap: 6px !important;
      padding: 6px 5px !important;
      font-size: 13px !important;
      line-height: 1.3;
    }

    /* Ajustement des éléments internes pour le mobile */
    .promo-badge {
      font-size: 12px !important;
      padding: 2px 6px !important;
    }

    .banner-timer {
      font-size: 12px !important;
      padding: 2px 6px !important;
      margin-left: 0 !important;
    }

    #banner-countdown {
      margin-left: 0;
    }

    /* --- FIN DE L'AJOUT --- */

    /* Grille principale : sidebar fixe + contenu défilant */
    .layout {
      display: grid;
      grid-template-columns: var(--sidebar) 1fr;
      gap: 0
    }

    .sidebar {
      position: sticky;
      top: 0;
      align-self: start;
      height: 100dvh;
      background: #fff;
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .micro {
      position: absolute;
      top: 10px;
      left: 16px;
      font-size: 13px;
      letter-spacing: .12em;
      text-transform: lowercase;
      color: #8b8582;
      display: flex;
      gap: 18px;
    }

    .micro a {
      opacity: .85
    }

    .micro a:hover {
      color: var(--violet)
    }

    .brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-bottom: 36px
    }

    .brand img {
      width: 120px;
      height: 120px;
      object-fit: contain
    }

    .brand strong {
      font-weight: 700;
      letter-spacing: .02em;
      color: #3a3533;
      text-align: center;
      /* centrage horizontal du texte */
      display: block;
      /* garantit que le centrage prend toute la largeur dispo */
    }

    .vnav {
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: center;
      margin-top: 6px
    }

    .vnav a {
      letter-spacing: .18em;
      font-size: 15px;
      color: #3c3734
    }

    .vnav a:nth-child(3) {
      /* Ciblage du 3ème lien, qui sera le nouveau "SÉANCES" */
    }

    .vnav a:hover {
      color: var(--violet)
    }

    /* Barre sociale verticale droite (desktop) */
    .social {
      position: fixed;
      right: 8px;
      bottom: 60px;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      letter-spacing: .26em;
      font-size: 12px;
      color: #a6a1a0;
      z-index: 10;
    }

    .social a {
      display: inline-block;
      margin: 6px 0;
      opacity: .85
    }

    .social a:hover {
      color: var(--violet)
    }

    /* --- NOUVEAU : MENU MOBILE (caché par défaut / hors-canvas) --- */
    #mobile-menu {
      position: fixed;
      top: 0;
      right: 0;
      width: 280px;
      height: 100vh;
      background-color: var(--bg);
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15);
      transform: translateX(100%);
      transition: transform 0.3s ease-in-out;
      z-index: 1001;
      /* Au-dessus du header sticky */
      padding-top: 60px;
    }

    #mobile-menu.is-active {
      transform: translateX(0);
    }

    #mobile-menu a {
      display: block;
      padding: 15px 30px;
      font-size: 1.1rem;
      color: var(--text);
      border-bottom: 1px solid var(--line);
    }

    #mobile-menu a:hover {
      background-color: #f8f5ff;
      color: var(--violet);
    }

    .close-menu-btn {
      position: absolute;
      top: 15px;
      right: 25px;
      background: transparent;
      border: none;
      font-size: 2.5rem;
      font-weight: 300;
      color: var(--text);
      cursor: pointer;
      padding: 0;
      line-height: 1;
      transition: color 0.2s;
    }

    /* Mood Slider Mobile */
    .mobile-mood-wrapper {
      padding: 20px 30px;
      border-bottom: 1px solid var(--line);
    }

    .mobile-mood-label {
      font-size: 12px;
      text-transform: uppercase;
      color: #888;
      margin-bottom: 10px;
    }


    .close-menu-btn:hover {
      color: var(--violet);
    }

    /* Sections et typographies */
    h1,
    h2,
    h3 {
      font-family: "Cormorant Garamond", serif;
      letter-spacing: .01em;
      margin: 0
    }

    .kicker {
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 12px;
      color: #7f7a78;
      margin-bottom: 6px
    }

    .hero {
      padding: 22px 0 0
    }

    .hero .frame {
      max-width: calc(var(--max) + 56px);
      margin: 0 auto;
      border-radius: 14px;
      overflow: hidden
    }

    .hero img {
      width: 100%;
      height: min(72vh, 860px);
      object-fit: cover
    }

    /* === HERO SLIDER minimal, accessible === */
    .hero .frame {
      position: relative
    }

    .slider {
      position: relative;
      height: min(72vh, 860px);
      background: #000
    }

    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .6s ease
    }

    .slide.active {
      opacity: 1
    }

    .slide picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .82);
      padding: 10px 12px;
      border-radius: 12px;
      font-weight: 700;
      cursor: pointer;
      z-index: 5
    }

    .slider-btn:hover {
      background: #fff
    }

    .slider-btn.prev {
      left: 12px
    }

    .slider-btn.next {
      right: 12px
    }

    .slider-dots {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 12px;
      display: flex;
      gap: 8px;
      z-index: 5;
      max-width: calc(100% - 96px);
      overflow-x: auto;
      padding: 3px 2px;
      scrollbar-width: none;
    }

    .slider-dots::-webkit-scrollbar {
      display: none;
    }

    .slider-dots button {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .8);
      background: rgba(255, 255, 255, .6);
      padding: 0;
      cursor: pointer
    }

    .slider-dots button.active {
      background: #fff
    }

    .lead {
      padding: 76px 0 56px
    }

    .lead .wrap {
      max-width: 980px
    }

    .lead p {
      color: #000 !important;
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(22px, 2.4vw, 28px);
      line-height: 1.5;
      color: #6b5f5b;
      text-align: center;
      margin: 16px 0;
    }

    .newsletter {
      padding: 18px 0 90px
    }

    .newsbox {
      background: #FFF3EE;
      border: 1px solid #fde6dd;
      border-radius: 16px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: center;
    }

    .newsbox h3 {
      font-size: clamp(22px, 2.2vw, 28px);
      color: #2f2a28;
      text-align: center;
      margin: 0
    }

    .newsbox .row {
      display: flex;
      gap: 10px;
      width: min(560px, 100%)
    }

    .input {
      flex: 1;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 16px;
      background: #fff
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      padding: 12px 16px;
      font-weight: 700;
      border: 1px solid transparent;
      cursor: pointer;
      transition: .18s
    }

    .btn-primary {
      background: var(--violet);
      color: #fff
    }

    .btn-primary:hover {
      background: var(--violet-dark)
    }

    .btn-ghost {
      border-color: var(--violet);
      color: var(--violet);
      background: #fff
    }

    .btn-ghost:hover {
      background: var(--soft)
    }

    .btn-accent {
      background: var(--orange);
      color: #fff
    }

    .btn-accent:hover {
      filter: brightness(.95)
    }

    /* Feature 2 colonnes */
    section {
      padding: 60px 0
    }

    .feature .wrap {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 28px;
      align-items: center
    }

    .feature .img {
      border-radius: 14px;
      overflow: hidden
    }

    .feature h2 {
      font-size: clamp(28px, 3vw, 38px);
      margin-bottom: 10px;
      color: #2c2a29
    }

    .meta {
      letter-spacing: .16em;
      font-size: 12px;
      color: #7f7a78;
      text-transform: uppercase;
      margin-bottom: 10px
    }

    .feature p {
      color: #5f5956;
      line-height: 1.7
    }

    .actions {
      display: flex;
      gap: 10px;
      margin-top: 12px
    }

    /* --- STYLES POUR LES NOUVELLES SECTIONS PROMOTIONNELLES --- */
    .prop-section {
      width: 100%;
      padding: 60px 28px;
      box-sizing: border-box;
    }

    .prop-section h2 {
      font-size: clamp(32px, 5vw, 52px);
      line-height: 1.1;
      margin: 10px 0 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .prop-section h2 .date {
      font-size: 0.6em;
      font-weight: 400;
    }

    .prop-section .countdown {
      font-size: clamp(18px, 3vw, 22px);
      font-weight: 700;
      background: rgba(232, 100, 14, 0.4);
      /* Fond orange translucide */
      padding: 10px 20px;
      border-radius: 12px;
      margin-top: 25px;
      display: inline-block;
    }

    .prop-section .btn-text-link {
      background: none;
      border: none;
      padding: 0;
      color: white;
      font-family: Inter, system-ui, sans-serif;
      font-weight: 700;
      font-size: 16px;
      text-decoration: none;
      cursor: pointer;
      margin-top: 25px;
      opacity: 0.9;
      transition: opacity .2s ease;
    }

    .prop-section .btn-text-link:hover {
      opacity: 1;
      text-decoration: underline;
    }

    .btn-urgent {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(25, 20, 35, 0.3);
      border: 2px solid #b99d87;
      /* Couleur de la bordure extérieure */
      border-radius: 999px;
      padding: 12px 24px;
      color: white;
      font-weight: 700;
      font-size: clamp(14px, 2vw, 16px);
      text-decoration: none;
      margin-top: 25px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
      /* Ligne blanche intérieure */
      transition: background 0.2s, transform 0.2s;
    }

    .btn-urgent:hover {
      background: rgba(25, 20, 35, 0.5);
      transform: scale(1.02);
    }

    .prop-section .reviews-container {
      margin-top: 25px;
      min-height: 50px;
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(17px, 2.2vw, 20px);
      font-style: italic;
      max-width: 550px;
      position: relative;
    }

    .prop-section .review-text.is-animating {
      animation: blurryFade 6s ease-in-out forwards;
    }

    @keyframes blurryFade {
      0% {
        opacity: 0;
        filter: blur(8px);
      }

      25% {
        opacity: 1;
        filter: blur(0);
      }

      /* Apparition */
      75% {
        opacity: 1;
        filter: blur(0);
      }

      /* Maintien */
      100% {
        opacity: 0;
        filter: blur(8px);
      }

      /* Disparition */
    }

    .prop-fullscreen {
      position: relative;
      height: 100vh;
      min-height: 650px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
      overflow: hidden;
      padding-top: 0;
      padding-bottom: 0;
    }

    .prop-fullscreen .video-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    .prop-fullscreen::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
      z-index: 2;
    }

    .prop-fullscreen .content-wrap {
      position: relative;
      z-index: 3;
      max-width: 700px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .prop-fullscreen .sy-story-fade-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: syStoryTextFade 12s ease-in-out infinite;
    }

    @keyframes syStoryTextFade {
      0% { opacity: 0; }
      18% { opacity: 1; }
      70% { opacity: 1; }
      92%, 100% { opacity: 0; }
    }

    .prop-fullscreen .kicker {
      color: rgba(255, 255, 255, 0.85);
    }

    .prop-fullscreen .sound-control {
      position: absolute;
      bottom: 20px;
      right: 20px;
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid white;
      color: white;
      border-radius: 50%;
      width: 45px;
      height: 45px;
      cursor: pointer;
      z-index: 4;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .prop-split {
      background: var(--soft, #FAF7FF);
    }

    .prop-split .split-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      max-width: var(--max, 1140px);
      margin: 0 auto;
    }

    .prop-split .video-column {
      border-radius: 16px;
      overflow: hidden;
      aspect-ratio: 9/16;
      background-color: #000;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    }

    .prop-split .video-column video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .prop-split .text-column {
      text-align: left;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .prop-split .text-column h2 {
      align-items: flex-start;
    }

    .prop-split .btn-text-link {
      color: var(--violet, #6C3BB8);
    }

    .prop-split .reviews-container {
      color: var(--muted, #6b6663);
    }

    /* --- FIN DES STYLES POUR LES NOUVELLES SECTIONS --- */

    /* ===============================
       PARTENAIRES (bande + grille + spotlight)
    ================================*/
    .partners {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 76px 0 70px;
    }

    .partners .kicker {
      text-align: center;
    }

    .partners h2 {
      font-size: clamp(26px, 2.6vw, 34px);
      color: var(--violet);
      text-align: center;
      margin: 0 0 28px
    }

    .partners {
      position: relative;
      z-index: 25;
      /* Garantit que la section s'affiche correctement après l'animation de scroll */
    }

    /* Spotlight : 3 logos aléatoires qui tournent */
    .logo-spotlight {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin: 0 0 22px
    }

    @media (max-width: 720px) {
      .logo-spotlight {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px
      }
    }

    /* Cartes “glass white” + micro-interactions (C & E) */
    .logo-card {
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: 16px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
      padding: 16px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .logo-card img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: transform .18s ease, filter .18s ease, opacity .18s ease;
      filter: grayscale(.28);
      opacity: .96
    }

    .logo-card:hover img {
      transform: translateY(-2px);
      filter: none;
      opacity: 1
    }

    /* ===============================
       AVIS (style Google + saisie)
    ================================*/
    .reviews {
      padding: 76px 0
    }

    .reviews .kicker {
      text-align: center;
    }

    .reviews h2 {
      font-size: clamp(26px, 2.6vw, 34px);
      color: var(--violet);
      text-align: center;
      margin: 0 0 22px
    }

    .gcard {
      max-width: 820px;
      margin: 0 auto;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: 16px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
      padding: 18px 18px 20px;
    }

    .ghead {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px
    }

    .gavatar {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      overflow: hidden;
      flex: 0 0 auto;
      background: #f2f2f2
    }

    .gavatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .gwho {
      display: flex;
      flex-direction: column;
      line-height: 1.1
    }

    .gwho .name {
      font-weight: 700
    }

    .gwho .meta {
      font-size: 12px;
      color: #7f7a78
    }

    .gstars {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 6px 0 6px
    }

    .gstars svg {
      width: 18px;
      height: 18px
    }

    .gtext {
      font-size: 15px;
      line-height: 1.6;
      color: #463f3c;
      min-height: 120px;
      position: relative;
      white-space: pre-wrap
    }

    .caret::after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.05em;
      background: #6C3BB8;
      margin-left: 2px;
      animation: blink 1s steps(1, end) infinite;
      vertical-align: -.1em
    }

    @keyframes blink {
      50% {
        opacity: 0
      }
    }

    .gfoot {
      display: flex;
      gap: 10px;
      align-items: center;
      color: #7f7a78;
      font-size: 12px;
      margin-top: 8px
    }

    .gfoot .source {
      margin-left: auto
    }

    /* ===============================
       ENGAGEMENTS (split texte + vidéo)
    ================================*/
    .engagements {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 76px 0 80px;
    }

    .eng-wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 28px;
      display: grid;
      gap: 28px;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
    }

    @media (max-width: 992px) {
      .eng-wrap {
        grid-template-columns: 1fr;
      }
    }

    .eng .kicker {
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 12px;
      color: #7f7a78;
      margin-bottom: 6px
    }

    .eng h2 {
      font-size: clamp(26px, 2.6vw, 34px);
      color: var(--violet);
      margin: 0 0 10px
    }

    .eng .baseline {
      color: #5f5956;
      margin: 0 0 14px
    }

    .pillars {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px
    }

    .pillars li {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: 14px;
      padding: 10px 12px;
      line-height: 1.5
    }

    .pillars b {
      color: #2f2a28
    }

    .eng .actions {
      margin-top: 14px
    }

    /* Vidéo : cadre + crossfade + “crop” anti bandes noires */
    .eng-video {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
      background: #000;
      aspect-ratio: 4/3;
    }

    .engv {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: var(--pos, 50% 50%);
      transform: scale(var(--zoom, 1.15));
      opacity: 0;
      transition: opacity .35s ease;
    }

    .engv.current {
      opacity: 1
    }

    .engv.show {
      opacity: 1
    }

    .eng-video .sound {
      position: absolute;
      right: 10px;
      bottom: 10px;
      z-index: 3;
      border: 1px solid rgba(0, 0, 0, .08);
      background: #fff;
      border-radius: 999px;
      padding: 8px 10px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    }

    /* Accessibilité masquée visuellement */
    .sr-only {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0
    }

    /* ===============================
       PLANNING (Wix -> iFrame responsive + auto-height + consent)
    ================================*/
    .schedule {
      padding: 76px 0;
    }

    .schedule .wrap {
      max-width: var(--max, 1200px);
      margin: 0 auto;
      padding: 0 20px;
    }

    .schedule .kicker {
      text-align: center;
    }

    .schedule h2 {
      font-size: clamp(26px, 2.9vw, 36px);
      color: var(--violet);
      text-align: center;
      margin: 0 0 18px;
    }

    .schedule .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 10px 0 14px;
      flex-wrap: wrap;
    }

    .schedule .toolbar .sp {
      flex: 1;
    }

    .schedule .toolbar .btn {
      border: 1px solid var(--line);
      background: #fff;
      padding: 8px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
    }

    .schedule .range {
      font-weight: 700;
    }

    .schedule .timeline {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 16px;
    }

    .schedule .week {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0;
      background: #fff;
      padding: 0;
    }

    .schedule .day {
      border-right: 1px solid var(--line);
      background: #fff;
      display: flex;
      flex-direction: column;
      min-height: 400px;
    }

    .schedule .day:last-child {
      border-right: none;
    }

    .schedule .day .head {
      display: flex;
      justify-content: space-between;
      padding: 10px 12px;
      color: #7f7a78;
      border-bottom: 1px solid var(--line);
    }

    .schedule .slots {
      padding: 12px;
      display: grid;
      gap: 10px;
      align-content: start;
      flex: 1;
    }

    .schedule .slot {
      border-radius: 12px;
      padding: 10px;
      border: 1px dashed #ececec;
    }

    .schedule .slot .when {
      font-weight: 700;
      font-size: 13px;
      color: #4a4745;
    }

    .schedule .slot .name {
      font-weight: 700;
      margin-top: 2px;
    }

    .schedule .slot .meta {
      color: #7f7a78;
      font-size: 12px;
      margin-top: 2px;
    }

    .schedule .slot .cta {
      margin-top: 8px;
    }

    .schedule .slot .cta a {
      display: inline-block;
      border: 1px solid var(--line);
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 12px;
      text-decoration: none;
      color: #222;
      background: #fff;
    }

    .schedule .mv {
      background: var(--mv);
    }

    .schedule .rp {
      background: var(--rp);
    }

    .schedule .sn {
      background: var(--sn);
    }

    .schedule .cg {
      background: var(--cg);
    }

    .schedule .si {
      background: var(--si);
    }

    .schedule .empty {
      color: #9a948f;
      font-size: 13px;
      padding: 10px;
    }

    .events .wrap {
      max-width: var(--max)
    }

    .events h2 {
      font-size: clamp(28px, 3vw, 38px);
      margin-bottom: 18px;
      color: #2c2a29
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    .card {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .thumb {
      position: relative;
      border-radius: 14px;
      overflow: hidden
    }

    .thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04)
    }

    .thumb img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      transition: transform .2s
    }

    .card:hover .thumb img {
      transform: scale(1.02)
    }

    .badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: var(--badge-rose);
      color: #4a3f3b;
      padding: 6px 10px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .04em;
      border: 1px solid rgba(0, 0, 0, .05)
    }

    .title {
      font-family: "Cormorant Garamond", serif;
      font-size: 20px;
      color: #2f2a28
    }

    .dates {
      font-size: 13px;
      color: #8a8481
    }

    .link {
      font-weight: 700;
      font-size: 14px;
      color: #3f3a37
    }

    .link:hover {
      color: var(--violet)
    }

    /* ===============================
       Structure B — Parcours guidé (T7 • Split photo à gauche)
    ================================*/
    .b-section {
      padding: 76px 0;
      border-top: 1px solid var(--line);
    }

    .b-section .kicker {
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 12px;
      color: #7f7a78;
      margin-bottom: 6px
    }

    .b-section h2 {
      font-size: clamp(26px, 2.6vw, 34px);
      color: var(--violet);
      margin: 0 0 16px
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0 16px
    }

    .chip {
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-weight: 700;
      font-size: 13px;
      background: #fff;
      cursor: pointer
    }

    .chip.active {
      background: var(--soft);
      border-color: #e7d9ff;
      color: var(--violet-dark)
    }

    .b-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px
    }

    .b-card {
      display: grid;
      grid-template-columns: 140px 1fr;
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .04)
    }

    .b-photo {
      background-size: cover;
      background-position: center
    }

    .b-cnt {
      padding: 16px
    }

    .b-cnt h3 {
      margin: .2rem 0 .2rem;
      font-size: 20px;
      font-family: "Cormorant Garamond", serif;
      color: #2f2a28
    }

    .b-meta {
      font-size: 12px;
      color: #7f7a78
    }

    .b-sub {
      color: #6b6663
    }

    /* ===============================
       ÉQUIPE — Bio + Reels + Timeline
    ================================*/
    .team {
      padding: 76px 0;
      border-top: 1px solid var(--line);
    }

    .team .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 28px
    }

    .team h2 {
      font-size: clamp(26px, 2.6vw, 34px);
      color: var(--violet);
      margin: 0 0 14px
    }

    .team-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 28px;
      align-items: start;
      margin-bottom: 28px
    }

    .vcard {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: 16px;
      padding: 18px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
    }

    .vhead {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 6px
    }

    .vhead img {
      width: 56px;
      height: 56px;
      border-radius: 999px;
      object-fit: cover
    }

    .vname {
      font-weight: 800
    }

    .vquote {
      font-family: "Cormorant Garamond", serif;
      color: #6b5f5b;
      font-size: 18px;
    }

    .vmeta {
      color: #7f7a78;
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-top: 10px
    }

    .vcard p {
      color: #5f5956;
      line-height: 1.7
    }

    .vactions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px
    }

    .btn {
      display: inline-block;
      border-radius: 12px;
      padding: 10px 14px;
      font-weight: 800;
      text-decoration: none
    }

    /* Reels */
    .reel {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: #000;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
      aspect-ratio: 9/16
    }

    .reel video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .cap {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      color: #fff;
      padding: 10px 12px;
      border-radius: 10px;
      font-weight: 800;
      line-height: 1.35;
      min-height: 40px;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    }

    .type-caret::after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.05em;
      background: #fff;
      margin-left: 2px;
      animation: blink 1s steps(1, end) infinite;
      vertical-align: -.1em
    }

    /* Timeline minimaliste (Variante B) */
    .timeline {
      border-left: 2px dashed #e5e0f6;
      margin: 14px 0 2px;
      padding-left: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .t-item {
      position: relative;
      padding-left: 4px
    }

    .t-item::before {
      content: "";
      position: absolute;
      left: -18px;
      top: 2px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #dcd4ff;
      border: 2px solid #bca8ff
    }

    .t-line {
      font-weight: 800;
      font-size: 13px;
      margin-bottom: 2px
    }

    .t-sub {
      color: #7a7571;
      font-size: 13px
    }

    @media (max-width: 992px) {
      .team-grid {
        grid-template-columns: 1fr
      }

      .reel {
        aspect-ratio: 16/9
      }
    }

    /* Footer minimal */
    footer {
      border-top: 1px solid var(--line);
      padding: 28px 0 48px;
      color: #6b6663
    }

    .foot {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 22px
    }

    .foot h4 {
      margin: .2rem 0 .6rem;
      color: #3b3633;
      font-family: "Cormorant Garamond", serif;
      font-size: 22px
    }

    /* Responsive */
    .schedule-mobile-image {
      display: none;
      /* Masqué par défaut sur grand écran */
      margin: 20px auto;
      max-width: 554px;
    }

    .schedule-mobile-image img {
      width: 100%;
      height: auto;
      border-radius: 16px;
      border: 1px solid var(--line);
    }

    @media (max-width:1200px) {
      .layout {
        grid-template-columns: 260px 1fr
      }
    }

    @media (max-width:1024px) {
      .layout {
        grid-template-columns: 1fr
      }

      #mobile-menu {
        top: calc(var(--sy-mobile-banner-height, 66px) + 72px);
        height: calc(100vh - var(--sy-mobile-banner-height, 66px) - 72px);
        z-index: 9600;
      }

      /* Le bandeau promo reste au sommet de l'écran, au-dessus du menu mobile. */
      .sy-random-banner {
        position: sticky;
        top: 0;
        z-index: 9700;
      }

      /* Sidebar => header fixe juste sous le bandeau promo sur mobile */
      .sidebar {
        position: fixed;
        top: var(--sy-mobile-banner-height, 66px);
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9500;
        height: 72px;
        /* hauteur fixe pour header mobile */
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 0 18px;
        flex-direction: row;
        /* alignement horizontal */
        justify-content: space-between;
        /* logo à gauche, burger à droite */
        align-items: center;
      }

      /* Header mobile auto-masqué au scroll vers le bas, réaffiché au scroll vers le haut. */
      .sidebar {
        transition: transform .28s ease, top .2s ease;
        will-change: transform;
      }

      .sidebar.sy-mobile-header-hidden {
        transform: translateY(calc(-100% - var(--sy-mobile-banner-height, 66px)));
      }

      /* éviter que le header recouvre le contenu */
      main {
        padding-top: 72px;
      }

      .sidebar .brand {
        flex-direction: row;
        justify-content: flex-start;
        margin: 0;
        gap: 15px;
      }

      .sidebar .brand img {
        width: 50px;
        height: 50px;
      }

      /* MODIFICATION POUR LE TITRE MOBILE */
      .brand strong {
        display: block;
        /* On affiche le texte */
        position: absolute;
        /* On le sort du flux pour le centrer */
        left: 50%;
        /* On le place à 50% du bord gauche */
        top: 50%;
        /* On le place à 50% du bord haut */
        transform: translate(-50%, -50%);
        /* On le centre parfaitement */
        white-space: nowrap;
        /* On évite que le texte revienne à la ligne */
        font-size: 14px;
        /* On ajuste la taille pour les petits écrans */
      }

      .vnav {
        display: none;
      }

      /* menu desktop masqué en mobile */
      .social {
        display: none !important;
      }

      .hero .frame {
        border-radius: 0;
      }

      .feature .wrap {
        grid-template-columns: 1fr;
        gap: 18px
      }

      .grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .schedule-desktop {
        display: none;
      }

      .schedule-mobile-image {
        display: block;
      }

      .micro {
        display: none;
      }

      /* cache le "réserver" en haut à gauche en mobile */

      /* Burger mobile : 3 barres + animation en X */
      .burger {
        display: flex;
        /* <--- MODIFICATION IMPORTANTE : on le rend visible sur mobile */
        flex-direction: column;
        justify-content: space-around;
        position: static;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 1;
        /* S'assurer qu'il est cliquable devant le titre */
      }

      .burger div {
        width: 30px;
        height: 3px;
        background: var(--violet);
        border-radius: 10px;
        transition: all 0.3s linear;
        position: relative;
        transform-origin: 1px;
      }

      .burger.is-active div:nth-child(1) {
        transform: rotate(45deg);
      }

      .burger.is-active div:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
      }

      .burger.is-active div:nth-child(3) {
        transform: rotate(-45deg);
      }
    }

    @media (max-width:640px) {
      .grid {
        grid-template-columns: 1fr
      }

      .lead {
        padding: 56px 0 36px
      }

      .newsletter {
        padding: 8px 0 64px
      }

      .newsbox .row {
        flex-direction: column
      }
    }

    /* Burger */
    /* LA LIGNE SUIVANTE EST LA CAUSE DU PROBLÈME, NOUS LA DÉSACTIVONS */
    /* .burger{ display: none; } */

    .drawer a {
      display: block;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line)
    }

    .drawer a:hover {
      background: var(--soft);
      color: var(--violet)
    }

    /* ===============================
       STORYTELLING AU SCROLL
    ================================*/
    .story-container {
      height: 2200vh;
      /* Ajusté pour 22 sections */
      position: relative;
      perspective: 1000px;
    }

    .story-section {
      height: 100vh;
      width: 100%;
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      /* empile le bouton SOUS le texte */
      justify-content: center;
      align-items: center;
      gap: 1.2rem;
      /* espace entre <h1> et le bouton */
      text-align: center;
      padding: 2rem;
      z-index: 20;
      /* au-dessus du contenu principal */
      /* Ne PAS bloquer les clics au niveau de la section */
      /* pointer-events: none; */
      pointer-events: none;

    }

    .story-section:nth-child(odd) {
      background-color: var(--violet);
    }

    .story-section:nth-child(even) {
      background-color: var(--orange);
    }

    .story-section h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 7vw, 5.5rem);
      line-height: 1.2;
      max-width: 1100px;
      margin: 0;
      color: #f0f0f0;
      text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
      transform-origin: center;
    }

    .input-group {
      margin-top: 1.5rem;
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .email-input {
      font-size: 1.2rem;
      padding: 0.8rem 1.2rem;
      border-radius: 50px;
      border: 2px solid white;
      background: rgba(255, 255, 255, 0.2);
      color: white;
      width: 100%;
      max-width: 350px;
    }

    .email-input::placeholder {
      color: rgba(255, 255, 255, 0.7);
    }

    .submit-btn {
      font-size: 1.2rem;
      padding: 0.8rem 1.5rem;
      border-radius: 50px;
      border: none;
      background: white;
      color: var(--violet);
      font-weight: 700;
      cursor: pointer;
    }

    .promo-code {
      display: inline-block;
      background: rgba(255, 255, 255, 0.15);
      padding: 0.5rem 1.5rem;
      border-radius: 12px;
      border: 2px dashed white;
      margin-top: 1rem;
    }

    .small-text {
      font-size: 1.5rem;
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      margin-top: 1rem;
      display: block;
    }

    .scroll-indicator {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-size: 0.9rem;
      animation: fade-in-out 3s infinite;
      z-index: 100;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
      pointer-events: none;
      /* Ne bloque plus les clics sur les boutons derrière */
    }

    /* === FIX CLICS STORYTELLING : On réactive les clics UNIQUEMENT sur les contenus interactifs === */
    .story-section a,
    .story-section button,
    .story-section input,
    .story-section select,
    .story-section iframe,
    .story-section .promo-code,
    .story-section .small-text,
    #game-block,
    #handpan-block,
    #video-block {
      pointer-events: auto;
      /* Ces éléments et leurs enfants peuvent être cliqués */


      .scroll-indicator span {
        display: block;
        margin-top: 5px;
        font-size: 1.5rem;
      }

      @keyframes fade-in-out {

        0%,
        100% {
          opacity: 0;
        }

        50% {
          opacity: 1;
        }
      }

      /* Centrer les boutons sous le texte dans le storytelling */
      .story-section .input-group {
        margin-top: 1.5rem;
        display: flex;
        justify-content: center;
        /* centre horizontalement le bouton */
        align-items: center;
      }


      /* Corrige la taille de la vidéo #video-3 uniquement sur mobile */
      @media (max-width: 768px) {
        #prop-split-1 .split-wrap {
          grid-template-columns: 1fr !important;
          /* une seule colonne */
        }

        #prop-split-1 .video-column {
          aspect-ratio: 16/9 !important;
          /* vidéo plus large */
          width: 100% !important;
          max-height: 300px;
          /* optionnel : évite qu’elle soit trop haute */
        }

        #prop-split-1 .video-column video {
          width: 100% !important;
          height: 100% !important;
          object-fit: cover !important;
        }
      }

      /* === FIX CLICS DANS LE STORYTELLING ===
       Idée : certains calques (fonds/vidéos) interceptent les événements.
       On désactive les events sur les éléments décoratifs et on réactive
       explicitement sur les éléments interactifs. On force aussi un z-index
       local pour s'assurer que les liens passent au-dessus.
    */
      /* 1) Par défaut, le fond vidéo/décor ne capte pas les clics */
      .story-section video,
      .story-section .bg,
      .story-section::before,
      .story-section::after {
        pointer-events: none;
        z-index: 21;
      }

      /* 2) Les éléments interactifs captent les clics */
      .story-section a,
      .story-section button,
      .story-section input,
      .story-section select,
      .story-section textarea,
      .story-section h1,
      /* Répété pour s'assurer que le contenu est cliquable */
      #game-block,
      #handpan-block,
      #video-block {
        pointer-events: auto;
        position: relative;
        z-index: 25;
        /* au-dessus d’un éventuel décor */
      }

      /* 3) Cas fréquent : un wrapper de contenu central */
      .story-section .content,
      .story-section .content-wrap {
        position: relative;
        z-index: 24;
        /* Au-dessus du fond, en dessous des boutons */
      }

      /* === CSS HANDPAN (STYLE ORIGINAL SIMPLE) === */
      #handpan-block {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        isolation: isolate;
      }

      #hp-stage {
        position: relative;
        width: min(380px, 90vw);
        height: min(380px, 90vw);
        border-radius: 50%;
        background: radial-gradient(circle at 50% 50%, #1c222d 0%, #0a0c10 100%);
        box-shadow: 0 20px 50px rgba(0, 0, 0, .4), inset 0 12px 40px rgba(255, 255, 255, .06);
        border: 4px solid #3a4050;
        overflow: hidden;
        touch-action: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box !important;
      }

      .hp-brand-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgba(255, 255, 255, 0.1);
        font-weight: 700;
        font-size: 24px;
        pointer-events: none;
        z-index: 0;
        font-family: 'Inter', sans-serif !important;
      }

      .hp-zone {
        position: absolute;
        /* ANCRAGE PAR LE CENTRE */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.75);
        font-weight: 600;
        font-family: 'Inter', sans-serif;
        cursor: pointer;
        user-select: none;
        z-index: 10;
        /* Transition limitée au scale et couleur pour éviter la glisse */
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, border-color 0.2s ease;
        box-sizing: border-box;
      }

      .hp-zone:active,
      .hp-zone.active {
        background: rgba(75, 137, 220, 0.3);
        /* MAINTENANCE DU TRANSLATE PENDANT LE SCALE */
        transform: translate(-50%, -50%) scale(0.92);
        border-color: #4b89dc;
        box-shadow: 0 0 20px rgba(75, 137, 220, 0.3);
      }

      .hp-ding {
        background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
      }

      .note-label {
        font-family: monospace;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.6);
        pointer-events: none;
      }
  </style>


  <style>
    .more-text {
      display: none;
      /* Caché par défaut */
    }

    .read-more-btn {
      background: none;
      border: none;
      color: var(--violet);
      /* violet de ta charte */
      font-weight: 600;
      cursor: pointer;
      margin-top: 8px;
      padding: 0;
    }

    .read-more-btn:hover {
      text-decoration: underline;
    }

    /* --- STYLES POUR LA NOUVELLE GALERIE PHOTO --- */
    .photo-gallery .gallery-wrapper {
      position: relative;
      width: 100%;
      padding: 0 15%;
      /* Laisse de l'espace pour les images latérales */
      user-select: none;
    }

    .photo-gallery .gallery-container {
      position: relative;
      aspect-ratio: 4 / 5;
      max-width: 500px;
      margin: auto;
      overflow: hidden;
      border-radius: 16px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      /* Indique que l'image centrale est cliquable */
    }

    .photo-gallery .gallery-track {
      display: flex;
      height: 100%;
      transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    }

    .photo-gallery .gallery-item {
      flex: 0 0 100%;
      height: 100%;
    }

    .photo-gallery .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .photo-gallery .gallery-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 2rem 1rem 1rem;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
      color: white;
      text-align: center;
      font-weight: 700;
      border-radius: 0 0 16px 16px;
      transition: opacity 0.3s;
    }

    .photo-gallery .gallery-side {
      position: absolute;
      top: 0;
      height: 100%;
      width: 15%;
      z-index: 10;
      cursor: pointer;
      background-size: cover;
      background-position: center;
      filter: blur(8px) grayscale(50%);
      opacity: 0.8;
      transform: scale(0.9);
      transition: transform 0.3s, opacity 0.3s;
    }

    .photo-gallery .gallery-side:hover {
      opacity: 1;
      transform: scale(0.95);
    }

    .photo-gallery .gallery-side.prev {
      left: 0;
    }

    .photo-gallery .gallery-side.next {
      right: 0;
    }

    /* ====================================================== */
    /*          STYLES POUR LE MINI-JEU FINAL                 */
    /* ====================================================== */

    #fun-slot #game-block,
    #fun-slot #handpan-block {
      display: none;
    }

    /* Quand la classe 'show-game' est posée, on inverse : on montre le jeu et on masque la vidéo */
    #fun-slot.show-game #game-block {
      display: block;
    }

    #fun-slot.show-game #video-block {
      display: none;
    }

    #fun-slot.show-handpan #handpan-block {
      display: block;
    }

    #fun-slot.show-handpan #video-block {
      display: none;
    }

    /* Optionnel : petite sécurité si un style inline traîne encore quelque part */
    #video-block[style*="display:none"] {
      display: block !important;
    }

    #footer-alt-video {
      width: 100%;
      max-width: 560px;
      height: auto;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    }


    #mini-game-arena {
      position: relative;
      /* Indispensable pour positionner les objets à l'intérieur */
      width: 100%;
      max-width: 450px;
      height: 220px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      margin: 1rem auto 0;
      overflow: hidden;
      /* Empêche les objets de déborder */
    }

    .game-object {
      position: absolute;
      display: block;
      cursor: pointer;
      will-change: transform;
      /* Optimisation pour l'animation */
      transition: opacity 0.3s ease;
      /* Pour une disparition en douceur */

      /* On applique l'animation ici */
      animation-name: gentle-float;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      z-index: 10;
      /* <--- AJOUTEZ CETTE LIGNE */
    }

    #game-info {
      display: flex;
      justify-content: space-between;
      max-width: 450px;
      margin: 0 auto 0.5rem;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 1.2rem;
      color: white;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    /* Style pour le gong "piégé" */
    .game-object.trap {
      /* Cette combinaison de filtres le rendra rouge vif */
      filter: hue-rotate(320deg) saturate(5) brightness(1.1);
    }

    /* On ajoute un état "paused" pour l'animation */
    .game-object.paused {
      animation-play-state: paused;
    }

    /* Keyframes pour l'animation de flottement léger */
    @keyframes gentle-float {
      from {
        transform: translateY(0px) rotate(-2deg);
      }

      to {
        transform: translateY(10px) rotate(2deg);
      }
    }

    /* Ajustement storytelling sur petits téléphones */
    @media (max-width: 380px) {
      .story-section h1 {
        font-size: 1.4rem !important;
        /* plus petit titre */
        line-height: 1.3;
      }

      .story-section .small-text {
        font-size: 1rem !important;
        /* texte secondaire plus lisible */
      }
    }


    /* --- STYLES POUR LE POP-UP PROMOTIONNEL --- */
    .popup-overlay {
      display: none;
      /* Caché par défaut */
      position: fixed;
      z-index: 2000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(30, 25, 40, 0.75);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      justify-content: center;
      align-items: center;
      animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .promo-block {
      position: relative;
      background: linear-gradient(145deg, #2c2c2c, #1e1e1e);
      border-radius: 20px;
      padding: 40px;
      width: 90%;
      max-width: 700px;
      text-align: center;
      border: 1px solid #444;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      color: #f0f0f0;
      transform-origin: center;
      animation: zoomIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes zoomIn {
      from {
        transform: scale(0.8);
        opacity: 0;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .popup-close-btn {
      position: absolute;
      top: 15px;
      right: 20px;
      background: none;
      border: none;
      font-size: 36px;
      line-height: 1;
      font-weight: 300;
      color: #aaa;
      cursor: pointer;
      transition: color 0.2s, transform 0.2s;
    }

    .popup-close-btn:hover {
      color: white;
      transform: rotate(90deg);
    }

    .promo-block .promo-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.8em, 12vw, 4.5em);
      letter-spacing: 3px;
      margin: 0;
      background: linear-gradient(90deg, #ff8c00, #ff0055, #8a2be2, #ff8c00);
      background-size: 400% 400%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-flow 10s linear infinite;
    }

    @keyframes gradient-flow {
      0% {
        background-position: 0% 50%;
      }

      100% {
        background-position: 100% 50%;
      }
    }

    .promo-block .promo-subtitle {
      font-size: 1.3em;
      font-weight: 700;
      color: #ffc107;
      margin-top: 5px;
      margin-bottom: 20px;
    }

    .promo-block .promo-description {
      font-size: 1.1em;
      line-height: 1.6;
      max-width: 500px;
      margin: 0 auto 30px auto;
    }

    .promo-block #countdown-timer {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 30px;
    }

    .promo-block .timer-unit {
      background-color: rgba(0, 0, 0, 0.3);
      padding: 15px;
      border-radius: 10px;
      min-width: 80px;
    }

    .promo-block .timer-unit span {
      display: block;
    }

    .promo-block .timer-number {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 3em;
      line-height: 1;
      color: #fff;
    }

    .promo-block .timer-label {
      font-size: 0.9em;
      text-transform: uppercase;
      color: #aaa;
    }

    .promo-block #expired-message {
      font-size: 1.5em;
      font-weight: bold;
      color: #e74c3c;
    }

    .promo-block .cta-button {
      display: inline-block;
      background-color: #ffc107;
      color: #1a1a1a;
      font-size: 1.2em;
      font-weight: bold;
      padding: 15px 40px;
      border-radius: 50px;
      text-decoration: none;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .promo-block .cta-button:hover {
      transform: scale(1.05);
      background-color: #ffca2c;
    }


    /* Style pour le pop-up contenant une image */
    .promo-block.promo-block-image {
      background: none;
      border: none;
      padding: 0;
      max-width: 600px;
      /* Ajustez si nécessaire */
    }

    .promo-block-image img {
      width: 100%;
      border-radius: 16px;
      /* Garde les coins arrondis */
      display: block;
    }
  </style>
  <!-- STYLES POUR LE HANDPAN INTERACTIF -->

  <style>
    /* === CSS DU MINI-HANDPAN (Alignement & Style) === */
    #handpan-block {
      position: relative;
      width: 100%;
      display: flex !important;
      justify-content: center;
      isolation: isolate;
      margin-top: 10px;
    }

    #hp-stage {
      width: 300px;
      height: 300px;
      position: relative;
      border-radius: 50%;
      background: radial-gradient(60% 60% at 50% 45%, #343c4a 0%, #2b303b 40%, #252a35 65%, #1e232e 75%, #1a1f29 82%, #171b24 100%);
      box-shadow: 0 20px 50px rgba(0, 0, 0, .4), inset 0 12px 40px rgba(255, 255, 255, .06);
      border: 4px solid #3a4050;
      cursor: pointer;
    }

    .hp-zone {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: transform 0.1s;
    }

    .hp-zone:active,
    .hp-zone.active {
      background: rgba(75, 137, 220, 0.4);
      transform: scale(0.95);
      border-color: #4b89dc;
    }

    .hp-ding {
      background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    }

    /* =========================================
   STYLES PROMO NOUVELLE ANNÉE 2026
   =========================================  */

    /* 1. BANDEAU HAUT */
    .promo-banner {
      background-color: var(--violet) !important;
      background-image: linear-gradient(45deg, var(--violet) 0%, var(--violet-dark) 100%);
      position: sticky;
      top: 0;
      z-index: 9000;
      display: flex !important;
      justify-content: center;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .promo-badge {
      background: var(--orange);
      color: white;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 800;
    }

    .banner-timer {
      font-family: monospace;
      background: rgba(0, 0, 0, 0.2);
      padding: 2px 8px;
      border-radius: 4px;
      margin-left: 0 !important;
    }

    /* 2. POP-UP NOUVELLE ANNÉE */
    .ny-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(30, 20, 50, 0.85);
      backdrop-filter: blur(8px);
      z-index: 10001;
      display: none;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .ny-overlay.show {
      opacity: 1;
      display: flex;
    }

    .ny-card {
      position: relative;
      width: 90%;
      max-width: 550px;
      padding: 40px;
      border-radius: 24px;
      background: white;
      text-align: center;
      color: var(--text);
      border: 4px solid var(--violet);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
      transform: scale(0.9);
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .ny-overlay.show .ny-card {
      transform: scale(1);
    }

    .ny-close {
      position: absolute;
      top: 15px;
      right: 20px;
      background: none;
      border: none;
      color: var(--muted);
      font-size: 32px;
      cursor: pointer;
      line-height: 1;
    }

    .ny-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(32px, 5vw, 42px);
      margin: 0;
      color: var(--violet);
      font-weight: 700;
    }

    .ny-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      color: var(--muted);
      margin: 10px 0 25px;
      line-height: 1.5;
    }

    .ny-card {
      position: relative;
      width: 90%;
      max-width: 550px;
      padding: 40px;
      border-radius: 24px;
      background: white;
      text-align: center;
      color: var(--text);
      border: 4px solid var(--violet);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
      transform: scale(0.9);
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .ny-overlay.show .ny-card {
      transform: scale(1);
    }


    .ny-close {
      position: absolute;
      top: 15px;
      right: 20px;
      background: none;
      border: none;
      color: var(--muted);
      font-size: 32px;
      cursor: pointer;
      line-height: 1;
    }

    .ny-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(32px, 5vw, 42px);
      margin: 0;
      color: var(--violet);
      font-weight: 700;
    }

    .ny-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      color: var(--muted);
      margin: 10px 0 25px;
      line-height: 1.5;
    }


    .ny-offer {
      background: var(--soft);
      border: 2px dashed var(--violet);
      padding: 20px;
      border-radius: 16px;
      margin-bottom: 25px;
    }

    .ny-timer {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 20px 0;
    }

    .timer-box {
      background: var(--violet);
      padding: 10px;
      border-radius: 8px;
      min-width: 65px;
      color: white;
    }

    .timer-num {
      display: block;
      font-weight: 800;
      font-size: 24px;
    }

    .timer-label {
      font-size: 10px;
      text-transform: uppercase;
      opacity: 0.8;
    }

    .ny-btn {
      display: inline-block;
      background-color: var(--orange);
      color: white;
      font-weight: 800;
      padding: 16px 40px;
      border-radius: 50px;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: transform 0.2s, background 0.2s;
    }

    .ny-btn:hover {
      transform: scale(1.05);
      filter: brightness(1.1);
    }


    /* --- EFFET NEIGE TRÈS LENT --- */
    .snowflake {
      position: fixed;
      top: -50px;
      user-select: none;
      z-index: 10002;
      /* Au-dessus des pop-ups */
      pointer-events: none;
      color: #a5d1ff;
      /* Bleu givré pour fond blanc */
      opacity: 0.6;
      font-size: 1.2rem;
      animation: fall linear infinite;
      display: none;
      /* Cache par défaut (Plan 1) */
    }

    body.snow-active .snowflake {
      display: block;
      /* Affiche si activé */
    }

    @keyframes fall {
      0% {
        transform: translateY(0vh) translateX(0) rotate(0deg);
      }

      25% {
        transform: translateY(25vh) translateX(15px) rotate(90deg);
      }

      50% {
        transform: translateY(50vh) translateX(-15px) rotate(180deg);
      }

      75% {
        transform: translateY(75vh) translateX(15px) rotate(270deg);
      }

      100% {
        transform: translateY(105vh) translateX(0) rotate(360deg);
      }
    }
    }

    /* === DOPAMINE PLAYGROUND (Handpan + Karma) === */
    .dopamine-playground {
      background: var(--soft);
      padding: 60px 0;
      border-top: 1px solid var(--line);
      text-align: center;
    }

    .playground-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
      max-width: 900px;
      max-width: 900px;
      margin: 0 auto;
      align-items: center;
    }

    .playground-item {
      flex: 1;
      min-width: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @media (max-width: 768px) {
      .playground-grid {
        grid-template-columns: 1fr;
      }
    }

    /* HANDPAN STYLES */
    #hp-stage {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto;
      background: radial-gradient(circle at 30% 30%, #4a4e69, #22223b);
      border-radius: 50%;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="white" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="white"/></svg>') 12 12, pointer;
      touch-action: none;
      z-index: 100 !important;
      /* Force visibility */
    }

    #hp-stage::before {
      content: 'Handpan';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: rgba(255, 255, 255, 0.1);
      font-size: 30px;
      font-weight: 700;
      pointer-events: none;
    }

    .hp-zone {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      /* Centering logic matched with JS */
      transition: background 0.1s, transform 0.1s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hp-zone:active,
    .hp-zone.active {
      background: rgba(255, 255, 255, 0.4);
      transform: translate(-50%, -50%) scale(0.95);
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    }

    .hp-label {
      color: rgba(255, 255, 255, 0.7);
      font-size: 10px;
      pointer-events: none;
    }

    .hp-ding {
      background: rgba(255, 215, 0, 0.15);
      box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    /* KARMA WHEEL STYLES */
    .wheel-wrapper {
      position: relative;
      width: 250px;
      height: 250px;
      margin: 20px auto;
    }

    .wheel {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 8px solid var(--violet);
      position: relative;
      transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
      background: conic-gradient(#ffafcc 0% 25%,
          #a2d2ff 25% 50%,
          #cdb4db 50% 75%,
          #ffc8dd 75% 100%);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    .wheel-pointer {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 25px solid var(--text);
      z-index: 2;
    }

    .spin-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: none;
      background: #fff;
      font-weight: bold;
      color: var(--violet);
      cursor: pointer;
      z-index: 3;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      font-size: 14px;
    }

    .karma-result {
      min-height: 30px;
      font-weight: bold;
      color: var(--violet);
      margin-top: 15px;
      font-size: 1.2rem;
      transition: transform 0.2s;
    }
  </style>


  <!-- Bandeaux PROMO RENTRÉE : 10 propositions aléatoires -->
  <style>
    .sy-random-banner {
      position: sticky;
      top: 0;
      z-index: 9000;
      width: 100%;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      overflow: hidden;
      padding: 10px 18px;
      text-align: center;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
      box-shadow: 0 3px 14px rgba(38, 28, 48, .16);
    }

    .sy-random-banner a {
      color: inherit;
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
    }

    .sy-random-banner a:hover { text-decoration: underline; }

    .sy-banner-message {
      font-weight: 800;
      line-height: 1.3;
    }

    .sy-banner-detail {
      line-height: 1.3;
      white-space: nowrap;
    }

    .sy-price {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 29px;
      line-height: 1;
      font-weight: 700;
      white-space: nowrap;
    }

    .sy-old-price {
      text-decoration: line-through;
      opacity: .62;
    }

    .sy-saving {
      color: #ffb17d;
      font-weight: 900;
      white-space: nowrap;
    }

    .sy-promo-word {
      color: var(--orange);
      font-weight: 900;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    .sy-banner-badge,
    .sy-discount {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      white-space: nowrap;
    }

    .sy-banner-badge {
      min-height: 28px;
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    /* La remise doit rester très visible sur toutes les propositions. */
    .sy-discount {
      min-height: 38px;
      padding: 7px 13px;
      background: var(--orange);
      color: #fff;
      border: 2px solid rgba(255,255,255,.38);
      box-shadow: 0 7px 18px rgba(232,100,14,.24);
      font-size: 17px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .02em;
    }

    .sy-banner-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 8px 15px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900 !important;
      transition: transform .18s ease, filter .18s ease;
    }

    .sy-banner-cta:hover {
      transform: translateY(-1px);
      filter: brightness(.97);
      text-decoration: none !important;
    }

    /* TIMER : uniquement quatre petits blocs, aucun grand cadre autour. */
    .sy-promo-timer {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: repeat(4, minmax(38px, auto));
      gap: 4px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      font-variant-numeric: tabular-nums;
    }

    .sy-promo-timer .sy-time-box {
      min-width: 38px;
      padding: 5px 5px 4px;
      border-radius: 9px;
      text-align: center;
      background: rgba(255,255,255,.18);
      line-height: 1;
    }

    .sy-promo-timer .sy-time-num {
      display: block;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: -.02em;
    }

    .sy-promo-timer .sy-time-unit {
      display: block;
      margin-top: 3px;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: .72;
    }

    /* Proposition 1 — directe / conversion */
    .sy-banner-1 {
      background: var(--orange);
      color: #fff;
      box-shadow: 0 5px 18px rgba(232,100,14,.20);
    }
    .sy-banner-1 .sy-banner-badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.30); }
    .sy-banner-1 .sy-discount { background: var(--violet); border-color: rgba(255,255,255,.30); box-shadow: 0 7px 18px rgba(75,31,168,.28); }
    .sy-banner-1 .sy-banner-cta { background: #fff; color: var(--violet-dark); }

    /* Proposition 2 — premium violet */
    .sy-banner-2 {
      color: #fff;
      background: linear-gradient(120deg, #4B1FA8, #7650BD);
    }
    .sy-banner-2 .sy-banner-cta { background: var(--orange); color: #fff; }

    /* Proposition 3 — claire et élégante */
    .sy-banner-3 {
      color: #2F2A28;
      background: linear-gradient(120deg, #FFF7F2, #F5EEFF);
      border-bottom: 1px solid #EADFF5;
    }
    .sy-banner-3 .sy-banner-message { color: var(--violet); }
    .sy-banner-3 .sy-banner-badge { background: var(--orange); color: #fff; }
    .sy-banner-3 .sy-banner-cta { background: var(--violet); color: #fff; }

    /* Proposition 4 — prix central */
    .sy-banner-4 {
      min-height: 78px;
      color: #2F2A28;
      background: #fff;
      border-top: 4px solid var(--orange);
      border-bottom: 1px solid #EDE7E3;
    }
    .sy-banner-4 .sy-price { color: var(--violet); font-size: 36px; }
    .sy-banner-4 .sy-banner-cta { background: var(--violet); color: #fff; }

    /* Proposition 5 — bandeau noir */
    .sy-banner-5 {
      color: #fff;
      background: #2A2132;
    }
    .sy-banner-5 .sy-banner-cta { background: #fff; color: #2A2132; }

    /* Proposition 6 — minimaliste */
    .sy-banner-6 {
      color: #2F2A28;
      background: #fff;
      border-bottom: 1px solid #EDE7E3;
      border-left: 6px solid var(--orange);
    }
    .sy-banner-6 .sy-banner-cta { background: var(--violet); color: #fff; }

    /* Proposition 7 — structurée */
    .sy-banner-7 {
      padding: 0 18px 0 0;
      color: #2F2A28;
      background: #F4EEFF;
      border-bottom: 1px solid #E7D9FA;
    }
    .sy-banner-7 .sy-promo-panel {
      align-self: stretch;
      min-width: 150px;
      padding: 10px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--violet);
      color: #fff;
    }
    .sy-banner-7 .sy-promo-panel small { font-size: 10px; font-weight: 900; letter-spacing: .10em; text-transform: uppercase; opacity: .88; }
    .sy-banner-7 .sy-promo-panel strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; }
    .sy-banner-7 .sy-banner-cta { background: var(--orange); color: #fff; }

    /* Proposition 8 — remise circulaire */
    .sy-banner-8 {
      min-height: 82px;
      justify-content: flex-start;
      color: #2F2A28;
      background: linear-gradient(115deg, #FFF6EF 0%, #FFF6EF 65%, #F3EAFF 100%);
      border-bottom: 1px solid #F1DFD4;
    }
    .sy-banner-8 .sy-discount {
      width: 68px;
      height: 68px;
      min-height: 68px;
      flex: 0 0 68px;
      padding: 0;
      border-radius: 50%;
      font-size: 20px;
    }
    .sy-banner-8 .sy-banner-copy { text-align: left; line-height: 1.4; }
    .sy-banner-8 .sy-banner-copy strong { display: block; color: var(--violet); font-size: 17px; }
    .sy-banner-8 .sy-banner-cta { margin-left: auto; background: var(--violet); color: #fff; }

    /* Proposition 9 — émotionnelle */
    .sy-banner-9 {
      min-height: 76px;
      color: #fff;
      background: linear-gradient(90deg, rgba(108,59,184,.97), rgba(75,31,168,.94));
    }
    .sy-banner-9 .sy-banner-message {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(19px, 2vw, 26px);
    }
    .sy-banner-9 .sy-banner-highlight { color: #FFB98E; }
    .sy-banner-9 .sy-banner-cta { background: #fff; color: var(--violet-dark); }

    /* Proposition 10 — ultra compacte */
    .sy-banner-10 {
      min-height: 54px;
      padding: 8px 14px;
      color: #fff;
      background: var(--orange);
      font-size: 13px;
    }
    .sy-banner-10 .sy-discount {
      min-height: 32px;
      padding: 5px 10px;
      background: var(--violet);
      font-size: 15px;
      box-shadow: 0 5px 13px rgba(75,31,168,.24);
    }
    .sy-banner-10 .sy-banner-badge { background: var(--violet); color: #fff; }
    .sy-banner-10 .sy-banner-cta { min-height: 32px; padding: 5px 11px; background: #fff; color: var(--violet); font-size: 12px; }
    .sy-banner-10 .sy-promo-timer { grid-template-columns: repeat(4, 31px); gap: 3px; }
    .sy-banner-10 .sy-promo-timer .sy-time-box { min-width: 31px; padding: 4px 3px 3px; border-radius: 7px; }
    .sy-banner-10 .sy-promo-timer .sy-time-num { font-size: 12px; }
    .sy-banner-10 .sy-promo-timer .sy-time-unit { font-size: 7px; }

    /* Timers sur les fonds clairs */
    .sy-banner-3 .sy-time-box,
    .sy-banner-4 .sy-time-box,
    .sy-banner-6 .sy-time-box,
    .sy-banner-7 .sy-time-box,
    .sy-banner-8 .sy-time-box {
      background: rgba(108,59,184,.09);
      color: var(--violet-dark);
    }

    @media (max-width: 720px) {
      .sy-random-banner {
        min-height: 66px;
        padding: 9px 10px;
        gap: 7px;
        font-size: 12px;
      }

      .sy-promo-timer {
        grid-template-columns: repeat(4, 32px);
        gap: 3px;
      }

      .sy-promo-timer .sy-time-box {
        min-width: 32px;
        padding: 4px 3px 3px;
      }

      .sy-promo-timer .sy-time-num { font-size: 12px; }
      .sy-promo-timer .sy-time-unit { font-size: 7px; }
      .sy-discount { min-height: 32px; padding: 5px 10px; font-size: 15px; }
      .sy-price { font-size: 25px; }
      .sy-banner-detail { white-space: normal; }

      .sy-banner-7 { padding: 0 10px 8px; }
      .sy-banner-7 .sy-promo-panel { width: calc(100% + 20px); min-width: 0; margin: 0 -10px; padding: 7px 10px; flex-direction: row; gap: 8px; }
      .sy-banner-8 { justify-content: center; }
      .sy-banner-8 .sy-discount { width: 54px; height: 54px; min-height: 54px; flex-basis: 54px; font-size: 17px; }
      .sy-banner-8 .sy-banner-copy { text-align: center; }
      .sy-banner-8 .sy-banner-cta { margin-left: 0; }
    }
  </style>


  <!-- ACCUEIL IMMERSIF — Photo Design 7 + éditorial gauche + carte Design 2 -->
  <style>
    #start-overlay.sy-start-v2 {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: block;
      padding: 0;
      overflow-x: hidden;
      overflow-y: auto;
      background: #161311;
      color: #fff;
      transition: opacity .5s ease;
      isolation: isolate;
    }

    #start-overlay.sy-start-v2 .sy-start-bg {
      position: fixed;
      inset: 0;
      z-index: -3;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: center center;
      user-select: none;
      pointer-events: none;
    }

    #start-overlay.sy-start-v2 .sy-start-shade {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        linear-gradient(90deg,
          rgba(10, 8, 7, .78) 0%,
          rgba(10, 8, 7, .48) 38%,
          rgba(10, 8, 7, .20) 66%,
          rgba(10, 8, 7, .42) 100%),
        linear-gradient(0deg,
          rgba(8, 7, 7, .58) 0%,
          transparent 48%,
          rgba(8, 7, 7, .32) 100%);
    }

    #start-overlay.sy-start-v2 .sy-start-page {
      width: min(1440px, 100%);
      min-height: 100dvh;
      margin: 0 auto;
      padding: 24px 34px 38px;
      display: flex;
      flex-direction: column;
      gap: clamp(28px, 5vh, 64px);
      text-align: left;
    }

    #start-overlay.sy-start-v2 .sy-start-topbar {
      width: 100%;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 22px;
      padding: 14px 18px;
    }

    #start-overlay.sy-start-v2 .sy-start-logo {
      display: block;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    #start-overlay.sy-start-v2 .sy-start-logo img {
      width: 68px;
      height: 68px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 5px 16px rgba(0, 0, 0, .22));
    }

    #start-overlay.sy-start-v2 .sy-start-brandcopy { min-width: 0; }

    #start-overlay.sy-start-v2 .sy-start-brandcopy h1,
    #start-overlay.sy-start-v2 .sy-start-brandcopy h2 {
      color: #fff;
      text-align: left;
      text-shadow: 0 3px 18px rgba(0, 0, 0, .32);
    }

    #start-overlay.sy-start-v2 .sy-start-brandcopy h1 {
      margin: 0 0 3px;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(26px, 3vw, 40px);
      line-height: 1;
      font-weight: 700;
    }

    #start-overlay.sy-start-v2 .sy-start-brandcopy h2 {
      margin: 0;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(15px, 1.7vw, 22px);
      line-height: 1.2;
      font-weight: 600;
    }

    #start-overlay.sy-start-v2 .sy-start-since {
      margin-top: 3px;
      color: #ffb081;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(15px, 1.55vw, 20px);
      font-weight: 700;
    }

    #start-overlay.sy-start-v2 .sy-start-access {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 8px;
      min-width: 265px;
    }

    #start-overlay.sy-start-v2 .sy-start-address {
      margin: 0;
      color: rgba(255, 255, 255, .90);
      font-size: 12px;
      line-height: 1.35;
      text-align: right;
      text-shadow: 0 2px 12px rgba(0, 0, 0, .30);
    }

    #start-overlay.sy-start-v2 .sy-start-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    #start-overlay.sy-start-v2 .sy-start-enter {
      min-height: 40px;
      padding: 9px 18px;
      border: 1px solid rgba(255, 255, 255, .20);
      border-radius: 999px;
      background: var(--violet);
      color: #fff;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(75, 31, 168, .28);
      transition: transform .18s ease, background .18s ease;
    }

    #start-overlay.sy-start-v2 .sy-start-enter:hover {
      transform: translateY(-1px);
      background: var(--violet-dark);
    }

    #start-overlay.sy-start-v2 .sy-start-phone {
      display: inline-flex;
      width: auto;
      margin: 0;
      min-height: 40px;
      padding: 9px 0;
      align-items: center;
      justify-content: center;
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
    }

    #start-overlay.sy-start-v2 .sy-start-phone:hover {
      background: transparent;
      text-decoration: none;
    }

    #start-overlay.sy-start-v2 .sy-start-lower {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
      gap: clamp(34px, 6vw, 92px);
      align-items: center;
      padding: 0 3vw 2vh;
    }

    #start-overlay.sy-start-v2 .sy-start-editorial {
      width: min(650px, 100%);
      align-self: center;
      color: #fff;
      text-shadow: 0 3px 24px rgba(0, 0, 0, .48);
    }

    #start-overlay.sy-start-v2 .sy-start-editorial-eyebrow {
      color: #ffb489;
      text-transform: uppercase;
      letter-spacing: .20em;
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 12px;
    }

    #start-overlay.sy-start-v2 .sy-start-editorial h3 {
      margin: 0;
      color: #fff;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(58px, 7vw, 104px);
      line-height: .82;
      letter-spacing: -.025em;
      font-weight: 700;
    }

    #start-overlay.sy-start-v2 .sy-start-editorial p {
      max-width: 640px;
      margin: 28px 0 0;
      color: rgba(255, 255, 255, .96);
      font-size: clamp(16px, 1.55vw, 21px);
      line-height: 1.55;
      text-align: left;
    }

    #start-overlay.sy-start-v2 .sy-start-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 20px;
    }

    #start-overlay.sy-start-v2 .sy-start-tags span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 12px;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 999px;
      background: rgba(15, 15, 15, .12);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    /* Vidéo verticale d’accueil : le fichier source contient des bandes noires latérales.
       Le conteneur 9:16 masque ces bandes par recadrage central, sans déformer la vidéo. */
    #start-overlay.sy-start-v2 .sy-start-video-zone {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #start-overlay.sy-start-v2 .sy-start-video-crop {
      position: relative;
      height: min(61vh, 620px);
      max-height: 620px;
      aspect-ratio: 9 / 16;
      overflow: hidden;
      border-radius: 28px;
      background: #000;
      border: 1px solid rgba(255, 255, 255, .20);
      box-shadow: 0 28px 80px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .14);
      isolation: isolate;
    }

    #start-overlay.sy-start-v2 .sy-start-video-crop::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    }

    #start-overlay.sy-start-v2 .sy-start-video {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      height: 100%;
      width: auto;
      max-width: none;
      transform: translate(-50%, -50%);
      object-fit: contain;
      object-position: center center;
    }

    #start-overlay.sy-start-v2 .sy-start-fact-card {
      position: relative;
      width: min(610px, 100%);
      min-height: 430px;
      margin-left: auto;
      overflow: hidden;
      padding: 46px 82px 42px 42px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .10));
      -webkit-backdrop-filter: blur(22px) saturate(125%);
      backdrop-filter: blur(22px) saturate(125%);
      box-shadow: 0 28px 80px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
      color: #fff;
      text-align: left;
    }

    #start-overlay.sy-start-v2 .sy-start-eyebrow {
      margin: 0 0 18px;
      color: #ffc7a5;
      text-transform: uppercase;
      letter-spacing: .20em;
      font-size: 11px;
      line-height: 1.2;
      font-weight: 900;
    }

    #start-overlay.sy-start-v2 .sy-start-fact {
      max-width: 100%;
      margin: 0 0 26px;
      color: #fff;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(28px, 3.3vw, 46px);
      line-height: 1.08;
      font-weight: 600;
      text-shadow: 0 3px 22px rgba(0, 0, 0, .36);
    }

    #start-overlay.sy-start-v2 .sy-start-session {
      margin: 0 0 7px;
      color: #fff;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(21px, 2.2vw, 29px);
      line-height: 1.15;
      font-weight: 700;
    }

    #start-overlay.sy-start-v2 .sy-start-detail {
      max-width: 100%;
      margin: 0 0 22px;
      color: rgba(255, 255, 255, .85);
      font-size: 14px;
      line-height: 1.55;
    }

    #start-overlay.sy-start-v2 .sy-start-course-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 17px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      background: var(--violet);
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
      box-shadow: 0 9px 24px rgba(75, 31, 168, .24);
    }

    #start-overlay.sy-start-v2 .sy-start-course-link:hover { background: var(--violet-dark); }

    #start-overlay.sy-start-v2 .sy-start-next {
      position: absolute;
      inset: 0 0 0 auto;
      width: 58px;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      border-left: 1px solid rgba(255, 255, 255, .18);
      border-radius: 0 28px 28px 0;
      display: grid;
      place-items: center;
      background: rgba(232, 100, 14, .92);
      color: #fff;
      cursor: pointer;
      font-family: Arial, sans-serif;
      font-size: 45px;
      font-weight: 300;
      line-height: 1;
      transition: width .18s ease, background .18s ease;
    }

    #start-overlay.sy-start-v2 .sy-start-next:hover {
      width: 63px;
      background: var(--orange);
    }

    @media (max-width: 1050px) {
      #start-overlay.sy-start-v2 .sy-start-page { padding: 18px 20px 30px; gap: 28px; }
      #start-overlay.sy-start-v2 .sy-start-topbar { grid-template-columns: auto 1fr; }
      #start-overlay.sy-start-v2 .sy-start-access {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      #start-overlay.sy-start-v2 .sy-start-address { text-align: left; }
      #start-overlay.sy-start-v2 .sy-start-lower { grid-template-columns: 1fr 1fr; gap: 24px; padding-inline: 0; }
      #start-overlay.sy-start-v2 .sy-start-editorial h3 { font-size: clamp(52px, 8vw, 82px); }
      #start-overlay.sy-start-v2 .sy-start-video-crop { height: min(58vh, 560px); }
      #start-overlay.sy-start-v2 .sy-start-fact-card { min-height: 390px; padding: 38px 72px 34px 32px; }
    }

    @media (max-width: 720px) {
      #start-overlay.sy-start-v2 .sy-start-bg { object-position: 46% center; }
      #start-overlay.sy-start-v2 .sy-start-shade {
        background: linear-gradient(0deg, rgba(8, 7, 7, .86) 0%, rgba(8, 7, 7, .52) 54%, rgba(8, 7, 7, .46) 100%);
      }
      #start-overlay.sy-start-v2 .sy-start-page { min-height: 100dvh; padding: 10px 10px 24px; gap: 28px; }
      #start-overlay.sy-start-v2 .sy-start-topbar { grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 11px; border-radius: 17px; }
      #start-overlay.sy-start-v2 .sy-start-logo img { width: 52px; height: 52px; }
      #start-overlay.sy-start-v2 .sy-start-brandcopy h1 { font-size: 25px; }
      #start-overlay.sy-start-v2 .sy-start-brandcopy h2 { font-size: 14px; }
      #start-overlay.sy-start-v2 .sy-start-since { font-size: 15px; }
      #start-overlay.sy-start-v2 .sy-start-access {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      #start-overlay.sy-start-v2 .sy-start-address { text-align: center; font-size: 12px; }
      #start-overlay.sy-start-v2 .sy-start-actions { justify-content: center; flex-wrap: wrap; }
      #start-overlay.sy-start-v2 .sy-start-enter { min-height: 38px; padding: 8px 15px; }
      #start-overlay.sy-start-v2 .sy-start-phone { min-height: 38px; padding: 8px 0; }
      #start-overlay.sy-start-v2 .sy-start-lower { display: flex; flex-direction: column; align-items: stretch; gap: 26px; padding: 0; }
      #start-overlay.sy-start-v2 .sy-start-editorial { width: 100%; padding: 8px 8px 0; }
      #start-overlay.sy-start-v2 .sy-start-editorial-eyebrow { margin-bottom: 9px; font-size: 10px; }
      #start-overlay.sy-start-v2 .sy-start-editorial h3 { font-size: clamp(50px, 15vw, 72px); line-height: .85; }
      #start-overlay.sy-start-v2 .sy-start-editorial p { margin-top: 20px; font-size: 15px; line-height: 1.5; }
      #start-overlay.sy-start-v2 .sy-start-tags { margin-top: 15px; }
      #start-overlay.sy-start-v2 .sy-start-video-zone { padding: 4px 0 0; }
      #start-overlay.sy-start-v2 .sy-start-video-crop { width: min(82vw, 360px); height: auto; aspect-ratio: 9 / 16; }
      #start-overlay.sy-start-v2 .sy-start-video { height: 100%; width: auto; }
      #start-overlay.sy-start-v2 .sy-start-fact-card {
        width: 100%;
        min-height: 360px;
        margin: 0;
        padding: 30px 58px 28px 24px;
        border-radius: 22px;
      }
      #start-overlay.sy-start-v2 .sy-start-fact { font-size: clamp(27px, 8vw, 38px); }
      #start-overlay.sy-start-v2 .sy-start-next,
      #start-overlay.sy-start-v2 .sy-start-next:hover { width: 48px; border-radius: 0 22px 22px 0; font-size: 38px; }
    }

    @media (max-width: 390px) {
      #start-overlay.sy-start-v2 .sy-start-brandcopy h1 { font-size: 22px; }
      #start-overlay.sy-start-v2 .sy-start-brandcopy h2 { font-size: 13px; }
      #start-overlay.sy-start-v2 .sy-start-editorial h3 { font-size: 49px; }
      #start-overlay.sy-start-v2 .sy-start-fact-card { min-height: 340px; }
    }
  </style>


  <!-- HEADER PLEIN ÉCRAN — DESIGNS 1 / 7 / 4 -->
  <style>
    /* Le Hero est désormais avant la grille : le menu latéral arrive après le scroll. */
    .hero.hero-fullscreen {
      width: 100%;
      height: 100dvh;
      min-height: 620px;
      padding: 0;
      margin: 0;
      background: #000;
    }

    .hero.hero-fullscreen .frame {
      position: relative;
      width: 100%;
      max-width: none;
      height: 100%;
      margin: 0;
      border-radius: 0;
      overflow: hidden;
      background: #000;
    }

    .hero.hero-fullscreen .slider {
      width: 100%;
      height: 100%;
      min-height: 100%;
      background: #000;
    }

    .hero.hero-fullscreen .slide {
      position: absolute;
      inset: 0;
      overflow: hidden;
      opacity: 0;
      transition: opacity .6s ease;
      isolation: isolate;
    }

    .hero.hero-fullscreen .slide.active {
      opacity: 1;
    }

    .hero.hero-fullscreen .slide picture {
      position: absolute;
      inset: 0;
      z-index: -3;
      display: block;
      width: 100%;
      height: 100%;
    }

    .hero.hero-fullscreen .slide img {
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: center center;
    }

    .hero.hero-fullscreen .slide::before,
    .hero.hero-fullscreen .slide::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      pointer-events: none;
    }

    .hero.hero-fullscreen .hero-copy-wrap {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: min(1180px, 100%);
      min-height: 100%;
      margin: 0 auto;
      padding: 72px 46px 62px;
      display: flex;
      color: #fff;
    }

    .hero.hero-fullscreen .hero-copy {
      width: min(780px, 100%);
    }

    .hero.hero-fullscreen .hero-copy-eyebrow {
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      align-items: center;
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 11px;
      line-height: 1.3;
      font-weight: 800;
    }

    .hero.hero-fullscreen .hero-copy-title {
      margin: 14px 0 18px;
      color: #fff;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(48px, 7vw, 94px);
      line-height: .96;
      letter-spacing: -.015em;
      font-weight: 700;
    }

    .hero.hero-fullscreen .hero-copy-desc {
      max-width: 690px;
      margin: 0;
      color: rgba(255, 255, 255, .96);
      font-size: clamp(16px, 1.65vw, 21px);
      line-height: 1.55;
    }

    .hero.hero-fullscreen .hero-copy-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .hero.hero-fullscreen .hero-copy-tags span {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid rgba(255, 255, 255, .76);
      border-radius: 999px;
      color: #fff;
      background: rgba(0, 0, 0, .10);
      font-size: 12px;
      font-weight: 600;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    /* ======================================================
       DESIGN 1 — CINÉMATIQUE BAS GAUCHE
       ====================================================== */
    .hero.hero-fullscreen .slide.hero-design-1::before {
      background:
        linear-gradient(90deg,
          rgba(0, 0, 0, .78) 0%,
          rgba(0, 0, 0, .32) 48%,
          rgba(0, 0, 0, .08) 100%);
    }

    .hero.hero-fullscreen .slide.hero-design-1::after {
      background:
        linear-gradient(0deg,
          rgba(0, 0, 0, .52) 0%,
          transparent 48%);
    }

    .hero.hero-fullscreen .slide.hero-design-1 .hero-copy-wrap {
      align-items: flex-end;
      justify-content: flex-start;
    }

    .hero.hero-fullscreen .slide.hero-design-1 .hero-copy {
      padding-bottom: 4vh;
      text-shadow: 0 3px 22px rgba(0, 0, 0, .55);
    }

    .hero.hero-fullscreen .slide.hero-design-1 .hero-copy-eyebrow {
      color: #ffd9c3;
    }

    /* ======================================================
       DESIGN 7 — MAGAZINE / GRAND NUMÉRO
       ====================================================== */
    .hero.hero-fullscreen .slide.hero-design-7::before {
      background:
        linear-gradient(90deg,
          rgba(0, 0, 0, .70) 0%,
          rgba(0, 0, 0, .20) 68%,
          rgba(0, 0, 0, .08) 100%);
    }

    .hero.hero-fullscreen .slide.hero-design-7 .hero-copy-wrap {
      align-items: center;
      justify-content: flex-start;
    }

    .hero.hero-fullscreen .slide.hero-design-7 .hero-copy {
      position: relative;
      max-width: 760px;
      padding-left: 78px;
      text-shadow: 0 3px 22px rgba(0, 0, 0, .55);
    }


    .hero.hero-fullscreen .slide.hero-design-7 .hero-copy-eyebrow {
      color: #ffcfb4;
    }

    .hero.hero-fullscreen .slide.hero-design-7 .hero-copy-title {
      font-size: clamp(48px, 7vw, 90px);
    }

    /* ======================================================
       DESIGN 4 — CENTRÉ MINIMAL
       ====================================================== */
    .hero.hero-fullscreen .slide.hero-design-4::before {
      background:
        radial-gradient(circle at center,
          rgba(0, 0, 0, .12) 0%,
          rgba(0, 0, 0, .68) 100%);
    }

    .hero.hero-fullscreen .slide.hero-design-4 .hero-copy-wrap {
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .hero.hero-fullscreen .slide.hero-design-4 .hero-copy {
      width: min(900px, 100%);
      margin: auto;
      text-shadow: 0 3px 22px rgba(0, 0, 0, .65);
    }

    .hero.hero-fullscreen .slide.hero-design-4 .hero-copy-eyebrow {
      margin-inline: auto;
      color: #fff;
    }

    .hero.hero-fullscreen .slide.hero-design-4 .hero-copy-desc {
      margin-inline: auto;
    }

    .hero.hero-fullscreen .slide.hero-design-4 .hero-copy-tags {
      justify-content: center;
    }

    /* Contrôles du slider sur le plein écran */
    .hero.hero-fullscreen .slider-btn {
      z-index: 8;
      border-color: rgba(255, 255, 255, .26);
      background: rgba(0, 0, 0, .24);
      color: #fff;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    .hero.hero-fullscreen .slider-btn:hover {
      background: rgba(0, 0, 0, .44);
    }

    .hero.hero-fullscreen .slider-dots {
      z-index: 8;
      bottom: 22px;
    }

    /* Sur mobile, la sidebar reste dans le flux sous le Hero puis devient sticky. */
    @media (max-width: 1024px) {
      .layout > main {
        padding-top: 0;
      }

      .hero.hero-fullscreen {
        min-height: 100dvh;
      }
    }

    @media (max-width: 720px) {
      .hero.hero-fullscreen {
        height: 100dvh;
        min-height: 560px;
      }

      .hero.hero-fullscreen .hero-copy-wrap {
        padding: 86px 22px 58px;
      }

      .hero.hero-fullscreen .hero-copy-title {
        font-size: clamp(42px, 13vw, 62px);
      }

      .hero.hero-fullscreen .hero-copy-desc {
        font-size: 15px;
        line-height: 1.5;
      }

      .hero.hero-fullscreen .slide.hero-design-1 .hero-copy {
        padding-bottom: 5vh;
      }

      .hero.hero-fullscreen .slide.hero-design-7 .hero-copy {
        padding-left: 0;
        padding-top: 62px;
      }

      .hero.hero-fullscreen .slide.hero-design-4 .hero-copy-wrap {
        padding-inline: 28px;
      }

      .hero.hero-fullscreen .slider-btn {
        padding: 9px 10px;
      }

      .hero.hero-fullscreen .slider-btn.prev {
        left: 8px;
      }

      .hero.hero-fullscreen .slider-btn.next {
        right: 8px;
      }
    }
  </style>

</head>

<body class="mood-zen">

  <!-- 1. FOND QUI RESPIRE -->
  <div class="breathing-layer"></div>

<!-- 2. OVERLAY ACTIVATION AUDIO — ACCUEIL IMMERSIF -->
  <div id="start-overlay" class="sy-start-v2" onclick="startExperience()">

    <img
      class="sy-start-bg"
      src="https://soundyoga.fr/wp-content/uploads/2025/08/yoga-art-compiegne-studio-centre.jpg"
      alt=""
      aria-hidden="true"
      loading="eager"
      fetchpriority="high"
      decoding="async">

    <div class="sy-start-shade" aria-hidden="true"></div>

    <main class="sy-start-page">
      <header class="sy-start-topbar">
        <button class="sy-start-logo" type="button" onclick="startExperience()"
          aria-label="Entrer sur le site SoundYoga">
          <img
            src="https://soundyoga.fr/wp-content/uploads/2020/04/LOGO-SYOGA-Ccolors-300x295.png"
            alt="Logo SoundYoga">
        </button>

        <div class="sy-start-brandcopy">
          <h1>Bienvenue chez SoundYoga</h1>
          <h2>Le Premier Centre de Yoga &amp; Soins Sonores de l’Oise !</h2>
          <div class="sy-start-since">Depuis 2023 !</div>
        </div>

        <div class="sy-start-access">
          <div class="sy-start-address">17 rue de Pierrefonds, 60200 Compiègne</div>
          <div class="sy-start-actions">
            <button class="sy-start-enter" type="button" onclick="startExperience()">Entrer</button>
            <a class="sy-start-phone" href="tel:+33767396699">07 67 39 66 99</a>
          </div>
        </div>
      </header>

      <div class="sy-start-lower">
        <section class="sy-start-video-zone" aria-label="Vidéo SoundYoga">
          <div class="sy-start-video-crop">
            <video
              class="sy-start-video"
              src="https://video.wixstatic.com/video/818fcb_11e633d537c54ac8bf26a9a1e0ead068/720p/mp4/file.mp4"
              autoplay
              muted
              loop
              playsinline
              preload="metadata"
              aria-label="Présentation vidéo SoundYoga">
              Votre navigateur ne prend pas en charge la lecture de cette vidéo.
            </video>
          </div>
        </section>

        <section class="sy-start-fact-card">
          <div class="sy-start-eyebrow">Le saviez-vous ?</div>
          <div class="sy-start-fact" id="sy-start-fact"></div>
          <div class="sy-start-session" id="sy-start-session"></div>
          <div class="sy-start-detail" id="sy-start-detail"></div>

          <a class="sy-start-course-link" id="sy-start-course-link" href="#" target="_blank" rel="noopener">
            Découvrir la séance
          </a>

          <button class="sy-start-next" id="sy-start-next" type="button" aria-label="Voir le message suivant">
            <span>›</span>
          </button>
        </section>
      </div>
    </main>
  </div>

  <!-- BANDEAU PROMOTIONNEL -->
  <!-- <div class="promo-banner">
    PROMO Rentrée <span class="discount">-29%</span> sur toutes les cartes !
	<br>
	<span id="banner-countdown"></span>
  </div>-->


  <!-- BANDEAU PROMOTIONNEL NOUVELLE ANNÉE -->
   <!--<div class="promo-banner">
   <span>✨ Immersion Yoga & Océan intérieur</span>
    <span class="promo-badge">EARLY BIRD</span>
    <span>Hôtel Cap Hornu *** 29-31 Mai</span>
    <span class="banner-timer" id="banner-timer">00j 00h 00m</span>
	 <a href="https://compiegne.resa.soundyoga.fr/retraite-ocean"
     style="color:white; text-decoration:underline; font-size:14px; margin-left:5px; font-weight:bold;">Je réserve</a>
    <div style="width: 100%;"></div>
   <span>Votre carte donne accès à TOUT le planning : atelier et stages inclus !</span> 
  </div>-->


  <!-- BANDEAU PROMO RENTRÉE : une des 10 propositions est choisie à chaque chargement -->
  <div id="soundyoga-random-banner" class="sy-random-banner" aria-live="polite"></div>

  <script>
    (() => {
      "use strict";

      const promoBanner = document.getElementById("soundyoga-random-banner");
      if (!promoBanner) return;

      const syncMobilePromoHeight = () => {
        if (window.matchMedia("(max-width: 1024px)").matches) {
          const height = Math.ceil(promoBanner.getBoundingClientRect().height);
          if (height > 0) {
            document.documentElement.style.setProperty("--sy-mobile-banner-height", `${height}px`);
          }
        } else {
          document.documentElement.style.removeProperty("--sy-mobile-banner-height");
        }
      };

      const observer = new ResizeObserver(syncMobilePromoHeight);
      observer.observe(promoBanner);

      window.addEventListener("resize", syncMobilePromoHeight, { passive: true });
      window.addEventListener("load", syncMobilePromoHeight, { once: true });

      requestAnimationFrame(syncMobilePromoHeight);
    })();
  </script>

  <script>
    (() => {
      "use strict";

      const banner = document.getElementById("soundyoga-random-banner");
      if (!banner) return;

      const pricingUrl = "https://www.compiegne.resa.soundyoga.fr/plans-pricing";
      const promoDeadline = new Date("2026-09-28T00:00:00+02:00").getTime();

      function timerMarkup() {
        return `
          <div class="sy-promo-timer" data-promo-timer aria-label="Compte à rebours de la promotion">
            <span class="sy-time-box"><span class="sy-time-num" data-days>--</span><span class="sy-time-unit">J</span></span>
            <span class="sy-time-box"><span class="sy-time-num" data-hours>--</span><span class="sy-time-unit">H</span></span>
            <span class="sy-time-box"><span class="sy-time-num" data-minutes>--</span><span class="sy-time-unit">M</span></span>
            <span class="sy-time-box"><span class="sy-time-num" data-seconds>--</span><span class="sy-time-unit">S</span></span>
          </div>`;
      }

      const proposals = {
        1: () => `
          ${timerMarkup()}
          <span class="sy-banner-badge">Promo rentrée</span>
          <span class="sy-banner-message">Toutes les cartes de cours</span>
          <span class="sy-discount">-29 %</span>
          <span class="sy-banner-detail">Jusqu’au 27 septembre</span>
          <a class="sy-banner-cta" href="${pricingUrl}">J’en profite</a>
        `,
        2: () => `
          ${timerMarkup()}
          <span class="sy-discount">-29 %</span>
          <span class="sy-banner-message">La rentrée est le meilleur moment pour choisir votre carte</span>
          <span class="sy-banner-detail">Remise valable sur toutes les cartes de cours</span>
          <a class="sy-banner-cta" href="${pricingUrl}">Voir les cartes</a>
        `,
        3: () => `
          ${timerMarkup()}
          <span class="sy-banner-badge">Rentrée</span>
          <span class="sy-banner-message">Toutes nos cartes de cours sont en promotion</span>
          <span class="sy-discount">-29 %</span>
          <a class="sy-banner-cta" href="${pricingUrl}">Découvrir les cartes</a>
        `,
        4: () => `
          ${timerMarkup()}
          <span class="sy-banner-message">PROMO RENTRÉE · TOUTES LES CARTES DE COURS</span>
          <span class="sy-discount">-29 %</span>
          <span class="sy-banner-detail">Offre jusqu’au 27 septembre</span>
          <a class="sy-banner-cta" href="${pricingUrl}">Voir l’offre</a>
        `,
        5: () => `
          ${timerMarkup()}
          <span class="sy-discount">-29 %</span>
          <span class="sy-banner-message">Votre pratique, votre rythme, <span class="sy-banner-highlight">votre carte</span></span>
          <span class="sy-banner-detail">La remise de rentrée s’applique à toutes les cartes de cours</span>
          <a class="sy-banner-cta" href="${pricingUrl}">Choisir ma carte</a>
        `,
        6: () => `
          ${timerMarkup()}
          <span class="sy-promo-word">PROMO RENTRÉE</span>
          <span class="sy-discount">-29 %</span>
          <span class="sy-banner-message">sur toutes les cartes de cours</span>
          <a class="sy-banner-cta" href="${pricingUrl}">Voir les cartes</a>
        `,
        7: () => `
          <div class="sy-promo-panel"><small>Promo rentrée</small><strong>-29 %</strong></div>
          ${timerMarkup()}
          <span class="sy-banner-message">La remise s’applique à toutes les cartes de cours</span>
          <span class="sy-banner-detail">Jusqu’au 27 septembre</span>
          <a class="sy-banner-cta" href="${pricingUrl}">J’en profite</a>
        `,
        8: () => `
          ${timerMarkup()}
          <span class="sy-discount">-29 %</span>
          <span class="sy-banner-copy"><strong>PROMO RENTRÉE</strong>Toutes les cartes de cours sont concernées</span>
          <a class="sy-banner-cta" href="${pricingUrl}">Voir les cartes</a>
        `,
        9: () => `
          ${timerMarkup()}
          <span class="sy-banner-message">Choisissez la carte qui vous ressemble <span class="sy-banner-highlight">avec -29 %</span></span>
          <span class="sy-banner-detail">Promotion valable sur toutes les cartes de cours</span>
          <a class="sy-banner-cta" href="${pricingUrl}">Je choisis</a>
        `,
        10: () => `
          ${timerMarkup()}
          <span class="sy-discount">-29 %</span>
          <span class="sy-banner-badge">Promo rentrée</span>
          <span class="sy-banner-message">sur toutes les cartes de cours · jusqu’au 27 septembre</span>
          <a class="sy-banner-cta" href="${pricingUrl}">Voir l’offre</a>
        `
      };

      const choices = Object.keys(proposals).map(Number);
      const selected = choices[Math.floor(Math.random() * choices.length)];

      banner.classList.add(`sy-banner-${selected}`);
      banner.dataset.proposition = String(selected);
      banner.innerHTML = proposals[selected]();

      function pad(value) {
        return String(value).padStart(2, "0");
      }

      let intervalId = null;

      function updatePromoCountdown() {
        const remaining = Math.max(0, promoDeadline - Date.now());
        const totalSeconds = Math.floor(remaining / 1000);
        const days = Math.floor(totalSeconds / 86400);
        const hours = Math.floor((totalSeconds % 86400) / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        banner.querySelectorAll("[data-promo-timer]").forEach((timer) => {
          timer.querySelector("[data-days]").textContent = pad(days);
          timer.querySelector("[data-hours]").textContent = pad(hours);
          timer.querySelector("[data-minutes]").textContent = pad(minutes);
          timer.querySelector("[data-seconds]").textContent = pad(seconds);
        });

        if (remaining <= 0 && intervalId !== null) {
          clearInterval(intervalId);
          intervalId = null;
        }
      }

      updatePromoCountdown();
      if (promoDeadline > Date.now()) {
        intervalId = setInterval(updatePromoCountdown, 1000);
      }
    })();
  </script>

  <script>

    (function () {
      "use strict";

      const EARLY_BIRD_END = new Date("2026-06-15T23:59:00");
      const countdown = document.getElementById("banner-countdown");

      if (!countdown) return;

      function updateEarlyBirdCountdown() {
        const now = new Date();
        const diff = Math.max(0, EARLY_BIRD_END - now);

        const days = Math.floor(diff / 86400000);
        const hours = Math.floor((diff % 86400000) / 3600000);
        const minutes = Math.floor((diff % 3600000) / 60000);

        countdown.textContent = diff > 0
          ? `${days}j ${hours}h ${minutes}m`
          : "Early Bird terminé";
      }

      updateEarlyBirdCountdown();
      setInterval(updateEarlyBirdCountdown, 60000);
    })();
  </script>


  <!-- POP-UP PROMOTIONNEL -->
  <!--
  <div id="offerPopupOverlay" class="popup-overlay">
    <div class="promo-block">
      <button class="popup-close-btn" aria-label="Fermer">&times;</button>
      <h2 class="promo-title">OFFRE RENTRÉE</h2>
      <p class="promo-subtitle">Jusqu’au 14 septembre -29% SUR TOUTES LES CARTES</p>
      <p class="promo-description">Boostez votre énergie : Cours,Stages, & bains sonores. Profitez-en pour vous faire plaisir.</p>

      <div id="countdown-timer">
          <div class="timer-unit">
              <span id="days" class="timer-number">00</span>
              <span class="timer-label">Jours</span>
          </div>
          <div class="timer-unit">
              <span id="hours" class="timer-number">00</span>
              <span class="timer-label">Heures</span>
          </div>
          <div class="timer-unit">
              <span id="minutes" class="timer-number">00</span>
              <span class="timer-label">Min</span>
          </div>
          <div class="timer-unit">
              <span id="seconds" class="timer-number">00</span>
              <span class="timer-label">Sec</span>
          </div>
      </div>
      <div id="expired-message" style="display:none;"> </div>
      <a href="https://www.compiegne.resa.soundyoga.fr/plans-pricing" target="_blank" rel="noopener" class="cta-button">Découvrir l’offre</a>
    </div>
  </div>
  -->
  <!-- <div id="offerPopupOverlay" class="popup-overlay"> -->
  <!-- <div class="promo-block promo-block-image"> -->
  <!-- <button class="popup-close-btn" aria-label="Fermer">&times;</button> -->
  <!-- <a href="https://www.compiegne.resa.soundyoga.fr/plans-pricing" target="_blank" rel="noopener"> -->
  <!-- <img src="https://static.wixstatic.com/media/818fcb_ecf958f8728e4ffe98321bfa95f22cc4~mv2.jpg" alt="Offre spéciale SoundYoga"> -->
  <!-- </a> -->
  <!-- </div> -->
  <!-- </div> -->


  <!-- FIN DU BANDEAU -->
  <!-- NOUVEAU MENU MOBILE (invisible sur desktop) -->
  <nav id="mobile-menu" aria-label="Menu mobile">
    <button class="close-menu-btn" id="close-btn" aria-label="Fermer le menu">&times;</button>
    <!-- Mood Slider Mobile -->
    <div class="mobile-mood-wrapper">
      <div class="mobile-mood-label">Votre humeur ?</div>
      <div class="mood-selector" style="background: transparent; padding: 0;">
        <button class="mood-btn active" onclick="setMood('zen', this)">☁️</button>
        <button class="mood-btn" onclick="setMood('fire', this)">🔥</button>
        <button class="mood-btn" onclick="setMood('forest', this)">🌿</button>
      </div>
    </div>
    <a href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">RÉSERVATION</a>
    <a href="https://www.compiegne.resa.soundyoga.fr/book-online" target="_blank" rel="noopener">SÉANCES</a>
    <a href="https://www.compiegne.resa.soundyoga.fr/plans-pricing" target="_blank" rel="noopener">FORMULES ET
      TARIFS</a>
    <a href="https://soundyoga.fr/blog/" target="_blank" rel="noopener">ARTICLES</a>
    <a href="https://soundyoga.fr/sanskrit/" target="_blank" rel="noopener">SANSKRIT</a>
    <a href="https://www.compiegne.resa.soundyoga.fr/gift-card" target="_blank" rel="noopener">CARTES-CADEAUX</a>
    <a href="https://soundyoga.fr/healing/" target="_blank" rel="noopener">SÉANCE PRIVÉE</a>
    <a href="https://soundyoga.fr/love-you/" target="_blank" rel="noopener">LOVE YOU</a>
    <a href="https://www.compiegne.resa.soundyoga.fr/dossier-presse" target="_blank" rel="noopener">DOSSIER DE
      PRESSE</a>
  </nav>

  <!-- HEADER HERO PLEIN ÉCRAN : Design aléatoire 1 / 7 / 4 -->
  <section class="hero hero-fullscreen" id="site-hero">
    <div class="frame">
      <!-- Les images, textes et designs sont injectés par JavaScript depuis /header-images/ -->
      <div class="slider" id="hero-slider" aria-label="Galerie d’images SoundYoga" aria-live="polite"></div>
      <button class="slider-btn prev" aria-label="Image précédente" type="button">‹</button>
      <button class="slider-btn next" aria-label="Image suivante" type="button">›</button>
      <div class="slider-dots" role="tablist" aria-label="Aller à l’image"></div>
    </div>
  </section>

  <div class="layout">
    <!-- SIDEBAR -->
    <aside class="sidebar">
      <div class="micro">
        <a href="https://www.compiegne.resa.soundyoga.fr/">réserver</a>
      </div>

      <div class="brand">
        <img src="https://soundyoga.fr/wp-content/uploads/2020/04/LOGO-SYOGA-Ccolors-300x295.png" alt="SoundYoga">
        <strong style="color: #560fae;">Centre de Yoga et Soins Sonores</strong>
      </div>


      <nav class="vnav" aria-label="Menu latéral">
        <a href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">RÉSERVATION</a>
        <a href="https://www.compiegne.resa.soundyoga.fr/book-online" target="_blank" rel="noopener">SÉANCES</a>
        <a href="https://www.compiegne.resa.soundyoga.fr/plans-pricing" target="_blank" rel="noopener">FORMULES ET
          TARIFS</a>
        <a href="https://soundyoga.fr/blog/" target="_blank" rel="noopener">ARTICLES</a>
        <a href="https://soundyoga.fr/sanskrit/" target="_blank" rel="noopener">SANSKRIT</a>
        <a href="https://www.compiegne.resa.soundyoga.fr/gift-card" target="_blank" rel="noopener">CARTES-CADEAUX</a>
        <a href="https://soundyoga.fr/healing/" target="_blank" rel="noopener">SÉANCE PRIVÉE</a>
        <a href="https://soundyoga.fr/love-you/" target="_blank" rel="noopener">LOVE YOU</a>
        <a href="https://www.compiegne.resa.soundyoga.fr/dossier-presse" target="_blank" rel="noopener">DOSSIER DE
          PRESSE</a>
      </nav>

      <!-- Le burger est déplacé ici pour fonctionner avec le layout flex (space-between) en mobile -->
      <button class="burger" id="burger-btn" aria-label="Ouvrir le menu">
        <div></div>
        <div></div>
        <div></div>
      </button>

    </aside>

    <!-- MAIN -->
    <main>

      <!-- Barre sociale verticale droite -->
      <div class="social" aria-label="Réseaux sociaux">
        <a href="https://www.facebook.com/soundyoga.fr" aria-label="Facebook">fb</a>
        <a href="https://www.instagram.com/soundyoga.fr/" aria-label="Instagram">insta</a>
        <a href="mailto:contact@soundyoga.fr" aria-label="Contact">contact</a>
      </div>

      <!-- MOOD SLIDER (CENTRAL) -->
      <div
        style="display: flex; flex-direction: column; align-items: center; margin: 30px 0; position: relative; z-index: 100;">
        <div
          style="text-align: center; margin-bottom: 15px; font-weight: bold; color: var(--muted); font-size: 1.1rem;">
          Comment vous sentez-vous aujourd'hui ?</div>
        <div class="mood-selector" title="Choisissez votre ambiance" style="box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
          <button class="mood-btn active" onclick="setMood('zen', this)">☁️</button>
          <button class="mood-btn" onclick="setMood('fire', this)">🔥</button>
          <button class="mood-btn" onclick="setMood('forest', this)">🌿</button>
          <button class="mood-btn" onclick="toggleSnow(this)">❄️</button>
        </div>
      </div>

      <!-- TEXTE AÉRÉ CENTRÉ -->
      <section class="lead">
        <div class="wrap">
          <p style="font-weight: 700; color: var(--violet);">Bienvenus dans le premier centre de Yoga & Bain Sonore à
            Compiègne depuis 2023 !</p>
          <p>Nous cultivons un espace chaleureux dans le centre ville de Compiègne pour des cours tous niveaux,
            méditation et bains sonores et bien plus encore.</p>
        </div>

        <!-- Coordonnées visibles en gros -->
        <div style="text-align: center; margin-top: 25px;">
          <p style="font-size: 22px; font-weight: 700; color:#2c2a29; margin: 6px 0;">
            17 rue de Pierrefonds, 60200 Compiègne
          </p>
          <p style="font-size: 22px; font-weight: 700; color:#2c2a29; margin: 6px 0;">
            07 67 39 66 99
          </p>
        </div>

        <div style="text-align: center; margin-top: 15px;">
          <a class="btn btn-accent" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank"
            rel="noopener">Réservation</a>
        </div>
      </section>

      <!-- ORACLE SONORE (MOVED) -->
      <section class="oracle-section">
        <div class="wrap">
          <div class="kicker">RITUEL QUOTIDIEN</div>
          <h2>L'Oracle Sonore</h2>
          <p style="margin-bottom: 30px; color: var(--muted);">Frappez le Gong pour recevoir votre intention du jour.
          </p>

          <div class="gong-container" id="oracle-gong" onclick="strikeGong()">
            <div class="gong-visual">
              <img id="gong-img" src="" alt="Gong Sacré">
            </div>
          </div>

          <div id="oracle-result" class="oracle-result"></div>
          <button class="btn btn-primary" onclick="strikeGong()" style="margin-top: 20px;">Frapper le Gong</button>
        </div>
      </section>

      <!-- NEWSLETTER / CADEAU -->
      <section class="newsletter">
        <div class="wrap">
          <div class="newsbox">
            <h3>Recevez toutes nos actualités et promotions</h3>
            <!-- Début de la modification : L'iframe prend toute la largeur -->
            <div style="width: 100%; max-width: 500px; height: 200px; margin: 10px auto;">
              <iframe title="Inscription à la newsletter SoundYoga"
                src="https://www.compiegne.resa.soundyoga.fr/newsletter" style="width:100%; height:100%; border:0;"
                loading="lazy" scrolling="no">
              </iframe>
            </div>
            <!-- Fin de la modification -->

            <div style="text-align:center;">
              <a class="btn btn-accent" href="https://www.compiegne.resa.soundyoga.fr/gift-card" target="_blank"
                rel="noopener">Carte cadeau</a>

            </div>
          </div>
        </div>
      </section>

      <!-- NOUVELLE FEATURE : RETRAITE / ÉVÉNEMENT À LA UNE (PLEIN ÉCRAN) -->
      <section class="prop-section prop-fullscreen" id="story">
        <video class="video-bg" id="video-1" playsinline autoplay loop muted>
          <source src="https://video.wixstatic.com/video/818fcb_bc5fffa78d2846fb9d250ccd169775ba/1080p/mp4/file.mp4"
            type="video/mp4">
        </video>
        <button id="sound-1" class="sound-control" aria-label="Activer le son">🔇</button>
        <div class="content-wrap">
          <div class="sy-story-fade-copy">
            <div class="kicker">Centre de Yoga et Soins Sonores</div>
            <h2>
              <span>Trouvez votre Yoga</span>
            </h2>
            <p>jusqu'à 16 séances différentes par semaine</p>
          </div>

          <a href="https://www.compiegne.resa.soundyoga.fr/evenement" target="_blank" rel="noopener"
            class="btn-urgent">Agenda</a>
          <!-- <div class="reviews-container" id="reviews-1">-->
          <!--  <span class="review-text"></span>-->
          <!-- </div>-->
        </div>
      </section>

      <!-- GRILLE D’ÉVÉNEMENTS -->
      <section class="events" id="practice">
        <div class="wrap">
          <h2>Prochains Cours - Ateliers - Stages</h2>
          <div class="grid">
            <!-- Carte 1 -->
            <article class="card">
              <a class="thumb" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">
                <span class="badge">Stage</span>
                <img src="https://soundyoga.fr/wp-content/uploads/2025/08/thumbnail_Souffle_soundyoga_OK.jpg"
                  alt="Bain sonore en ligne">
              </a>
              <a class="title" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">Les stages
                2025–2026</a>
              <div class="dates"> 7 stages programmés sont disponibles à la réservation</div>
              <a class="link" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">Voir les
                dates</a>
              <!-- GAUGE INSERTION -->
              <div class="gauge-wrapper">
                <span class="gauge-label">🔥 Rempli à 80%</span>
                <div class="gauge-bg">
                  <div class="gauge-fill" style="width: 80%"></div>
                </div>
              </div>
            </article>

            <!-- Carte 2 -->
            <article class="card">
              <a class="thumb" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">
                <span class="badge" style="background:var(--badge-bleu)">Parent–enfant</span>
                <img
                  src="https://soundyoga.fr/wp-content/uploads/2025/08/Parent-enfants-inde-atelier-yoga-compiegne.jpg"
                  alt="Cours de yoga à Compiègne">
              </a>
              <a class="title" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener"> Atelier
                en famille – Voyage en Inde à travers les arts</a>
              <div class="dates">Forfait 6 ateliers disponibles</div>
              <a class="link" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank"
                rel="noopener">Réserver</a>
            </article>

            <!-- Carte 3 -->
            <article class="card">
              <a class="thumb" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">
                <span class="badge" style="background:var(--badge-gris)">Soins</span>
                <img src="https://soundyoga.fr/wp-content/uploads/2025/08/DiapSoundyoga-1.jpg"
                  alt="Méditation et respiration">
              </a>
              <a class="title" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener"> Soins au
                diapason – Calme & Clarté</a>
              <div class="dates">Accessibles avec votre carte de cours</div>
              <a class="link" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank"
                rel="noopener">Participer</a>
            </article>

            <!-- Carte 4 -->
            <article class="card">
              <a class="thumb" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">
                <span class="badge">Savoir rare</span>
                <img src="https://soundyoga.fr/wp-content/uploads/2025/08/sanskrit-yoga-compiegne.jpg"
                  alt="Atelier enfants">
              </a>
              <a class="title" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">Sanskrit –
                Boostez votre neuroplasticité</a>
              <div class="dates">2 séances par mois</div>
              <a class="link" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">Infos &
                réservations</a>
            </article>

            <!-- Carte 5 -->
            <article class="card">
              <a class="thumb" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">
                <span class="badge" style="background:var(--badge-bleu)">Mantra</span>
                <img src="https://soundyoga.fr/wp-content/uploads/2025/08/Chant-yoga-compiegne.jpg"
                  alt="Soirée bain sonore">
              </a>
              <a class="title" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">Yoga du
                son – Retrouver la joie</a>
              <div class="dates">Tous les mercredis à 20h</div>
              <a class="link" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank"
                rel="noopener">Réserver</a>
            </article>

            <!-- Carte 6 -->
            <article class="card">
              <a class="thumb" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">
                <span class="badge" style="background:var(--badge-rose)">Exceptionnel</span>
                <img src="https://static.wixstatic.com/media/818fcb_602bd4a58a064e599b4882559811de3d~mv2.jpeg"
                  alt="Retraite en nature">
              </a>
              <a class="title" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank"
                rel="noopener">Neurosciences & Méditation – Les secrets de l’univers</a>
              <div class="dates">Pour débutants et avancés</div>
              <a class="link" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank"
                rel="noopener">Découvrir</a>
            </article>
          </div>
        </div>
      </section>

      <!-- SECTION ÉCOLE (placeholder) -->
      <section id="school">
        <div class="wrap">
          <h2 style="font-size:clamp(26px,2.6vw,34px); margin-bottom:12px">Premier Centre de Yoga & Soins Sonores à
            Compiègne</h2>
          <p style="color:#5f5956; max-width:800px">Nous vous proposons une variété de pratiques pour vous ressourcer,
            que ce soit à travers les cours de Yoga Intégral ou lors de nos bains sonores immersifs. Découvrez également
            nos soins individuels au diapason et nos ateliers thématiques, comme les séances parents-enfants ou
            l'initiation aux chants sanskrits et bien plus encore.</p>
        </div>
      </section>

      <!-- AVIS (style Google + écriture) -->
      <section class="reviews" aria-labelledby="reviews-title">
        <div class="wrap">
          <div class="kicker">AVIS</div>
          <h2 id="reviews-title">Ils parlent de nous</h2>
          <article class="gcard" aria-live="polite">
            <header class="ghead">
              <div class="gavatar"><img id="rev-avatar" src="" alt=""></div>
              <div class="gwho">
                <div class="name" id="rev-name">—</div>
                <div class="meta" id="rev-meta">—</div>
              </div>
            </header>
            <div class="gstars" aria-label="Note 5 sur 5">
              <!-- étoiles Google-like -->
              <svg viewBox="0 0 24 24" fill="#fbbc05" aria-hidden="true">
                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
              </svg>
              <svg viewBox="0 0 24 24" fill="#fbbc05" aria-hidden="true">
                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
              </svg>
              <svg viewBox="0 0 24 24" fill="#fbbc05" aria-hidden="true">
                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
              </svg>
              <svg viewBox="0 0 24 24" fill="#fbbc05" aria-hidden="true">
                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
              </svg>
              <svg viewBox="0 0 24 24" fill="#fbbc05" aria-hidden="true">
                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
              </svg>
            </div>
            <div id="rev-text" class="gtext caret"></div>
            <footer class="gfoot">
              <span id="rev-date">—</span>
              <span class="source">Google</span>
            </footer>
          </article>
        </div>
      </section>

      <!-- ENGAGEMENTS -->
      <section class="engagements" aria-labelledby="eng-title">
        <div class="eng-wrap">
          <div class="eng">
            <div class="kicker">MISSION</div>
            <h2 id="eng-title">Votre centre de yoga s’engage</h2>
            <p class="baseline">Une pratique ouverte, sociale et citoyenne.</p>
            <ul class="pillars">
              <li>
                <b>Éducation & Culture</b> — Parce que nous croyons que chaque personne et chaque enfant détiennent un
                potentiel infini, nous avons à cœur de donner les clés pour comprendre et explorer le plus fascinant des
                outils : votre propre cerveau.
                À travers nos interventions en milieux scolaire et culturel (écoles, bibliothèques, musées), nous allons
                au-delà d'une simple initiation, nous proposons de véritables ateliers de sensibilisation aux
                neurosciences, adaptés aux plus jeunes...

                <span class="more-text">
                  <br><br>
                  Notre mission est de montrer, de manière ludique et accessible, comment fonctionne votre cerveau,
                  comment il apprend et comment il crée.
                  Nous transmettons des astuces et des techniques concrètes pour booster la concentration, améliorer
                  l'apprentissage et libérer la créativité.
                  C'est une invitation à devenir les architectes de votre propre intelligence.
                </span>

                <button class="read-more-btn" type="button">Lire plus</button>
              </li>

              <li>
                <b>Familles</b> — Inspirés par la pédagogie Montessori, nous croyons profondément à l'importance d'un
                accompagnement bienveillant et créatif pour les plus jeunes.
                C'est pourquoi notre centre est un lieu pensé pour les familles. Nous invitons les parents à partager
                une séance de Yoga ou de Bain Sonore avec leur enfant (5-14 ans), transformant la pratique en un moment
                de complicité partagée...

                <span class="more-text">
                  <br><br>
                  Cette année, nous enrichissons cette démarche avec une série d'ateliers en famille "Voyage en Inde à
                  travers les arts".
                  Tout au long de l'année, ces rendez-vous créatifs vous permettront d'explorer ensemble le dessin, le
                  chant, l'écriture, la langue et les instruments, pour une immersion culturelle et sensorielle unique.
                </span>

                <button class="read-more-btn" type="button">Lire plus</button>
              </li>

              <li>
                <b> Engagement Citoyen</b> — Nous croyons que le bien-être est un droit fondamental qui doit être
                accessible à tous.
                C'est pourquoi SoundYoga est bien plus qu'un centre de yoga, c'est un acteur citoyen, profondément
                investi dans la vie locale.
                En partenariat étroit avec la Ville de Compiègne et l'Agglomération de la Région de Compiègne, nous
                menons des actions concrètes pour tisser du lien social et apporter notre soutien là où il est le plus
                nécessaire...

                <span class="more-text">
                  <br><br>
                  Notre mission se concrétise par des actions de terrain : participation à la Nuit du Handicap, soutien
                  aux enfants en difficulté scolaire,
                  interventions régulières à la Maison des Parents et une contribution active à la vie associative et
                  artistique locale.
                </span>

                <button class="read-more-btn" type="button">Lire plus</button>
              </li>

            </ul>
            <div class="actions">
              <a class="btn btn-primary" href="https://www.compiegne.resa.soundyoga.fr/compiegne-yoga" target="_blank"
                rel="noopener">Voir nos actions</a>
            </div>
          </div>

          <figure class="eng-video" aria-label="Extraits vidéo de nos actions">
            <!-- Lecteur actuel + lecteur de pré-chargement (crossfade) -->
            <video class="engv current" playsinline muted autoplay loop preload="metadata"
              aria-label="Extrait vidéo"></video>
            <video class="engv next" playsinline muted preload="metadata" aria-hidden="true"></video>
            <figcaption class="sr-only">Extraits de nos ateliers, interventions et actions citoyennes.</figcaption>
            <button class="sound" type="button" aria-label="Activer le son"
              title="Activer/désactiver le son">🔊</button>
          </figure>
        </div>
      </section>

      <!-- PLANNING (Wix) -->
      <section class="schedule" aria-labelledby="schedule-title">
        <div class="wrap">
          <div class="kicker">VOTRE SEMAINE </div>
          <h2 id="schedule-title">Planning des cours</h2>

          <!-- Image pour la version mobile -->
          <div class="schedule-mobile-image">
            <a href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">
              <img
                src="https://static.wixstatic.com/media/818fcb_0ce17d51bf9340efb5ed9a3e8087573d~mv2.png/v1/crop/x_45,y_0,w_1330,h_1244/fill/w_554,h_518,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Planning2025-26.png"
                alt="Planning des cours 2025-2026">
            </a>
          </div>

          <!-- Planning interactif pour la version bureau -->
          <div class="schedule-desktop">
            <div class="toolbar">
              <button class="btn" id="prev-week">← Semaine -1</button>
              <button class="btn" id="this-week">Cette semaine</button>
              <button class="btn" id="next-week">Semaine +1 →</button>
              <span class="sp"></span>
              <span class="range" id="week-range">–</span>
            </div>
            <div class="timeline">
              <div class="week" id="week-grid"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- DOPAMINE PLAYGROUND (Moved Here) -->
      <section class="dopamine-playground" id="fun-slot">
        <div class="wrap">
          <div class="kicker">ZONE EXPÉRIMENTALE</div>
          <h2 style="margin-bottom: 40px;">Espace Détente</h2>

          <div class="playground-grid">


            <!-- HANDPAN -->
            <!-- HANDPAN (HTML DU MINI-HANDPAN) -->
            <div class="playground-item">
              <h3>Handpan Virtuel</h3>
              <p style="font-size: 14px; color: var(--muted); margin-bottom: 20px;">Touchez les notes pour jouer (D
                Kurd)</p>

              <!-- Bouton placé AVANT le bloc handpan -->
              <button id="btn-activate-hp" class="btn btn-primary" onclick="window.activateHandpanMode()"
                style="margin-bottom: 30px; position: relative; z-index: 200;">
                🎵 Ecouter la mélodie du handpan
              </button>

              <div id="handpan-block">
                <div id="hp-stage">
              
                  <!-- Les notes sont générées par le JS -->
                </div>
              </div>
            </div>

            <!-- KARMA WHEEL -->
          </div>
        </div>
  </div>
  </section>

  <!-- SECTION AJOUTÉE : PROPOSITION SPLIT SCREEN -->
  <section class="prop-section prop-split" id="prop-split-1">
    <div class="split-wrap">
      <div class="video-column">
        <video id="video-3" playsinline autoplay loop muted>
          <source src="https://video.wixstatic.com/video/818fcb_e863353cdefa40bbb7c6ebc818207782/720p/mp4/file.mp4"
            type="video/mp4">
        </video>
      </div>
      <div class="text-column">
        <div class="kicker">Nouveau</div>
        <h2>
          <span>Ateliers Créatifs <br>Voyage en Inde à travers les Arts</span>
          <span class="date">18 oct - 1 nov - 11 janv</span>
        </h2>
        <p>Et si vous pouviez voyager en Inde sans quitter Compiègne ?<br> <br> C'est la promesse de notre nouveau
          cycle d'ateliers créatifs, une série d'immersions sensorielles pour explorer la richesse de la culture
          indienne. <br> <br>Conçus pour les adultes et les enfants, ces rendez-vous sont une invitation à vous
          connecter à votre créativité, à découvrir des savoirs ancestraux et à partager un moment unique en famille
          ou entre amis. <br><br> Chaque atelier est une expérience complète et indépendante!</p>
        <a href="https://www.compiegne.resa.soundyoga.fr/event-details/stage-lappel-de-linde" target="_blank"
          rel="noopener" class="btn-text-link">Tout le matériel est fourni sur place. <br><br> Aucune expérience
          artistique n'est requise, seule votre curiosité est nécessaire. Rejoignez-nous pour une ou plusieurs
          escales de ce voyage inoubliable !<br><br> Les réservations sont ouvertes sur le planning en ligne. 
        </a>
        <!-- <div class="reviews-container" id="reviews-3"> 
              <span class="review-text"></span>
            </div>-->
      </div>
    </div>
  </section>

  <!-- STRUCTURE B — Parcours guidé (T7 Split photo) -->
  <section class="b-section" id="parcours">
    <div class="wrap">
      <div class="kicker">Parcours guidé</div>
      <h2>Trouver votre séance</h2>
      <div class="chips" id="b-chips"><!-- injecté par JS --></div>
      <div class="b-grid" id="b-grid"><!-- cartes injectées --></div>
    </div>
  </section>

  <!-- =======================
           ÉQUIPE
      ======================== -->
  <section class="team" id="team">
    <div class="wrap">
      <div class="kicker">Équipe</div>
      <h2>Notre histoire</h2>

      <!-- Rangée 1 : Larissa (bio + timeline) / vidéo -->
      <div class="team-grid">
        <article class="vcard">
          <header class="vhead">
            <img src="https://soundyoga.fr/wp-content/uploads/2025/02/Larissa_NewYear_4.avif" alt="Larissa Roy">
            <div>
              <div class="vname">LARISSA ROY</div>
              <div class="vquote">« Le son ouvre des espaces de clarté. »</div>
            </div>
          </header>
          <div class="vmeta">Professeure de Yoga — fondatrice</div>
          <p>Larissa offre un enseignement holistique qui embrasse les multiples facettes du yoga. Forte de plus de
            15 ans de pratique et bientôt 10 ans de transmission, elle guide ses élèves avec une expertise rare. Sa
            formation en musique l'a naturellement conduite à intégrer les Bains Sonores pour une expérience
            immersive. Certifiée en Sport-Santé, elle accompagne tous les âges en toute sécurité. Enfin, sa passion
            pour les langues, validée par un Master, lui a permis de créer un parcours unique d'apprentissage du
            Sanskrit.</p>
          <div class="vactions">
            <a class="btn btn-ghost" href="https://www.compiegne.resa.soundyoga.fr/">Planning</a>
          </div>
        </article>

        <figure class="reel" aria-label="Larissa — extrait vidéo">
          <video id="reel-larissa" playsinline muted preload="metadata"></video>
          <figcaption id="cap-larissa" class="cap type-caret" aria-live="polite"></figcaption>
        </figure>
      </div>

      <!-- Rangée 2 : Stephen (vidéo) / bio + timeline -->
      <div class="team-grid">
        <figure class="reel" aria-label="Stephen — extrait vidéo">
          <video id="reel-stephen" playsinline muted preload="metadata"></video>
          <figcaption id="cap-stephen" class="cap type-caret" aria-live="polite"></figcaption>
        </figure>

        <article class="vcard">
          <header class="vhead">
            <img src="https://soundyoga.fr/wp-content/uploads/2025/02/Stephen_site-e1703110256957.avif" alt="Stephen">
            <div>
              <div class="vname">STEPHEN</div>
              <div class="vquote">« La conscience se découvre dans l’attention. »</div>
            </div>
          </header>
          <div class="vmeta">Ingénieur biomédical & conférencier</div>
          <p>Ingénieur biomédical de formation, spécialiste de l’apprentissage et de l’IA. Depuis 2013, Stephen a
            donné de nombreux séminaires intitulés « L’horizon des idées », ainsi que des conférences autour de la
            méditation en France et au Luxembourg. Passionné par la conscience, il vous fera voyager avec simplicité
            dans des exercices de relaxation et de méditation.</p>
          <div class="timeline">
            <div class="t-item">
              <div class="t-line">ven • 18:30 — Voyage sonore</div>
              <div class="t-sub">Studio SoundYoga • 1 h</div>
            </div>
            <div class="t-item">
              <div class="t-line">dim • 09:30 — Méditation &amp; Neurosciences</div>
              <div class="t-sub">Studio SoundYoga • 1 h</div>
            </div>
          </div>
          <div class="vactions">
            <a class="btn btn-ghost" href="https://www.compiegne.resa.soundyoga.fr/">Planning</a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- =======================
           GALERIE PHOTO
      ======================== -->
  <section class="photo-gallery" id="photo-gallery">
    <div class="wrap">
      <div class="kicker" style="text-align:center;">SoundYoga en images</div>
      <h2 style="text-align:center;">Un lieu d'expériences</h2>
      <p style="text-align:center; color:var(--muted); max-width:700px; margin:0 auto 2rem;">
      </p>
      <div class="gallery-wrapper" id="photo-gallery-wrapper">
        <div class="gallery-side prev" aria-label="Image précédente"></div>
        <div class="gallery-container" aria-label="Image suivante">
          <div class="gallery-track"></div>
          <div class="gallery-caption"></div>
        </div>
        <div class="gallery-side next" aria-label="Image suivante"></div>
      </div>
    </div>
  </section>

  </main>
  </div>

  <!-- =================================================================== -->
  <!-- SECTION STORYTELLING AU SCROLL (placée avant le footer) -->
  <!-- =================================================================== -->
  <div class="scroll-indicator" id="scroll-indicator">
    Une histoire à découvrir...
    <span>↓</span>
  </div>

  <div class="story-container">
    <section class="story-section">
      <h1>Vous êtes encore là ?</h1>
    </section>
    <section class="story-section">
      <h1>Vous avez peut-être des questions ?</h1>
    </section>
    <section class="story-section">
      <h1>Vous vous demandez où nous trouver ?</h1>
    </section>
    <section class="story-section">
      <h1>Le studio se situe au centre-ville de Compiègne, au 17 rue de Pierrefonds.</h1>
    </section>
    <section class="story-section">
      <h1>Faut-il apporter son tapis ?</h1>
    </section>
    <section class="story-section">
      <h1>Nous avons tout ce qu'il faut et même plus ! Venez simplement avec votre tenue de sport.</h1>
    </section>
    <section class="story-section">
      <h1>Vous vous demandez quelle pratique est la mieux adaptée à votre situation ?</h1>
    </section>
    <section class="story-section">
      <h1>Yoga ? Bain sonore ? Soins au diapason ?</h1>
      <div class="input-group">
        <a href="#parcours" class="submit-btn" style="text-decoration: none;">Trouver votre séance</a>
      </div>

    </section>
    <section class="story-section">
      <h1>Pour une première séance découverte, il est recommandé de commencer par la magie d'un bain sonore.</h1>
    </section>
    <section class="story-section">
      <h1> C'est une porte d'entrée douce et puissante vers un bien-être profond.</h1>
    </section>
    <section class="story-section">
      <h1>Vous cherchez des informations sur notre prochaine retraite ?</h1>
    </section>
    <section class="story-section">
      <h1>
        <div style="display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap;">
          <video src="https://video.wixstatic.com/video/818fcb_4b85ad89af6449589caa9cef2d7f8671/480p/mp4/file.mp4"
            autoplay muted loop playsinline style="width: 200px; border-radius: 12px;"></video>
          <span>IMMERSION Yoga & Océan intérieur. 29 - 31 mai 2026, Baie de Somme.</span>
        </div>
      </h1>
      <div class="input-group">
        <a href="https://compiegne.resa.soundyoga.fr/retraite-ocean" target="_blank" rel="noopener" class="submit-btn"
          style="text-decoration: none;">En savoir plus</a>
      </div>

    </section>
    <section class="story-section">
      <h1>Vous êtes toujours là ?</h1>
    </section>
    <section class="story-section">
      <h1>Saviez-vous qu'après chaque séance, une tisane vous est offerte ?</h1>
    </section>
    <section class="story-section">
      <h1>Si vous êtes encore là, je peux vous raconter une histoire...</h1>
    </section>
    <section class="story-section">
      <h1>Quand nous sommes arrivés à Compiègne, il n'y avait aucun studio de yoga. Quelques professeurs particuliers,
        des salles de sport, mais aucun lieu qui y soit spécifiquement dédié.</h1>
    </section>
    <section class="story-section">
      <h1>Notre première réaction fut la surprise. Après avoir parcouru la ville, une idée s'est imposée : nous allions
        ouvrir le premier studio de yoga à Compiègne.</h1>
    </section>
    <section class="story-section">
      <h1>L'aventure a commencé, avec de nombreux défis, et elle continue encore aujourd'hui.</h1>
    </section>
    <section class="story-section">
      <h1>Mais le plus important pour nous...</h1>
    </section>
    <section class="story-section">
      <h1>...c'est d'être à votre service !</h1>
    </section>
    <section class="story-section">
      <h1>Nous sommes ouverts 7j/7, même pendant les vacances, pour vous !</h1>
    </section>
    <section class="story-section">
      <h1>D'ailleurs, nos partenaires peuvent vous parler de nos bains sonores et de nos instruments pendant des heures
        ! </h1>
    </section>
    <section class="story-section">
      <br>
      <span style="color: white; font-weight: bold;"> Vous avec une question précise ?</span> <br><br>
      <h1>
        Vous pouvez nous appeler au numéro suivant : <br> 07 67 39 66 99
      </h1>
    </section>
    <section class="story-section">
      <h1>
        Nous avons une grande surprise pour vous...
        <span class="small-text">Une grande nouveauté arrive très bientôt ! Pour ne rien manquer, suivez-nous sur nos
          réseaux :</span>
        <div style="margin-top: 1rem; display: flex; gap: 1rem; justify-content: center; font-size: 1.5rem;">
          <a href="https://www.facebook.com/soundyoga.fr" target="_blank" rel="noopener"
            style="color: white;">Facebook</a>
          <a href="https://www.instagram.com/soundyoga.fr/" target="_blank" rel="noopener"
            style="color: white;">Instagram</a>
          <a href="https://www.youtube.com/channel/UCieH_AdmTUr-eO5eIXG7e0A" target="_blank" rel="noopener"
            style="color: white;">YouTube</a>
        </div>
      </h1>
    </section>
    <section class="story-section">
      <h1>
        Puisque vous êtes encore là, voici un code promo de -5 % sur tout le site !
        <span class="promo-code">FanSoundYoga5</span>
      </h1>
    </section>
    <section class="story-section">
      <h1> Si vous voulez d'autres promos <br> inscrivez-vous à notre newsletter 😊</h1>
      <div style="width: 100%; max-width: 500px; height: 200px; margin: 1rem auto 0;">
        <iframe title="Inscription à la newsletter SoundYoga" src="https://www.compiegne.resa.soundyoga.fr/newsletter"
          style="width:100%; height:100%; border:0; border-radius: 16px;" loading="lazy" scrolling="no">
        </iframe>
      </div>
    </section>


  </div>

  <!-- PARTENAIRES -->
  <section class="partners" aria-labelledby="partners-title">
    <div class="wrap">
      <div class="kicker">PARTENAIRES</div>
      <h2 id="partners-title">Ils ont fait confiance à SoundYoga</h2>

      <!-- Spotlight (3 logos aléatoires / 4s). A11y : décoratif (grid exhaustif plus bas). -->
      <div class="logo-spotlight" id="logo-spotlight" aria-hidden="true">
        <div class="logo-card"><img loading="eager" fetchpriority="high" decoding="async"
            src="https://soundyoga.fr/wp-content/uploads/2024/04/Compi%C3%A8gne.png" alt="Ville de Compiègne"></div>
        <div class="logo-card"><img loading="eager" fetchpriority="high" decoding="async"
            src="https://soundyoga.fr/wp-content/uploads/2024/04/venette-692x705.jpg" alt="Ville de Venette"></div>
        <div class="logo-card"><img loading="eager" fetchpriority="high" decoding="async"
            src="https://soundyoga.fr/wp-content/uploads/2024/04/BDE_UTC-705x705.png" alt="BDE UTC"></div>
      </div>
    </div>
  </section>

  <!-- CONSOLE DE DÉBOGAGE -->
  <!-- <div id="debug-console" style="position: fixed; bottom: 10px; left: 10px; width: 350px; height: 200px; background-color: rgba(0,0,0,0.8); color: #0f0; font-family: monospace; font-size: 12px; padding: 8px; border-radius: 5px; overflow-y: auto; z-index: 9999; border: 1px solid #333;"> -->
  <!-- <div style="padding-bottom: 4px; border-bottom: 1px solid #555; font-weight: bold; color: white;">Console de débogage du Pop-up</div> -->
  <!-- </div> -->


  <footer>
    <div class="wrap foot">
      <div>
        <h4>SoundYoga</h4>
        <p>17 rue de Pierrefonds<br>60200 Compiègne</p>
        <p><strong> 07 67 39 66 99</strong></p>
        <p><a href="mailto:contact@soundyoga.fr">contact@soundyoga.fr</a></p>
        <p><a class="btn btn-primary" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank"
            rel="noopener">Réserver en ligne</a></p>
      </div>
      <div>
        <h4>Liens</h4>
        <p><a href="#practice">Pratique</a></p>
        <p><a href="#school">École</a></p>
        <p><a href="https://www.compiegne.resa.soundyoga.fr/dossier-presse" target="_blank" rel="noopener">Dossier
            Presse</a></p>
      </div>
      <div>
        <h4>Carte Cadeau</h4>
        <p>Offrez un moment d’exception.</p>
        <p><a class="btn btn-accent" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank"
            rel="noopener">Offrir</a></p>
      </div>
    </div>
    <!-- Ligne réseaux sociaux + copyright centré -->
    <div style="text-align: center; margin-top: 20px;">
      <!-- Icônes réseaux sociaux -->
      <div style="display: inline-flex; gap: 15px; margin-bottom: 8px;">
        <a href="https://www.facebook.com/soundyoga.fr/" target="_blank" rel="noopener" aria-label="Facebook">
          <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook"
            style="width:28px; height:28px;">
        </a>
        <a href="https://www.youtube.com/channel/UCieH_AdmTUr-eO5eIXG7e0A" target="_blank" rel="noopener"
          aria-label="YouTube">
          <img src="https://cdn-icons-png.flaticon.com/512/1384/1384060.png" alt="YouTube"
            style="width:28px; height:28px;">
        </a>
        <a href="https://www.instagram.com/soundyoga.fr/" target="_blank" rel="noopener" aria-label="Instagram">
          <img src="https://cdn-icons-png.flaticon.com/512/1384/1384063.png" alt="Instagram"
            style="width:28px; height:28px;">
        </a>
      </div>
      </a>
    </div>
    <!-- Copyright -->
    <div style="font-size: 14px; color: #000; margin-top: 5px;">
      © 2025 par Sound Yoga Compiègne. Créé avec amour ❤️.
      <div class="zen-lotus" onclick="triggerEasterEgg(this)">🪷</div>
    </div>
    </div>


  </footer>

  <script>
    // Burger mobile (corrigé pour #burger-btn + #mobile-menu)
    const burgerBtn = document.getElementById('burger-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const closeBtn = document.getElementById('close-btn');

    function toggleMenu(open) {
      if (!burgerBtn || !mobileMenu) return;
      burgerBtn.classList.toggle('is-active', !!open);
      mobileMenu.classList.toggle('is-active', !!open);
      burgerBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
      mobileMenu.setAttribute('aria-hidden', open ? 'false' : 'true');
    }
    burgerBtn?.addEventListener('click', (e) => {
      e.stopPropagation();
      const isOpen = mobileMenu.classList.contains('is-active');
      toggleMenu(!isOpen);
    });
    closeBtn?.addEventListener('click', () => toggleMenu(false));
    document.addEventListener('click', (e) => {
      const inMenu = mobileMenu?.contains(e.target);
      const onBurger = burgerBtn?.contains(e.target);
      if (mobileMenu?.classList.contains('is-active') && !inMenu && !onBurger) {
        toggleMenu(false);

      }
    });


    // Header mobile : disparaît en descendant, réapparaît dès que l'on remonte.
    (function () {
      const mobileHeader = document.querySelector('.sidebar');
      const mobileQuery = window.matchMedia('(max-width: 1024px)');
      if (!mobileHeader) return;

      let lastScrollY = window.scrollY;
      const directionThreshold = 6;

      function updateMobileHeaderOnScroll() {
        if (!mobileQuery.matches) {
          mobileHeader.classList.remove('sy-mobile-header-hidden');
          lastScrollY = window.scrollY;
          return;
        }

        const currentScrollY = Math.max(0, window.scrollY);
        const delta = currentScrollY - lastScrollY;

        // Le menu ouvert doit toujours garder son header visible.
        if (mobileMenu?.classList.contains('is-active')) {
          mobileHeader.classList.remove('sy-mobile-header-hidden');
          lastScrollY = currentScrollY;
          return;
        }

        if (currentScrollY <= 8) {
          mobileHeader.classList.remove('sy-mobile-header-hidden');
        } else if (delta > directionThreshold) {
          mobileHeader.classList.add('sy-mobile-header-hidden');
          lastScrollY = currentScrollY;
        } else if (delta < -directionThreshold) {
          mobileHeader.classList.remove('sy-mobile-header-hidden');
          lastScrollY = currentScrollY;
        }
      }

      window.addEventListener('scroll', updateMobileHeaderOnScroll, { passive: true });
      mobileQuery.addEventListener?.('change', updateMobileHeaderOnScroll);
      updateMobileHeaderOnScroll();
    })();
 <!--    // === COMPTEUR DU BANDEAU PROMOTIONNEL ===
    // (function () {
   //    const countdownEl = document.getElementById('banner-countdown');
  //     if (!countdownEl) return;

  //     const countdownEndDate = new Date("Sep 14, 2025 00:00:00").getTime();

   //    const interval = setInterval(() => {
   //      const now = new Date().getTime();
   //      const distance = countdownEndDate - now;

    //     if (distance < 0) {
   //        clearInterval(interval);
   //        countdownEl.textContent = "Offre terminée !";
  //         return;
   //      }
   //      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  //       const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  //       const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  //       const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  //       countdownEl.textContent = `Fin dans : ${days}j ${hours}h ${minutes}m ${seconds}s`;
 //      }, 1000);
   //  })(); -->

    // === HERO SLIDER FTP V2 : manifests V2 + WebP responsive + buffer circulaire de 3 images ===
    (function () {
      "use strict";

      const frame = document.querySelector('.hero .frame');
      const slider = document.getElementById('hero-slider');
      if (!frame || !slider) return;

      const prevButton = frame.querySelector('.slider-btn.prev');
      const nextButton = frame.querySelector('.slider-btn.next');
      const dotsContainer = frame.querySelector('.slider-dots');

      const HERO_BASE_URL = '/header-images';
      const HERO_DELAY_MS = 5000;
      const HERO_FADE_MS = 600;

      // Les dossiers correspondent exactement aux dossiers FTP et restent en minuscules.
      const HERO_FOLDERS = [
        'bainssonores',
        'festivales',
        'sallesdeyoga',
        'yoga',
        'stages',
        'atelier',
        'enfants',
        'voyageslongs',
        'handpan',
        'sanskrit',
        'immmersionscourtes'
      ];

      const HERO_FOLDER_ALTS = {
        bainssonores: 'Bains sonores et gongs à SoundYoga Compiègne',
        festivales: 'Festival et événements SoundYoga',
        sallesdeyoga: 'Studio et salles de yoga SoundYoga à Compiègne',
        yoga: 'Yoga à SoundYoga Compiègne',
        stages: 'Stages de yoga et bien-être SoundYoga',
        atelier: 'Ateliers SoundYoga à Compiègne',
        enfants: 'Yoga et ateliers pour enfants à SoundYoga',
        voyageslongs: 'Voyages et retraites SoundYoga',
        handpan: 'Handpan et musique à SoundYoga',
        sanskrit: 'Sanskrit à SoundYoga Compiègne',
        immmersionscourtes: 'Immersions courtes SoundYoga'
      };

      // Textes associés strictement au sous-dossier de la photo.
      const HERO_FOLDER_TEXTS = {
        bainssonores: [
          {
            eyebrow: 'Bains sonores',
            title: 'Quand le son devient une expérience.',
            desc: 'Gongs, vibrations et instruments acoustiques composent des séances immersives pensées pour faire découvrir l’écoute autrement.',
            tags: ['Bains sonores', 'Compiègne']
          },
          {
            eyebrow: 'Bains sonores',
            title: 'Écouter. Ressentir. Vibrer.',
            desc: 'Une immersion sonore où les gongs et les instruments acoustiques occupent pleinement l’espace.',
            tags: ['Gongs', 'Immersion sonore']
          }
        ],
        festivales: [
          {
            eyebrow: 'Festivals & rencontres',
            title: 'SoundYoga sort aussi du studio.',
            desc: 'Festivals, événements culturels et rencontres nous permettent de faire voyager le yoga et le son dans des lieux inattendus.',
            tags: ['Événements', 'Oise & ailleurs']
          },
          {
            eyebrow: 'Festivals & rencontres',
            title: 'Le yoga et le son rencontrent le public.',
            desc: 'Des expériences imaginées hors du studio, au croisement de la pratique, de la musique et des événements culturels.',
            tags: ['Festivals', 'Rencontres']
          }
        ],
        sallesdeyoga: [
          {
            eyebrow: 'Studio SoundYoga · Compiègne',
            title: 'Un lieu pensé pour ralentir autrement.',
            desc: 'Au cœur de Compiègne, notre studio réunit yoga, méditation et expériences sonores dans un même espace.',
            tags: ['Compiègne', 'Studio SoundYoga']
          },
          {
            eyebrow: 'Studio SoundYoga · Compiègne',
            title: 'Un espace consacré au yoga et au son.',
            desc: 'Un lieu chaleureux au centre de Compiègne pour pratiquer, écouter et prendre le temps.',
            tags: ['17 rue de Pierrefonds', 'Depuis 2023']
          }
        ],
        yoga: [
          {
            eyebrow: 'Yoga',
            title: 'Bouger, respirer, ressentir.',
            desc: 'Des pratiques accessibles et progressives pour explorer le mouvement, la respiration et l’attention dans un cadre chaleureux.',
            tags: ['Cours collectifs', 'Débutants bienvenus']
          },
          {
            eyebrow: 'Yoga',
            title: 'Une pratique qui évolue avec vous.',
            desc: 'Explorer le mouvement et la respiration à travers des cours pensés pour différents niveaux de pratique.',
            tags: ['Tous niveaux', 'Compiègne']
          }
        ],
        stages: [
          {
            eyebrow: 'Stages',
            title: 'Prendre le temps d’aller plus loin.',
            desc: 'Des temps de pratique plus longs pour approfondir, expérimenter et découvrir autrement.',
            tags: ['Stages', 'Approfondir']
          },
          {
            eyebrow: 'Stages',
            title: 'Une pratique qui s’approfondit.',
            desc: 'Des rendez-vous dédiés pour explorer un thème avec davantage de temps et de continuité.',
            tags: ['Pratique', 'Découverte']
          }
        ],
        atelier: [
          {
            eyebrow: 'Ateliers',
            title: 'Expérimenter, découvrir, partager.',
            desc: 'Des ateliers thématiques pour ouvrir de nouvelles portes autour du yoga, du son et de la pratique.',
            tags: ['Ateliers', 'Découverte']
          },
          {
            eyebrow: 'Ateliers',
            title: 'Explorer autrement.',
            desc: 'Des formats ponctuels pour rencontrer une pratique, un thème ou une expérience nouvelle.',
            tags: ['Expériences', 'Compiègne']
          }
        ],
        enfants: [
          {
            eyebrow: 'Enfants & familles',
            title: 'Découvrir ensemble, autrement.',
            desc: 'Ateliers créatifs, yoga, sons et culture deviennent des terrains de découverte à partager en famille.',
            tags: ['Parents-enfants', 'Ateliers créatifs']
          },
          {
            eyebrow: 'Enfants & familles',
            title: 'Grandir aussi par l’expérience.',
            desc: 'Des moments adaptés aux enfants et aux familles pour bouger, écouter, créer et partager.',
            tags: ['Enfants', 'Familles']
          }
        ],
        voyageslongs: [
          {
            eyebrow: 'Voyages & immersions',
            title: 'Parfois, la pratique commence en partant.',
            desc: 'Des voyages plus lointains pensés comme une rencontre avec un lieu, une culture et une pratique.',
            tags: ['Voyages', 'Immersion']
          },
          {
            eyebrow: 'Voyages',
            title: 'Changer de lieu pour changer de regard.',
            desc: 'Des expériences de voyage où la pratique se mêle à la découverte d’un territoire et de sa culture.',
            tags: ['Retraites', 'Découverte']
          }
        ],
        handpan: [
          {
            eyebrow: 'Handpan',
            title: 'Écouter avant même de jouer.',
            desc: 'Découvrir le handpan par le son, le rythme et une approche sensible de l’instrument.',
            tags: ['Handpan', 'Musique']
          },
          {
            eyebrow: 'Handpan',
            title: 'Le rythme au bout des doigts.',
            desc: 'Une rencontre avec un instrument intuitif où le geste et l’écoute avancent ensemble.',
            tags: ['Instrument', 'Découverte']
          }
        ],
        sanskrit: [
          {
            eyebrow: 'Sanskrit & transmission',
            title: 'Explorer une langue qui traverse les siècles.',
            desc: 'Le sanskrit devient une porte d’entrée vers la culture, la mémoire, le son et une autre manière d’apprendre.',
            tags: ['Cours & ateliers', 'Culture']
          },
          {
            eyebrow: 'Sanskrit',
            title: 'Une langue à écouter autant qu’à apprendre.',
            desc: 'Découvrir le sanskrit à travers ses sons, sa structure et les traditions qui l’accompagnent.',
            tags: ['Sanskrit', 'Transmission']
          }
        ],
        immmersionscourtes: [
          {
            eyebrow: 'Immersions courtes',
            title: 'S’accorder une vraie parenthèse.',
            desc: 'Quelques jours pour prendre le temps de pratiquer, d’écouter et de changer de rythme.',
            tags: ['Immersion', 'Week-end']
          },
          {
            eyebrow: 'Immersions courtes',
            title: 'Quelques jours hors du rythme habituel.',
            desc: 'Des formats courts conçus pour vivre la pratique avec davantage de temps et de continuité.',
            tags: ['Retraite courte', 'Pratique']
          }
        ]
      };

      const HERO_DESIGNS = [1, 7, 4];

      function preparePresentations(pool) {
        let previousDesign = null;
        const lastTextByFolder = new Map();

        return pool.map(item => {
          const availableDesigns = HERO_DESIGNS.filter(design => design !== previousDesign);
          const design = availableDesigns[Math.floor(Math.random() * availableDesigns.length)];
          previousDesign = design;

          const texts = HERO_FOLDER_TEXTS[item.folder] || [];
          let textIndex = 0;

          if (texts.length > 1) {
            const previousTextIndex = lastTextByFolder.get(item.folder);
            const indexes = texts
              .map((_, index) => index)
              .filter(index => index !== previousTextIndex);
            textIndex = indexes[Math.floor(Math.random() * indexes.length)];
          }

          lastTextByFolder.set(item.folder, textIndex);

          const copy = texts[textIndex] || {
            eyebrow: item.alt,
            title: item.alt,
            desc: '',
            tags: []
          };

          return {
            ...item,
            presentation: {
              design,
              copy
            }
          };
        });
      }

      /*
        MANIFEST.JSON VERSION 2 ATTENDU DANS CHAQUE DOSSIER :

        {
          "version": 2,
          "images": [
            "yoga-compiegne-studioyoga-001",
            "yoga-bienetre-yogaoise-002"
          ]
        }

        Pour chaque identifiant, le script Python V2 génère :
          identifiant-720.webp
          identifiant-1280.webp
          identifiant-1920.webp

        Le navigateur reçoit :
          <= 767 px   : 720.webp
          768-1279 px : 1280.webp
          >= 1280 px  : 1920.webp

        Seulement trois <img> existent simultanément : précédente, actuelle, suivante.
      */

      let imagePool = [];
      let currentIndex = 0;
      let timer = null;
      let transitionLocked = false;

      let previousSlot = null;
      let currentSlot = null;
      let nextSlot = null;

      function shuffle(array) {
        const copy = [...array];
        for (let i = copy.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [copy[i], copy[j]] = [copy[j], copy[i]];
        }
        return copy;
      }

      function normalizeIndex(index) {
        const length = imagePool.length;
        if (!length) return 0;
        return ((index % length) + length) % length;
      }

      function buildResponsiveItem(folder, rawId) {
        if (typeof rawId !== 'string') return null;

        let id = rawId.trim();
        if (!id) return null;

        // Tolérance : si une extension a été laissée par erreur, on garde uniquement le nom de base.
        id = id.replace(/\.(?:jpe?g|png|webp|avif|gif)$/i, '');

        const safeId = encodeURIComponent(id);
        const base = `${HERO_BASE_URL}/${folder}/${safeId}`;

        return {
          id,
          folder,
          alt: HERO_FOLDER_ALTS[folder] || 'SoundYoga Compiègne',
          src720: `${base}-720.webp`,
          src1280: `${base}-1280.webp`,
          src1920: `${base}-1920.webp`
        };
      }

      async function readFolderManifest(folder) {
        const manifestUrl = `${HERO_BASE_URL}/${folder}/manifest.json`;

        try {
          const response = await fetch(manifestUrl, { cache: 'no-store' });
          if (!response.ok) return [];

          const data = await response.json();
          if (!data || !Array.isArray(data.images)) return [];

          return data.images
            .map(id => buildResponsiveItem(folder, id))
            .filter(Boolean);
        } catch (error) {
          console.warn(`[Hero V2] Manifest indisponible : ${manifestUrl}`, error);
          return [];
        }
      }

      async function buildImagePool() {
        const manifests = await Promise.all(
          HERO_FOLDERS.map(folder => readFolderManifest(folder))
        );

        imagePool = preparePresentations(shuffle(manifests.flat()));
      }

      function createSlot() {
        const slide = document.createElement('div');
        slide.className = 'slide';
        slide.setAttribute('aria-hidden', 'true');

        const picture = document.createElement('picture');

        const mobileSource = document.createElement('source');
        mobileSource.media = '(max-width: 767px)';
        mobileSource.type = 'image/webp';
        mobileSource.dataset.variant = '720';

        const mediumSource = document.createElement('source');
        mediumSource.media = '(max-width: 1279px)';
        mediumSource.type = 'image/webp';
        mediumSource.dataset.variant = '1280';

        const img = document.createElement('img');
        img.alt = 'SoundYoga Compiègne';
        img.decoding = 'async';
        img.loading = 'eager';
        img.fetchPriority = 'low';

        picture.appendChild(mobileSource);
        picture.appendChild(mediumSource);
        picture.appendChild(img);
        slide.appendChild(picture);

        const copyWrap = document.createElement('div');
        copyWrap.className = 'hero-copy-wrap';

        const copy = document.createElement('div');
        copy.className = 'hero-copy';
		
        const eyebrow = document.createElement('div');
        eyebrow.className = 'hero-copy-eyebrow';

        const title = document.createElement('h1');
        title.className = 'hero-copy-title';

        const desc = document.createElement('p');
        desc.className = 'hero-copy-desc';

        const tags = document.createElement('div');
        tags.className = 'hero-copy-tags';

        copy.append(eyebrow, title, desc, tags);
        copyWrap.appendChild(copy);
        slide.appendChild(copyWrap);

        slider.appendChild(slide);

        return slide;
      }

      function setSlotImage(slot, poolIndex, priority = 'low') {
        if (!slot || !imagePool.length) return;

        const normalizedIndex = normalizeIndex(poolIndex);
        const item = imagePool[normalizedIndex];

        const mobileSource = slot.querySelector('source[data-variant="720"]');
        const mediumSource = slot.querySelector('source[data-variant="1280"]');
        const img = slot.querySelector('img');

        // L'ordre est volontaire : priorité et métadonnées avant changement des URL.
        img.fetchPriority = priority;
        img.alt = item.alt;

        slot.dataset.poolIndex = String(normalizedIndex);
        slot.dataset.folder = item.folder;
        slot.dataset.imageId = item.id;

        mobileSource.srcset = item.src720;
        mediumSource.srcset = item.src1280;
        img.src = item.src1920;

        const presentation = item.presentation || {};
        const design = presentation.design || 1;
        const copy = presentation.copy || {};

        slot.classList.remove('hero-design-1', 'hero-design-4', 'hero-design-7');
        slot.classList.add(`hero-design-${design}`);
        slot.dataset.design = String(design);

        const eyebrow = slot.querySelector('.hero-copy-eyebrow');
        const title = slot.querySelector('.hero-copy-title');
        const desc = slot.querySelector('.hero-copy-desc');
        const tags = slot.querySelector('.hero-copy-tags');

        if (eyebrow) eyebrow.textContent = copy.eyebrow || '';
        if (title) title.textContent = copy.title || '';
        if (desc) {
          desc.textContent = copy.desc || '';
          desc.hidden = !copy.desc;
        }

        if (tags) {
          tags.innerHTML = '';
          const values = Array.isArray(copy.tags) ? copy.tags : [];
          values.forEach(value => {
            const tag = document.createElement('span');
            tag.textContent = value;
            tags.appendChild(tag);
          });
          tags.hidden = values.length === 0;
        }
      }

      function setActiveSlot(slot) {
        [previousSlot, currentSlot, nextSlot].forEach(candidate => {
          if (!candidate) return;
          const active = candidate === slot;
          candidate.classList.toggle('active', active);
          candidate.setAttribute('aria-hidden', active ? 'false' : 'true');
        });
      }

      function updateDots() {
        if (!dotsContainer || !imagePool.length) return;

        const buttons = Array.from(dotsContainer.children);
        buttons.forEach(button => button.classList.remove('active'));

        // Les trois points représentent strictement le buffer : précédente / actuelle / suivante.
        if (buttons[1]) buttons[1].classList.add('active');

        if (buttons[0]) {
          buttons[0].setAttribute(
            'aria-label',
            `Image précédente (${normalizeIndex(currentIndex - 1) + 1} sur ${imagePool.length})`
          );
        }

        if (buttons[1]) {
          buttons[1].setAttribute(
            'aria-label',
            `Image actuelle (${currentIndex + 1} sur ${imagePool.length})`
          );
        }

        if (buttons[2]) {
          buttons[2].setAttribute(
            'aria-label',
            `Image suivante (${normalizeIndex(currentIndex + 1) + 1} sur ${imagePool.length})`
          );
        }
      }

      function buildThreeDots() {
        if (!dotsContainer) return;

        dotsContainer.innerHTML = '';

        const previousDot = document.createElement('button');
        previousDot.type = 'button';
        previousDot.setAttribute('role', 'tab');
        previousDot.addEventListener('click', () => goPrevious());

        const currentDot = document.createElement('button');
        currentDot.type = 'button';
        currentDot.setAttribute('role', 'tab');
        currentDot.setAttribute('aria-disabled', 'true');

        const nextDot = document.createElement('button');
        nextDot.type = 'button';
        nextDot.setAttribute('role', 'tab');
        nextDot.addEventListener('click', () => goNext());

        dotsContainer.append(previousDot, currentDot, nextDot);
      }

      function stop() {
        if (timer) {
          clearInterval(timer);
          timer = null;
        }
      }

      function start() {
        stop();
        if (imagePool.length <= 1) return;
        timer = setInterval(() => goNext(), HERO_DELAY_MS);
      }

      function finishTransition(callback) {
        window.setTimeout(() => {
          callback();
          transitionLocked = false;
          start();
        }, HERO_FADE_MS + 40);
      }

      function toggleTwoImages() {
        if (transitionLocked || imagePool.length !== 2) return;
        transitionLocked = true;
        stop();

        const targetSlot = nextSlot;

        currentSlot.classList.remove('active');
        currentSlot.setAttribute('aria-hidden', 'true');
        targetSlot.classList.add('active');
        targetSlot.setAttribute('aria-hidden', 'false');

        finishTransition(() => {
          const oldCurrentSlot = currentSlot;
          currentSlot = targetSlot;
          nextSlot = oldCurrentSlot;
          previousSlot = nextSlot;
          currentIndex = normalizeIndex(currentIndex + 1);
          setActiveSlot(currentSlot);
          updateDots();
        });
      }

      function goNext() {
        if (imagePool.length === 2) {
          toggleTwoImages();
          return;
        }

        if (transitionLocked || imagePool.length <= 1) return;
        transitionLocked = true;
        stop();

        // L'image suivante est déjà l'une des trois images chargées.
        currentSlot.classList.remove('active');
        currentSlot.setAttribute('aria-hidden', 'true');
        nextSlot.classList.add('active');
        nextSlot.setAttribute('aria-hidden', 'false');

        finishTransition(() => {
          const reusableSlot = previousSlot;

          previousSlot = currentSlot;
          currentSlot = nextSlot;
          nextSlot = reusableSlot;

          currentIndex = normalizeIndex(currentIndex + 1);

          // L'ancienne image précédente est remplacée uniquement par la nouvelle image suivante.
          setSlotImage(nextSlot, currentIndex + 1, 'low');
          setActiveSlot(currentSlot);
          updateDots();
        });
      }

      function goPrevious() {
        if (imagePool.length === 2) {
          toggleTwoImages();
          return;
        }

        if (transitionLocked || imagePool.length <= 1) return;
        transitionLocked = true;
        stop();

        // L'image précédente est déjà l'une des trois images chargées.
        currentSlot.classList.remove('active');
        currentSlot.setAttribute('aria-hidden', 'true');
        previousSlot.classList.add('active');
        previousSlot.setAttribute('aria-hidden', 'false');

        finishTransition(() => {
          const reusableSlot = nextSlot;

          nextSlot = currentSlot;
          currentSlot = previousSlot;
          previousSlot = reusableSlot;

          currentIndex = normalizeIndex(currentIndex - 1);

          // L'ancienne image suivante est remplacée uniquement par la nouvelle image précédente.
          setSlotImage(previousSlot, currentIndex - 1, 'low');
          setActiveSlot(currentSlot);
          updateDots();
        });
      }

      function initOneImage() {
        currentSlot = createSlot();
        setSlotImage(currentSlot, 0, 'high');
        currentSlot.classList.add('active');
        currentSlot.setAttribute('aria-hidden', 'false');

        if (prevButton) prevButton.disabled = true;
        if (nextButton) nextButton.disabled = true;
        if (dotsContainer) dotsContainer.innerHTML = '';
      }

      function initTwoImages() {
        // Avec seulement deux images, deux slots suffisent : aucune troisième ressource n'est créée.
        currentSlot = createSlot();
        nextSlot = createSlot();
        previousSlot = nextSlot;

        setSlotImage(currentSlot, 0, 'high');
        setSlotImage(nextSlot, 1, 'low');
        currentSlot.classList.add('active');
        currentSlot.setAttribute('aria-hidden', 'false');

        buildThreeDots();
        updateDots();
      }

      function initThreeImageBuffer() {
        previousSlot = createSlot();
        currentSlot = createSlot();
        nextSlot = createSlot();

        setSlotImage(previousSlot, imagePool.length - 1, 'low');
        setSlotImage(currentSlot, 0, 'high');
        setSlotImage(nextSlot, 1, 'low');

        setActiveSlot(currentSlot);
        buildThreeDots();
        updateDots();
      }

      prevButton?.addEventListener('click', () => goPrevious());
      nextButton?.addEventListener('click', () => goNext());

      frame.addEventListener('mouseenter', stop);
      frame.addEventListener('mouseleave', start);
      frame.addEventListener('focusin', stop);
      frame.addEventListener('focusout', start);

      let pointerStartX = null;

      slider.addEventListener('pointerdown', event => {
        pointerStartX = event.clientX;
      });

      slider.addEventListener('pointerup', event => {
        if (pointerStartX === null) return;

        const deltaX = event.clientX - pointerStartX;
        pointerStartX = null;

        if (Math.abs(deltaX) <= 40) return;

        if (deltaX < 0) goNext();
        else goPrevious();
      });

      slider.addEventListener('pointercancel', () => {
        pointerStartX = null;
      });

      async function initHeroSlider() {
        await buildImagePool();

        if (!imagePool.length) {
          console.error('[Hero V2] Aucune image trouvée dans les manifest.json version 2.');
          return;
        }

        slider.innerHTML = '';
        currentIndex = 0;

        if (imagePool.length === 1) {
          initOneImage();
          return;
        }

        if (imagePool.length === 2) {
          initTwoImages();
          start();
          return;
        }

        initThreeImageBuffer();
        start();
      }

      initHeroSlider();
    })();

    // === PARTENAIRES : Spotlight 3 logos aléatoires toutes les 4s ===
    (function () {
      const spotlight = document.getElementById('logo-spotlight');
      if (!spotlight) return;
      const slots = Array.from(spotlight.querySelectorAll('img'));
      // Pool figée (on a retiré la grille statique)
      const pool = [
        { src: "https://soundyoga.fr/wp-content/uploads/2024/04/Compi%C3%A8gne.png", alt: "Ville de Compiègne" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/04/venette-692x705.jpg", alt: "Ville de Venette" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/04/BDE_UTC-705x705.png", alt: "BDE UTC" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/04/logo-bibliotheques-compiegne.jpg", alt: "Bibliothèques de la Ville de Compiègne" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/04/CompiegneMDP.png", alt: "La Maison des Parents — Ville de Compiègne" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/04/Capture-d%E2%80%99%C3%A9cran-2024-04-17-%C3%A0-17.16.03.png", alt: "La Nuit du handicap" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/04/logo.png", alt: "Cités éducatives" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/04/FFC_soundyoga.png", alt: "Fédération Française de Cardiologie" },
        { src: "https://soundyoga.fr/wp-content/uploads/2022/04/siteon0.png", alt: "Ministère de l’Éducation nationale, de la Jeunesse et des Sports" },
        { src: "https://soundyoga.fr/wp-content/uploads/2022/04/Unknown-1.jpeg", alt: "Musée du quai Branly — Jacques Chirac" },
        { src: "https://soundyoga.fr/wp-content/uploads/2022/04/logo.gif", alt: "La Ruche — Entrepreneurs" },
        { src: "https://soundyoga.fr/wp-content/uploads/2022/04/Namatata-1.jpg", alt: "Namatata" },
        { src: "https://soundyoga.fr/wp-content/uploads/2022/04/Coachable-and-Co_200-1.png", alt: "Coachable & Co" },
        { src: "https://soundyoga.fr/wp-content/uploads/2022/04/xandr-1.png", alt: "Xandr" },
        { src: "https://soundyoga.fr/wp-content/uploads/2022/04/HSBC.png", alt: "HSBC" },
        { src: "https://soundyoga.fr/wp-content/uploads/2022/05/Guinot.png", alt: "Fondation Paul Guinot" }
      ];
      if (pool.length < 3) return;

      let prevSrcs = [];
      let timer = null;
      const INTERVAL = 4000;
      const prefersReduced = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;

      function pickThree() {
        const available = pool.filter(p => !prevSrcs.includes(p.src));
        for (let i = available.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [available[i], available[j]] = [available[j], available[i]];
        }
        const picked = (available.length >= 3 ? available.slice(0, 3) : pool.slice(0, 3));
        prevSrcs = picked.map(p => p.src);
        return picked;
      }

      function render() {
        const picked = pickThree();
        slots.forEach((img, i) => {
          img.style.opacity = '0';
          const p = picked[i % picked.length];
          setTimeout(() => { img.src = p.src; img.alt = p.alt; img.style.opacity = '1'; }, 60);
        });
      }

      function start() { if (timer || prefersReduced) return; timer = setInterval(render, INTERVAL); }
      function stop() { if (!timer) return; clearInterval(timer); timer = null; }

      spotlight.addEventListener('mouseenter', stop);
      spotlight.addEventListener('mouseleave', start);
      spotlight.addEventListener('focusin', stop);
      spotlight.addEventListener('focusout', start);

      if (!prefersReduced) { start(); }
    })();

    // === AVIS : affichage type Google + saisie avec micro-ralentissements ===
    (function () {
      const prefersReduced = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
      const AVATAR = document.getElementById('rev-avatar');
      const NAME = document.getElementById('rev-name');
      const META = document.getElementById('rev-meta');
      const TEXT = document.getElementById('rev-text');
      const DATE = document.getElementById('rev-date');
      if (!AVATAR || !NAME || !META || !TEXT || !DATE) return;

      const REVIEWS = [
        { name: "sandrine B.", meta: "4 avis", date: "il y a 2 mois", avatar: "https://www.gravatar.com/avatar/2ae852270314a51e29e612020207a9b1?d=identicon", text: "Je cherchais un lieu pour la pratique du yoga que j'avais envie de découvrir et c'est avec Larissa que j'ai trouvé ce moment merveilleux qui vient rythmer mes semaines.\nLarissa sait personnaliser ses séances et prend le temps de nous guider correctement dans les postures.\nJe ressors toujours détendue et satisfaite de moi à chacune des séances. Les séances de bains sonores sont justes magiques.🙏\nJe recommande les cours complètement adaptés à notre personnalité.🤩" },
        { name: "Esther H.", meta: "2 avis", date: "il y a 8 mois", avatar: "https://www.gravatar.com/avatar/2ae852270314a51e29e612020207a9b2?d=identicon", text: "Les cours de yoga sont très bien. Larissa explique tout très bien. Les exercices sont variés. Le lieu et le matériel sont très propres. Le yoga intégral permet vraiment de travailler tout le corps, aussi bien en exercices d'équilibre, de souplesse, de gainage. Le moment de détente en fin de séance est très appréciable. L'utilisation des instruments pour accompagner la détente par un bain sonore ajoute un éléments de relaxation supplémentaire. Chaque fin de séance se termine par un boisson chaud détox. On se sent totalement détendu et en forme après chaque séance de yoga. Je recommande Soundyoga à tous." },
        { name: "Marion & Thibault", meta: "5 avis", date: "il y a 2 mois", avatar: "https://soundyoga.fr/wp-content/uploads/2025/08/couple-heureux-yoga-compiegne-merci.jpg", text: "Super cours de yoga prénatal ! Larissa m'a expliqué beaucoup de choses et prend le temps de nous montrer tous les mouvements.\nJe recommande vivement cette expérience qui est a la fois énergisante et reposante !" },
        { name: "Manon G.", meta: "1 avis", date: "il y a 2 mois", avatar: "https://www.gravatar.com/avatar/2ae852270314a51e29e612020207a9b3?d=identicon", text: "Toujours souriante, agréable et à l’écoute, Larissa propose des séances de yoga variées et très enrichissantes.\nLe cadre du studio est chaleureux et propice à la détente et au « lâcher-prise ».\nLarissa a su créer une ambiance de confiance où on y fait de belles rencontres et qui permet de mettre le quotidien sur pause pour se ressourcer.\nUn espace de bien-être que je recommande à 100 % !" },
        { name: "Jade D.", meta: "9 avis", date: "il y a 8 mois", avatar: "https://www.gravatar.com/avatar/2ae852270314a51e29e612020207a9b4?d=identicon", text: "Un véritable havre de paix ! Soundyoga est une bulle de sérénité où l’on se recentre sur soi-même tout en prenant soin de son corps. Les cours sont adaptés à tous les niveaux, et chaque séance est une expérience unique et enrichissante.\n\nUn immense merci à Larissa, qui est tout simplement exceptionnelle. Son énergie, sa pédagogie et sa bienveillance font toute la différence. Elle sait guider chaque élève avec attention, et sa passion pour le yoga est contagieuse.\n\nJe ressors de chaque séance apaisée, revitalisée et pleine de gratitude. Je recommande ce studio les yeux fermés à toutes celles et ceux qui cherchent un endroit pour se reconnecter à eux-mêmes et retrouver l’équilibre." },
        { name: "Lilou", meta: "6 avis • 5 photos", date: "il y a 11 mois", avatar: "https://lh3.googleusercontent.com/a-/ALV-UjU0T6yESRfxKdt2xfuYbsPThXINW0oXy1tY9cKQrp-DaVcUu6eO=w65-h65-p-rp-mo-br100", text: "La passion de Larissa pour le yoga est contagieuse et son enseignement est à la fois profond et accessible. Chaque séance est une véritable oasis de calme et de bien-être pour le corps et l'esprit.\n\nElle prend le temps de corriger les postures, adapte les exercices aux besoins de chacun et crée une ambiance chaleureuse et accueillante. Grâce à elle, j'ai aussi trouvé un espace où me ressourcer et me recentrer.\n\nJe recommande vivement Larissa à quiconque cherche à découvrir ou approfondir le yoga. Un grand merci pour ces moments précieux et enrichissants ! 🙏🧘‍♀️🧘‍♂️" },
        { name: "Anna L.", meta: "8 avis", date: "il y a 7 mois", avatar: "https://www.gravatar.com/avatar/2ae852270314a51e29e612020207a9b5?d=identicon", text: "Alors, je suis partagée entre l envie de recommander😍 et celle de garder cette adresse secrète 🤫tellement on a envie d’y venir pour pratiquer un yoga doux adapté à chaque personne qui permet de ressortir de cet endroit détendue, ressourcée ! Et tout cela ne tient qu’à toi, Larissa. Bravo et merci 🙏🏻" },
        { name: "Valentine F.", meta: "15 avis • 3 photos", date: "il y a un an", avatar: "https://www.gravatar.com/avatar/2ae852270314a51e29e612020207a9b6?d=identicon", text: "J ai débuté mes premiers cours de yoga prenatal avec Larissa, il y a maintenant 3 mois... et...\nA l heure d aujourd'hui, je ne peux que la remercier pour son écoute et l invitation qu elle nous propose d effectuer avec soi et son enfant à travers cette pratique 😍👶🧘‍♀️\nJe ne pensais sincèrement pas, en franchissant la porte de son local, pouvoir gagner autant en lâcher prise et appréhender mon corps pour cet heureux événement qui nécessite d être en connexion avec soi mais aussi de son enfant ☯️❤️\nLe travail de postures variés, les explications données sur le fonctionnement de notre corps et surtout son écoute face à nos questionnements et nos petits maux de grossesse invitent à tout cela...\n\nAlors merciiii sincèrement à toi pour ta disponibilité et la pratique que tu proposes du yoga 🙏🙏\n\nAvec en MUST, de la relaxation accompagnée d un bain bain sonore à chaque fin de séance... Pas évident au début mais qui, petit à petit, devient un réel moment de bien être et de voyage 🥰🎶✈️🥰" },
        { name: "Valérie B.", meta: "9 avis", date: "il y a un an", avatar: "https://soundyoga.fr/wp-content/uploads/2025/08/gravatar-Yoga-Compiegne-Valerie-B.jpg", text: "Le studio Soundyoga est en un endroit très agréable et invite à la détente.\nTout le matériel est fourni pour pratiquer en toute sérénité.\nJ’apprécie l’ambiance sonore qui permet un relâchement total et apporte un petit quelque chose en plus très appréciable.\nStephen et Larissa sont des intervenants très accueillants et attentionnés.\nA découvrir sans hésitation !" },
        { name: "Thi Thai T.", meta: "3 avis", date: "il y a un an", avatar: "https://soundyoga.fr/wp-content/uploads/2025/08/gravatarTT-Yoga-Compiegne.jpg", text: "J'ai découvert le yoga de Larissa lors d'un stage sur l'île de la Réunion et depuis j'associe les séances à ce doux moment. Qui plus est, Larissa est une personne passionnée qui partage avec générosité ses recherches sérieuses et pointues dans les enseignements à la fois traditionnels et scientifiques. Les séances de yoga sont menées avec justesse et finesse pour sortir de cette fameuse zone de confort. Finir la séance avec un bain sonore avec tous ses instruments est un véritable plaisir pour le corps et l'esprit." }
      ];

      function shuffle(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1));[arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }

      function typeHuman(el, str) {
        return new Promise(resolve => {
          if (prefersReduced) { el.textContent = str; el.classList.remove('caret'); return resolve(); }
          el.textContent = ""; el.classList.add('caret');
          let i = 0; let nextPauseAt = Math.floor(Math.random() * 25) + 15;

          (function tick() {
            if (i >= str.length) { el.classList.remove('caret'); return resolve(); }
            const ch = str[i++];
            el.textContent += ch;
            let delay = 14 + Math.random() * 12;
            if (/[.,;:!?]/.test(ch)) delay += 120 + Math.random() * 180;
            if (ch === '\n') delay += 160 + Math.random() * 200;
            delay += (Math.random() * 16 - 8);
            if (--nextPauseAt <= 0) { delay += 180 + Math.random() * 260; nextPauseAt = Math.floor(Math.random() * 25) + 15; }
            setTimeout(tick, Math.max(0, delay));
          })();
        });
      }

      async function show(review) {
        AVATAR.src = review.avatar; AVATAR.alt = review.name;
        NAME.textContent = review.name;
        META.textContent = review.meta;
        DATE.textContent = review.date;
        await typeHuman(TEXT, review.text);
      }

      let isVisible = false;
      const reviewSection = document.querySelector('.reviews');

      async function loop() {
        const order = shuffle([...REVIEWS]);
        for (const r of order) {
          // Met l'animation en pause si la section n'est pas visible
          while (!isVisible) {
            await new Promise(r => setTimeout(r, 200));
          }
          await show(r);
          await new Promise(r => setTimeout(r, 1000));
        }
        loop();
      }

      if (reviewSection) {
        const observer = new IntersectionObserver(([entry]) => {
          isVisible = entry.isIntersecting;
        }, { threshold: 0.01 }); // Se déclenche dès qu'une petite partie est visible/invisible
        observer.observe(reviewSection);
      }

      loop();
    })();

    // === ENGAGEMENTS : 1 lecteur + préchargement + crossfade sans “saut noir” ===
    (function () {
      const box = document.querySelector('.engagements .eng-video');
      if (!box) return;
      let cur = box.querySelector('video.current');
      let nxt = box.querySelector('video.next');
      const btn = box.querySelector('.sound');
      const prefersReduced = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
      const ROTATE_MS = 14000;
      const FADE_MS = 350;

      const VIDEOS = [
        { src: "https://soundyoga.fr/wp-content/uploads/2025/08/NEUROSCIENCES-SANSKRIT-pour-les-enfants-%E2%9C%A8.Cet-ete-notre-studio-ne-reste-pas-seulement-ouver.mp4", zoom: 1.18, pos: "50% 50%" },
        { src: "https://soundyoga.fr/wp-content/uploads/2025/08/LETE-le-YOGA-et-la-VIBRATION-%E2%98%80%EF%B8%8F.Quand-le-yoga-rencontre-la-magie-des-vibrations-ca-donne-de.mp4", zoom: 1.16, pos: "50% 45%" },
        { src: "https://soundyoga.fr/wp-content/uploads/2025/08/Ils-ont-fait-le-TOUR-du-MONDE.-%F0%9F%97%BA%EF%B8%8F%F0%9F%8E%B6.Retour-en-images-sur-notre-atelier-Voyage-Sonore-a-la.mp4", zoom: 1.15, pos: "50% 50%" }
      ];
      function shuffle(a) { for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1));[a[i], a[j]] = [a[j], a[i]]; } return a; }
      const order = shuffle([...VIDEOS]);
      let idx = 0, timer = null, pausedByIO = false;

      function apply(el, item) {
        el.style.setProperty('--zoom', item.zoom ?? 1.15);
        el.style.setProperty('--pos', item.pos ?? '50% 50%');
        if (el.src !== item.src) { el.src = item.src; el.load(); }
      }

      function primeNext() {
        const nextItem = order[(idx + 1) % order.length];
        apply(nxt, nextItem);
      }

      function doSwap() {
        idx = (idx + 1) % order.length;
        const ready = () => nxt.readyState >= 2;
        const startFade = () => {
          try { nxt.currentTime = 0; nxt.play(); } catch (e) { }
          nxt.classList.add('show');
          cur.classList.remove('show');
          setTimeout(() => {
            try { cur.pause(); } catch (e) { }
            cur.classList.remove('current'); cur.classList.add('next');
            nxt.classList.remove('next'); nxt.classList.add('current');
            [cur, nxt] = [nxt, cur];
            primeNext();
          }, FADE_MS + 50);
        };
        if (ready()) startFade();
        else {
          const h = setInterval(() => { if (ready()) { clearInterval(h); startFade(); } }, 120);
          setTimeout(() => clearInterval(h), 4000);
        }
      }

      function start() {
        if (timer || prefersReduced) return;
        timer = setInterval(doSwap, ROTATE_MS);
      }
      function stop() { if (!timer) return; clearInterval(timer); timer = null; }

      btn?.addEventListener('click', () => {
        const willMute = !cur.muted;
        cur.muted = willMute; nxt.muted = willMute;
        btn.setAttribute('aria-label', willMute ? 'Activer le son' : 'Couper le son');
        btn.title = willMute ? 'Activer le son' : 'Couper le son';
      });

      const io = new IntersectionObserver(([e]) => {
        if (!e) return;
        if (e.isIntersecting) { pausedByIO = false; start(); try { cur.play(); } catch (e) { } }
        else { pausedByIO = true; stop(); try { cur.pause(); nxt.pause(); } catch (e) { } }
      }, { threshold: 0.2 });
      io.observe(box);

      apply(cur, order[idx]);
      primeNext();
      cur.addEventListener('canplay', () => { if (!pausedByIO) { try { cur.play(); } catch (e) { } } }, { once: true });
      if (!prefersReduced) start();
    })();

    // === PLANNING MANUEL ===
    // === PLANNING MANUEL ===
    (function () {
      const MANUAL_EVENTS = [
	          // --- Semaine du 20 au 26 juillet 2026 ---
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-07-20T18:30:00+02:00", "end": "2026-07-20T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-07-22T10:00:00+02:00", "end": "2026-07-22T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-07-22T18:15:00+02:00", "end": "2026-07-22T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-07-22T20:00:00+02:00", "end": "2026-07-22T21:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain de Gongs", "start": "2026-07-24T18:30:00+02:00", "end": "2026-07-24T19:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-07-25T16:30:00+02:00", "end": "2026-07-25T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-07-25T18:15:00+02:00", "end": "2026-07-25T19:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-07-26T11:00:00+02:00", "end": "2026-07-26T12:15:00+02:00", "staff": "Larissa" },
        // Date : 21/07/2026
        // - Modifications précédentes : Création initiale
        // - Nouvelle modification : Ajout du planning du 27 juillet au 2 août 2026.
        // --- Semaine du 27 juillet au 2 août 2026 ---
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-07-27T18:30:00+02:00", "end": "2026-07-27T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga Statique - Renforcement", "start": "2026-07-28T19:00:00+02:00", "end": "2026-07-28T20:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-07-29T18:30:00+02:00", "end": "2026-07-29T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-07-30T18:30:00+02:00", "end": "2026-07-30T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain Sonore multi-instruments", "start": "2026-07-31T18:30:00+02:00", "end": "2026-07-31T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-08-01T16:30:00+02:00", "end": "2026-08-01T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-08-01T18:15:00+02:00", "end": "2026-08-01T19:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-08-02T11:00:00+02:00", "end": "2026-08-02T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "HandPan", "start": "2026-08-02T14:30:00+02:00", "end": "2026-08-02T15:30:00+02:00", "staff": "Stephen" },
	   // --- Planning du 3 août au 22 novembre 2026 ---
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-08-03T18:30:00+02:00", "end": "2026-08-03T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-08-05T10:00:00+02:00", "end": "2026-08-05T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🥎 MyoYoga - Auto-massages", "start": "2026-08-05T18:15:00+02:00", "end": "2026-08-05T19:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕉️ Sanskrit", "start": "2026-08-06T14:30:00+02:00", "end": "2026-08-06T15:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-08-06T18:30:00+02:00", "end": "2026-08-06T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-08-08T16:30:00+02:00", "end": "2026-08-08T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-08-08T18:15:00+02:00", "end": "2026-08-08T19:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-08-09T11:00:00+02:00", "end": "2026-08-09T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-08-10T18:30:00+02:00", "end": "2026-08-10T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga Statique - Renforcement", "start": "2026-08-11T19:00:00+02:00", "end": "2026-08-11T20:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-08-12T10:00:00+02:00", "end": "2026-08-12T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-08-13T18:30:00+02:00", "end": "2026-08-13T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain de Gongs", "start": "2026-08-14T18:30:00+02:00", "end": "2026-08-14T19:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-08-15T16:30:00+02:00", "end": "2026-08-15T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-08-15T18:15:00+02:00", "end": "2026-08-15T19:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-08-16T09:30:00+02:00", "end": "2026-08-16T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-08-16T11:00:00+02:00", "end": "2026-08-16T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-08-17T18:30:00+02:00", "end": "2026-08-17T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-08-19T10:00:00+02:00", "end": "2026-08-19T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-08-19T18:15:00+02:00", "end": "2026-08-19T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-08-19T20:00:00+02:00", "end": "2026-08-19T21:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "HandPan", "start": "2026-08-22T14:30:00+02:00", "end": "2026-08-22T15:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-08-22T16:30:00+02:00", "end": "2026-08-22T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-08-23T11:00:00+02:00", "end": "2026-08-23T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-08-24T18:30:00+02:00", "end": "2026-08-24T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga Statique - Renforcement", "start": "2026-08-25T19:00:00+02:00", "end": "2026-08-25T20:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-08-26T10:00:00+02:00", "end": "2026-08-26T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-08-27T18:30:00+02:00", "end": "2026-08-27T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain Sonore multi-instruments", "start": "2026-08-28T18:30:00+02:00", "end": "2026-08-28T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-08-29T16:30:00+02:00", "end": "2026-08-29T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-08-29T18:15:00+02:00", "end": "2026-08-29T19:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-08-30T09:30:00+02:00", "end": "2026-08-30T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-08-30T11:00:00+02:00", "end": "2026-08-30T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-08-31T18:30:00+02:00", "end": "2026-08-31T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-09-02T10:00:00+02:00", "end": "2026-09-02T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🥎 MyoYoga - Auto-massages", "start": "2026-09-02T18:15:00+02:00", "end": "2026-09-02T19:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-09-03T14:30:00+02:00", "end": "2026-09-03T15:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-09-03T18:30:00+02:00", "end": "2026-09-03T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "HandPan", "start": "2026-09-05T14:30:00+02:00", "end": "2026-09-05T15:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-09-05T16:30:00+02:00", "end": "2026-09-05T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-09-05T18:15:00+02:00", "end": "2026-09-05T19:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-09-06T09:30:00+02:00", "end": "2026-09-06T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-09-06T11:00:00+02:00", "end": "2026-09-06T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-09-07T18:30:00+02:00", "end": "2026-09-07T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga Statique - Renforcement", "start": "2026-09-08T19:00:00+02:00", "end": "2026-09-08T20:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-09-09T10:00:00+02:00", "end": "2026-09-09T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-09-09T18:15:00+02:00", "end": "2026-09-09T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕉️ Sanskrit", "start": "2026-09-10T14:30:00+02:00", "end": "2026-09-10T15:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-09-10T18:30:00+02:00", "end": "2026-09-10T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain de Gongs", "start": "2026-09-11T18:30:00+02:00", "end": "2026-09-11T19:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-09-13T09:30:00+02:00", "end": "2026-09-13T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-09-13T11:00:00+02:00", "end": "2026-09-13T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-09-14T19:00:00+02:00", "end": "2026-09-14T20:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-09-16T10:00:00+02:00", "end": "2026-09-16T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-09-16T18:15:00+02:00", "end": "2026-09-16T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-09-17T14:30:00+02:00", "end": "2026-09-17T15:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-09-17T18:30:00+02:00", "end": "2026-09-17T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-09-18T17:00:00+02:00", "end": "2026-09-18T17:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-09-19T16:30:00+02:00", "end": "2026-09-19T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain Sonore multi-instruments", "start": "2026-09-19T18:15:00+02:00", "end": "2026-09-19T19:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-09-20T09:30:00+02:00", "end": "2026-09-20T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-09-20T11:00:00+02:00", "end": "2026-09-20T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "HandPan", "start": "2026-09-20T14:30:00+02:00", "end": "2026-09-20T15:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-09-21T18:30:00+02:00", "end": "2026-09-21T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga Statique - Renforcement", "start": "2026-09-22T19:00:00+02:00", "end": "2026-09-22T20:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-09-23T10:00:00+02:00", "end": "2026-09-23T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-09-23T18:15:00+02:00", "end": "2026-09-23T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-09-24T14:30:00+02:00", "end": "2026-09-24T15:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-09-24T18:30:00+02:00", "end": "2026-09-24T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-09-26T16:30:00+02:00", "end": "2026-09-26T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-09-26T18:15:00+02:00", "end": "2026-09-26T19:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-09-27T09:30:00+02:00", "end": "2026-09-27T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-09-27T11:00:00+02:00", "end": "2026-09-27T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-09-28T18:30:00+02:00", "end": "2026-09-28T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-09-30T10:00:00+02:00", "end": "2026-09-30T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-09-30T18:15:00+02:00", "end": "2026-09-30T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-10-01T14:30:00+02:00", "end": "2026-10-01T15:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-10-01T18:30:00+02:00", "end": "2026-10-01T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga thérapie avec Gisèle", "start": "2026-10-02T15:00:00+02:00", "end": "2026-10-02T16:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain Sonore multi-instruments", "start": "2026-10-02T18:30:00+02:00", "end": "2026-10-02T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "HandPan", "start": "2026-10-03T14:30:00+02:00", "end": "2026-10-03T15:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-10-03T16:30:00+02:00", "end": "2026-10-03T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-10-03T18:15:00+02:00", "end": "2026-10-03T19:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-10-04T09:30:00+02:00", "end": "2026-10-04T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-10-04T11:00:00+02:00", "end": "2026-10-04T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-10-05T18:30:00+02:00", "end": "2026-10-05T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga Statique - Renforcement", "start": "2026-10-06T19:00:00+02:00", "end": "2026-10-06T20:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-10-07T10:00:00+02:00", "end": "2026-10-07T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🥎 MyoYoga - Auto-massages", "start": "2026-10-07T18:15:00+02:00", "end": "2026-10-07T19:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕉️ Sanskrit", "start": "2026-10-08T14:30:00+02:00", "end": "2026-10-08T15:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-10-08T18:30:00+02:00", "end": "2026-10-08T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga thérapie avec Gisèle", "start": "2026-10-09T15:00:00+02:00", "end": "2026-10-09T16:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-10-09T17:00:00+02:00", "end": "2026-10-09T17:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-10-10T16:30:00+02:00", "end": "2026-10-10T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-10-10T18:15:00+02:00", "end": "2026-10-10T19:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-10-11T09:30:00+02:00", "end": "2026-10-11T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-10-11T11:00:00+02:00", "end": "2026-10-11T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-10-12T18:30:00+02:00", "end": "2026-10-12T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-10-14T10:00:00+02:00", "end": "2026-10-14T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-10-14T18:15:00+02:00", "end": "2026-10-14T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-10-15T14:30:00+02:00", "end": "2026-10-15T15:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-10-15T18:30:00+02:00", "end": "2026-10-15T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga thérapie avec Gisèle", "start": "2026-10-16T15:00:00+02:00", "end": "2026-10-16T16:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-10-16T17:00:00+02:00", "end": "2026-10-16T18:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "ATELIER - Voyage en Inde - MANTRA", "start": "2026-10-17T11:00:00+02:00", "end": "2026-10-17T12:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-10-17T16:30:00+02:00", "end": "2026-10-17T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain de Gongs", "start": "2026-10-17T18:30:00+02:00", "end": "2026-10-17T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-10-18T09:30:00+02:00", "end": "2026-10-18T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-10-18T11:00:00+02:00", "end": "2026-10-18T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "HandPan", "start": "2026-10-18T14:30:00+02:00", "end": "2026-10-18T15:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-10-19T18:30:00+02:00", "end": "2026-10-19T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga Statique - Renforcement", "start": "2026-10-20T19:00:00+02:00", "end": "2026-10-20T20:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-10-21T10:00:00+02:00", "end": "2026-10-21T11:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-10-21T18:15:00+02:00", "end": "2026-10-21T19:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-10-22T14:30:00+02:00", "end": "2026-10-22T15:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-10-22T18:30:00+02:00", "end": "2026-10-22T19:45:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga thérapie avec Gisèle", "start": "2026-10-23T15:00:00+02:00", "end": "2026-10-23T16:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain de Gongs", "start": "2026-10-23T18:30:00+02:00", "end": "2026-10-23T19:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-10-24T16:30:00+02:00", "end": "2026-10-24T17:30:00+02:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-10-24T18:15:00+02:00", "end": "2026-10-24T19:00:00+02:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-10-25T09:30:00+02:00", "end": "2026-10-25T10:30:00+02:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-10-25T11:00:00+02:00", "end": "2026-10-25T12:15:00+02:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-10-26T18:30:00+01:00", "end": "2026-10-26T19:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-10-28T10:00:00+01:00", "end": "2026-10-28T11:15:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-10-28T18:15:00+01:00", "end": "2026-10-28T19:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-10-29T14:30:00+01:00", "end": "2026-10-29T15:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-10-29T18:30:00+01:00", "end": "2026-10-29T19:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga thérapie avec Gisèle", "start": "2026-10-30T15:00:00+01:00", "end": "2026-10-30T16:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-10-31T16:30:00+01:00", "end": "2026-10-31T17:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-10-31T18:15:00+01:00", "end": "2026-10-31T19:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-11-01T11:00:00+01:00", "end": "2026-11-01T12:15:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-11-02T18:30:00+01:00", "end": "2026-11-02T19:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga Statique - Renforcement", "start": "2026-11-03T19:00:00+01:00", "end": "2026-11-03T20:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-11-04T10:00:00+01:00", "end": "2026-11-04T11:15:00+01:00", "staff": "Larissa" },
        { "serviceName": "🥎 MyoYoga - Auto-massages", "start": "2026-11-04T18:15:00+01:00", "end": "2026-11-04T19:15:00+01:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-11-05T14:30:00+01:00", "end": "2026-11-05T15:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-11-05T18:30:00+01:00", "end": "2026-11-05T19:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga thérapie avec Gisèle", "start": "2026-11-06T15:00:00+01:00", "end": "2026-11-06T16:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain Sonore multi-instruments", "start": "2026-11-06T18:30:00+01:00", "end": "2026-11-06T19:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "ATELIER - Voyage en Inde - INSTRUMENTS", "start": "2026-11-07T11:00:00+01:00", "end": "2026-11-07T12:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-11-07T16:30:00+01:00", "end": "2026-11-07T17:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-11-07T18:15:00+01:00", "end": "2026-11-07T19:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-11-08T09:30:00+01:00", "end": "2026-11-08T10:30:00+01:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-11-08T11:00:00+01:00", "end": "2026-11-08T12:15:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-11-09T18:30:00+01:00", "end": "2026-11-09T19:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-11-11T10:00:00+01:00", "end": "2026-11-11T11:15:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-11-11T18:15:00+01:00", "end": "2026-11-11T19:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕉️ Sanskrit", "start": "2026-11-12T14:30:00+01:00", "end": "2026-11-12T15:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-11-12T18:30:00+01:00", "end": "2026-11-12T19:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga thérapie avec Gisèle", "start": "2026-11-13T15:00:00+01:00", "end": "2026-11-13T16:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain de Gongs", "start": "2026-11-13T18:30:00+01:00", "end": "2026-11-13T19:30:00+01:00", "staff": "Stephen" },
        { "serviceName": "HandPan", "start": "2026-11-14T14:30:00+01:00", "end": "2026-11-14T15:30:00+01:00", "staff": "Stephen" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-11-14T16:30:00+01:00", "end": "2026-11-14T17:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-11-14T18:15:00+01:00", "end": "2026-11-14T19:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-11-15T09:30:00+01:00", "end": "2026-11-15T10:30:00+01:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-11-15T11:00:00+01:00", "end": "2026-11-15T12:15:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-11-16T18:30:00+01:00", "end": "2026-11-16T19:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga Statique - Renforcement", "start": "2026-11-17T19:00:00+01:00", "end": "2026-11-17T20:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga & Bain Sonore", "start": "2026-11-18T10:00:00+01:00", "end": "2026-11-18T11:15:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-11-18T18:15:00+01:00", "end": "2026-11-18T19:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "🎵 Yoga du Son", "start": "2026-11-19T14:30:00+01:00", "end": "2026-11-19T15:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🔥Yoga intégral 2", "start": "2026-11-19T18:30:00+01:00", "end": "2026-11-19T19:45:00+01:00", "staff": "Larissa" },
        { "serviceName": "🕊️ Yoga thérapie avec Gisèle", "start": "2026-11-20T15:00:00+01:00", "end": "2026-11-20T16:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🎵 Bain Sonore multi-instruments", "start": "2026-11-20T18:30:00+01:00", "end": "2026-11-20T19:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "HandPan", "start": "2026-11-21T14:30:00+01:00", "end": "2026-11-21T15:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "🌬️ Respiration & Méditation", "start": "2026-11-21T16:30:00+01:00", "end": "2026-11-21T17:30:00+01:00", "staff": "Larissa" },
        { "serviceName": "🤍 Soin aux Diapasons", "start": "2026-11-21T18:15:00+01:00", "end": "2026-11-21T19:00:00+01:00", "staff": "Larissa" },
        { "serviceName": "🧠 Méditation & Neurosciences", "start": "2026-11-22T09:30:00+01:00", "end": "2026-11-22T10:30:00+01:00", "staff": "Stephen" },
        { "serviceName": "🔥 Yoga intégral 1", "start": "2026-11-22T11:00:00+01:00", "end": "2026-11-22T12:15:00+01:00", "staff": "Larissa" }
      ];

      const TZ = 'Europe/Paris';
      const fmtDay = new Intl.DateTimeFormat('fr-FR', { weekday: 'short', day: '2-digit', timeZone: TZ });
      const fmtHuman = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'long', timeZone: TZ });
      const fmtTime = new Intl.DateTimeFormat('fr-FR', { hour: '2-digit', minute: '2-digit', timeZone: TZ });

      function startOfWeek(d) {
        const dt = new Date(d); const day = (dt.getDay() + 6) % 7;
        dt.setHours(0, 0, 0, 0); dt.setDate(dt.getDate() - day); return dt;
      }
      function addDays(d, n) { const x = new Date(d); x.setDate(x.getDate() + n); return x; }

      function catFromService(name) {
        const s = (name || '').toLowerCase();
        if (s.includes('soin') || s.includes('diapason')) return { cls: 'si' };
        if (s.includes('respir') || s.includes('médit') || s.includes('neurosciences')) return { cls: 'rp' };
        if (s.includes('bain') || s.includes('gong') || s.includes('son') || s.includes('chant')) return { cls: 'sn' };
        if (s.includes('sanskrit') || s.includes('écriture')) return { cls: 'cg' };
        return { cls: 'mv' };
      }

      const elWeek = document.getElementById('week-grid');
      const elRange = document.getElementById('week-range');
      let anchor = startOfWeek(new Date());

      function groupByDay(evts) {
        const buckets = new Map();
        for (let i = 0; i < 7; i++) { buckets.set(i, []); }
        evts.forEach(e => {
          const d = new Date(e.start);
          const idx = ((d.getDay() + 6) % 7);
          buckets.get(idx).push(e);
        });
        for (const arr of buckets.values()) {
          arr.sort((a, b) => new Date(a.start) - new Date(b.start));
        }
        return buckets;
      }

      function renderWeek(fromDate) {
        const toDate = addDays(fromDate, 6);
        elRange.textContent = `${fmtHuman.format(fromDate)} – ${fmtHuman.format(toDate)}`;
        elWeek.innerHTML = '';

        for (let i = 0; i < 7; i++) {
          const d = addDays(fromDate, i);
          const day = document.createElement('div');
          day.className = 'day';
          const [wd, dd] = fmtDay.formatToParts(d).reduce((acc, p) => {
            if (p.type === 'weekday') acc[0] = p.value.replace('.', '');
            if (p.type === 'day') acc[1] = p.value;
            return acc;
          }, ['', '']);
          day.innerHTML = `
            <div class="head"><span>${wd}.</span><span class="muted">${dd}</span></div>
            <div class="slots"></div>`;
          elWeek.appendChild(day);
        }

        const weekEvents = MANUAL_EVENTS.filter(e => {
          const eventDate = new Date(e.start);
          return eventDate >= fromDate && eventDate < addDays(toDate, 1);
        });

        const groups = groupByDay(weekEvents);
        groups.forEach((arr, idx) => {
          const slots = elWeek.children[idx].querySelector('.slots');
          if (arr.length === 0) { slots.innerHTML = `<div class="empty"><a href="https://compiegne.resa.soundyoga.fr" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;">Accédez au planning</a></div>`; return; }

          arr.forEach(e => {
            const cat = catFromService(e.serviceName);
            const sd = new Date(e.start), ed = new Date(e.end);
            const slot = document.createElement('div');
            slot.className = `slot ${cat.cls}`;
            slot.innerHTML = `
              <div class="when">${fmtTime.format(sd)}</div>
              <div class="name">${e.serviceName || '—'}</div>
              <div class="meta">${e.staff ? e.staff + ' • ' : ''}${Math.round((ed - sd) / 60000)} min</div>
              <div class="cta"><a href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener">Réserver</a></div>
            `;
            slots.appendChild(slot);
          });
        });
      }

      document.getElementById('prev-week')?.addEventListener('click', () => { anchor = addDays(anchor, -7); renderWeek(anchor); });
      document.getElementById('next-week')?.addEventListener('click', () => { anchor = addDays(anchor, +7); renderWeek(anchor); });
      document.getElementById('this-week')?.addEventListener('click', () => { anchor = startOfWeek(new Date()); renderWeek(anchor); });

      if (elWeek) renderWeek(anchor);
    })();

    // === GESTION DES NOUVELLES SECTIONS PROMOTIONNELLES ===
    (function () {
      const retreatDate = new Date('August 22, 2025 18:00:00').getTime();
      const reviewsData = [
        "« Merci mille fois, c'était vraiment génial et extraordinaire ! On a appris plein de choses. On repart en paix, avec de l'amour, de la sérénité, vraiment dans la joie. » - Fabienne & Murielle (Mai 2025)",
        "« Oh la la, c'était génial ! Le temps de découvrir un groupe sympathique, de faire des pratiques dans la durée par rapport aux cours... Le corps a le temps de se poser, l'esprit aussi. C'est super chouette, merci ! » - Xavier (Mai 2025)",
        "« Merci, c'était super, on a vraiment apprécié cette belle parenthèse. » - Manon & Laurenne (Mai 2025)",
        "« Exactement ! C'était super relaxant ! Merci » - Manon & Laurenne (Mai 2025)",
        "« C'est dur de partir... C'est comme une petite bulle de bien-être, de bienveillance et de partage. Nous faisons des choses que l'on aime avec des gens qui aiment les mêmes choses. C'est une très belle surprise, il y a de très belles rencontres. Très contente d'être venue, j'espère bien en faire d'autres ! » - Valérie (Mai 2025)"
      ];

      function setupSoundControl(videoId, buttonId) {
        const video = document.getElementById(videoId);
        const soundButton = document.getElementById(buttonId);
        if (video && soundButton) {
          soundButton.addEventListener('click', (e) => {
            e.stopPropagation();
            video.muted = !video.muted;
            soundButton.textContent = video.muted ? '🔇' : '🔊';
          });

        }
      }

      function setupCountdown(elementId) {
        const countdownEl = document.getElementById(elementId);
        if (!countdownEl) return;

        const interval = setInterval(() => {
          const now = new Date().getTime();
          const distance = retreatDate - now;
          if (distance < 0) {
            clearInterval(interval);
            countdownEl.innerHTML = "La retraite a commencé !";
            return;
          }
          const days = Math.floor(distance / (1000 * 60 * 60 * 24));
          const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          const seconds = Math.floor((distance % (1000 * 60)) / 1000);
          countdownEl.innerHTML = `${days}j ${hours}h ${minutes}m ${seconds}s`;
        }, 1000);
      }

      function setupBlurryFadeReviews(elementId) {
        const reviewEl = document.querySelector(`#${elementId} .review-text`);
        if (!reviewEl) return;
        let reviewIndex = 0;
        setInterval(() => {
          reviewEl.textContent = reviewsData[reviewIndex];
          reviewEl.classList.add('is-animating');
          reviewIndex = (reviewIndex + 1) % reviewsData.length;
          setTimeout(() => { reviewEl.classList.remove('is-animating'); }, 6000);
        }, 5000);
      }
      setupSoundControl('video-1', 'sound-1');
      ['1', '3'].forEach(i => { setupCountdown(`countdown-${i}`); setupBlurryFadeReviews(`reviews-${i}`); });
    })();

    /* === STRUCTURE B — Parcours guidé (T7 Split photo) === */
    (function () {
      const GRID = document.getElementById('b-grid');
      const CHIPS = document.getElementById('b-chips');
      if (!GRID || !CHIPS) return;

      const S = [
        { id: 'yoga-integral-1', name: 'Yoga intégral 1', img: 'https://static.wixstatic.com/media/818fcb_38bd7e52406c422a8ce9de31a73f21da~mv2.png', bullets: ['Posture juste', 'Souplesse & Tonicité'], dur: '1 h 15 min', badge: 'Niveau intermédiaire', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-intégral-1-3' },
        { id: 'yoga-integral-2', name: 'Yoga intégral 2', img: 'https://static.wixstatic.com/media/818fcb_38bd7e52406c422a8ce9de31a73f21da~mv2.png', bullets: ['Posture & Alignement', 'Force & Souplesse'], dur: '1 h 15 min', badge: 'Niveau avancé ', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-intégral-2-3' },
        { id: 'soin-diapasons', name: 'Soin aux Diapasons', img: 'https://static.wixstatic.com/media/818fcb_9aee5373016f424cb8a87837774fcb12~mv2.webp', bullets: ['Harmonisation énergétique', 'Relaxation profonde'], dur: '45 min', badge: 'Individuel', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/soin-aux-diapasons-3' },
        { id: 'bain-sonore-multi', name: 'Bain Sonore multi-instruments', img: 'https://static.wixstatic.com/media/818fcb_1f489156ec2d4987a3222f311fc96f18~mv2.jpg', bullets: ['Lâcher-prise immédiat', 'Voyage intérieur'], dur: '1 h', badge: 'Populaire', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/bain-sonore-multi-instruments-2' },
        { id: 'meditation-neuro', name: 'Méditation & Neurosciences', img: 'https://static.wixstatic.com/media/818fcb_602bd4a58a064e599b4882559811de3d~mv2.jpeg', bullets: ['Clarté mentale', 'Calme & Sérénité'], dur: '1 h', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/méditation-neurosciences-1' },
        { id: 'yoga-bain-sonore', name: 'Yoga & Bain Sonore', img: 'https://static.wixstatic.com/media/818fcb_368202f32a294c46bf51d64fcbf69864~mv2.jpeg', bullets: ['Yoga doux', 'Relaxation sonore'], dur: '1 h 15 min', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-bain-sonore-3' },
        { id: 'bain-sonore-indiv', name: 'Bain Sonore individuel', img: 'https://static.wixstatic.com/media/818fcb_cd32c2595f4d4716a90831e9c28b282a~mv2.png', bullets: ['Soin vibratoire personnalisé', 'Détente profonde'], dur: '1 h', badge: 'Individuel', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/bain-sonore-individuel' },
        { id: 'respiration-meditation', name: 'Respiration & Méditation', img: 'https://static.wixstatic.com/media/818fcb_6bb653416b0c4390ba2182b583dd53ba~mv2.jpg', bullets: ['Souffle conscient', 'Esprit apaisé'], dur: '1 h', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/respiration-méditation-1' },
        { id: 'handpan', name: 'HandPan découverte', img: 'https://static.wixstatic.com/media/818fcb_a768807f02b14ce7968557c20e9a9902~mv2.jpg', bullets: ['Initiation musicale', 'Rythme & Intuition'], dur: '1 h', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/handpan-découverte' },
        { id: 'myoyoga', name: 'MyoYoga - Corps & Visage', img: 'https://static.wixstatic.com/media/818fcb_7a8104ef64184ad196cb5942a95439c1~mv2.jpeg', bullets: ['Auto-massages', 'Bien-être & Esthétique'], dur: '1 h', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/myoyoga-corps-visage-1' },
        { id: 'yoga-son', name: 'Yoga du Son', img: 'https://static.wixstatic.com/media/818fcb_e970c35b1fe2419c89eedc853e841bc8~mv2.jpg', bullets: ['Exploration vocale', 'Joie & Partage'], dur: '1 h 15 min', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-du-son-1' },
        { id: 'sanskrit', name: 'Écriture du Sanskrit', img: 'https://static.wixstatic.com/media/818fcb_589454c1726f4294bbe42a69781cb2a2~mv2.jpg', bullets: ['Neuroplasticité', 'Écriture & Méditation'], dur: '1 h 15 min', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/écriture-du-sanskrit-1' },
        { id: 'yoga-prenatal', name: 'Yoga prénatal & Bain Sonore', img: 'https://static.wixstatic.com/media/818fcb_37182d7a7100473c9825751756b3347a~mv2.jpg', bullets: ['Sérénité & Préparation', 'Connexion avec le bébé'], dur: '1 h 15 min', badge: 'Prénatal', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-prénatal-bain-sonore-1' },
        { id: 'yoga-statique', name: 'Yoga Statique - Renforcement', img: 'https://static.wixstatic.com/media/818fcb_157a2f46253346e28a9c0b50f9d0a8a2~mv2.jpg', bullets: ['Gainage & Stabilité', 'Force intérieure'], dur: '1 h', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-statique-renforcement-2' },
        { id: 'yoga-therapie', name: 'Yoga thérapie avec Gisèle', img: 'https://static.wixstatic.com/media/11062b_49c09fdc347e4e65950a56769454e115~mv2.jpg', bullets: ['Approche douce', 'Soulagement & Mobilité'], dur: '1 h', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-thérapie-avec-gisèle-1' },
        { id: 'bain-gongs', name: 'Bain de Gongs', img: 'https://static.wixstatic.com/media/818fcb_c347638429384c6b826ace09a22fd262~mv2.jpg', bullets: ['Vibrations puissantes', 'Lâcher-prise total'], dur: '1 h', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/bain-de-gongs-1' },
        { id: 'stage-souffle', name: 'STAGE Souffle vital', img: 'https://static.wixstatic.com/media/818fcb_8afc1efae5cc42d695084cd0dd804341~mv2.jpg', bullets: ['Respiration fonctionnelle', 'Santé & Vitalité'], dur: '2 h 15 min', badge: 'Stage', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/stage-souffle-vital' },
        { id: 'stage-inde', name: "STAGE L'Appel de l'Inde", img: 'https://static.wixstatic.com/media/818fcb_7906cd5347d3458db469d9128b88d890~mv2.jpeg', bullets: ['Culture & Spiritualité', 'Voyage immobile'], dur: '2 h 15 min', badge: 'Stage', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/stage-l-appel-de-l-inde' },
        { id: 'stage-inversions', name: "STAGE Le monde à l'envers", img: 'https://static.wixstatic.com/media/818fcb_2402d75f739b4df8ac12b4328c67da21~mv2.png', bullets: ['Confiance & Équilibre', 'Maîtrise des inversions'], dur: '2 h 15 min', badge: 'Stage', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/stage-le-monde-à-l-envers' },
        { id: 'stage-dos', name: 'STAGE Soleil dans le dos', img: 'https://static.wixstatic.com/media/818fcb_7a4db73532ad4646a667d7e4ab5058eb~mv2.png', bullets: ['Ouverture du cœur', 'Souplesse du dos'], dur: '2 h 15 min', badge: 'Stage', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/stage-soleil-dans-le-dos' },
        { id: 'stage-mudras', name: "STAGES L'Art des Mudras", img: 'https://static.wixstatic.com/media/818fcb_32c4172448d94af9b0070c7bad09716b~mv2.png', bullets: ['Gestes sacrés', 'Énergie & Méditation'], dur: '2 h 15 min', badge: 'Stage', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/stages-l-art-des-mudras-1' },
        { id: 'bain-sonore-foret', name: 'Bain Sonore en Forêt', img: 'https://static.wixstatic.com/media/818fcb_e6f137de9a904ff080c33939512c8997~mv2.jpeg', bullets: ['Harmonie & Nature', 'Relaxation en plein air'], dur: '1 h 30 min', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/bain-sonore-en-forêt' },
        { id: 'yoga-nidra', name: 'Yoga Nidra', img: 'https://static.wixstatic.com/media/818fcb_72f03778b4034f9f952f8cd8f981d73e~mv2.jpg', bullets: ['Relaxation profonde', 'Sommeil réparateur'], dur: '1 h', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-nidra' },
        { id: 'yoga-famille', name: 'Yoga Famille', img: 'https://static.wixstatic.com/media/818fcb_86c72be452534cedbcaa445ad639a37f~mv2.png', bullets: ['Complicité & Partage', 'Yoga ludique'], dur: '1 h', badge: 'Famille', url: 'https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-famille' }
      ];

      const MAP = {
        detente: ['respiration-meditation', 'bain-sonore-multi', 'soin-diapasons', 'yoga-bain-sonore', 'meditation-neuro'],
        sommeil: ['bain-sonore-multi', 'bain-gongs', 'soin-diapasons', 'bain-sonore-indiv'],
        grossesse: ['yoga-prenatal'],
        force: ['yoga-integral-1', 'yoga-integral-2', 'yoga-statique'],
        sonotherapie: ['bain-sonore-multi', 'soin-diapasons', 'bain-sonore-indiv', 'yoga-son', 'bain-gongs', 'bain-sonore-foret'],
        decouverte: ['handpan', 'sanskrit', 'stage-inde', 'stage-mudras', 'meditation-neuro'],
        stages: ['stage-souffle', 'stage-inde', 'stage-inversions', 'stage-dos', 'stage-mudras']
      };

      const LABEL = {
        detente: 'Me détendre',
        sommeil: 'Dormir mieux',
        grossesse: 'Grossesse',
        force: 'Me renforcer',
        sonotherapie: 'Me soigner',
        decouverte: 'Découvrir',
        stages: 'Stages'
      };
      const byId = id => S.find(x => x.id === id);
      const dataFor = goal => (MAP[goal] || []).map(byId).filter(Boolean);

      function render(goal = 'detente') {
        const list = dataFor(goal);
        GRID.innerHTML = list.map(s => `
          <article class="b-card">
            <div class="b-photo" style="background-image:url('${s.img}')"></div>
            <div class="b-cnt">
              <div class="b-meta">${s.badge ? `${s.badge} • ` : ''}${s.dur}</div>
              <h3>${s.name}</h3>
              <div class="b-sub">${s.bullets[0]} • ${s.bullets[1]}</div>
             <a class="btn" href="https://www.compiegne.resa.soundyoga.fr/" target="_blank" rel="noopener" style="background: transparent; border: 1px solid var(--violet); color: var(--violet);">Réserver</a>
            </div>
          </article>
        `).join('');
      }

      CHIPS.innerHTML = Object.keys(MAP).map((k, i) => (
        `<button class="chip ${i === 0 ? 'active' : ''}" data-goal="${k}">${LABEL[k]}</button>`
      )).join('');
      CHIPS.addEventListener('click', e => {
        const b = e.target.closest('.chip'); if (!b) return;
        CHIPS.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
        b.classList.add('active'); render(b.dataset.goal);
      });

      render('detente');
    })();

    /* === TEAM — Reels (auto-play) + “machine à écrire” === */
    (function () {
      const urlLarissa = "https://soundyoga.fr/wp-content/uploads/2025/08/♾️-3-MOUVEMENTS-3-priorites.Il-y-a-trois-patterns-principaux-qui-impactent-notre-sante-🌬️la.mp4";
      const urlStephen = "https://soundyoga.fr/wp-content/uploads/2025/08/LETE-le-YOGA-et-la-VIBRATION-%E2%98%80%EF%B8%8F.Quand-le-yoga-rencontre-la-magie-des-vibrations-ca-donne-de.mp4";
      const reelL = document.getElementById('reel-larissa');
      const capL = document.getElementById('cap-larissa');
      const reelS = document.getElementById('reel-stephen');
      const capS = document.getElementById('cap-stephen');
      if (reelL) { reelL.src = urlLarissa; }
      if (reelS) { reelS.src = urlStephen; }
      const phrasesL = ["15+ ans de pratique", "10 ans d’enseignement", "Certifiée en Sport-Santé", "Fondatrice du studio SoundYoga"];
      const phrasesS = ["Ingénieur biomédical, spécialiste IA & apprentissage", "Depuis 2013 : séminaires & conférences", "France & Luxembourg", "Méditation & conscience — pratiques guidées"];
      const prefersReduced = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
      function type(el, str) {
        return new Promise(res => {
          if (prefersReduced) { el.textContent = str; el.classList.remove('type-caret'); return res(); }
          el.classList.add('type-caret'); el.textContent = "";
          let i = 0; (function tick() {
            if (i >= str.length) { el.classList.remove('type-caret'); return res(); }
            el.textContent += str[i++]; setTimeout(tick, 16 + Math.random() * 16);
          })();
        });
      }
      async function cycler(el, arr) {
        while (true) {
          for (const p of arr) { await type(el, p); await new Promise(r => setTimeout(r, 2400)); el.textContent = ""; }
        }
      }
      const io = new IntersectionObserver(entries => {
        entries.forEach(e => {
          const v = e.target;
          if (e.isIntersecting) { try { v.play(); } catch (_e) { } }
          else { try { v.pause(); } catch (_e) { } }
        });
      }, { threshold: .35 });
      [reelL, reelS].filter(Boolean).forEach(v => { io.observe(v); v.addEventListener('canplay', () => { try { v.play(); } catch (_e) { } }, { once: true }); });
      if (capL) cycler(capL, phrasesL);
      if (capS) cycler(capS, phrasesS);
    })();

    // === STORYTELLING AU SCROLL ===
    document.addEventListener('DOMContentLoaded', () => {
      const storyContainer = document.querySelector('.story-container');
      if (!storyContainer) return;

      const sections = storyContainer.querySelectorAll('.story-section');
      const scrollIndicator = document.getElementById('scroll-indicator');
      if (!sections.length || !scrollIndicator) return;

      let isIndicatorHidden = false;
      const thresholds = Array.from(Array(201), (_, i) => i * 0.005);

      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach(entry => {
            const progress = entry.intersectionRatio;
            const textElement = entry.target.querySelector('h1');

            if (window.scrollY > 50 && !isIndicatorHidden) {
              scrollIndicator.style.opacity = '0';
              isIndicatorHidden = true;
            }

            if (textElement) {
              textElement.style.opacity = Math.pow(progress, 2);
              const scale = 0.8 + progress * 0.2;
              const z = (1 - progress) * -1500;
              textElement.style.transform = `translateZ(${z}px) scale(${scale})`;
            }
          });
        },
        { threshold: thresholds }
      );

      sections.forEach(section => {
        observer.observe(section);
      });
    });

    // === GALERIE PHOTO AUTOMATIQUE ===
    (function () {
      const wrapper = document.getElementById('photo-gallery-wrapper');
      if (!wrapper) return;

      const galleryData = [
        { src: "https://static.wixstatic.com/media/818fcb_c63d94964480405385e5adc9ad782492~mv2.jpg", cap: "Centre de Yoga — Salle de pratique" },
        { src: "https://static.wixstatic.com/media/818fcb_9a04739431d74c28bd3c27103647e42d~mv2.gif", cap: "Centre de Yoga — espace fleuri" },
        { src: "https://soundyoga.fr/wp-content/uploads/2023/07/Larissa_Kotamo_2-1030x1030.png", cap: "Larissa — pratique & transmission" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/11/BainSonore_soundyoga_malreaux-776x1030.jpg", cap: "Bain sonore — Malraux" },
        { src: "https://soundyoga.fr/wp-content/uploads/2023/01/Yoga-1030x1030.jpeg", cap: "Yoga — équilibre & souffle" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/11/MaisonP_soundyoga-798x1030.jpeg", cap: "Maison des Parents — ateliers sonores" },
        { src: "https://soundyoga.fr/wp-content/uploads/2023/07/sanskrit-1004x1030.jpg", cap: "Sanskrit — écriture & chant" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/11/SoundYoga_stNicolasCompiegne-773x1030.jpg", cap: "Saint-Nicolas — démonstration" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/11/Venette_compiegne_sounyoga-682x1030.jpeg", cap: "Venette — action locale" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/04/compiegne_soundyogaOK-773x1030.jpg", cap: "Compiègne — événements" },
        { src: "https://soundyoga.fr/wp-content/uploads/2024/12/Compiegne_sounyoga.png", cap: "Compiègne — ville en mouvement" },
        { src: "https://static.wixstatic.com/media/818fcb_b8398535c00647aeb82f89c2d707c2ca~mv2.jpg", cap: "Centre de Yoga — vestiaire" },
        { src: "https://static.wixstatic.com/media/818fcb_cdd389514ce44f4193cd7d60ee5c4576~mv2.jpg", cap: "Centre de Yoga — Salle de soin" },
        { src: "https://static.wixstatic.com/media/818fcb_34c6199661ec437abce2008e66264344~mv2.jpg", cap: "Bain sonore — vendredi au centre de yoga" },
        { src: "https://static.wixstatic.com/media/818fcb_c347638429384c6b826ace09a22fd262~mv2.jpg", cap: "Bain de gong — profonde relaxation" },
        { src: "https://static.wixstatic.com/media/818fcb_9fbdba9e5b77440e851b74a6a4024eb7~mv2.jpg", cap: "Centre de Yoga — cours de handpan" }
      ];

      const track = wrapper.querySelector('.gallery-track');
      const caption = wrapper.querySelector('.gallery-caption');
      const prevSide = wrapper.querySelector('.gallery-side.prev');
      const nextSide = wrapper.querySelector('.gallery-side.next');
      const mainContainer = wrapper.querySelector('.gallery-container');

      let currentIndex = 0;
      const totalItems = galleryData.length;
      let autoplayTimer = null;
      const AUTOPLAY_INTERVAL = 3000;

      // --- Initialisation ---
      galleryData.forEach(itemData => {
        const item = document.createElement('div');
        item.className = 'gallery-item';
        const img = document.createElement('img');
        img.src = itemData.src;
        img.alt = itemData.cap;
        item.appendChild(img);
        track.appendChild(item);
      });

      // --- Fonctions de mise à jour ---
      function updateGallery() {
        const prevIndex = (currentIndex - 1 + totalItems) % totalItems;
        const nextIndex = (currentIndex + 1) % totalItems;

        track.style.transform = `translateX(-${currentIndex * 100}%)`;
        prevSide.style.backgroundImage = `url(${galleryData[prevIndex].src})`;
        nextSide.style.backgroundImage = `url(${galleryData[nextIndex].src})`;
        caption.textContent = galleryData[currentIndex].cap;
      }

      function goNext() {
        currentIndex = (currentIndex + 1) % totalItems;
        updateGallery();
      }

      function goPrev() {
        currentIndex = (currentIndex - 1 + totalItems) % totalItems;
        updateGallery();
      }

      function startAutoplay() {
        if (autoplayTimer) clearInterval(autoplayTimer);
        autoplayTimer = setInterval(goNext, AUTOPLAY_INTERVAL);
      }

      // --- Écouteurs d'événements ---
      prevSide.addEventListener('click', goPrev);
      nextSide.addEventListener('click', goNext);
      mainContainer.addEventListener('click', goNext);
      wrapper.addEventListener('mouseenter', () => clearInterval(autoplayTimer));
      wrapper.addEventListener('mouseleave', startAutoplay);

      // --- Premier rendu & Démarrage ---
      updateGallery();
      startAutoplay();
    })();

    // === SMOOTH SCROLL pour les ancres internes ===
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    });

  </script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      document.querySelectorAll(".read-more-btn").forEach(function (btn) {
        btn.addEventListener("click", function () {
          const moreText = this.previousElementSibling;
          if (moreText.style.display === "inline") {
            moreText.style.display = "none";
            this.textContent = "Lire plus";
          } else {
            moreText.style.display = "inline";
            this.textContent = "Lire moins";
          }
        });
      });
    });

    // ======================================================
    // AJOUTEZ CE NOUVEAU SCRIPT CI-DESSOUS
    // ======================================================
    // ==============================================================================
    // SCRIPT FINAL AVEC LOGIQUE DE JEU COMPLÈTE (SCORE, CHRONO, PIÈGE)
    // ==============================================================================

    (function () {

      // --- PARTIE 1 : GESTION DE L'INACTIVITÉ (le "cerveau" principal) ---
      // Cette partie ne change presque pas, elle continue de tourner en arrière-plan.

      // const statusDisplay = document.createElement('div');
      // statusDisplay.style.position = 'fixed'; statusDisplay.style.bottom = '10px'; statusDisplay.style.left = '10px'; statusDisplay.style.padding = '12px'; statusDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; statusDisplay.style.color = 'white'; statusDisplay.style.borderRadius = '8px'; statusDisplay.style.zIndex = '9999'; statusDisplay.style.fontFamily = 'monospace'; statusDisplay.style.fontSize = '14px';
      // statusDisplay.textContent = 'Script de débogage initialisé...';
      // document.body.appendChild(statusDisplay);

      // function updateStatus(message) { statusDisplay.textContent = message; }

      let hideStoryTimer = null;
      let countdownInterval = null;

      // === NOUVEAU (corrigé) : n’armer l’inactivité que sur un vrai geste utilisateur
      // Triggers : pointer dans la zone jeu/handpan, 1er hit, play vidéo APRÈS geste récent.
      const INACTIVITY_MS = 4000;
      let inactivityArmed = false;                // armé après vrai trigger user
      let inactivityCountdownRunning = false;     // évite les doubles démarrages
      let scheduleCheckId = null;                 // debounce de checkAndManageTimers
      let lastUserGestureTs = 0;                  // pour filtrer les auto-play
      let lastStateLine = "";


      // Panneau de logs léger si absent
      (function ensureLiveDebug() {
        if (!document.getElementById('live-debug')) {
      <!-- const box = document.createElement('pre'); -->
      < !--box.id = 'live-debug'; -->
      < !--box.setAttribute('aria-live', 'polite'); -->
      < !--box.style.cssText = 'position:fixed;right:8px;bottom:8px;max-width:48vw;max-height:40vh;overflow:auto;background:rgba(0,0,0,.75);color:#fff;padding:8px 10px;border-radius:8px;font:12px/1.4 monospace;z-index:99999'; -->
     < !--box.textContent = new Date().toLocaleTimeString() + ' - 🔎 Debug prêt'; -->
      < !--document.body.appendChild(box); -->
    }
      })();
      function dbg(msg) {
        const box = document.getElementById('live-debug');
        if (!box) return;
        const line = `${new Date().toLocaleTimeString()} - ${msg}`;
        box.textContent += `\n${line}`;
        box.scrollTop = box.scrollHeight;
      }

      function cancelAllTimers() {
        if (hideStoryTimer) { clearTimeout(hideStoryTimer); }
        if (countdownInterval) { clearInterval(countdownInterval); }

        inactivityCountdownRunning = false;
        if (scheduleCheckId) { clearTimeout(scheduleCheckId); scheduleCheckId = null; }

      }

      window.onUserActivity = function () {
        cancelAllTimers();
        hideStoryTimer = null;


        // Re-programme le contrôle d’inactivité (debounce) uniquement si ARMÉ
        if (inactivityArmed) {
          if (scheduleCheckId) clearTimeout(scheduleCheckId);
          scheduleCheckId = setTimeout(checkAndManageTimers, 200);
        }

      }

      function checkAndManageTimers() {
        // Suivi de l'inactivité APRÈS démarrage mini-jeu/vidéo.
        scheduleCheckId = null; // ce run est consommé
        if (!inactivityArmed) { cancelAllTimers(); return; }
        if (inactivityCountdownRunning) { return; } // déjà en cours
        if (hideStoryTimer) { return; }             // garde-fou


        let countdownValue = Math.ceil(INACTIVITY_MS / 1000);
        dbg(`⏱ Timer d'inactivité démarré (${countdownValue}s) | cause=armé mini-jeu/vidéo`);

        // Affiche un compte à rebours dans les logs (verbeux pour le debug terrain)
        clearInterval(countdownInterval);
        countdownInterval = setInterval(() => {
          countdownValue--;
          if (countdownValue > 0) dbg(`… inactivité ${countdownValue}s restantes`);
          if (countdownValue <= 0) clearInterval(countdownInterval);
        }, 1000);

        inactivityCountdownRunning = true;

        hideStoryTimer = setTimeout(() => {
          const storyContainer = document.querySelector('.story-container');
          if (storyContainer) {
            storyContainer.remove();
            dbg(`❌ Storytelling masqué | raison=inactivité (${INACTIVITY_MS}ms) après démarrage mini-jeu/vidéo`);
          } else {
            dbg(`⚠️ Aucun .story-container à masquer au terme de l'inactivité`);
          }

          // stoppe tout définitivement
          hideStoryTimer = null;
          inactivityCountdownRunning = false;
          inactivityArmed = false;

        }, INACTIVITY_MS);
      }

      // === ARMEMENT : démarrer la surveillance d'inactivité quand le mini-jeu démarre ===
      const funSlot = document.getElementById('fun-slot');
      const footerVideo = document.getElementById('footer-alt-video') || (funSlot && funSlot.querySelector('#video-block video'));

      function armInactivity(why) {
        if (inactivityArmed) return;
        inactivityArmed = true;
        dbg(`✅ Inactivité ARMÉE (après démarrage) | trigger=${why}`);
        // dès armement, on lance un premier timer (il sera réinitialisé à chaque activité)
        window.onUserActivity();
      }


      // 0) Mémorise les gestes récents (pour filtrer autoplay)
      if (funSlot) {
        funSlot.addEventListener('pointerdown', () => { lastUserGestureTs = performance.now(); }, { passive: true });
        funSlot.addEventListener('pointerenter', () => { lastUserGestureTs = performance.now(); }, { passive: true });
      }

      // 1) Vidéo du slot “fun” : on arme seulement si 'play' suit un geste récent (<2.5s)
      if (footerVideo) {
        footerVideo.addEventListener('play', () => {
          const since = performance.now() - lastUserGestureTs;
          if (since < 2500) {
            armInactivity('video_play(user_gesture)');
          } else {
            dbg(`⏸ Play vidéo ignoré (pas de geste récent, ${Math.round(since)}ms)`);
          }
        });
      }
      // 2) Apparition du jeu / handpan via classe sur #fun-slot
      if (funSlot) {
        // Edge-detection : n’arme que lors du PASSAGE à l’état (évite "initial")
        let hadShowGame = funSlot.classList.contains('show-game');
        let hadShowHp = funSlot.classList.contains('show-handpan');
        const mo = new MutationObserver(() => {
          const nowGame = funSlot.classList.contains('show-game');
          const nowHp = funSlot.classList.contains('show-handpan');
          if (!hadShowGame && nowGame) armInactivity('show-game(class-added)');
          if (!hadShowHp && nowHp) armInactivity('show-handpan(class-added)');
          hadShowGame = nowGame;
          hadShowHp = nowHp;
        });
        mo.observe(funSlot, { attributes: true, attributeFilter: ['class'] });
        // ⚠️ IMPORTANT : on NE PAS arme sur l’état initial pour éviter le démarrage tout seul
      }

      // 3) Premier “hit” utilisateur dans le mini-jeu ou sur le handpan
      //    (on attache en délégation pour capter les éléments injectés dynamiquement)
      document.addEventListener('pointerdown', (e) => {
        if (e.target.closest('#mini-game-arena, .game-object, .hp-zone, #hp-stage')) {
          armInactivity('first_hit_game_or_handpan');
        }
      }, { passive: true });

      // 3bis) Entrée de la souris dans la zone finale (sans cliquer) → armement
      document.addEventListener('pointerenter', (e) => {
        if (e.target.closest('#mini-game-arena, .hp-zone, #hp-stage')) {
          armInactivity('pointerenter_zone');
        }
      }, true);

      // === RESET d'inactivité sur n'importe quelle action utilisateur classique
      window.addEventListener('scroll', window.onUserActivity, { passive: true });
      window.addEventListener('mousemove', window.onUserActivity);
      window.addEventListener('click', window.onUserActivity);
      window.addEventListener('keydown', window.onUserActivity);
      window.addEventListener('pointerdown', window.onUserActivity, { passive: true });
      window.addEventListener('wheel', window.onUserActivity, { passive: true });
      window.addEventListener('touchstart', window.onUserActivity, { passive: true });


      // --- PARTIE 2 : LOGIQUE DU MINI-JEU (entièrement réécrite) ---

      const gameArena = document.getElementById('mini-game-arena');
      if (gameArena) {
        // On récupère les éléments d'affichage
        const scoreDisplay = document.getElementById('game-score');
        const timerDisplay = document.getElementById('game-timer');
        const instructionsDisplay = document.getElementById('game-instructions');

        // Configuration du jeu
        const OBJECT_TYPES = [
          { type: 'logo', src: 'https://soundyoga.fr/wp-content/uploads/2020/04/LOGO-SYOGA-Ccolors-300x295.png', points: 2 },
          { type: 'gong', src: 'https://cdn-icons-png.flaticon.com/512/8795/8795855.png', points: 5 }
        ];
        const GAME_DURATION = 15; // en secondes
        const TRAP_CHANCE = 0.25; // 25% de chance qu'un gong soit un piège

        // Variables d'état du jeu
        let score = 0;
        let isGameActive = false;
        let gameTimerId = null;
        let gameCountdownId = null;

        function updateScore(newScore) {
          score = newScore;
          scoreDisplay.textContent = `Score: ${score} `;
        }

        function gameOver(reason) {
          isGameActive = false;
          clearInterval(gameCountdownId);
          clearTimeout(gameTimerId);
          timerDisplay.textContent = " Terminé !";
          instructionsDisplay.innerHTML = `${reason}<br>Score final : ${score} `;
          // On arrête de faire apparaître de nouveaux objets
          gameArena.innerHTML = '';
        }

        function startGameTimer() {
          if (isGameActive) return; // Le jeu a déjà commencé
          isGameActive = true;
          let timeLeft = GAME_DURATION;
          timerDisplay.textContent = `Temps: ${timeLeft}s`;
          instructionsDisplay.style.opacity = '0'; // On cache les instructions initiales

          // Décompte visuel
          gameCountdownId = setInterval(() => {
            timeLeft--;
            timerDisplay.textContent = `Temps: ${timeLeft}s`;
          }, 1000);

          // Timer de fin de partie
          gameTimerId = setTimeout(() => {
            gameOver("Temps écoulé !");
          }, GAME_DURATION * 1000);
        }

        function spawnObject() {
          if (!isGameActive && score > 0) return; // N'ajoute pas d'objets si le jeu est fini

          const objectData = OBJECT_TYPES[Math.floor(Math.random() * OBJECT_TYPES.length)];
          const img = document.createElement('img');
          img.src = objectData.src;
          img.className = 'game-object';
          img.dataset.points = objectData.points;

          // Logique du piège : si c'est un gong, il y a une chance qu'il soit rouge
          if (objectData.type === 'gong' && Math.random() < TRAP_CHANCE) {
            img.classList.add('trap');
          }

          // Styles aléatoires...
          const size = Math.random() * 40 + 40;
          img.style.width = `${size}px`;
          img.style.height = 'auto';
          img.style.top = `${Math.random() * (gameArena.clientHeight - size)}px`;
          img.style.left = `${Math.random() * (gameArena.clientWidth - size)}px`;
          img.style.animationDuration = `${Math.random() * 3 + 4}s`;

          img.addEventListener('click', (e) => {
            e.stopPropagation();

            // C'est un clic, donc on notifie le "cerveau" principal pour annuler son propre chrono de 3s
            window.onUserActivity();

            // Lance le chrono du jeu au premier clic
            if (!isGameActive) {
              startGameTimer();
            } else if (gameTimerId === null) {
              // Si le jeu est fini (game over), on ne fait rien
              return;
            }

            // Vérifie si c'est un piège
            if (img.classList.contains('trap')) {
              gameOver("Touché ! C'était un piège.");
              return;
            }

            // Ajoute les points
            updateScore(score + parseInt(img.dataset.points));

            // Disparition et réapparition
            img.style.opacity = '0';
            setTimeout(() => {
              img.remove();
              spawnObject();
            }, 300);
          });

          gameArena.appendChild(img);
        }

        // On peuple le jeu initialement
        for (let i = 0; i < 5; i++) {
          spawnObject();
        }
      }

      // Lancement initial
      checkAndManageTimers();


    })();

  </script>
  <!-- === [AJOUT] POP-UP ÉVÉNEMENTS V3 (auto-inject CSS + overlay) === -->
  <script id="sy-popup-v3">
    (function () {
      "use strict";
      // ------------------------------------------------------------------------------------
      // Pop-up Événements — V3 isolée (namespacing sy-*)
      // - Affichage à chaque page-load (delay 3s)
      // - Saut automatique à la fin des créneaux (ex. 18:00 → fin 19:00)
      // - Evergreen "Soin aux diapasons" uniquement 22:00→00:00 et seulement si aucun LIVE
      // - Flèche “suivant” très visible + navigation clavier (→ et Esc)
      // - CTA par défaut : page de réservation
      // ------------------------------------------------------------------------------------

      // ----- Paramètres
      const ENABLE = true;
      const DELAY_MS = 0;
      const DEFAULT_CTA = "https://www.compiegne.resa.soundyoga.fr/";

      // ----- Injection CSS (isolée)
      const CSS_ID = "sy-popup-v3-styles";
      if (!document.getElementById(CSS_ID)) {
        const css = `
      #syOfferPopupV3 {
        position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
       padding: 16px; box-sizing: border-box; background: rgba(0,0,0,.60); z-index: 10050;
      }
      .sy-promo-block {
        position: relative; background: #000; border-radius: 16px; overflow: hidden;
        width: min(92vw, 680px); max-height: 92vh; box-shadow: 0 20px 60px rgba(0,0,0,.5);
      }
      .sy-promo-block a { display: block; outline: none; }
      .sy-promo-block img {
        display: block; width: 100%; height: auto; object-fit: contain; background: #000;
        user-select: none; -webkit-user-drag: none;
      }
      .sy-close {
        position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%;
        border: none; background: rgba(0,0,0,.65); color: #fff; font-size: 24px; line-height: 1;
        display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35);
      }
      .sy-close:hover, .sy-close:focus { outline: 3px solid rgba(255,255,255,.35); }
      .sy-next {
        position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
        width: 56px; height: 56px; border-radius: 50%; border: none;
        display: grid; place-items: center; cursor: pointer;
        background: rgba(0,0,0,.70); backdrop-filter: blur(4px);
        font-size: 28px; line-height: 1; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35);
      }
      .sy-next:hover, .sy-next:focus { outline: 3px solid rgba(255,255,255,.35); }
      @media (max-width: 640px) {
        .sy-next { right: -8px; width: 48px; height: 48px; font-size: 24px; }
        .sy-close { width: 36px; height: 36px; font-size: 22px; }
      }
    `;
        const st = document.createElement("style");
        st.id = CSS_ID;
        st.textContent = css;
        document.head.appendChild(st);
      }

      // ----- Overlay (créé si absent)
      const OVERLAY_ID = "syOfferPopupV3";
      let overlay = document.getElementById(OVERLAY_ID);
      if (!overlay) {
        overlay = document.createElement("div");
        overlay.id = OVERLAY_ID;
        overlay.setAttribute("aria-hidden", "true");
        document.body.appendChild(overlay);
      }

      // ----- Données
      const items = [
        {
title: "Yoga du Son — Mercredi 20h",
          imageUrl: "https://static.wixstatic.com/media/818fcb_349135e0e0ec4197a366671f4e5766ec~mv2.jpg",
          type: "event",
          occurrences: [
{ start: "2026-05-06T20:00:00", end: "2026-05-06T23:59:00" },
            { start: "2026-05-13T20:00:00", end: "2026-05-13T23:59:00" },
            { start: "2026-05-20T20:00:00", end: "2026-05-20T23:59:00" },
            { start: "2026-05-27T20:00:00", end: "2026-05-27T23:59:00" }
		   
          ],
          ctaUrl: DEFAULT_CTA
        },
        {
        title: "MyoYoga — Mercredi 6 mai à 18h15",
          imageUrl: "https://static.wixstatic.com/media/818fcb_805dbef6dcfc437d8d497e767dd4422c~mv2.jpg",
          type: "event",
          occurrences: [
             { start: "2026-05-06T18:15:00", end: "2026-05-06T23:59:00" }
          ],
          ctaUrl: DEFAULT_CTA
        },
        {
         title: "Handpan — Samedi 8 mai à 14h30 / Dimanches 10 et 24 mai à 14h30",
          imageUrl: "https://static.wixstatic.com/media/818fcb_ab2711eb1d2a4adaa3bfe2ec15034350~mv2.jpg",
          type: "event",
          occurrences: [
            { start: "2026-05-08T14:30:00", end: "2026-05-08T23:59:00" },
           { start: "2026-05-10T14:30:00", end: "2026-05-10T23:59:00" },
            { start: "2026-05-24T14:30:00", end: "2026-05-24T23:59:00" }
          ],
          ctaUrl: DEFAULT_CTA
        },
        {
         title: "Yoga Statique Renforcement — Mardi 5 et 19 mai à 19h",
          imageUrl: "https://static.wixstatic.com/media/818fcb_63b8009d026f49469798eac6201a18b0~mv2.jpg",
          type: "event",
          occurrences: [
          { start: "2026-05-05T19:00:00", end: "2026-05-05T23:59:00" },
            { start: "2026-05-19T19:00:00", end: "2026-05-19T23:59:00" }
          ],
          ctaUrl: DEFAULT_CTA
        },
        {
          title: "L’art des Mudras — Samedi 23 mai à 11h",
          imageUrl: "https://static.wixstatic.com/media/818fcb_2fe0fe61b3354cffa65f607e7d661be0~mv2.jpg",
          type: "event",
          occurrences: [
           { start: "2026-05-23T11:00:00", end: "2026-05-23T23:59:00" }
          ],
          ctaUrl: DEFAULT_CTA
        },
        {
           title: "Écriture du Sanskrit — Jeudi 14 mai à 14h30",
          imageUrl: "https://static.wixstatic.com/media/818fcb_a5c8fb6fdcbd4330afaa5c54954c3721~mv2.jpg",
          type: "event",
          occurrences: [
           { start: "2026-01-24T08:00:00", end: "2026-01-24T23:59:00" },
            { start: "2026-05-14T14:30:00", end: "2026-05-14T23:59:00" }
          ],
          ctaUrl: DEFAULT_CTA
        },
        {
           title: "Respiration & Méditation — Samedi 16h30",
          imageUrl: "https://static.wixstatic.com/media/818fcb_bb7dd1b9426b4820870ab8fea66d66ef~mv2.jpg",
          type: "event",
          occurrences: [
            { start: "2026-05-02T16:30:00", end: "2026-05-02T23:59:00" },
            { start: "2026-05-09T16:30:00", end: "2026-05-09T23:59:00" },
            { start: "2026-05-16T16:30:00", end: "2026-05-16T23:59:00" },
            { start: "2026-05-23T16:30:00", end: "2026-05-23T23:59:00" },
            { start: "2026-05-30T16:30:00", end: "2026-05-30T23:59:00" }
          ],
          ctaUrl: DEFAULT_CTA
        },
        {
         title: "Yoga prénatal & Bain Sonore — Vendredi 17h15",
          imageUrl: "https://static.wixstatic.com/media/818fcb_e44bc541409b4680aa2614a535d733df~mv2.jpg",
          type: "event",
          occurrences: [
            { start: "2026-05-01T17:15:00", end: "2026-05-01T23:59:00" },
           { start: "2026-05-08T17:15:00", end: "2026-05-08T23:59:00" },
            { start: "2026-05-15T17:15:00", end: "2026-05-15T23:59:00" },
            { start: "2026-05-22T17:15:00", end: "2026-05-22T23:59:00" },
            { start: "2026-05-29T17:15:00", end: "2026-05-29T23:59:00" }
          ],
          ctaUrl: DEFAULT_CTA
        },
        {
          title: "Atelier Voyage en Inde - Instruments - Samedi 25 Avril à 11h",
          imageUrl: "https://static.wixstatic.com/media/818fcb_569c509729714942a70338ded5bc9afc~mv2.jpg",
          type: "event",
          occurrences: [
            { start: "2026-04-25T08:00:00", end: "2026-04-25T23:59:00" }
          ],
          ctaUrl: DEFAULT_CTA
        },				
        {
          title: "Neurosciences & Méditation (Soir)",
          imageUrl: "https://static.wixstatic.com/media/818fcb_7af6307bebfd4980b2adb3efa08516a0~mv2.jpg",
          type: "evergreen",
          window: { from: "23:00", to: "00:00" },
          ctaUrl: "https://soundyoga.fr/healing/"
        }
      ];

      // ----- Utils date
      const toDate = (isoLocal) => new Date(isoLocal);
      const mins = (d) => d.getHours() * 60 + d.getMinutes();
      function inWindow(now, win) {
        if (!win) return false;
        const [fh, fm] = win.from.split(":").map(Number);
        const [th, tm] = win.to.split(":").map(Number);
        const n = mins(now), a = fh * 60 + fm, b = th * 60 + tm;
        return (a <= b) ? (n >= a && n < b) : (n >= a || n < b); // gère chevauchement minuit
      }
      function nextOccurrence(item, now) {
        if (item.type !== "event" || !Array.isArray(item.occurrences)) return null;
        let best = null;
        for (const occ of item.occurrences) {
          const start = toDate(occ.start), end = toDate(occ.end);
          if (now < end) { if (!best || start < best.start) best = { start, end }; }
        }
        return best;
      }
      function millisUntilWindowEnd(now, win) {
        const [th, tm] = win.to.split(":").map(Number);
        const end = new Date(now); end.setSeconds(0, 0); end.setHours(th, tm, 0, 0);
        const crosses = (() => { const [fh, fm] = win.from.split(":").map(Number); return (fh * 60 + fm) > (th * 60 + tm); })();
        const fromMin = (() => { const [fh, fm] = win.from.split(":").map(Number); return fh * 60 + fm; })();
        if (crosses && mins(now) >= fromMin) end.setDate(end.getDate() + 1);
        if (!crosses && mins(now) >= (th * 60 + tm)) end.setDate(end.getDate() + 1);
        return end - now;
      }

      function buildEligible(now) {
        const list = []; let hasLive = false;
        for (const it of items) {
          if (it.type === "event") {
            const occ = nextOccurrence(it, now);
            if (occ) {
              const live = now >= occ.start && now < occ.end;
              if (live) hasLive = true;
              list.push({ ...it, start: occ.start, end: occ.end, live });
            }
          }
        }
        list.sort((a, b) => a.start - b.start);
        if (!hasLive) {
          for (const it of items) {
            if (it.type === "evergreen" && inWindow(now, it.window)) {
              list.unshift({ ...it, live: false });
              break;
            }
          }
        }
        return list;
      }

      // ----- Rendu / navigation
      let idx = 0, timer = null;
      function clearT() { if (timer) { clearTimeout(timer); timer = null; } }
      function scheduleRecheck(item) {
        clearT();
        const now = new Date();
        if (item.type === "event" && item.end instanceof Date) {
          const ms = item.end - now; if (ms > 0 && isFinite(ms)) timer = setTimeout(() => goNext(true), ms + 150);
        } else if (item.type === "evergreen" && item.window) {
          const ms = millisUntilWindowEnd(now, item.window); if (ms > 0 && isFinite(ms)) timer = setTimeout(() => goNext(true), ms + 150);
        }
      }

      function render(item) {
        overlay.innerHTML = `
      <div class="sy-promo-block">
        <button class="sy-close" aria-label="Fermer" title="Fermer">&times;</button>
        <button class="sy-next" aria-label="Voir l’affiche suivante" title="Suivant">›</button>
        <a href="${item.ctaUrl || DEFAULT_CTA}" target="_blank" rel="noopener">
          <img src="${item.imageUrl}" alt="${item.title}">
        </a>
      </div>`;
        overlay.style.display = "flex";
        overlay.setAttribute("aria-hidden", "false");

        const onClose = () => { overlay.style.display = "none"; overlay.setAttribute("aria-hidden", "true"); clearT(); document.removeEventListener("keydown", onKey); };
        overlay.querySelector(".sy-close").addEventListener("click", onClose);
        overlay.addEventListener("click", (e) => { if (e.target === overlay) onClose(); });
        overlay.querySelector(".sy-next").addEventListener("click", () => goNext(false));
        document.addEventListener("keydown", onKey);
        overlay.querySelector("img").addEventListener("error", () => goNext(true));
        scheduleRecheck(item);
      }
      function onKey(e) {
        if (overlay.style.display !== "flex") return;
        if (e.key === "ArrowRight") goNext(false);
        if (e.key === "Escape") overlay.querySelector(".sy-close")?.click();
      }
      function goNext(force) {
        const now = new Date(); const list = buildEligible(now);
        if (!list.length) { overlay.style.display = "none"; overlay.setAttribute("aria-hidden", "true"); clearT(); return; }
        idx = force ? 0 : (idx + 1) % list.length;
        render(list[idx]);
      }
      function show() {
        if (!ENABLE) return;
        const list = buildEligible(new Date());
        if (!list.length) return;
        idx = 0; render(list[idx]);
      }
      window.addEventListener("load", () => setTimeout(show, DELAY_MS));
    })();
  </script>
  <!-- === [/AJOUT] POP-UP ÉVÉNEMENTS V3] === -->

  <!-- POP-UP (Masqué) -->
  <!--
  <div id="nyPopup" class="ny-overlay">
  
   <div class="ny-card" style="padding: 0; overflow: hidden;">
      <button class="ny-close" onclick="document.getElementById('nyPopup').classList.remove('show')" style="background:white; border-radius:50%; width:32px; height:32px; top:15px; right:15px; opacity:0.9; box-shadow:0 2px 10px rgba(0,0,0,0.2);">&times;</button>
      
      <img src="https://static.wixstatic.com/media/818fcb_187155a10851401c8c82be1332cf6839~mv2.png/v1/fill/w_990,h_623,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/818fcb_187155a10851401c8c82be1332cf6839~mv2.png" alt="Baie de Somme" style="width:100%; height:220px; object-fit:cover; display:block;">
      
      <div style="padding: 30px 40px 40px;">
        <h2 class="ny-title" style="margin-bottom: 5px;">Immersion Yoga & Océan intérieur</h2>
        <p class="ny-subtitle" style="margin: 0 0 20px; font-weight:bold; color:var(--violet);">Hôtel Cap Hornu ***</p>
		<p class="ny-subtitle" style="margin: 0 0 20px; font-weight:bold; color:var(--violet);">29-31 Mai 2026</p>
        <p style="margin-bottom: 30px; line-height: 1.6; color:var(--text);">Une immersion unique au rythme du yoga, des sons et des marées !</p>
        <a href="https://compiegne.resa.soundyoga.fr/retraite-ocean" class="ny-btn">Accéder à la vente privée</a>
      </div>
 
	
	</div>
  </div>
  -->
 
  <script>
    /* LOGIQUE POP-UP (Désactivée) */
	/*
    (function () {
      const endDate = new Date("Mar 31, 2026 23:59:59").getTime();
      const f = n => n < 10 ? '0' + n : n;
      setTimeout(() => {
        const popup = document.getElementById('nyPopup');
        if (popup) popup.classList.add('show');
      }, 2000);
      document.getElementById('nyPopup').addEventListener('click', function (e) {
        if (e.target === this) this.classList.remove('show');
      });
      const timerFunc = () => {
        const now = new Date().getTime();
        const diff = endDate - now;
        if (diff < 0) {
          document.querySelector('.promo-banner').style.display = 'none';
          return;
        }
        const days = Math.floor(diff / 86400000),
          hours = Math.floor((diff % 86400000) / 3600000),
          mins = Math.floor((diff % 3600000) / 60000),
          secs = Math.floor((diff % 60000) / 1000);
        if (document.getElementById('ny-days')) {
          document.getElementById('ny-days').innerText = f(days);
          document.getElementById('ny-hours').innerText = f(hours);
          document.getElementById('ny-mins').innerText = f(mins);
          document.getElementById('ny-secs').innerText = f(secs);
        }
        const bTimer = document.getElementById('banner-timer');
        if (bTimer) bTimer.innerText = `${days}j ${f(hours)}h ${f(mins)}m`;
      };
      setInterval(timerFunc, 1000);
      timerFunc();
    })();
*/
    /* --- GÉNÉRATEUR DE FLOCONS (Toggle) --- */
    let isSnowing = false;
    function toggleSnow(btn) {
      isSnowing = !isSnowing;

      document.body.classList.toggle('snow-active');
      isSnowing = document.body.classList.contains('snow-active');

      // Update visual state of all snow buttons
      document.querySelectorAll('button[onclick*="toggleSnow"]').forEach(b => {
        b.classList.toggle('active', isSnowing);
      });

      const existingSnow = document.querySelectorAll('.snowflake');
      if (isSnowing) {
        // Create snow if not present
        if (existingSnow.length === 0) {
          const count = 40;
          for (let i = 0; i < count; i++) {
            const s = document.createElement('div');
            s.className = 'snowflake';
            s.innerHTML = '❄';
            s.style.left = Math.random() * 100 + 'vw';
            s.style.animationDuration = (Math.random() * 15 + 20) + 's';
            s.style.animationDelay = (Math.random() * 20) + 's';
            s.style.fontSize = (Math.random() * 10 + 10) + 'px';
            document.body.appendChild(s);
          }
        } else {
          existingSnow.forEach(s => s.style.display = 'block');
        }
        playChime(2000, 'sine');
      }
    }

  </script>


  <script>
    (() => {
      "use strict";

      const messages = [
        {
          fact: "Les fascias forment un réseau continu qui enveloppe, relie et soutient de nombreuses structures de notre corps.",
          session: "MyoYoga — Corps & Visage",
          detail: "Une séance d’auto-massages et de relâchement myofascial pour explorer le corps autrement.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/myoyoga-corps-visage-1"
        },
        {
          fact: "Nous ne percevons pas le son uniquement avec nos oreilles : certaines vibrations peuvent aussi être ressenties physiquement dans le corps.",
          session: "Bain Sonore multi-instruments",
          detail: "Une immersion sonore pour expérimenter gongs, bols et autres instruments dans un temps de lâcher-prise.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/bain-sonore-multi-instruments-2"
        },
        {
          fact: "Notre cerveau continue de se modifier et de s’adapter tout au long de notre vie.",
          session: "Méditation & Neurosciences",
          detail: "Une séance pour relier pratique méditative, attention et compréhension du fonctionnement du cerveau.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/méditation-neurosciences-1"
        },
        {
          fact: "Votre respiration est l’un des rares grands rythmes du corps que vous pouvez observer… et modifier volontairement.",
          session: "Respiration & Méditation",
          detail: "Une heure pour explorer le souffle, l’attention et l’apaisement de l’esprit.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/respiration-méditation-1"
        },
        {
          fact: "Le mouvement et le repos ne sont pas opposés : ils peuvent se compléter dans une même pratique.",
          session: "Yoga & Bain Sonore",
          detail: "Une pratique de yoga doux prolongée par une relaxation sonore.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-bain-sonore-3"
        },
        {
          fact: "Votre voix produit des vibrations que vous pouvez sentir dans votre poitrine, votre visage et votre crâne.",
          session: "Yoga du Son",
          detail: "Une exploration de la voix, du souffle et des vibrations, sans avoir besoin de savoir chanter.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-du-son-1"
        },
        {
          fact: "Le sanskrit est l’une des grandes langues classiques de l’Inde et accompagne l’histoire du yoga depuis des siècles.",
          session: "Écriture du Sanskrit",
          detail: "Une découverte de son écriture et de ses sonorités dans une approche calme et contemplative.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/écriture-du-sanskrit-1"
        },
        {
          fact: "Une posture peut sembler immobile tout en sollicitant fortement les muscles responsables de la stabilité.",
          session: "Yoga Statique — Renforcement",
          detail: "Une séance centrée sur le maintien, le gainage, la stabilité et la conscience corporelle.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-statique-renforcement-2"
        },
        {
          fact: "Le yoga traditionnel ne se résume pas aux postures : respiration, concentration et relaxation font aussi partie de la pratique.",
          session: "Yoga intégral",
          detail: "Une pratique complète associant posture, souffle, attention et retour au calme.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-intégral-1-3"
        },
        {
          fact: "Un diapason produit une fréquence sonore précise ainsi qu’une vibration mécanique que l’on peut ressentir au toucher.",
          session: "Soin aux Diapasons",
          detail: "Une séance individuelle centrée sur l’expérience du son et des vibrations.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/soin-aux-diapasons-3"
        },
        {
          fact: "Pendant la grossesse, la respiration, la mobilité et la relaxation peuvent être adaptées aux transformations du corps.",
          session: "Yoga prénatal & Bain Sonore",
          detail: "Une pratique pensée pour accompagner la grossesse avec mouvements adaptés et relaxation sonore.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/yoga-prénatal-bain-sonore-1"
        },
        {
          fact: "Avec un handpan, une seule frappe peut faire apparaître une note principale accompagnée de plusieurs harmoniques.",
          session: "HandPan découverte",
          detail: "Une initiation intuitive et accessible, même sans expérience musicale.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/handpan-découverte"
        },
        {
          fact: "Un gong ne produit pas une seule note : sa vibration fait apparaître un ensemble complexe d’harmoniques qui évoluent dans le temps.",
          session: "Bain de Gongs",
          detail: "Une séance entièrement consacrée à la richesse et à la puissance vibratoire des gongs.",
          url: "https://www.compiegne.resa.soundyoga.fr/booking-calendar/bain-de-gongs-1"
        }
      ];

      const fact = document.getElementById("sy-start-fact");
      const session = document.getElementById("sy-start-session");
      const detail = document.getElementById("sy-start-detail");
      const courseLink = document.getElementById("sy-start-course-link");
      const next = document.getElementById("sy-start-next");

      if (!fact || !session || !detail || !courseLink || !next) return;

      function shuffledMessages(previousUrl = "") {
        const shuffled = [...messages];

        for (let i = shuffled.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
        }

        if (shuffled.length > 1 && shuffled[0].url === previousUrl) {
          [shuffled[0], shuffled[1]] = [shuffled[1], shuffled[0]];
        }

        return shuffled;
      }

      let messageOrder = shuffledMessages();
      let messageIndex = 0;

      function renderMessage() {
        const item = messageOrder[messageIndex];
        fact.textContent = item.fact;
        session.textContent = item.session;
        detail.textContent = item.detail;
        courseLink.href = item.url;
      }

      next.addEventListener("click", () => {
        messageIndex += 1;

        if (messageIndex >= messageOrder.length) {
          const previousUrl = messageOrder[messageOrder.length - 1].url;
          messageOrder = shuffledMessages(previousUrl);
          messageIndex = 0;
        }

        renderMessage();
      });

      courseLink.addEventListener("click", (event) => {
        event.preventDefault();
        window.open(courseLink.href, "_blank", "noopener");
        window.location.href = "https://soundyoga.fr/?enter=1";
      });

      renderMessage();
    })();
  </script>


  <!-- DOPAMINE JS Logic -->
  <script>
    /* =========================================
       AUDIO ENGINE (Web Audio API)
       ========================================= */
    let audioCtx;

    function startExperience() {
      // Démarrage Audio
      audioCtx = new (window.AudioContext || window.webkitAudioContext)();

      // Fade out overlay
      const overlay = document.getElementById('start-overlay');
      overlay.style.opacity = '0';
      setTimeout(() => { overlay.style.display = 'none'; }, 500);

      // Son de bienvenue
      playChime(440, 'sine');
    }

    if (new URLSearchParams(window.location.search).get('enter') === '1') {
      const overlay = document.getElementById('start-overlay');
      overlay.style.display = 'none';
      history.replaceState({}, '', window.location.pathname + window.location.hash);
    }

    // Synthétiseur minimaliste (Carillon)
    function playChime(freq, type = 'sine') {
      if (!audioCtx) return;
      const osc = audioCtx.createOscillator();
      const gainNode = audioCtx.createGain();

      osc.type = type;
      osc.frequency.setValueAtTime(freq, audioCtx.currentTime);

      // Enveloppe sonore douce (ADSR simplifié)
      gainNode.gain.setValueAtTime(0.01, audioCtx.currentTime);
      gainNode.gain.exponentialRampToValueAtTime(0.05, audioCtx.currentTime + 0.1); // Attack
      gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 2); // Release

      osc.connect(gainNode);
      gainNode.connect(audioCtx.destination);

      osc.start();
      osc.stop(audioCtx.currentTime + 2);
    }

    // Son de Gong (Basse fréquence + Noise)
    function playGongSound() {
  const gongAudio = new Audio("https://static.wixstatic.com/mp3/818fcb_1e3b979c30504197bb36027c231f287a.mp3");
      
      gongAudio.addEventListener('loadedmetadata', function() {
        // Calcule un temps de départ aléatoire (Durée totale - 10 secondes pour éviter de couper avant la fin du fichier)
        const maxStart = Math.max(0, gongAudio.duration - 10);
        gongAudio.currentTime = Math.random() * maxStart;
        gongAudio.volume = 1;
        gongAudio.play().catch(e => console.log("Audio play blocked", e));
        
      // Arrête le son après 10 secondes
        // Déclenche le fondu à 8 secondes (pour finir à 10s)
         setTimeout(() => {
          let fadeVolume = setInterval(() => {
            // Baisse le volume par palier de 0.05
            if (gongAudio.volume > 0.05) {
              gongAudio.volume -= 0.05;
            } else {
              // Quand le volume est proche de 0, on coupe tout
              clearInterval(fadeVolume);
              gongAudio.pause();
              gongAudio.volume = 1; // Prêt pour la prochaine fois
            }
          }, 100); // Répète toutes les 100ms pendant 2 secondes
        }, 8000); 
      });
    }

    /* =========================================
       1. PARTICULES MAGIQUES (Curseur)
       ========================================= */
    function createParticle(x, y) {
      const p = document.createElement('div');
      p.classList.add('magic-particle');
      p.style.left = x + 'px';
      p.style.top = y + 'px';

      const tx = (Math.random() - 0.5) * 50;
      const ty = (Math.random() - 0.5) * 50 + 20;
      p.style.setProperty('--tx', `${tx}px`);
      p.style.setProperty('--ty', `${ty}px`);

      document.body.appendChild(p);

      // Son aléatoire (Pentatonique)
      if (Math.random() > 0.92) {
        const notes = [261.63, 293.66, 329.63, 392.00, 440.00, 523.25];
        const note = notes[Math.floor(Math.random() * notes.length)];
        playChime(note * 2, 'sine');
      }

      setTimeout(() => p.remove(), 1000);
    }

    function createParticle(x, y) {
      const p = document.createElement('div');
      p.classList.add('magic-particle');
      p.style.left = x + 'px';
      p.style.top = y + 'px';

      const tx = (Math.random() - 0.5) * 50;
      const ty = (Math.random() - 0.5) * 50 + 20;
      p.style.setProperty('--tx', `${tx}px`);
      p.style.setProperty('--ty', `${ty}px`);

      document.body.appendChild(p);

      // Son aléatoire (Pentatonique)
      if (Math.random() > 0.92) {
        // playChime(note * 2, 'sine'); // Déplacé vers throttle
      }

      setTimeout(() => p.remove(), 1000);
    }

    /* === PLAN 2: MAGIC WAND AUDIO (Throttled) === */
    let lastMoveTime = 0;
    document.addEventListener('mousemove', (e) => {
      createParticle(e.clientX, e.clientY);

      const now = Date.now();
      if (now - lastMoveTime > 150) { // Throttle 150ms
        if (Math.random() > 0.8) { // Chance de son
          const notes = [523.25, 587.33, 659.25, 783.99, 880.00]; // Pentatonic High
          const note = notes[Math.floor(Math.random() * notes.length)];
          playChime(note * 2, 'sine');
        }
        lastMoveTime = now;
      }
    });
    document.addEventListener('touchmove', (e) => {
      const touch = e.touches[0];
      createParticle(touch.clientX, touch.clientY);
      createParticle(touch.clientX + 5, touch.clientY + 5);
	  
	  const now = Date.now();
      if (now - lastMoveTime > 150) {
        if (Math.random() > 0.8) {
          const notes = [523.25, 587.33, 659.25, 783.99, 880.00];
          const note = notes[Math.floor(Math.random() * notes.length)];
          playChime(note * 2, 'sine');
        }
        lastMoveTime = now;
      }
    }, { passive: true });

    /* =========================================
       2. MOOD SLIDER
       ========================================= */
    function setMood(mood, btn) {
      document.body.className = `mood-${mood}`;
      document.querySelectorAll('.mood-btn').forEach(b => b.classList.remove('active'));
      // Met à jour tous les boutons du même type (sidebar + mobile)
      const btns = document.querySelectorAll(`.mood-btn[onclick*="'${mood}'"]`);
      btns.forEach(b => b.classList.add('active'));

      // Feedback sonore
      if (mood === 'zen') playChime(261.63);
      if (mood === 'fire') playChime(329.63, 'triangle');
      if (mood === 'forest') playChime(392.00);
    }

    /* =========================================
       3. ORACLE GONG
       ========================================= */
    let isGonging = false;
    function strikeGong() {
      if (isGonging) return;
      isGonging = true;

      const gong = document.getElementById('oracle-gong');
      const result = document.getElementById('oracle-result');

      gong.classList.add('vibrating');
      playGongSound();
      result.style.opacity = 0;
      result.textContent = "...";

      setTimeout(() => {
        gong.classList.remove('vibrating');

        // --- SMART ORACLE LOGIC ---
        const MANUAL_EVENTS = [
          { time: "18:15", name: "Yoga Intégral le mercredi" },
          { time: "20:00", name: "Bain Sonore le mercredi" },
          { time: "18:30", name: "Bain de Gongs Le samedi" },
          { time: "09:30", name: "Méditation & Neurosciences le dimanche" },
          { time: "17:00", name: "Soins au Diapason le vendredi" }
        ];

        let oracleMsg = "";
        // 30% chance of promoting an event
        if (Math.random() < 0.3) {
          const evt = MANUAL_EVENTS[Math.floor(Math.random() * MANUAL_EVENTS.length)];
          oracleMsg = `${evt.time} ${evt.name} — Ça donne envie !`;
        } else {
       const messages = [
  "✨ Aujourd'hui, respirez la confiance.",
  "🌿 Prenez un moment pour observer la nature.",
  "🔥 Votre énergie est votre plus belle ressource.",
  "🎁 Cadeau : -5% avec le code FanSoundYoga5 (valable 1h)",
  "🧘 Le calme est une force.",
  "🌬️ Inspirez profondément, relâchez lentement.",
  "🌞 Chaque jour est une nouvelle possibilité.",
  "💫 Faites confiance au processus.",
  "🌊 Laissez passer ce qui ne vous sert plus.",
  "La douceur est une puissance silencieuse.",
  "🎶 Écoutez les vibrations autour de vous.",
  "🌱 Un petit pas suffit pour avancer.",
  "🔥 Votre feu intérieur est stable et maîtrisé.",
  "🧠 La clarté vient avec le yoga.",
  "🌙Le calme mental est un des beaux bijoux du yoga.",
  "🕊️ Vous pouvez relâcher le contrôle.",
  "💎 Votre présence a de la valeur.",
  "🌸 Accueillez l’instant tel qu’il est.",
  "Prenez soin de vous, sans justification.",
  "🌄 Chaque souffle vous recentre.",
  "🌀 Le mouvement juste naît de l’immobilité.",
  "🎧 Laissez le son vous traverser.",
  "🌿 Revenez au corps, ici et maintenant.",
  "🔥 La constance vaut mieux que l’intensité.",
  "🌈 Votre chemin n’a pas besoin d’être comparé.",
  "🧘‍ La stabilité commence à l’intérieur.",
  "🧘‍Le yoga est la pratique de l’amour de soi.",
  "💭 Observez vos pensées sans vous y attacher.",
  "🌬️ Expirez ce qui est superflu.",
  "🎵 Une note suffit pour changer l’atmosphère.",
  "🌞 La lumière est déjà là.",
  "Avancez avec légèreté.",
  "🌊 Faites confiance au rythme naturel.",
  "🔥 Votre engagement crée l’élan.",
  "🧩 Chaque pratique vous assemble un peu plus.",
  "🌿 Le simple est souvent l’essentiel.",
  "🕯️ Cultivez une attention douce.",
  "💫 Vous êtes exactement là où il faut.",
  "💫 Le yoga est le chemin vers l’harmonie de l’âme. ",
  "🌙 Le silence nourrit l’esprit.",
  "🎶 Le corps comprend avant le mental.",
  "🧘 Prenez le temps, vraiment.",
  "🌱 Ce que vous semez aujourd’hui grandit.",
  "🔥 L’équilibre est un ajustement constant.",
  "🕊️ La paix commence par un choix.",
  "🌊 Laissez la pratique vous guider.",
  "💎 La qualité prime sur la quantité.",
  "🌞 Honorez votre énergie du jour.",
  "🎧 Écoutez ce qui résonne juste.",
  "🌿 Revenir à soi est toujours possible.",
  "La présence transforme l’expérience.",
  "🔥 Votre attention est créatrice.",
  "🌤️ Accueillez la journée sans résistance.",
"🧭 Revenez à ce qui est essentiel.",
"🌬️ Le souffle réorganise l’esprit.",
" L’ancrage précède l’élan.",
"🔥 L’intention donne la direction.",
"🌊 La régularité crée la profondeur.",
"🧘‍♀️ Le corps sait avant que vous décidiez.",
"🌿 Ralentir, c’est aussi avancer.",
"🎼 Le silence entre les sons est précieux.",
"🌞 Vous n’avez rien à prouver.",
"🕊️ La justesse est plus importante que la vitesse.",
"🌱 Faites simple, faites vrai.",
"🌀 L’équilibre se ressent, il ne se force pas.",
"💭 Laissez les pensées passer comme des nuages.",
"🌙 Tout ne demande pas une réponse immédiate.",
"🔥 La présence stabilise l’énergie.",
"🎧 Écoutez avant d’agir.",
"🌊 Ce qui est fluide est durable.",
"🕰️ Donner du temps, c’est offrir une présence réelle.",
"🤍 Le temps donné aux autres revient toujours transformé.",
"🧭 Être là pour quelqu’un, c’est déjà beaucoup.",
"🌱 Le temps partagé nourrit les deux côtés.",
" Offrir du temps crée un lien durable.",
"🌿 Prendre du temps pour l’autre, c’est ralentir ensemble.",
"🔥 La présence sincère vaut plus que la performance.",
"🕊️ Le temps offert avec le cœur ne se perd jamais.",
"🌊 Donner du temps, c’est semer de la confiance.",
"🌄 Ce que vous donnez en temps, vous le retrouvez en profondeur.",
" L’attention transforme l’instant.",
"🌄 Chaque instant est praticable.",
  "🌙 Tout n’a pas besoin d’être résolu maintenant."
];
          oracleMsg = messages[Math.floor(Math.random() * messages.length)];
        }

        result.textContent = oracleMsg;
        result.style.opacity = 1;

        // Confettis
        for (let i = 0; i < 20; i++) {
          createParticle(window.innerWidth / 2 + (Math.random() - 0.5) * 200, window.innerHeight / 2);
        }
        isGonging = false;
      }, 1000);
    }

    // Init Gong Image
    (function () {
      const img = document.getElementById('gong-img');
      if (img) {
        const srcs = [
          "https://static.wixstatic.com/media/818fcb_3bf7042c4fac4912b9e1e5ff75244f49~mv2.png",	  
          "https://static.wixstatic.com/media/818fcb_967887c72be14100a3958fe94655ab42~mv2.png",
          "https://static.wixstatic.com/media/818fcb_95d5e2e337764cf0a699989189b51945~mv2.png",
          "https://static.wixstatic.com/media/818fcb_ad929c04658d4bfb8b1f7fb74292772b~mv2.png",
          "https://static.wixstatic.com/media/818fcb_6e9daf3a805a4d75b8943b6e8a3a4573~mv2.png",
          "https://static.wixstatic.com/media/818fcb_d997ca7270844f11bb1171bce5a28503~mv2.png"
        ];
        img.src = srcs[Math.floor(Math.random() * srcs.length)];
      }
    })();

    /* =========================================
       4. KARMA WHEEL LOGIC
       ========================================= */
    let wheelRotation = 0;

    function spinWheel() {
      const wheel = document.getElementById('wheel');
      const resultDiv = document.getElementById('karma-result');

      // Feedback immédiat son
      playChime(200, 'square');

      // Rotation aléatoire (entre 3 et 6 tours + angle random)
      const randomDeg = Math.floor(Math.random() * 360);
      wheelRotation += (1080 + randomDeg); // Ajoute 3 tours minimum

      wheel.style.transform = `rotate(${wheelRotation}deg)`;
      resultDiv.textContent = "Le destin tourne...";
      resultDiv.style.opacity = 0.5;

      // Attendre la fin de l'anim (4s définies dans CSS)
      setTimeout(() => {
        playChime(880); // Ding!

        // Résultat
        const prizes = [
          "✨ Citation : Respire, tout va bien.",
          "🎁 Gagné : -5% sur le prochain atelier !",
          "🧘 Conseil : Fais 3 respirations maintenant.",
          "⭐ Chance : Ton karma est excellent aujourd'hui."
        ];
        const win = prizes[Math.floor(Math.random() * prizes.length)];

        resultDiv.textContent = win;
        resultDiv.style.opacity = 1;
        resultDiv.style.transform = "scale(1.1)";
        setTimeout(() => resultDiv.style.transform = "scale(1)", 200);

        // Confettis
        for (let i = 0; i < 30; i++) {
          createParticle(window.innerWidth / 2, window.innerHeight - 100);
        }

      }, 4000);
    }

    /* =========================================
       BOUTONS LIQUIDES
       ========================================= */
    document.querySelectorAll('.btn').forEach(btn => {
      btn.addEventListener('click', function (e) {
        // Animation Jelly
        this.classList.remove('clicked');
        void this.offsetWidth; // Trigger reflow
        this.classList.add('clicked');
        playChime(523.25); // Petit son de validation
      });
    });
  </script>

  <script>
    /* =========================================
       LOGIQUE HANDPAN (COPIE EXACTE MINI-HANDPAN)
       ========================================= */
    let hpAudioCtx = null;
    let hpMasterGain = null;

    // 1. Fonction appelée par le bouton
    window.activateHandpanMode = function () {
      const btn = document.getElementById('btn-activate-hp');

// Lancement du son MP3 d'activation
    //  const introAudio = new Audio(//"https://static.wixstatic.com/mp3/818fcb_61e0d7cc78ba490781377e0177793a91.mp3");
     // introAudio.play().catch(e => console.log("Audio play blocked", e));

      // Coupure des autres sons
      document.querySelectorAll('video').forEach(v => { v.muted = true; v.pause(); });

      // Init Audio
      if (!hpAudioCtx) {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        hpAudioCtx = new AudioContext();
        hpMasterGain = hpAudioCtx.createGain();
        hpMasterGain.gain.value = 0.5;
        hpMasterGain.connect(hpAudioCtx.destination);

        // Hack iOS
        const buffer = hpAudioCtx.createBuffer(1, 1, 22050);
        const src = hpAudioCtx.createBufferSource();
        src.buffer = buffer;
        src.connect(hpAudioCtx.destination);
        src.start(0);
      }
      if (hpAudioCtx.state === 'suspended') hpAudioCtx.resume();

      // MAJ Bouton
      if (btn) {
        btn.innerHTML = "🔊 Profitez du handpan";
        btn.classList.add('clicked');
        // Force la couleur violette via JS au cas où
        btn.style.backgroundColor = "#4B1FA8";
      }

    //  playHpNote(440, 0.5);
    };

    // 2. Synthé
    function playHpNote(freq, velocity = 1) {
      if (!hpAudioCtx) return;
      const t0 = hpAudioCtx.currentTime;
      const osc = hpAudioCtx.createOscillator();
      const gain = hpAudioCtx.createGain();
      osc.type = 'sine';
      osc.frequency.setValueAtTime(freq, t0);
      gain.gain.setValueAtTime(0.001, t0);
      gain.gain.exponentialRampToValueAtTime(0.8 * velocity, t0 + 0.02);
      gain.gain.exponentialRampToValueAtTime(0.001, t0 + 1.5);
      osc.connect(gain);
      gain.connect(hpMasterGain);
      osc.start(t0);
      osc.stop(t0 + 1.6);
    }

    // 3. Dessin
    (function () {
      const stage = document.getElementById('hp-stage');
      if (!stage) return;

      const NOTES = [
        { f: 146.83, l: 'D3' },
        { f: 220.00, l: 'A3' }, { f: 233.08, l: 'Bb3' }, { f: 261.63, l: 'C4' },
        { f: 293.66, l: 'D4' }, { f: 329.63, l: 'E4' }, { f: 349.23, l: 'F4' },
        { f: 392.00, l: 'G4' }, { f: 440.00, l: 'A4' }, { f: 523.25, l: 'C5' }
      ];

      // Ne PAS écraser le innerHTML - vérifier si les zones existent déjà
      const existingZones = stage.querySelectorAll('.hp-zone');
      if (existingZones.length === 0) {
        // Seulement ajouter les zones si elles n'existent pas encore
        NOTES.forEach((n, i) => {
          const el = document.createElement('div');
          el.className = i === 0 ? 'hp-zone hp-ding' : 'hp-zone';
          el.dataset.freq = n.f;
          el.innerHTML = `<span class="note-label">${n.l}</span>`;
          stage.appendChild(el);
        });
      }

      function doLayout() {
        // Utilise clientWidth/clientHeight pour exclure les bordures
        const width = stage.clientWidth;
        const height = stage.clientHeight;
        const size = Math.min(width, height);
        const zones = stage.querySelectorAll('.hp-zone');

        // Ding central (toujours au centre mathématique)
        const dingSize = size * 0.28;
        const ding = zones[0];
        if (ding) {
          ding.style.width = dingSize + 'px';
          ding.style.height = dingSize + 'px';
          // On utilise calc(50%) pour être immunisé contre les micro-shifts de layout
          ding.style.left = "50%";
          ding.style.top = "50%";
        }

        // Notes périphériques
        const radius = size * 0.38;
        const zoneSize = size * 0.175;

        for (let i = 1; i < zones.length; i++) {
          const angle = -Math.PI / 2 + (i - 1) * (2 * Math.PI / (zones.length - 1));

          // Position relative au CENTRE (50% + offset)
          const dx = radius * Math.cos(angle);
          const dy = radius * Math.sin(angle);

          zones[i].style.width = zoneSize + 'px';
          zones[i].style.height = zoneSize + 'px';
          zones[i].style.left = `calc(50% + ${dx}px)`;
          zones[i].style.top = `calc(50% + ${dy}px)`;
        }
      }

      // Appel initial après le rendu complet (double RAF pour être sûr)
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          doLayout();
        });
      });

      // Support resize
      const resizeObserver = new ResizeObserver(doLayout);
      resizeObserver.observe(stage);
      window.addEventListener('resize', doLayout);

      stage.addEventListener('mousedown', (e) => {
        const z = e.target.closest('.hp-zone');
        if (z) {
          e.preventDefault();
          z.classList.add('active');
          setTimeout(() => z.classList.remove('active'), 150);
          if (!hpAudioCtx) activateHandpanMode();
          playHpNote(parseFloat(z.dataset.freq));
        }
      });

      stage.addEventListener('touchstart', (e) => {
        const z = e.target.closest('.hp-zone');
        if (z) {
          e.preventDefault();
          z.classList.add('active');
          setTimeout(() => z.classList.remove('active'), 150);
          if (!hpAudioCtx) activateHandpanMode();
          playHpNote(parseFloat(z.dataset.freq));
        }
      }, { passive: false });
    })();
  </script>

  <!-- FOMO PLAYER -->
  <div class="fomo-player-sticky" id="fomo-player">
    <button class="mood-btn active" onclick="playChime(440, 'triangle')">▶</button>
    <div class="fomo-info">
      <div class="fomo-title">Son du jour</div>
      <div class="fomo-timer">Disparaît dans 04h 12m</div>
    </div>
  </div>

  <script>
    // Reveal Player after scroll
    window.addEventListener('scroll', () => {
      if (window.scrollY > 300) document.getElementById('fomo-player').classList.add('visible');
    }, { once: true });

    // Easter Egg Logic
    function triggerEasterEgg(el) {
      playChime(880, 'sine');
      playChime(1100, 'sine');
      alert("🎁 Bravo ! Code : NAMASTE10");
      for (let i = 0; i < 50; i++) createParticle(window.innerWidth / 2, window.innerHeight / 2);
    }
  </script>
</body>

</html>