/* Accueil : comment ca marche (onglets client / freelance + paiement protege) */
.hw2-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; align-items: center; }
.hw2-main { position: relative; }
.hw2-main .fh-h2 { margin-bottom: 1.1rem; }

/* Onglets sans JavaScript */
.hw2-radio { position: absolute; opacity: 0; pointer-events: none; }
.hw2-tabs { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 100%; margin-bottom: 1.4rem; padding: 4px; background: #ECE6DA; border-radius: 12px; }
.hw2-tabs label { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; margin: 0; padding: .5rem 1rem; border-radius: 9px; font-size: .9rem; font-weight: 600; color: #4A5550; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
#hw2-client:checked ~ .hw2-tabs label[for="hw2-client"],
#hw2-free:checked ~ .hw2-tabs label[for="hw2-free"] { background: #fff; color: var(--fy-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
#hw2-client:focus-visible ~ .hw2-tabs label[for="hw2-client"],
#hw2-free:focus-visible ~ .hw2-tabs label[for="hw2-free"] { outline: 3px solid var(--fy-emerald); outline-offset: 2px; }
.hw2-panel { display: none; }
#hw2-client:checked ~ .hw2-panel-client,
#hw2-free:checked ~ .hw2-panel-free { display: block; animation: hw2In .25s ease; }
@keyframes hw2In { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Etapes */
.hw2-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 1.1rem; }
.hw2-steps li { position: relative; display: flex; align-items: flex-start; gap: .9rem; }
.hw2-steps li:not(:last-child)::before { content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: -1.1rem; width: 2px; background: var(--fy-border); }
.hw2-num { position: relative; z-index: 1; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fy-ink); color: #fff; font-size: .9rem; font-weight: 700; }
.hw2-steps strong { display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; font-size: 1rem; color: var(--fy-ink); }
.hw2-steps strong i { color: var(--fy-emerald); }
.hw2-steps p { margin: 0; color: #5E6762; font-size: .9rem; line-height: 1.55; }
.hw2-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; }

/* Carte paiement protege */
.hw2-escrow { padding: 1.6rem; border-radius: 20px; background: var(--fy-ink); color: #fff; box-shadow: 0 20px 40px rgba(28, 43, 36, .18); }
.hw2-escrow-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.3rem; }
.hw2-escrow-head > i { font-size: 1.8rem; color: #7FD8C4; }
.hw2-escrow-head strong { display: block; font-size: 1.05rem; }
.hw2-escrow-head span { font-size: .86rem; opacity: .8; }
.hw2-flow { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .6rem; }
.hw2-flow li { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: 12px; background: rgba(255, 255, 255, .07); font-size: .9rem; }
.hw2-flow li:last-child { background: rgba(127, 216, 196, .16); }
.hw2-flow li i { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(127, 216, 196, .16); color: #7FD8C4; }
.hw2-pay { display: flex; flex-wrap: wrap; gap: .4rem; }
.hw2-pay span { padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .78rem; font-weight: 600; }

/* Responsive */
@media (max-width: 991px) { .hw2-grid { grid-template-columns: 1fr; gap: 1.8rem; } }
@media (max-width: 575px) {
    .hw2-tabs { display: grid; width: 100%; }
    .hw2-tabs label { padding: .5rem; font-size: .8rem; white-space: normal; text-align: center; }
    .hw2-escrow { padding: 1.2rem; border-radius: 16px; }
    .hw2-foot .fy-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { #hw2-client:checked ~ .hw2-panel-client, #hw2-free:checked ~ .hw2-panel-free { animation: none; } }