:root{
    --red:#B10C2A;
    --black:#30303A;
    --shade:#676061;
    --white:#ffffff;
    --soft:#f7f7f4;
    --wand:#ACB2C3;
  }

  .vitrier-zones-section{
    position:relative;
    padding:95px 0;
    background:
      linear-gradient(135deg, #ffffff 0%, #f7f7f4 100%);
    overflow:hidden;
  }

  .vitrier-zones-section::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:var(--red);
  }

  .vitrier-zones-section::after{
    content:"CHARLEROI";
    position:absolute;
    right:-22px;
    bottom:12px;
    font-size:120px;
    font-weight:950;
    letter-spacing:.08em;
    color:rgba(48,48,58,.035);
    pointer-events:none;
  }

  .vitrier-zones-hero{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:42px;
    align-items:center;
    margin-bottom:42px;
  }

  .vitrier-zones-text{
    padding:18px 0;
  }

  .zones-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--red);
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.18em;
    margin-bottom:18px;
  }

  .vitrier-zones-text h2{
    color:var(--black);
    font-size:44px;
    line-height:1.08;
    font-weight:950;
    margin-bottom:22px;
  }

  .vitrier-zones-text h2 span{
    color:var(--red);
  }

  .vitrier-zones-text p{
    color:var(--shade);
    font-size:16.5px;
    line-height:1.85;
    max-width:690px;
    margin:0;
  }

  .vitrier-zones-image{
    position:relative;
    background:#fff;
    padding:12px;
    box-shadow:
      22px 26px 70px rgba(48,48,58,.18),
      -10px -10px 28px rgba(255,255,255,.9);
    transform:perspective(1100px) rotateY(-4deg);
    transition:.35s ease;
  }

  .vitrier-zones-image:hover{
    transform:perspective(1100px) rotateY(0deg) translateY(-6px);
  }

  .vitrier-zones-image::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    border-top:54px solid var(--red);
    border-left:54px solid transparent;
    z-index:2;
  }

  .vitrier-zones-image img{
    width:100%;
    height:330px;
    object-fit:contain;
    background:#eef0f2;
    display:block;
  }

  .vitrier-zones-directory{
    position:relative;
    z-index:2;
    background:#fff;
    padding:34px;
    border:1px solid rgba(48,48,58,.10);
    box-shadow:0 24px 65px rgba(48,48,58,.10);
  }

  .zones-directory-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:24px;
  }

  .zones-directory-header h3{
    color:var(--black);
    font-size:26px;
    font-weight:950;
    margin-bottom:8px;
  }

  .zones-directory-header p{
    color:var(--shade);
    font-size:15px;
    line-height:1.65;
    margin:0;
  }

  .zones-directory-header > span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    background:var(--black);
    color:#fff;
    padding:10px 14px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .zones-directory-header > span i{
    color:var(--red);
  }

  .zones-toggle summary{
    list-style:none;
    cursor:pointer;
    background:var(--soft);
    border:1px solid rgba(48,48,58,.10);
    padding:16px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    color:var(--black);
    font-weight:900;
    transition:.25s ease;
  }

  .zones-toggle summary:hover{
    background:#fff;
    box-shadow:0 14px 34px rgba(48,48,58,.10);
  }

  .zones-toggle summary::-webkit-details-marker{
    display:none;
  }

  .zones-toggle summary span{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .zones-toggle summary i{
    color:var(--red);
    transition:.3s ease;
  }

  .zones-toggle[open] summary i{
    transform:rotate(180deg);
  }

  .zones-toggle summary strong{
    color:var(--red);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .zones-list-wrap{
    animation:zonesReveal .38s ease both;
    padding-top:24px;
  }

  @keyframes zonesReveal{
    from{
      opacity:0;
      transform:translateY(-12px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  .zones-grid{
    max-height:360px;
    overflow:auto;
    padding:6px 8px 6px 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
  }

  .zones-grid::-webkit-scrollbar{
    width:7px;
  }

  .zones-grid::-webkit-scrollbar-thumb{
    background:var(--red);
  }

  .zones-grid::-webkit-scrollbar-track{
    background:var(--soft);
  }

  .zone-city-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
    padding:9px 10px;
    background:var(--soft);
    border:1px solid rgba(48,48,58,.08);
    color:var(--shade);
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    line-height:1.25;
    transition:.24s ease;
  }

  .zone-city-link span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .zone-city-link i{
    color:var(--red);
    font-size:10px;
    opacity:.75;
    transition:.24s ease;
  }

  .zone-city-link:hover{
    background:var(--black);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(48,48,58,.14);
  }

  .zone-city-link:hover i{
    color:#fff;
    transform:translateX(3px);
  }

  .zones-cta{
    margin-top:24px;
    display:flex;
    justify-content:center;
  }

  .zones-cta a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--red);
    color:#fff;
    text-decoration:none;
    padding:14px 24px;
    font-size:13px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
    box-shadow:0 16px 35px rgba(177,12,42,.22);
    transition:.25s ease;
  }

  .zones-cta a:hover{
    background:var(--black);
    color:#fff;
    transform:translateY(-3px);
  }

  @media(max-width:991px){
    .vitrier-zones-section{
      padding:75px 0;
    }

    .vitrier-zones-hero{
      grid-template-columns:1fr;
      gap:30px;
    }

    .vitrier-zones-text h2{
      font-size:36px;
    }

    .vitrier-zones-image{
      transform:none;
    }

    .vitrier-zones-image img{
      height:300px;
    }

    .zones-grid{
      grid-template-columns:repeat(3,1fr);
    }
  }

  @media(max-width:768px){
    .zones-directory-header{
      flex-direction:column;
    }

    .zones-grid{
      grid-template-columns:repeat(2,1fr);
      max-height:330px;
    }
  }

  @media(max-width:576px){
    .vitrier-zones-text h2{
      font-size:30px;
    }

    .vitrier-zones-directory{
      padding:24px;
    }

    .zones-toggle summary{
      flex-direction:column;
      align-items:flex-start;
    }

    .zones-grid{
      grid-template-columns:1fr;
    }

    .vitrier-zones-image img{
      height:240px;
    }

    .vitrier-zones-section::after{
      display:none;
    }
  }