/* discoverme.lu — styles de base
   Contrastes vérifiés (minimum 4,5:1 pour le texte courant, 3:1 pour les grands titres) :
   - sur fond #0B1524 : blanc 18:1, bleu clair #00A3E0 6,4:1, texte doux #B7C4D6 10:1,
     rouge doux #E5484D 3,9:1 → réservé aux grands textes (logo) et aux touches décoratives ;
   - sur un bouton bleu clair, le texte est bleu nuit (le blanc n'aurait que 2,9:1) ;
   - le texte blanc sur rouge utilise --rouge-fonce (5,2:1), le rouge doux n'atteignant que 3,9:1. */

:root {
  --nuit: #0B1524;
  --nuit-2: #13253D;
  --nuit-3: #1C3352;
  --bleu: #00A3E0;
  --rouge: #E5484D;
  --rouge-fonce: #C9353A; /* fond des badges à texte blanc */
  --blanc: #FFFFFF;
  --texte-doux: #B7C4D6; /* 10:1 sur --nuit */
  --rayon: 14px;
  --titres: "Bricolage Grotesque", system-ui, sans-serif;
  --texte: "DM Sans", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* L'en-tête reste collé en haut : les ancres et l'élément au focus s'arrêtent dessous, jamais derrière. */
html { scroll-padding-top: 96px; }
@media (max-width: 640px) { html { scroll-padding-top: 130px; } }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--titres); line-height: 1.1; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.75rem); font-weight: 800; margin: 0 0 .5rem; }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); font-weight: 700; }

a { color: var(--bleu); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 6px;
}
main:focus { outline: none; }

.lien-evitement {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--bleu); color: var(--nuit);
  padding: .5rem 1rem; border-radius: 8px; font-weight: 700; z-index: 100;
}
.lien-evitement:focus { top: 1rem; }
/* Variante placée dans la page (ex. avant la carte) : invisible jusqu'au focus clavier. */
.lien-evitement-local { position: absolute; top: auto; left: -9999px; }
.lien-evitement-local:focus { position: relative; left: 0; top: 0; display: inline-block; margin-bottom: .75rem; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: .5rem; }
.logo svg { width: 2.25rem; height: auto; flex: none; }
.logo-texte { font-family: var(--titres); font-weight: 800; font-size: 1.5rem; color: var(--blanc); letter-spacing: -0.02em; }
.logo-me { color: var(--rouge); }
.logo-lu { color: var(--bleu); }

/* En-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--nuit) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nuit-3);
}
.entete-logo { text-decoration: none; }
.nav { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-block; padding: .55rem .15rem; color: var(--blanc); text-decoration: none; font-weight: 500; } /* zone cliquable ≥ 24 px */
.nav a:hover { color: var(--bleu); }

@media (max-width: 640px) {
  .entete { flex-wrap: wrap; }
  .logo-texte { font-size: 1.25rem; }
  .nav { width: 100%; justify-content: space-between; font-size: .95rem; }
}

/* Sections */
.accroche, .section { padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem); max-width: 1200px; margin: 0 auto; }
.accroche p { color: var(--texte-doux); font-size: 1.125rem; }
.accent { color: var(--bleu); }

.filtres { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.puce {
  display: inline-block; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid var(--nuit-3); background: var(--nuit-2); font-size: .9rem;
}

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: 999px; border: 1px solid var(--nuit-3);
  background: var(--nuit-2); color: var(--blanc); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s;
}
.bouton:hover { border-color: var(--bleu); }
.bouton svg { width: 1.15rem; height: 1.15rem; flex: none; }
.bouton-principal { background: var(--bleu); border-color: var(--bleu); color: var(--nuit); }
.bouton-principal:hover { background: #33b8ea; }

/* Carte */
.accroche { padding-bottom: 1rem; }
.zone-carte { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.puce {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--nuit-3); background: var(--nuit-2); color: var(--blanc);
  font: inherit; font-size: .9rem; font-weight: 500;
}
.puce:hover:not(:disabled) { border-color: var(--bleu); }
.puce[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: var(--nuit); font-weight: 700; }
.puce:disabled { opacity: .45; cursor: not-allowed; }
.puce-nb { font-size: .78rem; opacity: .8; }

.carte-conteneur { position: relative; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--nuit-3); }
.carte { height: min(72vh, 680px); min-height: 420px; background: var(--nuit-2); }
/* Fond OpenStreetMap passé en mode sombre pour coller à la charte. */
.carte .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(.9) contrast(.88) saturate(.6); }
.leaflet-container { font-family: var(--texte); }
.leaflet-control-attribution { background: rgba(11, 21, 36, .8) !important; color: var(--texte-doux) !important; }
.leaflet-control-attribution a { color: #7fd3f3 !important; } /* le bleu clair n'atteint que 3,8:1 sur ce fond */
.leaflet-bar a { background: var(--nuit-2) !important; color: var(--blanc) !important; border-color: var(--nuit-3) !important; }
.leaflet-tooltip { background: var(--nuit); color: var(--blanc); border: 1px solid var(--nuit-3); font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.leaflet-tooltip-top::before { border-top-color: var(--nuit); }

.epingle { display: block; width: 32px; height: 42px; transition: transform .2s ease; transform-origin: 50% 100%; }
.epingle svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.epingle path { fill: var(--bleu); stroke: var(--nuit); stroke-width: 1.5; }
.epingle circle:nth-of-type(1) { fill: var(--nuit); }
.epingle circle:nth-of-type(2) { fill: var(--blanc); }
.epingle-nouveau path { fill: var(--rouge); }
.leaflet-marker-icon:hover .epingle, .leaflet-marker-icon:focus-visible .epingle, .epingle-active .epingle { transform: scale(1.25); }
.leaflet-marker-icon:focus-visible { outline: 3px solid var(--blanc); outline-offset: 2px; border-radius: 50%; }

.bouton-flottant { position: absolute; z-index: 500; left: 12px; bottom: 28px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.carte-aide { color: var(--texte-doux); font-size: .9rem; min-height: 1.4em; margin: .5rem 0 0; }

.panneau {
  position: absolute; z-index: 1100; /* au-dessus des contrôles Leaflet (1000) */
  top: 12px; right: 12px; bottom: 12px;
  width: min(420px, calc(100% - 24px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--nuit); border: 1px solid var(--nuit-3); border-radius: var(--rayon);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  animation: entree .25s ease;
}
@keyframes entree { from { opacity: 0; transform: translateX(16px); } }
.fermer {
  position: sticky; top: 8px; float: right; margin: 8px 8px -48px 0; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(11,21,36,.85); color: var(--blanc); font-size: 1.6rem; line-height: 1;
}
.chargement { padding: 2rem; color: var(--texte-doux); }

@media (max-width: 720px) {
  .carte { height: 62vh; min-height: 360px; }
  .panneau {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 82vh; border-radius: var(--rayon) var(--rayon) 0 0;
    animation-name: entree-bas;
  }
  @keyframes entree-bas { from { transform: translateY(30px); opacity: 0; } }
}

/* Fiche commerce */
.fiche-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.fiche-photos img { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; scroll-snap-align: start; }
.fiche-video { background: #000; }
.fiche-video video { display: block; width: 100%; height: auto; max-height: 70vh; background: #000; }
.fiche-corps { padding: 1.25rem 1.25rem 1.5rem; }
.fiche-titre { font-size: 1.75rem; margin: .15rem 0 .35rem; }
.fiche-titre:focus { outline: none; }
.fiche-adresse { color: var(--texte-doux); margin: 0 0 .75rem; }
.fiche-distance { color: var(--bleu); font-weight: 700; }
.fiche-texte { margin: 0 0 1rem; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.fiche-menu h2, .fiche-menu h3 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }
.fiche-menu-image { display: block; margin-bottom: .75rem; }
.fiche-menu-image img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--nuit-3); }
.lien-fiche { font-weight: 700; }

.page-fiche { max-width: 860px; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.page-fiche .fiche { background: var(--nuit-2); border: 1px solid var(--nuit-3); border-radius: var(--rayon); overflow: hidden; }
.page-fiche .fiche-titre { font-size: clamp(2rem, 4vw + 1rem, 3rem); }
.retour { color: var(--texte-doux); text-decoration: none; font-weight: 500; }
.retour:hover { color: var(--bleu); }

/* Vignettes */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; list-style: none; padding: 0; }
.carte-commerce[hidden] { display: none; }
.carte-commerce a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--rayon);
  background: var(--nuit-2); border: 1px solid var(--nuit-3);
  color: var(--blanc); text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.carte-commerce a:hover { transform: translateY(-2px); border-color: var(--bleu); }
.carte-commerce img, .carte-sans-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--nuit-3); }
.carte-texte { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.25rem 1.25rem; }
.distance { color: var(--bleu); font-weight: 700; }

/* Formules */
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 2rem 0; }
.formule {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  padding: 1.75rem; border-radius: var(--rayon); background: var(--nuit-2); border: 1px solid var(--nuit-3);
}
.formule-en-avant { border: 2px solid var(--bleu); box-shadow: 0 0 0 6px rgba(0,163,224,.12); }
.formule-badge {
  position: absolute; top: -.8rem; left: 1.5rem; padding: .2rem .75rem; border-radius: 999px;
  background: var(--bleu); color: var(--nuit); font-size: .8rem; font-weight: 700;
}
.formule h2 { margin: 0; font-size: 1.5rem; }
.formule-prix { font-family: var(--titres); font-size: 2.5rem; font-weight: 800; margin: 0; }
.formule-duree { color: var(--bleu); font-weight: 700; margin: 0; }
.formule p { margin: 0; }
.formule .bouton { margin-top: auto; align-self: flex-start; }
.carte-theme { color: var(--bleu); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.carte-nom { font-family: var(--titres); font-size: 1.3rem; font-weight: 700; }
.carte-lieu { color: var(--texte-doux); font-size: .9rem; }

.badge-nouveau {
  display: inline-block; vertical-align: middle; margin-left: .35rem;
  padding: .1rem .5rem; border-radius: 999px;
  background: var(--rouge-fonce); color: var(--blanc); /* 5,2:1 */
  font-family: var(--texte); font-size: .75rem; font-weight: 700;
}

.pied { padding: 2rem clamp(1rem, 4vw, 2.5rem); border-top: 1px solid var(--nuit-3); color: var(--texte-doux); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}