/* =====================================================================
   SylphCloud — pages Tarifs & Contact
   ===================================================================== */

/* en-tête de page (sous-pages) */
.page-hero{
  position:relative; overflow:hidden;
  padding-top:clamp(140px, 18vh, 200px); padding-bottom:clamp(40px,7vw,80px);
  text-align:center;
}
.page-hero .hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.page-hero .sky{ position:absolute; inset:0; background:radial-gradient(120% 80% at 50% -10%, #fff 0%, var(--paper) 40%, var(--paper-2) 100%); }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ margin-top:18px; }
.page-hero .lede{ margin:22px auto 0; max-width:620px; }
.page-hero .toggle-bill{ display:inline-flex; align-items:center; gap:12px; margin-top:34px; font-size:14px; color:var(--ink-soft); }
.page-hero .badge-soft{ margin-top:26px; }

/* ====================================================== PRICING */
.pricing{ padding-top:clamp(20px,3vw,40px); }
.plans{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:980px; margin:0 auto; align-items:stretch; }
.plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(28px,3vw,40px); box-shadow:var(--shadow-md);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.plan:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.plan.featured{
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, var(--blue), var(--violet)) border-box;
  box-shadow:var(--shadow-lg);
}
.plan.featured::before{
  content:""; position:absolute; inset:0; border-radius:var(--r-xl); pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, var(--violet-tint), transparent 60%); opacity:.6;
}
.plan > *{ position:relative; }
.plan .badge-pop{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:7px; padding:6px 16px; border-radius:999px;
  background:linear-gradient(180deg,var(--violet-400),var(--violet)); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:12.5px; letter-spacing:.02em;
  box-shadow:var(--glow-violet); white-space:nowrap;
}
.plan .badge-pop svg{ width:14px; height:14px; }
.plan-ic{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(160deg,var(--blue-tint),#fff); border:1px solid var(--line); color:var(--blue-600); box-shadow:var(--shadow-sm); }
.plan.featured .plan-ic{ background:linear-gradient(160deg,var(--violet-tint),#fff); color:var(--violet); }
.plan-ic svg{ width:27px; height:27px; }
.plan h2{ font-size:27px; margin-top:20px; }
.plan .sub{ margin-top:8px; color:var(--ink-soft); font-size:15px; min-height:44px; }
.price-row{ display:flex; align-items:flex-end; gap:6px; margin-top:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.price-row .from{ font-size:15px; color:var(--ink-soft); font-weight:500; margin-bottom:10px; }
.price-row .amt{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5vw,56px); letter-spacing:-.03em; line-height:1; color:var(--ink); }
.price-row .cur{ font-size:26px; font-weight:700; }
.sub-price{ margin-top:14px; display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); }
.sub-price .pill{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; background:var(--paper-2); border:1px solid var(--line-soft); font-weight:600; font-size:14px; color:var(--blue-600); }
.sub-price .pill .v{ color:var(--ink); }
.plan .feats{ list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:13px; flex:1; }
.plan .feats li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); line-height:1.4; }
.plan .feats .ck{ width:22px; height:22px; flex-shrink:0; border-radius:7px; display:grid; place-items:center; background:var(--blue-tint); color:var(--blue-600); margin-top:1px; }
.plan.featured .feats .ck{ background:var(--violet-tint); color:var(--violet); }
.plan .feats .ck svg{ width:13px; height:13px; }
.plan .feats li.head{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }
.plan .feats li.head::before{ content:none; }
.plan .btn{ margin-top:28px; width:100%; }

/* bandeau "inclus dans les deux" */
.both{ max-width:980px; margin:34px auto 0; padding:26px 30px; border-radius:var(--r-lg); background:linear-gradient(160deg,#fff,var(--paper-2)); border:1px solid var(--line); display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center; }
.both .lab{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); display:inline-flex; align-items:center; gap:9px; }
.both .lab .dot{ width:8px; height:8px; border-radius:50%; background:var(--violet); }
.both .items{ display:flex; flex-wrap:wrap; gap:10px 14px; }
.both .it{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-2); font-weight:500; }
.both .it svg{ width:15px; height:15px; color:var(--blue-600); }

/* sur-mesure */
.custom{ max-width:980px; margin:22px auto 0; padding:30px 34px; border-radius:var(--r-lg); background:linear-gradient(150deg,#16203c,#0f1730); color:#dde6f6; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }
.custom::before{ content:""; position:absolute; inset:auto -10% -60% auto; width:50%; height:120%; background:radial-gradient(circle at 70% 30%, rgba(122,79,208,.4), transparent 60%); pointer-events:none; }
.custom .t{ position:relative; }
.custom h3{ color:#fff; font-size:21px; }
.custom p{ color:#9fb0cf; font-size:15px; margin-top:6px; max-width:520px; }
.custom .btn{ position:relative; }

/* ====================================================== CONTACT */
.contact-wrap{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,64px); max-width:1080px; margin:0 auto; align-items:start; }
.contact-aside h2{ font-size:clamp(26px,3vw,38px); }
.contact-aside .lede{ margin-top:16px; }
.contact-methods{ margin-top:34px; display:flex; flex-direction:column; gap:14px; }
.cm{ display:flex; align-items:center; gap:16px; padding:18px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .4s, box-shadow .4s, border-color .4s; }
.cm:hover{ transform:translateX(4px); border-color:var(--blue-300); box-shadow:var(--shadow-md); }
.cm .ic{ width:48px; height:48px; flex-shrink:0; border-radius:13px; display:grid; place-items:center; background:linear-gradient(160deg,var(--blue-tint),#fff); border:1px solid var(--line); color:var(--blue-600); }
.cm .ic svg{ width:22px; height:22px; }
.cm .l{ display:block; font-size:13px; color:var(--ink-soft); font-weight:500; }
.cm .v{ font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--ink); margin-top:2px; }
.contact-aside .promise{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.contact-aside .promise .row{ display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--ink-2); }
.contact-aside .promise .row .ck{ width:24px; height:24px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--violet-tint); color:var(--violet); }
.contact-aside .promise .row .ck svg{ width:14px; height:14px; }

.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.form-card::before{ content:""; position:absolute; inset:-40% -20% auto auto; width:50%; height:60%; background:radial-gradient(circle, var(--violet-tint), transparent 70%); opacity:.6; pointer-events:none; }
.form-card > *{ position:relative; }
.form-card h3{ font-size:21px; }
.form-card .fnote{ font-size:14px; color:var(--ink-soft); margin-top:6px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:13.5px; font-weight:600; color:var(--ink-2); font-family:var(--font-display); }
.field label .req{ color:var(--violet); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  padding:13px 15px; border-radius:12px; border:1px solid var(--line); background:var(--paper);
  transition:border-color .25s, box-shadow .25s, background .25s; width:100%;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue-400); background:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--blue-400) 16%, transparent);
}
.chips-pick{ display:flex; flex-wrap:wrap; gap:9px; }
.chips-pick .opt{ position:relative; }
.chips-pick input{ position:absolute; opacity:0; pointer-events:none; }
.chips-pick label{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); cursor:pointer; font-size:14px; font-weight:550; color:var(--ink-2);
  transition:all .2s;
}
.chips-pick label:hover{ border-color:var(--blue-300); }
.chips-pick input:checked + label{ background:linear-gradient(180deg,var(--blue-600),var(--blue)); color:#fff; border-color:transparent; box-shadow:var(--glow-blue); }
.form-card .submit{ margin-top:24px; }
.form-card .submit .btn{ width:100%; }
.form-card .legal{ margin-top:14px; font-size:12.5px; color:var(--ink-faint); text-align:center; line-height:1.5; }
.form-sent{ display:none; flex-direction:column; align-items:center; text-align:center; padding:20px 10px; }
.form-sent.show{ display:flex; }
.form-sent .big-ck{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,var(--blue-500),var(--blue)); color:#fff; box-shadow:var(--glow-blue); }
.form-sent .big-ck svg{ width:30px; height:30px; }
.form-sent h3{ margin-top:18px; font-size:22px; }
.form-sent p{ margin-top:10px; color:var(--ink-soft); font-size:15px; max-width:340px; }

/* responsive */
@media (max-width:840px){
  .plans{ grid-template-columns:1fr; max-width:480px; }
  .plan.featured{ order:-1; }
  .contact-wrap{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .custom{ flex-direction:column; align-items:flex-start; }
}