/* ============================================================
   FILTER PILLS
   ============================================================ */
.wrapper-realisations {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}


.shape-form {
    position: absolute;
}

.shape-form.shape-1 {
    border: 1px solid #e5e5e5;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    top: -133px;
    left: -133px;
}

.shape-form.shape-2 {
    border: 1px solid #e5e5e5;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    right: -133px;
    bottom: -133px;
}

.shape-form.shape-3 {
    left: 40px;
    top: 40px;
    animation: rotate-y 15s normal infinite linear;
}

.shape-form.shape-4 {
    right: 20%;
    top: 36%;
    animation: float-bob-x 2s normal infinite linear;
}

.shape-form.shape-5 {
    right: 0;
    bottom: 0;
    animation: float-bob-x 2s normal infinite linear;
}


.filters-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:52px;}
.filter-pill{
  display:flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;border:1.5px solid var(--white-line);
  background:#fff;font-size:13.5px;font-weight:600;color:var(--primary-color);cursor:pointer;transition:.3s;
}
.filter-pill .fn{
  background:var(--white-fog);color:var(--color-grey);font-family:var(--font-mono);font-size:11px;
  padding:2px 8px;border-radius:100px;transition:.3s;
}
.filter-pill:hover{border-color:var(--primary-color);}
.filter-pill.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff;}
.filter-pill.active .fn{background:var(--second-color);color:#fff;}

/* ============================================================
   BENTO GRID
   ============================================================ */
.bento-grid{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:22px;grid-auto-flow:dense;
}
.proj-card{
  position:relative;border-radius:18px;overflow:hidden;cursor:pointer;grid-column:span 2;grid-row:span 1;
  background:var(--primary-color);transition:opacity .4s,transform .4s var(--ease);
}
.proj-card.size-lg{grid-column:span 2;grid-row:span 2;}
.proj-card.size-tall{grid-column:span 1;grid-row:span 2;}
.proj-card.size-sm{grid-column:span 1;grid-row:span 1;}
.proj-card.hidden-cat{display:none;}
.proj-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);filter:saturate(.85);}
.proj-card:hover .proj-photo{transform:scale(1.07);filter:saturate(1);}
.proj-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,46,.05) 30%,rgba(13,11,46,.92) 100%);}
.proj-badge{
  position:absolute;top:16px;left:16px;background:var(--second-color);color:#fff;font-family:var(--font-mono);
  font-size:11px;font-weight:700;padding:6px 12px;border-radius:100px;z-index:2;
}
.proj-cat{
  position:absolute;top:16px;right:16px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;
  font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;
  padding:6px 12px;border-radius:100px;z-index:2;
}
.proj-body{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2;}
.proj-title{font-family:var(--second-font);color:#fff;font-size:17px;margin-bottom:6px;}
.size-lg .proj-title{font-size:22px;}
.proj-desc{
  font-size:12.5px;color:#C7C7E4;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease),opacity .4s var(--ease);
}
.proj-card:hover .proj-desc{max-height:60px;opacity:1;margin-top:6px;}
.proj-expand{
  position:absolute;bottom:16px;right:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;z-index:2;transition:.3s;
}
.proj-card:hover .proj-expand{background:var(--second-color);}

@media(max-width:1024px){
  .bento-grid{grid-template-columns:repeat(2,1fr);}
  .proj-card.size-lg{grid-column:span 2;grid-row:span 2;}
  .proj-card.size-tall{grid-column:span 1;grid-row:span 2;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .stats-strip > div:nth-child(2n){border-right:none;}
}
@media(max-width:600px){
  .bento-grid{grid-template-columns:repeat(1,1fr);grid-auto-rows:260px;}
  .proj-card,.proj-card.size-lg,.proj-card.size-tall,.proj-card.size-sm{grid-column:span 1;grid-row:span 1;}
  .stats-strip-wrap{margin-top:-40px;}
  .stats-strip{grid-template-columns:1fr 1fr;}
}


/* ============================================================
   PROJECT MODAL (lightbox)
   ============================================================ */
.proj-modal-overlay{
  position:fixed;inset:0;background:rgba(13,11,46,.82);backdrop-filter:blur(6px);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.proj-modal-overlay.open{opacity:1;pointer-events:auto;}
.proj-modal{
  background:#fff;border-radius:22px;max-width:760px;width:100%;max-height:88vh;overflow-y:auto;
  transform:translateY(24px) scale(.97);transition:transform .4s var(--ease);
}
.proj-modal-overlay.open .proj-modal{transform:translateY(0) scale(1);}
.proj-modal-img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.proj-modal-body{padding:36px;}
.proj-modal-tags{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.proj-modal-tag{
  padding:6px 14px;border-radius:100px;background:var(--white-fog);color:var(--primary-color);
  font-family:var(--font-mono);font-size:11px;
}
.proj-modal h3{font-size:26px;color:var(--primary-color);margin-bottom:14px;}
.proj-modal p{color:var(--color-grey);font-size:15px;margin-bottom:26px;}
.proj-modal-close{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--primary-color);z-index:3;
}

/* ============================================================
                                       CTA
   ============================================================ */
.wrapper-cta {
    position: relative;
    padding: 30px 0 130px;
}
.wrap-cta{
    position: relative;
    border-radius:28px;
    padding:80px 60px;
    text-align:center;
    background-image: url(../images/bg/bg-cta.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
.wrap-cta::before{
  position:absolute;
  content: "";
  inset: 0;
  background:linear-gradient(120deg,var(--primary-color) 0%,var(--primary-color-light) 55%,#1a3a8f 100%);
  opacity: 0.8;
}
.cta-motif{position:absolute;top:-40px;right:-20px;opacity:.5;transform:scale(1.6);}
.cta-motif.left{top:auto;bottom:-40px;left:-20px;right:auto;transform:scale(1.6) rotate(180deg);}
.wrap-cta h2{color:#fff;font-size:clamp(26px,4vw,40px);position:relative;z-index:1;}
.wrap-cta p{color:#C7C7E4;max-width:520px;margin:18px auto 0;position:relative;z-index:1;}
.cta-actions{display:flex;gap:16px;justify-content:center;margin-top:36px;flex-wrap:wrap;position:relative;z-index:1;}