/* --- Fondation DA « Girolle × Cèpe » : tokens + utilitaires --- */
:root {
  --sousbois: #191510;
  --os: #efe6d3;
  --girolle: #f2a93b;
  --cepe: #b9793f;
  --lactaire: #d9772e;
  --mycene: #c6f24e;
}
.da-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.da-shadow { box-shadow: 6px 6px 0 var(--sousbois); }
.da-card { border: 2px solid var(--sousbois); border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .da-grain { display: none; } }

html,body{height:100%;margin:0;font-family:'Inter',system-ui,sans-serif;background:#f8fafc;color:#0f172a}
#map{position:absolute;inset:0}
/* Positionnement garanti de la carte d'info (indépendant de Tailwind) */
#view-carte{position:relative}
#point-card{position:absolute;z-index:800}
/* Bouton bascule fond clair/sombre (contrôle Leaflet, empilé sous le zoom) */
.basemap-toggle-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;cursor:pointer;background:var(--sousbois);color:var(--os);
  border:1px solid rgba(239,230,211,.15);border-radius:9px;box-shadow:0 8px 28px rgba(15,23,42,.18)}
.basemap-toggle-btn:hover{background:#221c14}
/* Fond de carte sombre : les overlays sous-bois se détachent moins → liseré + ombre renforcés */
body.map-dark #search-pill>div,body.map-dark #city-input~*,body.map-dark .layer-chip,
body.map-dark #more-layers-btn,body.map-dark #map-legend,body.map-dark #point-card,
body.map-dark #date-range,body.map-dark #radar-species-btn{
  box-shadow:0 0 0 1px rgba(239,230,211,.22),0 8px 28px rgba(0,0,0,.5)}
/* Fiche au clic — desktop : détail toujours visible, poignée/toggle masqués */
#point-card .pc-handle,#point-card .pc-expand{display:none}
#point-card .pc-detail{display:block}
/* Mobile (<768) : la fiche devient un bottom-sheet ancré en bas ; aperçu P2 + détail repliable */
@media (max-width:1023px){
  #point-card{position:fixed!important;left:0!important;right:0!important;bottom:var(--tabbar-h,3.25rem)!important;top:auto!important;
    width:100%!important;max-width:100%!important;border-radius:18px 18px 0 0;max-height:calc(85vh - var(--tabbar-h,3.25rem));overflow-y:auto;
    z-index:1200;box-shadow:0 -8px 28px rgba(15,23,42,.18)}
  #point-card .pc-handle{display:block;width:38px;height:4px;background:rgba(239,230,211,.3);border-radius:4px;margin:0 auto .5rem}
  #point-card .pc-expand{display:block}
  #point-card .pc-detail{display:none}
  #point-card.expanded .pc-detail{display:block}
}
/* Mobile : le volet latéral (calques/légende) devient une feuille basse ouverte par le bouton Calques */
@media (max-width:1023px){
  #sidebar{position:fixed!important;left:0!important;right:0!important;bottom:var(--tabbar-h,3.25rem)!important;top:auto!important;
    width:100%!important;max-width:100%!important;height:auto!important;
    transform:translateY(115%)!important;transition:transform .3s ease;z-index:1150}
  #sidebar.sheet-open{transform:translateY(0)!important}
  #sidebar>div{border-radius:18px 18px 0 0!important;border-right:0!important;max-height:72vh}
  #sidebar-toggle{display:none!important}
}
.leaflet-container{font-family:'Inter',sans-serif}
.leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 10px 30px rgba(15,23,42,.18);border:1px solid #e2e8f0}
.leaflet-popup-content{margin:.7rem .9rem}
/* barre de scroll fine ; gutter STABLE → la barre n'élargit/rétrécit jamais le contenu
   (largeur du volet latéral constante, qu'il y ait scroll ou non) */
.nice-scroll{scrollbar-gutter:stable}
.nice-scroll::-webkit-scrollbar{width:8px}
.nice-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
/* Bandeau de puces de calques : scroll horizontal sans barre visible */
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.no-scrollbar::-webkit-scrollbar{display:none}
/* Dropdown de résultats de recherche : masqué quand vide (pas de boîte fantôme) */
#city-results:empty{display:none}
/* Curseur de dates à deux poignées (du…au…) : deux <input range> superposés */
.dr-track{position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);background:#e2e8f0;border-radius:4px}
.dr-fill{position:absolute;top:50%;height:4px;transform:translateY(-50%);background:#c2620e;border-radius:4px}
.dr-input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dr-input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #c2620e;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.dr-input::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #c2620e;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.dr-input::-webkit-slider-runnable-track{background:none;border:none}
.dr-input::-moz-range-track{background:none;border:none}
.seg-btn[aria-selected="true"]{background:#c2620e;color:#fff}
/* Menu sandwich (mobile) : le contenu de la navbar passe en tiroir déroulant */
@media (max-width:1023px){
  #nav-menu.mobile-open{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;top:3.5rem;left:0;right:0;
    background:#fff;border-bottom:1px solid #e2e8f0;
    box-shadow:0 10px 28px rgba(15,23,42,.12);
    padding:.75rem 1rem 1rem;gap:.5rem;z-index:1000;
  }
}
.fade-in{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- Scène hero (SVG champignons sous la pluie) ---- */
.rain-drop{animation:raindrop 1.1s linear infinite}
@keyframes raindrop{
  0%{transform:translateY(-26px);opacity:0}
  12%{opacity:.9}
  80%{opacity:.9}
  100%{transform:translateY(150px);opacity:0}
}
.ripple{transform-origin:center;animation:ripple 1.1s ease-out infinite}
@keyframes ripple{0%{transform:scale(.2);opacity:.55}100%{transform:scale(1.3);opacity:0}}
.bob{transform-origin:bottom center;animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-.6deg)}}
.bob2{transform-origin:bottom center;animation:bob 4.6s ease-in-out infinite .4s}
.cloud-float{animation:cloudFloat 7s ease-in-out infinite}
.cloud-float2{animation:cloudFloat 9s ease-in-out infinite .8s}
@keyframes cloudFloat{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
.sway{transform-origin:bottom center;animation:sway 3.2s ease-in-out infinite}
.sway2{transform-origin:bottom center;animation:sway 3.8s ease-in-out infinite .5s}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.leaf{transform-origin:center;animation:leaffall 6.5s linear infinite}
@keyframes leaffall{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  8%{opacity:1}
  90%{opacity:1}
  100%{transform:translate(-46px,250px) rotate(340deg);opacity:0}
}
.twinkle{animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
/* Logo champignon animé (navbar) : petit balancement */
.mush-logo{transform-origin:50% 92%;animation:mushwiggle 2.8s ease-in-out infinite}
@keyframes mushwiggle{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@media (prefers-reduced-motion: reduce){
  .rain-drop,.ripple,.bob,.bob2,.cloud-float,.cloud-float2,.sway,.sway2,.leaf,.twinkle,.mush-logo{animation:none}
}