.page-faq {
  --faq-night: #080a0e;
  --faq-deep: #0d1118;
  --faq-pearl: #eeece7;
  --faq-silver: #b8c0cc;
  color: rgba(255, 255, 255, 0.86);
  background: var(--faq-night);
}

.faq-hero {
  position: relative;
  display: grid;
  min-height: min(860px, 100svh);
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
  align-items: center;
  gap: clamp(40px, 7vw, 130px);
  padding: calc(var(--header-h) + 68px) clamp(38px, 7vw, 132px) 76px;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 46%, rgba(113, 128, 154, 0.15), transparent 30%),
    linear-gradient(135deg, #07090d, #0d1118 58%, #080a0e);
}

.faq-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 790px;
}

.faq-hero h1 {
  margin: 18px 0 26px;
  color: #f4f2ee;
  font-family: var(--sans);
  font-size: clamp(46px, 5vw, 82px);
  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.052em;
}

.faq-hero h1 em {
  color: var(--faq-silver);
  font-family: var(--serif);
  font-weight: 300;
}

.faq-hero-copy > p:not(.section-label) {
  max-width: 670px;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(16px, 1.15vw, 19px);
}

.faq-hero .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 32px;
}

.faq-sky {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 9% 18%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 10%, rgba(255, 255, 255, 0.42) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 48% 27%, rgba(255, 255, 255, 0.56) 0 1px, transparent 1.5px),
    radial-gradient(circle at 77% 14%, rgba(255, 255, 255, 0.66) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 92% 36%, rgba(255, 255, 255, 0.4) 0 1px, transparent 1.5px);
}

.faq-sky i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px #fff;
  animation: faqTwinkle 3.5s ease-in-out infinite alternate;
}

.faq-sky i:nth-child(1) { top: 17%; left: 12%; }
.faq-sky i:nth-child(2) { top: 11%; left: 53%; animation-delay: -1.4s; }
.faq-sky i:nth-child(3) { top: 30%; right: 9%; animation-delay: -2.2s; }
.faq-sky b { position: absolute; top: 19%; right: 22%; width: 120px; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8)); transform: rotate(-24deg); animation: faqShooting 8s ease-in infinite; }

@keyframes faqTwinkle { from { opacity: 0.25; transform: scale(0.7); } to { opacity: 1; transform: scale(1.2); } }
@keyframes faqShooting { 0%, 72% { opacity: 0; transform: rotate(-24deg) translateX(-130px); } 76% { opacity: 0.9; } 86%, 100% { opacity: 0; transform: rotate(-24deg) translateX(170px); } }

.answer-orbit {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(36vw, 520px);
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
}

.answer-orbit i {
  position: absolute;
  border: 1px solid rgba(184, 192, 204, 0.26);
  border-radius: 50%;
}

.answer-orbit i:nth-child(1) { width: 100%; height: 100%; }
.answer-orbit i:nth-child(2) { width: 73%; height: 73%; border-style: dashed; animation: faqSpin 32s linear infinite; }
.answer-orbit i:nth-child(3) { width: 45%; height: 45%; box-shadow: 0 0 70px rgba(113, 128, 154, 0.18); }
.answer-orbit::before,
.answer-orbit::after { position: absolute; background: rgba(184, 192, 204, 0.2); content: ""; }
.answer-orbit::before { width: 112%; height: 1px; }
.answer-orbit::after { width: 1px; height: 112%; }
.answer-orbit > span { position: relative; z-index: 2; color: #eef1f6; font-family: var(--serif); font-size: clamp(90px, 10vw, 160px); font-weight: 300; line-height: 1; }
.answer-orbit > small { position: absolute; z-index: 2; right: 6%; bottom: 16%; padding: 12px 15px; border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.62); background: rgba(8, 10, 14, 0.72); font-size: 8px; letter-spacing: 0.15em; text-align: center; text-transform: uppercase; }
@keyframes faqSpin { to { transform: rotate(360deg); } }

.faq-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: #0b0e13;
}

.faq-proof article {
  min-height: 100px;
  padding: 24px clamp(20px, 3vw, 48px);
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}

.faq-proof article:last-child { border-right: 0; }
.faq-proof small,
.faq-proof strong { display: block; }
.faq-proof small { margin-bottom: 5px; color: var(--faq-silver); font-size: 8px; letter-spacing: 0.17em; text-transform: uppercase; }
.faq-proof strong { color: rgba(255, 255, 255, 0.8); font-family: var(--serif); font-size: clamp(20px, 1.7vw, 28px); font-weight: 300; }

.answer-paths,
.faq-center {
  color: var(--ink);
  background: var(--faq-pearl);
}

.compact-heading {
  max-width: 1000px;
  margin: 0 auto 46px;
  text-align: center;
}

.compact-heading h2,
.faq-center-heading h2 {
  margin: 14px 0 18px;
  color: #11141a;
  font-family: var(--sans);
  font-size: clamp(39px, 4vw, 68px);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -0.046em;
}

.compact-heading h2 em,
.faq-center-heading h2 em {
  color: #667286;
  font-family: var(--serif);
  font-weight: 300;
}

.answer-paths {
  padding-right: max(var(--page-x), 7vw);
  padding-left: max(var(--page-x), 7vw);
}

.answer-path-grid {
  display: grid;
  max-width: 1220px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  border: 1px solid rgba(17, 20, 26, 0.18);
}
.answer-path-grid a:nth-child(3n) { border-right: 0; }
.answer-path-grid a:nth-child(-n+3) { border-bottom: 1px solid rgba(17, 20, 26, 0.18); }

.answer-path-grid a {
  display: flex;
  min-height: 225px;
  flex-direction: column;
  padding: 30px;
  border-right: 1px solid rgba(17, 20, 26, 0.18);
  background: rgba(255, 255, 255, 0.18);
  transition: color 0.3s ease, background 0.3s ease, transform 0.35s var(--ease);
}

.answer-path-grid a:last-child { border-right: 0; }
.answer-path-grid a:hover { z-index: 2; color: #fff; background: #151a23; transform: translateY(-6px); }
.answer-path-grid small { color: #747c89; font-size: 9px; letter-spacing: 0.16em; }
.answer-path-grid strong { margin: auto 0 18px; font-family: var(--serif); font-size: clamp(27px, 2.2vw, 38px); font-weight: 400; line-height: 1.02; }
.answer-path-grid span { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }

.faq-center {
  padding: clamp(86px, 10vw, 150px) max(var(--page-x), 6vw);
  border-top: 1px solid rgba(17, 20, 26, 0.14);
}

.faq-center-heading {
  max-width: 850px;
  margin: 0 auto 42px;
  text-align: center;
}

.faq-center-heading > p:last-child { max-width: 640px; margin: 0 auto; color: #666a72; }

.faq-tools {
  position: sticky;
  z-index: 20;
  top: var(--header-h);
  max-width: 1220px;
  padding: 14px;
  margin: 0 auto 46px;
  border: 1px solid rgba(17, 20, 26, 0.18);
  background: rgba(238, 236, 231, 0.94);
  box-shadow: 0 14px 40px rgba(17, 20, 26, 0.08);
  backdrop-filter: blur(14px);
}

.faq-search {
  position: relative;
  display: block;
}

.faq-search input {
  width: 100%;
  min-height: 56px;
  padding: 12px 52px 12px 20px;
  border: 1px solid rgba(17, 20, 26, 0.18);
  border-radius: 0;
  color: #171a20;
  background: rgba(255, 255, 255, 0.58);
  outline: none;
}

.faq-search input:focus { border-color: #657185; box-shadow: inset 0 0 0 1px #657185; }
.faq-search i { position: absolute; top: 50%; right: 20px; color: #6b7483; font-family: var(--serif); font-size: 27px; font-style: normal; transform: translateY(-50%); }

.faq-filters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 10px;
}

.faq-filters button {
  min-height: 42px;
  border: 0;
  border-right: 1px solid rgba(17, 20, 26, 0.16);
  color: #60656e;
  background: transparent;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.faq-filters button:last-child { border-right: 0; }
.faq-filters button:hover,
.faq-filters button.is-active { color: #fff; background: #171b23; }

.faq-groups {
  max-width: 1220px;
  margin: 0 auto;
}

.faq-group {
  display: grid;
  grid-template-columns: minmax(240px, 0.36fr) minmax(0, 0.64fr);
  gap: clamp(34px, 6vw, 90px);
  padding: 56px 0;
  border-top: 1px solid rgba(17, 20, 26, 0.18);
}

.faq-group[hidden],
.faq-accordion details[hidden] { display: none; }
.faq-group-title { align-self: start; }
.faq-group-title > span { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 22px; border: 1px solid #8d96a5; border-radius: 50%; color: #566175; font-size: 9px; }
.faq-group-title h3 { margin: 0 0 12px; color: #1c2027; font-family: var(--serif); font-size: clamp(29px, 2.6vw, 42px); font-weight: 400; line-height: 1.04; }
.faq-group-title p { max-width: 320px; margin: 0; color: #6b6f77; font-size: 14px; }
.faq-accordion details { border-bottom: 1px solid rgba(17, 20, 26, 0.18); }
.faq-accordion details:first-child { border-top: 1px solid rgba(17, 20, 26, 0.18); }
.faq-accordion summary { position: relative; padding: 24px 44px 24px 0; color: #252930; font-family: var(--serif); font-size: clamp(21px, 1.65vw, 28px); line-height: 1.15; cursor: pointer; list-style: none; }
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after { position: absolute; top: 22px; right: 4px; color: #647086; font-family: var(--sans); font-size: 18px; content: "+"; }
.faq-accordion details[open] summary::after { content: "−"; }
.faq-accordion p { max-width: 800px; padding: 0 44px 25px 0; margin: 0; color: #5d6169; }
.faq-accordion a { color: #354967; text-decoration: underline; text-decoration-color: rgba(53, 73, 103, 0.34); text-underline-offset: 3px; }
.faq-empty { padding: 46px; border: 1px solid rgba(17, 20, 26, 0.2); color: #4f545d; text-align: center; }
.faq-empty a { text-decoration: underline; }

.faq-guidance {
  padding-right: max(var(--page-x), 7vw);
  padding-left: max(var(--page-x), 7vw);
  background: #090c11;
}

.compact-heading-light h2 { color: #f2f0ec; }
.compact-heading-light h2 em { color: var(--faq-silver); }
.guidance-grid { display: grid; max-width: 1180px; grid-template-columns: repeat(3, 1fr); margin: 0 auto; border: 1px solid rgba(255, 255, 255, 0.16); }
.guidance-grid a { display: flex; min-height: 235px; flex-direction: column; padding: 34px; border-right: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.018); transition: background 0.3s ease, transform 0.35s var(--ease); }
.guidance-grid a:last-child { border-right: 0; }
.guidance-grid a:hover { z-index: 2; background: rgba(184, 192, 204, 0.1); transform: translateY(-6px); }
.guidance-grid small { color: var(--faq-silver); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; }
.guidance-grid strong { margin: auto 0 18px; color: #f2f0ec; font-family: var(--serif); font-size: clamp(29px, 2.5vw, 42px); font-weight: 300; line-height: 1.04; }
.guidance-grid span { color: rgba(255, 255, 255, 0.56); font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; }

.faq-final {
  position: relative;
  display: grid;
  min-height: 560px;
  place-items: center;
  padding: 100px var(--page-x);
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(113, 128, 154, 0.17), transparent 38%), #080a0e;
}

.faq-final::before { position: absolute; inset: 30px; border: 1px solid rgba(255, 255, 255, 0.15); content: ""; }
.faq-final > div:last-child { position: relative; z-index: 2; max-width: 900px; text-align: center; }
.faq-final h2 { margin: 14px 0 20px; color: #f4f2ee; font-family: var(--sans); font-size: clamp(46px, 5.5vw, 84px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.faq-final p { max-width: 680px; margin: 0 auto 28px; color: rgba(255, 255, 255, 0.65); }
.faq-final > div:last-child > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.faq-final small { display: block; margin-top: 22px; color: rgba(255, 255, 255, 0.52); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; }
.faq-sky-final { opacity: 0.8; }

@media (max-width: 1050px) {
  .faq-hero { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); padding-right: 52px; padding-left: 52px; }
  .answer-path-grid { grid-template-columns: repeat(2, 1fr); }
  .answer-path-grid a:nth-child(2) { border-right: 0; }
  .answer-path-grid a:nth-child(3n) { border-right: 1px solid rgba(17, 20, 26, 0.18); }
  .answer-path-grid a:nth-child(2n) { border-right: 0; }
  .answer-path-grid a:nth-child(-n+4) { border-bottom: 1px solid rgba(17, 20, 26, 0.18); }
}

@media (max-width: 820px) {
  .faq-hero { min-height: auto; grid-template-columns: 1fr; padding: calc(var(--header-h) + 60px) var(--page-x) 70px; }
  .answer-orbit { width: min(72vw, 480px); margin: 20px auto; }
  .faq-proof { grid-template-columns: repeat(2, 1fr); }
  .faq-proof article:nth-child(2) { border-right: 0; }
  .faq-proof article:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
  .faq-tools { top: 68px; }
  .faq-group { grid-template-columns: 1fr; gap: 24px; }
  .faq-group-title p { max-width: 520px; }
  .guidance-grid { grid-template-columns: 1fr; }
  .guidance-grid a { min-height: 180px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .guidance-grid a:last-child { border-bottom: 0; }
}

@media (max-width: 600px) {
  .faq-hero { padding-right: 20px; padding-left: 20px; }
  .faq-hero h1 { font-size: clamp(42px, 12vw, 58px); }
  .faq-hero .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .answer-orbit { width: 82vw; }
  .faq-proof { grid-template-columns: 1fr; }
  .faq-proof article { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
  .faq-proof article:last-child { border-bottom: 0; }
  .compact-heading,
  .faq-center-heading { text-align: left; }
  .compact-heading h2,
  .faq-center-heading h2 { font-size: clamp(36px, 10.5vw, 49px); }
  .faq-center-heading > p:last-child { margin-left: 0; }
  .answer-path-grid { grid-template-columns: 1fr; }
  .answer-path-grid a { min-height: 175px; border-right: 0; border-bottom: 1px solid rgba(17, 20, 26, 0.18); }
  .answer-path-grid a:last-child { border-bottom: 0; }
  .faq-center { padding-right: 20px; padding-left: 20px; }
  .faq-tools {
    position: sticky;
    z-index: 30;
    top: 68px;
    padding: 8px;
    margin-right: -8px;
    margin-left: -8px;
    background: rgba(238, 236, 231, 0.98);
    box-shadow: 0 12px 30px rgba(17, 20, 26, 0.16);
  }
  .faq-search input { min-height: 48px; }
  .faq-filters {
    display: flex;
    overflow-x: auto;
    padding-bottom: 0;
    margin-top: 8px;
    scrollbar-width: none;
  }
  .faq-filters::-webkit-scrollbar { display: none; }
  .faq-filters button { min-width: max-content; min-height: 38px; padding: 0 16px; }
  .faq-group { padding: 42px 0; }
  .faq-accordion summary { font-size: 23px; }
  .faq-guidance { padding-right: 20px; padding-left: 20px; }
  .faq-final { min-height: 520px; padding: 86px 22px; }
  .faq-final::before { inset: 14px; }
  .faq-final h2 { font-size: clamp(43px, 12vw, 60px); }
  .faq-final > div:last-child > div { align-items: stretch; flex-direction: column; }
}

@media (max-width: 340px) {
  .faq-tools { top: 83px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-sky i,
  .faq-sky b,
  .answer-orbit i { animation: none; }
  .answer-path-grid a,
  .guidance-grid a { transition: none; }
}

/* V10.3 — continuité commerciale avec le ciel nocturne de la Home */
.faq-center {
  color: #f5f2ec;
  background:
    radial-gradient(circle at 82% 18%, rgba(102, 126, 164, 0.13), transparent 28%),
    linear-gradient(145deg, #11151c, #090b10 58%, #07080b);
}
.faq-center-heading h2,
.faq-group-title h3,
.faq-accordion summary { color: #f7f4ee; }
.faq-center-heading h2 em,
.faq-group-title > span,
.faq-accordion summary::after,
.faq-accordion a { color: #aebbd0; }
.faq-center-heading > p:last-child,
.faq-group-title p,
.faq-accordion p { color: rgba(255, 255, 255, 0.66); }
.faq-group-title > span,
.faq-accordion details,
.faq-accordion details:first-child { border-color: rgba(255, 255, 255, 0.17); }
.faq-accordion a {
  text-decoration-color: rgba(174, 187, 208, 0.45);
}