/* ============================================================
   PATHOLOGIE-BATIMENT.CSS — page-expertise-pathologie-batiment.php
   Dépendances : style.css, home.css, local.css
   URL : /expertise-pathologie-batiment/
============================================================ */

/* ============================================================
   HERO — reprend le format standard du site (.hero plein cadre,
   home.css). Seul le H1 reçoit un léger ajustement de taille,
   comme le font les autres pages cluster (.litige-h1, .fissures-h1…)
============================================================ */

.patho-h1 {
    font-size: clamp(28px, 3.2vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    margin: 0 0 6px !important;
}

/* ============================================================
   INTRO — bandeau clair "une pathologie ne se résume pas..."
============================================================ */

.section-patho-intro {
    padding: 44px 0;
}

.patho-intro-box {
    display: flex;
    gap: 24px;
    align-items: center;
    background: var(--bg-section);
    border-left: 4px solid var(--btn-color-hover);
    border-radius: 12px;
    padding: 32px clamp(20px, 4vw, 48px);
}

.patho-intro-box__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patho-intro-box__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.patho-intro-box__text h2 {
    font-family: 'Gotham', sans-serif;
    font-weight: 700 !important;
    font-size: 17px !important;
    color: var(--title-color) !important;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 6px 0 16px !important;
}

.patho-intro-box__text p {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: var(--txt-color) !important;
    font-weight: 500 !important;
    margin: 0 0 14px !important;
}

.patho-intro-box__text p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 600px) {
    .patho-intro-box {
        flex-direction: column;
        text-align: left;
    }
}

/* ============================================================
   QUAND FAIRE APPEL À UN EXPERT — grille de 6 cartes
============================================================ */

.section-patho-quand {
    padding: 24px 0 64px;
}

.patho-quand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.patho-quand-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 26px 22px;
    background: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.2s, transform 0.2s;
}

.patho-quand-item:hover {
    box-shadow: 0 12px 28px rgba(46, 63, 95, 0.10);
    transform: translateY(-3px);
}

.patho-quand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
}

/* Icônes réutilisées de "Nos domaines d'expertise" (.domaine-icon, style.css) */
.patho-quand-icon .domaine-icon {
    margin-bottom: 0;
}

.patho-quand-item h3 {
    font-family: 'Gotham', sans-serif;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--title-color) !important;
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0 0 10px !important;
}

.patho-quand-item p {
    font-size: 13.5px !important;
    color: var(--txt-color) !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .patho-quand-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .patho-quand-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PATHOLOGIES ANALYSÉES + CE QUE PERMET — 2 colonnes
============================================================ */

.section-patho-analyse {
    padding: 0 0 64px;
}

.patho-analyse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.patho-analyse-grid h2 {
    font-family: 'Gotham', sans-serif;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--title-color) !important;
    text-transform: uppercase;
    margin: 0 0 22px !important;
}

/* --- Tableau des pathologies --- */

.patho-table {
    width: 100%;
    border-collapse: collapse;
}

.patho-table tr {
    border-bottom: 1px solid var(--border-color);
}

.patho-table tr:last-child {
    border-bottom: none;
}

.patho-table th,
.patho-table td {
    text-align: left;
    padding: 16px 14px 16px 0;
    vertical-align: top;
}

.patho-table th {
    width: 38%;
    font-family: 'Gotham', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--title-color);
    line-height: 1.4;
}

.patho-table td {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--txt-color);
    line-height: 1.65;
}

/* --- Colonne "Ce que permet l'expertise" — fond bleu ciel --- */

.patho-analyse-col--permet {
    background: var(--bg-section);
    border-radius: 12px;
    padding: 30px clamp(20px, 3vw, 32px);
}

.patho-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.patho-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--title-color);
    line-height: 1.5;
}

.patho-checklist svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--btn-color);
    margin-top: 1px;
}

/* --- Encart "Rapport clair, illustré et exploitable" — fond blanc --- */

.patho-report-note {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 22px;
}

.patho-report-note__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--title-color);
}

.patho-report-note__icon svg {
    width: 20px;
    height: 20px;
}

.patho-report-note p {
    font-size: 13.5px !important;
    color: var(--txt-color) !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.patho-report-note p strong {
    color: var(--title-color);
    font-weight: 700;
}

@media (max-width: 900px) {
    .patho-analyse-col--permet {
        padding: 26px 20px;
    }
}

@media (max-width: 900px) {
    .patho-analyse-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ============================================================
   DÉROULEMENT DE NOTRE MISSION D'EXPERTISE
   Reprend .section-process / .process-steps / .process-step
   (home.css) — même mise en forme que "Déroulement d'une
   visio-consultation CERTIS" sur page-visio-consultation.php
============================================================ */

.section-patho-process {
    padding-bottom: 64px;
}

/* home.css centre verticalement chaque colonne (align-items: center),
   ce qui décale les numéros dès que les textes des étapes n'ont pas
   la même hauteur. On aligne ici les numéros en haut pour qu'ils
   restent parfaitement alignés horizontalement. */
.section-patho-process .process-steps {
    align-items: flex-start;
}

.section-patho-process .step-arrow {
    margin-top: 11px;
}

/* ============================================================
   FAQ — reprend .section-faq / .faq-list standard (home.css)
   + fond bleu ciel (local.css : .section-faq { background:
   var(--bg-section); }), rappelé ici explicitement.
============================================================ */

.section-faq {
    background: var(--bg-section);
}

/* ============================================================
   BANNIÈRE CTA FINALE — fond navy
============================================================ */

.section-patho-cta {
    background: var(--title-color);
    padding: 36px 0;
}

.patho-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.patho-cta-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 260px;
}

.patho-cta-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.patho-cta-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.patho-cta-left p {
    margin: 0 !important;
    color: white;
}

.patho-cta-left strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.patho-cta-left span {
    font-size: 14px !important;
    color: rgba(255,255,255,0.75) !important;
    font-weight: 400 !important;
    line-height: 1.5;
}

.patho-cta-brand {
    display: block;
    margin-top: 6px;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--btn-color-hover);
    opacity: 1 !important;
}

.patho-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.patho-cta-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .patho-cta-inner { flex-direction: column; text-align: center; }
    .patho-cta-left { flex-direction: column; text-align: center; }
    .patho-cta-actions { justify-content: center; width: 100%; }
    .patho-cta-actions .btn-hero,
    .patho-cta-actions .btn-tel { flex: 1; justify-content: center; }
}

/* ============================================================
   BANDEAU STATS — 5 items, icône + texte
============================================================ */

.section-patho-stats {
    background: white;
    border-top: 1px solid var(--border-color);
    padding: 30px 0;
}

.patho-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.patho-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.patho-stat-item svg {
    width: 26px;
    height: 26px;
    color: var(--title-color);
}

.patho-stat-item span {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--title-color);
    text-transform: uppercase;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .patho-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
}

@media (max-width: 560px) {
    .patho-stats-grid { grid-template-columns: repeat(2, 1fr); }
}