/* Styles propres à form.jeandon.fr (le style commun est dans atelier.css : ne pas le modifier ici).
   Ce fichier est aussi chargé par l'appli (app.html) : ce qui est propre à la vitrine est rangé sous
   body.vitrine, .hx, #tour, .bento ou des classes fm-/fa-/fs-. */

/* Logo B « les champs » : petit trait de la couleur du site dans le premier champ */
.lg-acc{fill:var(--accent)}

/* ---------- Tout droit (Johan : « des blocs de travers qui se superposent ») ----------
   Le kit penche étiquettes, aperçus, autocollants, ruban et morceaux de scotch : ici tout est redressé. */
.vitrine :is(.eyebrow,.kicker,.rib,.pc,.pc .tp,.stk,.s3 .n,.e404-epreuve,.e404-tampon),
.vitrine :is(.tape,.foot-card,.nav-in)::before,.vitrine .tape2::after{transform:none}

/* =================== Accueil : les aperçus, rangés en grille =================== */
.hx .stage.fm-stage{height:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  grid-template-areas:"a b" "a s" "c c";gap:24px;align-items:start;padding:14px 10px 10px 0}
.hx .fm-stage .pc{position:relative;inset:auto;width:auto;height:auto;transform:none;animation:none}
.hx .fm-stage .fm-a{grid-area:a}
.hx .fm-stage .fm-b{grid-area:b}
.hx .fm-stage .fm-c{grid-area:c}
.hx .fm-stage .fm-stk{grid-area:s;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hx .fm-stage .stk{position:relative;inset:auto;transform:none;animation:none}

/* 1. le formulaire tel que les gens le voient (toutes les questions d'un coup) */
.hx .fm-stage .fm-a{padding:22px 18px 18px 46px;overflow:visible}
.fa-h b{display:block;font:850 26px/1 var(--display);font-stretch:74%;text-transform:uppercase}
.fa-h small{display:block;margin-top:6px;font:600 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fq{position:relative;margin-top:12px;padding:10px 12px 12px;border:1.5px solid var(--edge);border-radius:12px;background:var(--card);box-shadow:3px 3px 0 var(--sheet)}
.fq-t{display:flex;align-items:center;gap:8px;font:750 14px/1.2 var(--sans)}
.fq-t em{margin-left:auto;font:600 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--orange);font-style:normal}
.fq-n{position:absolute;left:-38px;top:8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--orange);color:var(--orange);background:var(--card);font:800 11px/1 var(--mono)}
.fo,.fc{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.fo span,.fc span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--card);font:650 12px/1 var(--sans);color:var(--ink)}
.fo span::before,.fc span::before{content:'';flex:none;display:grid;place-items:center;width:12px;height:12px;box-sizing:border-box;border:1.5px solid var(--ink-3);border-radius:50%}
.fc span::before{border-radius:3px}
.fo .on,.fc .on{background:var(--accent);border-color:var(--accent);color:#fff}
.fo .on::before{border:3px solid #fff;background:var(--accent)}
.fc .on::before{content:'✓';border-color:#fff;background:#fff;color:var(--accent);font:900 9px/1 var(--sans)}
.fn{display:inline-flex;align-items:center;margin-top:9px;border:1.5px solid var(--edge);border-radius:10px;overflow:hidden}
.fn span{width:34px;height:30px;display:grid;place-items:center;background:var(--card-2);font:700 16px/1 var(--sans)}
.fn b{min-width:46px;text-align:center;border-inline:1.5px solid var(--edge);font:850 20px/30px var(--display);font-stretch:74%}
.fa-b{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.fa-save{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fa-save i{width:8px;height:8px;border-radius:50%;background:#41cf8f}
.fa-go{padding:9px 16px;border:2px solid #17161c;border-radius:10px;background:var(--yellow);color:#17161c;box-shadow:3px 3px 0 var(--orange);font:850 13px/1 var(--display);font-stretch:84%;letter-spacing:.05em;text-transform:uppercase}

/* 2. les réponses en direct (tableau sombre) */
.hx .fm-stage .fm-b{padding:16px 16px 18px}
.fm-b .clk{margin:16px 0 8px;text-align:left;font-size:72px}
.fbar{display:grid;grid-template-columns:62px minmax(0,1fr) 36px;align-items:center;gap:8px;margin-top:10px;font:600 11px/1 var(--sans);color:#f2ecde}
.fbar u{position:relative;height:9px;border-radius:9px;background:rgba(242,236,222,.12);overflow:hidden;text-decoration:none}
.fbar u::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--h,0);border-radius:9px;background:var(--yellow);animation:fm-grow 1.4s .4s var(--ease) both}
.fbar.f2 u::after{background:var(--accent-l)}
.fbar.f3 u::after{background:var(--orange)}
.fbar.g u::after{background:#41cf8f}
.fbar b{text-align:right;font:700 11px/1 var(--mono);color:#f2ecde}
@keyframes fm-grow{from{width:0}}
.fb-new{display:flex;align-items:center;gap:7px;margin-top:16px;padding:9px 10px;border-radius:10px;background:#1c1b22;border:1.5px solid rgba(242,236,222,.18);font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#bab3a5}
.fb-new i{width:7px;height:7px;border-radius:50%;background:#41cf8f;animation:pls 1.2s ease-in-out infinite}

/* 3. partager : lien, boutons, QR code */
.fs{display:flex;align-items:center;gap:16px;padding:14px;background:var(--bg)}
.fs-l{flex:1;min-width:0}
.fs-link{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 12px;border:1.5px solid var(--edge);border-radius:10px;background:var(--card)}
.fs-link code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px/1 var(--mono);color:var(--ink-2)}
.fs-link code b{color:var(--accent);font-weight:700}
html[data-theme="dark"] .fs-link code b{color:var(--accent-l)}
.fs-link span{flex:none;padding:8px 10px;border:1.5px solid #17161c;border-radius:7px;background:var(--yellow);color:#17161c;font:800 11px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.fs-btns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.fs-btns span{padding:9px 4px;border:1.5px solid var(--line-2);border-radius:9px;background:var(--card);text-align:center;font:650 11px/1 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-qr{flex:none;display:block;width:96px;height:96px;border:1.5px solid var(--edge);border-radius:8px}

/* =================== La visite : 3 écrans (Créer, Partager, Réponses) =================== */
/* Créer : sortes de questions | l'éditeur | réglages */
.tyl{display:flex;flex-direction:column;gap:6px}
.tyl span{display:flex;align-items:center;gap:6px;padding:5px 6px;border:1.5px solid var(--line-2);border-radius:8px;background:var(--card-2);font:650 10.5px/1.1 var(--sans);white-space:nowrap;overflow:hidden}
.tyl i{flex:none;width:22px;text-align:center;font:700 9px/1 var(--mono);font-style:normal;color:var(--accent)}
html[data-theme="dark"] .tyl i{color:var(--accent-l)}
.tyl small{padding:2px 6px;font:600 9px/1 var(--mono);color:var(--ink-2)}
.fe{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:9px;padding:0 6px 6px 0}
.fe-h{padding:11px 14px;border:1.5px solid var(--edge);border-top:6px solid var(--accent);border-radius:12px;background:var(--card);box-shadow:4px 4px 0 var(--sheet)}
.fe-h b{display:block;font:850 20px/1 var(--display);font-stretch:74%;text-transform:uppercase}
.fe-h small{font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.qc{padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--card)}
.qc.on{border:2px solid var(--accent);box-shadow:4px 4px 0 rgba(var(--accent-rgb),.25)}
.qc p{display:flex;align-items:center;gap:8px;margin:0;font:750 13px/1.2 var(--sans)}
.qc p span{font:700 9.5px/1 var(--mono);color:var(--ink-3)}
.qc small{display:block;margin-top:4px;font:600 9px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.qo{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.qo i{display:flex;align-items:center;gap:7px;padding:6px 8px;border:1.5px solid var(--line-2);border-radius:8px;background:var(--card-2);font:600 11px/1 var(--sans);font-style:normal}
.qo i::before{content:'';flex:none;width:10px;height:10px;box-sizing:border-box;border:1.5px solid var(--ink-3);border-radius:50%}
.qo em{margin-left:auto;padding:3px 6px;border-radius:5px;background:rgba(var(--accent-rgb),.14);color:var(--accent);font:700 9px/1 var(--mono);font-style:normal}
html[data-theme="dark"] .qo em{color:var(--accent-l)}
.tg{display:flex;flex-direction:column;gap:9px}
.tg span{display:flex;align-items:center;justify-content:space-between;gap:8px;font:650 11px/1.2 var(--sans)}
.tg i{flex:none;position:relative;width:28px;height:16px;border-radius:9px;background:var(--line-2)}
.tg i::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .2s}
.tg .on i{background:var(--accent)}
.tg .on i::after{left:14px}
/* Partager : lien + réglages | QR code */
.s-p{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.sp-l{display:flex;flex-direction:column;gap:14px;min-height:0}
.sp-qr{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px}
.sp-qr .fs-qr{width:100%;max-width:170px;height:auto;aspect-ratio:1}
.sp-qr small{font:600 9.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.sp-cl p{display:flex;align-items:baseline;gap:6px;margin:0;font:650 11px/1.2 var(--sans)}
.sp-cl b{font:850 26px/1 var(--display);font-stretch:70%}
.sp-cl small{margin-left:auto;font:600 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sp-jg{height:9px;margin-top:8px;border-radius:9px;background:var(--line);overflow:hidden}
.sp-jg i{display:block;width:68%;height:100%;border-radius:9px;background:var(--accent)}
/* Réponses : chiffres + réponses par jour | résumé en barres */
.s-b{align-items:start}
.s-b .res{margin-top:12px}
.rq{min-height:0;overflow:hidden;padding:12px 14px;border:1.5px solid rgba(242,236,222,.18);border-radius:12px;background:#1c1b22}
.rq>b{display:block;font:850 14px/1 var(--display);font-stretch:80%;text-transform:uppercase;color:#f2ecde}
.rq>b:not(:first-child){margin-top:14px}
.rq .fbar{margin-top:7px}
.rx{display:flex;gap:6px;margin-top:14px}
.rx span{flex:1;padding:7px 4px;border:1.5px solid rgba(242,236,222,.3);border-radius:7px;text-align:center;font:700 10px/1 var(--mono);letter-spacing:.06em;color:#f2ecde}

/* Page Confidentialité : petits titres */
.legal h3{margin:24px 0 6px;font:850 19px/1.1 var(--display);font-stretch:82%;text-transform:uppercase;color:var(--accent)}
html[data-theme="dark"] .legal h3{color:var(--accent-l)}

/* Bento */
.fm-acc{color:var(--accent)}
.bx-art .fm-code{font-family:var(--mono);font-weight:700;letter-spacing:.18em;color:var(--yellow)}

/* =================== Tablette et téléphone =================== */
@media(max-width:1020px){
  .hx .stage.fm-stage{margin-top:20px}
}
@media(max-width:640px){
  /* téléphone : titre, texte et boutons d'abord (l'action visible sans descendre), puis les aperçus */
  .hx .wrap .lead{order:3}
  .hx .wrap .cta{order:4}
  .hx .stage.fm-stage{order:5;margin:8px 0 0;grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "b";gap:22px;padding:12px 8px 8px 0}
  .hx .wrap .proof{order:6}
  .hx .fm-stage :is(.fm-c,.fm-stk){display:none}
  .hx .fm-stage .fm-a{padding:20px 14px 16px 42px}
  .fq-n{left:-35px}
  .fm-b .clk{font-size:58px;margin-top:12px}
  .fbar{grid-template-columns:70px minmax(0,1fr) 40px}
  .s-p{grid-template-columns:minmax(0,1fr)}
  .sp-qr{flex-direction:row;justify-content:center;padding:10px}
  .sp-qr .fs-qr{width:96px;max-width:96px}
  .sp-qr small{max-width:150px;text-align:left}
  .sp-cl{display:none}
  .s-b>div:first-child :is(.tvx,.bars){display:none}
  .fs-btns span{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){.fbar u::after,.fb-new i{animation:none!important}}