*, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: #f5f5f5;
      overflow-x: hidden;
    }

    /* ── LAYOUT DESKTOP : image fixe à gauche, contenu à droite ── */
    .layout {
      display: flex;
      min-height: 100vh;
    }

    .background {
      position: sticky;
      top: 0;
      width: 38%;
      height: 100vh;
      background: url("bisotun.JPG") center center / cover no-repeat;
      flex-shrink: 0;
    }

    .content {
      flex: 1;
      min-height: 100vh;
      background: #f7f7f7;
      padding: clamp(32px, 6vh, 72px) clamp(28px, 5vw, 72px) clamp(32px, 6vh, 60px) clamp(36px, 5vw, 72px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #35506b;
    }

    /* ── TYPOGRAPHIE ── */
    h1 {
      font-size: clamp(34px, 4.5vw, 68px);
      font-weight: 700;
      color: #3f566b;
      margin-bottom: 6px;
      line-height: 1.1;
    }

    .tagline {
      font-size: clamp(13px, 1.1vw, 16px);
      color: #7a95ac;
      margin-bottom: clamp(20px, 3vh, 36px);
      font-style: italic;
    }

    h2 {
      font-size: clamp(15px, 1.3vw, 19px);
      font-weight: 600;
      color: #3f566b;
      margin-bottom: clamp(12px, 2vh, 20px);
    }

    /* ── GRILLE FONCTIONNALITÉS ── */
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: clamp(8px, 1.2vw, 14px);
      margin-bottom: clamp(20px, 3.5vh, 36px);
    }

    .feature-card {
      background: white;
      border: 1px solid #dce8f0;
      border-radius: 10px;
      padding: clamp(10px, 1.4vw, 16px) clamp(10px, 1.2vw, 14px);
    }

    .feature-card .icon {
      font-size: clamp(18px, 1.8vw, 22px);
      margin-bottom: 5px;
      display: block;
    }

    .feature-card .label {
      font-size: clamp(12px, 0.9vw, 14px);
      font-weight: 600;
      color: #3f566b;
      display: block;
      margin-bottom: 3px;
    }

    .feature-card .desc {
      font-size: clamp(11px, 0.78vw, 12.5px);
      color: #6e8fa8;
      line-height: 1.4;
    }

    /* ── BOUTONS ── */
    .buttons {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(8px, 1.2vw, 14px);
    }

    .btn {
      text-decoration: none;
      padding: clamp(9px, 1vw, 13px) clamp(16px, 1.8vw, 24px);
      border: 2px solid #5a7ca0;
      border-radius: 8px;
      color: #5a7ca0;
      background: white;
      font-size: clamp(13px, 0.95vw, 16px);
      font-weight: 600;
      transition: background 0.25s, color 0.25s;
      white-space: nowrap;
    }

    .btn:hover {
      background: #5a7ca0;
      color: white;
    }

    .btn-primary {
      background: #5a7ca0;
      color: white;
    }

    .btn-primary:hover {
      background: #3e5c7a;
      border-color: #3e5c7a;
    }

    /* ── RESPONSIVE TABLETTE / MOBILE ── */
    @media (max-width: 900px) {
      .layout {
        flex-direction: column;
      }

      .background {
        position: relative;
        width: 100%;
        height: 38vw;
        min-height: 180px;
        max-height: 300px;
      }

      .content {
        margin-left: 0;
        width: 100%;
        min-height: auto;
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
        border-bottom-left-radius: 0;
        margin-top: -28px;
        padding: 32px 22px 36px;
        justify-content: flex-start;
      }

      .features {
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
      }
    }

    @media (max-width: 520px) {
      .features {
        grid-template-columns: 1fr 1fr;
      }

      .buttons {
        flex-direction: column;
      }

      .btn {
        text-align: center;
      }
    }
	
	.background {
  clip-path: ellipse(85% 100% at 15% 50%);
}
	
	
	
	.footer {
  text-align: right;
  padding: 6px 24px 8px;
  font-size: 12px;
  color: #8aabbd;
  background: #f0f4f8;
}