.sc-simulator-wrapper {
    margin: 2rem 0;
    font-family: inherit;
}
.sc-hero img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.sc-intro {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.4;
}
.sc-form {
    /* Appliquer le même style que la barre de recherche au calculateur de surface */
    background-color: #f7fafc;
    padding: 0.5rem 0.75rem;
    /* les champs appartiennent au même bloc que le titre :
       pas de bordure supérieure, coins arrondis seulement en bas */
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    /* supprimer la marge supérieure pour coller au titre */
    margin-top: 0;
    margin-bottom: 20px;
}
.sc-form label {
    /* Labels en gras et couleur assortie */
    font-weight: 700;
    color: #1a365d;
    margin-right: 0.5rem;
    display: inline-block;
    margin-bottom: 0.3rem;
}
.sc-form input[type="number"] {
    padding: 0.3rem;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    width: 100px;
    background-color: #ffffff;
    color: #2a4365;
}

/* Affichage de la surface calculée */
.sc-surface-display {
    margin-top: 0.5rem;
    font-weight: 600;
}

/* Barre de recherche des options */
.sc-search {
    margin-bottom: 1rem;
}

/* Conteneur et icône de recherche avec effacement */
.sc-search-wrapper {
    position: relative;
}
.sc-search-wrapper input[type="text"] {
    width: 100%;
    padding: 0.4rem 2rem 0.4rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.sc-search-clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.2rem;
    color: #a0aec0;
    display: none;
    user-select: none;
}
.sc-search-clear:hover {
    color: #2b6cb0;
}

/* Lien vers la section des favoris */
/* Bouton pour accéder aux favoris */
/* Bouton pour accéder aux favoris : large et centré */
.sc-favorites-button {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.5rem 0;
    font-size: 1rem;
    color: #fff;
    background-color: #2b6cb0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.sc-favorites-button:hover {
    background-color: #2c5282;
}
.sc-search label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.sc-search input[type="text"] {
    width: 100%;
    padding: 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.sc-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.sc-category-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    width: calc(33.333% - 0.67rem);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: #ffffff;
}
.sc-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.sc-category-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background-color: #edf2f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sc-category-name {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    background-color: #f7fafc;
    color: #2a4365;
}
.sc-options-container {
    margin-top: 1.5rem;
}
.sc-options-group {
    display: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.sc-options-group.active {
    display: block;
}
.sc-options-group h3 {
    /* Mettre davantage en valeur le titre de catégorie en front-end */
    /* Espacement généreux en haut pour séparer les groupes et meilleure mise en avant */
    /* Espacement et mise en valeur du titre principal des groupes */
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a365d;
    background-color: #f7fafc;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
}

/* Accentuer spécifiquement la catégorie "Installation sanitaire" (slug sanitizé) */
#cat-installation-sanitaire > h3 {
    background-color: #e8f2fe; /* teinte bleutée légère pour ressortir */
    border-left: 4px solid #2a4365;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a365d;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
}

/* Mettre la barre de recherche dans le même style que les titres */
.sc-search {
    background-color: #f7fafc;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin-top: 30px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}
.sc-search label {
    font-weight: 700;
    color: #1a365d;
    margin-bottom: 0.5rem;
    display: block;
}
.sc-search input[type="text"] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background-color: #ffffff;
    color: #2a4365;
}
.sc-search-clear {
    /* ajuster la position en gardant la croix centrée dans la nouvelle barre */
    right: 0.8rem;
}

/* Les titres de sous-catégorie et de séparation ont également 10px de marge haut/bas */
/* Styliser également les titres de sous-catégorie et les titres de séparation (ex. Salle de douche) */
.sc-options-group h4,
.sc-separator-title {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a365d;
    background-color: #f7fafc;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
}

/* Réduire la taille des titres de séparation (comme « WC séparé ») pour les distinguer davantage */
.sc-separator-title {
    font-size: 1rem;
    font-weight: 600;
}
.sc-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e8eaf0;
    transition: background-color 0.2s ease;
}
.sc-option:last-child {
    border-bottom: none;
}
.sc-option:hover {
    background-color: #f7f9fc;
}
.sc-option-image {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    background-color: #edf2f7;
}
.sc-option-info {
    flex: 1;
}
.sc-option-info label {
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    color: #2a4365;
}
/*
 * Option header layout
 * Use flexbox to align the label (option name and custom checkbox) on the left and
 * the action icons (favorite star and description toggle) on the right.
 */
.sc-option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
}

/*
 * The label inside an option header occupies the remaining space so that the
 * action icons align to the right. It also aligns its internal contents
 * (checkbox and name) vertically.
 */
.sc-option-label {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

/*
 * Container for the favorite star and the description toggle. Using flex and
 * a small gap keeps these icons grouped together to the right of the row.
 */
.sc-option-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.3rem;
}
/*
 * Favorite star icon
 * Use a subtle grey by default and highlight with orange when active. The margin
 * is reduced so it sits closer to the toggle button, keeping all action icons
 * grouped together.
 */
.sc-favorite {
    font-size: 1.3rem;
    cursor: pointer;
    color: #cbd5e0;
    margin-left: 0;
    user-select: none;
}
.sc-favorite.active {
    color: #f6ad55;
}

/*
 * Custom checkbox styling
 * Use appearance:none to hide the default checkbox and draw a custom box with
 * a border. When checked, fill the box with dark blue and show a white tick.
 * This approach avoids reliance on the `accent-color` property, ensuring
 * consistent rendering across browsers (including Chromium-based ones).
 */
.sc-option-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    border: 1px solid #2a4365;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    background-color: #fff;
}
.sc-option-checkbox:checked {
    background-color: #2a4365;
    border-color: #2a4365;
}
.sc-option-checkbox:checked::after {
    content: '\2713';
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 0.7rem;
    color: #fff;
    line-height: 1;
}

/*
 * Description toggle (+/−) styling
 * Render the toggle as a small square with a light blue background, dark
 * blue text and rounded corners. Using display:inline-flex ensures the
 * character is centered both horizontally and vertically. The margin keeps
 * it snug next to the favorite star.
 */
.sc-toggle-desc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0;
    padding: 0;
    font-weight: 700;
    color: #2a4365;
    /* Use a transparent background with a dark blue border to match the style
       shown in the provided example. The border gives the button a defined
       outline without filling it entirely. */
    background-color: transparent;
    border: 1px solid #2a4365;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}
.sc-favorites {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #ddd;
}
.sc-favorites h4 {
    margin: 0 0 0.3rem 0;
    font-size: 1rem;
    font-weight: 600;
}
.sc-favorites-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sc-favorites-list li {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

/* Barre de progression */
.sc-progress-wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.sc-progress-bar {
    position: relative;
    /* Augmenter la hauteur de la barre de progression pour une meilleure visibilité */
    height: 30px;
    background: #e2e8f0;
    border-radius: 15px;
    overflow: hidden;
}
.sc-progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #2b6cb0;
    width: 0%;
    transition: width 0.3s ease;
}
.sc-progress-text {
    margin-top: 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2a4365;
    text-align: right;
}

/* Boutons de navigation */
.sc-navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}
.sc-prev-button,
.sc-next-button {
    background-color: #4299e1;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.sc-prev-button {
    background-color: #e2e8f0;
    color: #2a4365;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.sc-next-button:hover {
    background-color: #3182ce;
}
.sc-prev-button:hover {
    background-color: #cbd5e0;
}
.sc-option-info input.sc-option-qty {
    margin-left: 0.5rem;
    width: 90px;
    padding: 0.3rem;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
}
/* Description des options : garder les sauts de ligne et les espaces tels qu’entrés dans l’admin */
.sc-option-desc {
    margin: 0.25rem 0 0 1.5rem;
    font-size: 0.85rem;
    color: #4a5568;
    line-height: 1.3;
    /* Utiliser pre-wrap pour conserver les retours à la ligne et les espacements saisis dans l’admin */
    white-space: pre-wrap;
    /* Masquer la description par défaut ; elle sera affichée en accordéon via JS */
    display: none;
}

/* Afficher la description lorsqu’elle est ouverte via JS (classe open) */
.sc-option-desc.open {
    display: block;
}

/* Bouton de bascule (plus/moins) de la description */
/* Redefine the appearance of the description toggle here to ensure consistent
   styling across browsers. This overrides any previous definition and aligns
   with the custom design used in the option header. */
.sc-toggle-desc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.3rem;
    padding: 0;
    font-weight: 700;
    color: #2a4365;
    background-color: #e8f2fe;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    border: none;
}
.sc-summary {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem;
    background-color: #f7fafc;
    margin-top: 1.5rem;
}

.sc-estimate-note {
    margin-top: 0.5rem;
    font-style: italic;
    color: #555;
}

/* Récapitulatif des lignes */
.sc-summary-list li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #e2e8f0;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: #2d3748;
}
.sc-summary-list li:last-child {
    border-bottom: none;
}
.sc-total {
    font-size: 1.1rem;
    color: #2a4365;
    margin-top: 1rem;
}

/* Section contact : conteneur séparé pour le formulaire */
.sc-contact-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Formulaire contact à l'intérieur : pas de bordure supplémentaire */
.sc-contact-form {
    margin-top: 0;
    background-color: transparent;
    border: none;
    padding: 0;
}
.sc-contact-form h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: #2a4365;
}
.sc-form-field {
    margin-bottom: 0.75rem;
}
.sc-form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.sc-form-field input,
.sc-form-field textarea {
    width: 100%;
    padding: 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Style spécifique pour la case "Recevoir une copie du courriel" */
.sc-form-send-copy label {
    display: flex;
    align-items: center;
    font-weight: normal;
}
.sc-form-send-copy label input[type="checkbox"] {
    margin-right: 0.5rem;
}
/* Bouton principal (contact et navigation) */
.sc-submit-button {
    background-color: #4299e1;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.sc-submit-button:hover {
    background-color: #3182ce;
}
.sc-form-response {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    display: none;
}
.sc-form-response.success {
    background-color: #e6fffa;
    color: #2c7a7b;
    border: 1px solid #9ae6b4;
}
.sc-form-response.error {
    background-color: #fff5f5;
    color: #c53030;
    border: 1px solid #feb2b2;
}
.sc-summary h3 {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    color: #2a4365;
}
.sc-summary-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.sc-summary-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}
.sc-summary-list li:last-child {
    border-bottom: none;
}
.sc-total {
    font-weight: bold;
    font-size: 1.3rem;
    text-align: right;
    margin-top: 0.5rem;
}

.sc-total-value {
    color: #1a202c;
}

/* Liens cliquables dans le récapitulatif et la liste des favoris */
.sc-summary-link,
.sc-fav-link {
    color: #2b6cb0;
    text-decoration: underline;
    cursor: pointer;
}
.sc-summary-link:hover,
.sc-fav-link:hover {
    color: #2c5282;
}
@media (max-width: 992px) {
    .sc-category-card {
        width: calc(50% - 0.5rem);
    }
}
@media (max-width: 600px) {
    .sc-category-card {
        width: 100%;
    }
    .sc-options-group {
        padding: 0.5rem;
    }
}

/* Style du titre du calculateur de surfaces dans le simulateur et le calculateur dédié */
/* Style du titre du calculateur de surfaces dans le simulateur et le calculateur dédié */
.sc-calc-title {
    /* Le titre fait partie du même bloc que les champs : bord commun avec le formulaire */
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a365d;
    background-color: #f7fafc;
    padding: 0.4rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px 6px 0 0;
}