:root{
  --frx-blue:#0b2f6b;
  --frx-blue-dark:#081f49;
  --frx-red:#e30613;
  --frx-red-dark:#b8050f;
  --frx-light:#f4f7fb;
}
body{ font-family:'Poppins', sans-serif; color:#1c2b3a; background:#fff; }

.devis-hero{
  background:
    linear-gradient(100deg, #f1f4fb 0%, #e8eef8 50%, rgba(241,244,251,.65) 100%),
    url("../images/hero.png") right center / cover no-repeat;
  border-bottom:1px solid #e8eef5;
  padding:2.2rem 0 1.8rem;
}
.devis-breadcrumb{ font-size:.78rem; color:#8492a3; margin-bottom:.75rem; }
.devis-breadcrumb a{ color:var(--frx-blue); text-decoration:none; font-weight:600; }
.devis-hero h1{ font-weight:800; font-size:1.85rem; color:var(--frx-blue); margin:0 0 .4rem; }
.devis-hero h1 span{ color:var(--frx-red); }
.devis-hero p{ margin:0; color:#4c5a6e; font-size:.92rem; max-width:560px; }

.devis-page{ padding:2.25rem 0 3rem; background:#fafbfd; }
.devis-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.75rem;
}
.devis-step{
  background:#fff; border:1px solid #e8eef5; border-radius:10px;
  padding:1.15rem 1.1rem; display:flex; gap:.75rem; align-items:flex-start;
}
.devis-step .num{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--frx-blue); color:#fff; font-weight:800; font-size:.85rem;
  display:inline-flex; align-items:center; justify-content:center;
}
.devis-step strong{
  display:block; font-size:.84rem; color:#16233a; margin-bottom:.2rem;
}
.devis-step span{ font-size:.75rem; color:#6b7a8d; }

.devis-layout{
  display:grid; grid-template-columns:1.4fr .9fr; gap:1.25rem;
}
.devis-form-card,
.devis-side-card{
  background:#fff; border:1px solid #e8eef5; border-radius:10px;
  padding:1.5rem 1.4rem;
}
.devis-form-card h2,
.devis-side-card h2{
  font-size:1.05rem; font-weight:800; color:var(--frx-blue);
  margin:0 0 1.1rem; text-transform:uppercase; letter-spacing:.3px;
}

.devis-form .form-label{
  font-size:.78rem; font-weight:700; color:#16233a; margin-bottom:.35rem;
}
.devis-form .form-control,
.devis-form .form-select{
  border:1px solid #d7dee7; border-radius:6px; font-size:.85rem;
  padding:.65rem .8rem; color:#16233a;
}
.devis-form .form-control:focus,
.devis-form .form-select:focus{
  border-color:var(--frx-blue); box-shadow:0 0 0 .2rem rgba(11,47,107,.12);
}
.devis-form textarea.form-control{ min-height:120px; resize:vertical; }

.service-chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.service-chips label{
  border:1px solid #d7dee7; background:#fff; border-radius:999px;
  padding:.4rem .75rem; font-size:.75rem; font-weight:700; color:#4c5a6e;
  cursor:pointer; user-select:none; transition:all .15s ease;
}
.service-chips input{ display:none; }
.service-chips input:checked + span,
.service-chips label:has(input:checked){
  background:var(--frx-blue); border-color:var(--frx-blue); color:#fff;
}

.devis-submit{
  background:var(--frx-red); color:#fff; border:none; font-weight:800;
  font-size:.85rem; letter-spacing:.4px; padding:.75rem 1.3rem;
  border-radius:6px; display:inline-flex; align-items:center; gap:.4rem;
}
.devis-submit:hover{ background:var(--frx-red-dark); color:#fff; }

.form-success{
  display:none; background:#eef8f0; border:1px solid #c6e6cc; color:#1e6b32;
  border-radius:6px; padding:.85rem 1rem; font-size:.85rem; font-weight:600; margin-bottom:1rem;
}
.form-success.show{ display:block; }

.side-item{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.8rem 0; border-bottom:1px solid #eef1f5;
}
.side-item:last-of-type{ border-bottom:none; }
.side-item i{
  width:36px; height:36px; border-radius:8px; flex-shrink:0;
  background:#f1f4fb; color:var(--frx-blue);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.side-item strong{ display:block; font-size:.84rem; color:#16233a; }
.side-item span{ font-size:.75rem; color:#6b7a8d; }
.side-item a{ color:#16233a; text-decoration:none; font-weight:700; }
.side-item a:hover{ color:var(--frx-red); }

.side-urgent{
  margin-top:1rem; background:var(--frx-blue); color:#fff;
  border-radius:8px; padding:1rem 1.1rem;
}
.side-urgent h3{ font-size:.9rem; font-weight:800; margin:0 0 .35rem; }
.side-urgent p{
  margin:0 0 .75rem; font-size:.8rem; color:rgba(255,255,255,.8);
}
.side-urgent .btn{ font-size:.78rem; }

@media (max-width:991.98px){
  .devis-steps{ grid-template-columns:1fr; }
  .devis-layout{ grid-template-columns:1fr; }
}