/* ============================================================
   SPI L.A. Préventif - styles propres à la page Notice de pose
   (montage d'un batardeau).
   Le commun (en-tête, pied de page, boutons) est dans base.css
   ============================================================ */

/* Un bouton suit le chapô dans le bandeau de titre : on garde
   la respiration de 30px prévue par la maquette. */
.page-hero .lead { margin-bottom: 30px; }

/* La section qui suit le bandeau de titre est blanche : la vague
   doit l'être aussi pour que la jonction reste invisible. */
.hero-wave path { fill: var(--white); }

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

/* --- INTRO --- */
.mb-intro-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 55px; align-items: center; }
.mb-intro-text h2 { font-size: 2rem; margin-bottom: 18px; text-transform: uppercase; }
.mb-intro-text p { margin-bottom: 16px; }
.mb-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mb-chip { display: inline-flex; align-items: center; gap: 9px; background: var(--bg-light); border: 1px solid #e3e9f2; border-radius: 30px; padding: 9px 18px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.86rem; color: var(--primary); }
.mb-chip i { color: var(--secondary); }
.mb-intro-photo { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); max-width: 420px; justify-self: end; }
.mb-intro-photo img { width: 100%; height: auto; display: block; }

/* --- ENCADRÉS « AVANT DE COMMENCER » --- */
/* Orange : précaution importante */
.alert-box { display: flex; gap: 18px; background: #fdf1d6; border: 1px solid #f0d69a; border-radius: 12px; padding: 24px 26px; margin-top: 35px; }
.alert-box i { color: #b8860b; font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.alert-box h3 { color: #7a5206; font-size: 1.1rem; margin-bottom: 8px; }
.alert-box p { color: #7a5206; font-size: 0.95rem; margin: 0; }

/* Rouge : consigne impérative de la notice */
.alert-danger { display: flex; gap: 18px; background: #fdecec; border: 1px solid #f2bcbc; border-radius: 12px; padding: 24px 26px; margin-top: 35px; }
.alert-danger i { color: #c62828; font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.alert-danger h3 { color: #8e1b1b; font-size: 1.1rem; margin-bottom: 8px; }
.alert-danger p { color: #8e1b1b; font-size: 0.95rem; margin: 0; }

/* --- ÉTAPES DE MONTAGE --- */
.mb-steps { max-width: 920px; margin: 0 auto; }
.mb-step { display: grid; grid-template-columns: 300px 1fr; align-items: stretch; background: var(--white); border: 1px solid #e3e9f2; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(1, 66, 150, 0.08); margin-top: 32px; }
.mb-step-photo { position: relative; background: var(--bg-light); aspect-ratio: 3 / 4; }
.mb-step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-step-num { position: absolute; top: 14px; left: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--secondary); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.35rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.mb-step-body { padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; }
.mb-step-body h3 { font-size: 1.3rem; margin-bottom: 10px; }
.mb-step-body p { margin: 0; }
.mb-step-note { display: flex; align-items: flex-start; gap: 10px; background: #fdf1d6; border: 1px solid #f0d69a; border-radius: 10px; padding: 12px 15px; margin-top: 16px; font-size: 0.88rem; color: #7a5206; }
.mb-step-body .mb-step-note { margin-top: 16px; }
.mb-step-note i { color: #b8860b; margin-top: 2px; flex-shrink: 0; }

/* --- BATARDEAU INSTALLÉ --- */
.mb-done-card { display: grid; grid-template-columns: 320px 1fr; align-items: stretch; background: var(--white); border: 1px solid #e3e9f2; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); max-width: 920px; margin: 0 auto; }
.mb-done-photo { background: var(--bg-light); aspect-ratio: 3 / 4; }
.mb-done-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-done-body { padding: 36px 38px; }
.mb-done-body h2 { font-size: 1.6rem; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.mb-done-body h2 i { color: var(--secondary); }
.mb-done-body p { margin-bottom: 14px; }

/* --- ENTREPOSER & ENTRETENIR --- */
.mb-care-section { background: linear-gradient(135deg, var(--primary), #012f6b); color: var(--white); }
.mb-care-section .section-title { color: var(--white); }
.mb-care-section .section-subtitle { color: rgba(255, 255, 255, 0.85); }
.mb-care-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.mb-care-card { display: flex; gap: 16px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; padding: 24px 26px; backdrop-filter: blur(10px); }
.mb-care-card i { color: var(--secondary); font-size: 1.5rem; flex-shrink: 0; margin-top: 3px; }
.mb-care-card h3 { color: var(--white); font-size: 1.02rem; margin-bottom: 6px; }
.mb-care-card p { color: rgba(255, 255, 255, 0.9); font-size: 0.93rem; margin: 0; }
.mb-care-photo { border-radius: 16px; overflow: hidden; margin-top: 34px; border: 1px solid rgba(255, 255, 255, 0.22); }
.mb-care-photo img { width: 100%; height: auto; display: block; }
.mb-care-actions { text-align: center; margin-top: 38px; }

/* --- CTA --- */
.cta-banner { background-color: var(--secondary); padding: 70px 0; text-align: center; color: var(--white); }
.cta-banner h2 { color: var(--white); margin-bottom: 22px; font-size: 2.4rem; }
.cta-banner p { font-size: 1.12rem; margin-bottom: 35px; max-width: 780px; margin-left: auto; margin-right: auto; font-weight: 600; }
.cta-buttons { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* --- RESPONSIVE --- */
@media (max-width: 1120px) {
    .cta-banner h2 { font-size: 1.8rem; }
}
@media (max-width: 900px) {
    .mb-intro-grid { grid-template-columns: 1fr; gap: 36px; }
    .mb-intro-photo { justify-self: center; max-width: 380px; }
}
@media (max-width: 760px) {
    .mb-step, .mb-done-card { grid-template-columns: 1fr; }
    .mb-step-photo, .mb-done-photo { padding: 18px 18px 0; background: var(--white); aspect-ratio: auto; }
    .mb-step-photo img, .mb-done-photo img { width: auto; height: auto; max-width: 300px; max-height: 400px; object-fit: contain; margin: 0 auto; border-radius: 12px; box-shadow: 0 4px 14px rgba(1, 66, 150, 0.12); }
    .mb-step-num { top: 26px; left: 26px; width: 42px; height: 42px; font-size: 1.15rem; }
    .mb-step-body, .mb-done-body { padding: 22px 22px 26px; text-align: center; }
    .mb-step-note { text-align: left; }
    .mb-done-body h2 { justify-content: center; font-size: 1.35rem; }
    .mb-care-grid { grid-template-columns: 1fr; gap: 14px; }
}

@media print {
    .reveal { opacity: 1 !important; transform: none !important; }
    .mb-step, .mb-done-card { break-inside: avoid; }
}