/*###### IMPORTS ###### */
@import "template.css";


.first-section-title {
    background: url(../img/intervention-a-domicile/section-title.jpg) center / cover no-repeat;
    color: white;
    padding: 50px 20px;
    position: relative;
    z-index: 1;
    border-radius: 15px;
    overflow: hidden;
    margin: 15px 0 40px 0;
}

/* Couche assombrie */
.first-section-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* opacité 50% noire */
    z-index: 0;
    border-radius: 15px;
}

/* Pour que le contenu soit au-dessus */
.first-section-title > * {
    position: relative;
    z-index: 1;
}

.first-section-title_container {
    padding: 15px;
}

.first-section-title_container p {
    font-size: 20px;
    margin: 20px;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
.section-title p {
    margin-bottom: 0;
}

.assistant-container {
    background-color: var(--background-box);
    border-radius: 15px;
    padding: 30px;
    margin: 0 auto;
    min-height: 220px;
}

.assistant-container #question-container h3 {
    color: var(--color-text);
    text-align: center;
    margin-bottom: 30px;
}

.form-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0px 30px 0px;
    color: var(--color-text);
}

.options-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centre les boutons */
    gap: 15px; /* Espacement entre les boutons */
}

.form-button-square {
    min-width: 300px; /* Ajuster la largeur pour avoir 4 boutons sur la ligne */
    height: 80px; /* Hauteur fixe pour les boutons carrés */
    display: flex;
    padding: 10px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 2px solid #bfbfbf;
    border-radius: 15px;
    background: transparent;
    cursor: pointer;
    text-align: center;
    color: var(--color-text);
    transition: all 0.4s ease-in-out;
    font-size: 19px;
}

.form-button-square:hover {
    border: 2px solid #3ad58c;
    transition: all 0.4s ease-in-out;
}

.form-button-square .icon {
    font-size: 35px;
}

.form-button-square .label {
    font-size: 30px;
    color: var(--color-text);
}

/* Bouton Recommencer positionné en haut à gauche */
#restart-btn {
    position: absolute;
    color: var(--color-text);
    font-size: 17px;
    cursor: pointer;
    z-index: 10;
    border: none;
    background: none;
}

/* Icône de flèche */
#restart-btn i {
    font-size: 20px;
}

/* Résultats finaux */
.form-price {
    font-size: 30px;
    font-weight: bold;
    color: #4CAF50;
    margin-top: 15px;
    text-align: center;
}

#result-container p {
    font-size: 18px;
    text-align: center;
    color: var(--color-text);
}

@media (max-width: 1300px) {
    .form-title {
        font-size: 24px;
        margin: 50px 0px 30px 0px;
    }
}