/* =============== VARIABLES ================================================= */
/* =========================================================================== */

  :root {
    --footer-h:70px;
    --gap:12px;
    --bg:#00184b;
    --text:#fff;
    --card-radius:8px;
    --seek-h:4px;          /* épaisseur barre (utilisé partout) */
    --seek-thumb:14px;     /* diamètre du curseur (utilisé partout) */
    --buffer:#000;
    --buffer-fill:rgba(255,255,255,.12);
    --slider-grad:linear-gradient(90deg,#c75fff,#2fc1ff);

    --intro-logo-w: clamp(250px, calc(40vw + 10vh), 450px);
    --topBar-h:clamp(100px, calc(4vw + 12vh), 200px);
    --main-logo-h: calc(.7 * var(--topBar-h));
    --logo-zoom: 3;
    --icon_spacing:calc(10px + 0.8vh);
    --icon_size:clamp(25px,3vh,50px);
    --icon_minSize:clamp(36px,4.5vh,44px);
  }

/* =============== RESET ====================================================== */
/* =========================================================================== */

html,body{width:100%; min-height:100%;}
body {line-height: 1;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display: block;}
nav ul {list-style :none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
a {margin: 0;padding: 0;font-size: 100%;vertical-align: baseline;background: transparent;text-decoration:none;}
table {border-collapse: collapse;border-spacing: 0;}
input, select {vertical-align :middle;}



/* =============== MAIN ====================================================== */
/* =========================================================================== */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html,body{ margin:0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
  html, body, #app, #app > #main_section{ height:100%; }
  @supports (height: 100svh){ #app > #main_section{ min-height:100svh; } }
  body{ font-family:"Inter", sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
  html{ background-color:var(--bg); }
  a{ text-decoration:none; }
  .icon{opacity:.7; transition:opacity .25s ease; display:inline-block;width:var(--icon_size);height:var(--icon_size);background:currentColor;margin:auto;flex:0 0 auto;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
  .ico:hover .icon,.ico:focus-visible .icon, .active .icon{opacity:1}

  .flex-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
  .no-select {-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select: none; -ms-user-select:none; user-select:none;  }
  .hidden{ display:none !important; }
  .visible{opacity:1 !important; visibility:visible !important;}
  .invisible{opacity:0 !important; visibility:hidden !important;}
  .nolinkbreak { white-space:nowrap; }
  .none{display:none !important;}

/* =============== MODE ====================================================== */
/* =========================================================================== */  

  body.mode-home        #intro{ display:block; }
  body.mode-home        #main_list{ display:none; }

  body.mode-podcasts    #intro{ display:none; }
  body.mode-podcasts    #main_list{ display:grid; }
  body.mode-podcasts    #main_list [class*="animation_icon"]{ display:none !important; } /* cache les icônes vidéo */

  body.mode-animations  #intro{ display:none; }
  body.mode-animations  #main_list{ display:grid; }
  body.mode-animations  #main_list [class*="podcast_icon"]{ display:none !important; }   /* cache les icônes audio */

  /* Pour que la liste occupe toute la hauteur */
  body.mode-podcasts #main_section,
  body.mode-animations #main_section{ align-items:stretch; }
  body.mode-podcasts #main_list,
  body.mode-animations #main_list{ height:100%; max-height:none; }
  body.mode-podcasts #listArea,
  body.mode-animations #listArea{ min-height:0; }

  /* Intro container (pour éviter que la vidéo d’intro gêne la liste) */
  .intro-layer{ position:relative; }

/* ======================== ORDRE PRINCIPAUX ELEMENTS ============================== */
/* ================================================================================= */

    #main_section > .mainBg { z-index:-4; }
    #main_section .blurry { z-index:-3; }
    #sapa_logo, 
    #sapa_presents        { z-index:3; }
    #intro_text           { z-index:5; }
    #skip_intro           { z-index:6; }

/* ============================== SECTION  ========================================= */
/* ================================================================================= */

  #main_section{ position:relative; width:100%; height:100%; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  

    /* Img de fond ------------------ */
    .mainBg{ background:url("/assets-web/images/web/intro/home-mobileV-MD-768x1366.webp") center center / cover no-repeat; pointer-events:none; position:absolute; inset:0; }
    /* Mobile XS - portrait */
    @media (max-width: 480px) and (orientation: portrait){ .mainBg{ background-image:url("/assets-web/images/web/intro/home-mobileV-XS-480x854.webp"); } }
    /* Mobile MD - landscape */
    @media (max-width: 896px) and (orientation: landscape){ .mainBg{ background-image:url("/assets-web/images/web/intro/home-mobileH-MD-896x414.webp"); } }
    /* Mobile LG / iPad portrait */
    @media (min-width: 834px) and (max-width: 1023px) and (orientation: portrait){ .mainBg{ background-image:url("/assets-web/images/web/intro/home-mobileV-LG-834x1112.webp"); } }
    /* Laptop / Desktop MD */
    @media (min-width: 1024px) and (max-width: 1439px){ .mainBg{ background-image:url("/assets-web/images/web/intro/home-desktopH-MD-1280x720.webp"); } }
    /* Laptop / Desktop vertical */
    @media (max-width: 1280px) and (min-height: 1280px) and (orientation: portrait){ .mainBg{ background-image:url("/assets-web/images/web/intro/home-desktopV-MD-1024x1280.webp"); } }
    @media (min-width: 1024px) and (orientation: portrait){ .mainBg{ background-image:url("/assets-web/images/web/intro/home-desktopV-XL-1080x1920.webp"); } }
    /* Desktop LG (1440) */
    @media (min-width: 1440px) and (max-width: 1919px){ .mainBg{ background-image:url("/assets-web/images/web/intro/home-desktopH-LG-1440x900.webp"); } }
    /* Desktop Full HD */
    @media (min-width: 1920px) and (max-width: 2559px){ .mainBg{ background-image:url("/assets-web/images/web/intro/home-desktopH-XL-1920x1080.webp"); } }
    /* Desktop Retina / Ultra HD */
    @media (min-width: 2560px){ .mainBg{ background-image:url("/assets-web/images/web/intro/home-desktopH-XXL-2560x1440.webp"); } }

    /* Dust Canevas ------------------ */
    #main_section #dust{ position:absolute; width:100%; height:100%; mix-blend-mode:screen; pointer-events:none; opacity:0; transition:opacity 3s;}
    #main_section #dust.visible{ opacity:1; }

    /* Fond flou ------------------ */
    #main_section .blurry {position:absolute; inset:0; pointer-events:none; background:rgba(0, 21, 45, 0); -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px); transition: background-color 1.2s ease, backdrop-filter 1.2s ease, -webkit-backdrop-filter 1.2s ease;}
    #main_section .blurry.active { -webkit-backdrop-filter:blur(80px); backdrop-filter:blur(80px); background:rgba(0, 21, 45, 0.3);}

    /* Parties ------------------ */
    #intro { display:none !important; pointer-events:none !important; width:0%; height:0%; }
    /* on ne l’affiche QUE en home */
    body.mode-home #intro { display:block !important; pointer-events:auto !important; position:absolute; width:100%; height:100%; margin:0;}


/* ========================INTRO - SAPA PRESENTE =================================== */
/* ================================================================================= */

    #intro.invisible { display:none !important; pointer-events:none !important; }


    #sapa_logo,#sapa_presents,#souffleurs_logo{position:absolute;left:50%;top:40vh;top:40svh;transform:translate(-50%,-50%);transform-origin:50% 50%}
    #sapa_logo{width:clamp(70px,calc(20vw + 10vh),200px);transform:translate(-60%,-50%); height:auto;opacity:0;display:block;pointer-events:none;transition:none}
    #sapa_presents{opacity:0}
    #sapa_presents_txt{font-size:clamp(1.3rem,calc(1.1rem + 0.3vw),2.2rem);color:#fff}

    /* couche intro : PAS de stacking context */
    .intro-layer{position:relative;z-index:auto}

    /* scope de blend : on blend le WRAPPER (Safari-friendly), vidéo en normal */
    #souffleurs_logo{width: var(--intro-logo-w); aspect-ratio:16/9; pointer-events:none; mix-blend-mode:screen;}

    /* vidéo */
    #logoAnim{position:absolute; left:50%; top:50%; width:calc(100% * var(--logo-zoom)); height:auto; transform:translate(-50%, -50%); max-width:none; max-height:none; background:transparent; will-change:opacity, transform; mix-blend-mode:normal}
    
    /* coupe le flou pendant la lecture (sinon noir en compositing Safari) */
    #main_section .blurry.no-blur{-webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:transparent!important}


    /* Bouton skip -------------------------------------------------- */
    #skip_intro { position:absolute; left:50%; bottom:calc(5px + 3vh); translate:-50% -50%; opacity:0; border-radius:5px; animation: pulseOpacity 3s ease-in-out infinite; background:rgba(255,255,255,.1); color:rgba(255,255,255,.9); transition:opacity 1s, background-color .3s, color .3s; padding:5px 15px; cursor:pointer;}
    #skip_intro:hover{background:rgba(255,255,255,.4); color:#fff; opacity:1!important;}
    #skip_intro.inactive{opacity:0; pointer-events:none; animation:none !important;}
    @keyframes pulseOpacity {
      0% { opacity: 0.05; } 10% { opacity: 0.1; } 50% { opacity: 1; }
      60% { opacity: 1; } 90% { opacity: 0.1; } 100% { opacity: 0.05; }
    }

    /* INTRO - TEXTE ANIMÉ ===================================================== */
    #intro_text { position:absolute; left:50%; top:46%; translate:-50% -50%; opacity:0; pointer-events:none; width:clamp(200px, 85vw, 550px); font-size: clamp(1.3rem, calc(1.1rem + 0.3vw), 2.2rem); line-height:1.2; opacity:0; color:#fff; text-align:center; transition: opacity 2s; }
    #intro_text p {display:block; width:100%; text-align:center; margin-bottom:15%;}
    .line{clip-path: polygon(0 0, 105% 0, 105% 95%, 0% 95%);}
    .word {white-space: nowrap;}
    .phrase { display: block;}
    .char {font-size:inherit; display:inline-block; transform: translateY(100px); opacity:0; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);}
    .no-break {white-space: nowrap;}
    #intro_text, #intro_text .line{line-height:2em;}
    #intro_text .char{transition:opacity 1s, transform .35s;}

    #intro_btns{opacity:0; margin-top:4vh; display:flex; gap:2vw; justify-content:center; align-items:center; transition: opacity 2.5s ease; z-index:3;}
    #intro_btns.active{opacity:1; cursor:pointer; pointer-events:all;}
      #intro_btns.active a{cursor:pointer; pointer-events:all;}
      #intro_btns a {position:relative; cursor:default; pointer-events:none; display:inline-block; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#fff; height:170px; width:170px;}
        #intro_btns a span.bg{position:absolute; inset:0; display:block; background:#fff; background:rgba(255,255,255,0.1); opacity:0; transform:scale(0.8); transform-origin:center; border-radius:50%; transition: opacity .3s, transform .3s ease;}
        #intro_btns .icon, #intro_btns .txt{position:relative; transition: opacity .3s, transform .3s; font-size:.8em; line-height:1.3em; opacity:.8; }
        #intro_btns a span.icon{display:block; width:62px; height:62px; background:#fff; }
        #intro_btns .icon{transform: translateY(-5px);}
        #intro_btns .txt{transform: translateY(-20px); }

  
        #intro_btns a:active .bg, #intro_btns a:hover .bg{opacity:1; transform:scale(1);}
        #intro_btns a:hover .bg{opacity:0.7;}
        #intro_btns a:active .bg{opacity:1;}
        #intro_btns a:active .icon, #intro_btns a:hover .icon{opacity:1; transform: translateY(-2px);}
        #intro_btns a:active .txt, #intro_btns a:hover .txt{opacity:1; transform: translateY(-23px);}






/* =============== LISTES ===================================================== */
/* ========================================================================== */
  #main_list{ display:grid; grid-template-rows:auto 1fr; position:relative; min-height:400px; max-height:calc(7 * (4em + 5vh)); height:100%; padding:0; box-sizing:border-box; background:transparent;}
  #main_list{ width:100%; }
  @media (min-width: 600px) and (hover: hover) and (pointer: fine){ #main_list{ width:90%; } }
  @media (min-width: 768px){ #main_list{ width:clamp(15em, 80vw, 50em); } }

  .topBar{ background:transparent; grid-row:1; height:var(--topBar-h); display:flex;align-items:flex-end;justify-content:space-between;padding:0;margin:0;position:relative; overflow:visible;}
  .topBar{ width:94%; left:3%; }
  @media (min-width: 600px) and (hover: hover) and (pointer: fine){ .topBar{ width:100%; left:0; } }
  @media (min-width: 768px){ .topBar{ width:100%; left:0; } }

    .topBar .main_logo{--hit-h:var(--main-logo-h); --hit-w:calc(var(--main-logo-h)*2.1); --hit-dy:calc(0.12*var(--main-logo-h)); pointer-events:auto;
      pointer-events:none; position:relative; top:0; display:flex; align-items:center; justify-content:center;}
      .topBar .main_logo img{display:block; height:var(--main-logo-h); min-height:60px; width:auto;}
      @media (min-width: 768px){ .topBar .main_logo img{ height:var(--main-logo-h); } }
      .topBar .main_logo .blend-wrap{
        position:absolute; transform:translateX(-30%) translateY(4%); min-height:200px; height:calc(3 * var(--main-logo-h)); width:calc(1,7777777778 * 3 * var(--main-logo-h));
        left:0;
        mix-blend-mode:screen;
        pointer-events:none;
      }
      .topBar .main_logo .blend-wrap .logo-anim{
        position:relative;
        left:auto; top:auto;
        min-height:200px;
        height:calc(3 * var(--main-logo-h));
        width:auto;
        background:transparent;
        mix-blend-mode:normal;
        will-change:opacity;
      }

      .topBar .main_logo .space{display:block;height:var(--main-logo-h);width:1px;}
      .topBar .main_logo .logo-hit{position:absolute;left:0;top:50%;transform:translate(0,calc(-50% + 4%));width:var(--hit-w);height:var(--hit-h);pointer-events:auto;cursor:pointer;}
      .topBar .main_logo video, .topBar .main_logo .space{ pointer-events:none; }
      body.mode-home .topBar .main_logo .logo-hit{ pointer-events:none !important; }

      body:not(.mode-home) #intro { display:none !important; pointer-events:none !important; }


/* =============== LISTE > TOP BAR > MENUS ================================== */
/* ========================================================================== */

    /* groupe à droite */
    .topBar .topActions{position:relative; top:0; display:flex; align-items:center; gap:var(--icon_spacing); padding-inline-end:0px; left:calc(var(--icon_spacing) / 2.1); background:transparent;}
      .ico{display:inline-flex;align-items:center;justify-content:center;min-width:var(--icon_minSize);min-height:var(--icon_minSize);padding:0;background:transparent;border:0;border-radius:.35em;color:#fff;cursor:pointer}
      .ico:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:2px}

        /* ===== Bouton bascule (texte PUIS icône) ===== */
        .modeBtn{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:6px 0px; border:none; background:transparent; color:#fff; cursor:pointer; opacity:.7; transition:opacity .25s ease;}
          .modeBtn:hover, .modeBtn:focus-visible{ opacity:1; }
          .modeBtn:focus-visible{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }

          /* 1) Sizer : invisible mais donne la taille */
          .modeBtn .sizer{ visibility:hidden; pointer-events:none; display:inline-flex; align-items:center; gap:.5em; font-weight:600; letter-spacing:.2px;}

          /* 2) Scène : même taille que le bouton, masque le slide */
          .modeBtn .stage{ position:absolute; inset:0; display:block; overflow:hidden;}

          /* 3) États superposés en absolute, centrés, slide Y variable */
          /* slide avec plus d’amplitude et plus rapide */
          .modeBtn .state{ position:absolute; top:50%; left:50%; display:inline-flex; align-items:center; justify-content:center; gap:.5em; transform: translate(-50%,-50%) translateY(var(--slide,0%)); transition: transform .15s ease-in-out;   /* vitesse plus rapide */ will-change: transform; }
          .modeBtn .state .icon{opacity:1;}
          .modeBtn .state.current{ --slide: 0%;     }   /* visible */
          .modeBtn .state.next   { --slide: 200%;   }   /* caché bien en dessous */
          /* Applique l’effet hover UNIQUEMENT si le bouton n’a pas .no-hover */
          .modeBtn:not(.no-hover):hover .state.current,
          .modeBtn:not(.no-hover):focus-visible .state.current { --slide: -200%; }
          .modeBtn:not(.no-hover):hover .state.next,
          .modeBtn:not(.no-hover):focus-visible .state.next    { --slide: 0%; }
          .modeBtn .label{ font-weight:600; letter-spacing:.2px; }

          /* Accessibilité : réduit l’anim si préférence */
          @media (prefers-reduced-motion: reduce){
            .modeBtn .state{ transition:none; }

            /* Désactive l’effet de swap au hover/focus, mais en respectant .no-hover */
            .modeBtn:not(.no-hover):hover .state.current,
            .modeBtn:not(.no-hover):focus-visible .state.current { --slide: 0%; }

            .modeBtn:not(.no-hover):hover .state.next,
            .modeBtn:not(.no-hover):focus-visible .state.next    { --slide: 150%; }
          }

            .icon.headphones{
              mask:url("/assets-web/svg/AudioIco.svg") center/contain no-repeat;
              -webkit-mask:url("/assets-web/svg/AudioIco.svg") center/contain no-repeat;
            }
            .icon.film{
              mask:url("/assets-web/svg/videoIco.svg") center/contain no-repeat;
              -webkit-mask:url("/assets-web/svg/videoIco.svg") center/contain no-repeat;
            }

        /* ===== Volume (bouton + popover) ===== */
        .volumeWrap{ position:relative; }

        .volume-btn{ width:36px; height:36px; border-radius:8px; border:0; background:transparent; color:#fff; cursor:pointer; }
        .volume-btn:hover,
        .volume-btn:focus-visible{ opacity:1; }
        .volume-btn:focus-visible{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }
        /*.icon{ display:block; width:22px; height:22px; background:#fff; margin:auto; }*/

        /* 4 niveaux d’onde (0..3) */
        .icon.vol{
          mask:url("/assets-web/svg/volume-3.svg") center/contain no-repeat;
          -webkit-mask:url("/assets-web/svg/volume-3.svg") center/contain no-repeat;
        }
        .icon.vol-0{
          mask:url("/assets-web/svg/volume-0.svg") center/contain no-repeat;
          -webkit-mask:url("/assets-web/svg/volume-0.svg") center/contain no-repeat;
        }
        .icon.vol-1{
          mask:url("/assets-web/svg/volume-1.svg") center/contain no-repeat;
          -webkit-mask:url("/assets-web/svg/volume-1.svg") center/contain no-repeat;
        }
        .icon.vol-2{
          mask:url("/assets-web/svg/volume-2.svg") center/contain no-repeat;
          -webkit-mask:url("/assets-web/svg/volume-2.svg") center/contain no-repeat;
        }
        .icon.vol-3{
          mask:url("/assets-web/svg/volume-3.svg") center/contain no-repeat;
          -webkit-mask:url("/assets-web/svg/volume-3.svg") center/contain no-repeat;
        }

        /* Popover volume */
        .vol-popover{ position:absolute; display:flex; align-items: center; justify-content: center; bottom:calc(100% + 12px); right:-50px; transform:translateY(8px) scale(.98); background:rgba(255,255,255,.3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.25); border-radius:20px; padding:0px; min-width:210px; height:40px; z-index:20; box-shadow:0 1px 1px rgba(0,0,0,.1); opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease, box-shadow .25s ease, padding .18s ease;}
          .vol-popover .vol-inner{ position:relative; opacity:0; transition:opacity .18s ease .08s;}
          .vol-popover.is-open{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); padding:10px 14px; box-shadow:0 2px 5px rgba(0,0,0,.3);}
          .vol-popover.is-open .vol-inner{ opacity:1; }

          /* --- Barre visuelle centrée (hauteur uniforme avec --seek-h) --- */
          .seekwrap.vol{ position:relative; width:100%; height:28px; display:flex; align-items:center; }
          .vol-bar{ position:absolute; left:0; right:0; top:50%; height:var(--seek-h); transform:translateY(-50%); background:rgba(0,0,0,.2); border-radius:999px;}
          .vol-barFill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--slider-grad); border-radius:2px; box-shadow:0 1px 5px rgba(0,0,0,.6);}

        /* Bouton about : conteneur cliquable */
        .aboutBtn{position:relative;color:#fff; background:transparent}
        .aboutBtn .icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);width:var(--icon_size);height:var(--icon_size);pointer-events:none;transition:transform 320ms cubic-bezier(.22,.61,.36,1),opacity 220ms cubic-bezier(.22,.61,.36,1)}
        .aboutBtn .icon.info{z-index:2;}
        .aboutBtn .icon.close-x{z-index:1; opacity:0;transform:translate(-50%,-50%) scale(.6)}
        /* SVG info existant */
        .icon.info{background:currentColor;mask:url("/assets-web/svg/info.svg") center/contain no-repeat;-webkit-mask:url("/assets-web/svg/info.svg") center/contain no-repeat}
        /* Croix en pseudo-éléments, totalement invisibles à l’état fermé */
        .aboutBtn .icon.close-x{background:transparent}
        .aboutBtn .icon.close-x::before,
        .aboutBtn .icon.close-x::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:max(2px,calc(var(--icon_size)/11));background:currentColor;border-radius:999px;transform-origin:center;opacity:0;transition:transform 320ms cubic-bezier(.22,.61,.36,1),opacity 220ms cubic-bezier(.22,.61,.36,1)}
        .aboutBtn .icon.close-x::before{transform:translate(-50%,-160%) rotate(45deg)}
        .aboutBtn .icon.close-x::after{transform:translate(-50%,160%) rotate(-45deg)}
        /* État ouvert = croix visible, info rétractée */
        .aboutBtn.is-open .icon.info{transform:translate(-50%,-50%) scale(.2);opacity:0}
        .aboutBtn.is-open .icon.close-x{opacity:0.7; transform:translate(-50%,-50%) scale(1); transition:opacity .3s;}
        .aboutBtn.is-open:hover .icon.close-x{opacity:1;}
        .aboutBtn.is-open .icon.close-x::before,
        .aboutBtn.is-open .icon.close-x::after{transform:translate(-50%,-50%) rotate(45deg);opacity:1}
        .aboutBtn.is-open .icon.close-x::after{transform:translate(-50%,-50%) rotate(-45deg)}


/* ANIM + MENU ---------------------- */
.listAnim{ opacity:0; transform:translateY(20px); }

#listArea{ grid-row: 2; position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden;}
#listArea.is-revealing{ overflow:hidden; }

  /* ==== BIG PICTO ====*/
  :root{--bigpicto-size:clamp(200px,55vmin,700px);--bigpicto-alpha:.12;--bigpicto-dy:5vh;}
  #bigPicto{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;}
  #bigPicto .icon{width:var(--bigpicto-size);height:var(--bigpicto-size);background:currentColor;color:rgba(255,255,255,var(--bigpicto-alpha));transform:translateY(var(--bigpicto-dy));}
  body.mode-home #bigPicto{display:none;}
  #main_list.hideListElements #bigPicto{opacity:0;}
  #main_list.hideListElements #listArea{ overflow: hidden !important;}
  #main_list.hideListElements #listArea .scrollbar-track,
  #main_list.hideListElements #listArea .scrollbar-thumb{opacity: 0 !important; pointer-events: none !important;}
  #main_list.hideListElements #listArea .scrollbar-track{display: none !important;}


  /* ==== SCROLL ====*/
  .smooth-scroll{
    overflow-y: auto;
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;              /* réserve de l’espace à droite si barre native */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
  }
  /* webkit natif */
  /*
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.15); border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.4); }
  */

  /* Remplit l’aire et fixe une hauteur au conteneur flex */
  #listArea .scrollHost{ position:absolute; inset:0; overflow:hidden;}
  /* Le contenu scrollable devient un vrai conteneur flex vertical, avec 100% de hauteur
    pour que flex-grow (flex:4) ait de la place à distribuer */
  #listArea .scrollHost .scroll-content{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
    padding:0 0 20px 0;
  }


#aboutPanel .panel-inner.has-sbar,
#textContainer.has-sbar {
  --scrollbar-size: 6px; /* largeur */
  --scrollbar-color: rgba(255,255,255,0.5); /* couleur */
}  
/* piste (track) */
.scrollbar-track.scrollbar-track-y {
  width: 6px; /* largeur visible de la gouttière */
  right: 2px;
  background: transparent !important;
}

/* pouce (thumb) */
.scrollbar-thumb.scrollbar-thumb-y {
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}

/* effet au survol / drag */
.scrollbar-thumb.scrollbar-thumb-y:hover,
.scrollbar-thumb.scrollbar-thumb-y:active {
  background: rgba(255,255,255,0.8);
}




/* ==========================================================================
========================== SCROLLING COMMUN =================================
============================================================================= */

.has-sbar { scrollbar-gutter: auto !important;}
/* scrollbar qui ne s'affiche que lorsqu'il y a du contenu */
.has-sbar .scrollbar-track{opacity:0; pointer-events:none; transition:opacity .18s ease;}
.has-sbar.show-tracks .scrollbar-track,
.has-sbar.show-tracks .scrollbar-thumb{opacity:1; pointer-events:auto !important;}
.has-sbar.defer-scrollbar .scrollbar-track,#listArea.has-sbar.is-revealing .scrollbar-track{opacity:0!important;pointer-events:none!important;}
#listArea.defer-scrollbar{overflow-y:hidden!important;}
@media(hover:hover) and (pointer:fine){.topBar,#listArea.has-sbar .scrollHost .scroll-content{padding:0 12px 20px 12px!important;}
 .has-sbar.show-tracks .scrollbar-track{opacity:1!important;}}

.has-sbar .scrollbar-track.scrollbar-track-y{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 7px !important;
  background: transparent !important;
  z-index: 9999 !important;
}
.has-sbar .scrollbar-thumb.scrollbar-thumb-y{
  width: 100% !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.15) !important;
}
.has-sbar .scrollbar-thumb.scrollbar-thumb-y:hover,
.has-sbar .scrollbar-thumb.scrollbar-thumb-y:active{
  background: rgba(255,255,255,0.4) !important;
}

/* === Desktop (vrai pointeur + hover) : réserver le gutter et montrer la piste === */

  .has-sbar .scrollHost .scroll-content {padding: 0 12px 20px 12px !important;}
  .has-sbar .scrollbar-track{ opacity: 1 !important; }


/* ==========================================================================
========================== TEXTE A PROPOS ===================================
============================================================================= */

#aboutPanel{ position:absolute; inset:var(--topBar-h) 0 0 0; width:calc(100% - 24px); left:12px; background:rgba(255,255,255,.3); 
  border-radius:4px; margin:0.3em 0; padding:10px 0 0 0; text-align:justify;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:#fff; opacity:0; 
  visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s step-end; 
  z-index:2; overflow:hidden; 
}
#aboutPanel .scrollbar-thumb.scrollbar-thumb-y{ left: -10px;}


#main_list.hideListElements #aboutPanel{ opacity:1; visibility:visible; pointer-events:auto; }
  #aboutPanel .panel-inner{ height:100%; min-height:0; overflow-y:auto; touch-action:auto; -webkit-overflow-scrolling:touch; line-height:2.2;}
  #aboutPanel .panel-inner > .scrollHost{ height:100%; min-height:0; }
    #aboutPanel h2:first-child{margin-top:2em;}
    #aboutPanel h2, #aboutPanel h3, #aboutPanel h4{text-align:left;}
    #aboutPanel h2{font-size:2em; margin-bottom:0.8em; line-height:1.25;}
    #aboutPanel h3{position:relative; font-size:1.35em; margin:4em 0 2em 0; text-align:center; width:100%;}
    #aboutPanel h3::before{position:absolute; content:''; bottom:0; left:5%; width:90%; height:1px; background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.1) 99%); }

    #aboutPanel h4{font-size:1em; margin:0.2em 0 0.4em 0;}
    #aboutPanel h4,
    #aboutPanel .team h4 a{text-decoration:none; color:#00184b;}
    #aboutPanel .team a {position:relative; display:inline-block; text-decoration:underline; transition:color .3s;}
    #aboutPanel .team a:hover {text-decoration:none;}
        #aboutPanel h4 span.name{position:relative; display:inline; margin:0 1em 0 0; padding:0.3em 1.5em; border: 1px solid rgba(255,255,255,0.8); background:rgba(255,255,255,0.7); border-radius:20px; transition: background-color 0.3s;}
        #aboutPanel a:hover span.name{background:rgba(255,255,255,1);}
        #aboutPanel h4 a span.name {padding-left:2.2em;}
         #aboutPanel h4 span.role{display:inline-block; margin:0; font-size:0.9em;}
          #aboutPanel .team a.inline::before,
          #aboutPanel h4 a span.name::before { content:""; position:absolute; top:50%; transform:translateY(-50%); width:1.1em;height:1.1em; display:block; background-color:currentColor; 
            -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 5l7 7-7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
            -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%; 
            mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 5l7 7-7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
            mask-repeat:no-repeat; mask-size:100% 100%; 
          }
          #aboutPanel .team a.inline::before{left:0em;}
          #aboutPanel .team a.inline{padding-left:1.4em; color:#fff;}
          #aboutPanel .team a.inline:hover{color:#00184b;}
          #aboutPanel h4 a span.name::before {left:0.8em;}

       

    #aboutPanel p{padding:0;}
    #aboutPanel .about {display:block; padding:0 8%; margin-top:2em}
    #aboutPanel .team {display:block; padding:0 8%;}
     #aboutPanel .team p {margin-bottom:2.5em;}
     #aboutPanel .team h3 {margin-bottom:0.5em;}

    #aboutPanel .logo-list { display: flex; margin: 0;  padding:2em 5vw 0 5vw; list-style: none; justify-items:center; align-items:center; flex-direction:column;}
    #aboutPanel .logo {display: block; width: 80%; height: auto; margin:0 auto 5em auto;}
    #aboutPanel .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;}
    #aboutPanel .panel-inner.has-sbar .scrollHost .scroll-content{ padding: 0 !important;}
    
    /* Desktop : pointeur fin + hover → on réserve de la place pour la piste */
    @media (hover: hover) and (pointer: fine){
      
    }
    /* Tactile : pas de gutter (piste masquée de toute façon) */
    @media (hover: none), (pointer: coarse){
      
    }
    #aboutPanel .white-gradient{ position:absolute; z-index:-1; bottom:-10px; width:100%; height:calc(60vh + 200px);
       background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); border-radius:4px;}




/* MODE IMMERSIF (animations /epN) : header masqué, zone plein écran */
#main_list.immersive{ grid-template-rows:0 1fr; }
#main_list.immersive .topBar{ margin:0; height:0; overflow:hidden; opacity:0; transform:translateY(-100%); pointer-events:none; }

/* icônes flottantes bas-droite (visibles en immersive) */
.immersive-controls{ position:fixed; right:16px; bottom:16px; display:flex; gap:12px; z-index:40; }
.immersive-control{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.35); color:#fff; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.immersive-control:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:2px; }
/* si pas immersive, on cache ces contrôles */
#main_list:not(.immersive) + .immersive-controls{ display:none; }

/* BOUTONS ---------------------- */
#main_list .button .bg,
#main_list .button .title,
#main_list .button .archiveButton{ user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }

#main_list .button .progress-container,
#main_list .button .progress-scrubber,
#main_list .button .progress-sensor,
#main_list .button .timer,
#main_list .button input,
#main_list .button button{ user-select:auto; }

#main_list a.button{ -webkit-user-drag:none; }

.button{ flex:1; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); overflow:hidden; min-height:40px; position:relative; margin:0.3em 0; transition:flex 0.5s, box-shadow .25s, background-color .25s; box-shadow:0 2px 5px rgba(0,0,0,0.2); display:inline-block; color:#fff; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3); border-radius:0.2em; }
.button:hover{ background:rgba(255,255,255,0.45); box-shadow:0 5px 10px rgba(0,0,0,0.5); }
.button.active{ flex:4; background:rgba(255,255,255,0.6); }
@media (max-height: 800px){ .button.active{ min-height:150px } }

/* fond image */
.button .bg{ position:absolute; inset:0; background-size:cover; background-position:center;  transition:opacity 0.3s, -webkit-mask-position 0.6s ease, mask-position 0.6s ease; -webkit-mask-image:linear-gradient(to right, black 30%, transparent 60%); -webkit-mask-size:200% 100%; -webkit-mask-position:80% 0%; -webkit-mask-repeat:no-repeat; mask-image:linear-gradient(to right, black 30%, transparent 60%); mask-size:200% 100%; mask-position:80% 0%; mask-repeat:no-repeat; }
.button.active .bg{ opacity:1; -webkit-mask-position:0% 0%; mask-position:0% 0%; }

/* barre d'infos */
.buttonContainer{ display:flex; flex-direction:column; height:100%; width:100%; overflow:hidden; }
  .buttonContainer .top{ flex:0 0 100%; display:flex; align-items:center; justify-content:center; }
    .archiveButton{ z-index:1; cursor:pointer; }
  .buttonContainer .bottom{ flex:0 0 0; display:none; }
  .button.active .buttonContainer .top{ flex:8 1 0%; min-height:0; }
  .button.active .buttonContainer .bottom{ flex:2 1 0%; min-height:40px; display:flex; position:relative; overflow:hidden; }

/* icone play-pause */
.playPauseBtn{ transform:translateY(calc(10px + 2vh)); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity 0.5s; position:absolute; height:calc(30px + 2.5vh); width:calc(30px + 2.5vh); border-radius:50%; }
.button .playPauseBtn{ background:var(--archive_button_bkg); border:1px solid rgba(255,255,255,.4); }
.button.active:hover .playPauseBtn{ opacity:1; }
.playPauseBtn .icon{ position:absolute; inset:0; }
.playPauseBtn .icon{ mask:url("/assets-web/svg/ico_play.svg") center / 100% no-repeat; -webkit-mask:url("/assets-web/svg/ico_play.svg") center / 100% no-repeat; }
.playPauseBtn.play .icon{ mask:url("/assets-web/svg/ico_pause.svg") center / 100% no-repeat; -webkit-mask:url("/assets-web/svg/ico_pause.svg") center / 100% no-repeat; }
.button .playPauseBtn .icon{ background:#fff; }

/* barre d'infos */
.archiveInfos{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); position:absolute; inset:5px; border-radius:0.2em; }
.button .archiveInfos{ background:var(--archive_button_bkg); }

/* titre */
.button .title{ position:absolute; inset:0; pointer-events:none; text-transform:capitalize; }
.button .title > div{ position:absolute; }
  .button .title{ display:flex; align-items:center; justify-content:center; }
    .button .mainTitle{ opacity:1; transition:all 0.3s; transform:translateX(-18px); }
    .button.active .mainTitle{ opacity:0; top:100%; }
    .button .detailTitle{ opacity:0; transition:left 0.3s, opacity 0.3s; font-size:1.5em; left:40%; top:5px; padding:10px 20px; /*border-radius:0.2em;  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);*/ }
    .button.active .detailTitle{ opacity:1; left:5px; }
    .button .detailTitle{ background:var(--archive_button_bkg); color:#fff; text-shadow:1px 1px 4px rgba(0,0,0,0.6); }

/* numéro d'épisode */
.button .episode_number{ position:absolute; left:8%; top:80%; transform:translateX(-50%) translateY(-50%); display:block; line-height:1; font-weight:100; opacity:0.5; white-space:nowrap; pointer-events:none; z-index:0; font-size:clamp(40px, 10vh, 100px); transition:opacity 0.3s, top 0.3s, left 0.3s; }
.button:hover:not(.active) .episode_number{ opacity:1; }
.button.active .episode_number{ opacity:0.8; top:50%; font-size:clamp(60px, 16vh, 300px); left:85%; }

/* icones */
.button .mainTitle,
.button .detailTitle{ display:flex; align-items:center; justify-content:center; gap:.3em; }
.podcast_icon{ mask:url("/assets-web/svg/AudioIco.svg") center / 60% no-repeat; -webkit-mask:url("/assets-web/svg/AudioIco.svg") center / 60% no-repeat; }
.animation_icon{ mask:url("/assets-web/svg/videoIco.svg") center / 60% no-repeat; -webkit-mask:url("/assets-web/svg/videoIco.svg") center / 60% no-repeat; }
.podcast_icon,
.animation_icon{ background:#fff; display:inline-block; }
.mainTitle .podcast_icon,
.mainTitle .animation_icon{ opacity:0; transition:opacity .3s; margin:0; padding:0; position:relative; width:calc(40px + 1.5vh); height:calc(40px + 1.5vh); top:-1px; }
.button:hover .mainTitle .podcast_icon,
.button:hover .mainTitle .animation_icon{ opacity:1; }
.detailTitle .podcast_icon,
.detailTitle .animation_icon{ width:calc(30px + 2vh); height:calc(30px + 2vh); }

/* BOUTONS (progress) ---------------------- */
.progress-sensor,
.progress-container{ overflow:hidden; border-radius:2px; opacity:0; position:absolute; top:50%; transform:translateY(-50%); left:70px; right:20px; height:4px; transition:bottom 0.3s, opacity 0.4s; }
.button.active .progress-container{ bottom:15px; opacity:1; }
.progress-container .buffer-fill,
.progress-container .progress-bar{ position:absolute; inset:auto auto 0 0; height:4px; width:0%; }
.progress-container .buffer-fill{ background:rgba(0,0,0,0.3); border-right:1px solid #000; z-index:1; transition:width .4s cubic-bezier(.2,.9,.1,1); }
.progress-container .progress-bar{ background:#fff; z-index:2; transition:width .12s linear; }
.progress-scrubber{ position:absolute; cursor:pointer; inset:0 0 0 0; width:100%; height:100%; background:transparent; -webkit-appearance:none; appearance:none; border:0; padding:0; margin:0; box-sizing:border-box; }
.progress-scrubber::-webkit-slider-runnable-track{ background:transparent; height:24px; }
.progress-scrubber::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:0; height:0; }
.progress-scrubber::-moz-range-track{ background:transparent; height:24px; }
.progress-scrubber::-moz-range-thumb{ width:0; height:0; border:0; background:transparent; }
.progress-sensor{ height:100%; }
.button .progress-container{ background:rgba(0, 0, 0, 0.2); }
.progress-bar{ position:absolute; top:0; height:4px; width:0%; transition:width 0.2s; }
.button .progress-bar{ background:#fff; }
.timer{ opacity:0; position:absolute; left:20px; bottom:0; top:0; transition:opacity 0.3s; display:flex; align-items:center; }
.button .timer{ color:#fff; }
.button.active .timer{ opacity:1; }

/* BOUTONS - Barre de progression (buffer + lecture) ------------- */
.seekwrap{ position:relative; flex:1; display:flex; align-items:center; min-height:24px; }
#bufbar,
#playbar{ position:absolute; left:8px; right:8px; top:50%; transform:translateY(-50%); height:var(--seek-h); border-radius:calc(var(--seek-h)/2); pointer-events:none; overflow:hidden; }
#bufbar{ background:var(--buffer); z-index:1; }
#playbar{ background:transparent; z-index:2; }

/* Ici, sélecteurs combinés sur une ligne (conforme à ta règle) */
#buffill, #playfill{ height:100%; width:100%; transform-origin:left center; transform:scaleX(0); will-change:transform; }
#buffill{ background:var(--buffer-fill); transition:transform .6s cubic-bezier(.2,.9,.1,1); }
#playfill{ background:var(--slider-grad); }

/* BOUTONS - Slider (au-dessus des barres) --------- */
#seek{ position:relative; z-index:3; width:100%; -webkit-appearance:none; appearance:none; background:transparent; }
#seek::-webkit-slider-runnable-track{ background:transparent; height:var(--seek-h); }
#seek::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:var(--seek-thumb); height:var(--seek-thumb); border-radius:50%; background:#fff; border:0; margin-top:calc(-1 * (var(--seek-thumb) - var(--seek-h))/2); }
#seek::-moz-range-track{ background:transparent; height:var(--seek-h); }
#seek::-moz-range-thumb{ width:var(--seek-thumb); height:var(--seek-thumb); border-radius:50%; background:#fff; border:0; }

/* FOOTER ---------------------- */
#bottomBar{ min-height:40px;  position:relative; display:flex; align-items:center; justify-content:center; height:var(--footer-h); margin-top:auto; color:var(--text); font-size:0.85rem; text-align:center; z-index:5; }
#bottomBar p{ margin:0; display:flex; align-items:center; gap:0.6em; opacity:0.7; }
#bottomBar .mini-logo{ height:20px; width:auto; opacity:0.8; }

/* ========================================================================== */
/* ========================== Video player =================================== */
/* ========================================================================== */

:root{
  --videoBar-h:clamp(50px,calc(30px + 3vh),80px);
  --videoWrap-h:calc(100% - ( 2 * var(--videoBar-h) ));
  --videoBar-gap:calc(var(--videoBar-h) * 0.4);
  --videoButton-size:calc(var(--videoBar-h) * 0.8);
  --videoButton-radius:calc(var(--videoBar-h) * 0.1);
  --vPlay-h:calc(var(--videoBar-h) * 0.35);
  --vPlay-w:calc(var(--videoBar-h) * 0.3);
  --vPlay2-w:calc(var(--videoBar-h) * 0.1);
  --vPlay2-gap:calc(var(--videoBar-h) * 0.2);
}
.player{position:fixed; top:0; height:100%; width:100%; z-index:30;}
.player.hidden{display:none}
video,audio{ width:100%; max-height:calc(100vh - var(--footer-h)); background:#000; }
  .player .bg{position:absolute; width:100%; height:100%; background:#000; opacity:0; transition:opacity 0.6s;}
  .player .bg.visible{opacity:1;}
  /*video*/
  .video-wrap{ position:absolute; top:var(--videoBar-h); height: var(--videoWrap-h); width:100%; display:flex; align-items:center; justify-content:center; padding:4vh 4vw; box-sizing:border-box;}
  body.fs-video .video-wrap{ padding:0; }  
    .video-wrap video{ max-width:100%; max-height:100%; object-fit:contain; border-radius:3px; background:transparent;border-radius:3px; cursor:pointer;}

    :root{--pm-size:clamp(50px,20vh,100px);--pm-bg:rgba(3,3,3,0.7);--pm-icon:#fff;--pm-tri-w:42%;--pm-tri-h:48%;--pm-bar-w:14%;--pm-bar-gap:14%;--pm-duration:1500ms;}
    #videoContainer{position:relative;}
    #playPauseMarker{position:absolute;left:50%;top:50%;height:var(--pm-size);width:var(--pm-size);background:var(--pm-bg);-webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); border:1px solid rgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%) scale(0.9);opacity:0;pointer-events:none;z-index:50;transition:opacity 140ms ease-out,transform 140ms ease-out;}
    #playPauseMarker::before,#playPauseMarker::after{content:'';position:absolute;top:50%;left:50%;display:block;background:var(--pm-icon);}
    #playPauseMarker.is-playing::before{height:var(--pm-tri-h);width:var(--pm-tri-w);clip-path:polygon(0% 0%,100% 50%,0% 100%);transform:translate(-38%,-50%)}
    #playPauseMarker.is-pausing::before{height:var(--pm-tri-h);width:var(--pm-bar-w);left:calc(50% - var(--pm-bar-gap)/2 - var(--pm-bar-w));top:50%;transform:translateY(-50%);}
    #playPauseMarker.is-pausing::after{height:var(--pm-tri-h);width:var(--pm-bar-w);left:calc(50% + var(--pm-bar-gap)/2);top:50%;transform:translateY(-50%);}
    #playPauseMarker.show{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity 120ms ease-out,transform 160ms cubic-bezier(.2,.9,.2,1.1);animation:pm-pop var(--pm-duration) ease-out both;}
    @keyframes pm-pop{0%{transform:translate(-50%,-50%) scale(0.6);opacity:0;}15%{transform:translate(-50%,-50%) scale(1.10);opacity:1;}80%{transform:translate(-50%,-50%) scale(1.00);opacity:1;}100%{transform:translate(-50%,-50%) scale(0.7);opacity:0;}}
    @media (prefers-reduced-motion:reduce){#playPauseMarker{transition:none;}#playPauseMarker.show{animation:none;opacity:1;}}

  /*bars de contrôle*/
  .videoBar{position:absolute; width:100%; height:var(--videoBar-h); min-height:35px; display:flex; justify-content:center; align-items:center;}
  .videoTopBar{top:0; z-index:102;}
  .videoBottomBar{bottom:0; z-index:100;}
    .videoBar .inner{transition: opacity .18s ease, transform .24s ease; will-change:opacity, transform; width:var(--video-w, 80vw); min-width:var(--video-min, 360px); position:relative; margin:0; padding:0; height:100%; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; gap:var(--videoBar-gap); color:#fff; user-select:none}
    body.fs-video #player{ --video-max: 99999px; }
    body.fs-video .videoBar .inner{ transition: opacity .18s ease, transform .24s ease; }
    .videoTopBar .inner{padding:calc(6px + env(safe-area-inset-top)) 0 6px 0}
    .videoBottomBar .inner{padding:8px 0 calc(8px + env(safe-area-inset-bottom)) 0}
      .player.controls-idle .videoBar .inner{opacity: 0; pointer-events: none;} /* cache les barres quand idle */
      .player.controls-idle .videoTopBar .inner{ transform: translateY(-12px); } /* top vers le haut */
      .player.controls-idle .videoBottomBar .inner{ transform: translateY(12px); } /* bottom vers le bas */
      .player.controls-idle,
      .player.controls-idle *{ cursor: none; } /* masque le curseur */
      /*buttons*/
      .videoButton{position:relative; cursor:pointer; background-color:rgba(255,255,255,.0); transition:background-color .2s; display:inline-flex; align-items:center; justify-content:center; width:var(--videoButton-size); height:var(--videoButton-size); min-width:var(--videoButton-size); min-height:var(--videoButton-size); flex:0 0 var(--videoButton-size); padding:0; border:0; border-radius:var(--videoButton-radius); color:#fff; box-sizing:border-box; pointer-events:auto}
      .videoButton.is-disabled{opacity:0.2;}
      .videoButton:not(.is-disabled):hover{background-color:rgba(255,255,255,.08);}
      .videoButton:not(.is-disabled):active{background-color:rgba(255,255,255,.3);}
      #vText.on{background-color:rgba(255,100,100,.4); border:1px solid #ff0000;}
      #vText.on:hover{background-color:rgba(255,100,100,.5); border:1px solid #ff0000;}

      #iconAllTexts{position:relative; display:inline-flex; justify-content:center; width:1.7em;}
      #iconAllTexts .icon{position:absolute; top:-1.2em; opacity:1;}


      .videoButton .icon{opacity:1;}
      /*top*/
      .videoTopBar .vt-left,
      .videoTopBar .vt-right{display:flex;align-items:center;gap:12px;}
        .icon.prev{ mask:url("/assets-web/svg/skip-prev.svg") center/contain no-repeat; -webkit-mask:url("/assets-web/svg/skip-prev.svg") center/contain no-repeat;}
        .icon.list{mask:url("/assets-web/svg/list.svg") center/contain no-repeat;-webkit-mask:url("/assets-web/svg/list.svg") center/contain no-repeat;}
        .icon.next{ mask:url("/assets-web/svg/skip-next.svg") center/contain no-repeat; -webkit-mask:url("/assets-web/svg/skip-next.svg") center/contain no-repeat;}
        .icon.text{mask:url("/assets-web/svg/text.svg") center/contain no-repeat;-webkit-mask:url("/assets-web/svg/text.svg") center/contain no-repeat}
        #epInfo{ position:relative; top:1px; display:flex; align-items:center; gap:.25rem; min-width:0; white-space:nowrap; } /* min-width pour que l’ellipsis marche */
          #epInfo .number{ font-variant-numeric:tabular-nums; }
          #epInfo .title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:50vw; } /* titre tronqué si trop long */
          #epInfo .title:not(:empty)::before{ content:" : "; }
        #vVolWrap{position:relative;display:flex;align-items:center}
        #vVolPopover{position:relative;overflow:hidden;display:flex;align-items:center;max-width:0;opacity:0;transition:max-width .2s ease,opacity .18s ease,margin-left .2s ease;margin-left:0}
        #vVolPopover.is-open{max-width:140px;opacity:1;margin-left:8px}
        #vVolPopover .vol-inner{flex:1;min-width:100px}
        /* volume */
        #vVolumeRange, #volumeRange{ -webkit-appearance:none; appearance:none; z-index:2; width:100%; height: var(--seek-thumb); margin:0; padding:0; border:0; background:transparent; outline:0; --thumb-size: var(--seek-thumb);}
        @media (pointer:coarse){ #vVolumeRange, #volumeRange{ --thumb-size: calc(var(--seek-thumb) + 6px); }}
        #vVolumeRange::-webkit-slider-runnable-track,
        #volumeRange  ::-webkit-slider-runnable-track{ height: var(--seek-h); background:transparent; }
        #vVolumeRange::-moz-range-track,
        #volumeRange  ::-moz-range-track{              height: var(--seek-h); background:transparent; }
        #vVolumeRange::-webkit-slider-thumb,
        #volumeRange  ::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width: var(--thumb-size); height: var(--thumb-size); border-radius:50%; background:#fff; border:0; margin-top: calc((var(--seek-h) - var(--thumb-size)) / 2);}
        #vVolumeRange::-moz-range-thumb,
        #volumeRange  ::-moz-range-thumb{ width: var(--thumb-size); height: var(--thumb-size); border-radius:50%; background:#fff; border:0;}
        .vvol-popover .vol-bar{position:absolute;left:0;right:0;top:50%;height:var(--seek-h);transform:translateY(-50%);background:rgba(255,255,255,.25);border-radius:999px; pointer-events:none}
        .vvol-popover .vol-barFill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--slider-grad);border-radius:2px; pointer-events:none; top:50%; bottom:auto; height:var(--seek-h); transform:translateY(-50%); border-radius:999px;}

      /*bottom*/
        #vTime{padding:0 8px; margin:0; min-width:initial; text-align:center;}
        #vTime::selection, #vTime::-moz-selection{background:transparent;color:inherit;}
        .playPause::before,

        .playPause::after { content:''; position:absolute; top:50%; transform:translate(20%, -50%); height:var(--vPlay-h); width:var(--vPlay-w); background-color:white; transition: all 0.3s ease; }
        .playPause::before {left:var(--vPlay2-gap); clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%); width:var(--vPlay-w);}
        .playPause::after {transform: translate(120%, -50%); opacity: 0; width:var(--vPlay2-w);}
        .playPause.playing::before {left:var(--vPlay2-gap); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); width:var(--vPlay2-w); transform:translate(40%, -50%);}
        .playPause.playing::after {left:calc(2* var(--vPlay2-gap)); opacity:1; transform:translate(40%, -50%);}


        .videoBottomBar .seekwrap{flex:1;min-width:0;position:relative;display:flex;align-items:center}
        .videoBottomBar #bufbar,.videoBottomBar #playbar{position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%);height:var(--seek-h);border-radius:calc(var(--seek-h)/2);pointer-events:none;overflow:hidden}
        .videoBottomBar #bufbar{background:rgba(255,255,255,.12);z-index:1}
        .videoBottomBar #playbar{background:transparent;z-index:2}
        .videoBottomBar #buffill,.videoBottomBar #playfill{height:100%;width:100%;transform-origin:left center;transform:scaleX(0)}
        .videoBottomBar #playfill{background:var(--slider-grad)}
        /* ===== Slider commun vidéo (seek) ===== */
        .videoBottomBar #vSeek{ -webkit-appearance:none; appearance:none; width:100%; height: var(--seek-thumb); margin:0; padding:0; border:0; background:transparent; z-index:3; --thumb-size: var(--seek-thumb); }
        @media (pointer:coarse){ .videoBottomBar #vSeek{ --thumb-size: calc(var(--seek-thumb) + 6px); } } /*plus gros sur mobile*/
        .videoBottomBar #vSeek::-webkit-slider-runnable-track{ height: var(--seek-h); background:transparent; }
        .videoBottomBar #vSeek::-moz-range-track{              height: var(--seek-h); background:transparent; }
        .videoBottomBar #vSeek::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width: var(--thumb-size); height: var(--thumb-size); border-radius:50%; background:#fff; border:0; margin-top: calc((var(--seek-h) - var(--thumb-size)) / 2);}
        .videoBottomBar #vSeek::-moz-range-thumb{ width: var(--thumb-size); height: var(--thumb-size); border-radius:50%; background:#fff; border:0;}
        /* (optionnel) focus & disabled */
        .videoBar input[type="range"]:focus{ outline: none; }
        .videoBar input[type="range"]:disabled{ opacity:.6; cursor:not-allowed; }

        .videoBottomBar .time{min-width:60px;text-align:right;font-variant-numeric:tabular-nums}
        .icon.expend{mask:url("/assets-web/svg/expend.svg") center/contain no-repeat;-webkit-mask:url("/assets-web/svg/expend.svg") center/contain no-repeat}
        body.fs-video .icon.expend{mask:url("/assets-web/svg/compress.svg") center/contain no-repeat;-webkit-mask:url("/assets-web/svg/compress.svg") center/contain no-repeat}

    /*TEXTES ----------------------------------------------------- */
    #textContainer{scrollbar-gutter:inherit; position:absolute; z-index:101; top:var(--videoBar-h); height: calc(var(--videoWrap-h)); align-content:center; background:transparent; width:100vw; height:100%; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s ease, visibility 0s linear .45s;}
      #textContainer .scrollbar-thumb.scrollbar-thumb-y{ left: -10px;}

    #textContainer .blur{position:absolute; inset:0; background:rgba(0, 38, 99, 0.1); -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px);}
    #textContainer .mainBg {opacity:0.7;}

    #textContainer.is-open{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .45s ease;}
      #textContainer .inner{text-align:justify; color:#0d0b15; color:#fff; font-size:1.05em; position:relative; 
        overflow-y:scroll; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.5) transparent;
        line-height:2; max-width:900px; height:calc(96% - 10px); width:var(--video-w, 80vw); min-width:var(--video-min, 360px); 
        position:relative; margin:0 auto; padding:0 20px 0 0 ; box-sizing:border-box; }
        #textContainer .inner::-webkit-scrollbar { width: 6px; }
        #textContainer .inner::-webkit-scrollbar-track {background: transparent;}
        #textContainer .inner::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,0.5); border-radius: 999px;}

      #epCover{position:absolute; left:0; top:0; background-size:cover; background-position:center; background-image:url('/assets-web/covers/ep1.jpg'); width:100vw; height:40vh;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
        mask-image: linear-gradient( to bottom, #000 0%, #000 40%, transparent 100%);
      }
      #epCoverSpace{background:transparent; width:100vw; height:calc(25vh - 50px);}


      #textContainer .inner p{margin-bottom:1.6em;}
      #textContainer .inner p:first-child{ margin-top:3em;}
      #textContainer .inner p:last-child{ margin-bottom:5em;}

      #textContainer h3{position:relative; font-size:1.35em; margin:3em 0 0.8em 0; text-align:center; width:100%;}
      #textContainer h3::before{position:absolute; content:''; bottom:0; left:5%; width:90%; height:1px; background: linear-gradient(to left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.1) 99%); }
          #textContainer h4{font-size:1em; margin:0.2em 0 0.4em 0; color:#fff;}
          #textContainer p {font-size:1em; padding:0; line-height:1.6; margin-bottom:1.2em;}
           #textContainer ul {padding:0 0 0 2vw; text-align:left;}
            #textContainer ul li {list-style: none; position: relative; padding-left: 2em; }
              #textContainer ul li::before {content: "—"; position: absolute; left: 0; color: #fff;}

    /* MEDIA QUERY - intro ----------------------------------------------------- */   
      /* phones portrait */
      @media (max-width: 767px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {       
        #sapa_logo,#sapa_presents,#souffleurs_logo{top:46vh;top:46dvh;}
      }
      /* phones landscape */    
      @media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
        #sapa_logo,#sapa_presents{top:46vh; top:46dvh;}
        #souffleurs_logo{top:42vh; top:42dvh;}
        :root{--intro-logo-w: clamp(250px, calc(30vw + 10vh), 400px);}
        #intro_btns{margin-top:0;}
          #intro_btns .bg, .bg{opacity:0.3;}
        #intro_text { top:48%;}
        #intro_text, #intro_text .line{line-height:1.3em;}
      }
      /* appareil tactile petit */
      @media (max-width: 767px) and (hover: none) and (pointer: coarse) { 
      }
      /* tablette portrait */
      @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
      }
      /* tablette landscape */
      @media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
      }
      /* appareil tactile moyen */
      @media (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){
      }

    /* MEDIA QUERY - listes ----------------------------------------------------- */
      /* phones portrait */ 
      @media (max-width: 767px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {   
        :root{--main-logo-h: calc(.8 * var(--topBar-h));}
        .modeBtn .label{font-size:1.1em;}
        .topBar{margin-bottom:2vh; align-items:center;}
        .topBar .topActions{align-self: flex-end; left:-10px;}
        #listArea{width:94%; left:3%;}
          .button .detailTitle,
          .button.active .detailTitle{ font-size:1.2em; left:5px; top:5px; padding:0px;}
          .button.active .episode_number{ top:46%;}

        #aboutPanel{width:94%; left:3%; top:calc(var(--topBar-h) + 2vh);}
          #aboutPanel .panel-inner{line-height:2;}
            #aboutPanel h2:first-child{margin-top:1em;}
            #aboutPanel h3{margin:2em 0 0 0;}
            #aboutPanel .about {padding:0 5%;}
            #aboutPanel .team {padding:0 5%;}
            #aboutPanel h4 {display:flex; flex-direction:column; width:100%; align-items:center; margin:1.2em 0;}
            #aboutPanel h4 span.name{display:inline-block;}
            #aboutPanel h4 span.role{display:block; padding:0; margin:0.5em 0 0 0; width:80%; text-align:center; line-height:1.5;}
            #aboutPanel .logo {width: 100%;}
      }
      /* phones landscape */    
      @media (max-height: 520px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
        :root{--topBar-h: clamp(100px, 12vh, 180px);}
        :root{--main-logo-h: calc(.6 * var(--topBar-h));}
        .modeBtn .label{font-size:1.2em;}
        .topBar{margin-bottom:20px;}
        button.aboutBtn{z-index:29;}
        #aboutPanel{width:98%; left:1%; top:calc(var(--topBar-h) + 20px); margin:0; font-size:0.7em;}
          #aboutPanel h2:first-child{margin-top:1em;}
          #aboutPanel h3{margin:2em 0 0 0;}
          #aboutPanel h3.partners{margin:4em 0 2em 0;}
          #aboutPanel .about {padding:0 calc(5% + 20px);}
          #aboutPanel .team {padding:0 calc(5% + 20px);}
          #aboutPanel h4 {display:flex; flex-direction:column; width:100%; align-items:center; margin:1.2em 0; }
          #aboutPanel h4 span.name{display:inline-block;font-size:1.4em;}
          #aboutPanel h4 span.role{display:block; padding:0; margin:0.5em 0 0 0; width:80%; text-align:center; line-height:1.5;font-size:0.8em;}
          #aboutPanel p {font-size:1.5em;}
      }
      /* appareil tactile petit */
      @media (max-width: 767px) and (hover: none) and (pointer: coarse) {
      }
      /* tablette portrait */
      @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
          :root{
            --topBar-h: clamp(100px, 15vh, 150px);
            --main-logo-h: calc(.9 * var(--topBar-h));}
          .topBar{margin-bottom:2vh;}

          .topBar .main_logo{top:-0.8vh;}
          #aboutPanel{top:calc(var(--topBar-h) + 2vh);}
          #aboutPanel p {font-size:1.1em;}
      }
      /* tablette landscape */
      @media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
          :root{
            --topBar-h: clamp(100px, 15vh, 150px);
            --main-logo-h: calc(.9 * var(--topBar-h));}
          .topBar{margin-bottom:2vh;}
          #aboutPanel{top:calc(var(--topBar-h) + 2vh);}
          .topBar .main_logo{top:-1.3vh;}
          #aboutPanel p {font-size:1.1em;}
      }
      /* appareil tactile moyen */
      @media (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){
      }


    /* MEDIA QUERY - video ----------------------------------------------------- */
    @media (max-width: 767px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
      .video-wrap{padding:0 20px;}
      :root{--pm-size:clamp(50px,15vh,80px);}
      #textContainer h3{margin:1em 0 0.8em 0;}
      #textContainer .mainBg {opacity:1;}
      #textContainer .blur{background:rgba(100, 115, 140, 0.5); -webkit-backdrop-filter:blur(100px); backdrop-filter:blur(100px);}
    }
    @media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) { /* phones landscape */    
      #player{ --video-max: 99999px; }
        #videoTopBar{z-index:102;}
          .videoBar .inner{background:rgba(255,255,255,0.1); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); overflow:hidden; }
        .video-wrap{top:0; height:100%; padding:0;}
        #videoBottomBar{position:absolute; bottom:0;}
      #textContainer h3{margin:0.8em 0 0.8em 0;}
      #textContainer p{font-size:1.1em;}
      #textContainer .mainBg {opacity:1;}
      #textContainer .blur{background:rgba(100, 115, 140, 0.5); -webkit-backdrop-filter:blur(100px); backdrop-filter:blur(100px);}

    }

      /* tablette portrait */
      @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
              #textContainer p{font-size:1.1em; line-height:2}
      }
      /* tablette landscape */
      @media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
              #textContainer p{font-size:1.1em;  line-height:2}
      }
      /* appareil tactile moyen */
      @media (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){
      }




    /* Règles appliquées seulement sur Safari iOS -------------------------- */
    @supports (-webkit-touch-callout: none) {
      .volumeWrap, #vVolBtn { display: none; }
      /*reset style IOS*/
        a,button, .videoButton, .modeBtn, .ico { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
        button, .videoButton, .modeBtn, .ico { -webkit-appearance: none;  appearance: none; }
        button:focus, .videoButton:focus, .modeBtn:focus, .ico:focus { outline: none;}
    }


/* ==================================================================================*/
 /* == Tooltips (tip="légende" + classe: tip-bottom/top tip-left/center/right) == */
/* ==================================================================================*/
:root{--tt-bg:rgba(20,20,20,1);--tt-fg:#fff;--tt-pad:6px 8px;--tt-radius:6px;--tt-gap:8px;--tt-maxw:280px;--tt-dur:.16s;--tt-z:1000;--tt-arrow-pad:20px}
:where([tip]){position:relative}
:where([tip])::before,:where([tip])::after{content:"";position:absolute;opacity:0;pointer-events:none;z-index:var(--tt-z);transition:opacity var(--tt-dur) ease,transform var(--tt-dur) ease;--tt-reveal:4px}
:where([tip])::before{content:attr(tip);max-width:var(--tt-maxw);white-space:nowrap;background:var(--tt-bg);color:var(--tt-fg);padding:var(--tt-pad);border-radius:var(--tt-radius);font:12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.25)}
:where([tip])::after{width:8px;height:8px;background:var(--tt-bg);transform:rotate(45deg)}
:where([tip])::before{top:calc(100% + var(--tt-gap));left:50%;transform:translate(-50%,var(--tt-reveal))}
:where([tip])::after{top:calc(100% + var(--tt-gap) - 4px);left:50%;transform:translate(-50%,var(--tt-reveal)) rotate(45deg)}
:where([tip].tip-top)::before{bottom:calc(100% + var(--tt-gap));top:auto}
:where([tip].tip-top)::after{bottom:calc(100% + var(--tt-gap) - 4px);top:auto}
:where([tip].tip-top)::before,:where([tip].tip-top)::after{--tt-reveal:-4px}
:where([tip].tip-left)::before{right:0;left:auto;transform:translate(0,var(--tt-reveal))}
:where([tip].tip-left)::after{right:var(--tt-arrow-pad);left:auto;transform:translate(0,var(--tt-reveal)) rotate(45deg)}
:where([tip].tip-center)::before{left:50%;right:auto;transform:translate(-50%,var(--tt-reveal))}
:where([tip].tip-center)::after{left:50%;right:auto;transform:translate(-50%,var(--tt-reveal)) rotate(45deg)}
:where([tip].tip-right)::before{left:0;right:auto;transform:translate(0,var(--tt-reveal))}
:where([tip].tip-right)::after{left:var(--tt-arrow-pad);right:auto;transform:translate(0,var(--tt-reveal)) rotate(45deg)}
@media(hover:hover){:where([tip]:not(.is-disabled):not([aria-disabled="true"]):not(:disabled):hover)::before,:where([tip]:not(.is-disabled):not([aria-disabled="true"]):not(:disabled):hover)::after{opacity:1;--tt-reveal:0}}
:where([tip]:not(.is-disabled):not([aria-disabled="true"]):not(:disabled):focus-visible)::before,:where([tip]:not(.is-disabled):not([aria-disabled="true"]):not(:disabled):focus-visible)::after{opacity:1;--tt-reveal:0}
:where([tip].is-disabled,[tip][aria-disabled="true"],[tip]:disabled)::before,:where([tip].is-disabled,[tip][aria-disabled="true"],[tip]:disabled)::after{opacity:0!important;content:none!important}