/* ==========================================================================
   Correctif final FAQ/Bugs FR EN ES
   Objectif : même haut de page que les articles normaux
   ========================================================================== */

/* Neutralise les anciens heroes trop gros EN/ES */
html body .s2intl-page .s2intl-article-hero.s2intl-article-hero.s2intl-article-hero,
html body .s2intl-page .s2intl-article-hero-frlike.s2intl-article-hero-frlike,
html body .s2intl-page .s2intl-article-hero-frclean.s2intl-article-hero-frclean{
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  margin-left:0!important;
  margin-right:0!important;
  padding:28px 0 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Neutralise les heroes FR FAQ/Bugs */
html body .s2faq-page .s2faq-hero.s2faq-hero,
html body .s2bug-page .s2bug-hero.s2bug-hero{
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:28px 0 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Grille / container : on revient à un bloc simple comme article normal */
html body .s2intl-page .s2intl-article-hero-grid.s2intl-article-hero-grid,
html body .s2faq-page .s2faq-hero-grid.s2faq-hero-grid,
html body .s2bug-page .s2bug-hero-grid.s2bug-hero-grid{
  display:block!important;
  width:min(1180px,calc(100% - 28px))!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:0!important;
  grid-template-columns:none!important;
}

/* Bloc titre : même logique que .s2g-hero-main */
html body .s2intl-page .s2intl-article-hero-grid > div:first-child,
html body .s2intl-page .s2intl-article-hero-copy.s2intl-article-hero-copy,
html body .s2faq-page .s2faq-hero-copy.s2faq-hero-copy,
html body .s2bug-page .s2bug-hero-copy.s2bug-hero-copy{
  display:block!important;
  width:max-content!important;
  max-width:min(940px,100%)!important;
  margin:0!important;
  padding:clamp(13px,1.45vw,20px) clamp(16px,2vw,28px)!important;
  border-radius:20px!important;
  background:linear-gradient(90deg,rgba(0,10,18,.62),rgba(0,10,18,.38) 62%,rgba(0,10,18,.12))!important;
  box-shadow:0 12px 34px rgba(0,0,0,.20)!important;
  border:1px solid rgba(91,235,255,.08)!important;
}

/* On masque les cartes de droite qui cassent la mise en page */
html body .s2intl-page .s2intl-side-card.s2intl-side-card,
html body .s2faq-page .s2faq-summary-card.s2faq-summary-card,
html body .s2bug-page .s2bug-summary-card.s2bug-summary-card{
  display:none!important;
}

/* Titres */
html body .s2intl-page .s2intl-article-hero h1,
html body .s2faq-page .s2faq-hero h1,
html body .s2bug-page .s2bug-hero h1{
  margin:10px 0 12px!important;
  max-width:920px!important;
  font-size:clamp(34px,4.2vw,58px)!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  text-wrap:balance!important;
}

/* Intro */
html body .s2intl-page .s2intl-article-hero p,
html body .s2faq-page .s2faq-hero p,
html body .s2bug-page .s2bug-hero p{
  max-width:860px!important;
  margin:0!important;
  line-height:1.62!important;
}

/* Boutons normaux */
html body .s2intl-page .s2intl-article-actions,
html body .s2faq-page .s2faq-hero-actions,
html body .s2bug-page .s2bug-hero-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:16px!important;
}

/* Drapeaux : on ne dessine plus des flags moches en CSS, on utilise les emojis natifs */
html body .s2intl-lang-switch,
html body .s2intl-fr-switch,
html body .s2-guide-flag-switch{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:16px!important;
}

html body .s2intl-lang-switch a,
html body .s2intl-fr-switch a,
html body .s2-guide-flag-switch a{
  width:54px!important;
  height:44px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:15px!important;
  border:1px solid rgba(91,235,255,.34)!important;
  background:rgba(0,23,35,.72)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.20)!important;
  color:transparent!important;
  font-size:0!important;
  line-height:1!important;
  text-decoration:none!important;
  overflow:hidden!important;
  position:relative!important;
}

/* Cache tout le texte interne mais affiche un drapeau via ::before */
html body .s2intl-lang-switch a > *,
html body .s2intl-fr-switch a > *,
html body .s2-guide-flag-switch a > *{
  visibility:hidden!important;
}

html body .s2intl-lang-switch a::before,
html body .s2intl-fr-switch a::before,
html body .s2-guide-flag-switch a::before{
  visibility:visible!important;
  display:block!important;
  font-size:27px!important;
  line-height:1!important;
  color:initial!important;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))!important;
}

/* Détection des langues par URL */
html body .s2intl-lang-switch a[href*="/en/"]::before,
html body .s2intl-fr-switch a[href*="/en/"]::before,
html body .s2-guide-flag-switch a[href*="/en/"]::before{
  content:"🇬🇧";
}

html body .s2intl-lang-switch a[href*="/es/"]::before,
html body .s2intl-fr-switch a[href*="/es/"]::before,
html body .s2-guide-flag-switch a[href*="/es/"]::before{
  content:"🇪🇸";
}

html body .s2intl-lang-switch a:not([href*="/en/"]):not([href*="/es/"])::before,
html body .s2intl-fr-switch a:not([href*="/en/"]):not([href*="/es/"])::before,
html body .s2-guide-flag-switch a:not([href*="/en/"]):not([href*="/es/"])::before{
  content:"🇫🇷";
}

html body .s2intl-lang-switch a.is-active,
html body .s2intl-fr-switch a.is-active,
html body .s2-guide-flag-switch a.is-active{
  border-color:rgba(37,231,255,.9)!important;
  background:rgba(29,213,238,.20)!important;
  box-shadow:0 0 0 3px rgba(37,231,255,.12),0 10px 26px rgba(0,0,0,.24)!important;
}

/* Images article : moins énorme, plus propre */
html body .s2g-cover,
html body .s2-static-guide-cover,
html body .s2intl-article-cover,
html body .article-cover{
  width:min(1040px,calc(100% - 28px))!important;
  max-width:1040px!important;
  margin:18px auto 26px!important;
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(91,235,255,.22)!important;
  background:rgba(0,18,30,.58)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.22)!important;
}

html body .s2g-cover img,
html body .s2-static-guide-cover img,
html body .s2intl-article-cover img,
html body .article-cover img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:500px!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
}

/* Mobile */
@media(max-width:760px){
  html body .s2intl-page .s2intl-article-hero-grid > div:first-child,
  html body .s2intl-page .s2intl-article-hero-copy.s2intl-article-hero-copy,
  html body .s2faq-page .s2faq-hero-copy.s2faq-hero-copy,
  html body .s2bug-page .s2bug-hero-copy.s2bug-hero-copy{
    width:100%!important;
  }

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

  html body .s2g-cover,
  html body .s2-static-guide-cover,
  html body .s2intl-article-cover,
  html body .article-cover{
    border-radius:18px!important;
    margin-top:14px!important;
  }
}