/* =====================================================================
   NAPO : accueil, sélecteur de langue, compagnon
   Se charge après style.css et n'en modifie aucune règle : il réutilise ses variables (couleurs, polices, ombres).
   ===================================================================== */

/* ============ DRAPEAUX ============ */
.flag{width:30px;height:30px;border-radius:50%;overflow:hidden;flex:none;display:inline-block;box-shadow:0 0 0 1px rgba(15,21,25,.16)}
.flag svg{width:100%;height:100%;display:block}
.chip .flag{width:22px;height:22px}

/* boutons de la fenêtre de filtres : les textes plus longs (allemand, espagnol) passent à la ligne au lieu de déborder */
.dlg-foot .btn{flex:1 1 0;min-width:0;padding:0 16px;white-space:normal;line-height:1.15;text-align:center}
.dlg-foot .btn-primary{flex:1.3 1 0}

/* ============ NAPO : animations du personnage ============ */
.napo{display:block;overflow:visible}
.napo-full{height:100%;width:auto}
.n-bob{animation:nbob 3.6s ease-in-out infinite}
.n-arm{transform-origin:62px 168px;animation:nwave 5.2s ease-in-out infinite}
.n-eye{transform-box:fill-box;transform-origin:center;animation:nblink 5s infinite}
.n-eye-h{display:none}
.is-hello .n-arm{animation:nwave 2.4s ease-in-out infinite}
.is-happy .n-eye{display:none}
.is-happy .n-eye-h{display:block}
.is-happy{animation:njump .8s var(--ease) both}
.is-happy .n-arm{animation:nwave 1.1s ease-in-out infinite}
@keyframes nbob{50%{transform:translateY(-3px)}}
@keyframes nwave{0%,44%,100%{transform:rotate(0)}6%{transform:rotate(-18deg)}14%{transform:rotate(12deg)}22%{transform:rotate(-18deg)}30%{transform:rotate(12deg)}38%{transform:rotate(-8deg)}}
@keyframes nblink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes njump{0%{transform:translateY(0)}30%{transform:translateY(-16px) scale(1.03)}55%{transform:translateY(0)}72%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* ============ ACCUEIL : CHOIX DE LA LANGUE ============
   Fond orange, Napo au centre, les langues en drapeaux ronds disposés en cercle autour de lui (js/napo.js, welcome).
   Survoler ou toucher un drapeau : Napo dit bonjour dans cette langue. */
.welcome{position:fixed;inset:0;z-index:300;overflow:hidden;color:#fff;display:flex;justify-content:center;background:radial-gradient(120% 85% at 50% 50%,#FFB662 0%,#FA8F35 40%,#EC6A22 72%,#CF4E19 100%);transition:opacity .65s var(--ease),transform .9s var(--ease)}
.welcome.is-leaving{opacity:0;transform:scale(1.045);pointer-events:none}
/* soleil doux derrière Napo, qui respire lentement */
.w-glow{position:absolute;left:50%;top:52%;width:min(140vw,140svh,1200px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,243,212,.9) 0%,rgba(255,224,165,.5) 20%,rgba(255,205,135,0) 46%);animation:wglow 6s ease-in-out infinite alternate;pointer-events:none}
.w-in{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 18px) 16px calc(env(safe-area-inset-bottom,0px) + 18px)}
.w-top{flex:none;animation:wfade .9s .1s both}
.w-center{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.6svh,16px)}
.w-bubble{position:relative;flex:none;margin:0;padding:11px 20px 12px;border-radius:20px;background:#FFFDF8;color:#0F1519;font-family:var(--display);font-size:clamp(1.05rem,2.6svh,1.35rem);line-height:1.2;text-align:center;box-shadow:0 14px 34px -12px rgba(120,40,0,.55);max-width:min(340px,100%);animation:wpop .7s .9s var(--ease) both}
.w-bubble::after{content:"";position:absolute;left:50%;bottom:-8px;width:18px;height:18px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:0 0 4px 0}
/* le cercle : Napo au centre, les drapeaux autour (angle --a posé par js/napo.js) */
.w-ring{--ring:min(90vw,56svh,470px);--f:clamp(54px,calc(var(--ring) * .19),86px);position:relative;flex:none;width:var(--ring);height:var(--ring);margin:calc(var(--f) * .1) 0 calc(var(--f) * .5)}
.w-ring::before{content:"";position:absolute;inset:10%;border-radius:50%;border:2px dashed rgba(255,255,255,.45);animation:wspin 60s linear infinite}
.w-napo{position:absolute;left:50%;top:50%;height:calc(var(--ring) * .52);translate:-50% -50%;animation:wrise 1s .3s var(--ease) both;filter:drop-shadow(0 16px 18px rgba(120,40,0,.35))}
.w-napo .napo{height:100%;width:auto;display:block}
.w-lang{--s:1;position:absolute;left:50%;top:50%;width:var(--f);height:var(--f);padding:0;border:0;border-radius:50%;background:#fff;cursor:pointer;translate:-50% -50%;transform:rotate(var(--a)) translateX(calc(var(--ring) * .4)) rotate(calc(-1 * var(--a)));scale:var(--s);box-shadow:0 0 0 4px #fff,0 12px 26px -8px rgba(110,35,0,.6);transition:scale .3s var(--ease),opacity .4s,box-shadow .3s;animation:wflag .6s calc(.55s + var(--i) * .09s) var(--ease) backwards;-webkit-tap-highlight-color:transparent}
.w-lang .flag{width:100%;height:100%;box-shadow:none}
.w-lang:hover,.w-lang:focus-visible{--s:1.14}
.w-lang:active{--s:.96}
.w-lang:focus-visible{outline:3px solid #fff;outline-offset:5px}
.w-lang.is-last{box-shadow:0 0 0 4px #FFD166,0 0 0 9px rgba(255,209,102,.35),0 12px 26px -8px rgba(110,35,0,.6)}
.welcome.is-picked .w-lang{pointer-events:none}
.welcome.is-picked .w-lang:not(.is-on){opacity:.25;--s:.85}
.w-lang.is-on{--s:1.28;box-shadow:0 0 0 4px #fff,0 0 0 11px rgba(255,255,255,.35),0 12px 26px -8px rgba(110,35,0,.6)}
.w-ask{flex:none;margin:0;text-align:center;font-size:clamp(.95rem,2.2svh,1.1rem);font-weight:600;line-height:1.35;min-height:2.7em;max-width:30ch;text-wrap:balance;text-shadow:0 1px 8px rgba(120,40,0,.45);animation:wfade .8s 1s both}
.welcome.swap .w-bubble span,.welcome.swap .w-ask{animation:wswap .5s var(--ease)}
@keyframes wglow{to{scale:1.08;opacity:.85}}
@keyframes wspin{to{rotate:360deg}}
@keyframes wflag{from{opacity:0;scale:.2}}
@keyframes wfade{from{opacity:0}}
@keyframes wrise{from{opacity:0;transform:translateY(40px) scale(.92)}}
@keyframes wpop{from{opacity:0;transform:translateY(10px) scale(.86)}}
@keyframes wswap{from{opacity:0;transform:translateY(5px)}}
@media (max-height:560px){ .w-top{display:none} }

/* ============ SÉLECTEUR DE LANGUE ============ */
.lang-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px 0 7px;border-radius:999px;font-size:.84rem;font-weight:500;letter-spacing:.06em;flex:none}
.lang-btn:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.lang-btn .flag{width:26px;height:26px}
.lang-pop{position:fixed;z-index:120;min-width:216px;padding:8px;background:var(--paper);color:var(--ink);border-radius:16px;box-shadow:0 24px 60px -18px rgba(8,16,24,.5),0 0 0 1px var(--line);opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;transition:opacity .2s,transform .3s var(--ease)}
.lang-pop[hidden]{display:none}
.lang-pop.on{opacity:1;transform:none}
.lang-pop-t{margin:0;padding:8px 10px 6px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lang-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 10px;border-radius:10px;font-size:1rem}
.lang-opt span:not(.flag){flex:1;text-align:left}
.lang-opt:hover{background:var(--sand-2)}
.lang-opt.on{color:var(--blue);font-weight:500}
.menu-langs{display:flex;flex-wrap:wrap;gap:8px}
.menu .menu-langs .chip{font-family:var(--text);font-size:.95rem;padding:0 14px 0 9px;border:1px solid var(--line)}
.menu .menu-langs .chip.on{border-color:var(--ink)}

/* ============ COMPAGNON ============ */
.napo-dock{position:fixed;z-index:75;left:12px;bottom:calc(var(--tab) + 12px);display:flex;flex-direction:column;align-items:flex-start;gap:10px;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.napo-dock>*{pointer-events:auto}
.napo-fab{position:relative;width:56px;height:56px;border-radius:50%;flex:none;background:var(--paper);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--plaque),var(--shadow);transition:transform .3s var(--ease)}
.napo-fab:hover{transform:translateY(-2px) scale(1.04)}
.napo-fab:active{transform:scale(.95)}
/* pendant le défilement, Napo se fait discret puis revient */
.napo-dock.is-scrolling .napo-fab{transform:scale(.78);opacity:.4}
@media (max-width:860px){ .napo-fab{width:52px;height:52px} }
.napo-fab .napo{width:100%;height:100%;border-radius:50%;background:linear-gradient(#D3E6EE,#F2E7D2);overflow:hidden}
.napo-fab .n-bob{animation-duration:4.4s}
.napo-dot{position:absolute;top:-2px;right:-2px;width:15px;height:15px;border-radius:50%;background:var(--granite);border:2.5px solid var(--paper);transform:scale(0);transition:transform .35s var(--ease)}
.napo-fab.has-news .napo-dot{transform:scale(1);animation:ndot 2.2s ease-in-out infinite}
@keyframes ndot{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--granite) 25%,transparent)}}
.napo-hint{position:absolute;left:68px;bottom:7px;width:max-content;max-width:min(240px,calc(100vw - 150px));margin:0;padding:10px 14px;border-radius:14px;background:var(--paper);color:var(--ink);font-size:.9rem;line-height:1.35;box-shadow:var(--shadow),0 0 0 1px var(--line);opacity:0;transform:translateX(-6px) scale(.94);transform-origin:left bottom;pointer-events:none;transition:opacity .3s,transform .4s var(--ease);cursor:pointer}
.napo-hint::before{content:"";position:absolute;left:-5px;bottom:16px;width:10px;height:10px;background:inherit;transform:rotate(45deg);box-shadow:-1px 1px 0 var(--line)}
.napo-hint.on{opacity:1;transform:none;pointer-events:auto}
.napo-card{order:-1;width:min(330px,calc(100vw - 24px));padding:14px 16px 12px;background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 24px 60px -18px rgba(8,16,24,.5),0 0 0 1px var(--line);opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom left;transition:opacity .25s,transform .4s var(--ease)}
.napo-card[hidden]{display:none}
.napo-card.on{opacity:1;transform:none}
.nc-head{display:flex;align-items:center;gap:12px}
.nc-av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(#D3E6EE,#F2E7D2);box-shadow:0 0 0 2px var(--plaque)}
.nc-av .napo{width:100%;height:100%}
.nc-head b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.1}
.nc-head small{color:var(--ink-3);font-size:.8rem}
.nc-x{margin-left:auto;width:40px;height:40px}
.nc-say{margin:12px 0;font-family:var(--hand);font-style:italic;font-size:1.22rem;line-height:1.32;color:var(--ink)}
.nc-say.pop{animation:wswap .4s var(--ease)}
.nc-chips{display:flex;flex-wrap:wrap;gap:8px}
.nc-chips .chip{white-space:normal;text-align:left;min-height:38px;font-size:.9rem}
.nc-foot{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:12px;padding-top:6px;border-top:1px solid var(--line)}
.nc-link{padding:9px 0;font-size:.86rem;color:var(--blue)}
.nc-link:hover{text-decoration:underline;text-underline-offset:3px}
/* ---------- la discussion avec Napo ---------- */
.napo-card{width:min(380px,calc(100vw - 24px));display:flex;flex-direction:column;padding:14px 14px 10px}
.nc-thread{display:flex;flex-direction:column;gap:10px;margin:12px -4px 0;padding:2px 4px 6px;max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.nc-msg{max-width:92%;padding:10px 13px;border-radius:18px;font-size:.95rem;line-height:1.42}
.nc-msg p{margin:0}
.nc-msg p+p,.nc-msg p+div,.nc-msg div+div{margin-top:8px}
.nc-msg.napo{align-self:flex-start;background:var(--sand-2);color:var(--ink);border-bottom-left-radius:6px}
.nc-msg.me{align-self:flex-end;background:var(--plaque);color:#fff;border-bottom-right-radius:6px}
.nc-tip{font-family:var(--hand);font-style:italic;font-size:1.08rem;line-height:1.3}
.nc-acts{display:flex;flex-wrap:wrap;gap:6px}
.nc-acts .chip{min-height:34px;font-size:.84rem;white-space:normal;text-align:left;background:var(--paper)}
.nc-num{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.nc-list{display:flex;flex-direction:column;gap:5px}
.nc-tel{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.nc-tel b{min-width:52px;padding:4px 8px;border-radius:8px;background:#C8413A;color:#fff;font-size:.95rem;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.nc-tel span{font-size:.86rem;line-height:1.25}
.nc-tel small{display:block;margin-top:2px;color:var(--ink-3);font-size:.76rem}
.nc-cards{display:flex;flex-direction:column;gap:5px}
.nc-card{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;width:100%;padding:9px 10px;border:0;border-radius:12px;background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.nc-card:hover{box-shadow:0 0 0 1.5px var(--blue)}
.nc-card i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.nc-card b{display:block;font-family:var(--display);font-weight:400;font-size:1.02rem;line-height:1.2}
.nc-card small{display:block;color:var(--ink-3);font-size:.78rem;line-height:1.25}
.nc-typing{display:flex;gap:4px;padding:13px 14px}
.nc-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:ntype 1s infinite ease-in-out}
.nc-typing i:nth-child(2){animation-delay:.15s}.nc-typing i:nth-child(3){animation-delay:.3s}
@keyframes ntype{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.nc-quick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:8px -14px 0;padding:2px 14px 4px}
.nc-quick::-webkit-scrollbar{display:none}
.nc-quick .chip{flex:none;min-height:32px;font-size:.82rem}
.nc-form{display:flex;gap:8px;align-items:center;margin-top:8px}
.nc-form input{flex:1;min-width:0;height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--sand-2);color:var(--ink);font:inherit;font-size:1rem;outline:none;box-shadow:inset 0 0 0 1px var(--line)}
.nc-form input:focus{box-shadow:inset 0 0 0 1.5px var(--blue)}
.nc-form button{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--plaque);color:#fff;cursor:pointer}
.nc-form button .ico{width:20px;height:20px;fill:currentColor;stroke:none}
.nc-foot{margin-top:8px;padding-top:2px}
.nc-foot .nc-link{padding:7px 0;font-size:.8rem}
@media (max-width:860px){ .nc-thread{max-height:min(50dvh,440px)} }
/* sur la carte, Napo se place au-dessus de la mention OpenStreetMap, qui doit rester lisible (licence) */
@media (max-width:860px){ body:has(.mapview) .napo-dock{bottom:calc(var(--tab) + 78px)} body:has(.is-overview) .napo-dock{bottom:calc(var(--tab) + 128px)} }
/* Napo s'efface quand la carte a besoin de la place : fiche ouverte, feuille de localisation, liste, menu */
body:has(.preview.open) .napo-dock,body:has(.locsheet.open) .napo-dock,body:has(#mappanel.open) .napo-dock,body:has(.menu.open) .napo-dock{opacity:0;pointer-events:none;transform:translateY(10px)}
body:has(.preview.open) .napo-dock>*,body:has(.locsheet.open) .napo-dock>*,body:has(#mappanel.open) .napo-dock>*,body:has(.menu.open) .napo-dock>*{pointer-events:none}
@media (min-width:861px){
  .napo-dock{left:auto;right:22px;bottom:48px;align-items:flex-end}
  .napo-card{transform-origin:bottom right}
  .napo-hint{left:auto;right:68px;transform-origin:right bottom}
  .napo-hint::before{left:auto;right:-5px;box-shadow:1px -1px 0 var(--line)}
}
@media print{.napo-dock,.welcome,.lang-pop{display:none}}

/* marqueur "repère" générique (pointe + étiquette ou dessin libre dans m.badge, voir js/map.js et js/realmap.js) : posé sur la carte, il se soulève au toucher.
   Actuellement sans usage sur le site, gardé pour un futur repère spécial (favoris groupés, étape d'itinéraire...). */
.rm-badge{overflow:visible}
.rm-badge svg,.m-mk.badge svg{overflow:visible;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3));transform-origin:50% 100%;transition:transform .25s var(--ease)}
.rm-badge svg{animation:gbob 3.6s ease-in-out infinite}
.rm-badge:hover svg,.rm-badge:focus-visible svg{animation:none;transform:scale(1.1)}
.m-mk.badge{cursor:pointer}
@keyframes gbob{50%{transform:translateY(-3px)}}

/* pastille de région sur la carte : ouvre les filtres (Micro-région) pour en choisir une */
.chip-region{background:var(--btn);color:var(--btn-ink);border-color:transparent;max-width:220px;padding-left:12px}
.chip-region:hover{background:var(--btn-hover);border-color:transparent}
.chip-region span{overflow:hidden;text-overflow:ellipsis}
/* carte illustrée de secours (hors connexion) : une vraie illustration, aux couleurs fixes (elle ne suit pas la lumière du jour) */
.mapcanvas.is-illus{--map-sea:#A9D8E6;--map-sea-2:#C9E8F1;--map-land:#F6EAC9;--map-line:#CDB27A;--map-relief:#F6EAC9;--map-relief-sh:#F6EAC9;--map-text:#3B4A54;--halo-op:.7;background:#A9D8E6}
.is-illus .m-sea{fill:url(#il-sea)}
.is-illus .m-land{fill:url(#il-land);stroke:#B9A574;stroke-width:1.800}
.is-illus .m-halo3{opacity:.55}
.is-illus .m-townname{font-weight:600}
/* ============ ANIMATIONS : décor de la carte illustrée (de secours) ============ */
.sc-sway,.sc-bob,.sc-spin,.sc-cloud,.sc-wave,.sc-fly{transform-box:fill-box}
.sc-sway{transform-origin:50% 100%;animation:scsway 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.sc-bob{transform-origin:50% 100%;animation:scbob 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.sc-spin{transform-origin:50% 50%;animation:scspin 7s linear infinite}
.sc-cloud{animation:sccloud 18s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.sc-wave{animation:scwave 5.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.sc-fly{animation:scfly 8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes scsway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes scbob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@keyframes scspin{to{transform:rotate(360deg)}}
@keyframes sccloud{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@keyframes scwave{0%,100%{transform:translateX(-3px);opacity:.45}50%{transform:translateX(4px);opacity:.9}}
@keyframes scfly{0%,100%{transform:translate(-6px,2px)}50%{transform:translate(8px,-4px)}}
/* une région précise est affichée (plutôt que toute l'île) : les illustrations de décor s'effacent, on ne garde que la carte et les adresses */
.mapview.is-region .sc-layer { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; }
.mapview.is-region .sc-layer * { animation-play-state: paused !important; }
.mapview:not(.is-region) .sc-layer { transition: opacity .6s ease; }