body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex; margin: 0; height: 100vh;
      background: url('https://mathsmorant.fr/wp-content/uploads/2021/04/d.jpg') no-repeat center center fixed;
      background-size: cover; overflow: hidden;
    }
    #container { display: flex; width: 100%; height: 100%; }
    #left { flex: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(244, 246, 248, 0.3); position: relative; }
    #right { 
      flex: 1; display:flex; flex-direction: column; align-items:center; 
      background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(15px); 
      -webkit-backdrop-filter: blur(15px); padding: 15px; padding-bottom: 60px; 
      box-shadow: -2px 0 15px rgba(0,0,0,0.2); overflow-y: auto; position: relative; 
    }
    
    h1 { margin: 10px 0; color: #0056b3; text-shadow: 1px 1px 2px white; font-size: 2em; }
    .consigne { background: rgba(255, 255, 255, 0.8); padding: 10px 20px; border-radius: 20px; margin-bottom: 15px; font-weight: bold; color: #333; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    canvas { background: white; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); z-index: 5; }
    
    .confetti {
      position: absolute; width: 10px; height: 10px; z-index: 10;
      pointer-events: none; animation: fall linear forwards;
    }
    @keyframes fall { to { transform: translateY(450px) rotate(360deg); opacity: 0; } }

    .controls { margin-top: 15px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    
    button { padding: 10px 18px; border: none; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; transition: transform 0.1s, background 0.2s; box-shadow: 0 3px 5px rgba(0,0,0,0.1); }
    button:active { transform: translateY(2px); }
    button:disabled { background: #ccc; cursor: not-allowed; opacity: 0.6; }
    
    .btn-blue { background: #007bff; color: white; }
    .btn-solo { background: #28a745; color: white; width: 100%; }
    .btn-reset-icon { background: none; border: none; box-shadow: none; padding: 0 5px; font-size: 16px; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, transform 0.2s; }
    .btn-reset-icon:hover { opacity: 1; transform: rotate(90deg); }
    
    .btn-eval { position: fixed; bottom: 25px; right: 15px; background: #6c757d; color: white; font-size: 11px; padding: 5px 12px; opacity: 0.6; border-radius: 5px; z-index: 10; }

    #chronoBox { background: rgba(255, 255, 255, 0.9); border-radius: 12px; padding: 10px; margin-top: 15px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); flex-wrap: wrap; justify-content: center; }
    #chronoBox.disabled-zone { opacity: 0.5; pointer-events: none; filter: grayscale(1); }
    #chronoBox label { display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }
    
    .card { background: rgba(255, 255, 255, 0.9); border-radius: 12px; padding: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 90%; margin-bottom: 12px; box-sizing: border-box; }
    .card h3 { text-align: center; margin: 0 0 12px 0; font-size: 1.1em; color: #333; line-height: 1.2; }

    table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
    td, th { border: 1px solid #ddd; padding: 6px; text-align: center; }
    th { background: #007bff; color: white; }
    
    #historyList { list-style: none; padding: 0; margin: 0; }
    #historyList li { padding: 4px; border-bottom: 1px solid #eee; font-size: 0.8em; }
    
    #soloPanel { display: none; text-align: center; }
    input[type="number"] { width: 60px; padding: 8px; border-radius: 5px; border: 1px solid #ccc; font-size: 16px; margin-bottom: 10px; }
    
    #angleValue { font-size: 20px; font-weight: bold; color: #0056b3; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(5px); padding: 10px 25px; border-radius: 15px; display: none; text-align: center; margin-top: 15px; border: 1px solid rgba(0, 86, 179, 0.2); }
    #timer { font-size: 28px; font-weight: bold; color: #d9534f; margin-top: 10px; }
    
    #evalReport { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 25px; border-radius: 20px; box-shadow: 0 0 50px rgba(0,0,0,0.3); z-index: 100; width: 350px; text-align: center; }
    #footer { position: fixed; bottom: 5px; right: 10px; font-size: 10px; color: #333; font-weight: bold; z-index: 5; }