/* ================= HERO LOGO CENTER ================= */

#hero{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* container */
.hero-logo{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* logo principal */
.logo-main{
  width:88vw;
  max-width:none;
  position:relative;
  z-index:3;
}

.logo-glitch{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:88vw;

  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;

  z-index:2;
}

/* glitch layers */
.logo-glitch{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:88vw;

  opacity:0;              /* invisible par défaut */
  pointer-events:none;    /* évite bugs hover */
  mix-blend-mode:screen;
}

.hero-logo:hover .g1{
  animation:glitch1 .4s infinite;
  opacity:.6;
}

.hero-logo:hover .g2{
  animation:glitch2 .4s infinite;
  opacity:.6;
}

/* animations */

@keyframes glitch1{
  0%, 95%, 100% { opacity:0; transform:translateX(-50%); }
  96% { opacity:.6; transform:translateX(calc(-50% - 6px)); }
  97% { opacity:.8; transform:translateX(calc(-50% + 6px)); }
}

@keyframes glitch2{
  0%, 96%, 100% { opacity:0; transform:translateX(-50%); }
  97% { opacity:.5; transform:translateX(calc(-50% + 8px)); }
  98% { opacity:.7; transform:translateX(calc(-50% - 8px)); }
}

/* Alignement éditorial : textes à droite, logo et médias inchangés */
#hero .hsub{width:100%;justify-content:flex-start;}
#hero .hsubt{text-align:left;margin-right:auto;}
#contact{text-align:left;}
#contact .cpre{justify-content:flex-start;}
#contact .cemailw{margin-left:auto;}


/* Ajustements ciblés : signature + largeur des textes */
.hsub,
.hsubt,
.abody,
.vitem-desc-text{
  max-width:none !important;
}

.hsubt{
  width:min(96vw, 1500px) !important;
}

.abody{
  width:min(94vw, 1450px) !important;
}

.abody p{
  max-width:1400px !important;
}

.vitem-desc-text{
  max-width:1400px !important;
}

@media(min-width:1100px){
  .hsubt{
    white-space:nowrap;
  }
}


/* Logo hero — affichage presque pleine largeur */
.hero-logo .logo-main,
.hero-logo .logo-glitch{
  width:min(88vw, 1600px) !important;
  max-width:none !important;
}
@media(max-width:700px){
  .hero-logo .logo-main,
  .hero-logo .logo-glitch{
    width:94vw !important;
  }
}


/* Services — précision commerciale sans changer l'identité */
.sdesc{
  display:block;
  margin-top:.35rem;
  max-width:820px;
  font-family:var(--ff-m);
  font-size:.72rem;
  font-weight:400;
  line-height:1.55;
  letter-spacing:.02em;
  color:var(--g5);
  text-transform:none;
}
.svcrow:hover .sdesc{color:var(--g6);}

/* Accroches courtes : une ligne sur desktop si l'espace le permet */
@media(min-width:1000px){
  #videos .vtitle,
  #contact .cbig{
    white-space:nowrap;
  }
  #contact .abody{
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:1200px !important;
  }
}
@media(max-width:999px){
  .sdesc{max-width:100%;}
}


/* Hero — rapproche le bloc éditorial du logo sans modifier la typo */
#hero .hsub{
  transform:translateY(-3.5vh);
}

@media(max-width:900px){
  #hero .hsub{
    transform:translateY(-1.5vh);
  }
}


/* Contact — identification claire sans alourdir */
.contact-signature{
  margin-top:1.8rem !important;
  color:var(--g6) !important;
}
.contact-signature strong{
  color:#fff;
}

/* Footer — liens uniquement utiles et vérifiables */
footer .flinks a{
  text-transform:none;
}


/* Conversion — CTA secondaire discret + contact réellement aligné à gauche */
#contact .cemailw{
  margin-left:0 !important;
  margin-right:auto !important;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
}

.hcta-secondary{
  background:transparent !important;
  border-color:var(--g3) !important;
}

.hcta-secondary span{
  color:var(--g6);
}

.hcta-secondary:hover{
  border-color:var(--white) !important;
}

.hcta-secondary:hover span{
  color:var(--black) !important;
}

@media(max-width:700px){
  .hero-actions{
    width:100%;
    align-items:flex-start;
  }
}


/* ================= MOBILE / RESPONSIVE PASS =================
   Ajustements ciblés sans modifier le rendu desktop.
============================================================== */
@media(max-width:700px){

  /* Navigation */
  nav{
    padding:.85rem 1rem !important;
    min-height:64px;
  }
  .nlogo{
    font-size:1.4rem !important;
  }
  .nlogo img{
    height:42px !important;
  }

  /* Hero */
  #hero{
    min-height:100svh;
    padding:5rem 1rem 2rem !important;
    justify-content:flex-end;
    overflow:hidden;
  }

  #boot{
    top:4.7rem !important;
    left:1rem !important;
    font-size:.54rem !important;
    line-height:1.65 !important;
    max-width:82vw;
  }

  .hero-logo{
    width:100%;
    margin-top:4.5rem;
  }

  .hero-logo .logo-main,
  .hero-logo .logo-glitch{
    width:96vw !important;
    max-width:none !important;
  }

  #hero .hsub{
    width:100% !important;
    display:block !important;
    transform:none !important;
    margin-top:1rem !important;
  }

  #hero .hsubt{
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    margin:0 0 1.1rem 0 !important;
    font-size:.9rem !important;
    line-height:1.55 !important;
    letter-spacing:.12em !important;
  }

  #hero .hsubt em{
    display:block;
    font-size:1.35rem !important;
    line-height:1.1 !important;
    margin-bottom:.55rem;
  }

  #hero .hsubt span{
    display:inline-block;
    max-width:100%;
  }

  .hline{
    display:none !important;
  }

  .hero-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.65rem !important;
  }

  .hero-actions .hcta{
    width:100%;
    text-align:center;
    padding:.9rem 1rem !important;
    font-size:.68rem !important;
  }

  /* Sections */
  section{
    padding:4rem 1rem !important;
  }

  .shdr{
    margin-bottom:2.2rem !important;
    gap:.8rem !important;
  }

  .stag,
  .sidx{
    font-size:.52rem !important;
  }

  #videos{
    padding-top:3rem !important;
  }

  #videos .shdr,
  #videos h2.vtitle{
    padding-left:1rem !important;
    padding-right:1rem !important;
  }

  #videos .vtitle{
    font-size:clamp(2.5rem,14vw,4.5rem) !important;
    line-height:.92 !important;
    margin-bottom:2rem !important;
    white-space:normal !important;
  }

  #videos .abody{
    padding:0 1rem 2.4rem !important;
    width:100% !important;
    max-width:100% !important;
  }

  .abody{
    width:100% !important;
    max-width:100% !important;
  }

  .abody p{
    max-width:100% !important;
    font-size:.98rem !important;
    line-height:1.65 !important;
  }

  /* Vidéos */
  .vitem{
    padding:2.4rem 1rem !important;
  }

  .vitem-num{
    left:1rem !important;
    top:2.4rem !important;
  }

  .vitem-meta{
    align-items:flex-start !important;
    gap:.8rem !important;
  }

  .vitem-title{
    font-size:clamp(1.8rem,9vw,3rem) !important;
    line-height:1 !important;
    width:100%;
  }

  .vitem-desc{
    padding-top:1rem !important;
  }

  .vitem-desc-text{
    max-width:100% !important;
    font-size:.9rem !important;
    line-height:1.55 !important;
  }

  /* Studio */
  .agrid{
    grid-template-columns:1fr !important;
    gap:2.5rem !important;
  }

  .albl{
    font-size:.72rem !important;
    line-height:1.5 !important;
  }

  .strow{
    align-items:flex-start !important;
    gap:1rem !important;
  }

  .stval{
    text-align:right;
    max-width:62%;
    overflow-wrap:anywhere;
  }

  /* Services */
  .svcrow{
    grid-template-columns:2rem 1fr !important;
    gap:.8rem !important;
    padding:1.25rem 0 !important;
  }

  .sn{
    padding-top:.15rem;
  }

  .sname{
    font-size:1rem !important;
    line-height:1.3 !important;
  }

  .sdesc{
    font-size:.72rem !important;
    line-height:1.5 !important;
    margin-top:.4rem !important;
  }

  /* Contact */
  #contact{
    padding:4.5rem 1rem 4rem !important;
  }

  #contact .cbig{
    font-size:clamp(3rem,17vw,5.5rem) !important;
    line-height:.9 !important;
    white-space:normal !important;
    margin-bottom:2rem !important;
  }

  #contact .abody{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 2rem 0 !important;
  }

  #contact .cemailw{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding-bottom:.65rem;
  }

  #contact .cemail{
    font-size:clamp(.9rem,4.5vw,1.15rem) !important;
    overflow-wrap:anywhere;
  }

  /* Footer */
  footer{
    padding:1.5rem 1rem !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:start !important;
    gap:1rem !important;
  }

  .flinks{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:.8rem 1rem !important;
  }

  .flinks a,
  .fm{
    font-size:.55rem !important;
  }

  /* Overlay vidéo */
  #closePlayer{
    top:.8rem !important;
    right:.8rem !important;
    padding:.55rem .75rem !important;
    font-size:.55rem !important;
  }
}