/* FAQ de la sortie de GTA VI (article 3096), maquette « Le centre d'aide » A+ du 4 novembre 2026.
   Gabarit : single-post-gta-vi-faq-sortie-questions-reponses.php. Version claire : bloc « FAQ de la sortie » de light.css. */

.vc-fs { --fs-bg: #121116; --fs-card: #1a1920; --fs-card2: #1c1b23; --fs-line: rgba(255, 255, 255, .09); --fs-txt: #f4f1ec; --fs-mut: rgba(244, 241, 236, .66); --fs-pink: #ff7aa0; --fs-ok: #3cc4e4; --fs-rep: #a98bf5; --fs-rum: #f0b13a; --fs-abs: #8f8c99; --fs-none: #ff9a4d; color: var(--fs-txt); padding-bottom: 60px; }
.vc-fs .fs-wrap { width: min(1280px, 100%); margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-left)); box-sizing: border-box; }

/* Haut de page : image à la une à droite, fondue dans le fond */
.fs-hero { position: relative; overflow: hidden; background-color: #121116; background-image: linear-gradient(90deg, #121116 0%, #121116 32%, rgba(18, 17, 22, .6) 60%, rgba(18, 17, 22, .2) 100%), linear-gradient(0deg, #121116 0%, rgba(18, 17, 22, 0) 45%), var(--fs-hero-img, none); background-size: cover, cover, auto 120%; background-position: center, center, right -80px top 30%; background-repeat: no-repeat; }
.fs-hero-in { padding-top: 34px !important; padding-bottom: 100px !important; display: flex; flex-direction: column; gap: 20px; }
.fs-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .6); }
.fs-crumbs a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.fs-crumbs a:hover { color: #fff; }
.fs-flags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.fs-flag { padding: 6px 13px; border-radius: 999px; font: 700 12.5px/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.fs-flag.is-pink { background: rgba(214, 35, 95, .2); border: 1px solid rgba(214, 35, 95, .55); color: #ff9dbb; }
.fs-flag.is-white { background: #fff; color: #121116; }
.fs-fresh { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.fs-fresh i { width: 8px; height: 8px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 4px rgba(53, 208, 127, .18); }
.fs-title { margin: 0; max-width: 820px; font-family: var(--font-display); font-weight: 400; font-size: clamp(54px, 8.4vw, 112px); line-height: .88; letter-spacing: .5px; color: #fff; text-wrap: balance; }
.fs-g { background: linear-gradient(90deg, #ff4f86, #EA6000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fs-lead { margin: 0; max-width: 620px; font-size: 19px; line-height: 1.55; color: rgba(244, 241, 236, .84); }
.fs-search { display: flex; align-items: center; gap: 12px; max-width: 720px; height: 66px; padding: 0 9px 0 22px; border-radius: 18px; background: rgba(29, 27, 36, .94); border: 1px solid rgba(255, 122, 160, .45); box-shadow: 0 0 0 6px rgba(214, 35, 95, .1), 0 20px 50px rgba(0, 0, 0, .45); box-sizing: border-box; }
.fs-search svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--fs-pink); stroke-width: 2.2; }
.fs-search input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; color: #f4f1ec; font: 500 17px var(--font-body, Barlow, sans-serif); }
.fs-search input:focus { outline: none; }
.fs-search:focus-within { border-color: #ff7aa0; box-shadow: 0 0 0 6px rgba(214, 35, 95, .22), 0 20px 50px rgba(0, 0, 0, .45); }
.fs-search-btn { flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--neon); color: #fff; font: 700 15px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.fs-search-btn:hover { background: #ea2f6d; }
.fs-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: rgba(255, 255, 255, .6); }
.fs-chip { padding: 8px 15px; border: 1px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, .09); color: #f4f1ec; font: 500 14px var(--font-body, Barlow, sans-serif); cursor: pointer; }
.fs-chip:hover, .fs-chip.is-on { border-color: rgba(255, 122, 160, .6); background: rgba(214, 35, 95, .18); }

/* Chiffres clés, posés à cheval sur le haut de page */
.fs-facts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: -60px 0 0; padding: 0; list-style: none; }
.fs-fact { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 22px 22px 20px; border-radius: 20px; background: var(--fs-card2); border: 1px solid var(--fs-line); box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.fs-fact.is-hot { background: linear-gradient(150deg, #e2306b, #b8174f); border-color: transparent; box-shadow: 0 24px 50px rgba(214, 35, 95, .3); }
.fs-fact-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.fs-fact-ic svg { width: 20px; height: 20px; fill: none; stroke-width: 2; }
.fs-fact-ic.is-clock { background: rgba(255, 255, 255, .2); } .fs-fact-ic.is-clock svg { stroke: #fff; }
.fs-fact-ic.is-down { background: rgba(60, 196, 228, .14); } .fs-fact-ic.is-down svg { stroke: #3cc4e4; }
.fs-fact-ic.is-disk { background: rgba(234, 96, 0, .16); } .fs-fact-ic.is-disk svg { stroke: #ff9a4d; }
.fs-fact-ic.is-euro { background: rgba(212, 146, 10, .16); } .fs-fact-ic.is-euro svg { stroke: #f0b13a; }
.fs-fact-k { font: 700 12.5px var(--font-ui); letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.fs-fact.is-hot .fs-fact-k { color: rgba(255, 255, 255, .88); }
.fs-fact-v { font-family: var(--font-display); font-weight: 400; font-size: 50px; line-height: .9; color: #fff; }
.fs-fact-t { font-size: 14px; line-height: 1.45; color: var(--fs-mut); }
.fs-fact.is-hot .fs-fact-t { color: rgba(255, 255, 255, .9); }

/* D'où viennent nos réponses */
.fs-meter { display: flex; align-items: center; gap: 32px; margin: 40px 0 0; padding: 22px 26px; border-radius: 20px; background: #17161c; border: 1px solid rgba(255, 255, 255, .07); }
.fs-meter-copy { flex: 0 0 230px; }
.fs-meter-copy h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; color: #fff; }
.fs-meter-copy p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.fs-meter-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fs-meter-bar { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; }
.fs-meter-bar .is-ok { background: var(--fs-ok); } .fs-meter-bar .is-rep { background: var(--fs-rep); } .fs-meter-bar .is-rum { background: var(--fs-rum); } .fs-meter-bar .is-abs { background: #6b6875; } .fs-meter-bar .is-none { background: var(--fs-none); }
.fs-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.fs-filter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; font: 700 13px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.fs-filter b { color: #fff; font-weight: 700; }
.fs-filter.is-all { color: rgba(255, 255, 255, .8); }
.fs-filter.is-ok { color: var(--fs-ok); } .fs-filter.is-rep { color: var(--fs-rep); } .fs-filter.is-rum { color: var(--fs-rum); } .fs-filter.is-abs { color: #b9b6c2; } .fs-filter.is-none { color: var(--fs-none); }
.fs-filter:hover { background: rgba(255, 255, 255, .06); }
.fs-filter.is-on { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px currentColor; }
.fs-filter:focus-visible, .fs-chip:focus-visible, .fs-search-btn:focus-visible, .fs-q:focus-visible, .fs-side a:focus-visible, .fs-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Sommaire + questions */
.fs-lay { display: flex; gap: 44px; align-items: flex-start; margin-top: 44px; }
.fs-side { position: sticky; top: 88px; flex: 0 0 280px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 16px; border-radius: 20px; background: #17161c; border: 1px solid rgba(255, 255, 255, .07); box-sizing: border-box; scrollbar-width: thin; }
.fs-side-h { margin: 4px 12px 10px; font: 700 12.5px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.fs-side a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: rgba(244, 241, 236, .82); text-decoration: none; font-size: 15px; line-height: 1.25; transition: background .2s; }
.fs-side a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.fs-side a.is-on { background: linear-gradient(90deg, rgba(214, 35, 95, .3), rgba(214, 35, 95, .08)); color: #fff; font-weight: 600; }
.fs-side-n { flex: none; width: 22px; font-family: var(--font-display); font-size: 18px; color: rgba(255, 255, 255, .55); }
.fs-side a.is-on .fs-side-n { color: var(--fs-pink); }
.fs-side-t { flex: 1; min-width: 0; }
.fs-side em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .42); }
.fs-side a.is-on em { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; }
.fs-side a.is-empty { opacity: .35; }

.fs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fs-found { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .6); }
.fs-found:empty { display: none; }
.fs-none { margin: 0; padding: 22px; border-radius: 16px; background: var(--fs-card); font-size: 16px; }
.fs-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.fs-sec + .fs-sec { margin-top: 30px; }
.fs-sec[hidden] { display: none; }
.fs-sec-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 6px; }
.fs-sec-n { font-family: var(--font-display); font-size: 104px; line-height: .78; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .28); }
.fs-sec:first-of-type .fs-sec-n, .fs-sec.is-on .fs-sec-n { -webkit-text-stroke-color: rgba(255, 122, 160, .75); }
.fs-sec-k { margin: 0 0 6px; font: 700 12.5px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.fs-sec-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4vw, 50px); line-height: .95; color: #fff; }
.fs-sec-intro { font-size: 16px; color: var(--fs-mut); }

.fs-item { border-radius: 18px; background: var(--fs-card); border: 1px solid rgba(255, 255, 255, .08); scroll-margin-top: 90px; transition: border-color .2s, background .2s; }
.fs-item[hidden] { display: none; }
.fs-item:hover { border-color: rgba(255, 255, 255, .18); }
.fs-item[open] { background: linear-gradient(160deg, rgba(214, 35, 95, .15), rgba(28, 27, 35, .92) 55%); border-color: rgba(255, 122, 160, .45); }
.fs-q { display: flex; align-items: center; gap: 14px; padding: 19px 22px 19px 26px; cursor: pointer; list-style: none; }
.fs-q::-webkit-details-marker { display: none; }
.fs-q-t { flex: 1; min-width: 0; font: 700 20px/1.25 var(--font-ui); color: #fff; }
.fs-item[open] .fs-q-t { font-size: 23px; }
.fs-badge { flex: none; padding: 4px 11px; border-radius: 999px; border: 1px solid currentColor; font: 700 11px/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.fs-badge.is-ok { color: var(--fs-ok); background: rgba(60, 196, 228, .1); } .fs-badge.is-rep { color: var(--fs-rep); background: rgba(169, 139, 245, .1); } .fs-badge.is-rum { color: var(--fs-rum); background: rgba(240, 177, 58, .1); } .fs-badge.is-abs { color: #b9b6c2; background: rgba(255, 255, 255, .05); } .fs-badge.is-none { color: var(--fs-none); background: rgba(234, 96, 0, .1); }
.fs-toggle { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); transition: background .2s, border-color .2s; }
.fs-toggle::before, .fs-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%); transition: transform .25s; }
.fs-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.fs-item[open] .fs-toggle { background: var(--neon); border-color: var(--neon); }
.fs-item[open] .fs-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.fs-a { padding: 0 26px 22px; font-size: 16.5px; line-height: 1.72; color: rgba(244, 241, 236, .88); }
.fs-a p { margin: 0 0 12px; }
.fs-a p:last-child { margin-bottom: 0; }
.vc-fs .fs-a strong, .vc-fs .fs-extra strong { color: #fff; } /* passe devant .article-body p strong (couleur du texte du thème clair d'origine) */
.vc-fs .fs-a a:not(.fs-cta) { color: #ff7aa0; text-decoration: underline; text-underline-offset: 3px; }
.fs-a .vc-badge { margin-right: 6px; }
.fs-a > p:first-child > .vc-badge:first-child { display: none; } /* le badge de la première phrase est déjà dans la question */
.fs-a-foot { display: flex; justify-content: flex-end; margin-top: 16px !important; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.vc-fs .fs-cta { display: inline-block; padding: 10px 18px; border-radius: 12px; background: #fff; color: #121116; text-decoration: none; font: 700 14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; transition: transform .2s; }
.vc-fs .fs-cta:hover { transform: translateY(-1px); color: #121116; }

/* Sections sans questions, partage, newsletter, commentaires */
.fs-extra { margin-top: 52px; }
.fs-extra h2 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 400; font-size: 42px; line-height: 1; color: #fff; }
.fs-extra.is-unknown .article-body { padding: 22px 26px; border-radius: 18px; border: 1.5px dashed rgba(255, 255, 255, .22); font-size: 16.5px; line-height: 1.7; color: rgba(244, 241, 236, .85); }
.fs-extra.is-sources { margin-top: 36px; }
.fs-extra.is-sources h2 { font-size: 30px; }
.vc-fs .fs-extra.is-sources .article-body, .vc-fs .fs-extra.is-sources .article-body p { font-size: 14.5px; line-height: 1.7; color: rgba(244, 241, 236, .62); }
.fs-extra .article-body p { margin: 0; }
.vc-fs .fs-extra a { color: #ff7aa0; }
.fs-share { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; font: 700 13px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.fs-brief { margin-top: 36px; }
.vc-fs .fs-brief.article-body > .vc-art-brief { max-width: none; margin: 0; } /* passe devant la colonne de 740 px des articles */
.fs-comments { margin-top: 40px; padding: 0; }
.fs-comments .article-body { max-width: 900px; }

@media (max-width: 1080px) {
  .fs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-lay { flex-direction: column; gap: 22px; }
  .fs-side { position: sticky; top: 64px; z-index: 5; flex: none; width: 100%; max-height: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(23, 22, 28, .96); backdrop-filter: blur(8px); }
  .fs-side-h { display: none; }
  .fs-side a { flex: none; padding: 8px 12px; font-size: 14px; white-space: nowrap; }
  .fs-side-n { width: auto; font-size: 16px; }
  .fs-meter { flex-direction: column; align-items: stretch; gap: 14px; }
  .fs-meter-copy { flex: none; }
}
@media (max-width: 600px) {
  .vc-fs .fs-wrap { padding: 0 16px; }
  .fs-hero { background-size: cover, cover, cover; background-position: center, center, 70% 20%; }
  .fs-hero { background-image: linear-gradient(0deg, #121116 8%, rgba(18, 17, 22, .72) 55%, rgba(18, 17, 22, .45) 100%), linear-gradient(0deg, #121116 0%, rgba(18, 17, 22, 0) 45%), var(--fs-hero-img, none); }
  .fs-hero-in { padding-bottom: 84px !important; gap: 16px; }
  .fs-lead { font-size: 17px; }
  .fs-search { height: 58px; padding-left: 16px; border-radius: 16px; }
  .fs-search input { font-size: 16px; }
  .fs-search-btn { display: none; }
  .fs-facts { gap: 10px; }
  .fs-fact { padding: 16px; border-radius: 16px; }
  .fs-fact-ic { width: 34px; height: 34px; }
  .fs-fact-v { font-size: 38px; }
  .fs-fact-t { font-size: 13px; }
  .fs-sec-n { font-size: 72px; }
  .fs-q { flex-wrap: wrap; gap: 10px; padding: 16px 16px 16px 18px; }
  .fs-q-t { flex: 1 1 calc(100% - 50px); font-size: 18px; }
  .fs-item[open] .fs-q-t { font-size: 19px; }
  .fs-badge { order: 3; }
  .fs-toggle { order: 2; width: 30px; height: 30px; }
  .fs-a { padding: 0 18px 18px; font-size: 16px; }
  .fs-a-foot { justify-content: stretch; }
  .vc-fs .fs-cta { width: 100%; text-align: center; box-sizing: border-box; }
  .fs-extra h2 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .fs-item, .fs-toggle::before, .fs-toggle::after, .fs-cta, .fs-filter { transition: none; } }