/* =================================================================== */
/* 1. VARIABLES DE COULEUR (THÈMES)
/* =================================================================== */

/* Règle universelle pour empêcher les éléments de déborder */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  overflow-x: hidden; /* Interdit le scroll horizontal sur toute la page */
  width: 100%;
}

:root {
  /* Fonds */
  --color-bg: #f4f7f6;
  --color-bg-content: #ffffff;
  --color-bg-navbar: #ffffff;

  /* Textes */
  --color-text-primary: #333;
  --color-text-secondary: #555;
  --color-text-tertiary: #777;
  --color-text-placeholder: #999;
  --color-text-inverted: #ffffff;
  --color-logo-heading: #2c3e50;

  /* Bordures et Séparateurs */
  --color-border: #ddd;
  --color-separator: #e9ecef;
  --color-shadow: rgba(0, 0, 0, 0.1);

  /* Couleurs sémantiques (Primaire) */
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-primary-light-bg: #e7f1ff;
  --color-primary-light-bg-hover: #d0e2ff;
  --color-primary-focus-ring: rgba(0, 123, 255, 0.2);

  /* Couleurs sémantiques (Autres) */
  --color-secondary: #6c757d;
  --color-secondary-hover: #5a6268;
  --color-success: #28a745;
  --color-success-hover: #218838;
  --color-danger: #dc3545;
  --color-danger-hover: #c82333;
  --color-warning: #ffc107;
  --color-warning-hover: #e0a800;
}

html[data-theme="dark"] {
  /* Fonds */
  --color-bg: #1a1a1a;
  --color-bg-content: #2c2c2c;
  --color-bg-navbar: #252525;

  /* Textes */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #aaaaaa;
  --color-text-tertiary: #999;
  --color-text-placeholder: #777;
  --color-text-inverted: #ffffff;
  --color-logo-heading: #e0e0e0; /* Les titres/logo deviennent clairs */

  /* Bordures et Séparateurs */
  --color-border: #555;
  --color-separator: #444;
  --color-shadow: rgba(0, 0, 0, 0.5);

  /* Couleurs sémantiques (Primaire) */
  --color-primary: #0084ff;
  --color-primary-hover: #009fff;
  --color-primary-light-bg: #334;
  --color-primary-light-bg-hover: #445;
  --color-primary-focus-ring: rgba(0, 132, 255, 0.25);

  /* Couleurs sémantiques (Autres) - Souvent inchangées */
  --color-secondary: #6c757d;
  --color-secondary-hover: #868e96;
  --color-success: #28a745;
  --color-success-hover: #218838;
  --color-danger: #dc3545;
  --color-danger-hover: #c82333;
  --color-warning: #ffc107;
  --color-warning-hover: #e0a800;
}


/* =================================================================== */
/* 2. STYLES DE BASE (BODY, HTML)
/* =================================================================== */

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* =================================================================== */
/* 3. LAYOUT (NAVBAR, CONTAINER, FOOTER)
/* =================================================================== */

/* --- Barre de Navigation --- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-bg-navbar);
  padding: 1rem 2rem;
  box-shadow: 0 2px 5px var(--color-shadow);
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-logo-heading); /* Force la couleur de votre thème */
  text-decoration: none; /* <-- LA LIGNE IMPORTANTE : supprime le soulignement */
  transition: color 0.3s ease; /* Ajoute un petit effet au survol */
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--color-text-secondary);
  font-weight: 500;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

/* --- Style des liens de droite --- */

/* Place le bouton d'équipe tout à droite */
.nav-links .nav-item-equipe {
  margin-left: auto;
}

/* Style spécifique pour le bouton d'équipe */
.nav-links .bouton-equipe {
  /* Hérite de .bouton-secondaire, mais on corrige les conflits */
  background-color: var(--color-secondary);
  color: var(--color-text-inverted);
  padding: 6px 12px; /* Un padding net */
  border-radius: 5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border-bottom: none; /* ANNULE la bordure de .nav-links a */
}

/* S'assure que le texte "strong" est aussi lisible */
.nav-links .bouton-equipe strong {
  color: var(--color-text-inverted);
}

/* Corrige le survol */
.nav-links .bouton-equipe:hover {
  color: var(--color-text-inverted); /* Garde le texte blanc */
  border-bottom: none; /* ANNULE le surlignage */
  background-color: var(--color-secondary-hover);
}

/* Style du lien de déconnexion */
.nav-links .lien-deconnexion {
  color: var(--color-danger);
  font-weight: 600;
}
.nav-links .lien-deconnexion:hover {
  color: var(--color-danger-hover);
  border-bottom-color: var(--color-danger-hover); /* Souligne en rouge au survol */
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* --- Bouton de Thème --- */
#theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 6px 8px;
  cursor: pointer;
  line-height: 1;
}
#theme-toggle:hover {
  background-color: var(--color-bg);
}

#sun-icon-container, #moon-icon-container {
  width: 18px;
  height: 18px;
}

#moon-icon-container { display: none; }
html[data-theme="dark"] #moon-icon-container { display: inline-block; }
html[data-theme="dark"] #sun-icon-container { display: none; }
html[data-theme="light"] #moon-icon-container { display: none; }
html[data-theme="light"] #sun-icon-container { display: inline-block; }

#sun-icon-container svg,
#moon-icon-container svg {
  width: 100%;
  height: 100%;
  fill: var(--color-text-primary);
}


/* --- Contenu Principal --- */
.container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  flex-grow: 1; /* Pousse le footer en bas */
}

/* --- Pied de page --- */
footer {
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
  color: var(--color-text-tertiary);
  font-size: 0.9rem;
}


/* =================================================================== */
/* 4. COMPOSANTS COMMUNS (BOÎTES, BOUTONS, FORMULAIRES)
/* =================================================================== */

/* --- Boîte de contenu générique --- */
/* Remplace .recherche-section, .accueil-hero, etc. */
.content-box {
  background-color: var(--color-bg-content);
  border-radius: 8px;
  box-shadow: 0 4px 10px var(--color-shadow);
  padding: 30px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
}

.content-box h1,
.content-box h2 {
  margin-top: 0;
  font-size: 2.2em;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}

/* Spécificités pour l'accueil */
.accueil-hero {
  text-align: center;
}
.accueil-hero h1 {
  color: var(--color-logo-heading);
}
.accueil-hero p {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

/* --- Boutons --- */
.cta-bouton {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text-inverted);
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.cta-bouton:hover {
  background-color: var(--color-primary-hover);
}

.bouton-rechercher {
  padding: 12px 25px;
  font-size: 1rem;
  background-color: var(--color-success);
  color: var(--color-text-inverted);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.bouton-rechercher:hover {
  background-color: var(--color-success-hover);
}

.bouton-principal {
  background-color: var(--color-primary);
  color: var(--color-text-inverted);
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.bouton-principal:hover {
  background-color: var(--color-primary-hover);
}

.bouton-secondaire {
  background-color: var(--color-secondary);
  color: var(--color-text-inverted);
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.bouton-secondaire:hover {
  background-color: var(--color-secondary-hover);
}

.bouton-action-edit {
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  background-color: var(--color-warning);
  color: black;
  transition: background-color 0.3s ease;
}
.bouton-action-edit:hover {
  background-color: var(--color-warning-hover);
}

.bouton-action-delete {
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  background-color: var(--color-danger);
  color: var(--color-text-inverted);
  transition: background-color 0.3s ease;
}
.bouton-action-delete:hover {
  background-color: var(--color-danger-hover);
}

.bouton-principal-small, .bouton-secondaire-small {
  padding: 8px 15px;
  font-size: 0.9rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s ease;
}
.bouton-principal-small {
  background-color: var(--color-primary);
  color: var(--color-text-inverted);
}
.bouton-principal-small:hover {
  background-color: var(--color-primary-hover);
}
.bouton-secondaire-small {
  background-color: var(--color-secondary);
  color: var(--color-text-inverted);
}
.bouton-secondaire-small:hover {
  background-color: var(--color-secondary-hover);
}

/* --- Formulaires et Champs --- */
.form-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.form-groupe {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-groupe-full {
  grid-column: 1 / -1;
}
.form-groupe label {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

.form-groupe input[type="text"],
.form-groupe input[type="number"],
.form-groupe input[type="password"],
.form-groupe select,
.form-groupe textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  box-sizing: border-box;
  /* Styles pour le mode sombre */
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}

.form-groupe input:focus,
.form-groupe input[type="password"]:focus,
.form-groupe select:focus,
.form-groupe textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-focus-ring);
  outline: none;
}

.file-input-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#file-name-display {
  font-style: italic;
  color: var(--color-text-secondary);
}

/* --- Autres --- */
.separateur-section {
  border: 0;
  border-top: 2px solid var(--color-separator);
  margin: 2rem 0;
}

.message-feedback {
  margin-top: 1rem;
  font-weight: 500;
}
.message-feedback.success {
  color: var(--color-success);
}
.message-feedback.error {
  color: var(--color-danger);
}

.placeholder-text {
  text-align: center;
  color: var(--color-text-placeholder);
  font-style: italic;
  padding: 2rem;
}
.placeholder-text.error {
  color: var(--color-danger);
  font-weight: 500;
  font-style: normal;
}


/* =================================================================== */
/* 5. STYLES SPÉCIFIQUES AUX PAGES
/* =================================================================== */

/* --- Page Recherche (Formulaire) --- */
.barre-recherche-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
.groupe-recherche {
  display: flex;
  gap: 10px;
}

/* Style spécifique pour le champ de recherche principal */
#champ-recherche {
  flex-grow: 1;
  min-width: 250px;
  padding: 12px 15px;
  font-size: 1.1em;
  border: 2px solid var(--color-border);
}
#champ-recherche:focus {
  border-color: var(--color-primary);
  box-shadow: none; /* Pas besoin de double shadow */
}

/* --- Zone des filtres (Refonte Grid) --- */
.filtres-container {
  display: grid;
  /* Crée autant de colonnes que possible, d'au moins 200px chacune */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px; /* Espace entre les filtres */
  margin-top: 1rem;
  align-items: end; /* Aligne les champs en bas */
}

/* Nouveau conteneur pour chaque paire Label + Select */
.groupe-filtre-item {
  display: flex;
  flex-direction: column; /* Label au-dessus du select */
  gap: 5px;
}

.groupe-filtre-item label {
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.groupe-filtre-item select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}
/* --- Page Recherche (Résultats) --- */
.resultat-carte {
  background-color: var(--color-bg-content);
  border-left: 5px solid var(--color-primary);
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px var(--color-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; /* Pour le bouton modifier */
}
.resultat-carte:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px var(--color-shadow);
}
.resultat-carte h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
  color: var(--color-logo-heading);
}

.resultat-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  font-size: 0.95rem;
}
.detail-item {
  display: flex;
  flex-direction: column;
}
.detail-label {
  font-weight: bold;
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}
.detail-valeur {
  color: var(--color-text-primary);
}

.lien-emplacement {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  background-color: var(--color-primary-light-bg);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}
.lien-emplacement:hover {
  background-color: var(--color-primary-light-bg-hover);
  text-decoration: underline;
}

/* --- Page Lieu (Cartes) --- */
.lieu-carte {
  background: var(--color-bg-content);
  border-radius: 8px;
  box-shadow: 0 2px 5px var(--color-shadow);
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  scroll-margin-top: 80px;
}
.vue-affichage {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.lieu-details h3 {
  margin-top: 0;
  color: var(--color-primary);
}
.lieu-details p {
  margin: 0.5rem 0 1rem 0;
  color: var(--color-text-secondary);
}
.lieu-details img {
  max-width: 300px;
  max-height: 200px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  margin-top: 0.5rem;
}
.lieu-actions {
  display: flex;
  gap: 0.5rem;
}

/* Positionnement du bouton Modifier sur les cartes de recherche */
.resultat-carte .lieu-actions {
  position: absolute;
  top: 1.5rem; /* Doit correspondre au padding de .resultat-carte */
  right: 1.5rem;
}

/* --- Vues d'édition (Formulaires cachés) --- */
.form-edition-cache {
  display: none;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--color-bg-content);
  border-top: 2px solid var(--color-separator);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}
.form-edition-visible {
  display: flex;
}
.lieu-actions-edition {
  display: flex;
  gap: 0.5rem;
}
.message-feedback-edition {
  margin-top: 0.5rem;
  font-weight: 500;
  color: var(--color-danger);
}

/* Layout pour le formulaire d'édition dans la recherche */
.form-layout-recherche {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* --- Groupe de Recherche (Style & Thème) --- */
.groupe-recherche {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-bottom: 1rem;
}

/* Style de l'input qui s'adapte au thème */
.groupe-recherche input {
  flex-grow: 1;
  min-width: 0;
  padding: 10px 15px;
  border-radius: 5px;

  /* --- GESTION DU THÈME --- */
  background-color: var(--color-bg);       /* Fond (Foncé en dark mode) */
  color: var(--color-text-primary);        /* Texte (Clair en dark mode) */
  border: 1px solid var(--color-border);   /* Bordure grise subtile */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Gestion du texte "placeholder" (ex: "Mots-clés...") */
.groupe-recherche input::placeholder {
  color: var(--color-text-placeholder);    /* Gris moyen lisible partout */
  opacity: 1;
}

/* Effet quand on clique dedans (Focus) */
.groupe-recherche input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-focus-ring); /* Halo bleu */
  outline: none;
}

/* Le bouton ne doit pas s'écraser */
.groupe-recherche button {
  flex-shrink: 0;
  white-space: nowrap;
  /* Le bouton utilise déjà les couleurs de .bouton-rechercher, pas besoin de forcer ici */
}

/* =================================================================== */
/* 6. RESPONSIVE (MEDIA QUERIES)
/* =================================================================== */

@media (max-width: 768px) {
  .form-layout,
  .form-layout-recherche {
    grid-template-columns: 1fr;
  }
  .groupe-recherche {
    flex-direction: column;
    gap: 10px;
  }

  .groupe-recherche input,
  .groupe-recherche button {
    width: 100%; /* Ils prennent toute la largeur de l'écran */
    height: 45px; /* Une bonne hauteur pour les doigts */
  }
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
}

/* --- Style pour le Panneau Admin et Équipes --- */
.table-admin {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.table-admin th,
.table-admin td {
  padding: 12px 15px;
  border: 1px solid var(--color-border);
  text-align: left;
  color: var(--color-text-primary); /* <-- FIX 1: Force le texte à la couleur du thème */
  vertical-align: middle; /* <-- AJOUT: Aligne verticalement le contenu */
}

.table-admin th {
  background-color: var(--color-bg);
}

/* Cible la colonne d'action (la dernière cellule) */
.table-admin td:last-child {
  /* FIX 2: Aligne les boutons à gauche (plus propre) */
  text-align: left;
}

/* Conteneur pour les boutons d'action */
.team-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center; /* Aligne les boutons entre eux */

  /* AJOUT: Garantit une hauteur minimale même si la cellule est vide */
  min-height: 40px;
}

/* Style pour le texte "(Actuelle)" */
.equipe-active-span {
  color: var(--color-success);
  font-weight: 500;
  font-size: 0.9em;
  margin-left: 0.5rem;
}

/* =================================================================== */
/* 7. MOBILE / RESPONSIVE (Écrans < 768px) - VERSION BURGER
/* =================================================================== */

/* Style du bouton Burger (caché sur PC, visible ici) */
#burger-menu {
  display: none; /* Par défaut caché, on l'active dans la media query */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 15px;
  z-index: 10;
}

#burger-menu span {
  width: 30px;
  height: 3px;
  background-color: var(--color-text-primary);
  border-radius: 2px;
  transition: all 0.3s linear;
}

@media (max-width: 768px) {

  /* --- 1. Navbar & Menu --- */
  .navbar {
    flex-wrap: wrap; /* Permet au menu de passer à la ligne */
    padding: 1rem;
    align-items: center;
    position: relative;
  }

  .nav-controls-group {
    display: flex;
    align-items: center;
    margin-left: auto; /* Pousse les boutons à droite */
  }

  /* Affiche le burger sur mobile */
  #burger-menu {
    display: flex;
  }

  /* Cache le menu par défaut */
  .nav-links {
    width: 100%;
    display: none; /* Caché ! */
    flex-direction: column;
    margin-top: 1rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    animation: slideDown 0.3s ease forwards;
  }

  /* Classe ajoutée par le JS pour afficher le menu */
  .nav-links.nav-active {
    display: flex; /* Affiche ! */
  }

  /* Animation d'ouverture */
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .nav-links li {
    text-align: center;
    margin: 0;
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: 12px;
    width: 100%;
    /* Retire les styles spécifiques PC */
    margin-left: 0 !important;
  }

  /* Bouton équipe sur mobile : prend toute la largeur */
  .nav-links .nav-item-equipe {
    margin-left: 0;
    width: 100%;
  }

  /* --- 2. Formulaires & Contenu (Anti-dépassement) --- */
  .container {
    width: 100%;
    padding: 0 15px; /* Marge de sécurité */
    margin-top: 20px;
  }

  .content-box {
    padding: 20px 15px; /* Moins de padding interne */
    width: 100%;
  }

  /* Force les champs à ne jamais dépasser */
  input, select, textarea, button {
    max-width: 100%;
  }

  .form-layout,
  .form-layout-recherche {
    grid-template-columns: 1fr; /* 1 colonne */
  }

  .groupe-recherche {
    flex-direction: column;
    gap: 10px;
  }

  .groupe-recherche input {
    width: 100%;
  }

  /* --- 3. Animation du Burger (Optionnel : transforme en X) --- */
  #burger-menu.toggle span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }
  #burger-menu.toggle span:nth-child(2) {
    opacity: 0;
  }
  #burger-menu.toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }

  /* --- 4. Tableaux Scrollables --- */
  .table-admin {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* =================================================================== */
/* 8. DESKTOP / GRANDS ÉCRANS (Optimisation de l'espace)
/* =================================================================== */

@media (min-width: 1024px) {

  /* 1. Élargir le site */
  .container {
    max-width: 1400px; /* Passe de 1200px (ou moins) à 1400px */
    padding: 0 40px;
  }

  /* 2. Barre de recherche et Filtres sur une seule ligne */
  .barre-recherche-container {
    display: grid;
    /* Le champ recherche prend 2 parts, les filtres 1 part chacun */
    grid-template-columns: 2fr 1fr 1fr 1fr;
    align-items: end; /* Aligne tout en bas */
    gap: 20px;
  }

  .groupe-recherche {
    width: 100%;
  }

  /* On cache le conteneur grid des filtres car on l'a intégré au grid parent ci-dessus */
  .filtres-container {
    display: contents; /* Astuce CSS : fait comme si ce conteneur n'existait pas */
  }

  /* 3. Résultats en Grille (Masonry / Cards) */
  #resultats-container {
    display: grid;
    /* Crée autant de colonnes que possible (cartes de ~350px de large) */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

  /* Ajustement des cartes pour qu'elles aient toutes la même hauteur */
  .resultat-carte {
    height: 100%; /* Prend toute la hauteur de la ligne */
    margin-bottom: 0; /* Le gap du grid gère l'espace */
    display: flex;
    flex-direction: column;
  }

  .vue-affichage {
    flex-grow: 1; /* Pousse le contenu pour remplir la carte */
    display: flex;
    flex-direction: column;
  }

  .resultat-details {
    /* Sur PC, on peut remettre les détails en colonne dans la carte */
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}
/* --- 4. Page Ajout : Formulaire sur 3 colonnes --- */
.form-layout {
  /* Passe de 2 colonnes (par défaut) à 3 colonnes sur grand écran */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Les éléments "full" (comme Description ou le bouton) gardent toute la largeur */
.form-groupe-full {
  grid-column: 1 / -1;
}

/* --- 5. Page Lieu : Grille de cartes --- */
#liste-lieux-container {
  display: grid;
  /* Crée des colonnes automatiques (cartes de ~350px mini) */
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

/* Uniformiser la hauteur des cartes lieux */
.lieu-carte {
  height: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* Pousse les boutons vers le bas pour qu'ils soient alignés si la description est courte */
.lieu-carte .vue-affichage {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.lieu-carte .lieu-details {
  flex-grow: 1; /* Le texte prend la place disponible */
}

.lieu-carte .lieu-actions {
  margin-top: 1rem; /* Espace avant les boutons */
}
/* =================================================================== */
/* OPTIMISATION PAGE AJOUT (CÔTE À CÔTE)
/* =================================================================== */

@media (min-width: 1200px) {

  /* Élargir le conteneur global pour profiter de l'écran */
  .container {
    max-width: 95%; /* Utilise 95% de la largeur de l'écran */
  }

  /* Grille spéciale pour la page d'ajout */
  .layout-ajout-split {
    display: grid;
    /* 2 colonnes : la première (Manuel) prend 65%, la seconde (Import) prend le reste */
    grid-template-columns: 2fr 1fr;
    gap: 30px; /* Espace entre les deux boîtes */
    align-items: start; /* Aligne les boîtes en haut */
  }

  /* Ajustement interne des formulaires */
  .layout-ajout-split .content-box {
    height: 100%; /* Pour qu'elles aient la même hauteur visuelle si besoin */
    margin-bottom: 0;
  }

  /* Dans la colonne de gauche (plus large), on garde les champs sur 3 colonnes */
  .layout-ajout-split .content-box:first-child .form-layout {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Dans la colonne de droite (plus étroite), on force une seule colonne */
  .layout-ajout-split .content-box:last-child .form-layout {
    grid-template-columns: 1fr;
  }
}
/* =================================================================== */
/* LAYOUT PAGE LIEUX (Optimisé Largeur Max)
/* =================================================================== */
@media (min-width: 1024px) {

  /* 1. On force le site à prendre toute la largeur */
  .container {
    max-width: 98%; /* Utilise 98% de l'écran */
    padding: 0 20px;
  }

  /* 2. On rééquilibre les colonnes */
  .layout-lieu-split {
    display: grid;
    /* Colonne gauche plus large (400px) pour le confort */
    /* Colonne droite prend tout le reste */
    grid-template-columns: 400px 1fr;
    gap: 25px; /* Espace réduit entre gauche et droite */
    align-items: start;
  }

  .form-box-sticky {
    position: sticky;
    top: 20px;
  }

  /* 3. On densifie la grille de droite */
  #liste-lieux-container {
    display: grid;
    /* Cartes plus compactes (250px min) pour en mettre 4 ou 5 par ligne */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }

  /* Titre de la section droite */
  .liste-lieux-wrapper h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 0;
    color: var(--color-text-primary);
  }
}