/* style.css */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', sans-serif;
}
#map {
  height: 100%;
  width: 100%;
  z-index: 1;
}

/* --- Boutons flottants --- */
.app-button {
  position: fixed;
  z-index: 1000;

  background: #007bff;
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.app-button:hover {
  transform: scale(1.05);
  background: #0056b3;
}

/* Bouton Ajouter (+) */
.add-memory-btn {
  bottom: 150px;
  right: 17px;
  top: auto;
  left: auto;
  width: 45px !important;
  height: 45px !important;
  padding: 0;
  line-height: 45px;
  text-align: center;
  font-size: 24px;
  border-radius: 50%;
  transform: none;
}

/* --- Modales --- */
.modal {
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: transparent;   /* <-- supprime le gris */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  pointer-events: none;            /* <-- permet de cliquer carte/timeline derrière */
}
.hidden { display: none !important; }

/* Contenu des modales */
.modal-content {
  background-color: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  cursor: default;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  max-height: 90vh;
  overflow-y: auto;
  z-index: 2001;
}
/* Permet de cliquer "à travers" l’overlay de la modale (timeline, carte, etc.) */
.modal {
  pointer-events: auto;
}

/* La fenêtre reste interactive (boutons, scroll, etc.) */
.modal .modal-content {
  pointer-events: auto;
}

/* Formulaire (gauche) */
/* Panneaux gauche : même largeur + même hauteur */
.modal-content.form-content,
.modal-content.view-content {
  left: 43px;
  top: 10px;                       /* laisse visible le zoom + de la carte */
  transform: none;                 /* plus de centrage vertical */
  width: clamp(300px, 33vw, 450px);/* même largeur pour les 2 */
  max-width: none;
  max-height: calc(90vh - 100px);  /* même hauteur pour les 2 */
  overflow-y: auto;
}

/* Ajustement padding (si tu veux garder le style actuel) */
.modal-content.view-content {
  padding: 20px;
  box-sizing: border-box;
}


/* Bouton de fermeture pour la modale de formulaire seulement */
.close {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 28px;
  cursor: pointer;
  color: #888;
  z-index: 10;
}
.close:hover { color: #000; }
/* Boutons fenêtre (viewer) : alignés en haut à droite */
.window-controls {
  position: absolute;
  top: 5px;
  right: 10px;
  display: flex;
  gap: 2px;
  align-items: center;
}

/* boutons compacts et alignés */
.window-controls .wc-btn {
  width: 25px;
  height: 25px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 8px;
}

/* croix (span) même gabarit */
.window-controls .close-view {
  font-size: 28px;
}


/* --- FORMULAIRES --- */
input, textarea, button, select {
  
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font-family: inherit;
}

#placeForm input[type="text"],
#placeForm input[type="datetime-local"],
#placeForm textarea,
#placeForm input[type="file"] {
  width: 100%;
  display: block;
  max-width: 100%;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.input-group {
  margin-bottom: 20px;
  display: block;
  width: 100%;
  clear: both;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 0.95em;
  color: #333;
}

/* Bouton géocodage */
.geo-action-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  gap: 10px;
}
.geo-action-group button {
  width: auto;
  padding: 8px 12px;
  font-size: 13px;
  background-color: #f0ad4e;
  color: white;
  border: none;
  cursor: pointer;
  margin: 0;
}
.geo-action-group button:hover { background-color: #ec971f; }

/* Bouton Sauvegarder */
#saveBtn {
  width: 100%;
  background-color: #28a745;
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  font-size: 16px;
}
#saveBtn:hover { background-color: #218838; }

/* --- Transports --- */
.transport-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
  padding: 5px 0;
}
.transport-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: normal;
  margin: 0;
  background: #f1f1f1;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.9em;
}
.transport-options input[type="checkbox"] {
  width: auto !important;
  margin: 0;
  display: inline-block;
}

/* --- Médias (Edition) --- */
#existingMediaContainer {
  margin-top: 15px;
  border-top: 1px solid #eee;
  padding-top: 15px;
  display: block;
}

#mediaThumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}

.thumbnail-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
}
.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.delete-media-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
  margin: 0;
}
.delete-media-btn:hover { background: #c82333; }

/* Barre de progression */
#progressContainer {
  text-align: center;
  margin-top: 15px;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
}
progress { width: 100%; height: 20px; }

/* --- Visualisation (Diaporama) --- */
/* --- Visualisation (Diaporama) --- */
.view-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-right: 0;
  margin-bottom: 10px;
}

/* Jour (J1, J2, …) */
#viewDayNumber {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.00em;
  text-transform: uppercase;
  color: blueviolet;
}

/* Titre du souvenir */
.view-header h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: #222;
}

/* Barre d’icônes sous le titre, alignée à droite */
.view-header .actions {
  margin-top: 6px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.day-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.day-nav-btn {
  border: none;
 
  color: #666;
  font-size: 20px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.day-nav-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
}

.meta-date {
  color: #337fd2;
font-size: 12px;
font-weight: bold;
  margin: 0 0 5px 0;
}
.meta-transport {
  color: #444;
  font-size: 0.9em;
  margin: 0 0 8px 0;
  font-weight: 500;
}
#viewDesc {
  line-height: 1.5;
  color: #333;
  margin-bottom: 20px;
}

.actions button {
  width: auto;
  padding: 6px 12px;
  margin-left: 5px;
  font-size: 0.85em;
  cursor: pointer;
  border-radius: 4px;
}
.btn-edit { background-color: #ffc107; border: none; color: #000; }
.btn-delete { background-color: #dc3545; border: none; color: #fff; }
.btn-zoom { background-color: #6c757d; border: none; color: #fff; }
.btn-comment { background-color: #17a2b8; border: none; color: #fff; }

/* Diaporama */
.slideshow-container {
  position: relative;
  background: #000;
  height: auto;
  max-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 15px;
}
#mediaContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-slide {
  max-width: 100%;
  max-height: 50vh;
  display: none;
}
/* AUDIO : override du slide classique */
/* AUDIO : ne doit JAMAIS s'afficher si pas "active" */
.media-slide.media-audio {
  display: none;           /* <- clé : caché par défaut */
  max-height: none;
  height: auto;
}

/* AUDIO : visible uniquement quand le slide est actif */
.media-slide.media-audio.active {
  display: flex;           /* <- flex seulement quand actif */
}


.media-slide.active { display: block; }
video.media-slide { width: 100%; }

/* Flèches diaporama */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  user-select: none;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  z-index: 10;
}
.next { right: 10px; }
.prev { left: 10px; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

/* Zoom plein écran */
/* Zoom plein écran */
.modal.zoomed { background-color: rgba(0,0,0,0.95); }

.modal.zoomed .modal-content {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 98vw !important;
  height: 98vh !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0;
  background: black;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* On cache tout le reste (titre, textes, commentaires, etc.) */
.modal.zoomed .view-header,
.modal.zoomed .meta-date,
.modal.zoomed .meta-transport,
.modal.zoomed #viewDesc,
.modal.zoomed .comment-form,
.modal.zoomed .comments-bar,
.modal.zoomed .window-controls .wc-btn:not(.close-view):not(.btn-zoom) {
  display: none !important;
}

/* On garde la croix */
.modal.zoomed .window-controls .close-view {
  display: inline-flex !important;
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 4000;
  font-size: 34px;
  color: #fff;
  background: rgba(0,0,0,0.35);
  border-radius: 10px;
  padding: 6px 12px;
}

/* On garde le diaporama et les flèches */
.modal.zoomed .slideshow-container {
  max-height: 100%;
  height: 100%;
  width: 100%;
  margin: 0;
  background: black;
}

.modal.zoomed .prev,
.modal.zoomed .next {
  display: block !important;
  z-index: 4000;
}

/* Médias */
.modal.zoomed .media-slide {
  max-height: 98vh;
  max-width: 98vw;
  object-fit: contain;
}
/* --- TIMELINE --- */
#timelineContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.timeline-bar {
  width: 100%;
  height: 155px;
  min-height: 155px;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height 0.3s ease, min-height 0.3s ease;
}
.timeline-header {
  height: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.05);
}
.timeline-toggle {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
}
.timeline-sort { display: flex; gap: 4px; }
.timeline-sort-btn {
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.timeline-sort-btn:hover { background: rgba(255,255,255,0.25); }

/* --- Timeline : sélection utilisateur --- */
.timeline-users { display: flex; gap: 6px; align-items: center; }
/* Par défaut : boutons noirs */
.timeline-user-btn {
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
  line-height: 1.4;
  opacity: 0.7;
}

.timeline-user-btn:hover {
  opacity: 0.9;
}

/* Actif : couleur selon utilisateur */
.timeline-user-btn.active[data-user="Eliot"] {
  background: #e53935; /* rouge */
  opacity: 1;
}

.timeline-user-btn.active[data-user="Clémence"] {
  background: #1e88e5; /* bleu */
  opacity: 1;
}

/* Optionnel : quand actif, on renforce */
.timeline-user-btn.active[data-user="Eliot"] {
  box-shadow: 0 0 6px rgba(229,57,53,0.8);
}


.timeline-user-btn:hover { opacity: 0.95; }
.timeline-user-btn.active {
  opacity: 1;
  outline: 2px solid rgba(255,255,255,0.45);
  outline-offset: 1px;
}
.timeline-user-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 12px;
  font-size: 11px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  width: fit-content;
  opacity: 0.85;
}
.timeline-user-badge:hover { background: rgba(255,255,255,0.22); opacity: 1; }


.timeline-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 5px 0;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}
.timeline-arrow {
  border: none;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 0 10px;
  height: 100%;
  z-index: 2;
  transition: background 0.2s;
}
.timeline-arrow:hover { background: rgba(255,255,255,0.1); }

.timeline-scroller {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 5px 10px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.timeline-scroller::-webkit-scrollbar { display: none; }
.timeline-scroller { scrollbar-width: none; }

.timeline-bar.collapsed { height: 30px; min-height: 30px; }
.timeline-bar.collapsed .timeline-body { display: none; }

.timeline-item {
  display: inline-block;
  vertical-align: top;
  width: 160px;
  height: 110px;
  background: #222;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  text-align: left;
  margin-right: 8px;
  border-color: whitesmoke;
}
.timeline-item.active {
  border-color: #ff4757;
  box-shadow: 0 0 8px rgba(255,71,87,0.6);
}
.timeline-item:hover { background-color: #333; }
.timeline-item .thumbnail {
  width: 100%;
  height: 60px;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}
.timeline-item .info {
  font-size: 10px;
  padding: 4px 6px;
  line-height: 1.3;
}
.timeline-item .info strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
}
.timeline-item .info-location {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ccc;
}
.timeline-item .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.timeline-item .step-info {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 9px;
  color: #ddd;
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}
.timeline-item .step-label { font-weight: bold; color: #ffdd59; }
.timeline-item .distance-label { color: #4da3ff; font-weight: 500; margin-left: 4px; }

/* --- Marqueurs photo --- */
.custom-photo-icon-wrapper { background: none !important; border: none !important; }
.photo-marker-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #007bff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #f7f7f7;
  transition: all 0.2s ease-in-out;
}
.photo-marker-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: block;        /* au lieu de flex */
  background: transparent; /* évite l'effet "bandes" si image alpha */
}

.marker-thumbnail{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  transform: scale(2.65);         /* ✅ supprime les liserés/bandes */
  transform-origin: center;
}
.photo-marker-icon.active { border-color: red; transform: scale(1.1); }
.marker-step-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff4757;
  color: #fff;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.timeline-first, .timeline-last { font-size: 15px; padding: 0 8px; }

/* --- COMMENTAIRES (icônes + post-it) --- */
.comments-bar {
  margin: 4px 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.comment-icon {
  width: 68px;
  height: 32px;
  background: var(--comment-color, #fffa8b);
  border: 1px solid var(--comment-border, #e0d58a);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.comment-icon::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 8px solid var(--comment-corner, #fbe26a);
  border-left: 8px solid transparent;
  right: 0;
  top: 0;
}

/* Formulaire commentaire */
.comment-form {
  margin: 8px 0 12px 0;
  padding: 8px;
  background: #fffbea;
  border: 1px solid #e0d58a;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  font-size: 0.9em;
}
.comment-form-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.comment-form button {
  font-size: 0.8em;
  padding: 6px 12px;
}

/* Choix couleur commentaire (tap-friendly) */
.comment-color-choices {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px 0;
  font-size: 0.9em;
  flex-wrap: wrap;
}
.comment-color-choices label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.03);
}
.comment-color-choices input[type="radio"] { margin: 0; }
.color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.2);
  display: inline-block;
}
.swatch-yellow { background: #fffa8b; }
.swatch-blue   { background: #cce5ff; }
.swatch-green  { background: #d4edda; }
.swatch-pink   { background: #ffd6e7; }
.swatch-orange { background: #ffe0b2; }

/* Tooltip post-it */
.comment-tooltip {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
  left: 0;
  top: 0;
}
.comment-postit {
  background: #fff8a5;
  border: 1px solid #e0d58a;
  padding: 8px 10px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  max-width: 220px;
  transform: rotate(-2deg);
  font-size: 0.9em;
}
.comment-postit-title { font-weight: bold; margin-bottom: 3px; }
.comment-postit-author { font-style: italic; margin-bottom: 4px; color: #555; }
.comment-postit-text { white-space: pre-wrap; }
.comment-icon-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* max 2 lignes */
  overflow: hidden;

  max-width: calc(100% - 10px);
  line-height: 1.15;
  font-weight: 600;
  color: #222;
  text-align: center;

  /* optionnel : meilleure lisibilité sur fonds clairs */
  background: rgba(255,255,255,0.65);
  padding: 1px 4px;
  border-radius: 3px;
}

/* --- VERSION MOBILE / PORTABLE --- */
/* --- VERSION MOBILE / PORTABLE --- */
@media (max-width: 768px) {

  .modal { align-items: flex-start; }

  /* RÈGLE CLÉ MODIFIÉE POUR ÉVITER LE DÉBORDEMENT */
  .modal-content {
    /* Changement de positionnement :
       - 'absolute' dans le parent 'modal'
       - Centrage horizontal (X) et positionnement fixe en haut (Y)
    */
    position: absolute;
    left: 50% !important;
    top: 15px; /* Marge fixe en haut de l'écran */
    transform: translateX(-50%); /* Centrage horizontal uniquement */

    width: 95vw;
    max-width: 95vw;

    /* CALCUL DE HAUTEUR SÉCURISÉ : 100% de la hauteur du viewport moins une marge de 30px (15px haut + 15px bas) */
    max-height: calc(100vh - 30px);
    
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto; /* Garantir que le contenu long est défilable */
    z-index: 2001;
  }

  /* Règle spécifique pour les formulaires de modification/vue */
  .modal-content.form-content,
  .modal-content.view-content {
    left: 50% !important;
    top: 5px; /* Aligné sur la règle générique */
    transform: translateX(-50%);

    width: 95vw;
    max-width: 95vw;
    min-width: 0;
    max-height: calc(100vh - 160px);
  }

  /* Ajustement du bouton fermer */
  .close {
    right: 10px;
    top: 10px;
  }

  /* Diaporama : plus petit en mobile */
  .slideshow-container {
    max-height: 35vh;
  }
  .media-slide {
    max-height: 35vh;
  }

  /* Timeline : un peu plus compacte */
  .timeline-bar {
    height: 145px;
    min-height: 145px;
  }
  .timeline-item {
    width: 140px;
  }
}
/* Animation "flash/pulse" pour le marqueur actif */
@keyframes markerPulse {
  0%   { box-shadow: 0 2px 5px rgba(0,0,0,0.4), 0 0 0 0 rgba(255,0,0,0.55); }
  70%  { box-shadow: 0 2px 5px rgba(0,0,0,0.4), 0 0 0 14px rgba(255,0,0,0); }
  100% { box-shadow: 0 2px 5px rgba(0,0,0,0.4), 0 0 0 0 rgba(255,0,0,0); }
}

.photo-marker-icon.active {
  border-color: red;
  transform: scale(1.1);
  animation: markerPulse 1.1s ease-out infinite;
}
/* ============================= */
/* MODE ZOOM : visibilité ciblée */
/* ============================= */
.modal.zoomed .window-controls .btn-zoom {
  display: none !important;
}


/* --- Viewer : ligne unique drapeau / lieu / transport / distances --- */
.modal-content.view-content .day-nav{
  display:flex;
  padding-top: 10px;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}

.modal-content.view-content .meta-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}

.modal-content.view-content .flag-img{
  width:18px;
  height:13px;
  display:none;
  border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}

.modal-content.view-content .meta-distance{
  opacity:0.85;
}


/* Viewer meta line: même style pour ville/pays, transport, distances */
.meta-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;}
.meta-line #viewLocationLine,
.meta-line .meta-transport,
.meta-line .meta-distance{font-size:0.95em;font-weight:500;color:#444;margin:0;}
.meta-line .meta-transport{font-style:normal;}
.meta-line .meta-distance{opacity:0.9;}
.flag-img{width:18px;height:13px;display:inline-block;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0.2);}

.timeline-flag{
  width: 18px;
  height: 13px;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 2px;
}
#modalView.zoomed.single-media .prev,
#modalView.zoomed.single-media .next {
  display: none !important;
}

/* --- Mobile : masquer flèches gauche / droite uniquement --- */
@media (max-width: 768px) {
  .timeline-arrow-left,
  .timeline-arrow-right {
    display: none !important;
  }
}
/* --- Titre carte --- */
/* --- Image titre sur la carte --- */
/* --- Image PNG transparente sur la carte --- */
#mapTitle{
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;          /* au-dessus de Leaflet */
  pointer-events: auto;
  background: transparent !important;
  padding: 0 !important;
}

#mapTitle img{
  height: 100px;
  width: auto;
  display: block;
  background: transparent !important;
}
/* --- Mobile : photomonde derrière les modales --- */
@media (max-width: 768px) {
  #mapTitle {
    z-index: 500; /* < modal (2000) */
  }
}
.meta-temp{
  color:#444;
  font-size:0.9em;
  font-weight:500;
  opacity:0.9;
}
.subscribe-btn{
  bottom: 200px; /* pour ne pas chevaucher le + */
  right: 16px;
}
.locate-btn{
  position: fixed;
  right: 16px;
  bottom: 250px; /* ajuste pour ne pas chevaucher tes autres boutons */
  z-index: 2000;
}
.locate-btn.active { outline: 2px solid #111; }

audio.media-slide {
  width: 100%;
  margin: 15px 0;
}
.thumbnail-audio {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: #f1f1f1;
}
.record-btn {
  background: #dc3545;
color: white;
border-radius: 50%;
width: 25px;
height: 25px;
border: none;

/* centrage parfait du point */
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;

}

.record-btn.recording {
  background: #111;
}
.record-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}



.stop-btn, .play-btn{
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
}

.stop-btn{ background:#111; color:#fff; }
.play-btn{ background:#2563eb; color:#fff; }

.recording-indicator{
  font-weight:700;
  opacity:0.9;
}

.hidden{ display:none !important; }
.audio-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

/* Onde sonore */
.audio-wave {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  height: 50px;
}

.audio-wave span {
  width: 6px;
  height: 20%;
  background: #2563eb;
  border-radius: 4px;
  animation: waveIdle 1.2s infinite ease-in-out;
}

.audio-wave.playing span {
  animation: wavePlay 1s infinite ease-in-out;
}

/* décalage des barres */
.audio-wave span:nth-child(1) { animation-delay: 0s; }
.audio-wave span:nth-child(2) { animation-delay: .1s; }
.audio-wave span:nth-child(3) { animation-delay: .2s; }
.audio-wave span:nth-child(4) { animation-delay: .3s; }
.audio-wave span:nth-child(5) { animation-delay: .4s; }

@keyframes wavePlay {
  0%   { height: 20%; }
  50%  { height: 100%; }
  100% { height: 20%; }
}

@keyframes waveIdle {
  0%,100% { height: 30%; opacity: 0.4; }
  50%     { height: 50%; opacity: 0.6; }
}



.audio-wave {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  height: 30px;
}

.audio-wave span {
  width: 4px;
  height: 10px;
  background: #4da3ff;
  opacity: 0.4;
  animation: none;
}

.audio-wave.playing span {
  animation: wave 1s infinite ease-in-out;
}

@keyframes wave {
  0% { height: 6px; }
  50% { height: 26px; }
  100% { height: 6px; }
}


/* AUDIO : pas de fond noir */
.media-audio {
  background: transparent !important;
}

.audio-label {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 6px;
  color: #fff;              /* ✅ visible sur fond noir */
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.thumbnail-wrapper {
  position: relative;
}

.media-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.65);
  color: #fff;
  pointer-events: none;
}
/* Indication "clique ici pour le son" */
/* Tooltip sur le conteneur (ne touche PAS au transform de centrage) */
#mapTitle.audio-hint { position: fixed; } /* garde ton layout */
#mapTitle.audio-hint::after {
  content: "🔊 Clique sur le logo pour activer le son";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  font-size: 12px;
  color: white;
  background: rgba(0,0,0,0.7);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}

/* Animation sur l’IMAGE seulement */
#mapTitle.audio-hint #playYodel {
  animation: pulseClickLogo 1.6s infinite;
  cursor: pointer;
  transform-origin: 50% 50%;
}

@keyframes pulseClickLogo {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0.6)); }
  70%  { transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(255,255,255,0)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0.6)); }
}
.desc-toggle {
  background: none;
  border: none;
  color: #337fd2;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 0;
  display: block;
}

.desc-toggle.hidden {
  display: none;
}
/* ================================
   DIAPORAMA PLEIN ÉCRAN (TIMELINE)
================================== */
.timeline-slideshow-btn{
  border: none;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 14px;
  padding: 2px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.timeline-slideshow-btn:hover{ background: rgba(255,255,255,0.22); }

.timeline-slideshow-modal{
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-slideshow-window{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.timeline-slideshow-topbar{
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  box-sizing: border-box;
  color: #fff;
}

.timeline-slideshow-close{
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}
.timeline-slideshow-close:hover{ background: rgba(255,255,255,0.22); }

.timeline-slideshow-stage{
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-ss-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 34px;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  z-index: 2;
}
.timeline-ss-nav:hover{ background: rgba(255,255,255,0.22); }
.timeline-ss-prev{ left: 12px; }
.timeline-ss-next{ right: 12px; }

.timeline-slideshow-content{
  width: min(1100px, 96vw);
  height: min(84vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

.timeline-ss-slide{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.timeline-ss-media{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.timeline-ss-media img,
.timeline-ss-media video{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.timeline-ss-media audio{
  width: min(700px, 92vw);
}

/* --- Meta sous le média --- */
.timeline-ss-meta{
  margin-top: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.timeline-ss-meta-row{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0.95;
}

.timeline-ss-flag{
  width: 22px;
  height: 16px;
  border-radius: 3px;
}

.timeline-ss-title{
  font-size: 18px;
  font-weight: 600;
}

.timeline-ss-dist{
  opacity: 0.95;
  font-size: 13px;
}

.timeline-ss-empty{
  color: #fff;
  font-size: 16px;
  opacity: 0.9;
}
/* --- Ligne : Titre + Ticker (même ligne, sous le drapeau) --- */
.timeline-ss-titleline{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

/* Titre */
.timeline-ss-titleline .timeline-ss-title{
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.1;
}

/* Ticker à droite (sans background) */
.timeline-ss-titleline .timeline-ss-ticker{
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  background: none;
  padding: 0;
  min-width: 0;
}

/* Track animé */
.timeline-ss-titleline .timeline-ss-ticker-track{
  display: inline-flex;
  gap: 40px;
  will-change: transform;
  animation: timelineTickerScroll var(--ticker-duration, 45s) linear infinite; /* plus lent */
}

/* Item */
.timeline-ss-titleline .timeline-ss-ticker-item{
  display: inline-block;
  font-size: 14px;
  opacity: 0.95;
}

@keyframes timelineTickerScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Boutons début / fin du diaporama — positionnés à côté de < et > */
.timeline-ss-first,
.timeline-ss-last{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;

  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  border-radius: 12px;
  width: 38px;
  height: 38px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-ss-first:hover,
.timeline-ss-last:hover{
  background: rgba(255,255,255,0.22);
}

/* Décalage pour éviter le chevauchement avec < (12px) et > (12px) */
.timeline-ss-first{ left: 64px; }  /* après ⏮ vient ◀ à 12px */
.timeline-ss-last{  right: 64px; } /* avant ⏭ vient ▶ à 12px */
/* =========================
   SWI swipe – fenêtre étape
   ========================= */
/* --- Base de la carte --- */
#modalView .modal-content.view-content {
  will-change: transform, opacity;
  --swi-x: 0px;
  --swi-rot: 0deg;
  --swi-op: 1;

  /* Desktop : simple suivi */
  transform: translate3d(var(--swi-x), 0, 0) rotate(var(--swi-rot));
  opacity: var(--swi-op);
  transition: none; /* Pas de transition pendant qu'on suit le doigt */
}

/* --- LE FIX MOBILE --- */
@media (max-width: 768px) {
  #modalView .modal-content.view-content {
    left: 50% !important;
    /* On force le centrage (-50%) ET on ajoute la variable de swipe */
    transform: translate3d(calc(-50% + var(--swi-x)), 0, 0) rotate(var(--swi-rot)) !important;
  }
}

/* Classe pour animer proprement le retour ou l'éjection */
.swi-animating {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease !important;
}
/* ===== MODAL PAYS ===== */
.modal-content.country-content{
  width: min(560px, 92vw);
  max-height: 85vh;
  overflow: auto;
  position: relative;
}

.close-country{
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 34px;
  cursor: pointer;
  line-height: 1;
}

.country-head{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.country-flag{
  width: 54px;
  height: 40px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  object-fit: cover;
}

.country-sub{
  opacity: 0.75;
  font-size: 14px;
  margin-top: 2px;
}

.country-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.country-row{
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
}

.country-row .k{
  flex: 0 0 110px;
  font-weight: 700;
  opacity: 0.8;
}

.country-row .v{
  flex: 1;
  word-break: break-word;
}

.country-loading{
  padding: 10px 0;
  font-weight: 600;
  opacity: 0.8;
}

.country-error{
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,0,0,0.08);
  color: #a40000;
  font-weight: 600;
}
.timeline-slideshow-title{
  display: flex;
  align-items: center;
  gap: 10px;
}

.timeline-slideshow-pdf{
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.timeline-slideshow-pdf:hover{
  background: rgba(255,255,255,0.22);
}
.timeline-slideshow-pdf {
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-slideshow-pdf .pdf-logo {
  height: 40px;   /* ajuste selon ton logo */
  width: auto;
  display: block;
}
/* Overlay génération PDF */
.pdf-working-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-working-box{
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 14px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.pdf-working-spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: pdfSpin 0.8s linear infinite;
}

@keyframes pdfSpin { to { transform: rotate(360deg); } }
/* Lieu: input + bouton GPS côte à côte */
.location-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.location-row #locationName{
  flex:1;
}
#gpsLocationBtn{
  width:auto;
  padding: 10px 12px;
  font-size: 16px;
  background:#0d6efd;
  color:#fff;
  border:none;
  cursor:pointer;
}
#gpsLocationBtn:hover{
  background:#0b5ed7;
}
.subscribe-btn {
  background: #cfe8ff;          /* bleu clair */
  border-radius: 50%;            /* cercle */
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.subscribe-btn:hover {
  background: #b7dcff;           /* bleu un peu plus foncé au survol */
}

.subscribe-icon {
  width: 28px;
  height: 28px;
}
/* le conteneur doit être référent pour les zones absolues */
.slideshow-container{
  position: relative;
}

/* zones cliquables latérales (centre libre) */
.media-nav-zone{
  position: absolute;
  top: 0;
  height: 100%;
  width: 30%;           /* 30% gauche + 30% droite -> centre 40% libre */
  z-index: 2;
  cursor: pointer;
  background: transparent;
}

/* côté gauche / droite */
.media-nav-left{ left: 0; }
.media-nav-right{ right: 0; }

/* feedback léger (optionnel) */
.media-nav-zone:hover{
  background: rgba(0,0,0,0.04);
}

/* s'assurer que les flèches restent au-dessus des zones */
.slideshow-container .prev,
.slideshow-container .next{
  position: absolute; /* si ce n'est pas déjà le cas dans ton CSS */
  z-index: 3;
}
.timeline-slideshow-stage{
  position: relative;
}

/* zones cliquables */
.timeline-nav-zone{
  position: absolute;
  top: 0;
  height: 100%;
  width: 30%;
  z-index: 1;
  cursor: pointer;
  background: transparent;
}

.timeline-nav-left{ left: 0; }
.timeline-nav-right{ right: 0; }

/* feedback léger desktop */
.timeline-nav-zone:hover{
  background: rgba(0,0,0,0.04);
}