/* ==========================================================================
   Thirdslot — page FAQ (/faq/)
   Maquette : 2026-10-29 Thirdslot-faqs (1920 px de large). « y » = position dans la maquette
   (le bandeau promo s'ajoute au-dessus ; le header passe sur le haut de page, comme dans la maquette).
   Colonne de contenu : x 240 → 1680 (1440 px). Accordéon : css/faq-acc.css. Images : assets/faq/.
   ========================================================================== */

.page-faq { --fq-ink: #1a1a2e; }

/* Le header est transparent au-dessus du hero, comme dans la maquette */
.page-faq .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.fq { position: relative; margin-top: -88px; overflow-x: clip; }
.fq-wrap h1, .fq-wrap h2 { margin: 0; font-family: var(--font-head); font-weight: 500; color: var(--fq-ink); }
.fq-wrap p { margin: 0; }

/* ---------- Décor (cotes absolues de la maquette) ---------- */
.fq-deco { position: absolute; left: 0; right: 0; top: 0; height: 2300px; pointer-events: none; overflow: hidden; }
.fq-deco img { position: absolute; max-width: none; height: auto; }
.fq-hero-bg { position: absolute; left: 0; right: 0; top: 0; height: 1100px; background: url(/assets/faq/hero-bg.webp) center top / max(1920px, 100%) auto no-repeat; }
/* fond lavande derrière les rubriques 2 et 3 (y 1327 → 2250) */
.fq-sec-bg { position: absolute; left: 0; right: 0; top: 1327px; height: 923px; background: url(/assets/faq/section-bg.webp) center top / max(1920px, 100%) 100% no-repeat; }
.fq-sph-l { left: calc(50% - 1126.4px); top: 677.7px; width: 337px; }
.fq-sph-r { left: calc(50% + 802.7px); top: 612.7px; width: 282px; }
/* soucoupe + faisceau : boîte x 860 → 1700, y −52 → 870 ; cotes internes = x − 860, y + 52 */
.fq-art { position: absolute; left: calc(50% - 100px); top: -52px; width: 840px; height: 922px; }
.fq-beam { left: 140px; top: 262px; width: 480px; }
.fq-dots { left: 340px; top: 170px; width: 406px; }
/* image à filtre d'ombre dans la maquette (invisible dans le rendu Chrome de la maquette) : ombre en CSS */
.fq-ufo { left: 238.8px; top: 0.2px; width: 593.6px; filter: drop-shadow(10px 30px 20px rgba(208, 193, 244, 0.65)); }
/* sphères : exportées avec leur ombre portée (60 px de marge) */
.fq-sph-1 { left: 8.4px; top: 417.9px; width: 225.5px; }
.fq-sph-2 { left: 223.9px; top: 338.4px; width: 198.8px; }
.fq-sph-3 { left: 508px; top: 513.1px; width: 217.7px; }
.fq-sph-4 { left: 475.5px; top: 365.1px; width: 124.2px; }

/* ---------- Colonne (x 240 → 1680) ---------- */
.fq-wrap { position: relative; z-index: 1; width: 1440px; margin: 0 0 0 calc(50% - 720px); }

/* ---------- Hero (pastille y 201.6, titre y 258, sous-titre y 436) ---------- */
.fq-hero { padding-top: 201.6px; }
.fq-pill {
  display: inline-flex; align-items: center; gap: 12px;
  height: 37.3px; padding: 0 20px 0 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #4a46d3 0%, #d085c2 30%, #ddd 80%) border-box;
  box-shadow: 0 8px 16px rgba(218, 218, 232, 0.5);
  font-weight: 500; font-size: 14px; color: var(--fq-ink);
}
.fq-pill img { width: 18px; height: 18px; }
.fq .fq-h1 { margin-top: 19.15px; font-size: 74px; line-height: 74px; font-weight: 600; }
.fq .fq-sub { max-width: 420px; margin-top: 30.4px; font-size: 19px; line-height: 28px; color: #505056; }

/* ---------- Rubriques : sommaire à gauche, questions à droite (x 801.1) ---------- */
.fq-body { display: grid; grid-template-columns: 561.1px 878.9px; align-items: start; margin-top: 114.8px; }
.fq-nav { position: sticky; top: 120px; padding-top: 5.9px; }
.fq-nav ul { margin: 0; padding: 0; list-style: none; }
.fq-nav li + li { margin-top: 23px; }
.fq-nav a {
  position: relative; display: inline-block; vertical-align: top;
  font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 29px; color: #777784;
  transition: color 0.25s ease, font-size 0.3s ease, line-height 0.3s ease, margin 0.3s ease;
}
.fq-nav a:hover { color: #4a46d3; }
/* rubrique en cours : 26 px violet, souligné 2 px (y 649) */
.fq-nav a[aria-current] { margin-bottom: 13.9px; font-size: 26px; line-height: 31px; color: #4a46d3; }
.fq-nav a::after { content: ""; position: absolute; left: 0; top: 34.85px; width: 100%; height: 2px; background: #4a46d3; transform: scaleX(0); transform-origin: left center; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fq-nav a[aria-current]::after { transform: none; }

.fq-h2 { font-size: 38px; line-height: 45px; }
.fq-sec { scroll-margin-top: 120px; }
.fq-sec .fq-acc { margin-top: 35.65px; }
.fq-sec + .fq-sec { margin-top: 98.45px; }

/* ---------- Encadré « Have More Questions? » (y 2496.9, 1440 × 179.8) ---------- */
.fq-band {
  position: relative; height: 179.8px; margin-top: 235.7px;
  border: 1px solid #ededef; border-radius: 20px;
  background: #fff url(/assets/faq/band-bg.webp) 0 0 / 100% 100% no-repeat;
}
.fq-band > * { position: absolute; margin: 0; }
.fq-plane { left: 27.7px; top: -44.2px; width: 226.5px; height: auto; max-width: none; }
.fq-band-text { left: 255.4px; top: 51.9px; }
.fq-wrap .fq-band h2 { font-size: 30px; line-height: 36px; white-space: nowrap; }
.fq-band p { margin-top: 10.25px; font-size: 16px; line-height: 20px; color: #5f5d77; }
.fq-band .btn { right: 60.6px; top: 61.1px; width: 173.2px; justify-content: flex-start; gap: 19.4px; padding: 0 0 0 27.3px; }
/* la bande CTA commence 104.6 px sous l'encadré (y 2781) */
.fq-wrap + .site-cta { margin-top: 104.6px; }

/* ==========================================================================
   Animations (html.anim ; ?noanim les coupe — js/faq.js retire alors la classe anim)
   Hero : body.fq-ready (polices + images chargées) lance l'entrée.
   Blocs : .is-in posé quand ils entrent à l'écran (.fq-nav, .fq-sec, .fq-band).
   Mots des titres découpés par faq.js (.fq-split .w > span, --i).
   ========================================================================== */
@keyframes fqRise   { from { opacity: 0; transform: translateY(28px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fqFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fqWord   { from { transform: translateY(135%) rotate(4deg); } to { transform: none; } }
@keyframes fqPop    { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.12); } 80% { transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
/* la soucoupe arrive du haut à droite, freine, puis plane */
@keyframes fqUfoIn  { 0% { opacity: 0; transform: translate(260px, -220px) rotate(14deg) scale(0.55); filter: drop-shadow(10px 30px 20px rgba(208, 193, 244, 0)) blur(6px); } 65% { opacity: 1; transform: translate(-14px, 10px) rotate(-3deg) scale(1.02); filter: drop-shadow(10px 30px 20px rgba(208, 193, 244, 0.65)) blur(0); } 100% { opacity: 1; transform: none; filter: drop-shadow(10px 30px 20px rgba(208, 193, 244, 0.65)); } }
@keyframes fqUfoIdle { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-14px) rotate(-1.5deg); } 70% { transform: translateY(-6px) rotate(1.2deg); } }
/* faisceau : s'allume depuis la soucoupe, puis respire */
@keyframes fqBeamIn { from { opacity: 0; transform: scaleY(0.2); } to { opacity: 1; transform: none; } }
@keyframes fqBeam   { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes fqFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes fqTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes fqPlaneIn { 0% { opacity: 0; transform: translate(-120px, 70px) rotate(-12deg) scale(0.7); } 70% { opacity: 1; transform: translate(6px, -4px) rotate(2deg) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes fqPlaneIdle { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(4px, -8px) rotate(-2deg); } }
@keyframes fqItem   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- Mots découpés ---- */
.fq-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.fq-split .w > span { display: inline-block; }
.anim .fq-split .w > span { transform: translateY(135%); }

/* ---- Hero ---- */
.fq-sph-1 { --i: 0; --d: 6s; } .fq-sph-2 { --i: 1; --d: 5.2s; } .fq-sph-4 { --i: 2; --d: 4.6s; } .fq-sph-3 { --i: 3; --d: 6.6s; }
.fq-beam { transform-origin: 62% 0; }
.anim .fq-deco img, .anim .fq-hero-bg, .anim .fq-pill, .anim .fq-sub { opacity: 0; }
.anim .fq-ready .fq-hero-bg { animation: fqFade 1.2s ease both; }
.anim .fq-ready .fq-ufo { animation: fqUfoIn 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both, fqUfoIdle 7s ease-in-out 1.7s infinite; }
.anim .fq-ready .fq-beam { animation: fqBeamIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.25s both, fqBeam 4s ease-in-out 2.2s infinite; }
.anim .fq-ready .fq-dots { animation: fqFade 0.8s ease 1.4s both, fqTwinkle 3.2s ease-in-out 2.2s infinite; }
.anim .fq-ready .fq-sph { animation: fqPop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) calc(1.1s + var(--i) * 0.12s) both, fqFloat var(--d) ease-in-out calc(2s + var(--i) * 0.4s) infinite; }
.anim .fq-ready .fq-sph-l, .anim .fq-ready .fq-sph-r { animation: fqFade 1s ease 1s both, fqFloat 8s ease-in-out 2.2s infinite; }
.anim .fq-ready .fq-pill { animation: fqRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
.anim .fq-ready .fq-h1 .w > span { animation: fqWord 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) calc(0.35s + var(--i) * 0.08s) both; }
.anim .fq-ready .fq-sub { animation: fqRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both; }

/* ---- Sommaire et rubriques ---- */
.anim .fq-nav li, .anim .fq-sec .fq-acc, .anim .fq-sec .fq-item { opacity: 0; }
.anim .fq-nav.is-in li { animation: fqRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.1s + var(--i) * 0.08s) both; }
.anim .fq-sec.is-in .fq-h2 .w > span { animation: fqWord 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) calc(0.05s + var(--i) * 0.05s) both; }
.anim .fq-sec.is-in .fq-acc { animation: fqRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.anim .fq-sec.is-in .fq-item { animation: fqItem 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.35s + var(--i) * 0.09s) both; }

/* ---- Encadré contact ---- */
.anim .fq-band, .anim .fq-band > *, .anim .fq-band-text > * { opacity: 0; }
.anim .fq-band.is-in { animation: fqRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .fq-band.is-in .fq-plane { animation: fqPlaneIn 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both, fqPlaneIdle 5s ease-in-out 1.6s infinite; }
.anim .fq-band.is-in .fq-band-text { opacity: 1; }
.anim .fq-band.is-in h2, .anim .fq-band.is-in p { animation: fqRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.3s + var(--i) * 0.1s) both; }
.anim .fq-band.is-in .btn { animation: fqRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both; }

/* ---- ?noanim : état final direct (faq.js retire aussi la classe anim) ---- */
.no-anim .fq-deco img, .no-anim .fq-hero-bg, .no-anim .fq-pill, .no-anim .fq-sub, .no-anim .fq-nav li, .no-anim .fq-sec .fq-acc, .no-anim .fq-sec .fq-item,
.no-anim .fq-band, .no-anim .fq-band > *, .no-anim .fq-band-text > * { opacity: 1 !important; animation: none !important; }
.no-anim .fq-split .w > span { transform: none !important; animation: none !important; }

/* ==========================================================================
   Écrans plus étroits que la maquette (variables posées par faq.js :
   --k = (largeur − 48) / 1440 pour réduire la colonne d'un bloc entre 1300 et 1499 px ;
   --ka = réduction de la soucoupe et de son décor sous 1300 px)
   ========================================================================== */
@media (max-width: 1499px) and (min-width: 1300px) {
  .fq-wrap { zoom: var(--k, 1); }
  .fq-art { left: auto; right: 0; }
}
@media (max-width: 1299px) {
  .fq-wrap { width: auto; margin: 0 24px; }
  .fq-art { left: auto; right: -40px; zoom: var(--ka, 1); }
  .fq-sph-l, .fq-sph-r { display: none; }
  .fq-body { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); column-gap: 48px; }
  .fq-nav a { font-size: 21px; line-height: 27px; }
  .fq-nav a[aria-current] { margin-bottom: 10px; font-size: 22px; line-height: 28px; }
  .fq-nav a::after { top: 31px; }
  .fq-band { height: auto; min-height: 179.8px; display: flex; align-items: center; gap: 12px 32px; padding: 32px 40px 32px 255.4px; }
  .fq-band > * { position: static; }
  .fq-plane { position: absolute; }
  .fq-band .fq-band-text { flex: 1; }
  .fq-wrap .fq-band h2 { white-space: normal; }
  .fq-band .btn { flex: none; margin-left: auto; }
}
@media (max-width: 1099px) {
  /* hero empilé : la soucoupe au-dessus du titre */
  .fq-art { left: 50%; right: auto; translate: -50% 0; top: 20px; }
  .fq-hero { padding-top: calc(88px + 520px * var(--ka, 1)); text-align: center; }
  .fq .fq-h1 { font-size: clamp(42px, 7vw, 74px); line-height: 1; }
  .fq .fq-sub { max-width: 520px; margin: 24px auto 0; font-size: 18px; line-height: 27px; }
  .fq-body { display: block; margin-top: 80px; }
  /* sommaire en ligne au-dessus des rubriques */
  .fq-nav { position: static; padding: 0; }
  .fq-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
  .fq-nav li + li { margin-top: 0; }
  .fq-nav a, .fq-nav a[aria-current] { margin-bottom: 0; font-size: 18px; line-height: 30px; }
  .fq-nav a::after { top: 30px; }
  .fq-main { margin-top: 56px; }
  .fq-h2 { font-size: clamp(28px, 4.4vw, 38px); line-height: 1.2; }
  .fq-sec .fq-acc { margin-top: 24px; }
  .fq-sec + .fq-sec { margin-top: 72px; }
  .fq-band { margin-top: 140px; }
  .fq-wrap + .site-cta { margin-top: 96px; }
}
@media (max-width: 899px) {
  .fq-band { flex-direction: column; align-items: flex-start; padding: 132px 28px 32px; }
  .fq-plane { left: 16px; top: -40px; width: 180px; }
  .fq-band .btn { margin-left: 0; }
}
@media (max-width: 699px) {
  .fq-wrap { margin: 0 16px; }
  .fq-nav ul { justify-content: flex-start; gap: 4px 18px; }
  .fq-nav a, .fq-nav a[aria-current] { font-size: 16px; }
  .fq-band { padding: 120px 20px 28px; }
  .fq-wrap .fq-band h2 { font-size: 26px; line-height: 32px; }
}