/* Leave the main video visible around the lightweight species panel. */
#modalFiche .modal-content{
  width:min(1280px,84vw)!important;height:min(820px,78dvh)!important;
  max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 48px)!important;
  border:0!important;border-radius:10px!important;box-shadow:none!important;
  background:#edf4ed!important;
}
#modalFiche .modal-overlay{background:transparent!important;backdrop-filter:none!important}
#modalFiche .modal-close{
  top:12px;right:16px;width:44px;height:44px;
  background:#e1eee5!important;color:#285f68!important;
  border:1px solid #abc5bb;border-radius:50%;box-shadow:none;
}
#modalFiche .express-modal-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#edf4ed!important;border-top:1px solid #abc5bb;
  padding:8px 18px calc(8px + env(safe-area-inset-bottom));
}
#modalFiche #niveauControls{flex:1;min-width:0;gap:6px!important;background:transparent;padding:0}
#modalFiche #niveauControls button{
  min-height:44px;background:#e1eee5;color:#244e58;
  border:1px solid #abc5bb;border-radius:22px;font:600 14px/1.3 system-ui;
}
#modalFiche #niveauControls button.active{background:#285f68;color:#fffdf5}
#modalFiche .express-modal-toolbar .dive-language{
  position:static!important;flex:none;display:flex!important;
  margin:0!important;transform:none!important;background:transparent;box-shadow:none;
}
#modalFiche .express-modal-toolbar .dive-language :is(button,a){min-height:44px}
@media(max-width:600px){
  #modalFiche .express-modal-toolbar{gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  #modalFiche #niveauControls{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));flex-basis:100%}
  #modalFiche .express-modal-toolbar .dive-language{margin-left:auto!important}
}

/* Even in portrait, keep a visible margin of the main video around the panel. */
@media(orientation:portrait){
  #modalFiche .modal-content{width:88vw!important;height:76dvh!important}
}
@media(max-width:600px){
  #modalFiche .modal-content{width:90vw!important;height:78dvh!important}
}

/* Bound the overlay to the video element's containing block, never to the page. */
#playerContainer .video-zone{position:relative}
html body #modalFiche.modal-fiche{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  margin:0!important;overflow:hidden;isolation:isolate;
}
html body #modalFiche.modal-fiche .modal-content{
  width:100%!important;height:100%!important;min-height:0!important;
  max-width:100%!important;max-height:100%!important;
  margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
html body #modalFiche #ficheFrame{background:transparent!important}
html body #modalFiche .express-modal-toolbar{
  background:rgba(13,63,75,.8)!important;border-color:#a7c8bd66;
}
html body #modalFiche .modal-close{z-index:50;top:8px;right:10px}
html body #modalFiche.express-loading .modal-content::after{
  background:rgba(13,63,75,.5)!important;color:#fffdf5!important;
}

/* Override the old public fullscreen selector explicitly, including its visible state. */
#playerContainer .video-zone:has(>#modalFiche.modal-visible){
  position:relative!important;contain:paint;overflow:hidden!important;isolation:isolate;
}
#playerContainer .video-zone>#modalFiche.modal-fiche,
#playerContainer .video-zone>#modalFiche.modal-fiche.modal-visible{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;
  box-sizing:border-box;overflow:hidden!important;
}
#playerContainer .video-zone>#modalFiche .modal-content{
  display:flex;flex-direction:column;min-width:0!important;min-height:0!important;
  width:100%!important;height:100%!important;overflow:hidden!important;
}
#playerContainer .video-zone>#modalFiche .modal-overlay{
  background:rgba(8,49,63,.62)!important;
  -webkit-backdrop-filter:blur(16px) saturate(.8)!important;
  backdrop-filter:blur(16px) saturate(.8)!important;
}
#playerContainer .video-zone>#modalFiche #ficheFrame{
  flex:1 1 0!important;min-width:0!important;min-height:0!important;
  width:100%!important;max-width:100%!important;height:0!important;border:0;
}
#playerContainer .video-zone>#modalFiche .express-modal-toolbar{
  flex:0 0 auto;box-sizing:border-box;max-width:100%;
}

/* Leave a clear clickable ring of the original footage around the frosted sheet. */
#playerContainer .video-zone>#modalFiche.modal-fiche{
  --species-gap:clamp(14px,3%,40px);
  align-items:center!important;justify-content:center!important;
}
#playerContainer .video-zone>#modalFiche .modal-content{
  width:calc(100% - var(--species-gap) - var(--species-gap))!important;
  height:calc(100% - var(--species-gap) - var(--species-gap))!important;
  flex:0 0 auto!important;border-radius:12px!important;
  background:rgba(8,49,63,.62)!important;
  -webkit-backdrop-filter:blur(16px) saturate(.8)!important;
  backdrop-filter:blur(16px) saturate(.8)!important;
}
#playerContainer .video-zone>#modalFiche .modal-overlay{
  background:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  cursor:pointer;pointer-events:auto;
}
@media(max-width:600px){
  #playerContainer .video-zone>#modalFiche.modal-fiche{--species-gap:12px}
}

/* A continuous frosted dismissal area covers the footage and its name strip. */
#playerContainer .video-zone>#modalFiche .modal-overlay{
  background:rgba(8,49,63,.24)!important;
  -webkit-backdrop-filter:blur(12px) saturate(.8)!important;
  backdrop-filter:blur(12px) saturate(.8)!important;
}
#playerContainer .espece-nom-zone{position:relative}
#playerContainer .espece-nom-zone>.species-name-backdrop{
  position:absolute!important;inset:0!important;z-index:2147483647;
  display:block;width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:rgba(8,49,63,.24)!important;box-shadow:none!important;
  -webkit-backdrop-filter:blur(12px) saturate(.8);
  backdrop-filter:blur(12px) saturate(.8);cursor:pointer;
}
#playerContainer .espece-nom-zone>.species-name-backdrop[hidden]{display:none!important}
#playerContainer .espece-nom-zone>.species-name-backdrop:focus-visible{outline:2px solid #e1eee5;outline-offset:-3px}

/* A single compact reading-level menu replaces the four large tabs. */
#playerContainer .video-zone>#modalFiche.has-level-select #niveauControls{display:none!important}
#playerContainer .video-zone>#modalFiche.has-level-select .express-modal-toolbar{
  justify-content:flex-end;gap:12px;padding:6px 14px calc(6px + env(safe-area-inset-bottom));
}
#modalFiche .species-level-select{
  appearance:none;-webkit-appearance:none;min-height:44px;min-width:156px;
  padding:9px 40px 9px 17px;border:1px solid #a9c9ba;border-radius:24px;
  color:#244e58;background-color:#e1eee5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%23285f68' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
  font:650 15px/1.3 system-ui;cursor:pointer;box-shadow:none;
}
#modalFiche .species-level-select:focus-visible{outline:2px solid #fffdf5;outline-offset:3px}
#modalFiche .species-level-select option{color:#244e58;background:#fcfaf0}

/* Lighter frosted surface; keep the background blur and readable controls. */
#playerContainer .video-zone>#modalFiche .modal-content{background:rgba(8,49,63,.38)!important}
#playerContainer .video-zone>#modalFiche .express-modal-toolbar{background:rgba(13,63,75,.62)!important}

/* Reader fullscreen only: centre a bounded sheet inside the visible footage. */
#playerContainer .video-zone>#modalFiche.modal-fiche.species-reader-fullscreen{
  top:var(--species-fs-top,0px)!important;bottom:auto!important;
  height:var(--species-fs-height,100%)!important;
  align-items:center!important;justify-content:center!important;
}
#playerContainer .video-zone>#modalFiche.modal-fiche.species-reader-fullscreen .modal-content{
  width:min(1440px,calc(100% - var(--species-gap) - var(--species-gap)))!important;
  height:min(860px,84%)!important;
  max-height:calc(100% - var(--species-gap) - var(--species-gap))!important;
  min-height:0!important;margin:0!important;flex:0 0 auto!important;
}

/* Use the available fullscreen width; fit the sheet to its actual content. */
#playerContainer .video-zone>#modalFiche.modal-fiche.species-reader-fullscreen .modal-content{
  width:calc(100% - var(--species-gap) - var(--species-gap))!important;
  height:min(var(--species-sheet-height,84%),calc(100% - var(--species-gap) - var(--species-gap)))!important;
}
#modalFiche.species-reader-fullscreen .species-level-select{font-size:clamp(17px,1.2vw,26px);min-height:48px;min-width:180px}

/* A phone needs a tall reading surface, not a sheet squeezed into a 16:9 thumbnail. */
@media(max-width:767px){
  #playerContainer .video-zone:has(>#modalFiche.modal-visible){
    height:80dvh!important;min-height:420px!important;max-height:none!important;
    aspect-ratio:auto!important;flex:0 0 auto!important;scroll-margin-top:8px;
  }
  #playerContainer .video-zone>#modalFiche .modal-content{min-width:0!important}
  #playerContainer .video-zone>#modalFiche.has-level-select .express-modal-toolbar{
    flex-wrap:nowrap!important;padding:6px 8px!important;gap:8px!important;
  }
  #modalFiche .species-level-select{font-size:14px!important;min-width:120px;min-height:44px;padding:8px 30px 8px 12px;background-position:right 10px center}
  #modalFiche .express-modal-toolbar .dive-language{margin:0!important;width:auto!important;gap:3px;padding:3px}
  #modalFiche .express-modal-toolbar .dive-language :is(button,a){min-width:38px;min-height:44px;padding:6px!important;font-size:14px!important}
  #playerContainer .video-zone>#modalFiche .modal-close{width:40px;height:40px;top:6px;right:6px}
}

/* Fit under the sticky navigation and inside the phone's actual visible viewport. */
@media(max-width:767px){
  #playerContainer .video-zone:has(>#modalFiche.modal-visible){
    height:var(--species-mobile-height,72dvh)!important;min-height:0!important;
    scroll-margin-top:calc(var(--pub-rubrics-height,48px) + 8px);
  }
}

/* Override the professional reader hide rule while its selector is in the card. */
body:has(#modalFiche.modal-visible) #modalFiche .express-modal-toolbar .dive-language{visibility:visible!important;pointer-events:auto!important}

/* Personal reader: keep the entire sheet above the sibling species caption.
   The caption's own high z-index stays confined to its local stacking context. */
body.plongee-perso-page #playerContainer:has(#modalFiche.modal-visible)>.video-zone{
  z-index:61!important;
}
body.plongee-perso-page #playerContainer:has(#modalFiche.modal-visible)>.espece-nom-zone{
  z-index:1!important;isolation:isolate;
}