:root{
  --brand:#f97710;
  --grey:#475052;
  --navText:#0f172a;
}
body {
  background-color: #fcf9f6;
}
.hero h1{ font-size:clamp(28px,5vw,44px); font-weight:800; }
.text-grey{ color:var(--grey)!important; }
.card{ border-radius:16px; }
.btn-brand, .btn-primary{
  background:var(--brand)!important;
  border-color:var(--brand)!important;
  color:#fff!important;
  font-weight:700;
  border-radius:.75rem;
}
.btn-brand:hover{ filter:brightness(1.05); }
.pill-nav{
  background:#fff;
  border-radius:999px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.site-header.is-scrolled .pill-nav{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
.pill-nav .nav-link{
  color:var(--navText);
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
}
.pill-nav .nav-link:hover,
.pill-nav .nav-link:focus{
  color:var(--brand);
  background:none !important;
  text-decoration:none;
}
.pill-nav .nav-link.active{
  color:var(--navText) !important;
}
.btn-cta{
  background:var(--brand);
  color:#111;
  font-weight:700;
  border:none;
  padding:10px 18px;
  border-radius:999px;
}
.btn-cta:hover{ filter:brightness(1.05); }
.navbar-toggler-icon{
  display:inline-block;
  width:1.5em;height:1.5em;
  background-repeat:no-repeat;background-position:center;background-size:100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.contact-card{
  background:#fff;
  border-radius:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.1);
  padding:2.5rem;
  border:1px solid rgba(0,0,0,.06);
}
#contact .form-label{
  font-weight:600;
  color:var(--grey);
}
#contact .form-control,
#contact .form-select{
  border-radius:.75rem;
  border:1px solid rgba(0,0,0,.12);
  padding:.8rem 1rem;
  font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
}
#contact .form-control:focus,
#contact .form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem rgba(249,119,16,.15);
}
#contact .btn-form{
  padding:1rem 1.8rem;
  font-size:1.1rem;
  border-radius:.75rem;
  font-weight:700;
  background:var(--brand);
  border:none;
  color:#fff;
  transition:filter .2s;
}
#contact .btn-form:hover{
  filter:brightness(1.05);
}
.brand-logo{ display:block; height:36px; width:auto; }
.form-box{
  border:none;
  border-radius:14px;
  padding:18px 18px 6px;
  background:#fff;
  position:relative;
}
.form-table{
  width:100%;
  border-collapse:separate;
  border-spacing:14px 10px;
  table-layout:fixed;
}
.form-table th{
  width:16rem;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
  color:var(--grey);
  font-weight:600;
}
.form-table td{ vertical-align:middle; }
.form-table .align-top{ vertical-align:top; }
@media (min-width: 768px){
  .form-table td.input-name { width: 32%; }
  .form-table td.input-email { width: 48%; }
}
@media (max-width: 767.98px){
  .form-table, .form-table tbody, .form-table tr,
  .form-table th, .form-table td{
    display:block; width:100%;
  }
  .form-table{ border-spacing:10px 6px; }
  .form-table th{ margin-top:6px; }
  .form-table td{ margin-bottom:6px; }
}
.form-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn-form{
  padding:.9rem 1.6rem;
  font-size:1.1rem;
  border-radius:.65rem;
  line-height:1.2;
}
.form-actions .btn.btn-brand{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
  font-weight:700;
  border-radius:.75rem;
}
.form-actions .btn.btn-brand:hover{ filter:brightness(1.05); }
.site-header .navbar-nav,
.site-header .navbar-nav .nav-item{
  list-style:none; margin:0; padding:0;
}
.site-header .navbar-nav .nav-item::marker{ content:none; }
.site-header .pill-nav{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto;
  margin:0 auto;
  padding:6px 12px !important;
  border-radius:28px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
}
@media (min-width: 992px){
  .site-header .pill-nav{ max-width:820px; }
}
#mainNav{
  display:flex;
  align-items:center;
  justify-content:center;
}
.site-header #mainNav.navbar-collapse{ flex-grow:0; }
.site-header .navbar-nav{ gap:12px; }
.site-header .pill-nav .nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  line-height:1;
}
.pill-nav .btn-cta{ margin-left:14px; white-space:nowrap; }
@media (max-width: 991.98px){
  #mainNav.collapse.show{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:16px;
    padding:10px;
    margin-top:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
  }
  .pill-nav .nav-link{ display:block; text-align:center; padding:12px; }
  .site-header .navbar-nav{ gap:4px; }
}
.navbar-toggler{ display:none !important; }
.site-header .container{
  display:flex;
  justify-content:center;
}
.site-header .pill-nav{ margin:0; }
.site-header{
  position:sticky;
  top:10px;
  z-index:1030;
}
.pill-nav .nav-link:hover,
.pill-nav .nav-link:focus,
.pill-nav .nav-link.active:hover,
.pill-nav .nav-link.active:focus{
  color: var(--brand) !important;
  background: none !important;
  text-decoration: none;
}
.pill-nav .nav-link.active{
  color: var(--navText) !important;
}
.hero-illu-col{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-illustration{
  display:block;
  width:100%;
  max-width: 420px;
  max-height: 40vh;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
@media (min-width: 576px){
  .hero-illustration{
    max-width: 460px;
    max-height: 45vh;
  }
}
@media (min-width: 992px){
.hero-illustration{
  display:block;
  width:260px;
  height:auto;
  object-fit:contain;
  margin-top:30px;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
}
footer{
  padding-top: 3rem;
  padding-bottom: 2rem;
}
footer nav{
  display: flex;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  margin-top: 1rem;
}
footer nav a{
  color: var(--grey);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease;
}
footer nav a:hover{
  color: var(--brand);
}
.service-card{
  background:#fff;
  border-radius:1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}
#services .col-md-4{
  display:flex;
}
#services .col-md-4 > .service-card{
  width:100%;
}
#services .service-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:260px;
  padding:28px 22px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transition:transform .25s ease, box-shadow .25s ease;
}
#services .service-card:hover{
  transform: translateY(-6px);
  box-shadow:0 16px 32px rgba(0,0,0,.14);
}
#services .service-icon{
  font-size:3.25rem;
  line-height:1;
  margin-bottom:.5rem;
  color:var(--brand);
  display:block;
}
#services .service-card h3{
  margin:10px 0 6px;
  font-weight:700;
}
#services .service-card p{
  margin:0;
  max-width:34ch;
  line-height:1.5;
}
@media (min-width:1200px){
  #services .service-card{ min-height:280px; }
}
#temoignages .col-md-4{ display:flex; }
.review-card{
  width:100%;
  background:#fff;
  border-radius:1rem;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  text-align:left;
  transition:transform .25s ease, box-shadow .25s ease;
}
.review-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(0,0,0,.14);
}
.review-head{
  display:flex; align-items:center; gap:12px;
}
.review-avatar{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, #ffe6d4, #fff);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#f97710;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.review-name{ font-weight:700; margin:0; }
.review-badge{
  font-size:.85rem; padding:.2rem .5rem; border-radius:999px;
  background:#fff6f0; color:#b8550b; border:1px solid #ffd9be;
}
.review-text{ margin:0; color:#333; line-height:1.55; }
.review-quote{
  color:#f2a36e; font-size:1.2rem; margin-right:.35rem; vertical-align:text-top;
}
.review-stars{
  display:flex; align-items:center; gap:2px; color:#f7b500;
}
.review-stars .bi{ font-size:1rem; }
.review-meta{ color:var(--grey); font-size:.9rem; }
#temoignages{ background:#faf7f3; }
footer .container{
  justify-content: center !important;
  text-align: center;
}
footer .container > div:first-child{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
h2{
  font-size:clamp(26px,4vw,36px);
  font-weight:800;
  color:var(--navText);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:2rem;
  text-align:center;
  position:relative;
}
h2::after{
  content:"";
  display:block;
  width:40px;
  height:3px;
  margin:12px auto 0;
  background:var(--brand);
  border-radius:2px;
}
#contact .form-table{
  table-layout:auto;
  border-spacing:8px 12px;     
}

#contact .form-table th{
  width:9rem;                   
  padding-right:8px;
  white-space:nowrap;
}

#contact .form-table td.input-name,
#contact .form-table td.input-email{
  width:auto;                  
}

#contact .form-control,
#contact .form-select,
#contact textarea{
  width:100%;                   
}

@media (max-width: 991.98px){
  .navbar-toggler{ display:none !important; }

  #mainNav{
    display:block !important;
    height:auto !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .site-header .pill-nav{
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 14px;
    padding:10px 12px !important;
  }

  .site-header .navbar-nav{
    display:flex !important;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 12px;
    margin:0;
  }
  .site-header .navbar-nav .nav-item{ display:block; }
  .site-header .pill-nav .nav-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    line-height:1;
  }

  .pill-nav .btn-cta{
    margin-left:0;
    order:2;               
  }
}