/* ============================================================
   Domoria Habitat — CSS commun aux pages "service"
   (toiture, charpente, facade, ventilation, isolation)
   Conteneurs de mise en page (.grid-3, .process-steps) volontairement
   laissés page-spécifiques : ils alternent grid/flex selon la page.
   ============================================================ */

.container { padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section-title { margin-bottom: 1.5rem; }
.section-subtitle { margin-bottom: 3rem; max-width: 800px; line-height: 1.8; }

/* Grid 2 colonnes */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Cards */
.card { background: var(--color-bg-card); padding: 2.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: var(--transition); display: flex; flex-direction: column; height: 100%; position: relative; border-top: 4px solid transparent; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-top-color: var(--color-accent-1); }
.card-icon { width: 60px; height: 60px; background: var(--color-bg-main); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.card-icon svg { width: 30px; height: 30px; color: var(--color-accent-1); }
.card h4 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 1rem; color: var(--color-text-main); }
.card p { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.6; flex: 1; }

/* Highlight banner (variante par défaut : toiture/charpente/ventilation — facade garde sa propre variante en override page-spécifique) */
.highlight-banner { background: var(--color-bg-darker); border-left: 5px solid var(--color-accent-1); padding: 2rem; border-radius: var(--radius-md); margin-bottom: 3rem; }
.highlight-banner h3 { font-size: 1.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; color: var(--color-text-main); font-family: var(--font-serif); }
.highlight-banner p { color: var(--color-text-main); font-size: 1.05rem; }

/* Enemies list */
.enemies-list { list-style: none; margin-top: 2rem; }
.enemies-list li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; background: var(--color-white); padding: 1.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.enemies-list li .icon-wrapper { background: var(--color-bg-main); padding: 10px; border-radius: 50%; color: var(--color-accent-1); flex-shrink: 0; }
.enemies-list li h5 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.enemies-list li p { color: var(--color-text-light); font-size: 0.95rem; margin: 0; }

/* Benefits vertical */
.benefits-vertical { display: flex; flex-direction: column; gap: 1.5rem; }
.benefit-row { display: flex; align-items: center; gap: 1rem; background: var(--color-white); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--color-bg-darker); }
.benefit-row svg { width: 32px; height: 32px; color: var(--color-accent-1); flex-shrink: 0; }
.benefit-row div h5 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.benefit-row div p { color: var(--color-text-light); font-size: 0.9rem; margin: 0; }

/* Image comparaison avant/après */
.image-compare { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.image-compare img { width: 100%; height: 100%; object-fit: cover; }

/* Process steps — item commun (le conteneur .process-steps reste page-spécifique : grid/flex selon la page, minmax variable) */
.process-step { background: var(--color-white); padding: 2.5rem 2rem; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-sm); position: relative; }
.process-step-icon { width: 56px; height: 56px; background: var(--color-bg-darker); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto; }
.process-step-icon svg { width: 28px; height: 28px; stroke: var(--color-accent-1); }
.process-step h4 { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 0.5rem; }
.process-step p { color: var(--color-text-light); font-size: 0.95rem; }

/* FAQ (identique sur les 5 pages, y compris isolation) */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.faq-item { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-question { width: 100%; background: none; border: none; padding: 1.5rem; text-align: left; font-family: var(--font-serif); font-size: 1.15rem; color: var(--color-text-main); font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-question svg { width: 20px; height: 20px; color: var(--color-accent-1); transition: transform 0.3s ease; }
.faq-question.active svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner { padding: 0 1.5rem 1.5rem 1.5rem; color: var(--color-text-light); line-height: 1.6; }

/* Accordéons mobile (sections Constat/Ennemis/Hydrofuge/Traitements/Process — identique sur les 5 pages) */
.toggle-chevron { display: none; }
@media (max-width: 1024px) {
    .mobile-toggle-header { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0.75rem; }
    .toggle-chevron { display: block; width: 18px; height: 18px; color: var(--color-accent-1); flex-shrink: 0; margin-left: auto; transition: transform 0.3s ease; }
    .mobile-toggle-header.active .toggle-chevron { transform: rotate(180deg); }
    .mobile-collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin: 0 !important; }
}