:root{
      --equinoxe-yellow: #F2B705; /* accent principal (logo jaune) */ 
      --bg-dark: #0b0b0b;         /* fond sombre */
      --surface: #0f1220;         /* surface légèrement différenciée */
      --muted-bg: #f5f6fa;        /* gris clair (pour cartes claires si besoin) */
      --text-light: #ffffff;
      --text-muted: #d8d8d8;
      --radius: 12px;
    }

    /* Reset mobile-first */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg, var(--bg-dark) 0%, #08080a 100%);
      color:var(--text-light);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      display:flex;
      flex-direction:column;
      align-items:center;
      min-height:100vh;
    }

    /* Header */
    header{
      width:100%;
      max-width:920px;
      padding:18px 16px;
      display:flex;
      align-items:center;
      gap:12px;
      justify-content:space-between;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .logo-mark{
      width:44px;
      height:44px;
      border-radius:8px;
      background-image:url("favicon.png");
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--bg-dark);
      font-weight:700;
      letter-spacing:0.6px;
    }
    .title{
      font-size:1.15rem;
      font-weight:700;
      color:var(--text-light);
    }

    main{
      width:100%;
      max-width:920px;
      padding:20px;
      flex:1;
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    /* Card style (sur fond sombre on utilise surface plus clair) */
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: var(--radius);
      padding:16px;
      box-shadow: 0 6px 18px rgba(2,6,23,0.6);
    }

    h2{
      margin:0 0 8px 0;
      color:var(--equinoxe-yellow);
      font-size:1.05rem;
      text-align:center;
    }
    p.lead{
      margin:0 0 12px 0;
      color:var(--text-muted);
      font-size:0.92rem;
      text-align:center;
    }

    form{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    label{
      font-size:0.78rem;
      color:var(--text-muted);
    }
    .field{
      display:flex;
      gap:8px;
      align-items:center;
    }
    input[type="text"], input[type="password"], select {
      flex:1;
      padding:12px 14px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      color:var(--text-light);
      font-size:1rem;
      outline:none;
    }
    input::placeholder{ color: rgba(255,255,255,0.45); }

    /* Buttons */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:10px;
      font-weight:600;
      cursor:pointer;
      border: none;
      width:100%;
      font-size:1rem;
    }
    .btn-primary{
      background: linear-gradient(90deg, var(--equinoxe-yellow), #f4c23a);
      color:var(--bg-dark);
      box-shadow: 0 8px 20px rgba(242,183,5,0.12);
    }
    .btn-outline{
      background:transparent;
      color:var(--text-light);
      border:1px solid rgba(255,255,255,0.06);
    }

    .or{
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--text-muted);
      font-size:0.92rem;
      justify-content:center;
      padding:6px 0;
    }
    .or::before, .or::after{
      content:"";
      flex:1;
      height:1px;
      background: rgba(255,255,255,0.04);
      border-radius:2px;
    }

    footer{
      width:100%;
      max-width:920px;
      padding:18px 20px;
      text-align:center;
      color:rgba(255,255,255,0.45);
      font-size:0.82rem;
    }

    /* layout for two-column on wider screens */
    @media (min-width:740px){
      main{
        flex-direction:row;
        align-items:flex-start;
        gap:20px;
      }
      .left, .right{
        flex:1;
      }
      .card{ padding:20px }
    }

  /* === MODAL DE ZONE === */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.modal.hidden {
  display: none;
}
.modal-content {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.modal-content h3 {
  color: var(--equinoxe-yellow);
  margin-bottom: 8px;
}
.modal-content p {
  color: var(--text-muted);
  margin-bottom: 16px;
}
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
@media (min-width: 480px) {
  .modal-actions {
    flex-direction: row;
    justify-content: space-between;
  }
}