/* Police d'inspiration classique */
        body {
            /*font-family: 'Georgia', serif;*/
            font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
            background-color: #f8f5f0; /* ivoire doux */
            color: #2e2e2e;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        /* En-tête solennel */
        header {
            background-color: #001f3f; /* bleu empire */
            color: #fff8e1; /* blanc chaud */
            padding-left: 1.8rem;
            padding-top: 1.8rem;
            padding-right: 1.8rem;
            text-align: center;
            border-bottom: 5px solid #c9a94d; /* doré */
        }

        header h1 {
            margin: 0;
            font-size: 1.5rem;
            letter-spacing: 1px;
            padding-bottom: 0;
        }
        
        .control-group {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-item {
            display: flex;
            flex-direction: column; /* Label au-dessus du champ */
            align-items: flex-start;
            gap: 0.5rem;
        }

        .date-input-group {
            display: flex;
            width: 100%; /* Prend toute la largeur disponible dans le panneau */
        }

        /* Formulaires */
        form label, .form-item > label {
            font-weight: bold;
            color: #2b2b2b;
        }

        /* Unifie le style de l'input de date et du select personnalisé */
        input[type="date"],
        .choices__inner {
            padding: 0.8rem; /* Un peu plus de padding pour un meilleur alignement vertical */
            border: 1px solid #bbb;
            border-radius: 4px;
            background-color: #fefefe;
            font-size: 1rem;
            width: 100%;
            box-sizing: border-box;
            min-height: auto; /* Nécessaire pour Choices.js */
        }

        /* Ajustement pour que la bordure ne change pas de couleur au focus */
        .is-focused .choices__inner {
            border-color: #bbb;
        }

        .date-input-group input[type="date"] {
            flex-grow: 1; /* L'input s'étire */
        }

        .date-input-group button {
            flex-shrink: 0; /* Les boutons ne rétrécissent pas */
        }

        /* Boutons */
        button {
            padding: 0.6rem 1.2rem;
            background-color: #001f3f;
            color: #fff8e1;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        button:hover {
            color: #374151;
        }

        .view-options label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #444;
            font-size: 0.95rem;
            font-weight: bold;
        }

        #titre_odb label {
            font-weight: bold;
            color: #2b2b2b;
        }

        /* --- AJOUTS POUR LA MISE EN PAGE --- */

        /* 1. Le conteneur principal devient un conteneur flex */
        .main-container {
            display: flex;
            /* Calcule la hauteur restante de la fenêtre (100vh) moins la hauteur approximative du header */
            height: calc(100vh - 105px); /* Ajustez cette valeur si votre header change */
        }

        /* 2. On donne une taille fixe au panneau de contrôle (l'ancienne section.controls) */
        .main-container .controls {
            flex: 0 0 380px; /* Ne grandit pas, ne rétrécit pas, largeur de base 380px */
            padding: 1.5rem;
            background-color: #ffffff;
            overflow-y: auto; /* Ajoute une barre de défilement si le contenu est trop grand */
            border-right: 2px solid #ded6c3; /* Ligne de séparation */
        }

        .main-container .controls .choices {
          width: 300px;
        }

        /* 3. La carte prend tout le reste de la place */
        .main-container #map {
            flex-grow: 1; /* Permet à la carte de grandir */
            height: 100%; /* La carte prend 100% de la hauteur de son parent */
        }

        .une-colonnes {
          width: 40%;           /* largeur totale du bloc */
          margin: auto;         /* centrage horizontal */
          text-align: justify;  /* optionnel : aligner le texte */
          padding-top: 1%;
        }

        .bloc {
          break-inside: avoid;
        }


        /* Container de la popup */
        .map-popup{
          font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
          background: #ffffff;
          color: #1f2937; /* gris foncé */
          border-radius: 10px;
          box-shadow: 0 6px 20px rgba(31,41,55,0.2);
          padding: 12px;
          max-width: 320px;   /* ajuster selon besoin */
          width: max-content;
          line-height: 1.35;
          box-sizing: border-box;
          -webkit-font-smoothing:antialiased;
        }

        /* Header (titre + meta) */
        .map-popup__header{
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-bottom: 8px;
        }

        /* Nom / titre */
        .map-popup__title{
          font-weight: 700;
          font-size: 15px;
          letter-spacing: -0.01em;
          overflow-wrap: anywhere; /* découpe les mots longs */
        }

        /* Meta (date + lieu) */
        .map-popup__meta{
          display: flex;
          gap: 8px;
          align-items: center;
          font-size: 12px;
          color: #6b7280; /* gris moyen */
        }

        /* Séparateur si besoin entre date et lieu */
        .map-popup__date::after{
          content: "•";
          margin: 0 6px;
          color: #d1d5db;
        }

        /* Citation (blockquote) */
        .map-popup__quote{
          margin: 0;
          padding-left: 10px;
          border-left: 3px solid #e6eef9; /* accent léger */
          font-style: italic;
          font-size: 13px;
          color: #374151;
          max-height: none;
          overflow: visible;
          transition: max-height 0.25s ease;
        }

        /* Version "reduite" pour citations longues : masque après N lignes */
        .map-popup__quote--collapsed{
          display: -webkit-box;
          -webkit-line-clamp: 4; /* nombre de lignes visibles par défaut */
          -webkit-box-orient: vertical;
          overflow: hidden;
          max-height: calc(1.35em * 4); /* fallback */
        }

        /* Bouton toggle "Lire la suite" */
        .map-popup__toggle{
          display: inline-block;
          margin-top: 8px;
          background: transparent;
          border: none;
          color: #6b7280;
          cursor: pointer;
          padding: 6px;
          font-size: 13px;
          text-decoration: underline;
          line-height: 1;
        }


        /* Responsive: réduire largeur sur petits écrans */
        @media (max-width: 420px){
          .map-popup{ max-width: 88vw; padding:10px; }
        }

        /* Supprime le cadre/ombre de MapLibre */
        .maplibregl-popup-content {
          background: transparent !important;
          box-shadow: none !important;
          border: none !important;
          padding: 0 !important;
        }

        /* Supprime le petit triangle (la flèche) */
        .maplibregl-popup-tip {
          display: none !important;
        }

        #basemap-form {
          margin-top: 3px;
          padding: 5px;
          background: white;
          font-size: 14px;
          text-align: left;
        }

        #basemap-form label {
          display: block;
          margin-bottom: 4px;
        }

        #basemap-form p {
          font-weight: bold;
          margin: 5px;
        }

        .hidden {
          display: none;
        }

        .faq-actions {
          text-align:right;
          margin-top: 0px;
        }

        .faq-actions .btn {
          display: inline-block;
          margin: 0 10px;
          padding: 10px 20px;
          border-radius: 6px;
          background: #0066cc;
          color: white;
          text-decoration: none;
          font-weight: bold;
        }

        .faq-actions .btn:hover {
          background: #004a99;
        }

        .faq-actions a {
          color: #c9a94d;
          padding: 5px;
        }

        .faq-actions a:hover {
          color: #e0b32a;
          padding: 5px;
        }

        .headerclass {
          display: flex;
          flex-direction: column;
        }


                .main-container-contact {
            display: flex;
            flex-direction: column;
            /* Calcule la hauteur restante de la fenêtre (100vh) moins la hauteur approximative du header */
            height: calc(100vh - 105px); /* Ajustez cette valeur si votre header change */
            padding: 3%;
        }

        /* 2. On donne une taille fixe au panneau de contrôle (l'ancienne section.controls) */
        .main-container-contact .controls {
            flex: 0 0 380px; /* Ne grandit pas, ne rétrécit pas, largeur de base 380px */
            padding: 1.5rem;
            background-color: #ffffff;
            overflow-y: auto; /* Ajoute une barre de défilement si le contenu est trop grand */
            border-right: 2px solid #ded6c3; /* Ligne de séparation */
        }

        .main-container-contact .controls .choices {
          width: 300px;
        }

        /* 3. La carte prend tout le reste de la place */
        .main-container-contact #map {
            flex-grow: 1; /* Permet à la carte de grandir */
            height: 100%; /* La carte prend 100% de la hauteur de son parent */
        }