/* Subnautica2.fr — Article guide V6
   Plus visuel, moins pavé : sections importantes en cartes, étapes en petits modules,
   contenu long plus fluide et image de couverture non rognée. */

.s2-guide-view-v5{
  width:min(1120px, calc(100vw - 56px));
  margin:22px auto 58px;
  color:#e9f7f9;
}

.s2-guide-view-v5 a{color:#9af7ff;text-decoration:none}

.s2g-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(67,224,255,.20);
  border-radius:24px;
  background:
    radial-gradient(circle at 14% -35%, rgba(28,220,255,.13), transparent 38%),
    linear-gradient(135deg, rgba(4,48,60,.80), rgba(0,18,29,.90));
  box-shadow:0 16px 42px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
}

.s2g-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(37,232,255,.08), transparent 46%);
}

.s2g-hero-main{
  position:relative;
  z-index:1;
  padding:24px 28px 26px;
}

.s2g-breadcrumb{margin:0 0 11px;font-size:.88rem;color:#b4d9de}

.s2g-type{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(52,229,255,.30);
  background:rgba(15,194,220,.10);
  color:#c8fbff;
  font-size:.70rem;
  font-weight:950;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.s2g-hero h1{
  max-width:900px;
  margin:13px 0 14px;
  color:#f7feff;
  font-size:clamp(1.75rem, 2.55vw, 2.75rem);
  line-height:1.09;
  letter-spacing:.005em;
}

.s2g-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:#bbd7dd;
  font-size:.9rem;
}

.s2g-meta span{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(87,224,255,.13);
  background:rgba(0,19,31,.34);
}

/* Image corrigée : plus de crop qui coupe le texte de la miniature */
.s2g-cover{
  width:min(780px, calc(100% - 120px));
  margin:16px auto 0!important;
  overflow:hidden;
  border:1px solid rgba(70,229,255,.18);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(25,208,255,.08), transparent 54%),
    rgba(0,13,24,.82);
  box-shadow:0 14px 36px rgba(0,0,0,.20);
}

.s2g-cover img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  aspect-ratio:16/6.4!important;
  height:auto!important;
  max-height:230px!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:rgba(0,8,16,.35);
}

.s2g-content{
  width:min(860px,100%);
  margin:16px auto 0;
  padding:14px;
  border:1px solid rgba(62,226,255,.15);
  border-radius:22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(31,220,255,.05), transparent 32%),
    linear-gradient(180deg, rgba(3,34,48,.64), rgba(0,16,28,.84));
  box-shadow:0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}

.s2g-content > p{
  max-width:780px;
  margin:0 0 14px;
  color:#d9e9ed;
  font-size:.99rem;
  line-height:1.72;
}

.s2g-content strong{color:#f7ffff;font-weight:900}
.s2g-content em{color:#c9f8ff}

/* Base section */
.s2g-content .s2-article-section{
  position:relative;
  overflow:hidden;
  margin:12px 0;
  border:1px solid rgba(77,226,255,.13);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(4,39,54,.48), rgba(0,19,32,.62));
  box-shadow:0 8px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.026);
}

.s2g-content .s2-article-section::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg, rgba(37,231,255,.72), rgba(37,231,255,.06));
}

/* Les sections longues deviennent moins "pavés" */
.s2g-content .s2-section-story,
.s2g-content .s2-section-default{
  background:linear-gradient(180deg, rgba(2,31,44,.32), rgba(0,16,28,.42));
  border-color:rgba(74,226,255,.10);
  box-shadow:none;
}

.s2g-content .s2-section-story::before,
.s2g-content .s2-section-default::before{
  width:2px;
  opacity:.55;
}

.s2g-content .s2-article-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-bottom:1px solid rgba(83,222,255,.09);
  background:linear-gradient(90deg, rgba(18,197,221,.08), rgba(6,38,53,.12) 60%, transparent);
}

.s2g-content .s2-article-section-icon{
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:inline-grid;
  place-items:center;
  border-radius:9px;
  color:#dfffff;
  font-size:.76rem;
  font-weight:950;
  border:1px solid rgba(75,231,255,.20);
  background:rgba(25,209,236,.095);
}

.s2g-content .s2-article-section-head h2{
  margin:0!important;
  padding:0!important;
  color:#f3ffff;
  font-size:clamp(1.04rem,1.26vw,1.24rem)!important;
  line-height:1.22;
}

.s2g-content .s2-article-section-body{
  padding:13px 15px 15px;
}

.s2g-content .s2-article-section-body p{
  max-width:780px;
  margin:.25em 0 .82em!important;
  color:#d9e9ed;
  font-size:.97rem;
  line-height:1.72;
}

/* Sous-titres plus discrets */
.s2g-content .s2-article-section-body h3{
  width:auto!important;
  margin:16px 0 8px!important;
  padding:0 0 0 11px!important;
  border-left:3px solid rgba(43,230,255,.62)!important;
  background:transparent!important;
  color:#c7fbff!important;
  font-size:.98rem!important;
  line-height:1.32!important;
  text-transform:none!important;
  letter-spacing:.005em!important;
}
.s2g-content .s2-article-section-body h3::before{display:none!important}

/* Réponse rapide : visible, pas énorme */
.s2g-content .s2-section-quick{
  border-color:rgba(37,234,255,.32);
  background:
    radial-gradient(circle at 96% 0%, rgba(30,229,255,.11), transparent 34%),
    linear-gradient(135deg, rgba(7,55,70,.78), rgba(0,21,35,.82));
  box-shadow:0 12px 34px rgba(0,0,0,.16), inset 0 0 0 1px rgba(34,233,255,.055);
}
.s2g-content .s2-section-quick::before{
  width:4px;
  opacity:1;
  background:linear-gradient(180deg,#25e8ff,#18ffd3);
}
.s2g-content .s2-section-quick .s2-article-section-icon{
  color:#02131b;
  background:linear-gradient(135deg, #2ee9ff, #19ffd1);
  border-color:rgba(157,255,255,.44);
}
.s2g-content .s2-section-quick .s2-article-section-body p:first-child{
  margin-top:0!important;
  color:#f0ffff;
  font-size:1rem;
}

/* Étapes numérotées : petits modules pour casser la répétition */
.s2g-content .s2-section-step{
  border-color:rgba(42,229,255,.16);
  background:
    linear-gradient(90deg, rgba(21,217,245,.08), transparent 34%),
    rgba(2,26,39,.48);
}

.s2g-content .s2-section-step .s2-article-section-head{
  padding:10px 14px;
  background:rgba(15,192,220,.055);
}

.s2g-content .s2-section-step .s2-article-section-icon{
  width:24px;
  height:24px;
  flex-basis:24px;
  border-radius:999px;
  color:#051923;
  background:linear-gradient(135deg,#24e7ff,#1bffd4);
}

.s2g-content .s2-section-step .s2-article-section-body{
  padding:12px 14px 14px;
}

/* Listes */
.s2g-content .post-list{
  margin:10px 0 2px!important;
  padding:0!important;
  list-style:none!important;
  display:grid;
  gap:7px;
}

.s2g-content .post-list li{
  position:relative;
  margin:0!important;
  padding:9px 12px 9px 36px;
  border:1px solid rgba(79,226,255,.11);
  border-radius:13px;
  background:rgba(0,22,35,.30);
  color:#dcecef;
  font-size:.95rem;
  line-height:1.50;
}

.s2g-content .post-list li::before{
  content:"✓";
  position:absolute;
  left:11px;
  top:9px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#031821;
  background:linear-gradient(135deg, #25e8ff, #18ffd3);
  font-size:.66rem;
  font-weight:950;
}

.s2g-content .s2-section-checklist .post-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.s2g-content .s2-section-checklist .post-list li{
  background:linear-gradient(180deg,rgba(6,54,70,.34),rgba(0,22,35,.30));
}

/* À retenir : moins vertical, plus visuel */
.s2g-content .s2-section-takeaway .post-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.s2g-content .s2-section-takeaway .post-list li{
  display:block;
  padding:10px 12px;
  border-radius:13px;
  background:linear-gradient(180deg, rgba(8,57,70,.34), rgba(0,23,36,.34));
}
.s2g-content .s2-section-takeaway .post-list li::before{display:none}
.s2g-content .s2-section-takeaway .post-list li strong{
  display:block;
  margin-bottom:3px;
  color:#aafaff;
}

/* Warning / FAQ / conclusion */
.s2g-content .s2-section-warning{border-color:rgba(255,192,85,.20)}
.s2g-content .s2-section-warning::before{background:linear-gradient(180deg, rgba(255,191,89,.62), rgba(255,191,89,.08))}
.s2g-content .s2-section-warning .s2-article-section-icon{
  color:#ffe7a8;
  border-color:rgba(255,202,105,.26);
  background:rgba(255,179,64,.08);
}

.s2g-content .s2-section-faq .s2-article-section-body h3{
  margin-top:14px!important;
  padding:10px 12px!important;
  border-left:0!important;
  border-radius:13px!important;
  background:rgba(33,225,255,.05)!important;
  border:1px solid rgba(70,222,255,.11)!important;
  color:#f4ffff!important;
  font-size:.97rem!important;
}

.s2g-content .s2-section-conclusion{border-color:rgba(41,255,205,.20)}
.s2g-content .s2-section-conclusion::before{background:linear-gradient(180deg, rgba(41,255,205,.68), rgba(41,255,205,.08))}

/* Citations / quotes plus jolies */
.s2g-content blockquote{
  margin:12px 0!important;
  padding:12px 14px!important;
  border-left:3px solid rgba(35,231,255,.70)!important;
  border-radius:14px!important;
  background:rgba(21,216,244,.07)!important;
  color:#e9fbff!important;
}

/* Images intégrées */
.s2g-content .post-image,
.s2g-content .embed{
  margin:13px 0!important;
  overflow:hidden;
  border:1px solid rgba(74,235,255,.16);
  border-radius:17px;
  background:rgba(0,12,22,.55);
}
.s2g-content .post-image img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  max-height:370px!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0!important;
  border-radius:0!important;
  background:#03111c;
}
.s2g-content .embed iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}

/* Commentaires */
.s2g-comments{
  width:min(860px,100%);
  margin:20px auto 0;
  border:1px solid rgba(62,226,255,.15);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(3,34,48,.66), rgba(0,16,28,.84));
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.s2g-comments-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:17px;
  border-bottom:1px solid rgba(83,222,255,.10);
}
.s2g-comments-head .tag{
  display:inline-flex;
  width:max-content;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(52,229,255,.30);
  background:rgba(15,194,220,.10);
  color:#c8fbff;
  font-size:.72rem;
  font-weight:950;
  line-height:1;
  letter-spacing:.105em;
  text-transform:uppercase;
}
.s2g-comments-head h2{margin:10px 0 4px;font-size:1.32rem;line-height:1.2}
.s2g-comments-head .muted{margin:0;color:#a9c6cc}
.s2g-reply-list{display:grid;gap:14px;padding:16px}
.s2g-reply-card{border-radius:20px!important}
.s2g-reply-box{margin:16px!important;border-radius:20px!important}
.s2g-login-cta{padding:18px}

@media(max-width:760px){
  .s2-guide-view-v5{width:min(100% - 20px,1120px);margin-top:15px}
  .s2g-hero,.s2g-content,.s2g-comments{border-radius:19px}
  .s2g-hero-main{padding:19px 17px}
  .s2g-hero h1{font-size:clamp(1.48rem,7.8vw,2.05rem)}
  .s2g-cover{width:100%;margin-top:12px!important;border-radius:17px}
  .s2g-cover img{aspect-ratio:16/8.5!important;max-height:220px!important}
  .s2g-content{padding:11px}
  .s2g-content .s2-article-section{border-radius:16px;margin:10px 0}
  .s2g-content .s2-article-section-head{padding:10px 12px}
  .s2g-content .s2-article-section-body{padding:12px}
  .s2g-content .s2-section-checklist .post-list,
  .s2g-content .s2-section-takeaway .post-list{grid-template-columns:1fr}
  .s2g-comments-head{display:block}
}


/* V7 — stabilisation lecture articles : plus sobre, moins répétitif */
.s2-guide-view-v5{
  margin-top:22px!important;
}

.s2g-hero{
  max-width:980px;
  margin-inline:auto;
}

.s2g-hero-main{
  padding:22px 26px 24px!important;
}

.s2g-hero h1{
  font-size:clamp(1.7rem,2.35vw,2.55rem)!important;
  max-width:860px!important;
}

.s2g-cover{
  width:min(740px, calc(100% - 100px))!important;
  background:rgba(0,12,22,.72)!important;
}

.s2g-cover img{
  object-fit:contain!important;
  background:#041722!important;
}

.s2g-content{
  max-width:860px!important;
  background:
    linear-gradient(180deg, rgba(3,35,50,.66), rgba(0,17,29,.82))!important;
}

.s2g-content .s2-section-story,
.s2g-content .s2-section-default{
  background:rgba(0,20,32,.34)!important;
  border-color:rgba(86,226,255,.09)!important;
  box-shadow:none!important;
}

.s2g-content .s2-section-step{
  background:
    linear-gradient(90deg, rgba(25,229,255,.075), rgba(0,22,34,.32) 42%, rgba(0,22,34,.36))!important;
}

.s2g-content .s2-article-section-head{
  min-height:48px;
}

.s2g-content .s2-article-section-body p{
  line-height:1.68!important;
}

.s2g-content .s2-section-step .post-list li,
.s2g-content .s2-section-story .post-list li{
  padding-top:8px!important;
  padding-bottom:8px!important;
}

@media(max-width:760px){
  .s2g-cover{
    width:100%!important;
  }
}


/* ==========================================================================
   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;
  }
}