@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Work+Sans:wght@400;500;600;700&display=swap'); /* Mêmes couleurs qu'.nono-frame ci-dessous, mais posées ici aussi au niveau global — la fiche (et tout ce qu'elle contient, dont les étoiles de "nono-etoiles") est déplacée sous sur mobile pour devenir un tiroir qui glisse depuis le bas, donc HORS de .nono-frame : sans ce double réglage, tout ce qui utilise ces couleurs là-dedans perd leur valeur une fois relocalisé (elles ne se transmettent qu'aux descendants du DOM, jamais au-delà). */ :root{ --nono-pine:#0f3d2e; --nono-cranberry:#a3172b; --nono-gold:#d9a441; --nono-cream:#faf3e6; --nono-beige:#f6ead4; --nono-paper:#fffaf1; --nono-ink:#231a14; } .nono-frame{ --nono-pine:#0f3d2e; --nono-cranberry:#a3172b; --nono-gold:#d9a441; --nono-cream:#faf3e6; --nono-beige:#f6ead4; --nono-paper:#fffaf1; --nono-ink:#231a14; --nono-radius:18px; --nono-shadow-lg: 0 30px 60px -20px rgba(10,20,15,.45); position:relative; width:100%; max-width:1180px; margin:0 auto; -webkit-tap-highlight-color: transparent; font-family:'Work Sans', sans-serif; color:var(--nono-ink); } .nono-frame *{ -webkit-tap-highlight-color: transparent; box-sizing:border-box; } /* ---------- Filtre ---------- */ .nono-filter-wrap{ position:relative; display:flex; justify-content:center; align-items:center; gap:10px; margin: 0 0 18px; } .nono-filter-btn{ border:1px solid rgba(15,61,46,.28); background: var(--nono-pine); color:#fff; padding: 9px 18px; border-radius: 999px; font-size:.82rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; transition: background .15s ease, transform .15s ease; } .nono-filter-btn-icon{ width:15px; height:15px; flex-shrink:0; } .nono-filter-btn:hover{ background:#0a2a20; transform: translateY(-1px); } .nono-filter-btn .nono-count{ opacity:.75; font-weight:500; } .nono-toggle-all-external{ border:1px solid rgba(15,61,46,.28); background:#fff; color: var(--nono-cranberry); padding: 9px 16px; border-radius: 999px; font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap; width:132px; display:flex; align-items:center; justify-content:center; gap:6px; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease; } .nono-toggle-all-external:hover{ transform: translateY(-1px); } @media (hover: hover) and (pointer: fine) { .nono-toggle-all-external.nono-toggle-show:hover, .nono-filter-headrow .nono-mini-link.nono-toggle-show:hover{ background:#1f7a3d; color:#fff; } .nono-toggle-all-external.nono-toggle-hide:hover, .nono-filter-headrow .nono-mini-link.nono-toggle-hide:hover{ background: var(--nono-cranberry); color:#fff; } } .nono-toggle-all-external.nono-toggle-show, .nono-filter-headrow .nono-mini-link.nono-toggle-show{ color:#1f7a3d; border-color: rgba(31,122,61,.35); background: rgba(31,122,61,.08); } .nono-toggle-all-external.nono-toggle-hide, .nono-filter-headrow .nono-mini-link.nono-toggle-hide{ color: var(--nono-cranberry); border-color: rgba(163,23,43,.35); background: rgba(163,23,43,.08); } @media (max-width: 899px){ .nono-toggle-all-external.nono-toggle-show{ background:#1f7a3d; color:#fff; border-color:#1f7a3d; } .nono-toggle-all-external.nono-toggle-hide{ background: var(--nono-cranberry); color:#fff; border-color: var(--nono-cranberry); } } .nono-filter-drag-handle{ display:none; } .nono-filter-close{ display:none !important; } .nono-filter-popup{ position:absolute; top: calc(100% + 8px); left:50%; transform: translateX(-50%) translateY(-6px); background: var(--nono-paper) !important; border-radius: 18px; width: min(340px, 88vw); max-height: 440px; box-shadow: var(--nono-shadow-lg); opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease; z-index:999998; display:flex; flex-direction:column; overflow:hidden; } .nono-filter-popup.open{ opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0); } .nono-filter-track{ display:flex; width:200%; flex:1 1 auto; min-height:0; transition: transform .3s cubic-bezier(.2,.9,.25,1); } .nono-filter-track.detail-open{ transform: translateX(-50%); } .nono-filter-track.nono-filter-dragging{ transition:none; } .nono-filter-page{ width:50%; height:100%; flex:0 0 50%; display:flex; flex-direction:column; min-height:0; } .nono-filter-head{ padding:12px 12px 10px; border-bottom:1px solid rgba(0,0,0,.08); flex:0 0 auto; } .nono-filter-search{ width:100% !important; border:1px solid rgba(0,0,0,.12) !important; border-radius:10px !important; padding:9px 11px 9px 34px !important; margin:0 !important; box-sizing:border-box !important; height:auto !important; font-family:'Work Sans',sans-serif !important; font-size:.85rem !important; outline:none !important; background:#fff !important; box-shadow:none !important; color: var(--nono-ink) !important; } .nono-filter-search:focus{ border-color: var(--nono-pine) !important; } .nono-filter-search-wrap{ position:relative; } .nono-filter-search-icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:.85rem; opacity:.55; pointer-events:none; } .nono-filter-headrow{ display:flex; align-items:center; gap:8px; margin-top:8px; position:relative; } .nono-filter-headrow .nono-mini-link{ display:none; border:none; background: rgba(15,61,46,.08); color: var(--nono-cranberry); font-size:.76rem; font-weight:700; cursor:pointer; padding:6px 16px; border-radius:999px; margin:0 auto; width:132px; align-items:center; justify-content:center; gap:6px; transition: background-color .18s ease, color .18s ease; } .nono-toggle-all-icon{ font-size:.85rem; font-weight:700; line-height:1; } .nono-filter-headrow .nono-hint-small{ position:absolute; right:0; font-size:.72rem; opacity:.55; } .nono-filter-scroll{ flex:1; min-height:0; overflow-y:auto; padding:6px 8px 10px; scrollbar-width: thin; scrollbar-color: rgba(15,61,46,.3) transparent; } .nono-filter-scroll::-webkit-scrollbar{ width:6px; } .nono-filter-scroll::-webkit-scrollbar-thumb{ background: rgba(15,61,46,.28); border-radius:99px; } .nono-filter-detail-head{ display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.08); flex:0 0 auto; cursor:pointer; font-size:.88rem; font-weight:600; color: var(--nono-ink); } .nono-filter-detail-head:hover{ background: rgba(0,0,0,.03); } .nono-filter-detail-head .nono-back-arrow{ font-style:normal; font-size:1.3rem; line-height:1; opacity:.7; } .nono-cat-head{ display:flex; align-items:center; gap:9px; padding:9px 6px; border-radius:10px; cursor:pointer !important; margin-bottom:2px; } .nono-cat-head.no-match{ display:none; } .nono-cat-head *{ cursor:pointer !important; } .nono-cat-head:hover{ background: rgba(0,0,0,.04); } .nono-cat-head .nono-dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; } .nono-cat-head .nono-cat-picto{ width:20px; height:20px; object-fit:contain; flex:0 0 auto; } .nono-cat-head .nono-cat-name{ font-size:.85rem; font-weight:600; color:var(--nono-ink); } .nono-cat-head .nono-cat-count{ font-size:.74rem !important; opacity:.5; color: var(--nono-ink) !important; font-weight:500 !important; } .nono-cat-head input[type=checkbox]{ margin:0; } .nono-cat-head .nono-cat-arrow{ margin-left:auto; font-style:normal; font-size:1.1rem; color:var(--nono-ink); opacity:.4; } .nono-item-row{ display:flex; align-items:center; gap:8px; padding:8px 6px; border-radius:8px; font-size:.8rem; cursor:pointer !important; } .nono-item-row *{ cursor:pointer !important; } .nono-item-row:hover{ background: rgba(0,0,0,.04); } .nono-item-row .nono-dot.small{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; } .nono-item-row .nono-item-picto{ width:16px; height:16px; object-fit:contain; flex:0 0 auto; } .nono-item-row .nono-item-name{ color:var(--nono-ink); opacity:.85; flex:1; } .nono-item-row .nono-isolate-btn{ border:none; background: var(--nono-gold); cursor:pointer; font-size:.75rem; opacity:.85; padding:5px; margin:-5px -2px -5px 0; border-radius:8px; line-height:1; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; box-sizing:content-box; transition: opacity .15s ease, transform .15s ease; } .nono-item-row .nono-isolate-btn:hover{ opacity:1; transform:scale(1.08); } .nono-item-row .nono-isolate-btn:active{ transform:scale(.92); } .nono-item-row .nono-isolate-btn.waiting{ opacity:1; animation: nono-isolate-pulse 1s ease-in-out infinite; } @keyframes nono-isolate-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.2); } } /* Animation "recherche de ma position" au centre de la carte */ .nono-geo-searching{ position:absolute; inset:0; z-index:900; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s ease; } .nono-geo-searching.open{ opacity:1; pointer-events:auto; } .nono-geo-searching-glass{ width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; box-shadow:0 8px 32px rgba(0,0,0,.18); } .nono-geo-searching-ring{ width:52px; height:52px; border-radius:50%; border:4px solid rgba(255,255,255,.35); border-top-color:#fff; animation: nono-geo-spin .9s linear infinite; } .nono-geo-searching-glass span{ font-size:12px; color:#fff; font-weight:500; text-align:center; line-height:1.3; text-shadow:0 1px 3px rgba(0,0,0,.25); } @keyframes nono-geo-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } .nono-item-row input[type=checkbox]{ margin:0; } .nono-item-row.no-match{ display:none; } /* ---------- Carte (zoom / pan) ---------- */ .nono-viewport{ position:relative; width:100%; aspect-ratio: 1200 / 786; border-radius: var(--nono-radius); overflow:hidden; box-shadow: var(--nono-shadow-lg); border: 6px solid var(--nono-paper); background:#ddd; touch-action:none; cursor: grab; } .nono-viewport.dragging{ cursor: grabbing; } .nono-stage{ position:absolute; top:0; left:0; width:100%; height:100%; transform-origin: 0 0; } .nono-stage.animated{ transition: transform .6s cubic-bezier(.22,.9,.3,1); } .nono-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; } .nono-stage svg{ position:absolute; inset:0; width:100%; height:100%; shape-rendering: geometricPrecision; } .nono-pin-group{ cursor:pointer; } .nono-pin-halo{ opacity:0; pointer-events:none; transform-box: fill-box; transform-origin: center; } .nono-pin-core{ stroke:#fff; stroke-width:3; transition: r .12s ease; } .nono-pin-core-nocolor{ stroke:none; } /* Propre à Safari/WebKit uniquement (Chrome, Firefox et les autres l'ignorent tout simplement, sans aucun effet) : sa mise à l'échelle des images est historiquement moins nette que celle de Chrome à fort zoom, rendant les pictos flous/pixélisés sur iPhone (jamais sur Android ni desktop, au même niveau de zoom). Demande un rendu plus net. */ .nono-pin-icon{ image-rendering: -webkit-optimize-contrast; } /* ...sauf pendant que la géolocalisation est active : dans ce cas précis, ce même réglage donne un résultat "cassé"/pixels mélangés sur Safari plutôt qu'un simple flou — on revient alors au rendu par défaut du navigateur. #nonoGeoToggleBtn.active est déjà l'état fiable existant du bouton Localiser (activé/désactivé), :has() permet de le vérifier ici sans avoir à dupliquer sa logique. */ .nono-frame:has(#nonoGeoToggleBtn.active) .nono-pin-icon{ image-rendering: auto; } .nono-pin-hit{ fill: rgba(255,255,255,0.001); } .nono-pin-group:hover .nono-pin-core{ filter: brightness(1.15); } /* Rebond volontairement VERTICAL uniquement (jamais un changement de taille) — appliqué à un groupe intérieur dédié, séparé de celui qui gère la position/taille de la puce (jamais touché par ce rebond, ni l'inverse — les deux ne peuvent donc plus interférer l'un avec l'autre). Les distances sont volontairement petites et exprimées en unités du plan : comme ce groupe est déjà à l'intérieur du groupe compensé pour rester à taille constante à l'écran, elles restent visuellement les mêmes quelques pixels à l'écran, peu importe le niveau de zoom du plan. */ .nono-pin-group.nono-pin-focused .nono-pin-bounce{ animation: nono-pin-vertical-bounce 3s ease infinite; } .nono-pin-group.nono-pin-focused .nono-pin-halo{ animation: nono-pin-pulse 2s ease-out infinite; } @keyframes nono-pin-vertical-bounce{ 0% { transform: translateY(0); } 10% { transform: translateY(-10px); } 18% { transform: translateY(0); } 25% { transform: translateY(-5px); } 33% { transform: translateY(0); } 100% { transform: translateY(0); } } @keyframes nono-pin-pulse{ 0% { transform: scale(1); opacity:.4; } 55% { transform: scale(1.6); opacity:0; } 100% { transform: scale(1.6); opacity:0; } } @media (max-width: 782px){ @keyframes nono-pin-pulse{ 0% { transform: scale(1); opacity:.4; } 55% { transform: scale(1.35); opacity:0; } 100% { transform: scale(1.35); opacity:0; } } } .nono-controls-row{ display:flex; justify-content:center; align-items:flex-start; gap:10px; margin-top:12px; } .nono-zoom-controls, .nono-geo-controls{ display:flex; flex-direction:row; gap:8px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25); border-radius:18px; padding:8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); } .nono-zoom-controls button, .nono-geo-controls button{ width:42px; height:42px; border-radius:12px; border:none; background: rgba(255,255,255,.12); color:#fff; font-size:1.1rem; font-weight:700; cursor:pointer; box-shadow:none; display:flex; align-items:center; justify-content:center; } .nono-zoom-controls button svg, .nono-geo-controls button svg{ width:20px; height:20px; } .nono-zoom-controls button:active, .nono-geo-controls button:active{ transform: scale(.94); } .nono-geo-controls button.active{ background: rgba(163,23,43,.55); } #nonoUserMarkerWrap{ position:absolute; pointer-events:none; z-index:3; transform-origin: 0 0; } .nono-user-cone{ position:absolute; left:0; top:0; pointer-events:none; z-index:3; transform: translate(-50%,-50%) rotate(0deg); transform-origin:50% 50%; opacity:0; transition: opacity .25s ease, transform .15s linear; } .nono-user-cone.visible{ opacity:1; } .nono-user-cone.nono-cone-below{ z-index:1; } /* Géolocalisation désactivée pour ce plan : on masque tout ce qui en dépend sans toucher à la logique JS existante, pour ne rien casser d'autre. */ .nono-frame.nono-geo-disabled #nonoGeoToggleBtn, .nono-frame.nono-geo-disabled #nonoUserMarkerWrap, .nono-frame.nono-geo-disabled #nonoGeoRecenterBtn, .nono-frame.nono-geo-disabled #nonoGeoStopRouteBtn, .nono-frame.nono-geo-disabled .nono-geo-controls, body.nono-geo-disabled .nono-isolate-btn, body.nono-geo-disabled #nonoGoThereBtn{ display:none !important; } .nono-user-cone svg{ display:block; position:static !important; inset:auto !important; width:auto !important; height:auto !important; } #nonoUserMarker{ position:relative !important; inset:auto !important; width:auto; height:auto; top:auto; left:auto; z-index:2; display:block; transform:translate(-50%,-100%); transform-origin: 50% 100%; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); object-fit:cover; transition: border-radius .15s ease; animation: nono-user-pulse 1.8s ease-in-out infinite; } @keyframes nono-user-pulse{ 0%, 100% { transform: translate(-50%,-100%) scale(1); } 50% { transform: translate(-50%,-100%) scale(1.15); } } .nono-geo-message-backdrop{ position:absolute; inset:0; background:rgba(15,61,46,.92); z-index:15; display:flex; align-items:center; justify-content:center; padding:20px !important; opacity:0; pointer-events:none; transition:opacity .2s ease; border-radius:inherit; } .nono-geo-message-backdrop.open{ opacity:1; pointer-events:auto; } .nono-geo-message{ width:100% !important; max-height:100%; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action: pan-y; overscroll-behavior: contain; text-align:center; color:#fff; font-size:.92rem; font-weight:600; line-height:1.55; transform:scale(.95); transition:transform .2s ease; padding:4px 2px !important; } .nono-geo-message-backdrop.open .nono-geo-message{ transform:scale(1); } .nono-geo-message-ok, .nono-geo-message-simulate{ display:block; width:fit-content; min-width:170px; margin:18px auto 0; padding:10px 22px; border-radius:999px; border:none; font-weight:700; font-size:.85rem; cursor:pointer; transition: transform .15s ease; text-align:center; } .nono-geo-message-ok{ background:#fff; color: var(--nono-pine); } .nono-geo-message-ok:hover{ transform:scale(1.06); } .nono-geo-offperimeter{ width:100% !important; max-height:100%; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior: contain; padding:16px 6px 6px !important; scrollbar-width: thin; scrollbar-color: rgba(15,61,46,.3) transparent; } .nono-geo-offperimeter::-webkit-scrollbar{ width:6px; } .nono-geo-offperimeter::-webkit-scrollbar-thumb{ background: rgba(15,61,46,.28); border-radius:99px; } .nono-geo-offperimeter-img{ position:relative; width:88px; height:88px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 14px; box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 0 10px rgba(217,164,65,.28); border:3px solid #fff; animation: nono-offperimeter-pop .5s cubic-bezier(.3,1.4,.4,1); } @keyframes nono-offperimeter-pop{ 0% { transform:scale(.5); opacity:0; } 100% { transform:scale(1); opacity:1; } } .nono-geo-offperimeter h3{ width:auto !important; box-sizing:border-box !important; margin:0 0 8px !important; padding:0 !important; font-size:1.05rem !important; color: var(--nono-gold) !important; } .nono-geo-offperimeter p{ width:auto !important; box-sizing:border-box !important; margin:0 0 12px !important; padding:0 !important; font-size:.85rem !important; font-weight:500 !important; opacity:.92; } .nono-geo-offperimeter ul{ width:auto !important; box-sizing:border-box !important; text-align:left; margin:0 0 6px !important; padding:0 0 0 20px !important; font-size:.78rem !important; font-weight:500 !important; opacity:.9; line-height:1.55 !important; } .nono-geo-offperimeter li{ width:auto !important; box-sizing:border-box !important; margin:0 0 9px !important; padding:0 !important; } .nono-geo-offperimeter li::marker{ color: var(--nono-gold); } /* Renfort supplémentaire à base d'identifiants (bien plus prioritaire qu'une classe) pour être sûr de l'emporter même face à un thème très insistant. */ #nonoGeoOffPerimeter h3, #nonoInfoContent h3{ width:auto !important; margin:0 0 8px !important; padding:0 !important; } #nonoGeoOffPerimeter p, #nonoInfoContent p{ width:auto !important; margin:0 0 12px !important; padding:0 !important; } #nonoGeoOffPerimeter ul, #nonoInfoContent ul{ width:auto !important; margin:0 0 6px !important; padding:0 0 0 20px !important; } #nonoGeoOffPerimeter li, #nonoInfoContent li{ width:auto !important; margin:0 0 9px !important; padding:0 !important; } .nono-geo-message-simulate{ background: var(--nono-gold); color: var(--nono-pine); } .nono-geo-message-simulate:hover{ transform:scale(1.04); } .nono-geo-offperimeter .nono-geo-message-ok{ margin-top:10px; } @media (min-width: 900px) and (min-height: 501px){ .nono-geo-offperimeter h3{ font-size:1.2rem; } .nono-geo-offperimeter p{ font-size:.94rem; } .nono-geo-offperimeter ul{ font-size:.88rem; } } /* ---------- Fiche ---------- */ .nono-backdrop{ position:absolute; inset:0; background:transparent; pointer-events:none; z-index:999999; display:flex; align-items:center; justify-content:center; } .nono-backdrop.open{ pointer-events:auto; } .nono-fiche{ position:relative; background: var(--nono-beige) !important; width: min(420px, 90%); max-height: 88%; border-radius: 22px 22px 0 0; overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--nono-shadow-lg); transform: translateY(24px) scale(.97); opacity:0; transition: transform .32s cubic-bezier(.2,.9,.25,1), opacity .28s ease; } .nono-fiche.nono-fiche-dragging{ transition: none; } .nono-filter-popup.nono-filter-dragging{ transition: none !important; } .nono-fiche-body{ background: var(--nono-beige) !important; } .nono-fiche-body, .nono-fiche-body *{ color: var(--nono-ink) !important; } .nono-fiche-detail-body, .nono-fiche-detail-body *{ color: var(--nono-ink) !important; } .nono-fiche-accordion-head, .nono-fiche-accordion-head *{ color: var(--nono-ink) !important; } .nono-backdrop.open .nono-fiche{ transform: translateY(0) scale(1); opacity:1; } .nono-fiche-top{ position:relative; display:flex; gap:16px; padding: 20px 20px 16px; align-items:center; color:#fff; } .nono-fiche-top > div{ align-self:center; min-width:0; } .nono-fiche-photo{ width:76px; height:76px; border-radius:16px; flex:0 0 auto; align-self:center; box-shadow: 0 8px 18px rgba(0,0,0,.28); border: 2px solid rgba(255,255,255,.5); cursor:pointer; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; font-size:2rem; } .nono-fiche-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s cubic-bezier(.34,1.56,.64,1); } .nono-fiche-photo:hover img{ transform: scale(1.22); } .nono-fiche-cat{ font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; opacity:.85; } .nono-fiche-top h2{ font-family:'Fraunces', serif !important; font-weight:600 !important; font-size:1.32rem !important; margin: 3px 0 0 !important; line-height:1.15 !important; color:#fff !important; } .nono-fiche-close{ position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:none; background: rgba(0,0,0,.22); color:#fff; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; } .nono-fiche-body{ padding: 18px 20px 22px; overflow-y:auto; flex:0 1 auto; min-height:0; scrollbar-width: thin; scrollbar-color: rgba(15,61,46,.3) transparent; } .nono-fiche-body::-webkit-scrollbar{ width:6px; } .nono-fiche-body::-webkit-scrollbar-thumb{ background: rgba(15,61,46,.28); border-radius:99px; } .nono-fiche-desc{ margin: 0 0 16px; font-size:.92rem; line-height:1.55 !important; opacity:.85; font-weight:600 !important; } .nono-fiche-desc p{ margin:0 0 8px !important; } .nono-fiche-desc p:last-child{ margin-bottom:0 !important; } .nono-fiche-desc br{ line-height:1.55 !important; } .nono-fiche-desc ul, .nono-fiche-desc ol{ margin:0 0 8px !important; padding-left:18px !important; } .nono-fiche-desc li{ margin:0 !important; line-height:1.55 !important; } .nono-fiche-desc:empty{ display:none; } .nono-fiche-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid rgba(0,0,0,.08); font-size:.88rem; } .nono-go-there-row{ cursor:pointer !important; font-weight:600; color: var(--nono-pine); } .nono-go-there-row *{ cursor:pointer !important; } .nono-go-there-row:hover{ opacity:.8; } .nono-go-there-row.waiting{ opacity:.6; pointer-events:none; } #nonoRouteOverlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; } .nono-footprint{ animation: nono-footprint-fade 2.4s ease-in-out infinite; } .nono-footprint ellipse{ fill: #f6ead4; } @keyframes nono-footprint-fade{ 0% { opacity:0; } 5% { opacity:.72; } 16% { opacity:.72; } 23% { opacity:0; } 100% { opacity:0; } } #nonoFicheHoraires{ font-weight:600 !important; } .nono-ic{ width:30px; height:30px; border-radius:9px; background: var(--nono-cream); display:flex; align-items:center; justify-content:center; font-size:.95rem; flex:0 0 auto; } .nono-fiche-row a{ color:var(--nono-ink); text-decoration:none; font-weight:600; } .nono-socials{ display:flex; gap:16px; align-items:center; justify-content:center; flex:0 0 auto; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(0,0,0,.08); } .nono-socials a{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; text-decoration:none; opacity:.92; transition: opacity .15s ease, transform .18s cubic-bezier(.34,1.56,.64,1); } .nono-socials a:hover{ opacity:1; transform: translateY(-3px) scale(1.15); } .nono-fiche-track{ display:flex; width:200%; flex:0 1 auto; min-height:0; transition: transform .3s cubic-bezier(.2,.9,.25,1); } .nono-fiche-track.detail-open{ transform: translateX(-50%); } .nono-fiche-track.nono-filter-dragging{ transition:none; } .nono-fiche-page{ width:50%; flex:0 0 50%; display:flex; flex-direction:column; min-height:0; } .nono-fiche-accordion-head{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid rgba(0,0,0,.08); cursor:pointer !important; font-size:.88rem; font-weight:600; line-height:1.4 !important; } .nono-fiche-accordion-head *{ cursor:pointer !important; } .nono-fiche-accordion-head .nono-count-inline{ font-size:.74rem; font-weight:500; opacity:.5; } .nono-fiche-accordion-head .nono-cat-arrow{ margin-left:auto; font-style:normal; font-size:1.1rem; opacity:.4; } .nono-fiche-detail-body{ flex:0 1 auto; min-height:0; overflow-y:auto; padding:16px 20px 22px; scrollbar-width: thin; scrollbar-color: rgba(15,61,46,.3) transparent; } .nono-fiche-detail-body::-webkit-scrollbar{ width:6px; } .nono-fiche-detail-body::-webkit-scrollbar-thumb{ background: rgba(15,61,46,.28); border-radius:99px; } .nono-product-item{ padding:8px 0; font-size:.85rem; opacity:.85; line-height:1.4 !important; border-bottom:1px solid rgba(0,0,0,.06); } .nono-product-item:last-child{ border-bottom:none; } .nono-info-item{ padding:4px 0; font-size:.85rem; opacity:.85; white-space:pre-wrap; line-height:1.5 !important; } .nono-product-item p, .nono-info-item p{ margin:0 0 6px !important; } .nono-product-item p:last-child, .nono-info-item p:last-child{ margin-bottom:0 !important; } .nono-product-item br, .nono-info-item br{ line-height:1.4 !important; } .nono-product-item ul, .nono-product-item ol, .nono-info-item ul, .nono-info-item ol{ margin:0 0 6px !important; padding-left:18px !important; } .nono-product-item li, .nono-info-item li{ margin:0 !important; line-height:1.4 !important; } /* Classe prête à l'emploi, réutilisable dans n'importe quel champ texte libre (Spécialités, +d'infos...) pour afficher une étoile devant chaque

d'une liste — ex.

Vin chaud

. Libre à elle d'utiliser ses propres classes pour un autre rendu. */ ul.nono-etoiles{ list-style:none; padding-left:0; margin:0 0 6px !important; } ul.nono-etoiles li{ padding-left:18px; position:relative; margin:0 0 4px !important; } ul.nono-etoiles li::before{ content:"★"; position:absolute; left:0; top:0; color:var(--nono-gold) !important; font-size:.75rem; } .nono-drag-handle{ display:none; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:38px; height:5px; border-radius:99px; background: rgba(255,255,255,.6); z-index:3; } @media (max-width: 768px){ .nono-backdrop{ position:fixed; inset:0; align-items:flex-end; } .nono-fiche{ width:100%; max-height: 85vh; max-height: 85svh; border-radius: 22px 22px 0 0; transform: translateY(100%); } .nono-backdrop.open .nono-fiche{ transform: translateY(0); } .nono-drag-handle{ display:block; } .nono-fiche-top{ padding-top:26px; } /* Les icônes du tuto doivent toujours tenir sur une seule ligne, même avec beaucoup d'icônes — on réduit leur taille plutôt que de les laisser passer à la ligne suivante. */ #nonoInfoContent{ display:flex; flex-direction:column; } #nonoInfoContent > div:first-child{ flex:0 0 auto; } .nono-geo-offperimeter-img{ width:88px !important; height:88px !important; margin:0 auto 14px !important; } #nonoInfoContent h3{ margin:0 0 14px !important; font-size:.88rem !important; } .nono-info-icon-row{ margin:0 0 6px !important; } #nonoInfoTextBox{ margin-bottom:4px !important; padding:7px 10px !important; } .nono-info-icon-row{ display:grid !important; grid-template-columns:repeat(4, 1fr) !important; gap:6px !important; max-width:220px !important; margin-left:auto !important; margin-right:auto !important; } .nono-info-icon-btn{ width:auto !important; height:auto !important; aspect-ratio:1 !important; font-size:.85rem !important; border-radius:8px !important; } .nono-viewport{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; aspect-ratio: 4 / 5 !important; } .nono-filter-popup{ position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; max-width:none !important; max-height:none !important; border-radius: 22px 22px 0 0 !important; transform: translateY(100%); } .nono-filter-popup.open{ transform: translateY(0); } .nono-filter-close{ display:flex !important; width:20px !important; height:20px !important; top:10px !important; right:14px !important; font-size:.68rem !important; } .nono-filter-drag-handle{ display:block; margin:18px auto 0; width:38px; height:5px; border-radius:99px; background: rgba(15,61,46,.25); flex:0 0 auto; } .nono-filter-head{ padding-top:18px; padding-bottom:18px; } .nono-filter-headrow{ margin-top:18px; } .nono-controls-row{ gap:0; border-radius:18px; } .nono-zoom-controls, .nono-geo-controls{ padding:9px; gap:9px; box-shadow:none; } .nono-zoom-controls{ border-radius:18px 0 0 18px; border-right:none; } .nono-geo-controls{ border-radius:0 18px 18px 0; border-left:none; } /* Sans le bouton géoloc juste à côté (désactivé pour ce plan), la barre de zoom doit reprendre ses 4 coins arrondis plutôt que de rester coupée à droite (pensée à l'origine pour toujours avoir un voisin direct). */ .nono-frame.nono-geo-disabled .nono-zoom-controls{ border-radius:18px !important; border-right:1px solid rgba(255,255,255,.25) !important; } .nono-zoom-controls button, .nono-geo-controls button{ width:34px; height:34px; font-size:.95rem; border-radius:10px; } .nono-item-row .nono-isolate-btn{ width:24px; height:24px; padding:6px; margin:-6px -3px -6px 0; font-size:.9rem; opacity:1; } } /* ---------- Plan dans la lightbox sur mobile : mise en page façon application (barres haut/bas fixes façon "appli", plan qui prend toute la hauteur restante) — UNIQUEMENT à l'intérieur de la lightbox (.nono-lb-backdrop), jamais sur la page autonome du plan, qui garde son organisation habituelle en flux normal dans le reste de la page. ---------- */ @media (max-width: 768px){ .nono-lb-backdrop .nono-frame .nono-filter-wrap{ position:fixed !important; top:0; left:0; right:0; z-index:400; height:56px; background:#000; margin:0; padding:0 16px; justify-content:flex-start; align-items:center; gap:14px; } /* "Afficher/Masquer" finalement gardé ici, juste à côté de Filtrer (pas retiré comme dans un premier temps — il n'était pas assez visible une fois seulement dans la fenêtre Filtrer elle-même). */ .nono-lb-backdrop .nono-frame .nono-filter-btn, .nono-lb-backdrop .nono-frame .nono-toggle-all-external{ padding-left:12px; padding-right:12px; } /* Le compteur "(x/y)" prend trop de place ici et finit par chevaucher le bouton fermer de la lightbox — masqué dans ce contexte précis uniquement (reste affiché ailleurs, où il est utile). */ .nono-lb-backdrop .nono-frame #nonoFilterCount{ display:none; } .nono-lb-backdrop .nono-frame .nono-viewport{ position:fixed !important; top:56px; bottom:60px; left:0; right:0; width:auto; height:auto; aspect-ratio:auto !important; margin:0; border-radius:0; } /* Barre du bas : une vraie zone réservée en bas de l'écran (plutôt que de faire flotter les icônes à une distance fixe), pour les centrer parfaitement à la verticale dedans — sans aucun fond décoratif derrière elles, juste les icônes sur le fond du plan/de la lightbox. */ .nono-lb-backdrop .nono-frame .nono-controls-row{ position:fixed !important; bottom:0; left:0; right:0; z-index:400; height:60px; margin:0; background:transparent; justify-content:center; align-items:center; gap:36px; padding:0 12px; } /* Ni fond ni contour — juste les icônes elles-mêmes, centrées ensemble (marche aussi bien avec les deux groupes que si la géoloc est désactivée pour ce plan et qu'un seul groupe reste). */ .nono-lb-backdrop .nono-frame .nono-zoom-controls, .nono-lb-backdrop .nono-frame .nono-geo-controls{ gap:16px; background:transparent; align-items:center; border:none; } .nono-lb-backdrop .nono-frame .nono-zoom-controls button, .nono-lb-backdrop .nono-frame .nono-geo-controls button{ background:transparent; width:auto; height:auto; } .nono-lb-backdrop .nono-frame .nono-zoom-controls button svg, .nono-lb-backdrop .nono-frame .nono-geo-controls button svg{ width:24px; height:24px; display:block; } /* Repositionne le bouton fermer de nono-lightbox pour qu'il s'aligne avec cette nouvelle barre du haut, en le réduisant — sans jamais toucher aux fichiers de ce plugin séparé : :has() limite cette règle au seul cas où le plan est bien ce qui s'affiche dans la lightbox à cet instant précis. */ .nono-lb-backdrop:has(.nono-frame) .nono-lb-close{ top:14px; bottom:auto; width:28px !important; height:28px !important; font-size:.72rem !important; } /* Bouton Infos : même taille et mêmes couleurs que le bouton fermer juste au-dessus (fond blanc semi-transparent, "i" blanc) plutôt que son style habituel (rond blanc plein, "i" vert foncé), pour qu'ils se ressemblent dans cette barre. Sorti du flux normal de la barre et collé au bouton fermer (10px d'écart) plutôt que placé parmi les autres boutons — même formule de décalage que lui pour rester aligné même sur un téléphone à encoche (env(safe-area-inset-right)). */ .nono-lb-backdrop .nono-frame .nono-info-btn-mobile{ position:fixed !important; top:14px !important; right:calc(max(16px, env(safe-area-inset-right, 0px)) + 38px) !important; z-index:999999 !important; width:28px !important; height:28px !important; font-size:.72rem !important; background:rgba(255,255,255,.14) !important; color:#fff !important; box-shadow:none !important; } } /* ---------- Galerie / lightbox (taille réelle) ---------- */ .nono-gallery-lightbox{ position:fixed; inset:0; background: rgba(8,14,10,.92); z-index:1000001; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .2s ease; } .nono-gallery-lightbox.open{ opacity:1; pointer-events:auto; } .nono-gl-image{ max-width:88vw; max-height:82vh; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .nono-gl-close{ position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:1.1rem; cursor:pointer; } .nono-gl-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; } .nono-gl-prev{ left:20px; } .nono-gl-next{ right:20px; } .nono-gl-counter{ position:absolute; bottom:22px; left:0; right:0; text-align:center; color:rgba(255,255,255,.7); font-size:.8rem; } /* ---------- Bouton info (tuto icônes) ---------- */ .nono-info-btn{ width:34px; height:34px; flex-shrink:0; border-radius:50%; border:none; background:rgba(255,255,255,.92); box-shadow:0 1px 4px rgba(0,0,0,.18); font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:15px; color:#0f3d2e; cursor:pointer; display:flex; align-items:center; justify-content:center; } /* Mobile : à côté de "Filtrer". Desktop : dans l'en-tête de la fenêtre filtre, à côté de "Tout afficher/masquer" — jamais les deux en même temps (même logique que nonoToggleAllBtn / nonoToggleAllBtnDesktop). Ces deux règles de base doivent impérativement rester AVANT la media query desktop juste en dessous : à spécificité CSS égale, c'est l'ordre dans le fichier qui tranche, donc les règles desktop doivent être physiquement après pour l'emporter (c'était l'inverse avant, d'où le bouton mal placé). */ .nono-info-btn-desktop{ display:none; } /* ---------- Filtre en barre latérale fixe (desktop uniquement) ---------- */ /* La hauteur minimale évite qu'un téléphone tourné en paysage (large mais toujours peu haut) ne bascule à tort en mode desktop — un iPhone récent dépasse souvent 900px de large une fois tourné, mais garde une hauteur d'écran de téléphone. */ @media (min-width: 900px) and (min-height: 501px){ .nono-map-row{ display:flex; align-items:flex-start; justify-content:center; gap:18px; width:100vw; box-sizing:border-box; padding:0 20px; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .nono-filter-wrap{ flex:0 0 400px; width:400px; margin:0; justify-content:flex-start; } .nono-filter-btn{ display:none; } .nono-toggle-all-external{ display:none; } .nono-filter-headrow .nono-mini-link{ display:flex; } .nono-info-btn-mobile{ display:none; } .nono-info-btn-desktop{ display:flex; position:absolute; left:0; top:50%; transform:translateY(-50%); } .nono-filter-popup{ position:static !important; opacity:1 !important; pointer-events:auto !important; transform:none !important; width:100%; max-height:none; } .nono-viewport{ flex:0 1 1180px; } .nono-controls-row{ transform: translateX(209px); } /* Sur desktop, la carte reste dans le flux normal de la page (contrairement au mode plein écran mobile) — la fiche ne doit donc rester au-dessus que du contenu de la carte elle-même, jamais du menu header du site. Un z-index bien plus modeste que le 999999 utilisé sur mobile suffit largement ici, et reste sous celui d'un menu header classique. */ .nono-backdrop{ position:absolute; align-items:stretch; justify-content:stretch; overflow:hidden; z-index:50; } /* Cette règle "étire" volontairement la fiche pour couvrir toute la zone visible de la carte sur une page normale (où le cadre est calculé au pixel près). Dans "Nono : lightbox", la fiche n'est plus calculée ainsi. (Le overflow:visible qui était ici a été retiré : il n'était pas utile — c'est en fait lui qui faisait glisser la fiche depuis sous tout l'écran plutôt que depuis juste sous la carte, à l'ouverture.) */ .nono-backdrop.nono-backdrop-in-lightbox{ align-items:center !important; justify-content:center !important; } /* Quand la carte est affichée à l'intérieur de "Nono : lightbox" (son propre fond passe très haut, 999998, pour rester au-dessus de tout), la fiche doit repasser au-dessus de LUI — sinon elle reste invisible derrière la carte, seulement visible une fois la lightbox refermée. */ .nono-lb-backdrop.nono-lb-open ~ .nono-backdrop{ z-index:1000000 !important; } .nono-fiche{ position:absolute; bottom:0; width:33.333%; max-width:none; max-height:none; border-radius: 22px 22px 0 0; box-shadow: var(--nono-shadow-lg); } .nono-fiche.nono-fiche-left{ left:0; transform: translateY(100%); } .nono-fiche.nono-fiche-right{ left:auto; right:0; transform: translateY(100%); } .nono-backdrop.open .nono-fiche{ transform: translateY(0); } } .nono-info-popup{ display:none; } .nono-info-icon-row{ display:flex; gap:6px; justify-content:center; margin: 4px 0 12px; } .nono-info-icon-btn{ flex:0 0 auto; width:57px; height:57px; border:none; border-radius:12px; background:rgba(255,255,255,.08); color:#fff; font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background-color .18s ease; } .nono-info-icon-btn svg{ width:24px; height:24px; } .nono-info-icon-btn.active{ background:rgba(255,255,255,.28); } .nono-info-text-box{ text-align:left; background:rgba(255,255,255,.08); border-radius:10px; padding:12px 14px; min-height:20px; font-size:.8rem; font-weight:500; line-height:1.5; color:#fff; } .nono-info-img-square{ border-radius:12px !important; } /* Safari sur iPhone zoome automatiquement toute la page au clic dans un champ dont le texte fait moins de 16px — Android n'a pas ce comportement, donc sans risque de le réserver au mobile uniquement (desktop garde sa taille .85rem d'origine, inchangée). Sans ça, le zoom restait bloqué (impossible à annuler en pinçant l'écran) après une recherche suivie d'un clic sur un point, à cause de la fermeture du clavier forcée par le correctif Android voisin (filterSearch.blur()) qui perturbe l'annulation normale de ce zoom par Safari. */ @media (max-width: 768px){ .nono-filter-search{ font-size:16px !important; } }