/* ═══════════════════════════════════════════════════════════════
   COMMENT-CA-MARCHE.CSS
   ═══════════════════════════════════════════════════════════════ */

.page-hero{padding:44px 0 10px;text-align:center;}
.page-hero h1{font-size:28px;margin-bottom:10px;}
.page-hero p{font-size:14px;color:var(--ink-muted);max-width:520px;margin:0 auto;line-height:1.6;}

.ccm-banniere{position:relative;height:220px;border-radius:20px;overflow:hidden;margin:30px 0;background:var(--teal-100);display:flex;align-items:center;justify-content:center;}
.ccm-banniere img{width:100%;height:100%;object-fit:cover;display:none;}
.ccm-banniere .vide-msg{color:var(--ink-faint);opacity:.5;font-size:44px;}

.etapes{display:flex;flex-direction:column;gap:0;margin:40px 0;max-width:640px;margin-left:auto;margin-right:auto;}
.etape{display:flex;gap:20px;position:relative;padding-bottom:34px;}
.etape:last-child{padding-bottom:0;}
.etape-ligne{position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--border);}
.etape:last-child .etape-ligne{display:none;}
.etape-numero{width:48px;height:48px;border-radius:50%;background:var(--teal-700);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;flex-shrink:0;z-index:1;}
.etape-corps{padding-top:6px;}
.etape-titre{font-size:15.5px;font-weight:600;margin-bottom:5px;}
.etape-texte{font-size:13px;color:var(--ink-muted);line-height:1.6;max-width:460px;}

.statuts-section{background:var(--teal-100);border-radius:16px;padding:32px;margin:40px 0;}
.statuts-section h2{font-size:19px;margin-bottom:8px;}
.statuts-section .sub{font-size:13px;color:var(--ink-muted);margin-bottom:22px;}
.statuts-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.statut-carte{background:var(--surface);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.statut-carte i{font-size:20px;color:var(--teal-700);flex-shrink:0;}
.statut-carte-titre{font-size:13px;font-weight:600;}
.statut-carte-texte{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}

.faq-section{margin:40px 0;}
.faq-section h2{font-size:19px;margin-bottom:18px;}
.faq-item{border-bottom:1px solid var(--border);padding:16px 0;}
.faq-question{font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.faq-question i{color:var(--ink-faint);transition:transform .2s;}
.faq-item.open .faq-question i{transform:rotate(180deg);}
.faq-reponse{font-size:13px;color:var(--ink-muted);line-height:1.6;max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-reponse{max-height:200px;padding-top:10px;}

.cta-final{text-align:center;background:var(--teal-700);border-radius:24px;padding:48px 32px;margin:56px 0;}
.cta-final h2{color:#fff;font-size:22px;margin-bottom:8px;}
.cta-final p{color:#A8A8AA;font-size:13.5px;margin-bottom:22px;}
.cta-final .primary-btn{max-width:240px;margin:0 auto;background:#fff;color:var(--ink);}
.cta-final .primary-btn:hover{background:var(--teal-100);}

@media (max-width:600px){
  .etape{gap:14px;}
  .etape-numero{width:40px;height:40px;font-size:15px;}
  .etape-ligne{left:19px;}
}