/* /lexique/comment-ca-marche/ : étapes numérotées, points forts en coches, « À propos » en cartes. */

.cm-etapes { list-style: none; counter-reset: etape; padding: 0 !important; margin: 1.4rem 0 2.2rem; display: grid; gap: .7rem; }
.cm-etapes li { counter-increment: etape; position: relative; max-width: none; display: flex; flex-direction: column; justify-content: center; min-height: 3.4rem; padding: .8rem 1.1rem .8rem 4.4rem; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--r); font-weight: 500; }
.cm-etapes li::before { content: counter(etape); position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--marque); color: #fff; font: 600 1.2rem/1 var(--serif); }
/* Fil qui relie les étapes */
.cm-etapes li:not(:last-child)::after { content: ""; position: absolute; left: calc(.9rem + 1.2rem - 1px); top: calc(50% + 1.2rem); height: calc(100% - 2.4rem + .7rem + 2px); width: 2px; background: var(--bord); }
.cm-etapes li:last-child { background: var(--ciel); border-color: var(--ciel); }
.cm-etapes li:last-child::before { background: var(--client); }
.cm-etapes a { color: inherit; text-decoration: underline; text-decoration-color: var(--inscription); text-underline-offset: 3px; }
.cm-etapes a:hover { color: var(--lien); }
.cm-fin { display: block; margin-top: .2rem; color: var(--client); font-weight: 700; }

.cm-atouts { list-style: none; padding: 0 !important; margin: .8rem 0 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.2rem; }
.cm-atouts li { max-width: none; display: flex; gap: .6rem; align-items: flex-start; }
.cm-atouts li::first-letter { text-transform: uppercase; }
.cm-atouts li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: .2em; border-radius: 50%; background: var(--client) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }

.cm-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 0 0 1.6rem; }
.cm-deux section { padding: 1.2rem 1.4rem; border: 1px solid var(--bord); border-top: 3px solid var(--etoile); border-radius: var(--r); }
.cm-deux section:last-child { border-top-color: var(--inscription); }
.cm-deux h3 { margin-top: 0; }
.cm-deux p:last-child { margin-bottom: 0; }

.cm-apropos { list-style: none; padding: 0 !important; margin: .8rem 0 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.cm-apropos li { max-width: none; padding: 1rem 1.2rem; background: var(--fond); border-left: 3px solid var(--marque); border-radius: var(--r-sm); line-height: 1.6; }
.cm-apropos strong { display: block; margin-bottom: .25rem; font-family: var(--serif); color: var(--titre); font-size: 1.05rem; }

.cm-suivre { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bord); color: var(--doux); text-align: left !important; }
.cm-suivre a { margin-left: .6rem; font-weight: 600; }

@media (max-width: 640px) {
  .cm-atouts, .cm-deux, .cm-apropos { grid-template-columns: 1fr; }
  .cm-etapes li { padding-left: 3.9rem; }
}