/* Workbook « Lancer votre entreprise en ligne » : composants propres à ce freebie */

/* ---------- Accueil ---------- */
.wb-hero { padding-top: 10px; }
.wb-hero .fw-h1 { margin-top: 26px; }
.wb-toc { list-style: none; margin: 30px 0 30px; padding: 0; border-top: 1px solid var(--line); }
.wb-toc-item { display: flex; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.wb-toc-num { font: 400 26px/1 var(--font-title); color: var(--accent); width: 40px; flex: none; }
.wb-toc-item b { display: block; }
.wb-toc-item small { display: block; color: var(--muted); font-size: 14px; }
.wb-by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Grille secteurs : état choisi ---------- */
.fw-grid .fw-option[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.fw-grid .fw-option[aria-pressed="true"] svg.fw-ico { color: #fff; }

/* ---------- Persona ---------- */
.wb-persona { display: flex; gap: 18px; align-items: center; margin-top: 24px; padding: 24px; }
.wb-persona .fw-kicker { margin-bottom: 6px; }
.wb-avatar { width: 64px; height: 64px; flex: none; color: var(--muted-dark); transition: color .4s; }
.wb-persona.is-complete .wb-avatar { color: var(--green-l); }
.wb-persona-txt { margin: 0; font: 400 21px/1.2 var(--font-title); }
.wb-gap { display: inline-block; min-width: 2.2em; border-bottom: 2px dashed rgba(255,255,255,.35); color: transparent; }
.wb-persona.is-bump { animation: wb-bump .35s var(--ease); }
@keyframes wb-bump { 50% { transform: scale(1.015); } }
.wb-av-head, .wb-av-body { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1s var(--ease); }
.wb-persona.is-complete .wb-av-head, .wb-persona.is-complete .wb-av-body { stroke-dashoffset: 0; }

/* ---------- Partie 2 : constellation ---------- */
.wb-hub { width: 100%; max-width: 460px; margin: 0 auto; overflow: visible; }
.wb-hub-line { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; transition: stroke .4s; }
.wb-hub-line.is-on { stroke: var(--green-l); stroke-dasharray: 160; stroke-dashoffset: 160; animation: wb-draw .7s var(--ease) forwards; }
@keyframes wb-draw { to { stroke-dashoffset: 0; } }
.wb-hub-node circle { fill: var(--dark); stroke: var(--muted-dark); stroke-width: 1.5; transition: fill .3s, stroke .3s, r .3s; }
.wb-hub-node.is-on circle { fill: var(--green-l); stroke: var(--green-l); r: 9; }
.wb-hub-node text { font: 700 11px var(--font-text); fill: var(--muted-dark); transition: fill .3s; }
.wb-hub-node.is-on text { fill: #fff; }
.wb-hub-core { fill: var(--tile-dark); stroke: var(--line); stroke-width: 1.5; transition: fill .5s, stroke .5s; }
.wb-hub-halo { fill: none; stroke: var(--green-l); stroke-width: 1.5; opacity: 0; transform-origin: 170px 118px; }
.wb-hub.has-on .wb-hub-core { fill: var(--green); stroke: var(--green); }
.wb-hub.has-on .wb-hub-halo { animation: wb-halo 2.2s infinite; }
@keyframes wb-halo { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.wb-hub-center text { font: 400 17px var(--font-title); fill: #fff; }
.wb-canaux { margin-top: 18px; }

/* ---------- Partie 2 : temps et tâches ---------- */
.wb-hint { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.wb-hours { margin-top: 26px; }
.wb-hours .fw-kicker { margin-bottom: 6px; }
.wb-hours-num { margin: 0; font: 400 44px/1.1 var(--font-title); }
.wb-hours-sub { margin: 6px 0 0; }
.wb-zone { border-radius: var(--radius-tile); padding: 20px; border: 1.5px dashed var(--line); }
.wb-zone + .wb-zone { margin-top: 12px; }
.wb-zone--site { border-style: solid; border-color: var(--green); background: rgba(75, 109, 20, .12); }
.wb-zone-title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font: 700 11px/1.4 var(--font-text); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.wb-zone--site .wb-zone-title { color: var(--accent); }
.wb-zone.is-empty .wb-zone-list::after { content: "Tout est confié à votre site."; font-size: 14px; color: var(--muted); }
.wb-zone-empty { margin: 0; }
.wb-zone-empty[hidden] { display: none; }
.wb-zone-list .fw-chip { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.wb-chip-ico svg { width: 14px; height: 14px; }
.fw-chip.is-leaving { transform: scale(.85); opacity: 0; transition: transform .17s, opacity .17s; }
.fw-chip.is-arriving { animation: wb-pop .4s var(--ease); }
@keyframes wb-pop { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.05); opacity: 1; } 100% { transform: none; } }

/* ---------- Aperçu du futur site ---------- */
.wb-pv {
  background: var(--beige); color: var(--dark);
  border-radius: 22px; padding: 12px; max-width: 360px;
  border: 1px solid rgba(26,26,26,.12);
}
.wb-pv-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.wb-pv-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(26,26,26,.2); }
.wb-pv-bar span { margin-left: auto; font: 700 10px var(--font-text); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-beige); }
.wb-pv-nav { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; }
.wb-pv-nav b { font: 400 16px var(--font-title); }
.wb-pv-burger { display: grid; gap: 4px; }
.wb-pv-burger i { width: 18px; height: 2px; background: var(--dark); border-radius: 2px; }
.wb-pv-hero { background: var(--dark); color: #fff; border-radius: 16px; padding: 20px 16px; }
.wb-pv-title { margin: 0 0 14px; font: 400 20px/1.15 var(--font-title); }
.wb-pv-btn { display: inline-block; background: var(--green-l); color: var(--dark); font: 700 12px var(--font-text); padding: 9px 16px; border-radius: 40px; }
.wb-pv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wb-pv-tags span { font: 700 11px var(--font-text); padding: 6px 11px; border-radius: 40px; background: #fff; border: 1px solid rgba(26,26,26,.1); }
.wb-pv-avis { display: flex; align-items: center; gap: 2px; margin: 10px 4px 2px; color: var(--star); }
.wb-pv-avis svg { width: 13px; height: 13px; }
.wb-pv-avis span { margin-left: 6px; font: 700 11px var(--font-text); color: var(--dark); }
.wb-pv .is-new { animation: wb-pop .5s var(--ease); }
.wb-pv-note { margin: 10px 0 0; }

/* ---------- Partie 3 : jauge et offerts ---------- */
.wb-gauge-tile {
  display: flex; align-items: center; gap: 20px; margin-top: 24px; padding: 20px 24px;
  position: sticky; top: calc(var(--header-h) + 6px); z-index: 5;
}
.wb-gauge-tile .fw-gauge { width: 84px; height: 84px; }
.wb-gauge-tile .fw-gauge-val { font-size: 22px; }
.wb-gauge-tile .fw-kicker { margin-bottom: 4px; }
.wb-gauge-txt { margin: 0; font: 400 20px/1.2 var(--font-title); }
.wb-offered { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--green); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s var(--ease); }
.is-gifted .wb-offered { opacity: 1; transform: none; }
.fw-option[data-offered] { cursor: default; }
.fw-option.is-gifted { border-color: var(--green); }

/* ---------- Partie 4 : balance et cartes ---------- */
.wb-balance { width: 100%; max-width: 380px; margin: 0 auto; overflow: visible; }
.wb-bal-foot { fill: var(--tile-dark); stroke: var(--line); }
.wb-bal-beam line { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.wb-bal-beam circle { fill: var(--green-l); }
.wb-bal-pan line { stroke: var(--muted-dark); stroke-width: 1.2; }
.wb-bal-pan path { fill: var(--green); }
.wb-balance text { font: 700 12px var(--font-text); fill: var(--muted-dark); }
.wb-deck { margin-top: 18px; min-height: 300px; }
.wb-card {
  background: var(--beige); color: var(--dark);
  border-radius: var(--radius-tile); padding: 30px;
  min-height: 170px; display: flex; flex-direction: column; justify-content: space-between;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab;
  position: relative; transition: box-shadow .2s;
}
.wb-card.is-in { animation: wb-card-in .45s var(--ease); }
@keyframes wb-card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.wb-card-count { margin: 0; font: 700 11px var(--font-text); letter-spacing: 1.6px; text-transform: uppercase; color: var(--green); }
.wb-card-q { margin: 12px 0 18px; font: 400 26px/1.15 var(--font-title); }
.wb-card-hint { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted-beige); font-size: 13px; font-weight: 700; }
.wb-card-hint svg { width: 16px; height: 16px; }
.wb-card.lean-a { box-shadow: -6px 0 0 var(--green-l); }
.wb-card.lean-b { box-shadow: 6px 0 0 var(--green-l); }
.wb-answers { display: grid; gap: 10px; margin-top: 12px; }
.wb-ans { min-height: 58px; }
.wb-ans:nth-child(2) { text-align: right; }
.wb-ans-ico svg { width: 18px; height: 18px; color: var(--accent); }
.wb-prev-card { margin-top: 10px; color: var(--muted); }
.wb-result { background: var(--green); color: #fff; border-radius: var(--radius-tile); padding: 30px; animation: wb-card-in .5s var(--ease); --muted: rgba(255,255,255,.85); }
.wb-result .fw-kicker { color: #fff; opacity: .85; }
.wb-result-name { margin: 0 0 10px; font: 400 34px/1.1 var(--font-title); }
.wb-result .fw-small { color: rgba(255,255,255,.88); font-size: 15px; }
.wb-result .fw-link { color: #fff; margin-top: 8px; }

/* ---------- Plan final ---------- */
.wb-plan .fw-h2 { max-width: 16em; }
.wb-plan-grid { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 700px) { .wb-plan-grid { grid-template-columns: 1fr 1fr; } }
.wb-plan-grid .fw-tile p { margin: 0 0 8px; }
.wb-plan-grid .fw-tile .fw-kicker { margin-bottom: 12px; }
.wb-plan-big { font: 400 22px/1.2 var(--font-title); }
.wb-list { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 8px; }
.wb-list li { display: flex; gap: 10px; align-items: flex-start; }
.wb-list svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--accent); }
.wb-reco { margin-top: 28px; }
.wb-reco-name { margin: 0; font: 400 32px/1.1 var(--font-title); }
@media (min-width: 900px) { .wb-reco-name { font-size: 48px; } }
.wb-reco-price { margin: 12px 0; font-size: 28px; }
.wb-reco-desc { color: var(--muted-dark); margin: 0 0 16px; }
.wb-cta { display: grid; gap: 10px; margin-top: 22px; }
.wb-reco-foot { margin: 18px 0 0; }
.wb-mail { margin-top: 22px; display: grid; gap: 12px; }
.wb-mail[hidden] { display: none; }
.wb-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--muted-dark); }
.wb-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--green-l); }
.wb-mail-err { margin: 0; min-height: 1em; color: #F0997B; font-size: 14px; font-weight: 700; }
.wb-mail-ok { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-weight: 700; }
.wb-mail-ok svg { width: 20px; height: 20px; flex: none; color: var(--green-l); }
.wb-trust { margin-top: 44px; }
.wb-rating { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.wb-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;
}
.wb-avis::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .wb-avis { grid-auto-flow: row; grid-template-columns: 1fr; margin: 0; padding: 0; overflow: visible; } }
.wb-avis figure { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.wb-avis blockquote { margin: 0; font-size: 15px; }
.wb-avis figcaption { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.wb-avis .fw-stars svg { width: 14px; height: 14px; }
.wb-real { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wb-real a { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.wb-real b { font: 400 20px/1.1 var(--font-title); }
.wb-real span { flex: 1; color: var(--muted); font-size: 14px; text-align: right; }
.wb-real svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.wb-tools { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 36px; }
.wb-sign { margin: 26px 0 0; font-size: 13px; color: var(--muted); }

@media print {
  .wb-plan-grid { grid-template-columns: 1fr 1fr; }
  .wb-avis { grid-auto-flow: row; overflow: visible; margin: 0; padding: 0; }
  .wb-real a span, .wb-real svg { display: none; }
  .wb-reco-desc { color: #4D4D4D; }
}
.wb-nowrap { white-space: nowrap; }
@media (min-width: 900px) { .fw-screen[data-step="plan"] { max-width: 920px; } }