/* ==========================================================================
   Zonage Terrain – style.css (refonte 2025)
   Structure, accessibilité, responsive, dark mode, logo visible
   ========================================================================== */

/* == Variables principales : couleurs, radius, etc. == */
:root {
  --bg: #f6f8fa;
  --card: #fff;
  --primary: #1c344a;
  --accent: #bed3ca;
  --zone: #52745c;
  --serv: #f55b5b;
  --contr: #e7b64d;
  --text: #262626;
  --muted: #7d8791;
  --border: #e5e8ec;
  --radius: 20px;
  --shadow: 0 2px 16px rgba(90,110,150,0.07);
  --shadow-card: 0 1px 8px rgba(100,120,150,0.05);
  --focus: #76a183;
  --error: #fff5f5;
  --success: #e8fff0;
  --transition: 0.18s cubic-bezier(.77,.13,.57,.91);
}

/* == Palette dark mode natif == */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191f25;
    --card: #232e37;
    --primary: #d7f5eb;
    --accent: #668a7e;
    --zone: #8cc092;
    --serv: #ff7777;
    --contr: #e7b64d;
    --text: #e8eaea;
    --muted: #a8afb6;
    --border: #303a41;
    --shadow: 0 2px 16px rgba(30,36,40,0.20);
    --shadow-card: 0 1px 8px rgba(30,40,48,0.15);
    --focus: #95ebb7;
    --error: #350202;
    --success: #1d3625;
  }
}

/* ==========================================================================
   Structure globale
   ========================================================================== */

/* == Container général pour éviter le stretching sur grand écran == */
body {
  background: var(--bg);
  font-family: 'Inter', Arial, sans-serif;
  color: var(--text);
  margin: 0;
  min-height: 100vh;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2vw;
}

/* == Header == */
header {
  background: var(--card);
  padding: 1.1rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.3rem;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(80,100,120,0.03);
  position: relative;
  z-index: 100;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* == Affichage du logo dans le header == */
.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent) url('logo.jpg') center center/cover no-repeat;
  display: block;
  box-shadow: 0 2px 8px rgba(80,100,120,0.07);
  flex-shrink: 0;
}

/* == Actions du header == */
.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ==========================================================================
   Espacement principal et responsive
   ========================================================================== */

/* == Espacement header/bloc de recherche == */
.search-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  max-width: 500px;
  margin: 2.2em auto 1.3rem; /* <-- Espacement haut ajouté */
}

@media (max-width: 900px) {
  .search-row {
    margin-top: 1.2em;
  }
}

/* ==========================================================================
   Barre de recherche et boutons
   ========================================================================== */

.search-row input[type="text"] {
  flex: 1 1 auto;
  width: 100%;
  max-width: 500px;
  font-size: 1.15em;
  padding: 1.1rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #f9f9f9;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.search-row input[type="text"]:focus {
  border-color: var(--zone);
  box-shadow: 0 0 0 2px var(--focus);
}

#geoloc-btn {
  min-width: 44px;
  padding: 0.6em 1.1em;
  font-size: 1.1em;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--primary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  box-shadow: 0 1px 4px rgba(60,80,100,0.07);
  outline: none;
}
#geoloc-btn:hover,
#geoloc-btn:focus-visible {
  background: var(--zone);
  color: #fff;
  box-shadow: 0 2px 10px rgba(100,160,120,0.09);
}

#search {
  /* Déjà stylé via input[type="text"] */
}

#results {
  max-width: 500px;
  margin: 0 auto 1.2em;
  padding: 0;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 3px 16px rgba(50,80,80,0.09);
  list-style: none;
  overflow: hidden;
}
#results li {
  padding: 0.8em 1.4em;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
  transition: background 0.12s;
  user-select: none;
}
#results li:last-child {
  border-bottom: none;
}
#results li:hover,
#results li:focus {
  background: #f7f7fa;
  outline: none;
}
#results li:active {
  background: var(--accent);
}

/* Focus visible pour la navigation clavier */
#results li:focus-visible {
  background: var(--zone);
  color: #fff;
  outline: 2px solid var(--focus);
}

/* ==========================================================================
   Layout principal (Desktop et responsive)
   ========================================================================== */

main {
  max-width: 1200px;
  margin: 2.5rem auto;
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.map-section {
  width: 48%;
  min-width: 320px;
}

.results-section {
  width: 52%;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

@media (max-width: 900px) {
  main {
    flex-direction: column;
    gap: 1.7rem;
  }
  .map-section,
  .results-section {
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   Cartes d’information et composants réutilisables
   ========================================================================== */

/* == Card générique == */
.card,
.pub-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.3rem 1.8rem 1.1rem 1.6rem;
  position: relative;
  margin-bottom: 1.2em;
  font-size: 1.08em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  animation: cardAppear 0.35s cubic-bezier(.63,.03,.29,.97);
}

@keyframes cardAppear {
  from { opacity: 0; transform: translateY(18px) scale(0.98);}
  to { opacity: 1; transform: none;}
}

.card-header {
  font-size: 1.15em;
  font-weight: 600;
  margin-bottom: 0.6em;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -.01em;
}

ul {
  margin: 0;
  padding-left: 1.1em;
}

li {
  margin-bottom: 0.35em;
}

/* === Variantes : success, error, info === */
.card.error { background: var(--error); color: #bb2222; border-left: 6px solid #e54848; }
.card.success { background: var(--success); color: #276042; border-left: 6px solid #44a077; }
.card.info { background: #eef6fd; color: #1d3c59; border-left: 6px solid #2c6eb9; }
@media (prefers-color-scheme: dark) {
  .card.info { background: #202d3a; color: #8ac4f7; }
}

/* == Badges == */
.badge {
  background: var(--accent);
  color: #23564a;
  font-size: 0.95em;
  border-radius: 8px;
  padding: 0.16em 0.8em;
  margin-left: 0.5em;
  display: inline-block;
}
.badge.zone { background: var(--zone); color: #fff; }
.badge.serv { background: var(--serv); color: #fff;}
.badge.contr { background: var(--contr);}
@media (prefers-color-scheme: dark) {
  .badge { color: #fff; }
}

/* == Actions (boutons, liens) == */
.actions {
  margin-top: 0.8em;
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  border: none;
  border-radius: 10px;
  padding: 0.55em 1.2em;
  background: var(--accent);
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  box-shadow: 0 1px 4px rgba(60,80,100,0.07);
  outline: none;
  position: relative;
}
.btn:hover,
.btn:focus-visible {
  background: var(--zone);
  color: #fff;
  box-shadow: 0 2px 10px rgba(100,160,120,0.09);
}
.btn:active {
  background: var(--serv);
  color: #fff;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  background: #eee;
  color: #aaa;
  cursor: not-allowed;
  box-shadow: none;
}

/* Focus visuel accentué pour tous les boutons et champs interactifs */
input:focus-visible, .btn:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* == Muted, petites infos == */
.muted {
  color: var(--muted);
  font-size: 0.97em;
  font-style: normal;
}

/* == Pub-card (hérite de .card) == */
.pub-card img {
  max-width: 250px;
  margin-bottom: 0.7em;
  border-radius: 12px;
  box-shadow: 0 1px 10px rgba(60,80,90,0.09);
}

/* ==========================================================================
   Carte Leaflet & débogage
   ========================================================================== */

#map {
  height: 400px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #eaf2eb;
  min-height: 320px;
  min-width: 260px;
}

#debug {
  margin-top: 1.2em;
  background: #e8f0ee;
  color: #445;
  border-radius: 16px;
  font-size: 1em;
  padding: 1em 1.4em;
  word-break: break-all;
}
@media (prefers-color-scheme: dark) {
  #debug {
    background: #24302a;
    color: #d6f2e3;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.92em;
  padding: 1.2em 0 0.4em;
  background: transparent;
}

/* ==========================================================================
   Accessibilité et utilitaires divers
   ========================================================================== */

/* Screen-reader only (accessibilité) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  white-space: nowrap;
}

/* Spinner animé */
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 3px solid #bdd3c7;
  border-top: 3px solid #b1bd5d;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Scrollbar personnalisée
   ========================================================================== */
::-webkit-scrollbar {
  width: 10px;
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--zone);
}
::-webkit-scrollbar-corner {
  background: var(--bg);
}
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb { background: var(--zone);}
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}

/* ==========================================================================
   Media queries fine-tuning
   ========================================================================== */
@media (max-width: 700px) {
  main {
    margin: 1.4rem auto;
    gap: 1.2rem;
  }
  .search-row {
    margin-top: 0.9em;
    margin-bottom: 0.8em;
    padding: 0 0.5em;
  }
  .card,
  .pub-card {
    padding: 1em 0.7em 0.8em 0.7em;
    font-size: 1em;
  }
  #map {
    height: 250px;
  }
}

/* ==========================================================================
   Sécurité, performance et évolutivité : conseils pour l'avenir
   ========================================================================== */
/*
- Pour ajouter de nouvelles catégories ou composants, réutilisez les variables CSS pour garder la cohérence.
- Les couleurs et espacement doivent toujours utiliser var() pour faciliter le dark mode et la maintenance.
- Privilégiez l'ajout de classes utilitaires (ex : .error, .success) pour tout nouveau besoin.
- Pour l’accessibilité, vérifiez le contraste régulièrement, notamment si vous changez la palette.
- Ce fichier peut être découpé/modularisé si le projet grandit.
*/

/* Centrage universel du contenu dans .pub-card */
.pub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Ajoute ce centrage vertical */
  text-align: center;
}

/* Pour tout enfant direct (div, p, span, etc.) : */
.pub-card > * {
  text-align: center !important;
  width: 100%;
}

/* Pour toute structure interne spécifique : */
.pub-card > div,
.pub-card > div > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
}

/* Images centrées */
.pub-card img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
}

/* Boutons, liens, titres, etc. */
.pub-card button,
.pub-card a,
.pub-card h1,
.pub-card h2,
.pub-card h3,
.pub-card p,
.pub-card span {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Optionnel : réduit l’espace autour des images dans la pub */
.pub-card img {
  margin-bottom: 0.7em;
  margin-top: 0.7em;
}