:root{
      --purple:#4d2079;
      --accent:#0094d4;
      --white:#fff;
      --card: rgba(255,255,255,.92);
    }
    *{ box-sizing:border-box; }

    body{
      margin:0;
      font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      min-height:100vh;
      color:white;
      background-image: url("assets/fond_demarche.jpg");
	  background-size: cover;
      padding: 40px;
    }

    .loginCard{
      max-width: 420px;
      margin: 80px auto 0;
      background: rgba(255,255,255,.12);
      border-radius: 22px;
      padding: 22px;
      display:flex;
      flex-direction:column;
      gap: 14px;
      box-shadow: 0 14px 40px rgba(0,0,0,.18);
    }
    .loginTitle{ margin:0; text-align:center; font-weight: 500; }
    .input{
      width:100%;
      border:none;
      outline:none;
      border-radius:999px;
      padding: 14px 16px;
      font-size: 16px;
      font-weight: 500;
      color: var(--purple);
      background: rgba(255,255,255,.8);
    }
    .btn{
      border:none;
      cursor:pointer;
      border-radius:999px;
      padding: 14px 16px;
      font-weight: 500;
      font-size: 16px;
    }
    .btnWhite{ background: white; color: var(--purple); }
    .error{ display:none; color:#fecaca; font-weight:500; text-align:center; }
    .hidden{ display:none; }

    .wrap{
      max-width: 1000px;
      margin: 0 auto;
      display:flex;
      flex-direction:column;
      gap: 16px;
    }

    h1{
      margin:0;
      font-size: clamp(22px, 3vw, 34px);
      font-weight: 500;
    }

    .card{
      background: var(--card);
      color: var(--purple);
      border-radius: 22px;
      padding: 18px;
      box-shadow: 0 12px 30px rgba(0,0,0,.12);
    }

    .statLine{
      display:grid;
      grid-template-columns: minmax(140px, 220px) 1fr 56px;
      align-items:center;
      gap: 10px;
      margin-top: 12px;
      font-weight: 500;
    }
    .bar{
      height: 14px;
      background: rgba(74,41,119,.15);
      border-radius: 999px;
      overflow:hidden;
    }
    .barFill{
      height:100%;
      width:0%;
      border-radius:999px;
      transition: width .4s ease;
    }
    .fillA{ background: var(--accent); }
    .fillB{ background: var(--purple); }
    .fillM{ background: #9ca3af; }

    table{
      width:100%;
      border-collapse: collapse;
      margin-top: 12px;
      table-layout: fixed;
      min-width: 820px;
      font-variant-numeric: tabular-nums;
    }
    th.col-date, td.col-date { width: 130px; white-space: nowrap; }
    th.col-time, td.col-time { width: 70px;  white-space: nowrap; }
    th.col-score, td.col-score { width: 60px; text-align: right; }

    th, td{
      padding: 12px;
      border-bottom: 1px solid rgba(77,32,121,.15);
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    th{
      text-align:left;
      font-size: 13px;
      background: rgba(77,32,121,.06);
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      font-weight: 500;
      font-size: 12px;
      background: rgba(77,32,121,.08);
    }
    .dot{ width: 8px; height: 8px; border-radius: 50%; }
    .dotA{ background: var(--accent); }
    .dotB{ background: var(--purple); }
    .dotM{ background: #9ca3af; }

    a{ color:white; text-decoration:none; font-weight:500; opacity:.9; }
    a:hover{ opacity:1; text-decoration:underline; }

    @media (max-width: 520px){
      body{ padding: 24px; }
      table{ min-width: 760px; }
      th.col-date, td.col-date { width: 140px; }
    }