:root{
      --bg:#0f172a;
      --section:#1e293b;
      --primary:#f9fafb;
      --text:#e5e7eb;
      --muted:#cbd5e1;
      --line:rgba(249,250,251,.12);
      --grad:linear-gradient(90deg,#f9fafb 0%,#cbd5e1 45%,#ffffff 100%);
      --btn:linear-gradient(135deg,#f9fafb 0%,#cbd5e1 100%);
    }
    html,body{
      background: var(--primary);
      color: #0f172a;
      font-family: Arial, Helvetica, sans-serif;
      scroll-behavior:smooth;
    }
    body{
      background-image:
        radial-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
        radial-gradient(rgba(30,41,59,.03) 1px, transparent 1px);
      background-size: 14px 14px, 21px 21px;
      background-position: 0 0, 8px 8px;
    }
    .site-shell{
      max-width: 1540px;
      margin: 0 auto;
      padding: 12px;
    }
    .panel{
      background: var(--section);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(15,23,42,.12);
    }
    .topbar{
      position: sticky;
      top: 10px;
      z-index: 1040;
      backdrop-filter: blur(10px);
    }
    .navbar-wrap{
      background: rgba(30,41,59,.96);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 8px 14px;
    }
    .navbar-brand{
      color: var(--primary)!important;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-size: .95rem;
    }
    .brand-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      margin-right: 10px;
      background: var(--btn);
      color: var(--bg);
      font-weight: 900;
    }
    .navbar-toggler{
      border: 1px solid rgba(249,250,251,.25);
      box-shadow: none!important;
    }
    .navbar-toggler-icon{
      filter: invert(1);
    }
    .nav-link{
      color: var(--text)!important;
      font-weight: 600;
      padding: 10px 14px!important;
      border-radius: 10px;
    }
    .nav-link:hover{
      background: rgba(249,250,251,.08);
    }
    .hero-grid{
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 12px;
    }
    .hero-main{
      min-height: 560px;
      position: relative;
      display:flex;
      align-items:flex-end;
      background:
        linear-gradient(180deg,rgba(15,23,42,.08) 0%,rgba(15,23,42,.55) 55%,rgba(15,23,42,.88) 100%),
        url('img/comprendre-le-marche-immobilier-commercial.png') center/cover no-repeat;
    }
    .hero-main::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        radial-gradient(rgba(249,250,251,.05) 1px, transparent 1px);
      background-size: 8px 8px;
      pointer-events:none;
    }
    .hero-copy{
      position:relative;
      z-index:1;
      padding: 24px;
      max-width: 760px;
      animation: slideUp .8s ease;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.78rem;
      font-weight:700;
      color: var(--primary);
      background: rgba(249,250,251,.08);
      border:1px solid rgba(249,250,251,.14);
      border-radius: 999px;
      padding: 8px 12px;
      margin-bottom: 14px;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .gradient-text{
      background: var(--grad);
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
    }
    .hero-title{
      font-size: clamp(2rem,4.4vw,4.5rem);
      line-height: .96;
      font-weight: 900;
      margin:0 0 14px;
    }
    .hero-lead{
      color: var(--text);
      font-size: 1rem;
      max-width: 680px;
      margin-bottom: 18px;
    }
    .btn-gradient{
      background: var(--btn);
      color: var(--bg);
      border: none;
      border-radius: 999px;
      font-weight: 800;
      padding: 12px 18px;
      text-decoration:none;
      display:inline-block;
      transition: transform .25s ease, box-shadow .25s ease;
      box-shadow: 0 10px 24px rgba(203,213,225,.22);
    }
    .btn-gradient:hover{
      transform: translateY(-2px);
      color: var(--bg);
    }
    .hero-side{
      display:grid;
      grid-template-rows: 1fr 1fr;
      gap:12px;
    }
    .mini-feature{
      padding: 18px;
      position: relative;
      min-height: 274px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      animation: slideLeft .9s ease;
    }
    .mini-feature h3{
      font-size: 1.2rem;
      font-weight: 800;
      margin: 0 0 10px;
      color: var(--primary);
    }
    .mini-feature p{
      color: var(--muted);
      margin:0;
      font-size: .95rem;
    }
    .stat-box{
      display:grid;
      grid-template-columns: repeat(2,1fr);
      gap:10px;
      margin-top: 14px;
    }
    .stat{
      background: rgba(249,250,251,.06);
      border:1px solid rgba(249,250,251,.1);
      border-radius: 16px;
      padding: 14px;
    }
    .stat strong{
      display:block;
      color: var(--primary);
      font-size: 1.35rem;
    }
    .stat span{
      color: var(--muted);
      font-size: .83rem;
    }
    .image-card{
      background:
        linear-gradient(180deg,rgba(15,23,42,.1),rgba(15,23,42,.55)),
        url('img/zones-prometteuses-immobilier-commercial.png') center/cover no-repeat;
      border: 2px solid rgba(249,250,251,.18);
      border-radius: 18px;
      min-height: 160px;
    }
    .section-title{
      font-size: clamp(1.5rem,2.6vw,2.6rem);
      font-weight: 900;
      margin: 0;
    }
    .section-intro{
      color: var(--muted);
      margin: 0;
      max-width: 820px;
    }
    .feature-ribbon{
      display:grid;
      grid-template-columns: .9fr 1.1fr .8fr;
      gap:12px;
    }
    .feature-card{
      padding: 18px;
      min-height: 220px;
      animation: slideUp .8s ease;
    }
    .feature-card h3{
      color: var(--primary);
      font-size: 1.15rem;
      font-weight: 800;
      margin-bottom: 10px;
    }
    .feature-card p{
      color: var(--muted);
      margin-bottom: 0;
    }
    .feature-card .tag{
      display:inline-block;
      border:1px solid rgba(249,250,251,.16);
      padding:7px 10px;
      border-radius: 999px;
      margin-bottom: 14px;
      color: var(--primary);
      font-size:.78rem;
      font-weight:700;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .post-grid{
      display:grid;
      grid-template-columns: repeat(12,1fr);
      gap:12px;
    }
    .post-card{
      text-decoration:none;
      color: inherit;
      display:flex;
      flex-direction:column;
      height:100%;
      transition: transform .25s ease, border-color .25s ease;
      animation: slideUp .9s ease;
    }
    .post-card:hover{
      transform: translateY(-4px);
    }
    .post-card .thumb{
      aspect-ratio: 16/10;
      border-bottom:1px solid var(--line);
      overflow:hidden;
      background: rgba(249,250,251,.04);
    }
    .post-card .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      border: 2px solid rgba(249,250,251,.16);
      border-radius: 16px;
      margin: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
    }
    .post-card .body{
      padding: 16px;
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
    }
    .post-card h3{
      font-size:1.08rem;
      line-height:1.2;
      margin:0;
      color: var(--primary);
      font-weight:800;
    }
    .post-card p{
      margin:0;
      color: var(--muted);
      font-size:.93rem;
      flex:1;
    }
    .readmore{
      color: var(--primary);
      font-weight: 800;
      font-size: .88rem;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .span-4{grid-column: span 4;}
    .span-5{grid-column: span 5;}
    .span-3{grid-column: span 3;}
    .span-6{grid-column: span 6;}
    .span-7{grid-column: span 7;}
    .newsletter{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:12px;
    }
    .newsletter-box{
      padding: 20px;
      min-height: 240px;
    }
    .form-control{
      background: rgba(249,250,251,.08);
      border: 1px solid rgba(249,250,251,.12);
      color: var(--primary);
      border-radius: 14px;
      min-height: 50px;
    }
    .form-control::placeholder{
      color: #cbd5e1;
    }
    .form-control:focus{
      background: rgba(249,250,251,.12);
      border-color: rgba(249,250,251,.25);
      color: var(--primary);
      box-shadow:none;
    }
    footer .footer-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr .8fr 1fr;
      gap:12px;
    }
    .footer-block{
      padding: 18px;
      min-height: 100%;
    }
    .footer-block h4{
      color: var(--primary);
      font-size:1rem;
      font-weight:800;
      margin-bottom:12px;
    }
    .footer-block p,.footer-block li,.footer-block a{
      color: var(--muted);
      text-decoration:none;
      margin:0;
    }
    .footer-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:8px;
    }
    .footer-note{
      border-top:1px solid rgba(249,250,251,.12);
      margin-top:12px;
      padding-top:12px;
      color: var(--muted);
      font-size:.88rem;
    }
    .section-pad{padding: 12px 0;}
    @keyframes slideUp{
      from{opacity:0;transform:translateY(26px);}
      to{opacity:1;transform:translateY(0);}
    }
    @keyframes slideLeft{
      from{opacity:0;transform:translateX(28px);}
      to{opacity:1;transform:translateX(0);}
    }
    @media (max-width: 1199.98px){
      .hero-grid,
      .feature-ribbon,
      .newsletter,
      footer .footer-grid{
        grid-template-columns: 1fr;
      }
      .hero-side{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      }
      .span-4,.span-5,.span-3,.span-6,.span-7{grid-column: span 6;}
    }
    @media (max-width: 767.98px){
      .site-shell{padding:10px;}
      .hero-main{min-height: 470px;}
      .hero-copy{padding:18px;}
      .hero-side{grid-template-columns: 1fr;}
      .span-4,.span-5,.span-3,.span-6,.span-7{grid-column: span 12;}
      .section-title{line-height:1.05;}
      .navbar-wrap{padding:8px 10px;}
    }