/* ==========================================================================
   Subnautica2.fr — Vocaux / Discord revamp
   ========================================================================== */
body.s2-vocaux-bg{background:#03131f!important}
body.s2-vocaux-bg .ocean-bg{position:absolute!important;inset:0!important;height:100%!important;min-height:100%!important;pointer-events:none!important}
body.s2-vocaux-bg .ocean-bg:before{background-position:center top!important;background-size:cover!important;opacity:.28!important;filter:saturate(1.08) contrast(1.04) brightness(.85)!important}
body.s2-vocaux-bg .ocean-bg:after{background:linear-gradient(180deg,rgba(2,12,20,.10),rgba(2,12,20,.72) 42%,rgba(2,12,20,.96))!important}

.s2-vocaux-page{position:relative;z-index:2;color:#eefcff;padding-bottom:58px}
.s2vocal-container{width:min(1640px,calc(100% - 64px));margin:0 auto}
.s2vocal-kicker{display:inline-flex;align-items:center;gap:9px;width:max-content;max-width:100%;padding:9px 16px;border-radius:999px;border:1px solid rgba(94,235,255,.26);background:rgba(34,229,255,.08);color:#bffaff;font-weight:950;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.s2vocal-kicker img{width:20px;height:20px;object-fit:contain}

.s2vocal-hero{position:relative;isolation:isolate;overflow:hidden;min-height:540px;display:flex;align-items:center;padding:44px 0 50px;border-bottom:1px solid rgba(94,235,255,.10);background:#031825}
.s2vocal-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:url('../img/hero-subnautica2.png') center 38%/cover no-repeat;filter:saturate(1.08) contrast(1.05) brightness(.88)}
.s2vocal-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(1,10,18,.92),rgba(1,14,23,.55) 46%,rgba(1,14,23,.18) 68%,rgba(1,10,18,.84)),linear-gradient(180deg,rgba(1,12,20,.04),rgba(1,12,20,.86))}
.s2vocal-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(350px,.62fr);gap:clamp(28px,4vw,70px);align-items:center}
.s2vocal-hero-copy h1{max-width:900px;margin:18px 0 14px;color:#fff;font-size:clamp(3rem,4.9vw,5.35rem);line-height:.98;letter-spacing:-.045em}.s2vocal-hero-copy h1 span{color:#28e6ff}
.s2vocal-hero-copy p{max-width:760px;margin:0;color:#d7f0f7;line-height:1.62;font-size:1.08rem}
.s2vocal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.s2vocal-start-card,.s2vocal-panel,.s2vocal-live-panel,.s2vocal-faq,.s2vocal-final-cta{background:linear-gradient(180deg,rgba(5,45,67,.72),rgba(2,18,31,.90));border:1px solid rgba(94,235,255,.18);box-shadow:0 22px 46px rgba(0,8,18,.24),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(15px);border-radius:28px}
.s2vocal-start-card{padding:24px;display:grid;gap:13px}.s2vocal-start-card h2{margin:0 0 4px;color:#fff;font-size:1.75rem}
.s2vocal-start-card a{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid rgba(94,235,255,.10);transition:.18s border-color,.18s transform,.18s background}
.s2vocal-start-card a:hover{transform:translateY(-2px);border-color:rgba(94,235,255,.28);background:rgba(34,229,255,.06);color:#fff}
.s2vocal-start-card a img{width:48px;height:48px;object-fit:contain}.s2vocal-start-card strong{display:block;color:#fff;margin-bottom:5px}.s2vocal-start-card small{color:#c8e3ea;line-height:1.42}

.s2vocal-feature-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(94,235,255,.15);border-radius:26px;overflow:hidden;margin-top:22px;background:linear-gradient(180deg,rgba(5,45,67,.62),rgba(2,18,31,.82));box-shadow:0 18px 38px rgba(0,8,18,.18)}
.s2vocal-feature-strip>div{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;min-height:96px;padding:18px 22px}.s2vocal-feature-strip>div+div{border-left:1px solid rgba(94,235,255,.12)}
.s2vocal-feature-strip img{width:42px;height:42px;object-fit:contain}.s2vocal-feature-strip strong{display:block;color:#bdfaff;margin-bottom:4px}.s2vocal-feature-strip small{color:#c7e1e8}

.s2vocal-quick{padding-top:26px}.s2vocal-section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}.s2vocal-section-head h2{margin:0;color:#fff;font-size:clamp(2rem,3vw,3.05rem);line-height:1}
.s2vocal-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.s2vocal-card-grid article{min-height:240px;padding:24px;border-radius:28px;background:linear-gradient(180deg,rgba(5,45,67,.72),rgba(2,18,31,.88));border:1px solid rgba(94,235,255,.16);box-shadow:0 20px 40px rgba(0,8,18,.20);display:flex;flex-direction:column;gap:13px}.s2vocal-card-grid img{width:56px;height:56px;object-fit:contain}.s2vocal-card-grid h3{margin:0;color:#fff;font-size:1.18rem}.s2vocal-card-grid p{margin:0;color:#d0e9f0;line-height:1.55}.s2vocal-card-grid a{margin-top:auto;color:#9bf9ff;font-weight:950}

.s2vocal-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.58fr);gap:22px;align-items:start;padding-top:24px}.s2vocal-main-column{display:grid;gap:22px}
.s2vocal-panel{padding:26px}.s2vocal-panel h2,.s2vocal-live-panel h2,.s2vocal-faq h2,.s2vocal-final-cta h2{margin:13px 0 12px;color:#fff;font-size:clamp(1.65rem,2.35vw,2.55rem);line-height:1.05}.s2vocal-panel p,.s2vocal-live-panel p,.s2vocal-final-cta p{margin:0;color:#d2eaf1;line-height:1.65}
.s2vocal-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.s2vocal-benefits div,.s2vocal-steps div{padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(94,235,255,.11)}.s2vocal-benefits strong,.s2vocal-steps strong{display:block;color:#fff;margin-bottom:6px}.s2vocal-benefits span,.s2vocal-steps span{color:#cbe6ee;line-height:1.45}
.s2vocal-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.s2vocal-steps b{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(34,229,255,.10);border:1px solid rgba(94,235,255,.18);color:#bffaff;margin-bottom:10px}

.s2vocal-live-panel{padding:22px}.s2vocal-live-head{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:12px}.s2vocal-live-head a{color:#9bf9ff;font-weight:950}.s2vocal-live-panel iframe{width:100%;height:520px;border:1px solid rgba(94,235,255,.12);border-radius:22px;background:#020d16;margin-top:16px}

.s2vocal-faq{padding:26px;margin-top:24px}.s2vocal-faq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.s2vocal-faq article{padding:17px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(94,235,255,.11)}.s2vocal-faq h3{margin:0 0 8px;color:#fff;font-size:1rem}.s2vocal-faq p{margin:0;color:#cfe7ee;line-height:1.52}

.s2vocal-final-cta{margin-top:24px;padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px}.s2vocal-final-cta .btn{white-space:nowrap}

@media(max-width:1320px){
  .s2vocal-hero-grid,.s2vocal-layout{grid-template-columns:1fr}
  .s2vocal-card-grid,.s2vocal-faq-grid{grid-template-columns:repeat(2,1fr)}
  .s2vocal-feature-strip{grid-template-columns:repeat(2,1fr)}
  .s2vocal-feature-strip>div:nth-child(3){border-left:0;border-top:1px solid rgba(94,235,255,.12)}
  .s2vocal-feature-strip>div:nth-child(4){border-top:1px solid rgba(94,235,255,.12)}
}
@media(max-width:760px){
  .s2vocal-container{width:min(100% - 24px,1640px)}
  .s2vocal-hero{min-height:auto;padding:34px 0}.s2vocal-hero-copy h1{font-size:clamp(2.5rem,12vw,3.9rem)}
  .s2vocal-feature-strip,.s2vocal-card-grid,.s2vocal-faq-grid,.s2vocal-benefits,.s2vocal-steps{grid-template-columns:1fr}
  .s2vocal-feature-strip>div+div{border-left:0;border-top:1px solid rgba(94,235,255,.12)}
  .s2vocal-section-head,.s2vocal-final-cta{display:grid}
  .s2vocal-final-cta .btn,.s2vocal-actions .btn{width:100%}
  .s2vocal-start-card a{grid-template-columns:1fr}
}


/* ==========================================================================
   V22 direct — retire les backgrounds/voiles des heroes de cette page.
   Le seul wallpaper autorisé est le calque global .s2-wallpaper-v22.
   ========================================================================== */

/* Fonds de page/wrappers transparents */
.s2-home-revamp,
.s2-forum-revamp,
.s2-forum-page,
.forum-page,
.topic-page,
.s2-guides-page,
.s2-guide-page,
.s2-guide-view-v5,
.s2-videos-page,
.s2v-page,
.s2v-index-page,
.s2-vocaux-page,
.s2-vocaux-bg,
.s2-intl-guides-bg,
.auth-page,
.auth-shell{
  background:transparent!important;
  background-image:none!important;
}

/* Heroes / bandeaux : aucun background, aucune image, aucun gros voile */
.s2hr-hero-wrap,
.s2fr-hero,
.s2-guides-hero,
.s2g-hero,
.s2g-hero-main,
.s2v-hero,
.s2-videos-hero,
.s2-video-hero-compact,
.s2vocal-hero,
.vocaux-hero,
.s2intl-hero,
.s2intl-article-hero,
.article-hero,
.guide-hero,
.hero,
.forum-hero{
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-bottom:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Pseudos responsables du voile sombre/doublage */
.s2hr-hero-wrap:before,
.s2hr-hero-wrap:after,
.s2hr-hero-wrap::before,
.s2hr-hero-wrap::after,
.s2fr-hero:before,
.s2fr-hero:after,
.s2fr-hero::before,
.s2fr-hero::after,
.s2-guides-hero:before,
.s2-guides-hero:after,
.s2-guides-hero::before,
.s2-guides-hero::after,
.s2g-hero:before,
.s2g-hero:after,
.s2g-hero::before,
.s2g-hero::after,
.s2g-hero-main:before,
.s2g-hero-main:after,
.s2g-hero-main::before,
.s2g-hero-main::after,
.s2v-hero:before,
.s2v-hero:after,
.s2v-hero::before,
.s2v-hero::after,
.s2-videos-hero:before,
.s2-videos-hero:after,
.s2-videos-hero::before,
.s2-videos-hero::after,
.s2-video-hero-compact:before,
.s2-video-hero-compact:after,
.s2-video-hero-compact::before,
.s2-video-hero-compact::after,
.s2vocal-hero:before,
.s2vocal-hero:after,
.s2vocal-hero::before,
.s2vocal-hero::after,
.vocaux-hero:before,
.vocaux-hero:after,
.vocaux-hero::before,
.vocaux-hero::after,
.s2intl-hero:before,
.s2intl-hero:after,
.s2intl-hero::before,
.s2intl-hero::after,
.s2intl-article-hero:before,
.s2intl-article-hero:after,
.s2intl-article-hero::before,
.s2intl-article-hero::after,
.article-hero:before,
.article-hero:after,
.article-hero::before,
.article-hero::after,
.guide-hero:before,
.guide-hero:after,
.guide-hero::before,
.guide-hero::after,
.hero:before,
.hero:after,
.hero::before,
.hero::after,
.forum-hero:before,
.forum-hero:after,
.forum-hero::before,
.forum-hero::after{
  display:none!important;
  content:none!important;
  background:none!important;
  background-image:none!important;
  opacity:0!important;
  filter:none!important;
}

/* Grilles internes : surtout pas de carte globale */
.s2hr-hero-grid,
.s2fr-hero,
.s2g-hero-grid,
.s2v-hero-grid,
.s2vocal-hero-grid,
.hero-grid,
.hero-inner{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Espacement plus propre */
.s2hr-hero-wrap,
.s2fr-hero,
.s2-guides-hero,
.s2v-hero,
.s2vocal-hero,
.vocaux-hero,
.forum-hero,
.hero{
  min-height:auto!important;
  padding-top:clamp(26px,4vw,54px)!important;
  padding-bottom:clamp(24px,3.5vw,48px)!important;
}

/* Voile discret uniquement derrière texte */
.s2hr-hero-copy,
.s2fr-hero-copy,
.s2g-hero-copy,
.s2v-hero-copy,
.s2vocal-hero-copy,
.vocaux-hero-content,
.s2g-hero-main,
.article-hero > div:first-child,
.s2intl-hero > div:first-child,
.s2intl-article-hero > div:first-child,
.hero-content,
.hero-copy,
.forum-hero > div:first-child{
  width:max-content!important;
  max-width:min(940px,100%)!important;
  padding:clamp(13px,1.45vw,20px) clamp(16px,2vw,28px)!important;
  border-radius:20px!important;
  background:linear-gradient(90deg,rgba(0,10,18,.58),rgba(0,10,18,.34) 62%,rgba(0,10,18,.08))!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}

/* Les cartes/panneaux restent lisibles */
.s2fr-panel,
.s2fr-value-strip,
.s2hr-start-panel,
.s2g-rubriques-card,
.s2g-panel,
.s2v-discover-card,
.s2v-panel,
.s2vocal-start-card,
.s2vocal-panel,
.s2vocal-live-panel,
.s2vocal-faq,
.s2vocal-final-cta,
.glass,
.card,
.panel,
.forum-card,
.topic-card,
.guide-card,
.video-card{
  background:
    radial-gradient(circle at 14% -18%,rgba(36,232,255,.075),transparent 34%),
    linear-gradient(180deg,rgba(4,40,56,.72),rgba(0,18,31,.84))!important;
  border-color:rgba(87,232,255,.18)!important;
}

@media(max-width:760px){
  .s2hr-hero-copy,
  .s2fr-hero-copy,
  .s2g-hero-copy,
  .s2v-hero-copy,
  .s2vocal-hero-copy,
  .vocaux-hero-content,
  .s2g-hero-main,
  .article-hero > div:first-child,
  .s2intl-hero > div:first-child,
  .s2intl-article-hero > div:first-child,
  .hero-content,
  .hero-copy,
  .forum-hero > div:first-child{
    width:100%!important;
    padding:14px 15px!important;
    border-radius:18px!important;
  }
}