.timeline {
        position: relative;
        margin: 50px auto;
        padding: 20px;
        max-width: 1000px;
      }
  
      .timeline::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 4px;
        height: 100%;
        background-color: var(--theme-primary);
        transition: background-color 0.3s ease;
      }
  
      .timeline-item {
        position: relative;
        margin: 30px 0;
        width: 45%;
        padding: 20px;
        background: var(--theme-tertiary);
        border: 1px solid var(--theme-secondary);
        border-radius: 8px;
        box-shadow: 0 4px 4px var(--theme-text);
        cursor: pointer;
        transition: all 0.3s ease;
      }
  
    .timeline-item.left { right:  1%; }
    .timeline-item.right { left: 51%; }
      .timeline-item:hover {
        transform: scale(1.03);
        box-shadow: 0 6px 12px var(--theme-text);
      }
      
      /* Modification du style des modals pour une seule colonne et défilement */
      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        z-index: 1000;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
      }

      .modal-header {
        padding: 20px;
        border-bottom: 1px solid #eee;
        background: var(--theme-secondary);
        border-radius: 12px 12px 0 0;
        position: sticky;
        top: 0;
        z-index: 1001;
      }     


      .modal-content {
        background: var(--theme-background);
        width: 90%;
        max-width: 800px;
        margin: 20px auto;
        border-radius: 12px;
        position: relative;
        display: flex;
        flex-direction: column;
        max-height: 90vh;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
      }

  
      .modal-body {
        padding: 20px;
        overflow-y: auto;
        flex-grow: 1;
      }
  
      .modal-section {
        background: var(--theme-tertiary);
        color: var(--theme-text); /* Couleur du texte */
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px var(--theme-text);
      }
      .modal-section img {
        max-width: 100%;
        height: auto;
        margin: 10px 0;
        border-radius: 4px;
      }
  
      .modal-section h3 {
        margin-top: 0;
        color: var(--theme-primary);
      }
  
    .close-modal {
      position: absolute;
      top: 15px;
      right: 15px;
      background: red; /* Couleur de fond par défaut */
      color: white;
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      font-size: 20px;
      cursor: pointer;
      transition: background-color 0.3s;
      z-index: 1002;
    }

    .close-modal:hover {
      background-color: green; /* Couleur de fond au survol */
    }
      /* Style pour les éléments audio */
      audio {
        width: 100%;
        margin: 10px 0;
      }
  
      /* Style pour les objets embarqués (PDF) */
      object {
        width: 100%;
        height: 500px;
        margin: 10px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
  
      /* Style pour les tableaux */
      table {
        width: 100%;
        border-collapse: collapse;
        margin: 10px 0;
      }
  
      table, th, td {
        border: px solid #ddd;
      }
  
      th, td {
        padding: 10px;
        text-align: left;
      }
  
      th {
        background-color: var(--theme-background);
      }
  
      @media (max-width: 768px) {
        .modal-content {
          width: 95%;
          margin: 10px auto;
        }
      }
    
        /* ========== Bouton de Retour ========== */
        .back-button {
            position: fixed; /* Position fixe pour rester visible en haut à gauche */
            top: 10px; /* Distance du haut */
            left: 10px; /* Distance de la gauche */
            background-color: #c39b77; /* Couleur de fond */
            border: none; /* Pas de bordure */
            padding: 10px 15px; /* Espacement interne */
            border-radius: 5px; /* Coins arrondis */
            color: white; /* Couleur du texte */
            font-size: 1em; /* Taille du texte */
            cursor: pointer; /* Curseur pointeur pour indiquer l'interactivité */
            box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* Ombre portée */
        }
        /* ========== En-tête de la Page ========== */
        /*header {
        /*    background-color: #f2e3b3; /* Couleur de fond de l'en-tête */
        /*    padding: 20px; /* Espacement interne */
        /*    text-align: center; /* Centrage du texte */
        /*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre portée */
        /*}
        h1 {
            margin: 0; /* Suppression des marges autour du titre */
        /*}
        /* ========== Conteneur de la Timeline ========== */
        .timeline {
            position: relative; /* Positionnement relatif pour la ligne centrale */
            margin: 50px auto; /* Centre horizontalement et espace vertical */
            padding: 20px; /* Espacement interne */
            max-width: 800px; /* Largeur maximale */
        }
        /* Ligne verticale centrale de la timeline */
        .timeline::before {
            content: '';
            position: absolute;
            left: 50%; /* Centre horizontalement */
            top: 0;
            transform: translateX(-50%); /* Ajustement du centrage */
            width: 4px; /* Largeur de la ligne */
            height: 100%; /* Hauteur de la timeline */
        /*    background-color: #eed498; /* Couleur de la ligne */
        }
        /* ========== Style des Éléments de la Timeline (Panels) ========== */
        /*.timeline-item {
        /*    position: relative; /* Pour un positionnement par rapport à la timeline */
        /*    margin: 30px 0; /* Espacement vertical entre les éléments */
        /*    width: 45%; /* Largeur des panels */
        /*    padding: 15px; /* Espacement interne */
        /*    background: #fef9e7; /* Fond doux pour le panel */
        /*    border: 1px solid #eed498; /* Bordure assortie */
        /*    border-radius: 5px; /* Coins arrondis */
        /*    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Ombre portée légère */
        /*    cursor: pointer; /* Indique que l'élément est cliquable */
        /*    transition: transform 0.3s, background-color 0.3s; /* Animation pour l'effet au survol */
        /*}
        /* Positionnement à gauche ou à droite de la timeline */
        /*.timeline-item.left {
        /*    left: 0;
        /*}
        /*.timeline-item.right {
        /*    left: 55%;
        }
        /* Effet au survol : légère augmentation de taille et modification du fond */
        /*.timeline-item:hover {
        /*    background-color: #fff; /* Fond plus clair lors du survol */
        /*    transform: scale(1.02); /* Légère augmentation de taille */
        /*}
        /* Style pour la date à l'intérieur des éléments */
        .timeline-date {
            font-size: 0.8em; /* Texte plus petit */
            color: var(--theme-text); /* Couleur grisée */
            margin-right: 10px; /* Espacement entre la date et le texte */
        }
        /* ========== Styles pour les Modals Individuels ========== */
        /* Ce style a été supprimé car déjà présent plus haut dans le document */
        /* Bouton pour fermer le modal */
        /*.close-modal {
        /*    position: absolute; /* Positionné par rapport au modal */
        /*    top: 10px; /* Distance du haut */
        /*    right: 10px; /* Distance de la droite */
        /*    background: #c0392b; /* Couleur de fond du bouton */
        /*    color: #fff; /* Couleur du texte */
        /*    border: none; /* Pas de bordure */
        /*    border-radius: 50%; /* Forme ronde */
        /*    width: 25px; /* Largeur du bouton */
        /*    height: 25px; /* Hauteur du bouton */
        /*    text-align: center; /* Centrage du texte */
        /*    cursor: pointer; /* Curseur pointeur */
        /*}
        /* ========== Animation d'Apparition des Panels ========== */
        @keyframes slideIn {
            to {
            opacity: 1; /* Rendre l'élément visible */
            transform: translateY(0); /* Positionner à l'endroit prévu */
            }
        }
        /* Appliquer l'animation aux panels */
        .timeline-item {
            opacity: 0; /* Initialement transparent */
            transform: translateY(30px); /* Position décalée */
            animation: slideIn 0.6s forwards; /* Animation d'apparition */
        }
        .timeline-item:nth-child(odd) {
            animation-delay: 0.3s; /* Décalage pour les éléments impairs */
        }
        .timeline-item:nth-child(even) {
            animation-delay: 0.6s; /* Décalage pour les éléments pairs */
        }

        fieldset {
            border: 1px solid #ddd;
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 8px;
        }
        
        legend {
            padding: 0 10px;
            color: #333;
            font-size: 1.1em;
        }
        
        label {
            display: block;
            padding: 8px;
            margin: 5px 0;
            border-radius: 4px;
        }
        
        label:hover {
            background-color: #f5f5f5;
        }