@media(min-width:701px) and (max-width:980px){
  #hero{
    padding-left:1.5rem !important;
    padding-right:1.5rem !important;
  }

  #hero .hsub{
    gap:1rem !important;
  }

  #hero .hsubt{
    white-space:normal !important;
    width:auto !important;
    max-width:70vw !important;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .svcrow{
    grid-template-columns:3rem 1fr !important;
  }

  .scat{
    display:none !important;
  }
}


/* Accessibilité / robustesse — invisible hors navigation clavier */
.skip-link{
  position:fixed;
  left:1rem;
  top:1rem;
  z-index:99999;
  transform:translateY(-160%);
  background:#fff;
  color:#000;
  padding:.7rem 1rem;
  font-family:var(--ff-m);
  font-size:.72rem;
  text-decoration:none;
}
.skip-link:focus{
  transform:translateY(0);
}

a:focus-visible,
button:focus-visible{
  outline:2px solid #fff !important;
  outline-offset:4px !important;
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important;}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


@media(pointer:coarse){
  #cdot,
  #cring{
    display:none !important;
  }
}

/* ================= VARIANTE VIDÉOS IMMERSIVES =================
   Les vidéos dominent l'écran, mais leur taille est plafonnée
   pour éviter d'exposer inutilement les défauts d'image.
   Aucun recadrage, aucune dégradation ajoutée.
=============================================================== */

/* Conserver le texte de section lisible, mais donner la priorité aux vidéos */
#videos .shdr,
#videos h2.vtitle{
  padding-left:2.5rem !important;
  padding-right:2.5rem !important;
}

/* Plus de respiration verticale, moins de marges latérales autour des vidéos */
.vitem{
  padding:3.5rem 0 3rem !important;
}

/* Les métadonnées gardent une marge de lecture */
.vitem-meta,
.vitem-desc{
  width:100% !important;
  max-width:none !important;
  padding-left:2.5rem !important;
  padding-right:2.5rem !important;
}

/* Vidéo immersive :
   - presque pleine largeur
   - hauteur contrôlée pour éviter la "sur-révélations" des défauts
   - ratio 16/9 respecté
   - aucun crop */
.vwrap{
  width:min(100vw, calc(86vh * 16 / 9)) !important;
  height:min(86vh, calc(100vw * 9 / 16)) !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  margin:0 auto !important;
  background:#000 !important;
}

/* Le lecteur occupe toute la zone disponible sans filtre supplémentaire */
.vwrap iframe.vbg,
.vwrap .voverlay{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* Coins sci-fi un peu plus discrets à cette échelle */
.vwrap::before,
.vwrap::after{
  width:22px !important;
  height:22px !important;
}
.vitem:hover .vwrap::before,
.vitem:hover .vwrap::after{
  width:54px !important;
  height:54px !important;
}

/* Descriptions un peu plus proches de la vidéo */
.vitem-desc{
  margin-top:1rem !important;
}

/* Mobile : plein écran en largeur, sans excès de hauteur */
@media(max-width:700px){
  .vitem{
    padding:2.3rem 0 2.4rem !important;
  }

  .vitem-meta,
  .vitem-desc{
    padding-left:1rem !important;
    padding-right:1rem !important;
  }

  .vwrap{
    width:100vw !important;
    height:56.25vw !important; /* 16/9 */
  }
}

/* Tablette : garder l'effet immersif, mais avec une limite confortable */
@media(min-width:701px) and (max-width:1100px){
  .vwrap{
    width:100vw !important;
    height:min(72vh, 56.25vw) !important;
  }
}


/* ================= VARIANTE CINÉMA / PORTFOLIO =================
   Les films dominent, l'interface se fait plus discrète.
   Aucun crop, aucun filtre de netteté, aucune baisse de qualité.
================================================================ */

/* Section créations plus sobre */
#videos{
  padding-top:5rem !important;
}

#videos .shdr{
  opacity:.68;
  margin-bottom:1.2rem !important;
}

#videos .vtitle{
  margin-bottom:1.5rem !important;
  max-width:1200px;
}

#videos .abody{
  max-width:980px !important;
  margin-bottom:4rem !important;
}

/* Chaque film devient un vrai "chapitre" */
.vitem{
  padding:5rem 0 5.5rem !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

.vitem:first-of-type{
  border-top:0 !important;
}

/* Métadonnées plus discrètes */
.vitem-meta{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:2rem !important;
  padding:0 2.5rem 1.2rem !important;
}

.vitem-idx{
  opacity:.45;
}

.vitem-title{
  font-size:clamp(1.35rem,2.2vw,2.35rem) !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
}

.vitem-tag{
  opacity:.62;
  white-space:nowrap;
}

/* Vidéo : immersive, nette, sans crop */
.vwrap{
  width:min(100vw, calc(88vh * 16 / 9)) !important;
  height:min(88vh, calc(100vw * 9 / 16)) !important;
  margin:0 auto !important;
  background:#000 !important;
  overflow:hidden !important;
}

.vwrap iframe.vbg{
  width:100% !important;
  height:100% !important;
  transform:none !important;
  filter:none !important;
}

/* Réduire l'effet "tech demo" */
.vwrap::before,
.vwrap::after{
  opacity:.35 !important;
}

.vitem:hover .vwrap::before,
.vitem:hover .vwrap::after{
  opacity:.65 !important;
}

/* Description : petite légende de film */
.vitem-desc{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:2rem !important;
  padding:1rem 2.5rem 0 !important;
  margin-top:0 !important;
}

.vitem-desc-text{
  max-width:760px !important;
  font-size:.78rem !important;
  line-height:1.55 !important;
  opacity:.68;
}

.vitem-ext{
  opacity:.5;
}

/* Le reel, premier film, bénéficie d'un peu plus d'espace */
.vitem:first-of-type{
  padding-top:2rem !important;
}

/* Mobile : conserver l'immersion sans encombrer */
@media(max-width:700px){
  #videos{
    padding-top:3.5rem !important;
  }

  #videos .abody{
    margin-bottom:2.5rem !important;
  }

  .vitem{
    padding:3rem 0 3.5rem !important;
  }

  .vitem-meta{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    align-items:end !important;
    gap:.6rem .8rem !important;
    padding:0 1rem .9rem !important;
  }

  .vitem-title{
    font-size:clamp(1.35rem,7vw,2rem) !important;
  }

  .vitem-tag{
    grid-column:2;
    white-space:normal;
  }

  .vwrap{
    width:100vw !important;
    height:56.25vw !important;
  }

  .vitem-desc{
    display:block !important;
    padding:.9rem 1rem 0 !important;
  }

  .vitem-desc-text{
    max-width:100% !important;
    font-size:.72rem !important;
  }

  .vitem-ext{
    display:inline-block;
    margin-top:.6rem;
  }
}