/* ============================================================
   EchoFirst — page FAQ (héros + 3 présentations commutables)
   À charger après site/echofirst.css. JS : site/faq.js.
   ============================================================ */

/* ---------- héros ---------- */
.qhero{position:relative;overflow:hidden;color:#fff;padding:172px 0 76px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 62%,#16508c 100%);}
.qhero__rings{position:absolute;right:-150px;top:-140px;width:560px;height:560px;pointer-events:none;opacity:.55;}
.qhero__rings svg{width:100%;height:100%;display:block;}
.qhero__rings circle{fill:none;stroke:rgba(79,210,224,.30);stroke-width:1.2;}
@media(prefers-reduced-motion:no-preference){
  .qhero__rings{animation:qRings 9s ease-in-out infinite alternate;}
}
@keyframes qRings{from{transform:scale(1);opacity:.45;}to{transform:scale(1.05);opacity:.65;}}
.qhero__grain{position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.5px);background-size:28px 28px;
  mask-image:radial-gradient(720px 460px at 12% 110%,#000,transparent);
  -webkit-mask-image:radial-gradient(720px 460px at 12% 110%,#000,transparent);}
.qhero .container{position:relative;}
.qhero__kick{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-vif);}
.qhero__kick::before{content:'';width:26px;height:1.5px;background:var(--teal-vif);border-radius:2px;}
.qhero__title{margin-top:22px;font-size:clamp(44px,6vw,84px);font-weight:600;letter-spacing:-.03em;line-height:1.08;color:#fff;}
.qhero__title em{font-style:normal;color:var(--teal-vif);}
body.type-archivo .qhero__title{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.038em;}
.qhero__sub{margin-top:22px;max-width:560px;font-size:clamp(15px,1.25vw,17.5px);font-weight:300;line-height:1.65;color:rgba(255,255,255,.76);}
.qhero__chips{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px;}
.qchip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:30px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.85);font-size:13px;font-weight:500;text-decoration:none;
  transition:background .22s,border-color .22s,color .22s,transform .22s;}
.qchip .n{font-size:10.5px;font-weight:700;color:var(--teal-vif);letter-spacing:.06em;}
.qchip .c{min-width:20px;height:20px;border-radius:20px;background:rgba(79,210,224,.16);color:var(--teal-vif);
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;}
.qchip:hover{background:rgba(255,255,255,.13);border-color:rgba(79,210,224,.5);color:#fff;transform:translateY(-1px);}
.qchip:active{transform:scale(.96);}

/* entrées du héros (body.is-ready via site/motion.js) — caché seulement avec JS (html.js) */
:where(html.js) .qrv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
body.is-ready .qrv{opacity:1;transform:none;}
body.is-ready .qrv.d1{transition-delay:.08s;}
body.is-ready .qrv.d2{transition-delay:.16s;}
body.is-ready .qrv.d3{transition-delay:.24s;}
@media(prefers-reduced-motion:reduce){.qrv{opacity:1!important;transform:none!important;}}
@media print{.qrv{opacity:1!important;transform:none!important;}}

/* ---------- sections ---------- */
.qsec{padding:64px 0 90px;}
.q-cta{padding:0 0 96px;text-align:center;}
.q-cta h2{font-size:clamp(24px,3vw,34px);}
.q-cta p{margin-top:10px;color:var(--grey);font-size:15.5px;font-weight:300;}
.q-btns{margin-top:26px;display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;}
.q-ghost{color:var(--teal-ink);font-size:14.5px;font-weight:600;text-decoration:none;}
.q-ghost:hover{text-decoration:underline;}

/* ============================================================
   Accordéon commun
   ============================================================ */
.qa-q{display:flex;align-items:flex-start;gap:16px;width:100%;text-align:left;background:none;border:none;
  cursor:pointer;font-family:inherit;padding:20px 0;}
.qa-qt{flex:1;font-size:17px;font-weight:600;color:var(--navy);line-height:1.42;text-wrap:pretty;transition:color .2s;}
.qa-q:hover .qa-qt{color:var(--teal-ink);}
.qa-x{flex:none;position:relative;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border);
  transition:transform .3s var(--ease-out),background .25s,border-color .25s;}
.qa-x i{position:absolute;left:50%;top:50%;width:11px;height:1.6px;margin:-.8px 0 0 -5.5px;border-radius:2px;
  background:var(--navy);transition:background .25s;}
.qa-x i:last-child{transform:rotate(90deg);}
.qa.open .qa-x{transform:rotate(45deg);background:var(--navy);border-color:var(--navy);}
.qa.open .qa-x i{background:#fff;}
.qa-q:focus-visible{outline:none;}
.qa-q:focus-visible .qa-x{box-shadow:0 0 0 3px rgba(79,210,224,.5);}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-out);}
.qa.open .qa-a{grid-template-rows:1fr;}
.qa-a__in{overflow:hidden;min-height:0;}
.qa-a__body{padding:2px 46px 24px 0;}
.qa-a__body p{font-size:15px;font-weight:300;line-height:1.72;color:var(--grey);max-width:680px;}
.qa-a__body p+p{margin-top:10px;}
.qa-a__body strong{color:var(--ink);font-weight:600;}
.qa-a__body a{color:var(--teal-ink);font-weight:600;text-decoration:none;}
.qa-a__body a:hover{text-decoration:underline;}
@media print{.qa .qa-a{grid-template-rows:1fr!important;}.qa-x{display:none;}}

/* apparition au montage (stagger via --d, rejoué au changement de design) */
@media(prefers-reduced-motion:no-preference){
  .faq .qa,.faq .sn-theme,.faq .ed-theme,.faq .som-ghead,.faq .som-rail{
    animation:qaIn .55s var(--ease-out) both;animation-delay:calc(var(--d,0)*.04s);}
}
@keyframes qaIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ancres sous la nav fixe */
.faq [id^="t-"]{scroll-margin-top:112px;}

/* ============================================================
   1 · SONAR — panneau navy, ligne d'écho verticale
   ============================================================ */
.faq--sonar{position:relative;overflow:hidden;border-radius:28px;background:var(--navy-dark);color:#fff;
  padding:clamp(34px,4.5vw,60px);}
.faq--sonar::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 440px at 90% 4%,rgba(79,210,224,.12),transparent 62%),
             radial-gradient(520px 420px at 2% 100%,rgba(16,57,110,.55),transparent 70%),
             radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);
  background-size:auto,auto,26px 26px;}
.sn-wrap{position:relative;padding-left:48px;display:flex;flex-direction:column;}
.sn-line{position:absolute;left:14px;top:8px;bottom:8px;width:1.5px;
  background:linear-gradient(180deg,transparent,rgba(79,210,224,.42) 6%,rgba(79,210,224,.42) 94%,transparent);}
.sn-line i{position:absolute;left:50%;width:7px;height:64px;margin-left:-3.5px;border-radius:8px;
  background:linear-gradient(180deg,transparent,rgba(79,210,224,.95),transparent);filter:blur(1px);
  top:-70px;opacity:0;}
@media(prefers-reduced-motion:no-preference){
  .sn-line i{animation:snBeam 7s cubic-bezier(.45,.05,.55,.95) infinite;}
}
@keyframes snBeam{0%{top:-8%;opacity:0;}10%{opacity:1;}88%{opacity:1;}100%{top:104%;opacity:0;}}
.sn-theme{position:relative;display:flex;align-items:center;gap:12px;margin:34px 0 6px;}
.sn-theme:first-of-type{margin-top:2px;}
.sn-theme::before{content:'';position:absolute;left:-38px;top:50%;width:9px;height:9px;margin-top:-4.5px;
  border-radius:50%;background:var(--teal-vif);box-shadow:0 0 0 4px rgba(79,210,224,.16),0 0 14px rgba(79,210,224,.55);}
.sn-theme .tnum{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--teal-vif);}
.sn-theme h2{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;}
.qa.sn{position:relative;margin-top:12px;border-radius:18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);padding:2px 22px;transition:background .25s,border-color .25s;}
.qa.sn:hover{background:rgba(255,255,255,.075);}
.qa.sn.open{background:rgba(255,255,255,.07);border-color:rgba(79,210,224,.4);}
.qa.sn .qa-q{padding:18px 0;}
.qa.sn .qa-qt{color:#fff;font-size:16.5px;}
.qa.sn .qa-q:hover .qa-qt{color:var(--teal-vif);}
.qa.sn .qa-x{border-color:rgba(255,255,255,.28);}
.qa.sn .qa-x i{background:#fff;}
.qa.sn.open .qa-x{background:var(--teal-vif);border-color:var(--teal-vif);}
.qa.sn.open .qa-x i{background:var(--navy-dark);}
.qa.sn .qa-a__body{padding:0 46px 20px 0;}
.qa.sn .qa-a__body p{color:rgba(255,255,255,.72);}
.qa.sn .qa-a__body strong{color:#fff;}
.qa.sn .qa-a__body a{color:var(--teal-vif);}
.sn-dot{position:absolute;left:-40.5px;top:29px;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.45);box-shadow:0 0 10px rgba(255,255,255,.25);transition:background .25s,box-shadow .25s;}
.qa.sn.open .sn-dot{background:var(--teal-vif);box-shadow:0 0 14px rgba(79,210,224,.8);}
.sn-dot i{position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid var(--teal-vif);opacity:0;}
@media(prefers-reduced-motion:no-preference){
  .qa.sn.open .sn-dot i{animation:snPing 1.1s var(--ease-out);}
}
@keyframes snPing{0%{transform:scale(1);opacity:.9;}100%{transform:scale(4.2);opacity:0;}}
@media(max-width:640px){
  .sn-wrap{padding-left:30px;}
  .sn-line{left:6px;}
  .sn-theme::before{left:-28.5px;}
  .sn-dot{left:-31px;}
  .qa.sn{padding:2px 16px;}
}

/* ============================================================
   2 · SOMMAIRE — rail collant + groupes accordéon
   ============================================================ */
.faq--som{display:grid;grid-template-columns:280px 1fr;gap:clamp(30px,4.5vw,72px);align-items:start;}
@media(max-width:880px){.faq--som{grid-template-columns:1fr;}}
.som-rail{position:sticky;top:104px;display:flex;flex-direction:column;}
@media(max-width:880px){.som-rail{position:static;}}
.som-kick{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 12px 16px;}
.som-nav{display:flex;flex-direction:column;gap:4px;}
.som-link{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;text-decoration:none;
  color:var(--grey);font-size:14px;font-weight:500;transition:background .2s,color .2s;}
.som-link .n{font-size:10.5px;font-weight:700;color:var(--teal);opacity:.75;letter-spacing:.06em;}
.som-link .c{margin-left:auto;min-width:22px;height:22px;border-radius:20px;background:var(--grey-light);
  color:var(--grey);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;
  transition:background .2s,color .2s;}
.som-link:hover{background:var(--grey-light);color:var(--navy);}
.som-link.on{background:var(--tint);color:var(--navy);font-weight:600;}
.som-link.on .c{background:#fff;color:var(--navy);}
.som-help{margin:20px 16px 0;padding:18px;border-radius:16px;border:1px dashed var(--border);
  font-size:13.5px;font-weight:300;color:var(--grey);line-height:1.6;}
.som-help b{display:block;color:var(--navy);font-weight:600;margin-bottom:3px;}
.som-help a{color:var(--teal-ink);font-weight:600;text-decoration:none;}
.som-help a:hover{text-decoration:underline;}
.som-group+.som-group{margin-top:48px;}
.som-ghead{display:flex;align-items:baseline;gap:14px;margin-bottom:4px;}
.som-ghead .n{font-size:12px;font-weight:700;color:var(--teal);letter-spacing:.1em;}
.som-ghead h2{font-size:22px;}
.qa.som-item{border-bottom:1px solid var(--border);}
.qa.som-item:last-child{border-bottom:none;}

/* ============================================================
   3 · ÉDITORIAL — grande typo numérotée
   ============================================================ */
.faq--ed{max-width:980px;}
.ed-theme{display:flex;align-items:center;gap:16px;margin:58px 0 8px;}
.ed-theme:first-child{margin-top:0;}
.ed-theme .n{font-size:12px;font-weight:700;color:var(--teal);letter-spacing:.12em;}
.ed-theme .lb{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);}
.ed-theme i{flex:1;height:1px;background:var(--border);}
.qa.ed-item{border-bottom:1px solid var(--border);}
.qa.ed-item .qa-q{padding:26px 0;align-items:center;gap:clamp(16px,3vw,34px);}
.ed-num{flex:none;width:clamp(52px,7vw,90px);font-size:clamp(30px,4.4vw,56px);font-weight:700;letter-spacing:-.03em;
  line-height:1;color:#DCE6F3;transition:color .3s;}
body.type-archivo .ed-num{font-family:'Archivo',sans-serif;font-weight:800;}
.qa.ed-item .qa-qt{font-size:clamp(19px,2.4vw,31px);font-weight:600;letter-spacing:-.02em;line-height:1.22;}
body.type-archivo .qa.ed-item .qa-qt{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.028em;}
.qa.ed-item:hover .ed-num,.qa.ed-item.open .ed-num{color:var(--teal);}
.qa.ed-item .qa-a__body{padding:0 46px 30px calc(clamp(52px,7vw,90px) + clamp(16px,3vw,34px));}
.qa.ed-item .qa-a__body p{font-size:15.5px;}
@media(max-width:640px){
  .qa.ed-item .qa-a__body{padding-left:0;}
}