/* ============================================================================
   FORMEXA — SECTIONS "THÈME PREMIUM"
   Process · FAQ · Cookie banner · Back-to-top
============================================================================ */

/* ── PROCESS — Comment ça marche ───────────────────────────────────────── */
.process-section{
  padding:96px 0;
  background:linear-gradient(165deg,#071122 0%,#0e2245 55%,#071122 100%);
  position:relative;overflow:hidden;
}
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  position:relative;
}
/* ligne pointillée reliant les étapes (desktop) */
.process-grid::before{
  content:"";position:absolute;top:56px;left:12%;right:12%;height:0;
  border-top:2px dashed rgba(53,197,240,.25);z-index:0;
}
.process-step{
  position:relative;z-index:1;text-align:center;padding:32px 22px 28px;
  border:1.5px solid transparent;border-radius:20px;
  background:
    linear-gradient(#0C1430,#0C1430) padding-box,
    linear-gradient(160deg,var(--pc),rgba(255,255,255,.06) 50%,rgba(255,255,255,.04)) border-box;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s,background .4s;
}
@media (hover: hover) and (pointer: fine){
  .process-step:hover{
    transform:translateY(-7px);
    background:
      linear-gradient(#0C1430,#0C1430) padding-box,
      linear-gradient(160deg,var(--pc),var(--pc) 70%,rgba(255,255,255,.05)) border-box;
    box-shadow:0 28px 58px -32px var(--pc);
  }
}
.step-num{
  position:absolute;top:14px;right:18px;
  font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;
  color:var(--pc);opacity:.18;line-height:1;
}
.step-icon{
  width:56px;height:56px;margin:0 auto 18px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:var(--pc);
  background:color-mix(in srgb,var(--pc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--pc) 30%,transparent);
}
.process-step h3{
  font-family:'Space Grotesk',sans-serif;font-size:1.08rem;color:#fff;margin-bottom:10px;
}
.process-step p{color:rgba(255,255,255,.62);font-size:.88rem;line-height:1.65}
@media(max-width:1000px){
  .process-grid{grid-template-columns:1fr 1fr}
  .process-grid::before{display:none}
}
@media(max-width:560px){.process-grid{grid-template-columns:1fr}}

/* ── FAQ accordéon ─────────────────────────────────────────────────────── */
.faq-section{padding:96px 0;background:#0a1628}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{
  border:1.5px solid transparent;border-radius:16px;overflow:hidden;
  background:
    linear-gradient(#0C1430,#0C1430) padding-box,
    linear-gradient(140deg,rgba(53,197,240,.5),rgba(255,255,255,.07) 46%,rgba(255,255,255,.04)) border-box;
  transition:background .35s,box-shadow .35s;
}
.faq-item.open{
  background:
    linear-gradient(#0C1430,#0C1430) padding-box,
    linear-gradient(140deg,#35C5F0,#1055AA 70%,rgba(255,255,255,.05)) border-box;
  box-shadow:0 22px 48px -30px rgba(53,197,240,.5);
}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border:none;background:transparent;cursor:pointer;text-align:left;
  font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600;color:#fff;
}
.faq-q i{
  color:#35C5F0;font-size:.85rem;flex-shrink:0;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.22,.61,.36,1);
}
.faq-a p{
  padding:0 24px 22px;color:rgba(255,255,255,.66);font-size:.92rem;line-height:1.7;
}
.faq-a a{color:#35C5F0;text-decoration:underline}
@media(prefers-reduced-motion:reduce){
  .faq-a{transition:none}
  .faq-q i{transition:none}
}

/* ── COOKIE BANNER ─────────────────────────────────────────────────────── */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:1500;
  display:none;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  padding:16px 24px;
  background:rgba(7,14,32,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(53,197,240,.25);
  box-shadow:0 -12px 40px rgba(0,0,0,.45);
}
.cookie-banner.visible{display:flex;animation:cookieUp .45s cubic-bezier(.22,.61,.36,1)}
@keyframes cookieUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.cookie-banner.visible{animation:none}}
.cookie-text{
  display:flex;align-items:center;gap:12px;
  color:rgba(255,255,255,.75);font-size:.88rem;line-height:1.5;max-width:640px;
}
.cookie-text i{color:#F9B545;font-size:1.2rem;flex-shrink:0}
.cookie-text a{color:#35C5F0;text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btn{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.85rem;
  padding:10px 20px;border-radius:10px;cursor:pointer;transition:.25s;
}
.cookie-accept{
  background:linear-gradient(135deg,#1055AA,#35C5F0);color:#fff;border:none;
  box-shadow:0 6px 20px rgba(53,197,240,.35);
}
.cookie-accept:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(53,197,240,.5)}
.cookie-decline{
  background:transparent;color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.2);
}
.cookie-decline:hover{color:#fff;border-color:rgba(255,255,255,.4)}

/* ── BACK TO TOP ───────────────────────────────────────────────────────── */
.back-to-top{
  position:fixed;bottom:164px;right:28px;z-index:1100;
  width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(53,197,240,.35);
  background:rgba(12,20,48,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#35C5F0;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,visibility .3s,transform .3s,background .25s,box-shadow .25s;
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{
  background:linear-gradient(135deg,#1055AA,#35C5F0);color:#fff;
  box-shadow:0 10px 30px rgba(53,197,240,.45);
}
@media(max-width:600px){.back-to-top{bottom:150px;right:16px;width:42px;height:42px}}