@media only screen and (min-width : 1025px){ .container {     padding-top: 10%;     justify-content : center;     display: grid;     height: auto;     width: 1240px;     max-width: 100%;     grid-template-columns: 100%; /* Modifié */     justify-content: space-around;     align-items: stretch;     background-color:#FFFFFF;     margin-bottom : 10%;     z-index: 1; } #estimation-form {     display: grid;     margin: auto;     width :70% ;     padding: 1%;     border: 1px solid #ccc;     border-radius: 5px;     background-color: #f9f9f9;     grid-column: 1;     z-index: 2; }  #estimation-form input[type="text"], #estimation-form input[type="number"], #estimation-form select {     width: calc(99% - 30px);     padding: 8px;     margin-bottom: 15px;     border: 1px solid grey;     border-radius: 3px; }  #estimation-form label {     display: block;     margin-bottom: 5px;     font-weight: bold; }  #estimation-form button {     width: 40%;    margin : auto;     padding: 10px;     background-color: #868666;     color: black;     border: 1px solid grey;     border-radius: 3px;     cursor: pointer; }  #estimation-form button:hover {     background-color: #AFAF87; }  .sidebar {     position: fixed;      top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.9);     padding: 20px;     box-sizing: border-box;      transform: translateX(100%);     transition: transform 0.3s ease-out;     overflow: auto;     grid-template-rows: auto auto auto;     align-items: center;     text-align: center;     grid-column: 2;     background-color : white;     z-index: 3; }   .sidebar.active {     transform: translateX(0); }  #titre {     display: block;     font-size: 35px;     margin-block-start: 0.83em;     margin-block-end: 0.83em;     margin-inline-start: 1px;     margin-inline-end: 1px;     margin-top : 5%;     margin-bottom : 5%;     font-weight: bold; }  #contactAgentButton{     padding: 10px;     background-color: #AFAF87;     color: black;     border: 1px solid grey;     border-radius: 3px;     cursor: pointer; }  #contactAgentButton button:hover {     background-color: #868666;     } .contact{  margin-top: 2%;     margin-left: 11%;}          #progressBarContainer{     position: relative;     width: 100%;     height: 8px;     background-image: linear-gradient(to right, #b8cdb8, #FFFF00, #FF69B4);     margin-top: 20px;     margin-bottom:20px; }  #progressBar{     height: 8px;     margin-top: 20px;     margin-bottom:20px; }   #priceRangeMini {     position: absolute;      left: 0;     padding-left: 2%;     margin-top: -2%;  }  #priceRangeMoy {        position: absolute;     left: 50%;     transform: translateX(-50%);     font-size: 14px;     font-weight: 700;     margin: AUTO; }  #priceRangeMaxi {     position: absolute; /* Ajouté */     right: 0;     margin-top: -2%;     padding-right: 2%; } #imagetresultat {     display: flex; /* Modifié de grid à flex */     justify-content: center; /* Ajouté */     align-items: center; /* Ajouté */     margin-top : 5em; }       #property-image {     display: inline-block;     width: 170px;     height: 170px;     background-repeat: no-repeat;     background-size: cover; } #result {     background-color : #AFAF87;     BORDER: 1PX SOLID grey;     display: flex;     flex-direction: column;     align-content: center;     justify-content: center;     align-items: center;     width : 500px ;     height : 170px;     padding:2% ;     font-family : "Lato";     font-weight: bold;     font-size: 1em; }}  /*  VUE TABLETTE  */  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {   .container {     padding-top: 10%;     justify-content : center;     display: grid;     height: auto;     width: 100%;     grid-template-columns: 1fr;     justify-content: space-around;     align-items: stretch;     background-color:#FFFFFF;     margin-bottom : 10%;     z-index: 1;   }    #estimation-form {     display: grid;     margin: auto;     width :100% ;     padding: 1%;     border: 1px solid #ccc;     border-radius: 5px;     background-color: #f9f9f9;     grid-column: 1;     z-index: 2;   }    #estimation-form input[type="text"],   #estimation-form input[type="number"],   #estimation-form select {     width: calc(99% - 30px);     padding: 8px;     margin-bottom: 15px;     border: 1px solid grey;     border-radius: 3px;   }    #estimation-form label {     display: block;     margin-bottom: 5px;     font-weight: bold;   }    #estimation-form button {     width: 40%;     margin : auto;     padding: 10px;     background-color: #868666;     color: black;     border: 1px solid grey;     border-radius: 3px;     cursor: pointer;   }    #estimation-form button:hover {     background-color: #AFAF87;   }    .sidebar {     position: fixed;      top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.9);     padding: 20px;     box-sizing: border-box;      transform: translateX(100%);     transition: transform 0.3s ease-out;     overflow: auto;     grid-template-rows: auto auto auto;     align-items: center;     text-align: center;     grid-column: 2;     background-color : white;     z-index: 3;   }    .sidebar.active {     transform: translateX(0);   }    #titre {     display: block;     font-size: 35px;     margin: 5% auto;     font-weight: bold;   }    #contactAgentButton {     padding: 10px;     background-color: #AFAF87;     color: black;     border: 1px solid grey;     border-radius: 3px;     cursor: pointer;   }    #contactAgentButton:hover {     background-color: #868666;   }    .contact {     margin: 2% 0 0 11%;   }    #progressBarContainer {     position: relative;     width: 100%;     height: 8px;     background-image: linear-gradient(to right, #b8cdb8, #FFFF00, #FF69B4);     margin: 20% auto;   }    #progressBar {     height: 8px;     margin: 20px auto;   }    #priceRangeMini {     position: absolute;      left: 2%;         }    #priceRangeMoy {     position: absolute;     left: 50%;     transform: translateX(-50%);     font-size: 14px;     font-weight: 700;       margin: AUTO;   }    #priceRangeMaxi {     position: absolute;     right: 2%;        }    #imagetresultat {     display: flex;     justify-content: center;     align-items: center;     margin-top: 5em;   }    #property-image {     display: inline-block;     width: 170px;     height: 170px;     background-repeat: no-repeat;     background-size: cover;   }    #result {     background-color: #AFAF87;     border: 1px solid grey;     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     width: 100%;     height: 170px;     padding: 2%;     font-family: "Lato";     font-weight: bold;     font-size: 1em;   } }   /*  VUE MOBILE  */  @media only screen and (max-width : 480px) {   .container {     padding-top: 10%;     justify-content : center;     display: grid;     height: auto;     width: 100%;     grid-template-columns: 1fr;     justify-content: space-around;     align-items: stretch;     background-color:#FFFFFF;     margin-bottom : 10%;     z-index: 1;   }    #estimation-form {     display: grid;     margin: auto;     width :100% ;     padding: 1%;     border: 1px solid #ccc;     border-radius: 5px;     background-color: #f9f9f9;     grid-column: 1;     z-index: 2;   }    #estimation-form input[type="text"],   #estimation-form input[type="number"],   #estimation-form select {     width: calc(99% - 30px);     padding: 8px;     margin-bottom: 15px;     border: 1px solid grey;     border-radius: 3px;   }    #estimation-form label {     display: block;     margin-bottom: 5px;     font-weight: bold;   }    #estimation-form button {     width: 60%;     margin : auto;     padding: 10px;     background-color: #868666;     color: black;     border: 1px solid grey;     border-radius: 3px;     cursor: pointer;   }    #estimation-form button:hover {     background-color: #AFAF87;   }    .sidebar {     position: fixed;      top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.9);     padding: 20px;     box-sizing: border-box;      transform: translateX(100%);     transition: transform 0.3s ease-out;     overflow: auto;     grid-template-rows: auto auto auto;     align-items: center;     text-align: center;     grid-column: 2;     background-color : white;     z-index: 3;   }    .sidebar.active {     transform: translateX(0);   }    #titre {     display: block;     font-size: 24px;     margin-bottom: 36%;     font-weight: bold;   }    #contactAgentButton {     padding: 10px;     background-color: #AFAF87;     color: black;     border: 1px solid grey;     border-radius: 3px;     cursor: pointer;   }    #contactAgentButton:hover {     background-color: #868666;   }    .contact {     margin: 2% auto;   }    #progressBarContainer {     position: relative;     width: 100%;     height: 8px;     background-image: linear-gradient(to right, #b8cdb8, #FFFF00, #FF69B4);     margin: 20px auto;   }    #progressBar {     height: 8px;     margin: 20px auto;   }    #priceRangeMini {     position: absolute;      left: 5%;     font-size : 11px;     Font-weight :bold ;   }    #priceRangeMoy {     position: absolute;     left: 50%;     transform: translateX(-50%);     font-size: 14px;     font-weight: 700;       margin: AUTO;   }    #priceRangeMaxi {     position: absolute;     right: 5%;     font-size : 11px;     Font-weight :bold ;   }    #imagetresultat {     display: flex;     justify-content: center;     align-items: center;     margin-top: 5em;   }    #property-image {     display: inline-block;     width: 170px;     height: 170px;     background-repeat: no-repeat;     background-size: cover;   }    #result {     background-color: #AFAF87;     border: 1px solid grey;     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     width: 100%;     height: 170px;     padding: 2%;     font-family: "Lato";     font-weight: bold;     font-size: 13px;   } }  /*  VUE ecran entre 481 et 767  */ @media only screen and (min-device-width : 481px) and (max-device-width : 767px) {   .container {     padding-top: 10%;     justify-content : center;     display: grid;     height: auto;     width: 100%;     grid-template-columns: 1fr;     justify-content: space-around;     align-items: stretch;     background-color:#FFFFFF;     margin-bottom : 10%;     z-index: 1;   }    #estimation-form {     display: grid;     margin: auto;     width :100% ;     padding: 1%;     border: 1px solid #ccc;     border-radius: 5px;     background-color: #f9f9f9;     grid-column: 1;     z-index: 2;   }    #estimation-form input[type="text"],   #estimation-form input[type="number"],   #estimation-form select {     width: calc(99% - 30px);     padding: 8px;     margin-bottom: 15px;     border: 1px solid grey;     border-radius: 3px;   }    #estimation-form label {     display: block;     margin-bottom: 5px;     font-weight: bold;   }    #estimation-form button {     width: 40%;     margin : auto;     padding: 2%;     background-color: #868666;     color: black;     border: 1px solid grey;     border-radius: 3px;     cursor: pointer;   }    #estimation-form button:hover {     background-color: #AFAF87;   }    .sidebar {     position: fixed;      top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(255, 255, 255, 0.9);     padding: 3%;     box-sizing: border-box;      transform: translateX(100%);     transition: transform 0.3s ease-out;     overflow: auto;     grid-template-rows: auto auto auto;     align-items: center;     text-align: center;     grid-column: 2;     background-color : white;     z-index: 3;   }    .sidebar.active {     transform: translateX(0);   }    #titre {     display: block;     font-size: 35px;     margin: 5% auto;     font-weight: bold;   }    #contactAgentButton {     padding: 1%;     background-color: #AFAF87;     color: black;     border: 1px solid grey;     border-radius: 3px;     cursor: pointer;   }    #contactAgentButton:hover {     background-color: #868666;   }    .contact {     margin: 2% 0 0 11%;   }    #progressBarContainer {     position: relative;     width: 100%;     height: 8px;     background-image: linear-gradient(to right, #b8cdb8, #FFFF00, #FF69B4);     margin: 20% auto;   }    #progressBar {     height: 2%;     margin: 5% auto;   }    #priceRangeMini {     position: absolute;      left: 2%;         }    #priceRangeMoy {     position: absolute;     left: 50%;     transform: translateX(-50%);     font-size: 14px;     font-weight: 700;       margin: AUTO;   }    #priceRangeMaxi {     position: absolute;     right: 2%;        }    #imagetresultat {     display: flex;     justify-content: center;     align-items: center;     margin-top: 5em;   }    #property-image {     display: inline-block;     width: 170px;     height: 170px;     background-repeat: no-repeat;     background-size: cover;   }    #result {     background-color: #AFAF87;     border: 1px solid grey;     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     width: 100%;     height: 170px;     padding: 2%;     font-family: "Lato";     font-weight: bold;     font-size: 1em;   } }