:root {
      --primary-color: #1b4965;  /* Bleu marine du logo */
      --secondary-color: #e07a5f;/* Orange doux du logo */
      --bg-gradient-start: #0f3057;
      --bg-gradient-end: #00587a;
    }

    body {
      background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Segoe UI', Roboto, sans-serif;
    }

    .card-login {
      border: none;
      border-radius: 1.25rem;
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
      max-width: 440px;
      width: 100%;
      overflow: hidden;
    }

    .logo-container {
      width: 120px;
      height: 120px;
      margin: 0 auto;
      border-radius: 50%;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      background-color: #ffffff;
      padding: 4px;
    }

    .logo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .btn-gessante {
      background-color: var(--primary-color);
      color: #ffffff;
      border: none;
      transition: all 0.3s ease;
    }

    .btn-gessante:hover {
      background-color: #113245;
      color: #ffffff;
      transform: translateY(-1px);
    }

    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.25rem rgba(27, 73, 101, 0.15);
    }

    .badge-stars {
      color: var(--secondary-color);
      letter-spacing: 2px;
    }