/* ---------- Feuille de style de la Carte ---------- */

/* ----- Style général ----- */
html {
    width: 100%;
    height: 100%;
    font-family: 'Jost', sans-serif;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    z-index: -2;
}

/* ----- Carte ---- */
.map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
}

/* Marqueurs */
.marker {
    position: relative;
    cursor: pointer;
}

.linkHouse {
    width: 600%;
    position: absolute;
    right: -180px;
    display: none;
}

.linkHouse form {
    width: 100%;
}

.linkHouse button {
    background: #731702;
    border: 1px solid #731702;
    border-radius: 3px;
    color: white;
    padding: 2%;
    width: 100%;
    cursor: pointer;
}

.marker:hover .linkHouse {
    display: block;
}

.linkHouse:hover button {
    color: #F4DFCA;
}

/* ----- Propositions maisons ----- */
.propositionHouse {
    position: absolute;
    bottom: 0;
    right: 5%;
    background-color: #F4DFCA;
    width: 18%;
    height: fit-content;
    padding: 0.2%;
    border-radius: 5px 0 0 0;
    transition: .5s ease-in-out;
    border: 1px solid #ffdbb8;
    box-shadow: 2px 2px 5px black;
}

.cross-icon svg {
    float: right;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Masquer l'icône "chevron-up" par défaut */
.hidden-cross {
    display: none;
    pointer-events: none; /* Rend l'élément non interactif */
    transform: scale(0.9); /* Effet de rétrécissement */
}

/* Lorsqu'on coche la case, on affiche "chevron-up" et on cache "chevron-down" */
#closePH:checked ~ .propositionHouse .cross-icon .bi-chevron-down {
    display: none;
    pointer-events: none;
    transform: scale(0.9); /* Réduction pour effet visuel */
}

#closePH:checked ~ .propositionHouse .cross-icon .bi-chevron-up {
    display: flex;
    pointer-events: auto;
    transform: scale(1); /* Restauration à la taille normale */
}

.bubble {
    background-color: #731702;
    border-radius: 5px;
    padding: 3%;
    margin-top: 12%;
    margin-left: 10%;
    width: 50%;
    position: relative;
}

.bubble p {
    text-align: justify;
    color: #F4DFCA;
    background-color: #731702;
    margin: 0;
}

.triangle {
    position: absolute;
    right: 10%;
    bottom: -15%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #731702;
}

.propositionHouse span {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.propositionHouse span button {
    color: #F4DFCA;
    background-color: #731702;
    border: solid 2px #731702;
    border-radius: 4px;
    padding: 1.5%;
    margin: 5%;
    cursor: pointer;
}

.propositionHouse span img {
    margin-right: 2%;
}

.propositionHouse label {
    cursor: pointer;
}

#closePH:checked ~ .propositionHouse {
    transition: .5s ease-in-out;
    transform: translateY(85%);
}

/* ----- Pop-up proposition ----- */
.popupProposition {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    color: black;
    z-index: 3;
}

.popupProposition button {
    font-size: 100%;
    border-radius: 5px;
    padding: 2%;
    cursor: pointer;
    align-self: center;
    width: 25%;
}

/* Premier pop-up */
.popupContentProposition {
    width: 30%;
}

.popupContentProposition form {
    display: flex;
    flex-direction: column;
    background: #F4DFCA;
    border-radius: 5px;
    width: 100%;
    padding: 10%;
}

#closePopupProposition {
    border: solid 1px #731702;
    color: #F4DFCA;
    background-color: #731702;
}
#closePopupProposition:hover {
    color: #731702;
    background-color: #F4DFCA;
}
#changeContentProposition {
    border: solid 1px #095228;
    color: #F4DFCA;
    background-color: #095228;
}
#changeContentProposition:hover {
    color: #095228;
    background-color: #F4DFCA;
}

.popupContentProposition span {
    display: flex;
    justify-content: space-between;
}

.popupContentProposition form > input, .popupContentProposition textarea {
    font-size: 15px;
}

/* Deuxième pop-up */
.popupContentProposition2 {
    text-align: center;
    display: none;
    flex-direction: column;
    background: #F4DFCA;
    border-radius: 5px;
    width: 25%;
    padding: 2%;
}

.popupContentProposition2 button {
    border: solid 1px #731702;
    color: #F4DFCA;
    background-color: #731702;
    width: 20%;
    align-self: center;
    padding: 2%;
}
.popupContentProposition2 button:hover {
    color: #731702;
    background-color: #F4DFCA;
}

.verifContentProposition {
    color: #731702;
    font-size: 12px;
    opacity: 0;
    margin: 0;
    margin-bottom: 3%;
}

.popupContentProposition2 p {
    font-size: 120%;
    margin-bottom: 8%;
}