/* ==========================================================================
   V53 — recentrage drapeaux + opacité articles
   ========================================================================== */

/* Drapeaux parfaitement centrés dans les boutons */
html body .s2intl-fr-switch a,
html body .s2intl-lang-switch a,
html body .s2-guide-flag-switch a{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:56px!important;
  height:44px!important;
  padding:0!important;
  line-height:0!important;
}

html body .s2intl-fr-switch a::before,
html body .s2intl-lang-switch a::before,
html body .s2-guide-flag-switch a::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:35px!important;
  height:24px!important;
  display:block!important;
  border-radius:5px!important;
  background:url('/assets/img/lang/fr.svg') center center / cover no-repeat!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,0 5px 10px rgba(0,0,0,.28)!important;
  visibility:visible!important;
  opacity:1!important;
  margin:0!important;
}

html body .s2intl-fr-switch a[href*="/en/"]::before,
html body .s2intl-lang-switch a[href*="/en/"]::before,
html body .s2-guide-flag-switch a[href*="/en/"]::before{
  background-image:url('/assets/img/lang/gb.svg')!important;
}

html body .s2intl-fr-switch a[href*="/es/"]::before,
html body .s2intl-lang-switch a[href*="/es/"]::before,
html body .s2-guide-flag-switch a[href*="/es/"]::before{
  background-image:url('/assets/img/lang/es.svg')!important;
}

/* On masque absolument tout le contenu interne des boutons langue */
html body .s2intl-fr-switch a > *,
html body .s2intl-lang-switch a > *,
html body .s2-guide-flag-switch a > *{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

/* Bloc titre un peu plus opaque, mais pas bouché */
html body .s2faq-page .s2faq-hero-copy,
html body .s2bug-page .s2bug-hero-copy,
html body .s2intl-page .s2intl-article-hero-grid > div:first-child,
html body .s2intl-page .s2intl-article-hero-copy,
html body .s2g-hero-main,
html body .s2g-view-hero-copy,
html body .article-hero > div:first-child,
html body .guide-hero > div:first-child{
  background:linear-gradient(
    90deg,
    rgba(0,10,18,.78),
    rgba(0,12,22,.62) 62%,
    rgba(0,12,22,.30)
  )!important;
  border:1px solid rgba(91,235,255,.14)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.26)!important;
}

/* Tous les blocs d’articles un peu plus opaques pour améliorer la lecture */
html body .s2faq-intro-panel,
html body .s2bug-intro-panel,
html body .s2faq-section,
html body .s2bug-section,
html body .s2intl-article-layout,
html body .s2intl-content-card,
html body .s2intl-card,
html body .s2g-article-card,
html body .s2g-content-card,
html body .s2g-view-content,
html body .s2g-view-panel,
html body .s2g-section,
html body .article-card,
html body .article-content,
html body .guide-card,
html body .guide-content,
html body .wiki-card,
html body .forum-card{
  background:rgba(0,18,30,.78)!important;
  border-color:rgba(91,235,255,.18)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.26)!important;
}

/* Les petits blocs internes encore plus lisibles */
html body .s2faq-answer,
html body .s2bug-answer,
html body .s2faq-item,
html body .s2bug-item,
html body .s2intl-note,
html body .s2intl-step,
html body .s2g-tip,
html body .s2g-callout,
html body .article-callout,
html body .guide-callout{
  background:rgba(0,24,38,.84)!important;
  border-color:rgba(91,235,255,.20)!important;
}

/* Images article : un peu plus propres et moins plaquées */
html body .s2-static-guide-cover,
html body .s2intl-article-cover,
html body .s2g-cover,
html body .article-cover{
  background:rgba(0,18,30,.78)!important;
  border-color:rgba(91,235,255,.22)!important;
  box-shadow:0 20px 52px rgba(0,0,0,.30)!important;
}

/* Mobile */
@media(max-width:760px){
  html body .s2intl-fr-switch a,
  html body .s2intl-lang-switch a,
  html body .s2-guide-flag-switch a{
    width:52px!important;
    height:40px!important;
  }

  html body .s2intl-fr-switch a::before,
  html body .s2intl-lang-switch a::before,
  html body .s2-guide-flag-switch a::before{
    width:32px!important;
    height:22px!important;
  }
}