/* RM Webstudios : blocs communs aux freebies (preuves, listes, signature) */

.fw-list { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 8px; }
.fw-list li { display: flex; gap: 10px; align-items: flex-start; }
.fw-list svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--accent); }

/* Liste qui se coche toute seule */
.fw-autolist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fw-autolist li { display: flex; gap: 14px; align-items: center; font-weight: 700; opacity: .45; transition: opacity .4s; }
.fw-autolist li.is-on { opacity: 1; }
.fw-autolist-dot {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--chip-line); display: grid; place-items: center;
  transition: background-color .3s, border-color .3s;
}
.fw-autolist-dot svg { width: 14px; height: 14px; color: #fff; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s var(--ease) .1s; }
.fw-autolist li.is-on .fw-autolist-dot { background: var(--green); border-color: var(--green); }
.fw-autolist li.is-on .fw-autolist-dot svg { stroke-dashoffset: 0; }

/* Chiffres clés de l'accueil */
.fw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 28px 0; }
.fw-stat { border: 1px solid var(--line); border-radius: 20px; padding: 16px 12px; }
.fw-stat b { display: block; font: 400 24px/1.1 var(--font-title); color: var(--accent); }
.fw-stat span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.3; }
@media (min-width: 600px) { .fw-stat b { font-size: 30px; } }
.fw-by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 13px; color: var(--muted); }

/* Preuves */
.fw-trust { margin-top: 44px; }
.fw-rating { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.fw-avis {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter);
  scroll-padding: 0 var(--gutter); scrollbar-width: none;
}
.fw-avis::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .fw-avis { grid-auto-flow: row; grid-template-columns: 1fr; margin: 0; padding: 0; overflow: visible; } }
.fw-avis figure { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.fw-avis blockquote { margin: 0; font-size: 15px; }
.fw-avis figcaption { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.fw-avis .fw-stars svg { width: 14px; height: 14px; }
.fw-real { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fw-real a { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.fw-real b { font: 400 20px/1.1 var(--font-title); }
.fw-real span { flex: 1; color: var(--muted); font-size: 14px; text-align: right; }
.fw-real svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.fw-sign { margin: 26px 0 0; font-size: 13px; color: var(--muted); }

/* Bloc d'appel à l'action final */
.fw-cta-tile { margin-top: 28px; }
.fw-cta-tile .fw-cta { display: grid; gap: 10px; margin-top: 22px; }
.fw-cta-name { margin: 0; font: 400 32px/1.1 var(--font-title); }
@media (min-width: 900px) { .fw-cta-name { font-size: 48px; } }
.fw-cta-foot { margin: 18px 0 0; }
.fw-nowrap { white-space: nowrap; }

/* Frise d'étapes à toucher */
.fw-steps { list-style: none; margin: 24px 0 0; padding: 0; position: relative; }
.fw-steps::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--line); }
.fw-steps-fill { position: absolute; left: 19px; top: 20px; width: 2px; height: 0; background: var(--accent); transition: height .5s var(--ease); }
.fw-step { position: relative; display: flex; gap: 16px; padding: 0 0 18px; }
.fw-step-n {
  width: 40px; height: 40px; flex: none; border-radius: 50%; position: relative; z-index: 1;
  display: grid; place-items: center; font: 400 18px var(--font-title);
  background: var(--bg); border: 1.5px solid var(--chip-line); color: var(--fg);
  transition: background-color .3s, border-color .3s, color .3s;
}
.fw-step.is-on .fw-step-n { background: var(--green); border-color: var(--green); color: #fff; }
.fw-step-body { flex: 1; text-align: left; background: none; border: 0; padding: 8px 0 0; }
.fw-step-body b { display: block; font-size: 17px; }
.fw-step-body small { display: block; color: var(--muted); font-size: 15px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s, margin .3s; }
.fw-step.is-on .fw-step-body small { max-height: 120px; opacity: 1; margin-top: 4px; }
.fw-step-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }

.fw-list a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fw-tile--green .fw-list a { color: #fff; }