/* Tokens par défaut (light) — disponibles avant le chargement du thème (light/dark/noforce.css, ajoutés dynamiquement après l'API siteTheme, priment ensuite dans la cascade) */ :root{ --validColor: #5FC37D; --primaryColor: #0072F6; --accentLight: #E0EDFF; --backgroundColor:#F5F6F9; --surfaceColor:#FFFFFF; --backgroundInput:#FFFFFF; --backgroundSelect:#E0EDFF; --textColor:#334050; --textMuted:#66707D; --borderColor:#D9DEE6; --darkButtonColor:#334050; --darkButtonText:#FFFFFF; --cardShadow: 0 2px 12px rgba(51, 64, 80, 0.12); --radiusCard: 14px; --radiusButton: 8px; } *{ margin:0; padding:0; box-sizing: border-box; text-decoration:none; font-family: 'Poppins', Helvetica, Arial, sans-serif; } html, body{ overflow:hidden; -moz-user-select: none; /* Firefox */ -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */ -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */ user-select: none; /* Propriété standard */ } input:disabled, input[disabled]{ color:var(--textColor); border-color: var(--textColor); opacity:1; } /* On retire l'outline par défaut uniquement au focus souris/tactile (:focus sans :focus-visible). Le focus clavier reste visible via le :focus-visible contrasté ci-dessous (WCAG 2.4.7). */ textarea:focus:not(:focus-visible), input:focus:not(:focus-visible){ outline: none; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [role="option"]:focus-visible, [role="tab"]:focus-visible{ outline: 3px solid var(--primaryColor, #3071d9); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85); border-radius: 4px; } a, button{ color:var(--textColor); } .primaryButton{ display:inline-block; height:42px; padding:11px 18px 13px 18px; margin:0px 15px 10px 0px; font-size:16px; font-family:"Poppins Bold" !important; line-height: 16px; border:none; border-radius: var(--radiusButton); vertical-align: top; } .secondaryButton{ display:inline-block; height:42px; padding:10px 18px 12px 18px; margin:0px 15px 10px 0px; font-size:16px; font-family:"Poppins Bold" !important; line-height: 16px; border:none; border-radius: var(--radiusButton); } .primaryButton.svg span, .secondaryButton.svg span{ position:relative; bottom:3px; padding-left:10px; } .primaryButton.svg svg, .secondaryButton.svg svg{ width:18px; height:18px; /* color TODO */ } /* CTA principal : bouton plein bleu foncé (cf. "Terminer" US3) */ .darkButton{ background-color: var(--darkButtonColor)!important; color: var(--darkButtonText)!important; border: none!important; } .commonButton{ display:inline-block; height:42px; padding:13px 18px; margin:0px 15px 10px 0px; font-size:16px; font-family:"Poppins Bold" !important; line-height: 16px; color:var(--textColor); background-color: var(--backgroundSelect); border:none; border-radius: var(--radiusButton); } svg { pointer-events: none; } .POI_text { color:var(--textColor); } /* Couleur par défaut héritée du thème via .POI_text (au-dessus). Surtout ne pas re-déclarer color sur les descendants : l'éditeur riche (Quill) imbrique la couleur auteur sur un parent (texte), et une règle ciblant directement / battrait cet héritage — c'est ce qui masquait les couleurs (#22). L'héritage depuis .POI_text suffit. */ /* Gras réel (#13 fournit Poppins weight 700) */ .POI_text strong, .POI_text b { font-weight: 700; } /* Images du contenu riche : s'adaptent à la largeur de la carte (#22) */ .POI_text img { max-width: 100%; height: auto; } /* Listes alignées à gauche (l'éditeur les centrait via .POI_text text-align:center) (#22) */ .POI_text ul, .POI_text ol { text-align: left; padding-left: 1.4em; margin: 0.5em 0; list-style-position: outside; } /* Finitions des autres éléments riches autorisés (#22) */ .POI_text p { margin: 0.5em 0; } .POI_text h1, .POI_text h2, .POI_text h3, .POI_text h4, .POI_text h5 { margin: 0.6em 0 0.3em; line-height: 1.3; } .POI_text table { border-collapse: collapse; max-width: 100%; margin: 0.5em 0; } .POI_text th, .POI_text td { border: 1px solid var(--backgroundColor); padding: 4px 8px; text-align: left; } .POI_text a { /* m38 (#41) visait l'AA 4.5:1 mais #0067D6 codé en dur tombe à ~2:1 sur le fond sombre du dark mode. On bascule sur le token primaire, qui s'éclaircit par thème (light/dark) et reste piloté par la couleur client. */ color: var(--primaryColor) !important; text-decoration: underline; } .POI_text u { text-decoration-line: underline; } .POI_text s { text-decoration: line-through; } .POI_text blockquote { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; border-left: 4px solid #CCC; padding-left: 8px; } .POI_text pre { display: block; font-family: monospace; white-space: pre-wrap; margin: 1em 0; } #UI{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; overflow: hidden; } /* UI Common */ #UI .hide{ display:none!important; } #UI .btn_round{ display:inline-block; width:50px;height:50px; margin:0; padding:0; border-radius:50%; background:var(--surfaceColor); cursor:pointer; border:1px solid var(--borderColor); box-shadow: var(--cardShadow); } #UI .menu_button{ display:block; width:95%;height:50px; padding-left: 50px; margin:auto;margin-bottom:5px; background-color:var(--backgroundSelect); background-position: 10px center; background-repeat: no-repeat; background-size: 40px 40px; color:var(--textColor); border:none; border-radius: 5px; font-size:16px; line-height: 1.3; font-family: 'Poppins Medium'; } #UI .inputSearch{ display:block; width:100%; height:30px; padding:6px 25px 5px 10px; text-align: left; color:var(--textColor); background: var(--backgroundInput); border:none; border-radius:10px; font-size: 14px; font-weight: bolder; } #UI .inputSearch.cancelable{ background-image: url('/assets/default/croix.svg'); background-position: 98% center; background-size: 12px; background-repeat: no-repeat; } /* BOTTOM BAR */ #bottomBar { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 50; } /* LANGAGE */ #langSelectPlaceHolder{ width:50px; height:50px; margin:0; border-radius:25px; z-index:50; flex-shrink: 0; } #langSelect{ width:50px; height:50px; margin:0; background:transparent; z-index:50; flex-shrink: 0; } .lang_french{ background:url('/i18n/flags/france.svg') no-repeat !important; background-size: contain !important; border:1px solid !important; } .lang_english{ background:url('/i18n/flags/united-kingdom.svg') no-repeat !important; background-size: contain !important; border:1px solid !important; } .lang_german{ background:url('/i18n/flags/germany.svg') no-repeat !important; background-size: contain !important; border:1px solid !important; } .lang_italian{ background:url('/i18n/flags/italy.svg') no-repeat !important; background-size: contain !important; border:1px solid !important; } .lang_spanish{ background:url('/i18n/flags/spain.svg') no-repeat !important; background-size: contain !important; border:1px solid !important; } .lang_chinese{ background:url('/i18n/flags/china.svg') no-repeat !important; background-size: contain !important; border:1px solid !important; } .lang_japanese{ background:url('/i18n/flags/japan.svg') no-repeat !important; background-size: contain !important; border:1px solid !important; } #UI #langSelectOther{ display:block; position:absolute; bottom:0px;left:0px; width:70px;height:auto; padding:5px; z-index:70; background:var(--surfaceColor); border:1px solid var(--borderColor); border-radius: var(--radiusButton); box-shadow:var(--cardShadow); } #UI .ui-box-content-lang{ display:block; width:100%;height:auto; margin:0;padding:0; text-align: center; } /* ADS */ #adImage{ flex: 1; display: flex; justify-content: center; align-items: center; margin: 0 5px; /* Porte la transition des DEUX sens de l'escamotage en zone (cf. body.zoneActive #adImage) : au retour la classe n'est déjà plus là. */ transition: opacity 0.25s ease, visibility 0.25s ease; } #adImage img { max-height: 50px; max-width: calc(100% - 10px); height: auto; width: auto; object-fit: contain; } /* ACCESSIBILITY */ #accessSelectPlaceHolder{ width:50px; height:50px; margin:0; border-radius:25px; z-index:50; flex-shrink: 0; } #accessSelect{ width:50px; height:50px; margin:0; background:var(--surfaceColor); border-radius:25px; z-index:50; flex-shrink: 0; box-shadow: var(--cardShadow); } #accessSelectToggle{ -webkit-mask-image: url("/assets/default/Accessibilite.svg"); mask-image: url("/assets/default/Accessibilite.svg"); background-repeat: no-repeat; background-size: contain !important; } #UI #mapGeoLoc{ position: absolute; right: 10px; bottom: 65px; z-index: 50; } /* Contrôles carto : MapLibre (sites Wemap/EzyMaps) préfixe ses classes en .maplibregl-* au lieu de .mapboxgl-* — mêmes règles pour les deux moteurs. */ #UI #mapGeoLoc .mapboxgl-ctrl-group, #UI #mapGeoLoc .maplibregl-ctrl-group{ border:none!important; box-shadow:none!important; background:transparent!important; border-radius: 0!important; } #UI #mapGeoLoc .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon, #UI #mapGeoLoc .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{ background-image: url('/assets/default/gps.svg')!important; width:40px;height:40px; background-size: 100%; background-position: 50% 50%; } #UI #mapGeoLoc .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon, #UI #mapGeoLoc .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{ background-image: url('/assets/default/gps_on.svg')!important; width:40px;height:40px; background-size: 100%; background-position: 50% 50%; } #UI #mapGeoLoc button{ width:40px;height:40px; margin:0;padding:0; border:1px solid var(--borderColor); background-color:var(--surfaceColor); background-image: none; border-radius: 50%; color:var(--textColor); box-shadow:var(--cardShadow); } #UI #mapGeoLocExplanation { position: absolute; right: 30px; bottom: 65px; z-index: 49; display: flex; align-items: center; gap: 6px; height: 40px; padding: 6px 30px 6px 10px; margin: 0; background-color: var(--backgroundSelect); border-radius: 8px; border: none; font-size: 13px; font-family: 'Poppins Medium', sans-serif; box-shadow: var(--cardShadow); color: var(--textColor); line-height: 1.2; } #UI #mapGeoLocExplanation span { position: relative; bottom: 0; padding-left: 0; font-family: 'Poppins Medium', sans-serif; color: var(--textColor); } #UI #mapGeoLocExplanation button { all: unset; font-family: 'Poppins Medium', sans-serif; font-size: 13px; color: var(--primaryColor); cursor: pointer; text-decoration: underline; padding: 0; margin: 0; line-height: 1.2; } #UI #mapGeoLocExplanation button span { color: var(--primaryColor); } #UI #mapGeoLocFallback { position: absolute; right: 10px; bottom: 65px; z-index: 51; width:40px;height:40px; } #UI #mapGeoLocFallback button { width:40px;height:40px; margin:0;padding:0; border:none; background-color:var(--surfaceColor); background-image: none; border-radius: 50%; color:var(--textColor); box-shadow:var(--cardShadow); background-image: url('/assets/default/gps.svg')!important; background-size: 100%; background-position: 50% 50%; /* Le conteneur #mapGeoLocFallback est masqué via .hide tant qu'il n'est pas pertinent ; quand il s'affiche, le bouton doit être pleinement visible (l'ancien opacity:0.05 le rendait focusable mais invisible). */ opacity: 1; } /* BRAND LOGO */ #mapHeaderPlaceHolder{ width:95%;height:50px; position:absolute; top:10px;left:2.5%; z-index:50; background-color: var(--surfaceColor); border: 1px solid var(--borderColor); border-radius: 26px; box-shadow: 0 4px 14px rgba(51, 64, 80, 0.28); } #mapHeader{ width:100%;height:52px; position:absolute; top:10px;left:0; padding:0 12px; display:grid; grid-template-columns: 50px auto; grid-template-rows: 50px; z-index:50; background-color: transparent; /*overflow:hidden;*/ } /* Pill de fond du header : porte l'ombre portée et la bordure (#mapHeaderPlaceHolder est masqué une fois l'app chargée) */ #mapHeader::before{ content:''; position:absolute; top:0; left:12px; right:12px; height:50px; background: var(--surfaceColor); border: 1px solid var(--borderColor); border-radius: 26px; box-shadow: 0 4px 14px rgba(51, 64, 80, 0.30); z-index:-1; } #brandLogo{ grid-column: 1; grid-row: 1; width:50px; height:50px; margin:0; background:var(--surfaceColor) url('/assets/default/Weezy.png') no-repeat; background-size: 100%; background-position: 50% 50%; border: none; border-top-left-radius: 25px; border-bottom-left-radius: 25px; } #searchBox{ width:100%;height:50px; padding:0; background:transparent; border:none; border-top-right-radius: 25px; border-bottom-right-radius: 25px; overflow: hidden; } #searchBox .inputSearch{ height:50px!important; padding:11px 7px 11px 7px!important; font-size:16px!important; line-height: 20px; color:var(--textColor); border:none; border-radius: 0; } #searchBox .inputSearch::placeholder{ font-weight:400; font-family:'Poppins', Helvetica, Arial, sans-serif; } .cat_list_container{ width: 100%;height: 40px; padding: 7px 10px 0px 10px; background-color: transparent; overflow-y: hidden; overflow-x: scroll; text-wrap: nowrap; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } .cat_list{ width:fit-content; height:30px; } .cat_title{ display:block; width: 100%; text-align: center; padding:20px 0; } .cat_title span{ display:inline-block; height: 24px; padding: 5px 20px; font-size: 12px; font-family: "Poppins Bold" !important; line-height:14px; text-transform:uppercase; color:var(--textColor); border-radius: 12px; } .title_left, .title_right{ display:inline-block; } .title_left{ width:50%; text-align:left; position: relative; top: 12px; color:var(--textColor); } .title_left strong{ font-size:18px; } #mapCategories{ width: 100%;height: 34px; position: absolute; top: 65px;left: 0px; padding: 0 6px; padding-top:5px; z-index: 61; background-color: transparent; overflow-y: hidden; overflow-x: scroll; text-wrap: nowrap; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } #mapCategories::-webkit-scrollbar, .cat_list_container::-webkit-scrollbar{ display:none; } #mapCategories .blankCategory{ display:inline-block; width: 115px; height: 28px; background-color:var(--backgroundColor); border-radius: 14px; } #mapCategories .buttonCategory, .cat_list_container .buttonCategory{ display:inline-block; width: auto; height: 28px; padding: 10px; margin:0 5px 0 5px; background-color: var(--surfaceColor); border-radius: 14px; border:1px solid var(--borderColor); line-height:14px; font-size: 14px; font-family:'Poppins Medium' !important; box-shadow:var(--cardShadow); } .cat_list_container .buttonCategory{ box-shadow: none; } #mapCategories .buttonCategory img, #mapCategories .buttonCategory svg, .cat_list_container .buttonCategory img, .cat_list_container .buttonCategory svg{ height:20px;width:20px; position:relative; bottom:7px; } #mapCategories .buttonCategory span, .cat_list_container .buttonCategory span{ position:relative; vertical-align: top; bottom:3px; padding-left:2px; color:var(--textColor); font-family: 'Poppins Medium'; } /* Modal */ #globalCard{ position:absolute; display:block; bottom:0;left:0; width:100%;height:100%; z-index:70; background-color: var(--backgroundColor); border: none; box-shadow: 0 -4px 16px rgba(51, 64, 80, 0.16); border-top-left-radius:16px; border-top-right-radius:16px; } .modale_speech{ display:block; width:90%; margin:10px auto; font-weight: bold; font-size:18px; color:var(--textColor); } #globalCardSizeHandler{ height:20px; cursor:grab; background: transparent; background-image: url('/assets/default/handler.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; } #globalCardSizeHandler svg{ height:20px;width:auto; display:block; margin:auto; } /* Modale de recherche */ #globalCardContentContainer{ width: 100%; } #globalCard.format_full #globalCardContentContainer{ max-height:100%; overflow-y: scroll; overflow-x: hidden; } #globalCardContentContainer p{ color: var(--textColor); padding: 30px 30px 0px 20px; text-align: center; font-family: 'Poppins Medium'; font-size: 18px; } #globalCardContentContainer .POI_title{ padding:0px 20px; } #globalCard #POI_name{ font-size: 22px; font-family: "Poppins Bold" !important; padding-bottom:5px; color:var(--textColor); padding-right: 30px; } #globalCard .POI_cat{ padding-bottom:5px; } #globalCard .POI_cat span{ display:inline-block; height: 24px; padding: 5px 20px; font-size: 12px; font-family: "Poppins Bold" !important; line-height:14px; text-transform:uppercase; color:#000000; border-radius: 12px; margin: 0px 5px; } #globalCard .POI_extid{ font-size:18px; font-weight:normal; font-family: "Poppins Medium" !important; color:var(--textColor); } #globalCardContentContainer .POI_infos{ padding:10px 20px; } #globalCardContentContainer .POI_content{ padding:0px 20px; } #globalCardContentContainer .POI_image{ width:100%; border-radius: 20px; background:#fff; margin-bottom:23px; border-radius: 12px; overflow: hidden; } #globalCardContentContainer .POI_image img{ width:100%; } #globalCardContentContainer .POI_text{ font-size: 18px; padding-bottom:100px; text-align: center; } button.closeModale{ width:40px; height:40px; position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; /* le bouton contient un   : sans font-size 0 il décale le X */ font-size: 0; border: 1px solid var(--borderColor); background: var(--surfaceColor); border-radius: 20px; box-shadow: var(--cardShadow); z-index:100; } button.closeModale::before{ content:''; display:block; flex: 0 0 auto; width:16px;height:16px; margin:auto; background-color: var(--textColor); -webkit-mask:url('/assets/default/croix.svg') no-repeat center / contain; mask:url('/assets/default/croix.svg') no-repeat center / contain; } /* SEARCH */ #UI #search_form{ display:grid; width:100%;height:65px; padding: 10px 10px 0 10px; grid-template-columns: 50px auto; grid-template-rows: 50px; } #UI .searchDestLogo{ grid-column: 1; grid-row: 1; z-index: 2; width: 50px; height: 50px; margin: 0; background: transparent url(/assets/default/Weezy.png) no-repeat; background-size: contain; background-position: 50% 50%; border: none; border-radius: 25px; overflow: hidden; } /* La barre forme un pill complet (bordure + arrondi sur les 4 côtés) qui passe SOUS le logo : ce dernier (cercle 50px) recouvre exactement le bout arrondi gauche, l'arrondi se « ferme » donc derrière le logo. */ #UI .searchDestInput{ grid-column: 1 / 3; grid-row: 1; z-index: 1; width: 100%; height: 50px; padding: 0 0 0 50px; background: transparent; border: 1px solid; border-radius: 25px; overflow: hidden; } #UI .searchDestInput input{ height: 50px !important; padding: 11px 7px 11px 7px !important; font-size: 16px !important; line-height: 16px; color: var(--textColor); border: none; border-radius: 0; } /* La croix se centre verticalement dans SON champ (le parent est positionné), plus de coordonnées absolues vis-à-vis de la modale */ #UI .starting-point, #UI .dest-point{ position: relative; } #UI .starting-point button, #UI .dest-point button{ position: absolute; z-index: 60; top: 50%; right: 12px; transform: translateY(-50%); width: 30px; height: 30px; background:transparent; background-image: url(/assets/default/croix.svg); background-repeat: no-repeat; background-size: 15px 15px; background-position: center; border:none; } #UI #search_results{ width:100%; overflow:auto; padding:0 20px; height: 500px; } #UI #searchResults{ width:100%; } #UI .ui-box-categories{ grid-column-start: 1; grid-column-end: span 3; grid-row:2; display:flex; width:100%;height:70px; margin:0;padding:0 5px; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; row-gap: 2px; overflow-x: auto; } /* Cat */ #UI .ui-box-categories .ui-box-category{ flex-basis:25%; text-align: center; } #UI .ui-box-title-search{ grid-column-start: 1; grid-column-end: span 3; grid-row:3; height:40px; padding:5px; text-align: center; color: var(--textColor); font-size: 21px; font-weight: bolder; line-height:40px; } #UI .ui-box-content-search{ grid-column-start: 1; grid-column-end: span 3; grid-row:4; overflow-y: auto; overflow-x: hidden; } #UI #selectGPS{ display:block; height:38px;width:100%; color:var(--textColor); background: var(--backgroundSelect); background-image:url("/assets/default/gps_on.svg"); background-repeat: no-repeat; background-position: 10px 5px; background-size: 28px 28px; font-size: 16px; font-family: 'Poppins Medium'; line-height: 1.2; border-top-right-radius: 10px; border-top-left-radius: 10px; border:none; margin:5px 0px; margin-bottom:0px; padding-left:50px; text-align:left; } #UI #selectOnMap{ display:block; height:38px;width:100%; color:var(--textColor); background: var(--backgroundSelect); background-image:url("/assets/default/cliquez-sur.svg"); background-repeat: no-repeat; background-position: 10px 5px; background-size: 28px 28px; font-size: 16px; font-family: 'Poppins Medium'; line-height: 1.2; border-radius: 10px; border:none; margin:5px 0px; padding-left:50px; text-align:left; } #UI #selectOnMap.withGPS{ border-top-right-radius: 0px; border-top-left-radius: 0px; margin-top:2px; } #UI .no_result_floor{ color:var(--textColor); font-size: 14px; font-style: italic; padding:0 15px; } #UI .buildingTitle{ display: block; width: calc(100% + 40px); margin: 0 -20px; padding: 8px 20px; font-size: 16px; color:var(--textColor); background-color: var(--backgroundSelect); font-family: 'Poppins Bold'; } #UI .floorTitle{ display: inline-block; height: 24px; font-size: 14px; padding: 4px 12px; margin: 10px 20px; color: var(--textColor); line-height: 14px; border: none; background-color: var(--backgroundSelect); border-radius: 12px; font-family: 'Poppins Bold'; } #UI .floorList, #UI .poiList{ background-color: var(--surfaceColor); border: 1px solid var(--borderColor); border-radius: var(--radiusCard); margin: 10px 0px; overflow:hidden; } #UI .POI{ display: flex; width: 100%; min-height: 45px; height: auto; margin: 0; padding: 0; border: none; background-color: transparent; border-bottom: 1px solid var(--borderColor); text-align: left; color:var(--textColor); align-items: center; } #UI .POI.withFloor{ min-height:60px; flex-wrap: wrap; } #UI .POI:last-child{ border: none; } #UI .POI.featured{ background-image:url('data:image/svg+xml;utf8, '); background-position: 90% 50%; background-repeat: no-repeat; background-size: 30px 30px; } #UI .POI.gps{ background-image:url('data:image/svg+xml;utf8, '); background-position: 90% 50%; background-repeat: no-repeat; background-size: 30px 30px; } #UI .POI .name{ display:block; width:100%; min-height:30px; padding:5px 10px 6px 10px; margin:0; font-size: 14px; line-height: 1.6; overflow-wrap: break-word; font-family: 'Poppins Medium'; } #UI .POI.withFloor .name{ padding: 5px 12px 0px 12px; min-height:24px; width: 100%; overflow-wrap: break-word; line-height: 1.5; } #UI .POI .floor{ display:block; width:100%; min-height:20px; margin:0px; padding: 0px 12px 5px 12px; font-size: 13px; line-height: 16px; font-weight: normal; color: var(--textMuted); overflow-wrap: break-word; } /* PARCOURS */ #UI .poiList .POI{ min-height: 60px; position:relative; } #UI .poiList .POI.active{ background: var(--textColor)!important; } #UI .poiList .POI.withExtPois{ align-items: start; } #UI .poiList .POI .name{ padding:3px 10px 3px 60px } #UI .poiList .POI.active .name{ color:var(--backgroundSelect)!important; } #UI .POI .stepNumber{ position: absolute; top: 15px; left: 10px; width: 30px; height: 30px; background: var(--textColor); border-radius: 15px; color: var(--backgroundSelect); text-align: center; font-family: 'Poppins Bold'; font-size: 20px; } #UI .POI.active .stepNumber{ background: var(--backgroundSelect)!important; color: var(--textColor)!important; } #UI .POI .extPois{ position:absolute; top:30px; left:70px; } #UI .POI .extPoi{ display: inline-block; position:relative; width:35px; height:20px; padding:0px; text-align: center; border-radius: 10px; } #UI .POI .extPoi svg{ width: 18px; height: 18px; fill: #ffffff; position: relative; left: 2px; top: 1px; } /* SELECT ON MAP */ #UI .selectOnMap{ width:250px;height:40px; border:none; background:var(--backgroundInput); border-radius:10px; color:var(--textColor); font-size: 15px; font-weight:bolder; padding:0px 0px 0px 40px; border:1px solid; background-image: url("/assets/default/cliquez-sur.svg"); background-position: 10px 50%; background-repeat: no-repeat; background-size: 30px 30px; box-shadow: var(--cardShadow); } /* APP REDIRECT */ #appRedirect{ position:absolute; top:0;left:0; width:100%;height:100%; display:flex; align-items:center; justify-content:center; background:rgba(0, 0, 0, 0.6); z-index:120; } /* Carte dimensionnée au contenu (fini le height:50% à moitié vide) */ #appRedirectContainer{ position:relative; width:88%; max-width:360px; padding:26px 24px 22px; background:var(--surfaceColor); border:1px solid var(--borderColor); border-radius:var(--radiusCard); box-shadow: var(--cardShadow); text-align: center; outline:none; } /* Visuel de l'app dans un téléphone */ #appRedirectImage{ display:block; width:auto; max-width:165px; height:auto; margin:4px auto 16px; filter:drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18)); } #appRedirectText{ color:var(--textColor); } #appRedirectText p{ margin:0;padding:0; font-size:14px; line-height:1.5; } #appRedirectText .appRedirectTitle{ margin-bottom:8px; font-size:19px; font-family:'Poppins Bold'; } #appRedirectText p:not(.appRedirectTitle){ opacity:0.72; } #appRedirectButtons{ display:flex; flex-direction:column; gap:10px; margin-top:22px; } #appRedirectButtons button{ width:100%; margin:0; } /* ZONE ACTIVE : liseré + vague (#25) */ /* Le liseré se pose juste au-dessus de la carte (#mapLayer z0) mais SOUS toute l'UI (header z50, cartes/modales z70+) : toutes les modales passent donc par-dessus. */ #zoneFrame{ position:absolute; inset:0; z-index:10; pointer-events:none; /* le liseré ne bloque jamais la carte */ } #zoneFrame.hide{ display:none; } #zoneFrameSvg{ position:absolute; inset:0; width:100%;height:100%; display:block; } /* fill réel : custom.css, groupe floatingButtonOutline */ #zoneFramePath{ fill:var(--ezymobBlue); } /* étiquette dans la vague : nom de zone + croix. z60 = au-dessus de la barre du bas (#bottomBar z50) pour rester cliquable, mais sous les cartes/modales (z70+) qui doivent passer par-dessus. */ #zoneTag{ position:absolute; left:50%; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:7px; pointer-events:auto; color:#fff; white-space:nowrap; } #zoneTag.hide{ display:none; } #zoneTagName{ font-family:'Poppins Bold'; font-size:15px; line-height:1.15; /* Nom de zone affiché EN ENTIER : quand il ne tient pas dans la vague même à la taille plancher (cf. fitZoneTagFont), il passe à la ligne au lieu d'être tronqué par « … » — la vague s'élargit puis monte d'autant (renderZoneFrame). */ white-space:normal; text-align:center; } #zoneTagClose{ width:18px;height:18px;flex:0 0 18px; margin:0;padding:0; border-radius:50%; border:1px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.12); color:#fff; font-size:10px;line-height:1; cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background 0.15s ease, transform 0.15s ease; } #zoneTagClose:hover{ background:rgba(255,255,255,0.28); } #zoneTagClose:active{ transform:scale(0.92); } #zoneTagClose:focus-visible{ outline:2px solid #fff; outline-offset:2px; } /* #25 — Zone active : les deux bandeaux du bas s'effacent, et reviennent à la sortie. La vague basse qui porte le nom de zone est peinte dans #zoneFrame (z10) : elle passe DERRIÈRE la barre du bas, et seule l'étiquette #zoneTag (z60) reste au-dessus. 1) #adImage, la bannière partenaire, est CENTRÉE dans #bottomBar (z50) donc pile sur la vague. Mesuré sur le site 139 en 430×900 : bannière 843→893 px, étiquette 859→877 px — « P20 » en blanc sur un logo partenaire blanc, croix de sortie noyée dedans. Escamotage par `visibility` et non par `display` : la place reste réservée dans le flex (sélecteur de langue et bouton d'accessibilité ne bougent pas d'un pixel), et un élément `visibility:hidden` sort à la fois du champ de tabulation et de l'arbre d'accessibilité — la bannière étant cliquable (`role=button`, cf. app.js), la masquer sans cela aurait laissé un lien de partenaire invisible mais atteignable au clavier. */ body.zoneActive #adImage{ opacity:0; visibility:hidden; pointer-events:none; } /* 2) .cc-window, le bandeau de consentement cookies (fixed z9999), couvre TOUTE la bande basse — nom de zone ET croix de sortie (mesuré : 799→900 px). C'est ce que voit tout visiteur qui n'a pas encore tranché, donc le cas d'une arrivée par deeplink `?zone=`. Il sort de l'écran le temps de la zone : le consentement est DIFFÉRÉ, jamais escamoté. ⚠️ Pourquoi un `transform` et surtout PAS `display:none` : `fadeOut()` de la lib pose `cc-invisible` puis attend un `transitionend` pour écrire `display:none` en inline. Sur un élément en `display:none` aucune transition ne se joue : l'événement ne vient jamais, l'inline reste vide, et un bandeau accepté PENDANT la zone ressuscitait à la sortie (mesuré) — pire, il revenait porteur de `cc-invisible`, donc invisible mais toujours posé sur la carte. Hors de l'écran l'élément reste rendu : la lib termine son cycle et un consentement donné pendant la zone tient. */ body.zoneActive .cc-window{ transform:translateY(160%); pointer-events:none; } /* ZONE : modales entrée/sortie (#25) — même habillage que #appRedirect */ #zoneLeaveConfirm, #zoneEnter{ position:absolute; top:0;left:0; width:100%;height:100%; display:flex; align-items:center; justify-content:center; background:rgba(0, 0, 0, 0.6); z-index:121; } #zoneLeaveConfirm.hide, #zoneEnter.hide{ display:none; } #zoneLeaveConfirmContainer, #zoneEnterContainer{ position:relative; width:88%; max-width:360px; padding:26px 24px 22px; background:var(--surfaceColor); border:1px solid var(--borderColor); border-radius:var(--radiusCard); box-shadow: var(--cardShadow); text-align: center; outline:none; } #zoneLeaveConfirmText, #zoneEnterText{ color:var(--textColor); } #zoneLeaveConfirmText p, #zoneEnterText p{ margin:0;padding:0;font-size:14px;line-height:1.5; } #zoneLeaveConfirmText .appRedirectTitle, #zoneEnterText .appRedirectTitle{ margin-bottom:8px;font-size:19px;font-family:'Poppins Bold'; } #zoneLeaveConfirmText p:not(.appRedirectTitle), #zoneEnterText p:not(.appRedirectTitle){ opacity:0.72; } #zoneLeaveConfirmButtons, #zoneEnterButtons{ display:flex; flex-direction:column; gap:10px; margin-top:22px; } #zoneLeaveConfirmButtons button, #zoneEnterButtons button{ width:100%;margin:0; } @media (prefers-reduced-motion: reduce){ #zoneTagClose{ transition:none; } } /* PARCOURS DE VISITE */ #UI #visiteButton{ position:absolute; top:107px;left:10px; width:44px;height:44px; margin:0;padding:0; background:var(--surfaceColor); border:1px solid var(--borderColor); border-radius:50%; box-shadow:var(--cardShadow); cursor:pointer; z-index:61; } #UI #visiteButton::before{ content:''; display:block; width:24px;height:24px; margin:0 auto; background:var(--textColor); -webkit-mask-image:url('/assets/default/liste.svg'); mask-image:url('/assets/default/liste.svg'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; } #UI #visiteBadge{ position:absolute; top:-6px;right:-6px; min-width:20px;height:20px; padding:0 5px; background:#d32f2f; border-radius:10px; color:#ffffff; font-family:'Poppins Bold'; font-size:12px; line-height:20px; text-align:center; } #UI #visiteWindow{ position:absolute; top:0;left:0; width:100%;height:100%; background:rgba(0, 0, 0, 0.75); z-index:120; } #visiteWindowContainer{ display:flex; flex-direction:column; width:90%; max-height:70%; position:absolute; top:15%;left:5vw; padding-bottom:15px; background:var(--backgroundColor); border:none; border-radius:var(--radiusCard); box-shadow: var(--cardShadow); } /* En-tête : titre + bascule « Réorganiser / Terminé ». padding-right:50px dégage la croix ✕ (top:5 right:5, 40px). */ #visiteWindowHeader{ flex-shrink:0; display:flex; align-items:baseline; gap:10px; padding-right:50px; } #visiteWindowTitle{ flex:1 1 auto; padding:20px 5px 10px 25px; color:var(--textColor); font-family:'Poppins Bold'; font-size:18px; outline:none; } #visiteReorderToggle{ flex-shrink:0; margin:0; padding:6px 4px; background:transparent; border:none; color:var(--textColor); font-family:'Poppins Medium'; font-size:14px; text-decoration:underline; white-space:nowrap; cursor:pointer; } #visiteWindowList{ flex:1; margin:0 15px 10px 15px; } /* Le sélecteur `#UI .poiList{overflow:hidden}` (un id + une classe) est plus spécifique que `#visiteWindowList` (un id seul) : un overflow-y posé sur `#visiteWindowList` était donc écrasé, et la liste était coupée sans pouvoir défiler dès la 4e étape. Le scroll est piloté ICI et NULLE PART AILLEURS (#72 : l'ancienne déclaration inopérante de la règle ci-dessus a été retirée, elle invitait à « nettoyer le doublon » en supprimant la bonne). min-height:0 garde l'item flex compressible sous la hauteur de son contenu (indispensable pour que la zone de scroll se forme). */ #UI #visiteWindowList{ min-height:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; } #visiteWindowList .visiteEmpty{ padding:20px 10px; color:var(--textColor); font-style:italic; text-align:center; } #visiteWindowList .POI .visiteRemove{ position:absolute; top:15px;right:10px; width:30px;height:30px; margin:0;padding:0; background:var(--textColor); border:none; -webkit-mask-image:url('/assets/default/croix.svg'); mask-image:url('/assets/default/croix.svg'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:16px 16px; mask-size:16px 16px; cursor:pointer; } /* Pendant un run : le ✕ n'est rendu que sur les étapes futures, l'étape courante est surlignée (.active) et les visitées grisées */ #visiteWindowList .POI .name{ padding-right:45px; } /* L'étage s'aligne sur le nom (décalé de 60px par la pastille numérotée) */ #visiteWindowList .POI .floor{ padding-left:60px; } /* Au lancement d'un parcours de visite, seuls Standard et PMR sont proposés */ #UI #guidanceDirectionSwitcher.visiteModes button[rel="app_visual"], #UI #guidanceDirectionSwitcher.visiteModes button[rel="app_cognitive"]{ display:none; } #visiteWindowList .POI.active .floor{ color:var(--backgroundSelect)!important; } #visiteWindowList .POI.done{ opacity:0.5; } #visiteWindowButtons{ flex-shrink:0; padding:0 15px; text-align:center; } #visiteWindowButtons button{ display:block; width:100%; margin:0 0 10px 0; } #visiteWindowButtons button.disabledButton{ opacity:0.4; } /* MODE RÉORGANISATION — flèches ↑↓ par étape (remplacent le ✕). Chevrons dessinés en CSS (theme-ables via var(--textColor)). */ #UI #visiteWindowList.reordering .POI .name{ padding-right:84px; } #UI #visiteWindowList.reordering .POI .floor{ padding-right:84px; } #visiteWindowList .POI .visiteMove{ position:absolute; top:15px; width:30px;height:30px; margin:0;padding:0; background:transparent; border:none; cursor:pointer; } #visiteWindowList .POI .visiteMoveUp{ right:46px; } #visiteWindowList .POI .visiteMoveDown{ right:10px; } #visiteWindowList .POI .visiteMove::before{ content:''; display:block; width:9px;height:9px; margin:0 auto; border-left:2px solid var(--textColor); border-top:2px solid var(--textColor); } #visiteWindowList .POI .visiteMoveUp::before{ transform:rotate(45deg); margin-top:13px; } #visiteWindowList .POI .visiteMoveDown::before{ transform:rotate(-135deg); margin-top:8px; } #visiteWindowList .POI .visiteMove:disabled{ opacity:0.25; cursor:default; } /* DIRECTION */ #UI #guidanceInfos{ display: block; position:absolute; top:0;left:0; width:100%;height:150px; margin:0;padding:0; background-color:var(--backgroundColor)!important; } #UI #guidanceInfosContainer{ display:grid; position:relative; width:100%;height:150px; /* Plus d'air au-dessus du cartouche, un peu plus sous les types de guidage */ margin:0;padding:14px 0 6px 0; /* Colonnes latérales égales : même gap de part et d'autre du cartouche */ grid-template-columns: 48px auto 48px; grid-template-rows: 90px 40px; } #UI #cancelGuidance{ grid-column:1;grid-row:1; width:36px;height:36px; /* Reste collé en haut, centré dans sa colonne (gap symétrique au cartouche) */ align-self:start; justify-self:center; margin:6px 0 0 0; background:var(--surfaceColor); border:1px solid var(--borderColor); border-radius: var(--radiusButton); box-shadow: var(--cardShadow); } #UI #cancelGuidance::before{ content:''; display:block; width:18px;height:18px; margin:auto; background-color: var(--textColor); -webkit-mask:url('/assets/default/chevron.svg') no-repeat center / contain; mask:url('/assets/default/chevron.svg') no-repeat center / contain; transform: rotate(180deg); } #UI #guidanceInfosPoints{ grid-column:2;grid-row:1; padding-left: 38px; padding-right: 30px; margin: 4px 0; background-color: var(--surfaceColor); border: 1px solid var(--borderColor); border-radius: var(--radiusCard); box-shadow: var(--cardShadow); background-image: url("/assets/default/waypath.svg"); background-size: 30px; background-position: 4px center; background-repeat: no-repeat; } #UI #guidanceInfosPoints .starting-point{ padding: 5px 0px; border-bottom: 1px solid var(--borderColor); } #UI #guidanceInfosPoints .dest-point{ padding: 5px 0px; } #UI #guidanceInfosPoints #guidanceStart, #UI #guidanceInfosPoints #guidanceDest{ border:none; height:30px; border-radius: 0; color:var(--textColor); background: transparent; font-family: 'Poppins Medium'; } #UI #guidanceInfosPoints #guidanceStartCancel, #UI #guidanceInfosPoints #guidanceDestCancel{ right: 0px; } #UI #guidanceDirectionSwitcher{ grid-column:span 3; padding:5px 10px; overflow-x: scroll; overflow-y: hidden; text-wrap: nowrap; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } #UI #guidanceDirectionSwitcher button{ display:inline-block; width: auto; height: 28px; padding: 10px; margin:0 5px 0 5px; background-color: var(--surfaceColor); border-radius: 14px; border:1px solid var(--borderColor); line-height:14px; font-size: 14px; font-family:'Poppins Medium' !important; box-shadow:var(--cardShadow); } #UI #guidanceDirectionSwitcher button.active{ color:#000000; } #UI #guidanceDirectionSwitcher button svg{ height:18px;width:18px; position:relative; bottom:5px; } #UI #guidanceDirectionSwitcher button svg :is(path, circle, rect, polygon, ellipse, line, polyline){ fill:#000000; } #UI #guidanceDirectionSwitcher button span{ position:relative; vertical-align: top; bottom:3px; padding-left:2px; color:var(--textColor); font-family: 'Poppins Medium'; } #UI #guidanceDirectionSwitcher button.active span{ color:#000000; } #currentDirection{ display:grid; position:absolute; top:0;left:0; width:100%;height:90px; background-color: var(--backgroundInput); box-shadow: var(--cardShadow); border:none; border-radius: 0; text-decoration:none!important; grid-template-columns: 30px auto 30px; grid-template-rows: auto; z-index: 60; } /* Chevauche le bord droit de la card départ/arrivée, centré verticalement (cf. design app US2) */ .inverse-departureAndArrival{ /* Placé dans la 3e colonne de la grille, centré verticalement (≠ retour) */ grid-column: 3; grid-row: 1; align-self: center; justify-self: center; width: 36px; height: 36px; z-index: 5; background-color: var(--surfaceColor); background-image: url(/assets/default/echanger.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: 22px; border: 1px solid var(--borderColor); border-radius: var(--radiusButton); box-shadow: var(--cardShadow); } #currentDirection .ui-box-search{ grid-row: 1; grid-column: 2; width:100%; } #currentDirection.onGuidance{ height:50px; } #currentDirection.onGuidance .starting-point{ display:none; } #currentDirection.onGuidance .ui-box-search{ height:50px; padding:0; background-image: none; } #destinationPoint{ display:block; position:absolute; top:0;left:0; width:100%;height:50px; border:none; border-radius: 0; text-decoration:none!important; z-index: 60; padding:0 10px; } #currentDestination{ font-size:18px; text-align: center; font-weight:bolder; padding:15px 10px; } /* GUIDANCE */ /* CTA principal (Démarrer, Continuer, OK) : aplat mainItems du thème client (cf. custom.css) ; les couleurs ci-dessous ne servent que de repli avant l'arrivée du thème. */ .button_start{ display: inline-block; height: 40px; padding: 8px 16px; margin: 15px 0px; font-size: 16px; font-family: "Poppins Bold" !important; line-height: 18px; color: var(--darkButtonText); background-color: var(--darkButtonColor); border: none; border-radius: var(--radiusButton); } .noDirection{ background-color: var(--textMuted); } /* #4b — loader temps/distance pendant le (re)calcul d'itineraire */ .durationLoader{ display:inline-block; width:22px;height:22px; margin:6px 0; border:3px solid var(--borderColor, rgba(51,64,80,0.25)); border-top-color:var(--darkButtonColor, #334050); border-radius:50%; animation:durationSpin 0.8s linear infinite; } @keyframes durationSpin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .durationLoader{ animation-duration:1.6s; } } #guidanceCard{ position:absolute; display:block; top:0;left:0; width:100%;height:90px; background:transparent; border:10px solid transparent; } /* #24 — Cartouche flottant « Via » : sous le panneau #guidanceInfos (150px de haut) et au-dessus de la carte. Groupe mainItems du thème client : fond ET texte viennent du back, la lisibilité sur teinte saturée est donc réglée côté admin panel et non figée ici. */ #accessBanner{ position:absolute; top:156px; left:50%; transform:translateX(-50%); max-width:80%; z-index:5; padding:8px 16px; border-radius:999px; /* couleurs réelles : classes main_items_* dans index.html */ background:var(--main_items_background_color); color:var(--main_items_text_color); box-shadow:var(--cardShadow); text-align:center; pointer-events:none; } #accessBanner.hide{ display:none!important; } #accessBannerText{ display:block; font-weight:700; font-size:14px; line-height:1.2; /* Nom de porte affiché en entier : le cartouche (max-width:80%, hauteur libre) grandit sur deux lignes au lieu de tronquer par « … ». */ } #stepCardContainer{ border-radius: var(--radiusCard); border: 1px solid var(--borderColor); box-shadow: var(--cardShadow); overflow: hidden; } .stepCard{ width: 100%; display:grid; grid-template-columns: 70px auto; grid-template-rows: 100%; border:none; } .stepCard.off{ display:none!important; } .stepCard.start{ display:block; background: transparent; text-align: center; box-shadow: none; } .stepCard.start button.startGuidance{ display: inline-block; margin-top:20px; padding:0 20px; min-width:200px; height:48px; /* couleurs réelles : classe main_items_outline_color (custom.css) */ color:var(--main_items_background_color); border:2px solid var(--main_items_background_color); background:var(--surfaceColor); border-radius: var(--radiusButton); font-size:17px; font-family:'Poppins Bold' !important; vertical-align: top; box-shadow: var(--cardShadow); } .stepCard.start button.changeJourney{ position: absolute; display: inline-block; margin:0; padding-top:5px; padding-left: 2px; padding-right: 0px; padding-bottom: 5px; width: 34px; height: 34px; border: 1px solid var(--borderColor); background-color: var(--surfaceColor); border-radius: var(--radiusButton); box-shadow: var(--cardShadow); bottom: 20px; left: 0px; vertical-align: bottom; } .stepCard.start button.changeJourney svg{ width:18px; height:18px; } .stepCard .stepContent{ grid-column: 2; grid-row:1; display:flex; width:100%;height: 90px; font-family: 'Poppins Bold'; padding:6px 5px; font-size: 20px; overflow: hidden; line-height: 1.2; align-items: center; } .stepCard .stepContent span{ display:block; text-align: center; } .stepCard .stepIcon{ grid-column: 1; grid-row:1; display:block; width:100%;height:90px; padding:20px 0px; text-align:center; background-color:transparent; background-position: 50% 50%; background-repeat: no-repeat; background-size: 50px 50px; } .stepCard .stepIcon svg{ display:block; width:50px;height:50px; margin:auto; } /* .stepCard .stepIcon svg circle, .stepCard .stepIcon svg path, .stepCard .stepIcon svg rect{ fill:var(--textColor) !important; stroke:var(--textColor) !important; } */ #guidanceEndInfos{ display:block; position:absolute; z-index: 70; width:100%; height:100%; bottom:0;left:0; border:none; background: var(--backgroundColor); text-align: center; } #guidanceEndInfosContainer{ display:grid; position:absolute; top:0;left:0; width:100%; height:100%; max-height:100%; grid-template-columns: 100%; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 0 14px; border: none; } #guidanceEndInfosContainer .destinationHead{ grid-column: 1; grid-row:1; padding:18px 6px 8px 6px; font-size:15px; width:100%;height:auto; line-height: 1.3; text-align: left; } .headSpaceLogo{ display:none; } .headDestination{ position:static; width:100%;height:auto; background:transparent; padding-top: 0; box-shadow:none; color:var(--textColor); } .headDestination > div:first-child{ font-size: 14px; font-family: 'Poppins Medium'; color: var(--textMuted); } #destinationName{ font-size: 26px; font-family: 'Poppins Bold'; color: var(--textColor); line-height: 1.2; } #destinationFloor{ font-size: 14px; font-family: 'Poppins Medium'; color: var(--textMuted); margin-top: 2px; } #destinationFloor:empty{ display:none; } /* Modale Guidance */ #guidanceCancelButton{ position:absolute; top:5px;right:10px; width:44px;height:44px; display:flex; align-items:center; justify-content:center; font-size:0; border:1px solid var(--borderColor); border-radius:50%; background: var(--surfaceColor); box-shadow: var(--cardShadow); } #guidanceCancelButton::before{ content:''; display:block; width:18px;height:18px; background-color: var(--textColor); -webkit-mask:url('/assets/default/croix.svg') no-repeat center / contain; mask:url('/assets/default/croix.svg') no-repeat center / contain; } #guidancePanel{ display:grid; grid-template-columns: 70px auto 70px; grid-template-rows: auto; } #guidancePanelLeft{ grid-column: 1; grid-row:1; width:70px;height:50px; } #guidancePanelLeft button{ position:absolute; top:80px;left:10px; width:70px;height:50px; border:none; background: transparent; } #guidancePanelLeft button::before{ content:''; display:block; width:30px;height:30px; margin:auto; background-color: var(--ezymobBlue); -webkit-mask:url('/assets/default/chevron.svg') no-repeat center / contain; mask:url('/assets/default/chevron.svg') no-repeat center / contain; transform: rotate(180deg); } #guidancePanelCenter{ grid-column: 2; grid-row:1; width:100%;height:250px; } #guidanceDestinationName{ height: 60px; padding: 4px 0px; color: var(--textColor); font-size: 16px; font-family: 'Poppins Bold'; text-align: center; overflow: hidden; line-height: 1.2; } /* Bandeau d'étape figé en bleu Ezymob : la note d'édition du thème demande explicitement de retirer la couleur client d'ici — compteur, chevrons et drapeau compris. */ #guidanceSteps{ text-align: center; color: var(--ezymobBlue); padding: 12px 0; font-size: 16px; font-family: 'Poppins Bold'; } #guidancePanelRight{ grid-column: 3; grid-row:1; width:70px;height:50px; } #guidancePanelRight button{ position:absolute; top:80px;right:10px; width:70px;height:50px; border:none; background: transparent; } #guidancePanelRight button::before{ content:''; display:block; width:30px;height:30px; margin:auto; background-color: var(--ezymobBlue); -webkit-mask:url('/assets/default/chevron.svg') no-repeat center / contain; mask:url('/assets/default/chevron.svg') no-repeat center / contain; } /* Dernière étape : drapeau d'arrivée */ #guidancePanelRight button.endCard::before{ -webkit-mask:url('/assets/default/drapeau.svg') no-repeat center / contain; mask:url('/assets/default/drapeau.svg') no-repeat center / contain; } /* Guidance end panel */ #guidanceEndInfosContainer .destinationInfos{ grid-column: 1; grid-row:2; font-size:15px; padding:6px; text-align: left; overflow-y: auto; background-color: transparent; height:auto; max-height:none; min-height:0px; box-shadow: none; } #guidanceEndInfosContainer .destinationInfosContainer{ height:auto; } #guidanceEndInfosContainer #destinationImage{ width:100%; border-radius: var(--radiusCard); background:var(--surfaceColor); margin-top:0px; margin-bottom:12px; overflow: hidden; box-shadow: var(--cardShadow); } #guidanceEndInfosContainer #destinationImage img{ width:100%; display:block; } /* Card blanche : description + bouton lien externe (cf. US3) */ #destinationLongText:not(:empty){ background: var(--surfaceColor); border-radius: var(--radiusCard); padding: 16px; box-shadow: var(--cardShadow); } #destinationLongText:not(:empty):has(+ #destinationUrl:not(:empty)){ border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 6px; } #destinationUrl{ text-align:center; } #destinationUrl:not(:empty){ background: var(--surfaceColor); border-radius: 0 0 var(--radiusCard) var(--radiusCard); padding: 4px 16px 14px 16px; box-shadow: var(--cardShadow); } #destinationLongText:empty + #destinationUrl:not(:empty){ border-radius: var(--radiusCard); padding-top: 14px; } #destinationUrl .secondaryButton{ margin: 0; } #rateGuidance{ grid-column: 1; grid-row:3; margin:8px 6px; padding:14px 10px; border:none; background-color: var(--surfaceColor); border-radius: var(--radiusCard); line-height: 1.4; text-align: center; font-size: 18px; box-shadow: var(--cardShadow); } #rateGuidance .rateGuidanceText{ width:100%;height:auto; border:none; text-align: center; font-size: 15px; font-family: 'Poppins Medium'; color:var(--textColor); background-color: transparent; } #rateGuidance .rateGuidanceButtons{ width:100%;height:50px; padding:10px 0; border:none; background-color: transparent; } #rateGuidance .rateGuidanceButton{ width:30px; height:30px; margin:0 10px; padding:0; border:none; background: transparent; } #rateGuidance .rateGuidanceButton svg { height:30px; width: 30px; } /* fill réel : custom.css, groupe floatingButtonOutline */ #rateGuidance .rateGuidanceButton svg :is(path, circle, rect, polygon, ellipse, line, polyline) { fill:var(--ezymobBlue); } #ratedGuidance{ grid-column: 1; grid-row:3; text-align:center; margin:8px 6px; padding:14px 10px; font-size:17px; font-family: 'Poppins Bold'; color:var(--textColor); border:none; background-color: var(--surfaceColor); border-radius: var(--radiusCard); box-shadow: var(--cardShadow); } #endGuidance{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; background-color: transparent; grid-column: 1; grid-row:4; width:100%; min-height:60px; padding:8px 6px 16px 6px; box-shadow: none; } /* Bouton(s) centré(s), largeur bornée ; empilés sur écran étroit grâce au flex-wrap + flex-basis. "Terminer" : bouton plein bleu foncé (cf. US3) */ #guidanceEndInfos .endGuidance{ flex:1 1 160px; max-width:280px; height:44px; padding:0 15px; border:none; background: var(--darkButtonColor); color:var(--darkButtonText); text-align: center; border-radius: var(--radiusButton); font-size:16px; font-family: 'Poppins Bold'; } /* "Étape suivante" (parcours de visite) : outlined primaire */ #guidanceEndInfos #visiteNextStep{ background: var(--surfaceColor); color: var(--main_items_background_color); border: 2px solid var(--main_items_background_color); } /* NOTIF / HELP TEXT : boîte de dialogue PERSISTANTE (role=alertdialog), carte centrée sur le modèle de #appRedirect (fond assombri + carte surface). Elle ne se ferme plus d'elle-même : fermeture par le bouton Ok, par un clic sur le fond assombri ou par Échap (tout est géré en JS, cf. showHelpText / hideHelpText). Un appelant peut réactiver une auto-fermeture en passant une durée explicite à showHelpText. #69 — z-index AU-DESSUS des modales avec lesquelles la popup peut coexister : à 100 une erreur GPS déclenchée fenêtre Parcours ouverte s'affichait DERRIÈRE la modale — message illisible et carte de la popup non cliquable. #73 — ÉCHELLE DES SURFACES PLEIN ÉCRAN, à tenir à jour si on en ajoute une. La valeur de #helpText n'est pas « la plus haute » : c'est la plus haute des surfaces INTERACTIVES, sous les écrans bloquants du boot. 140 #errorScreen ← doit dominer #helpText : un écran d'erreur bloquant ne doit jamais être recouvert par une popup restée ouverte 130 #helpText ← ici 121 #zoneEnter, #zoneLeaveConfirm 120 #appRedirect, #visiteWindow 100 #splashScreen L'ordre de la chaîne Échap (UI.js, bindEscClose) doit suivre cette échelle du haut vers le bas : Échap ferme la surface du DESSUS. */ #helpText{ display:flex; align-items:center; justify-content:center; position:absolute; top:0;left:0; width:100%;height:100%; padding:24px; background:rgba(0, 0, 0, 0.6); border:none; z-index:130; text-decoration: none; } #helpText_card{ display:flex; flex-direction:column; align-items:center; width:88%; max-width:360px; padding:24px 24px 22px; background:var(--surfaceColor); border:1px solid var(--borderColor); border-radius:var(--radiusCard); box-shadow:var(--cardShadow); text-align:center; } /* Icône de la boîte de message (« Ajouté à votre parcours »…) : même couleur que le libellé posé juste dessous (#helpText_content), donc hors thème client. */ #helpText_icon{ display:block; width:48px;height:48px; margin-bottom:14px; font-size:0; background-color:var(--textColor); -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } #helpText_content{ display:block; width:100%; font-size:18px; font-family:'Poppins Bold'; line-height:1.4; color:var(--textColor); } /* Bouton Ok : fermeture explicite. Les messages ne disparaissent plus tout seuls (cf. showHelpText), l'utilisateur a donc le temps de lire. On neutralise la marge droite asymétrique de .commonButton, qui décalerait le bouton hors de l'axe central de la carte. */ #helpText_ok{ margin:20px 0 0 0; min-width:120px; cursor:pointer; } /* MAP */ #mapLayer{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; } /* floor select */ div.floor-selector{ background:transparent; } div.floor-selector>a{ text-decoration: none; background:var(--surfaceColor)!important; color:var(--textColor)!important; } div.floor-selector>a.active{ font-weight: bold; text-decoration: none; } /* LOADER */ #splashScreen{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:100; background:var(--backgroundColor); } #splashScreen .splashIcon{ display:block; position:absolute; top:40%; width:100%;height:200px; text-align:center; } #splashScreen .splashIcon svg{ width:100px; height:100px; animation: color-transition 3s infinite; } .container { display: flex; justify-content: center; align-items: center; position: relative; margin-top: 8px } .rotateX { transform: rotateX(55deg); } .dot { height: 24px; width: 24px; background: var(--textColor); border-radius: 9999px; animation: dot-transition 3s infinite; z-index: 1; } .pulse { position: absolute; border: 2px solid var(--primaryColor); border-radius: 9999px; z-index: 0; animation: pulse-transition 3s infinite; } @keyframes color-transition { 0%, 100% { stroke: var(--textColor); transform: translateY(-25%); } 50% { stroke: var(--primaryColor); transform: translateY(0); } } @keyframes dot-transition { 0%, 100% { background-color: var(--textColor); } 50% { background-color: var(--primaryColor); } } @keyframes pulse-transition { 0% { height: 15px; width: 15px; } 50% { opacity: 0.5; } 100% { height: 50px; width: 50px; opacity: 0; } } #splashScreen #loadingBar{ position:absolute; display:block; left:0;bottom:5px; width:100%;height:10px; text-align: center; margin:0; padding:0; } #splashScreen #loadingBar .loadPixel{ display:inline-block; vertical-align: top; width:5px; height:5px; border:none; margin:0 1px; } #splashScreen #loadingBar .loadPixel.notLoaded{ background:red; } #splashScreen #loadingBar .loadPixel.loaded{ background:green; } #splashScreen #loadingBar .loadPixel.loading{ background:orange; animation: loading 0.5s infinite alternate; } @keyframes loading{ from{ opacity:0; } to{ opacity:1; } } /* SKELETON LOADING */ @keyframes placeHolderShimmer { 0% { background-position: 0 0; } 100% { background-position: 1000px 0; } } .loading { animation-duration: 15s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background-color: var(--surfaceColor, #fafafa); background: linear-gradient(to right, var(--surfaceColor, #fafafa) 8%, var(--borderColor, #eeeeee) 18%, var(--surfaceColor, #fafafa) 33%); background-size: 100% 100%; } /* ERROR */ /* #73 — 140 : au-dessus de #helpText (130). Un écran d'erreur bloquant ne doit pas pouvoir être recouvert par une popup d'aide restée ouverte. Échelle complète documentée au-dessus du bloc #helpText. */ #errorScreen{ display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:140; background:var(--backgroundColor); } #errorLogo{ height:40vh; width: 100vw; padding:0 5vw; } #errorLogo svg{ display:block; width:90vw; height: auto; max-height: 40vh; margin:auto; } #errorTitle{ padding:5vh 10vw 2vh 10vw; font-size:40px; color:var(--textColor); text-align: center; font-family: "Poppins Bold"!important; } #errorDescription{ padding:0vh 10vh; font-size:21px; color:var(--textMuted); text-align: center; font-family: "Poppins Bold"!important; } /* MAPBOX */ .marker { background-color: transparent; background-image: url('/assets/default/pin.svg'); background-size: contain; background-repeat: no-repeat; border:none; width: 40px; height: 40px; cursor: pointer; top:-20px!important; z-index:90; } /* Marqueurs POI dessinés par l'app (poi-layer.js) — fournisseurs du port. Pastille ronde à la couleur de la catégorie (classes générées par getThemes, light et dark), icône de catégorie en négatif. Même langage visuel que les pastilles de catégorie de la barre du haut. */ .poiMarker { width: 26px; height: 26px; padding: 4px; border: 2px solid var(--surfaceColor, #ffffff); border-radius: 50%; background-color: var(--primaryColor, #3071d9); color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 80; } /* Nom du POI : masqué de loin, révélé en approchant (cf. LABEL_MIN_ZOOM). Affiché EN ENTIER, sur une seule ligne : ni largeur maximale ni troncature « … », quitte à ce que le nom soit long. C'est l'anti-encombrement de poi-layer.js qui mesure sa largeur réelle pour éviter les chevauchements. */ .poiMarker .poiMarkerLabel { display: none; position: absolute; left: 30px; top: 50%; transform: translateY(-50%); /* #95 — Le nom se REPLIE dans la place disponible sur la carte, bornée par --poiLabelMax que poi-layer.js recalcule à chaque déplacement. Au-delà de deux lignes il est tronqué par une ellipse (line-clamp). Avant, il ne se repliait pas et sortait de l'écran : « Arrêt Croix de Pierre - T1 direction Palais de Justice » perdait 86 px sur un viewport de 430, coupé net par le bord — sans ellipse, donc sans que rien ne signale la troncature, et deux arrêts voisins devenaient indistinguables. */ /* `width: max-content` est indispensable ici : l'étiquette est en position absolue dans une pastille de 26px avec `left:30px`, donc sa largeur « shrink-to-fit » se calcule sur un espace disponible NÉGATIF et retombe à la largeur du mot le plus long. Tant que le texte était en `nowrap` cela ne se voyait pas (il débordait) ; dès qu'on autorise le repli, le nom se coupait au premier mot malgré les 190px encore libres sur la carte. */ width: max-content; max-width: var(--poiLabelMax, none); overflow-wrap: break-word; font-family: 'Poppins Bold', Poppins, sans-serif; font-size: 11px; line-height: 1.2; color: var(--textColor, #1a1a1a); text-shadow: 0 0 3px var(--surfaceColor, #ffffff), 0 0 3px var(--surfaceColor, #ffffff), 0 0 3px var(--surfaceColor, #ffffff); pointer-events: none; } /* #95 — Pastille trop près du bord pour que son nom tienne lisiblement : on masque le nom, jamais la pastille (elle reste cliquable et ouvre la fiche). */ .poiMarker.poiMarkerLabelHidden .poiMarkerLabel { display: none !important; } .poiMarker.poiMarkerLabeled .poiMarkerLabel { /* -webkit-box + line-clamp : c'est le seul mécanisme qui donne une ellipse sur du texte MULTI-ligne (text-overflow n'agit que sur une seule ligne). */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .poiMarker .poiMarkerIcon, .poiMarker .poiMarkerImg, .poiMarker svg { width: 100%; height: 100%; display: block; pointer-events: none; } /* Rendu « icône du POI » (Wemap, cf. poiIconUrl) : l'icône vient du POI lui-même et forme DÉJÀ un badge complet — cercle et pictogramme aux couleurs du client, fond transparent autour. On l'affiche donc nue : ni fond, ni bordure, ni ombre (ils feraient un double cerclage), à la taille des icônes MapsIndoors (24px, le défaut du SDK) pour un rendu identique d'un moteur à l'autre. */ .poiMarker.poiMarkerImage { width: 24px; height: 24px; padding: 0; border: none; background-color: transparent; box-shadow: none; } /* Pastille plus étroite (24px au lieu de 26) : le nom se recale dessus. */ .poiMarker.poiMarkerImage .poiMarkerLabel { left: 28px; } /* Nom basculé À GAUCHE de la pastille (cf. sideOf) : sans troncature, un nom long posé près du bord droit sortirait de l'écran. */ .poiMarker.poiMarkerLabelLeft .poiMarkerLabel { left: auto; right: 30px; text-align: right; } .poiMarker.poiMarkerImage.poiMarkerLabelLeft .poiMarkerLabel { right: 28px; } .poiMarker svg :is(path, circle, rect, polygon, ellipse, line, polyline) { fill: currentColor !important; } /* Hors zone active (#25) : le POI sort du décor, comme la règle MapsIndoors iconVisible/labelVisible = false. */ .poiMarker.poiMarkerHidden, /* POI d'un autre étage que celui affiché. */ .poiMarker.poiMarkerOtherFloor, /* POI trop proche d'un autre au zoom courant (anti-encombrement). */ .poiMarker.poiMarkerCrowded { display: none; } .positionMarker { background-color: transparent; background-image: url('/assets/default/qr_marker.svg'); background-size: contain; background-repeat: no-repeat; border:none; width: 20px; height: 20px; cursor: pointer; top:-10px!important; } .gpsMarker { background-color: transparent; background-image: url('/assets/default/gps_marker.svg'); background-size: contain; background-repeat: no-repeat; border:none; width: 20px; height: 20px; cursor: pointer; top:-10px!important; } .groupMarker { background-color: transparent; background-image: url('/assets/default/pin_pastille.svg'); background-size: contain; background-repeat: no-repeat; border:none; width: 40px; height: 40px; cursor: pointer; top:-20px!important; font-size: 10px; font-family: 'Poppins Bold'; text-align: center; padding-bottom: 10px; color:#000000; z-index:90; } #mi_map_logo{ display:none!important; } .mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib, .mapboxgl-ctrl-attrib-button, .maplibregl-ctrl-logo, .maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-button{ display:none!important; } /* Map controls (floor selector...) must stay above POI markers (.marker/.groupMarker have z-index:90, mapbox ctrl default is 2). #mapLayer prefix: mapbox-gl css is injected AFTER this stylesheet (app.js loadSDKAndMap), so we need higher specificity to win. */ #mapLayer .mapboxgl-ctrl-top-right, #mapLayer .mapboxgl-ctrl-top-left, #mapLayer .mapboxgl-ctrl-bottom-right, #mapLayer .mapboxgl-ctrl-bottom-left, #mapLayer .maplibregl-ctrl-top-right, #mapLayer .maplibregl-ctrl-top-left, #mapLayer .maplibregl-ctrl-bottom-right, #mapLayer .maplibregl-ctrl-bottom-left{ z-index:95; } .mapboxgl-ctrl-top-right .floor-selector, .maplibregl-ctrl-top-right .floor-selector{ margin-top:140px!important; } /* Sélecteur d'étage maison, utilisé par les fournisseurs qui n'en fournissent pas (Wemap, EzyMaps). Même allure que celui du SDK MapsIndoors, dont la mise en page vient de son CSS embarqué — absent ici. `pointer-events` est INDISPENSABLE : mapbox-gl et maplibre-gl posent `pointer-events:none` sur le conteneur de coin (`.maplibregl-ctrl-top-right`) pour laisser passer les gestes vers la carte, et ne le rétablissent que sur les contrôles portant LEUR classe (`.maplibregl-ctrl`). Notre sélecteur reprend le markup de MapsIndoors, pas celui de la lib carto : sans cette règle il héritait de `none`, la barre d'étages s'affichait normalement mais tous les clics traversaient jusqu'au canvas. */ .floor-selector.ezy-floors{ pointer-events:auto; } .floor-selector.ezy-floors > a{ display:block; width:34px; min-height:34px; line-height:34px; text-align:center; font-weight:600; cursor:pointer; font-size:13px; } .mapsindoors.floor-selector{ border-radius: 20px!important; overflow: hidden!important; font-size:10px!important; width:34px!important; box-shadow:var(--cardShadow)!important; } /* TRACKS */ #trackScreen{ position:absolute; top:0; left:0; width:100%; height: 100%; max-height: 100%; background-color: var(--backgroundColor); z-index: 50; } #trackMode{ display:grid; width:100%; height: 100%; grid-template-rows: 150px auto 300px 60px; grid-template-columns: 100%; } #trackModeTitle{ padding:30px 60px 10px 60px; grid-column: 1; grid-row: 1; text-align: left; font-size:18px; font-family:"Poppins Bold"!important; color:var(--textColor); line-height:2; } #trackModeTitle span{ text-align: left; font-size:24px; font-family:"Poppins Bold"!important; color:var(--textColor); line-height:2; } #trackSiteName{ font-size: 30px !important; text-transform: uppercase; line-height:1.2!important; } #trackModeLogo{ grid-column: 1; grid-row: 2; vertical-align: top; text-align: center; } #trackModeLogo img{ width:150px; } #trackModeContent{ grid-column: 1; grid-row: 3; } #trackModeLangs{ grid-column: 1; grid-row: 4; padding-left:20px; } /* Track Mode Content */ #trackModeProfilTitle{ display:inline-block; border-bottom:2px solid; margin-left:40px; } #trackModeProfilTitle, #trackModeProfilTitle span{ text-align: center; font-size:16px; font-family:"Poppins Medium"!important; color:var(--textColor); } #trackModeProfilTitle svg{ width:20px;height:20px; } #trackModeProfilButtons{ padding:20px; } #trackModeProfilButtons button{ display:block; position:relative; width:100%; height:50px; margin-bottom:10px; padding-left:30px; line-height: 1.4; font-family: "Poppins Medium"; font-size: 18px; text-align: left; background-color: var(--surfaceColor); color:var(--textColor); border-radius: var(--radiusCard); border:1px solid var(--borderColor); box-shadow: var(--cardShadow); } #trackModeProfilButtons button svg{ position:absolute; width:30px;height:30px; top:10px;right:20px; fill:var(--textColor); stroke:var(--textColor); } #trackHome{ padding:20px; } #trackHome button{ display:block; position:relative; width:100%; height:50px; margin-bottom:10px; padding-left:30px; line-height: 1.4; font-family: "Poppins Medium"; font-size: 18px; text-align: left; background-color: var(--surfaceColor); color:var(--textColor); border-radius: var(--radiusCard); border:1px solid var(--borderColor); box-shadow: var(--cardShadow); } #trackHome button.disabledButton{ opacity:0.5; } #trackHome button svg{ position:absolute; width:30px;height:30px; top:10px;right:20px; fill:var(--textColor); } #trackHome #track_returnToProfils{ position:absolute; top:10px;left:10px; width:36px;height:36px; background:var(--surfaceColor); border:1px solid var(--borderColor); border-radius: var(--radiusButton); box-shadow: var(--cardShadow); } #trackHome #track_returnToProfils::before{ content:''; display:block; width:18px;height:18px; margin:auto; background-color: var(--textColor); -webkit-mask:url('/assets/default/chevron.svg') no-repeat center / contain; mask:url('/assets/default/chevron.svg') no-repeat center / contain; transform: rotate(180deg); } .s-hidden { visibility: hidden; padding-right: 10px; } .select { display: block; position: relative; width:100%; height:50px; margin-bottom: 10px; cursor: pointer; } .styledSelect { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border:1px solid var(--borderColor); background-color: var(--surfaceColor); box-shadow: var(--cardShadow); border-radius: var(--radiusCard); padding: 9px; padding-left: 30px; color:var(--textColor); line-height: 1.4; font-family: "Poppins Medium"; font-size: 18px; text-align: left; font-weight: normal; } .styledSelect:after { content: ""; width: 0; height: 0; border: 12px solid transparent; border-color: transparent transparent transparent var(--textColor); position: absolute; top: 11px; right: 11px; } .styledSelect:active, .styledSelect.active{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .styledSelect:active::after, .styledSelect.active::after { border-color: var(--textColor) transparent transparent transparent; top: 18px; right: 18px; } .options { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 999; margin: 0 0; padding: 0 0; list-style: none; } .options li { padding: 9px 30px; margin: 0 0; height:50px; border: none; background-color: var(--surfaceColor); color:var(--textColor); border-bottom: 1px solid var(--borderColor); line-height: 1.4; font-family: "Poppins Medium"; font-size: 18px; text-align: left; font-weight: normal; } .options li:last-child{ border-bottom:none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } /* Surbrillance de l'option survolée au clavier (aria-activedescendant) et à la souris, pour rendre visible le focus dans le faux select. */ .options li:hover, .options li.focused { background-color: var(--hoverColor, var(--borderColor)); } #trackHome #buttonStartTrack{ background-color: var(--darkButtonColor); border-color: var(--darkButtonColor); color:var(--darkButtonText); } #trackHome #buttonStartTrack span{ font-family: 'Poppins Bold'; } #trackHome #buttonStartTrack svg{ fill:var(--darkButtonText); } /* Track Infos */ #UI #trackInfos{ display: block; position:absolute; top:0;left:0; width:100%;height:90px; margin:0;padding:0; background-color:var(--backgroundColor)!important; } #UI #trackInfosContainer{ display:grid; width:100%;height:90px; margin:0;padding:0; grid-template-columns: 40px auto 40px; grid-template-rows: 90px 40px; } #UI #cancelTrack{ width:36px;height:36px; margin:6px 0 0 4px; background:var(--surfaceColor); border:1px solid var(--borderColor); border-radius: var(--radiusButton); box-shadow: var(--cardShadow); } #UI #cancelTrack::before{ content:''; display:block; width:18px;height:18px; margin:auto; background-color: var(--textColor); -webkit-mask:url('/assets/default/chevron.svg') no-repeat center / contain; mask:url('/assets/default/chevron.svg') no-repeat center / contain; transform: rotate(180deg); } #UI #trackInfosPoints{ padding-left: 38px; margin: 4px 0; background-color: var(--surfaceColor); border: 1px solid var(--borderColor); border-radius: var(--radiusCard); box-shadow: var(--cardShadow); background-image: url("/assets/default/waypath.svg"); background-size: 30px; background-position: 4px center; background-repeat: no-repeat; } #UI #trackInfosPoints .starting-point{ padding: 5px 0px; border-bottom: 1px solid var(--borderColor); } #UI #trackInfosPoints .dest-point{ padding: 5px 0px; } #UI #trackInfosPoints #trackStart, #UI #trackInfosPoints #trackDest{ border:none; height:30px; border-radius: 0; color:var(--textColor); background: transparent; font-family: 'Poppins Medium'; } #UI #trackContent{ display:grid;position: absolute; width:100%;height:100%; top:0;left:0; padding: 0 10px; grid-template-columns: 100%; grid-template-rows: 80px 70px 68px 20px auto 70px; z-index: 99; } #UI #trackContent #trackDetails{ grid-column: 1; grid-row: 1; height:80px; padding:10px; text-align: right; } #UI #trackContent #trackDetails #detailsButton{ height:60px; padding:10px; background-color: var(--backgroundSelect); color:var(--textColor); border:none; border-radius: 10px; } #UI #trackContent #trackDetails #detailsButton svg{ height: 40px; width: 40px; fill:var(--textColor)!important; stroke:var(--textColor)!important; } #UI #trackContent #trackStepCount{ grid-column: 1; grid-row: 2; background-color: var(--surfaceColor); border-top: 1px solid var(--borderColor); border-right: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor); border-top-left-radius: var(--radiusCard); border-top-right-radius: var(--radiusCard); text-align:center; padding:20px 0px; } #UI #trackContent #trackStepCount #trackStepCountContent{ color: var(--textColor); text-align: center; display: inline-block; margin: auto; padding: 5px 50px; border: none; background-color: var(--backgroundSelect); border-radius: 18px; font-size: 14px; font-family: 'Poppins Bold'; } #UI #trackContent #trackStepTitle{ grid-column: 1; grid-row: 3; background-color: var(--surfaceColor); border-right: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor); } #UI #trackContent #trackStepTitle #trackStepTitleContent{ display:block; margin:0 20px; background-color: transparent; padding:15px 30px; color:var(--textColor); font-size: 16px; font-family: 'Poppins Bold'; border-radius: 10px; text-align: center; line-height:1.2; } #UI #trackContent #trackStepProgression{ grid-column: 1; grid-row: 4; background-color: var(--surfaceColor); border-right: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor); padding:0 20px; display:flex; flex-direction: row; column-gap: 5px; flex-wrap: nowrap; justify-content: space-between; align-items:center; } #UI #trackContent #trackStepProgression span{ display:block; flex-grow: 1; flex-basis: auto; background-color: var(--borderColor); height:6px; border-radius: 3px; border:none; } #UI #trackContent .trackButtonLink{ display: inline-block; background-color: var(--primaryColor); color: #ffffff; border: none; padding: 10px 30px; border-radius: var(--radiusButton); margin: 10px auto; font-family: 'Poppins Bold'; } #UI #trackContent #trackStepImageText{ grid-column: 1; grid-row: 5; background-color: var(--surfaceColor); border-right: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor); overflow-y: scroll; padding:0 20px; text-align: center; } #UI #trackContent #trackStepImageText img{ display:block; width:100%;height:auto; border:1px solid var(--borderColor); border-radius: var(--radiusCard); } #UI #trackContent #trackStepImageText p{ font-size:16px; font-family: 'Poppins Medium'; color:var(--textColor); text-align: left; } #UI #trackContent #trackStepButton{ grid-column: 1; grid-row: 6; background-color: var(--surfaceColor); border-right: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor); text-align: center; } #UI #trackContent #trackStepButton #trackButton{ background-color: var(--darkButtonColor); color:var(--darkButtonText); border: none; padding: 10px 30px; border-radius: var(--radiusButton); margin: 10px auto; font-family: 'Poppins Bold'; } .POI.active{ background-color: var(--backgroundInput)!important; } /* DEBUG */ #debugButton{ position: absolute; bottom: 70px; right: 0px; width: 40px; height: 40px; background-color: #DADADA; background-image: URL("/assets/default/debug.svg"); background-position: 50% 50%; background-size: 20px 20px; background-repeat: no-repeat; z-index:100; } #debugButton.hide{ display:none; } #debugScreen{ width:100%;height:100%; position:absolute; top:0;left:0; background-color: var(--backgroundColor); color:var(--textColor); } #debugScreen.hide{ display:none; } #copyToClipBoard{ position:relative; top:5px; left:5px; } #debugContent{ min-width: 100%;max-width: 100%; width:100%; }