/* ============================================================
   VARIABLES & BASE
============================================================ */
:root{
  --ips-blue:        #3e5c97;
  --ips-blue-dark:   #2f4a7c;
  --ips-navy:        #12234d;
  --ips-yellow:      #efa717;
  --ips-yellow-dark: #d18f06;
  --ips-light:       #f7f9fc;
  --ips-grey:        #edf1f7;
  --ips-cream:       #f8efdf;
  --ips-text:        #66707d;
}
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ font-family:'Poppins',sans-serif; color:var(--ips-text); font-weight:400; overflow-x:hidden; }
::selection{ background:var(--ips-yellow); color:#fff; }

h1,h2,h3,h5{ font-weight:800; font-style:italic; letter-spacing:-.02em; }
p, li{ font-weight:300; }
h2{ font-size: 40px; }

.text-ips-yellow{ color:var(--ips-yellow)!important; }
.text-ips-blue  { color:var(--ips-blue)!important; }
.text-ips-navy  { color:var(--ips-navy)!important; }
.bg-ips-blue  { background-color:var(--ips-blue)!important; }
.bg-ips-grey  { background-color:var(--ips-grey)!important; }
.bg-ips-light { background-color:var(--ips-light)!important; }
.bg-ips-cream { background-color:var(--ips-cream)!important; }

.accent-bar{ width:135px; height:4.5px; background:var(--ips-yellow); margin-top:.8rem; }
.accent-bar.blue{ background:var(--ips-blue); }

.small{ font-weight: 500!important; color: var(--ips-navy); }

.opacity-75 { opacity : 1!important;
}

.fs-5 { font-size: 1.7rem !important; font-weight:900!important; }

/* ============================================================
   NAVBAR
============================================================ */
#mainNav{ padding:1rem 0; transition:background .3s, padding .3s, box-shadow .3s; }
#mainNav.scrolled{ background:#fff; padding:.5rem 0; box-shadow:0 6px 24px rgba(18,35,77,.12); }
#mainNav .nav-link{ color:#fff; font-weight:600; font-size:.95rem; margin-left:1rem; }
#mainNav .nav-link.active{ color:var(--ips-yellow); }
#mainNav.scrolled .nav-link{ color:var(--ips-navy); }
#mainNav.scrolled .nav-link.active{ color:var(--ips-yellow); }
.brand-text{ font-style:italic; font-weight:800; font-size:1.6rem; line-height:1; color:#fff; }
.brand-sub{ display:block; font-style:normal; font-weight:600; font-size:.5rem; letter-spacing:.45em; opacity:.8; }
#mainNav.scrolled .brand-text{ color:var(--ips-navy); }

/* ============================================================
   HERO : SLIDER AVANT / APRÈS
============================================================ */
#hero{ position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; }
.ba-slider{
  position:absolute; inset:0; --pos:50%;
  user-select:none; touch-action:pan-y; cursor:ew-resize;
}
.ba-layer{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
/* Remplacez ces 2 URLs par vos vraies photos avant / après */
.ba-before{
  background-image:url('../img/parking-before.png');
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-after{
  background-image:url('../img/parking-after.png');
}
.ba-slider::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(8,13,26,.55), rgba(8,13,26,.25) 55%, rgba(8,13,26,.15));
}
.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px;
  background:#fff; z-index:3; box-shadow:0 0 12px rgba(0,0,0,.45);
}
.ba-handle:focus-visible{ outline:3px solid var(--ips-yellow); outline-offset:2px; }
.ba-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#444;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:1.1rem; cursor:ew-resize; box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.ba-label{
  position:absolute; top:5.5rem; z-index:2;
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:rgba(10,20,35,.55); padding:.3rem .7rem; border-radius:3px;
}
.ba-label-before{ left:1rem; }
.ba-label-after{ right:1rem; }
.hero-content{ position:relative; z-index:4; pointer-events:none; padding-bottom:4.5rem; }
.hero-content .btn{ pointer-events:auto; }
.hero-content h1{ animation:fadeUp .9s ease both; font-weight: 900; }
.text-white-50 { --bs-text-opacity: 1; color: rgba(255, 255, 255, 1) !important; font-size: 20px; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:none;} }

/* ============================================================
   BOUTONS
============================================================ */
.btn{ border-radius:3px; }
.btn-ips-yellow{ background:var(--ips-yellow); color:#fff; font-weight:600; padding:.65rem 1.7rem; }
.btn-ips-yellow:hover{ background:var(--ips-yellow-dark); color:#fff; }
.btn-ips-blue{ background:var(--ips-blue); color:#fff; font-weight:600; padding:.65rem 1.7rem; }
.btn-ips-blue:hover{ background:var(--ips-blue-dark); color:#fff; }

/* ============================================================
   STATS
============================================================ */
.stat-number{ font-weight:800; font-style:italic; color:var(--ips-yellow); font-size:2.8rem; line-height:1.1; }
.stat-label{ font-size: 1.2rem; font-weight: 500; color:var(--ips-blue); line-height:1.1; }

/* ============================================================
   ACCORDÉON (loi APER)
============================================================ */
.accordion-custom .accordion-item{
  background:#fff; border:none; border-radius:4px; margin-bottom:1rem; overflow:hidden;
}
.accordion-custom .accordion-button{
  background:#fff; color:var(--ips-yellow); font-weight:700; font-size:.95rem;
  font-style:normal; box-shadow:none; padding:1.1rem 1.25rem;
}
.accordion-custom .accordion-button:not(.collapsed){ color:var(--ips-yellow); background:#fff; }
.accordion-custom .accordion-button::after{
  background-image:none; content:"+"; width:auto; height:auto;
  font-size:1.5rem; font-weight:600; color:var(--ips-blue); line-height:1;
}
.accordion-custom .accordion-button:not(.collapsed)::after{ content:"−"; }
.accordion-custom .accordion-body{ padding:0 1.25rem 1.25rem; }

/* ============================================================
   ÉTAPES 1 → 6
============================================================ */
.step-card{
  border:2px solid var(--ips-yellow); background:#fff; padding:1.2rem; height:100%;
  min-height:255px; display:flex; flex-direction:column; justify-content:space-between;
}
.step-num{ font-size: 6rem; font-weight:800; font-style:italic; color:var(--ips-yellow); line-height:1; }
.step-label{ color:var(--ips-yellow); font-size:.9rem; font-style:italic; }
.step-card.solid{ background:var(--ips-blue); border-color:var(--ips-blue); }
.step-card.solid .step-num, .step-card.solid .step-label{ color:#fff; }

/* ============================================================
   CARTES GRISES / AVANTAGES
============================================================ */
.benefit-card{ background:#e9edf6; border-radius:4px; padding:1.75rem; height:350px; }
.benefit-card h3{ font-size:2rem; }
.card-solid-blue{ background:var(--ips-blue); color:#fff; padding:2.25rem 1.5rem; text-align:center; height:350px; }
.card-solid-blue p{ font-size:.8rem; }
.card-outline-yellow{ border:2px solid var(--ips-yellow); background:#fff; padding:2.25rem 1.5rem; text-align:center; height:100%; }
.card-outline-yellow p{ font-size:.8rem; }
.icon-badge{
  width:120px; height:120px; border-radius:50%; background:#F1F3F5;
  display:flex; align-items:center; justify-content:center;
  color:var(--ips-blue); font-size:1.5rem;
}

/* Carte financement */
.finance-card{ background:#e9edf6; border-radius:6px; padding:1.25rem 1.5rem; }

/* ============================================================
   SECTION CONTACT (fond quadrillé)
============================================================ */
#contact{
  background-color:#dfe9f5;
  background-image:
    linear-gradient(rgba(230,238,248,.88), rgba(230,238,248,.88)),
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(62,92,151,.18) 120px 122px),
    repeating-linear-gradient(0deg,  transparent 0 60px,  rgba(62,92,151,.14) 60px 62px);
}
.portrait{
  width:230px; height:230px; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#7ea8d8,#4f74ad);
}
.portrait i{ font-size:11rem; color:#f4f7fb; line-height:1; position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); }

/* ============================================================
   FOOTER
============================================================ */
.footer-link, .footer-link-light{ text-decoration:none; }
.footer-link{ color:var(--ips-text); }
.footer-link:hover{ color:var(--ips-blue); }
.footer-link-light{ ccolor:var(--ips-blue); }
.footer-link-light:hover{ color:#fff; }

/* ============================================================
   ANIMATIONS AU SCROLL
============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.15s; }
.reveal-delay-2{ transition-delay:.3s; }