/* --- 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}
/* Le conteneur de la carte sert de contexte de positionnement aux boutons posés sur la carte
   (garanti indépendamment de Tailwind) */
#view-carte{position:relative}
.leaflet-container{font-family:'Inter',sans-serif}
.leaflet-popup-content-wrapper{border-radius:4px;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}
.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}
}

/* ---- Landing « almanach botanique » (papier crème, encre brune, radius 0) ---- */
.alm-tick{animation:alm-tick 26s linear infinite}
@keyframes alm-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.alm-breathe{animation:alm-breathe 6s ease-in-out infinite}
@keyframes alm-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
.alm-pulse{animation:alm-pulse 2.2s ease-out infinite}
@keyframes alm-pulse{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.7);opacity:0}}
/* Apparition au scroll : état caché posé seulement quand le JS a pris la main
   (.alm-ready) → sans JS, tout reste visible. */
.alm-ready [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.alm-ready [data-reveal="grow"]{transform:translateY(60%) scale(.8);transform-origin:bottom center}
.alm-ready [data-reveal].on{opacity:1;transform:none}
/* Planche d'espèce : légère levée au survol */
.alm-planche{transition:background-color .25s ease,transform .25s ease}
.alm-planche:hover{background:#f9f3e6;transform:translateY(-3px)}
/* Planche sans photo : hachures fines */
.alm-hachures{background:repeating-linear-gradient(45deg,transparent 0 7px,rgba(36,29,18,.04) 7px 14px)}
/* Lettrine de « La méthode » */
.alm-lettrine::first-letter{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:44px;
  float:left;line-height:.8;padding:6px 8px 0 0}
@media (prefers-reduced-motion: reduce){
  .alm-ready [data-reveal],.alm-ready [data-reveal="grow"]{opacity:1;transform:none;transition:none}
  .alm-tick,.alm-breathe,.alm-pulse{animation:none}
  .alm-planche,.alm-planche:hover{transition:none;transform:none}
}


/* Ancres de la landing : la barre collée (60 px) recouvrirait le haut de la section. */
#landing-screen [id] { scroll-margin-top: 60px; }
/* Calendrier de l'almanach : lignes un peu plus basses pour que le tableau entier
   tienne sous la barre collée quand on arrive par l'ancre #calendrier. */
#calendrier [role="rowheader"] { padding-top: 6px; padding-bottom: 6px; }
/* Page de connexion : la grille occupe toute la hauteur restante sous la barre. */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-fill { min-height: calc(100vh - 60px); }

/* --- Refonte de l'app, charte almanach (spec 2026-09-23-refonte-app-ecran-carte) --- */
:root{--papier:#f4ecdc;--papier-clair:#f9f3e6;--encre:#241d12;--encre-douce:#6b5f4b;--filet:rgba(36,29,18,.14)}
/* Panneau commun : monte du bas (mobile), cale a gauche (>= 1024 px) */
.alm-panneau{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:flex;flex-direction:column;
  background:var(--papier);color:var(--encre);border-radius:18px 18px 0 0;
  box-shadow:0 -6px 24px rgba(36,29,18,.18);padding-bottom:env(safe-area-inset-bottom);font-family:Inter,system-ui,sans-serif}
.alm-panneau.hidden{display:none}
/* vh puis dvh : sur iOS Safari, 88vh passe sous la barre d'adresse ; vh reste le repli */
.alm-panneau[data-hauteur="mi"]{max-height:55vh;max-height:55dvh}
.alm-panneau[data-hauteur="haut"]{height:88vh;max-height:88vh;height:88dvh;max-height:88dvh}
.alm-poignee{position:relative;flex:none;width:64px;height:22px;margin:0 auto;cursor:grab;touch-action:none}
.alm-poignee::after{content:"";position:absolute;left:14px;right:14px;top:9px;height:4px;border-radius:4px;background:var(--encre);opacity:.3}
.alm-titre{margin:0;font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;font-size:1.35rem;line-height:1.25}
.alm-croix{flex:none;width:44px;height:44px;margin:-8px -10px 0 0;background:none;border:0;color:var(--encre);font-size:1.6rem;line-height:1;cursor:pointer}
.alm-contenu{flex:1;min-height:0;overflow-y:auto;padding:.25rem 1rem 1rem}
@media (min-width:1024px){
  .alm-panneau{top:0;right:auto;width:400px;border-radius:0;box-shadow:6px 0 24px rgba(0,0,0,.18)}
  .alm-panneau[data-hauteur]{height:auto;max-height:none}
  .alm-poignee{visibility:hidden;height:12px}
}
/* Bouton rond pose sur la carte : fond opaque, ombre douce */
.alm-rond{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--papier-clair);color:var(--encre);box-shadow:0 2px 10px rgba(0,0,0,.25);
  font-size:1.1rem;line-height:1;cursor:pointer}
.alm-rond:active{transform:scale(.96);box-shadow:0 1px 6px rgba(0,0,0,.25)}
/* Pastille d'espece */
.alm-pastille{flex:none;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .9rem;border-radius:999px;
  background:var(--papier-clair);color:var(--encre);box-shadow:0 2px 10px rgba(0,0,0,.25);font-size:.82rem;font-weight:600;white-space:nowrap;cursor:pointer}
.alm-pastille.active{background:var(--encre);color:var(--papier-clair)}
.alm-pastille .pt{flex:none;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1px rgba(249,243,230,.6)}
/* Le defilement horizontal rogne aussi en vertical : padding pour loger l'ombre douce, marge negative pour ne rien decaler */
#pastilles{padding:10px 12px 14px 8px;margin:-10px -12px -14px -8px}
/* Jour affiche (aujourd'hui / prevision) : pastilles compactes sous la barre du haut */
.alm-jour{min-height:36px;padding:0 .7rem;border:0;border-radius:999px;background:var(--papier-clair);color:var(--encre);
  box-shadow:0 2px 10px rgba(0,0,0,.25);font-size:.78rem;font-weight:600;white-space:nowrap;cursor:pointer}
.alm-jour.active{background:var(--encre);color:var(--papier-clair)}
/* La rangee des jours ne passe jamais sous les boutons ronds de droite (44 px + marges) :
 * elle defile si besoin. Petits ecrans : pastilles plus compactes (320 px, 26/09/2026). */
#jours{max-width:calc(100% - 44px - 2rem);overflow-x:auto;scrollbar-width:none;padding:6px 8px 10px 4px;margin:-6px -8px -10px -4px}
#jours::-webkit-scrollbar{display:none}
@media (max-width:379px){.alm-jour{min-height:34px;padding:0 .5rem;font-size:.72rem;flex:none}}
/* Etiquette Space Mono */
.alm-etiquette{font:.7rem/1.25 "Space Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce)}
/* Periode d'une espece (liste Choisir) : meme fonte, sans capitales ni interlettrage */
.alm-periode{font:.7rem/1.25 "Space Mono",ui-monospace,monospace;color:var(--encre-douce)}
/* Bouton plein (encre) */
.alm-bouton{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0 1.2rem;border:0;border-radius:999px;
  background:var(--encre);color:var(--papier-clair);font-size:.9rem;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer}
.alm-bouton em{font-family:Fraunces,Georgia,serif;font-weight:400;color:var(--girolle)}
/* Sur ordinateur, un panneau ouvert a gauche decale la barre du haut */
@media (min-width:1024px){body.panneau-ouvert #barre-haut{left:calc(400px + .75rem)}}
/* ... et la legende, posee en bas a gauche, qu'il couvrirait */
@media (min-width:1024px){body.panneau-ouvert #map-legend{left:calc(400px + .75rem)}}
/* Legende repliee : pastille compacte sur la rangee du bas, a gauche de « Choisir
 * champignons » (meme hauteur que lui). Sous 420 px les deux ne tiennent pas cote a cote
 * avec le bouton centre : il se cale alors a droite. */
#map-legend.legende-repliee{bottom:1.25rem;width:6.25rem;height:44px;padding:0 .75rem;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);overflow:hidden}
/* Rangee du bas (mobile) : legende a gauche, echelle a droite. Sous 420 px, « Choisir
 * champignons » quitte le centre pour se loger entre les deux, marge interieure reduite pour
 * tenir sur 360 px. La localisation est dans la barre de recherche. */
@media (max-width:419px){#btn-choisir{left:calc(.75rem + 6.25rem + .4rem);right:auto;transform:none;padding:0 .7rem}}
/* Sous 360 px, legende + « Choisir champignons » + echelle ne tiennent pas : l'echelle, la
 * moins utile sur un telephone, disparait. */
@media (max-width:359px){#map .maplibregl-ctrl-scale{display:none}}
/* Echelle : en bas a droite, centree verticalement sur la rangee des boutons de 44 px */
#map .maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale{margin:0 .75rem calc(1.25rem + 12px) 0}
/* Panneau « Choisir champignons » */
.alm-tete{display:flex;align-items:center;gap:.75rem;margin:.25rem 0 1rem;padding:.6rem .75rem;background:var(--papier-clair);
  border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.alm-tete img,.alm-tete .vide{flex:none;width:64px;height:64px;object-fit:contain}
.alm-tete .nom{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:1.3rem;line-height:1.2}
.alm-ligne{display:flex;align-items:center;gap:.7rem;min-height:52px;padding:.35rem 0;border-bottom:1px solid var(--filet);cursor:pointer}
.alm-ligne.hors{opacity:.55}
.alm-ligne img,.alm-ligne .vide{flex:none;width:40px;height:40px;object-fit:contain}
.alm-ligne .vide,.alm-tete .vide{border-radius:50%;opacity:.6}
.alm-coche{flex:none;width:22px;height:22px;accent-color:var(--encre);cursor:pointer}
.alm-pied{position:sticky;bottom:0;padding:.75rem 0 .25rem;background:linear-gradient(to top,var(--papier) 70%,transparent)}
/* Panneau des calques */
.alm-vignettes{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.35rem 0 .9rem}
.alm-vignette{display:flex;flex-direction:column;gap:.3rem;min-height:44px;padding:.3rem;background:var(--papier-clair);
  color:var(--encre);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.07);font-size:.75rem;font-weight:600;text-align:center;cursor:pointer}
.alm-vignette .apercu{height:38px;border:1px solid var(--filet);border-radius:8px}
.alm-vignette[aria-pressed="true"]{outline:2px solid var(--encre);outline-offset:1px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.alm-bascule{display:flex;border-radius:999px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.alm-bascule button{flex:1;min-height:44px;background:var(--papier-clair);color:var(--encre);border:0;font-weight:600;font-size:.85rem;cursor:pointer}
.alm-bascule button[aria-pressed="true"]{background:var(--encre);color:var(--papier-clair)}
/* L'overflow:hidden de la bascule rognerait l'anneau de focus : on le rentre dans le bouton */
.alm-bascule button:focus-visible{outline-offset:-3px}
.alm-reglage{margin-bottom:.9rem}
.alm-reglage input[type=range]{width:100%;accent-color:var(--encre)}
/* Cibles tactiles de 44 px et curseur de periode a l'encre, lisible sur le papier */
.alm-reglage input[type=range]{min-height:44px}
.alm-reglage .dr-slider{height:44px}
.alm-reglage .dr-track{background:rgba(36,29,18,.25)}
.alm-reglage .dr-fill{background:var(--encre)}
/* Poignees de periode : disque visible de 28 px (26 sous Firefox), zone tactile de 44 px par une
 * bordure transparente ; le fond s'arrete au padding, l'anneau encre est une ombre interne.
 * Pas de margin-top : la piste n'a pas de hauteur propre, elle prend celle de la poignee. */
.alm-reglage .dr-input::-webkit-slider-thumb{box-sizing:content-box;width:28px;height:28px;border:8px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 2px var(--encre)}
.alm-reglage .dr-input::-moz-range-thumb{box-sizing:content-box;width:26px;height:26px;border:9px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 2px var(--encre)}
/* Menu en tiroir */
.alm-menu{position:fixed;top:0;bottom:0;left:0;z-index:1300;width:min(82vw,320px);display:flex;flex-direction:column;gap:.1rem;
  padding:1.1rem 1rem calc(1rem + env(safe-area-inset-bottom));background:var(--papier);color:var(--encre);
  box-shadow:6px 0 24px rgba(36,29,18,.18);overflow-y:auto}
.alm-menu.hidden{display:none}
.alm-menu .marque{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:1.6rem;line-height:1.1}
.alm-menu .marque img{display:block;height:27px;width:auto;margin-bottom:8px}
.alm-menu .entree{display:flex;align-items:center;gap:.7rem;min-height:48px;padding:0 .25rem;border:0;border-bottom:1px solid var(--filet);
  background:none;color:var(--encre);font-size:.95rem;font-weight:600;text-align:left;cursor:pointer}
.alm-menu .entree.secondaire{font-weight:400;color:var(--encre-douce)}
.alm-menu .compteur{margin-left:auto;font:.7rem/1 "Space Mono",monospace;background:var(--cepe);color:var(--papier-clair);padding:.25rem .45rem}

/* Controles MapLibre : zoom seulement sur ordinateur (le mobile pince), charte almanach */
@media (max-width:1023px){#map .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in){display:none}}
#map .maplibregl-ctrl-group:not(:empty){background:var(--papier-clair);border:0;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
/* Coins des boutons alignes sur le groupe (pas d'overflow:hidden : il rognerait l'anneau de focus) */
#map .maplibregl-ctrl-group button:first-child{border-radius:10px 10px 0 0}#map .maplibregl-ctrl-group button:last-child{border-radius:0 0 10px 10px}
#map .maplibregl-ctrl-scale{background-color:rgba(249,243,230,.85);border-color:var(--encre);color:var(--encre)}
/* Rien ne se pose en haut a droite depuis la refonte. Une copie de map/map.js d'avant (servie
 * une fois par l'ancien service worker) y mettait le zoom et la bascule de fond, sous la barre. */
#map .maplibregl-ctrl-top-right{display:none}

/* --- Lot 2 : fiche d'un point, catalogue, fiche espece (spec 2026-09-23-refonte-app-lot-2) --- */
.alm-carte{background:var(--papier-clair);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.07);padding:.65rem .75rem}
.alm-bande{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;margin-top:.5rem}
.alm-bande span{font:.55rem/1 "Space Mono",monospace;text-align:center;padding:.3rem 0;border-radius:3px;background:rgba(36,29,18,.06);color:#8a7d66}
.alm-bande span.s{background:rgba(107,122,58,.22);color:#45541f}
.alm-bande span.cur{background:#45541f;color:var(--papier-clair)}
.alm-bande span.cur.hors{background:rgba(36,29,18,.55)}
.alm-niv-good{background:rgba(107,122,58,.16);color:#45541f;--niv:#6b7a3a}
.alm-niv-mid{background:rgba(242,169,59,.20);color:#7d5210;--niv:#c98a1c}
.alm-niv-bad{background:rgba(217,119,46,.17);color:#8a3c10;--niv:#d9772e}
.alm-niv-off{background:rgba(36,29,18,.06);color:#241d12;--niv:rgba(36,29,18,.35)}
/* Anneau de score : --p de 0 a 100, teinte du niveau (--niv) */
.alm-anneau{flex:none;position:relative;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.05rem;color:var(--encre);background:conic-gradient(var(--niv) calc(var(--p)*1%),rgba(36,29,18,.1) 0)}
.alm-anneau::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--papier-clair)}
.alm-anneau b{position:relative}
.alm-anneau.petit{width:30px;height:30px;font-size:.62rem}
.alm-anneau.petit::before{inset:3px}
.alm-fac{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;border-radius:10px;margin-bottom:.35rem}
.alm-fac .q{flex:1;font-size:.8rem}
.alm-fac .q small{display:block;font-size:.68rem;opacity:.8}
.alm-fac .v{font-weight:700;font-size:.9rem;text-align:right;white-space:nowrap}
.alm-rang{display:flex;align-items:center;gap:.6rem;width:100%;min-height:44px;padding:.25rem 0;border:0;border-bottom:1px solid var(--filet);
  background:none;color:var(--encre);font-size:.9rem;text-align:left;cursor:pointer}
.alm-bouton-contour{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.2rem;border-radius:999px;
  border:1.5px solid rgba(36,29,18,.35);background:transparent;color:var(--encre);font-size:.9rem;font-weight:600;cursor:pointer}
.alm-bouton-contour.danger{border-color:rgba(138,60,16,.45);color:#8a3c10}
/* Verdict de la fiche : couleur du niveau seule, sans le fond des cartes .alm-niv-* */
.alm-niv-txt-good{color:#45541f}.alm-niv-txt-mid{color:#7d5210}.alm-niv-txt-bad{color:#8a3c10}.alm-niv-txt-off{color:#241d12}
.alm-grand-titre{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;font-size:1.9rem;line-height:1.1;margin:.15rem 0 .35rem}
.alm-carrousel{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -1rem .5rem;padding:.25rem 1rem .75rem;scrollbar-width:none}
.alm-carrousel::-webkit-scrollbar{display:none}
.alm-grande{flex:none;scroll-snap-align:start;position:relative;width:min(72vw,260px);height:300px;border:0;border-radius:14px;overflow:hidden;
  padding:.75rem;color:var(--papier-clair);text-align:left;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.18)}
/* Voile : au moins .62 de noir sous le latin (nom sur deux lignes compris), soit plus de 4,5:1
 * pour le texte clair meme sur une photo blanche. */
.alm-grande::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 35%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.72))}
.alm-grande img{position:absolute;right:-10px;top:36px;width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.alm-grande .badge{position:relative;z-index:1;display:inline-block;font:.6rem/1 "Space Mono",monospace;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(249,243,230,.92);color:#45541f;padding:.3rem .5rem;border-radius:999px}
.alm-grande .bas{position:absolute;z-index:1;left:.75rem;right:.75rem;bottom:.75rem;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.alm-grande .lat{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:.8rem}
.alm-grande .nom{font-family:Fraunces,Georgia,serif;font-size:1.5rem;line-height:1.1;margin-bottom:.35rem}
.alm-grande .alm-bande span{background:rgba(0,0,0,.25);color:rgba(249,243,230,.9)}
.alm-grande .alm-bande span.s{background:rgba(249,243,230,.85);color:#241d12}
.alm-grande .alm-bande span.cur{background:#f2a93b;color:#241d12}
.alm-points{display:flex;justify-content:center;margin-bottom:1rem}
.alm-points button{border:0;background:none;padding:6px 3px;cursor:pointer}
.alm-points button::before{content:"";display:block;width:6px;height:6px;border-radius:999px;background:rgba(36,29,18,.2);transition:width .2s}
.alm-points button.on::before{width:16px;background:var(--encre)}
.alm-points button:focus-visible{outline:2px solid var(--encre);outline-offset:1px;border-radius:4px}
@media (pointer:fine){.alm-carrousel{cursor:grab}.alm-carrousel .alm-grande{cursor:inherit}}
.alm-carrousel.glisse{cursor:grabbing;scroll-snap-type:none;user-select:none}
.alm-champ{width:100%;min-height:44px;border:0;border-radius:999px;background:var(--papier-clair);box-shadow:0 1px 6px rgba(0,0,0,.1);padding:0 1rem;
  font-size:.9rem;color:var(--encre);outline:none}
.alm-champ:focus-visible{box-shadow:0 0 0 2px var(--encre),0 1px 6px rgba(0,0,0,.1)}
.alm-filtres{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0}
.alm-filtres button{min-height:44px;padding:0 .9rem;border:0;border-radius:999px;background:var(--papier-clair);box-shadow:0 1px 4px rgba(0,0,0,.08);
  color:var(--encre);font-size:.8rem;font-weight:600;cursor:pointer}
.alm-filtres button[aria-pressed="true"]{background:var(--encre);color:var(--papier-clair)}
.alm-espece{display:flex;align-items:center;gap:.75rem;width:100%;min-height:56px;padding:.35rem 0;border:0;border-bottom:1px solid var(--filet);
  background:none;color:var(--encre);text-align:left;cursor:pointer}
.alm-espece img,.alm-espece .vide{flex:none;width:44px;height:44px;object-fit:contain}
.alm-espece .vide{border-radius:50%;opacity:.6}
.alm-espece .pt{margin-left:auto;flex:none;width:10px;height:10px;border-radius:50%}
.alm-fe-photo{display:block;width:min(70vw,260px);height:min(70vw,260px);object-fit:contain;margin:.25rem auto .75rem;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.alm-rubrique{margin-top:1.1rem}
.alm-rubrique h2{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;font-size:1.2rem;margin:0 0 .35rem}
.alm-rubrique p{font-size:.92rem;line-height:1.55;margin:0}
.alm-danger{display:inline-block;font:.7rem/1"Space Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .45rem;border-radius:999px}
.alm-danger.mortel{background:#8a1c10;color:#f9f3e6}
.alm-danger.toxique{background:rgba(217,119,46,.2);color:#8a3c10}
.alm-danger.immangeable{background:rgba(36,29,18,.08);color:#241d12}
/* Mes spots, Mon compte : actions en cartes claires */
.alm-action{display:block;width:100%;min-height:48px;padding:.8rem 1rem;border:0;border-radius:14px;background:var(--papier-clair);
  box-shadow:0 2px 8px rgba(0,0,0,.07);color:var(--encre);font-size:.95rem;font-weight:600;text-align:left;cursor:pointer}
.alm-action.discrete{font-weight:400;color:var(--encre-douce)}
.alm-action.danger{font-weight:400;color:#8a3c10}
/* Marqueur d'un spot enregistre sur la carte : pastille de couleur, cible de 24 px */
.spot-marqueur{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.spot-marqueur::before{content:"";width:14px;height:14px;border-radius:50%;background:#c2620e;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.spot-marqueur.propice::before{background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.25),0 1px 4px rgba(0,0,0,.35)}