/* Details Section */ /* Conteneur principal */ /* Conteneur principal */ .info-tab { position: fixed; /* Se superpose à tout, même avec un défilement */ top: 50%; /* Centré verticalement */ left: 0; /* Attaché au bord gauche */ transform: translateY(-50%); /* Ajuste pour un centrage précis */ display: flex; align-items: center; z-index: 2000; /* Plus élevé que le viewer */ transition: transform 0.3s ease; } /* Bouton de l'onglet */ .info-toggle { background-color: var(--primary-color); color: var(--neutral-color); border: 1px black solid; border-radius: 0 5px 5px 0; padding: 10px; cursor: pointer; box-shadow: var(--box-shadow); transition: background-color 0.3s ease, transform 0.3s ease; } .info-toggle:hover { background-color: var(--secondary-color); } /* Carte des informations */ .info-card { background-color: var(--neutral-color); color: var(--bg-color); box-shadow: var(--box-shadow); border-radius: 10px; width: 300px; padding: 15px; z-index: 2000px; position: fixed; /* Positionné par rapport au conteneur principal */ top: 50%; /* Aligné avec le bouton */ left: 100%; /* Caché à gauche par défaut */ transform: translateY(-50%) translateX(-100%); transition: transform 0.3s ease; } /* Carte visible */ .info-tab.open .info-card { transform: translateY(-50%) translateX(0); } /* Bouton rotation lorsqu'ouvert */ .info-tab.open .info-toggle { transform: rotate(180deg); } #property-details { /* Style Sources */ width: 30svw; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex-grow: 1; flex-shrink: 0; align-self: stretch; min-width: 30svw; max-width: max-content; padding: 10px; /* Cascaded */ background-color: rgba(255, 255, 255, 0.87); border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none; border-top-color: rgba(106, 55, 146, 0.87); border-right-color: rgba(106, 55, 146, 0.87); border-bottom-color: rgba(106, 55, 146, 0.87); border-left-color: rgba(106, 55, 146, 0.87); border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); margin: 5px; /* Inherited */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Preset */ box-sizing: border-box; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; outline-width: 1px; } .details-card { /* Style Sources */ display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 0; align-self: stretch; /* Inherited */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Preset */ box-sizing: border-box; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; outline-width: 1px; } .property-title{ /* Style Sources */ align-self: auto; flex-grow: 1; flex-shrink: 0; width: 100%; min-width: 100%; order: 0; /* Inherited */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Preset */ display: contents; white-space: normal; white-space-collapse: collapse; } #property-info{ /* Style Sources */ flex-grow: 1; flex-shrink: 0; /* Inherited */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Preset */ box-sizing: border-box; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; outline-width: 1px; } .technical-info{ /* Style Sources */ align-self: auto; flex-grow: 1; flex-shrink: 0; width: 100%; min-width: 100%; order: 0; /* Inherited */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Preset */ display: contents; white-space: normal; white-space-collapse: collapse; } #description-container{ /* Style Sources */ flex-grow: 1; flex-shrink: 0; align-self: stretch; min-width: 100svw; max-width: none; padding: 10px; /* Inherited */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Preset */ box-sizing: border-box; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; outline-width: 1px; } .description{ justify-content: start; flex-direction: column; height: 100%; min-height: 100%; /* Inherited */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Preset */ box-sizing: border-box; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; outline-width: 1px; } #text-description{ /* Inherited */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Preset */ display: contents; white-space: normal; white-space-collapse: collapse; } #description-content{ display: flex; }