/* Base et reset */
* {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
  }
  *:before,
  *:after {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
  }

  body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background-color: #f5f7fa;
      color: #333;
  }

  p {
      margin-bottom: 5px !important;
      font-size: small;
  }

  /* Conteneurs principaux */
  .conteneur {
      border: 1px solid #d0d0d0;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 10px;
      background-color: white;
  }

  .form-container {
      max-width: max-content;
  }

  /* Titres et labels */
  .titre {
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 8px;
      padding-bottom: 4px;
      text-decoration: none;
  }

  .label-autre {
      font-size: 14px;
      font-style: italic;
      color: #555;
      margin-right: 10px;
      display: flex;
      align-items: center;
  }

  /* Sous-conteneurs */
  .conteneur-enfant {
      border-left: none;
      border-top: none;
      border-right: none;
      border-bottom: none;
      padding-left: 10px;
      margin-left: 5px;
      margin-top: 5px;
      margin-bottom: 5px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
  }

  /* Groups */
  .group {
      margin: 2px 0;
      border: 1px solid #eee;
      padding: 5px 8px;
      border-radius: 4px;
      max-width: 100%;
  }

  /* Conteneur de nombre */
  .conteneur-number {
      display: inline-flex;
      align-items: center;
      margin-right: 10px;
  }

  /* Groupe de labels numériques */
  .group-label-number {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0;
  }

  /* Champs numériques - bordure rouge pour les vides */
  .label-number {
      margin: 5px;
      font-size: 14px;
      border: 3px solid #e74c3c;
      border-radius: 4px;
      padding: 8px;
      background-color: #fff;
      transition: all 0.2s ease;
      min-height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: auto;
      min-width: 60px;
      cursor: pointer;
  }

  /* Champs numériques remplis - en bleu comme dans l'exemple */
  .label-number.selected {
      border-color: black;
      border-width: 1px;
      background-color: #0056b3;
      color: white;
  }

  /* Labels d'input */
  .label-input {
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      margin: 0 5px;
  }

  /* Groupe de boutons */
  .bouton-group {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin: 5px 0;
  }

  /* Boutons */
  .bouton {
      margin: 5px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 8px;
      background-color: #f8f9fa;
      color: #333;
      transition: all 0.2s ease;
      min-height: 20px;
      cursor: pointer;
      display: inline-block;
  }

  .bouton:hover {
      background-color: #e9ecef;
  }

  .btn {
      font-size: 14px;
  }

  /* État sélectionné */
  .selected {
      background-color: #0056b3;
      color: #ffffff;
  }

  .bouton.selected {
      background-color: #3498db;
      color: white;
      border-color: #2980b9;
  }

  /* QCM */
  .btn-outline-dark {
      color: #343a40;
      background-color: transparent;
      border-color: #343a40;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      margin: 3px;
  }

  .btn-outline-dark.selected {
      color: #fff;
      background-color: #343a40;
      border-color: #343a40;
  }

  /* Styles pour le mode lecture */
  #show {
      font-family: 'Segoe UI', Arial, sans-serif;
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 6px;
      border: 1px solid #dee2e6;
      margin-top: 20px;
  }

  .titre-lecture {
      font-size: 15px;
      color: #0066cc;
      margin-top: 12px;
      padding-bottom: 5px;
      border-bottom: 1px solid #eee;
  }

  .label-lecture {
      font-size: 14px;
      margin: 8px 0;
      color: #333;
      line-height: 1.5;
  }

  .valeur {
      font-weight: normal;
      font-size: 14px;
      text-decoration: none !important;
      color: #333;
  }

  .titre > .valeur {
      font-weight: normal;
      font-size: 14px;
      text-decoration: none !important;
  }

  .form-control {
      width: 90%;
      max-width: 300px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
  }

  .form-control-textarea {
      width: 90%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
  }

  /* Section header */
  h2 {
      font-size: 18px;
      color: #2c3e50;
      margin: 20px 0 10px 0;
      padding-bottom: 5px;
      border-bottom: 1px solid #eee;
  }

  /* Counter */
  .counter {
      min-width: 30px;
      text-align: center;
      margin: 2px;
  }

  /* Sections collapsibles */
  .collapsible .titre {
      cursor: pointer;
      user-select: none;
  }

  .collapsible .titre::after {
      content: " ▼";
      font-size: 12px;
      color: #777;
  }

  .collapsible.collapsed .titre::after {
      content: " ►";
  }

  .collapsible.collapsed .content {
      display: none;
  }

  /* Toggle containers for onoff */
  .toggle-container {
      margin-top: 8px;
      border-left: 2px solid #eee;
      padding-left: 10px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
  }

  .toggle-container.visible {
      max-height: 300px;
  }

  /* Tabs design */
  #tabs {
      margin-bottom: 15px;
  }

  .tabs-nav {
      display: flex;
      border-bottom: 1px solid #ddd;
  }

  .tab-button {
      padding: 8px 15px;
      border: 1px solid #ddd;
      border-bottom: none;
      background-color: #f8f9fa;
      margin-right: 5px;
      border-radius: 4px 4px 0 0;
      cursor: pointer;
  }

  .tab-button.active {
      background-color: white;
      border-bottom: 1px solid white;
      margin-bottom: -1px;
      font-weight: 600;
  }

  .tab-content {
      display: none;
      padding: 10px;
      border: 1px solid #ddd;
      border-top: none;
  }

  .tab-content.active {
      display: block;
  }

  /* Description */
  .demo-description {
      background-color: #f0f7ff;
      border-left: 4px solid #3498db;
      padding: 10px 15px;
      margin-bottom: 15px;
      border-radius: 0 4px 4px 0;
      font-size: 14px;
  }

  /* Tableaux */
  .tableau-form {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
  }

  .tableau-form th,
  .tableau-form td {
      border: 1px solid #dee2e6;
      padding: 8px;
      text-align: center;
  }

  .tableau-form th {
      background-color: #f8f9fa;
      font-weight: 600;
  }

  .corner-cell, .column-header, .row-header {
      background-color: #f8f9fa;
  }

  /* Clavier virtuel - conservation de votre style original */
  #keyboard {
      border: 1px solid black;
      padding: 10px;
      display: none;
      flex-direction: row;
      position: absolute;
      z-index: 1000;
      background-color: #f0f0f0;
  }

  #alpha-keys {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(11, 1fr);
      gap: 15px;
      flex-grow: 1;
  }

  #numeric-keys {
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      flex-basis: 220px;
      margin-left: 25px;
  }

  .key, #dot, #clear, #backspace, #enter {
      width: 50px;
      height: 50px;
      font-size: 26px;
      border: none;
      border-radius: 5px;
      background-color: #d0d0d0;
      transition: background-color 0.3s ease;
  }

  #clear, #backspace, #enter {
      width: 110px;
      height: 60px;
      grid-column-end: span 2;
  }

  .key:active, #clear:active, #backspace:active, #enter:active, #dot:active {
      background-color: #aaa;
  }

  /* Media queries pour adaptation mobile */
  @media (max-width: 768px) {
      .group-label-number {
          flex-direction: column;
      }

      .label-number, .bouton {
          width: 100%;
          margin-left: 0;
          margin-right: 0;
      }
  }

  /*
 * ===============================================
 * STYLES POUR LES GROUPES EN LIGNE (LECTURE SEULE)
 * ===============================================
 */

/* Conteneur principal pour un groupe de sous-champs en ligne */
.inline-group {
    display: flex;
    align-items: baseline; /* Aligne les textes sur la même ligne de base */
    flex-wrap: wrap;     /* Permet aux éléments d'aller à la ligne si l'écran est trop petit */
    margin-top: 5px;     /* Un peu d'espace par rapport au titre parent */
    padding-left: 10px;  /* Indentation pour les sous-champs */
    font-weight: normal; /* Assure que le texte des sous-champs n'est pas en gras par défaut */
}

/* Style pour chaque élément dans le groupe en ligne */
.inline-group > div {
    padding: 2px 0; /* Un peu d'espace vertical si ça va à la ligne */
}

/* Ajoute un séparateur '|' AVANT chaque élément SAUF LE PREMIER */
.inline-group > div:not(:first-child)::before {
    content: '|';
    color: #cccccc;      /* Couleur grise et discrète pour le séparateur */
    font-weight: lighter; /* Barre plus fine */
    margin: 0 12px;       /* ESPACE crucial autour de la barre */
}