:root {
      --primary: #458CA5;
      --primary-light: #E8F3F6;
      --primary-dark: #2F6B82;
      --text: #1F2A33;
      --border: #D5DFE5;

      --hl1: #ffeb3b;
      --hl2: #ffd54f;
      --hl3: #ffb74d;
      --hl4: #ff8a65;
      --hl5: #ffab91;
    }

    body {
      background: linear-gradient(180deg, #f8fafc 0%, #F4F7F9 100%);
      margin: 0;
      color: var(--text);
    }

    .container {
      background: #fff;
      padding: 32px 40px;
      border-radius: 16px;
      margin: 25px auto;
      max-width: 1040px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    }

    h1 {
      color: var(--primary);
      margin-top: 12px;
      font-size: 32px;
      font-weight: 600;
    }

    .toolbar {
      display: flex;
      gap: 12px;
      margin: 0px 0 25px 0;
    }

    button, .export-btn {
      padding: 10px 18px;
      border-radius: 6px;
      border: none;
      background: var(--primary);
      color: white;
      font-size: 15px;
      cursor: pointer;
      transition: 0.2s;
    }
    button:hover {
      background: var(--primary-dark);
      transform: translateY(-1px);
    }

    .export-btn-group {
      margin-top: 10px;
      display: flex;
      gap: 10px;
    }

    textarea, select, input[type="text"] {
      border: 1px solid var(--border);
      border-radius: 6px;
      width: 30%;
      margin-bottom: 15px;
    }

    textarea {
      width: 100%;
      min-height: 300px;
      padding: 12px;
     }     
     
    .container area, .container select, .container input[type="text"], .container div  {
       padding: 12px;
      
    }
    select  {
        background: linear-gradient(180deg, #f8fafc 0%, #F4F7F9 100%);
    }

    textarea:focus, select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(69, 140, 165, 0.2);
    }

    #infoZone {
      background-color: var(--primary-light);
      padding: 12px 15px;
      border-radius: 5px;
      margin-bottom: 20px;
      /*font-size: 15px;*/
      color: #333;
      border-left: 4px solid var(--primary-color);
    }

    .hl-1 { background: var(--hl1); }
    .hl-2 { background: var(--hl2); }
    .hl-3 { background: var(--hl3); }
    .hl-4 { background: var(--hl4); }
    .hl-5 { background: var(--hl5); }


  #highlightedText{
    white-space: normal;
    line-height: 1.6;
    font-size: 15px;
    color:#2c3e50;
    background:#f8fbfd;
    border:1px solid #d6e3ea;
    border-radius:8px;
    padding:18px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

    label {
       font-weight: 500;
       font-size: 12pt;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 25px;
      display: none;
      border-radius: 6px;
      overflow: hidden;
    }

    th {
      background: var(--primary);
      color: white;
      padding: 12px;
      cursor: pointer;
      user-select: none;
    }

    td {
      padding: 10px;
      border-bottom: 1px solid #eee;
    }

    tr:nth-child(even) {
      background: #f9f9f9;
    }

.progress-container {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: #2c7be5;
  transition: width 0.25s ease-out;
  will-change: width;
}

/* Ajout HightLightFromSpacy */

.loterre-term {
  background: #458CA5;
  color: white;
  padding: 2px 4px;
  border-radius: 4px;
  margin: 0 1px;
}

.loterre-term a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.loterre-term:hover {
  background: #2f6f86;
}

.loterre-highlight{
  background:#cfe6ef;
  border-bottom:2px solid #458CA5;
  padding:2px 3px;
  border-radius:3px;
  transition:all 0.15s ease;
  position: relative;   /* correction */
}

.loterre-highlight:hover{

  background:#458CA5;
  color:white;
}

.loterre-highlight a{

  text-decoration:none;
  color:inherit;
  font-weight:500;
}