/* ========================================== BLEED & GRID — design tokens Terrain = painted, flat, organic-edged (bleed). Survey = precise, ruled, technical (grid). The app lives permanently in deep space, so this is a single committed dark world, not a light/dark pair. ========================================== */ :root { /* terrain — flat fills sampled from aerialvue.png */ --ocean: #2fd2ff; --ocean-ink: #bdf1ff; --void: #0a1a3a; --continent: #ffb020; /* accent — the one bold spend */ --continent-ink: #1a1206; --river: #ff8452; --foliage: #3ad46a; --foliage-deep: #1c7d1c; --plateau: #a09556; /* survey — the instrument laid over the world */ --survey-pink: #ff6b9d; /* surfaces & text */ --bg: #0a0f1f; --surface: rgba(18, 26, 51, 0.94); --surface-2: rgba(255, 255, 255, 0.06); --text: #e8ecf7; --text-muted: #98a3c4; --border: rgba(232, 236, 247, 0.14); /* type */ --font-display: 'Fredoka', system-ui, sans-serif; --font-body: 'Schibsted Grotesk', Arial, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; } body, html { margin: 0; padding: 0; height: 100%; font-family: var(--font-body); background: url('images/cosmic-bleedgrid.jpg') center center / cover no-repeat fixed; background-color: var(--bg); touch-action: manipulation; } #map { width: 100vw; height: 100vh; background: transparent !important; position: relative; z-index: 1; } /* ========================================== ÉTOILES "COOL CITY 3000" (js/cosmicText.js) Un conteneur plein écran, sous #map (dont le fond transparent laisse voir ce qu'il y a dessous), au-dessus du fond cosmique de . ========================================== */ #cosmic-text-stars { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .cosmic-glitter-star { position: absolute; width: var(--star-size, 2px); height: var(--star-size, 2px); margin: calc(var(--star-size, 2px) / -2); background: #fff; border-radius: 50%; /* le halo doit rester proportionnel à la taille de l'étoile, sinon une étoile minuscule avec un halo fixe de 4px déborde largement sur ses voisines et le texte devient une tache floue au lieu de points nets */ box-shadow: 0 0 calc(var(--star-size, 2px) * 2) rgba(255, 255, 255, 0.75); animation: cosmic-twinkle var(--twinkle-duration, 3.4s) ease-in-out infinite; animation-delay: var(--twinkle-delay, 0s); opacity: 0.2; } @keyframes cosmic-twinkle { 0%, 100% { opacity: 0.12; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.2); } } @media (prefers-reduced-motion: reduce) { .cosmic-glitter-star { animation: none; opacity: 0.7; } } /* ========================================== TRANSITION DE CHARGEMENT (vue aérienne + relief : le temps que les tuiles arrivent, on ne montre pas le globe à moitié texturé) ========================================== */ #loading-overlay { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity 0.6s ease; } #loading-overlay.is-hidden { opacity: 0; pointer-events: none; } .loading-blob { width: 64px; height: 64px; background: linear-gradient(135deg, var(--ocean), var(--continent)); border-radius: 44% 56% 60% 40% / 50% 45% 55% 50%; animation: loading-pulse 1.6s ease-in-out infinite; } @keyframes loading-pulse { 0%, 100% { transform: scale(0.85) rotate(0deg); } 50% { transform: scale(1.05) rotate(10deg); } } .loading-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em; color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { .loading-blob { animation: none; } } /* ========================================== BARRE DE RECHERCHE ========================================== */ #search-panel { position: absolute; top: 20px; left: 20px; width: 300px; background: var(--surface); color: var(--text); padding: 20px; border-radius: 20px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 100; backdrop-filter: blur(10px); } #search-title { font-family: var(--font-display); font-weight: 600; margin: 0 0 15px 0; font-size: 16px; } /* ✅ Nouveau conteneur flex pour input + bouton */ #search-container { display: flex; gap: 8px; align-items: center; } #parcel-input { flex: 1; min-width: 0; /* un input a une largeur min. intrinsèque : sans ça il ne rétrécit jamais dans la ligne flex, et pousse le bouton hors du panneau */ padding: 10px 12px; border: 1.5px solid transparent; border-radius: 10px; font-family: var(--font-body); font-size: 14px; background: rgba(255,255,255,0.92); color: #1c1a12; transition: border-color 0.15s; } #parcel-input:focus { outline: none; border-color: var(--survey-pink); } #search-btn { width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: none; border-radius: 44% 56% 60% 40% / 50% 45% 55% 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--continent); color: var(--continent-ink); transition: transform 0.15s, background 0.15s; } #search-btn:hover { background: #ffc457; transform: scale(1.06); } /* ========================================== SUGGESTIONS DE RECHERCHE (numéro ou artiste) ========================================== */ #search-suggestions { display: none; margin-top: 10px; max-height: 260px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.2); } #search-suggestions.show { display: block; } .suggestion-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.12s; } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover, .suggestion-item.active { background: rgba(255, 107, 157, 0.16); } .suggestion-item.empty { cursor: default; color: var(--text-muted); font-size: 13px; justify-content: center; } .suggestion-number { font-family: var(--font-mono); font-size: 11px; color: var(--continent); background: rgba(255, 176, 32, 0.16); padding: 2px 8px; border-radius: 10px; flex-shrink: 0; } .suggestion-name { font-family: var(--font-body); font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggestion-name.empty { color: var(--text-muted); font-style: italic; } /* ========================================== CONTRÔLES DE DIRECTION ========================================== */ #nav-controls { position: absolute; top: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 4px; } /* ========================================== BASCULE DE L'EFFET D'EAU ========================================== */ #toggle-relief, #toggle-water, #toggle-atmosphere, #toggle-clouds, #toggle-aerial, #toggle-cosmic-text { position: absolute; right: 20px; z-index: 100; width: 44px; height: 44px; background: color-mix(in srgb, var(--fx-accent) 22%, transparent); color: var(--fx-accent); border: 1px solid var(--fx-accent); border-radius: 44% 56% 60% 40% / 50% 45% 55% 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); transition: background 0.2s, transform 0.15s, color 0.2s, border-color 0.2s; } #toggle-water { top: 236px; --fx-accent: var(--ocean); } #toggle-atmosphere { top: 290px; --fx-accent: var(--survey-pink); } #toggle-clouds { top: 344px; --fx-accent: var(--text); } #toggle-aerial { top: 398px; --fx-accent: var(--river); } #toggle-cosmic-text { top: 452px; --fx-accent: var(--foliage); } #toggle-relief { top: 506px; --fx-accent: var(--plateau); } #toggle-relief:hover, #toggle-water:hover, #toggle-atmosphere:hover, #toggle-clouds:hover, #toggle-aerial:hover, #toggle-cosmic-text:hover { transform: scale(1.1); } #toggle-relief.is-off, #toggle-water.is-off, #toggle-atmosphere.is-off, #toggle-clouds.is-off, #toggle-aerial.is-off, #toggle-cosmic-text.is-off { background: var(--surface); color: var(--text-muted); border-color: var(--border); } /* ========================================== PANNEAUX DE RÉGLAGES D'EFFETS (eau, atmosphère...) Mécanique commune ("fx-*"), voir js/fxPanel.js. Chaque panneau ne déclare que sa position et sa couleur d'accent via --fx-accent. ========================================== */ #relief-settings-panel, #water-settings-panel, #atmosphere-settings-panel, #clouds-settings-panel, #aerial-settings-panel, #cosmic-text-settings-panel { display: none; position: absolute; right: 20px; width: 270px; max-height: 65vh; overflow-y: auto; z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } #relief-settings-panel { top: 560px; --fx-accent: var(--plateau); } #water-settings-panel { top: 560px; --fx-accent: var(--ocean); } #atmosphere-settings-panel { top: 560px; --fx-accent: var(--survey-pink); } #clouds-settings-panel { top: 560px; --fx-accent: var(--text); } #aerial-settings-panel { top: 560px; --fx-accent: var(--river); } #cosmic-text-settings-panel { top: 560px; --fx-accent: var(--foliage); } #relief-settings-panel.show, #water-settings-panel.show, #atmosphere-settings-panel.show, #clouds-settings-panel.show, #aerial-settings-panel.show, #cosmic-text-settings-panel.show { display: block; } .fx-panel-header { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } /* interrupteur on/off */ .fx-toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; } .fx-toggle-switch input { opacity: 0; width: 0; height: 0; } .fx-toggle-switch .toggle-track { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.15); border-radius: 20px; transition: background 0.2s; } .fx-toggle-switch .toggle-track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform 0.2s; } .fx-toggle-switch input:checked + .toggle-track { background: var(--fx-accent); } .fx-toggle-switch input:checked + .toggle-track::before { transform: translateX(18px); } /* sélecteur de shader */ .fx-shader-select { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .fx-shader-option { font-family: var(--font-body); font-size: 13px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--text-muted); cursor: pointer; text-align: left; transition: all 0.15s; } .fx-shader-option:hover { border-color: var(--fx-accent); color: var(--text); } .fx-shader-option.active { background: color-mix(in srgb, var(--fx-accent) 16%, transparent); border-color: var(--fx-accent); color: var(--fx-accent); font-weight: 600; } /* paramètres */ .fx-params { display: flex; flex-direction: column; gap: 14px; } .fx-param-row { display: flex; flex-direction: column; gap: 6px; } .fx-param-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); } .fx-param-value { font-family: var(--font-mono); color: var(--continent); font-size: 11px; } .fx-param-row input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--border); outline: none; } .fx-param-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--fx-accent); cursor: pointer; border: 2px solid var(--surface); } .fx-param-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--fx-accent); cursor: pointer; border: 2px solid var(--surface); } .nav-row { display: flex; gap: 4px; } .nav-btn { width: 44px; height: 44px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 44% 56% 60% 40% / 50% 45% 55% 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.15s, border-color 0.2s; backdrop-filter: blur(10px); user-select: none; } .nav-btn:hover { background: rgba(47, 210, 255, 0.22); border-color: var(--ocean); transform: scale(1.1) rotate(-4deg); } .nav-btn:active { transform: scale(0.95); } #nav-reset { background: var(--foliage-deep); border-color: var(--foliage); font-size: 20px; } #nav-reset:hover { background: var(--foliage); border-color: var(--foliage); transform: scale(1.1); } .zoom-row { margin-top: 8px; } .zoom-btn { font-size: 22px; font-weight: bold; } /* ========================================== VERSION MOBILE (< 768px) ========================================== */ @media (max-width: 768px) { /* ✅ Bouton fermer plus grand sur mobile */ #close-search { width: 36px; height: 36px; font-size: 18px; top: 8px; right: 8px; } /* ✅ Bouton rouvrir plus grand sur mobile */ #open-search { width: 60px; height: 60px; font-size: 26px; top: 10px; left: 10px; } /* ✅ Titre caché */ #search-title { display: none; } /* ✅ Menu plus compact */ #search-panel { top: 10px; left: 10px; right: 10px; width: auto; padding: 12px; } /* ✅ Input + bouton côte à côte */ #search-container { display: flex; gap: 8px; } #parcel-input { font-size: 16px; padding: 12px; margin-bottom: 0; } /* ✅ Placeholder en grisé */ #parcel-input::placeholder { color: #999; opacity: 1; } #search-btn { width: 48px; height: 48px; } /* ✅ Boutons de direction cachés */ #nav-controls { display: none; } /* Panneau shaders */ #shader-panel { bottom: 10px; left: 10px; right: 10px; width: auto; padding: 15px; } #shader-panel h3 { font-size: 16px; } .shader-btn { font-size: 15px; padding: 12px; } } /* ========================================== TRÈS PETITS ÉCRANS (< 480px) ========================================== */ @media (max-width: 480px) { #search-panel { max-height: 45vh; overflow-y: auto; } #shader-panel { max-height: 35vh; overflow-y: auto; } .shader-btn { padding: 15px; font-size: 16px; } } /* ========================================== AMÉLIORATIONS TACTILES ========================================== */ .nav-btn, .shader-btn, #search-btn { min-height: 44px; min-width: 44px; touch-action: manipulation; } @media (hover: none) { .nav-btn:active, .shader-btn:active, #search-btn:active { transform: scale(0.95); opacity: 0.8; } } * { touch-action: manipulation; } #search-panel, #shader-panel { -webkit-overflow-scrolling: touch; } /* ========================================== BOUTON POUR ROUVRIR LE MENU ========================================== */ #open-search { position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 44% 56% 60% 40% / 50% 45% 55% 50%; font-size: 22px; cursor: pointer; display: none; /* ✅ Caché par défaut */ align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: all 0.2s; } #open-search:hover { background: rgba(47, 210, 255, 0.22); border-color: var(--ocean); transform: scale(1.1); } /* ========================================== ÉTAT CACHÉ DU MENU ========================================== */ #search-panel.hidden { display: none; } #open-search.show { display: flex; /* ✅ Affiche le bouton quand le menu est caché */ } /* ========================================== POPUP DE PARCELLE (bulle d'info) ========================================== */ /* Conteneur principal du popup — l'instrument posé sur le globe peint */ .parcel-popup .maplibregl-popup-content { background: var(--surface); color: var(--text); padding: 16px 20px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.7); backdrop-filter: blur(10px); border: 1.5px solid rgba(255, 107, 157, 0.35); max-width: 300px; font-family: var(--font-body); } /* Flèche du popup */ .parcel-popup .maplibregl-popup-tip { background: var(--surface); border-top-color: rgba(18, 26, 51, 0.94) !important; border-bottom-color: rgba(18, 26, 51, 0.94) !important; } /* Bouton fermer du popup */ .parcel-popup .maplibregl-popup-close-button { color: var(--text); font-size: 20px; right: 8px; top: 8px; padding: 4px 8px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .parcel-popup .maplibregl-popup-close-button:hover { background: var(--river); color: var(--continent-ink); } /* Contenu du popup */ .popup-content { padding-right: 20px; /* Espace pour le bouton fermer */ } /* Titre du popup */ .popup-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--survey-pink); margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* Nom de l'artiste */ .popup-artist { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--foliage); margin-top: 8px; margin-bottom: 4px; } /* Tags (Type, Nationalité) — pastilles, comme le nuancier "survey" */ .popup-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .popup-tag { font-family: var(--font-mono); font-size: 11px; padding: 3px 10px; border-radius: 20px; background: rgba(255, 176, 32, 0.16); color: var(--continent); border: 1px solid rgba(255, 176, 32, 0.4); } /* Ligne d'info */ .popup-info { font-size: 13px; margin-bottom: 5px; line-height: 1.5; color: var(--text); } /* Label (Localisation:, Œuvres:, etc.) — registre "survey" */ .popup-info .label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 400; margin-right: 4px; } /* Liens dans le popup */ .popup-info a { color: var(--ocean-ink); text-decoration: none; } .popup-info a:hover { text-decoration: underline; color: var(--ocean); } /* Bouton "Voir l'histoire" — même forme "blob" que #search-btn et les bascules d'effets (#toggle-water etc.), juste plus petit pour tenir dans le popup */ .popup-histoire-btn { width: 32px; height: 32px; flex-shrink: 0; padding: 0; margin-left: auto; font-size: 15px; line-height: 1; border-radius: 44% 56% 60% 40% / 50% 45% 55% 50%; background: rgba(255, 107, 157, 0.16); color: var(--survey-pink); border: 1px solid rgba(255, 107, 157, 0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.15s; } .popup-histoire-btn:hover { background: rgba(255, 107, 157, 0.28); transform: scale(1.08); } /* ========================================== POPUP "HISTOIRE" — une deuxième popup MapLibre, de la même taille que le popup parcelle, décalée pour venir se poser légèrement par-dessus ========================================== */ .histoire-popup .maplibregl-popup-content { background: var(--surface); color: var(--text); padding: 16px 20px; border-radius: 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); border: 1.5px solid rgba(255, 107, 157, 0.6); max-width: 300px; font-family: var(--font-body); transform: translate(28px, 28px); } .histoire-popup .maplibregl-popup-tip { display: none; } .histoire-popup .maplibregl-popup-close-button { color: var(--text); font-size: 20px; right: 8px; top: 8px; padding: 4px 8px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .histoire-popup .maplibregl-popup-close-button:hover { background: var(--river); color: var(--continent-ink); } .histoire-text { font-size: 13px; color: var(--text); line-height: 1.6; margin-top: 6px; white-space: pre-line; } @media (max-width: 768px) { .histoire-popup .maplibregl-popup-content { transform: translate(16px, 16px); max-width: 250px; padding: 12px 15px; font-size: 13px; } } /* ========================================== VERSION MOBILE POUR LE POPUP ========================================== */ @media (max-width: 768px) { .parcel-popup .maplibregl-popup-content { max-width: 250px; padding: 12px 15px; font-size: 13px; } .popup-title { font-size: 14px; } .popup-artist { font-size: 13px; } .popup-info { font-size: 12px; } } /* ========================================== GALERIE D'IMAGES DANS LE POPUP ========================================== */ .popup-gallery { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 8px; /* Style de la scrollbar (WebKit) */ scrollbar-width: thin; scrollbar-color: rgba(74, 144, 226, 0.5) transparent; } .popup-gallery::-webkit-scrollbar { height: 6px; } .popup-gallery::-webkit-scrollbar-thumb { background: rgba(74, 144, 226, 0.5); border-radius: 3px; } .gallery-img { width: 120px; /* ✅ Plus grand (au lieu de 80px) */ height: auto; /* ✅ Hauteur automatique = ratio respecté */ max-height: 150px; /* ✅ Limite la hauteur max pour éviter les images trop grandes */ object-fit: contain; /* ✅ Affiche l'image entière sans la couper */ border-radius: 12px; border: 1px solid var(--border); flex-shrink: 0; cursor: pointer; transition: transform 0.2s, border-color 0.2s; background: rgba(0,0,0,0.3); /* ✅ Fond sombre pour les images transparentes */ } .gallery-img:hover { transform: scale(1.05); border-color: var(--survey-pink); } /* Ajustement mobile pour la galerie */ @media (max-width: 768px) { .gallery-img { width: 70px; height: 70px; } } /* ========================================== GALERIE PLEIN ÉCRAN ========================================== */ #gallery-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.92); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); animation: fadeIn 0.3s ease; } #gallery-overlay.show { display: flex; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Image principale */ #gallery-image { max-width: 85vw; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); animation: zoomIn 0.3s ease; } @keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Boutons de navigation */ .gallery-nav-btn { position: absolute; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; backdrop-filter: blur(10px); z-index: 10001; font-family: var(--font-body); } .gallery-nav-btn:hover:not(:disabled) { background: rgba(47, 210, 255, 0.25); border-color: var(--ocean); transform: scale(1.1); box-shadow: 0 0 20px rgba(47, 210, 255, 0.5); } .gallery-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } .gallery-arrow { font-size: 24px; font-weight: bold; } /* Bouton fermer (en haut à gauche) */ .gallery-close-btn { top: 20px; left: 20px; width: auto; height: 50px; padding: 0 20px 0 15px; border-radius: 25px; font-size: 15px; gap: 8px; } .gallery-close-btn .gallery-arrow { font-size: 20px; } /* Boutons précédent/suivant (centrés verticalement) */ .gallery-prev-btn, .gallery-next-btn { top: 50%; transform: translateY(-50%); width: 60px; height: 60px; font-size: 32px; } .gallery-prev-btn { left: 20px; } .gallery-next-btn { right: 20px; } .gallery-prev-btn:hover:not(:disabled), .gallery-next-btn:hover:not(:disabled) { transform: translateY(-50%) scale(1.1); } /* Compteur d'images */ #gallery-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--surface); color: var(--text); font-family: var(--font-mono); padding: 8px 16px; border-radius: 20px; font-size: 13px; border: 1px solid var(--border); backdrop-filter: blur(10px); } /* ========================================== VERSION MOBILE POUR LA GALERIE ========================================== */ @media (max-width: 768px) { #gallery-image { max-width: 95vw; max-height: 65vh; /* ✅ Réduit pour laisser plus de place aux boutons */ margin-top: 10vh; /* ✅ Descend l'image pour éviter le panneau d'infos */ } .gallery-close-btn { top: 10px; left: 10px; height: 44px; padding: 0 16px 0 12px; font-size: 14px; } /* ✅ Boutons prev/next PLUS GROS et BIEN VISIBLES */ .gallery-prev-btn, .gallery-next-btn { width: 56px; height: 56px; font-size: 32px; background: rgba(74, 144, 226, 0.85); /* ✅ Fond bleu bien visible */ border: 2px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); } .gallery-prev-btn { left: 10px; } .gallery-next-btn { right: 10px; } .gallery-prev-btn:hover:not(:disabled), .gallery-next-btn:hover:not(:disabled) { transform: translateY(-50%) scale(1.1); background: rgba(74, 144, 226, 1); } .gallery-prev-btn:disabled, .gallery-next-btn:disabled { opacity: 0.4; background: rgba(100, 100, 100, 0.6); } #gallery-counter { bottom: 15px; font-size: 14px; padding: 8px 16px; } /* ✅ Infos en haut plus compactes sur mobile */ #gallery-info-panel { padding: 12px 12px 18px 12px; max-height: 25vh; /* ✅ Plus compact pour laisser place à l'image */ } .gallery-info-title { font-size: 14px; } .gallery-info-artist { font-size: 13px; } .gallery-info-line, .gallery-info-detail { font-size: 11px; } } /* ========================================== PANNEAU D'INFOS DANS LA GALERIE PLEIN ÉCRAN ========================================== */ #gallery-info-panel { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(10, 15, 31, 0.96) 0%, rgba(10, 15, 31, 0.86) 80%, transparent 100%); padding: 20px 20px 30px 20px; /* ✅ Padding uniforme (le bouton est en absolute) */ z-index: 10002; backdrop-filter: blur(10px); max-height: 35vh; overflow-y: auto; text-align: center; /* ✅ Centre tout le contenu */ } #gallery-info-content { max-width: 700px; margin: 0 auto; /* ✅ Centre le bloc horizontalement */ display: inline-block; /* ✅ Permet le centrage avec text-align */ text-align: center; } .gallery-info-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--survey-pink); margin-bottom: 4px; } .gallery-info-artist { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--foliage); margin-bottom: 8px; } .gallery-info-details { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; justify-content: center; /* ✅ Centre les tags */ } .gallery-info-tag { font-family: var(--font-mono); background: rgba(255, 176, 32, 0.16); color: var(--continent); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 400; border: 1px solid rgba(255, 176, 32, 0.4); } .gallery-info-detail { color: var(--text-muted); font-size: 13px; } .gallery-info-line { font-size: 13px; color: var(--text); margin-bottom: 3px; line-height: 1.4; } .gallery-info-line .label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 400; margin-right: 4px; } .gallery-info-links { margin-top: 8px; font-size: 13px; color: var(--text-muted); display: flex; justify-content: center; /* ✅ Centre les liens */ flex-wrap: wrap; gap: 4px 12px; } .gallery-info-links a { color: var(--ocean-ink); text-decoration: none; } .gallery-info-links a:hover { text-decoration: underline; color: var(--ocean); } /* ========================================== VERSION MOBILE POUR LES INFOS GALERIE ========================================== */ @media (max-width: 768px) { #gallery-info-panel { padding: 15px 15px 20px 15px; max-height: 30vh; } #gallery-info-content { max-width: 95%; } .gallery-info-title { font-size: 15px; } .gallery-info-artist { font-size: 14px; } .gallery-info-line, .gallery-info-detail { font-size: 12px; } } /* ========================================== BOUTON RESET DANS LA BARRE DE RECHERCHE ========================================== */ .search-reset-btn { width: 44px; height: 44px; flex-shrink: 0; background: var(--foliage-deep); color: white; border: 1px solid var(--foliage); border-radius: 44% 56% 60% 40% / 50% 45% 55% 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; } .search-reset-btn:hover { background: var(--foliage); transform: scale(1.05); } .search-reset-btn:active { transform: scale(0.95); } /* Version mobile */ @media (max-width: 768px) { .search-reset-btn { width: 48px; height: 48px; font-size: 22px; } }