/* apps.boum.it/odoo-wa-bridge/… — sous-pages de WA Bridge (aide, guide, avis, désinstallation, paiement).
   S'ajoute à common.css et apps.css : mêmes couleurs, mêmes polices, mêmes cartes. */

/* ── En-tête de page (plus court que le hero de la page de vente) ── */
.page-hero{position:relative;z-index:1;padding:10rem 5vw 4rem;max-width:1200px;margin:0 auto}
.page-hero.center{text-align:center}
.page-hero .hero-eyebrow{margin-bottom:1.5rem}
.page-hero .hero-title{font-size:clamp(2.2rem,5.4vw,4.4rem);margin-bottom:1.5rem}
.page-hero .hero-sub{margin-bottom:0}
.page-hero.center .hero-sub{margin-inline:auto}
@media(max-width:480px){.page-hero{padding:7.5rem 1.25rem 3rem}}

/* ── Raccourcis (aide) : cartes cliquables ── */
a.card{text-decoration:none;color:inherit}
a.card .card-desc{flex:1}
.card-go{margin-top:1.5rem;font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold)}
.card-go .arrow{display:inline-block;transition:transform 0.3s}
a.card:hover .card-go .arrow{transform:translateX(5px)}
[dir="rtl"] .card-go .arrow{transform:scaleX(-1)}
[dir="rtl"] a.card:hover .card-go .arrow{transform:scaleX(-1) translateX(5px)}
.cards.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.cards.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards.four{grid-template-columns:1fr}}

/* ── Guide : étapes numérotées ── */
.guide{list-style:none;counter-reset:g;border-top:1px solid var(--border)}
.guide li{counter-increment:g;display:grid;grid-template-columns:4rem 1fr;gap:0 1.5rem;padding:2.25rem 0;border-bottom:1px solid var(--border)}
.guide li::before{content:counter(g,decimal-leading-zero);font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:600;color:var(--gold);line-height:1.2}
.guide h2{font-family:'Syne',sans-serif;font-size:1.35rem;font-weight:600;line-height:1.25;margin-bottom:0.6rem}
.guide p{font-size:0.95rem;line-height:1.8;color:var(--text-muted);max-width:680px}
.guide p a{color:var(--gold);text-underline-offset:3px}
@media(max-width:480px){.guide li{grid-template-columns:2.75rem 1fr;gap:0 1rem;padding:1.75rem 0}.guide li::before{font-size:1.25rem}}

/* ── Questionnaire (avis, désinstallation) : un écran à la fois, réponse en un clic ── */
.fb{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:7rem 5vw 3rem}
.fb-top{display:grid;grid-template-columns:minmax(4.5rem,auto) 1fr minmax(4.5rem,auto);align-items:center;gap:1rem;width:100%;max-width:760px;margin:0 auto}
.fb-back{justify-self:start;background:none;border:none;font:inherit;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-faint);cursor:pointer;padding:0.6rem 0;min-height:44px}
.fb-back:hover{color:var(--gold)}
.fb-back::before{content:'← '}
[dir="rtl"] .fb-back::before{content:'→ '}
.fb-bar{height:2px;background:var(--border);position:relative;overflow:hidden}
.fb-bar span{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--gold);transition:width 0.5s cubic-bezier(0.2,0.9,0.3,1.2)}
.fb-step{justify-self:end;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.fb-main{flex:1;display:grid;place-items:center;padding:2rem 0}
.fb-screen{width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:1.75rem;text-align:center}
.fb-screen.enter{animation:fbIn 0.32s cubic-bezier(0.2,0.8,0.2,1) both}
.fb-screen.leave{animation:fbOut 0.18s ease-in both}
@keyframes fbIn{from{opacity:0;transform:translateY(18px)}}
@keyframes fbOut{to{opacity:0;transform:translateY(-12px)}}
.fb-title{font-family:'Syne',sans-serif;font-size:clamp(1.7rem,4vw,2.8rem);font-weight:600;line-height:1.15;letter-spacing:-0.01em;text-wrap:balance}
.fb-lead{font-size:1rem;line-height:1.8;color:var(--text-muted);max-width:520px;text-wrap:pretty}
.fb-badge{font-size:0.72rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold);border:1px solid var(--border-gold);padding:0.45rem 0.9rem}
.fb-mark{font-family:'Syne',sans-serif;font-size:3.2rem;line-height:1;color:var(--gold);animation:fbFloat 3.2s ease-in-out infinite}
@keyframes fbFloat{50%{transform:translateY(-6px) rotate(-3deg)}}
.fb-choices{width:100%;display:grid;gap:1px;background:var(--border);border:1px solid var(--border);grid-template-columns:repeat(var(--cols,3),1fr)}
.fb-choices.two{--cols:2}
.fb-choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.9rem;min-height:9rem;padding:1.5rem 1rem;border:none;background:var(--bg);color:var(--text);font:500 1rem/1.35 'Space Grotesk',system-ui,sans-serif;cursor:pointer;text-wrap:balance;transition:background-color 0.3s,box-shadow 0.3s}
.fb-choice .emo{font-size:2.4rem;line-height:1;transition:transform 0.25s}
.fb-choice:hover{background:var(--surface)}
.fb-choice:hover .emo{transform:scale(1.12) rotate(-6deg)}
.fb-choice:focus-visible{outline:1px solid var(--gold);outline-offset:-4px}
.fb-choice[aria-pressed="true"]{background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--gold)}
.fb-choice.pop{animation:fbPop 0.38s cubic-bezier(0.3,1.6,0.5,1)}
.fb-choice.pop .emo{animation:fbWiggle 0.38s ease}
@keyframes fbPop{40%{transform:scale(1.04)}70%{transform:scale(0.99)}}
@keyframes fbWiggle{30%{transform:scale(1.3) rotate(-10deg)}60%{transform:scale(1.15) rotate(8deg)}}
.fb-choice kbd{position:absolute;top:0.6rem;inset-inline-start:0.7rem}
.fb-choice .tick{position:absolute;top:0.6rem;inset-inline-end:0.7rem;width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--bg);font-size:0.8rem;transform:scale(0);transition:transform 0.25s cubic-bezier(0.3,1.6,0.5,1)}
.fb-choice[aria-pressed="true"] .tick{transform:scale(1)}
kbd{font:500 0.68rem/1 'Space Grotesk',system-ui,sans-serif;padding:0.25rem 0.4rem;border:1px solid var(--border);border-bottom-width:2px;background:var(--surface-2);color:var(--text-faint)}
.fb-hint{font-size:0.75rem;color:var(--text-faint);display:flex;align-items:center;gap:0.4rem}
.fb-other{width:100%;max-width:520px;display:flex;gap:0.5rem;animation:fbIn 0.25s ease both}
.fb-input,.fb-text{width:100%;font:400 1rem/1.6 'Space Grotesk',system-ui,sans-serif;color:var(--text);background:var(--surface-2);border:1px solid var(--border);padding:0.8rem 1rem;border-radius:0}
.fb-text{min-height:9rem;max-width:620px;resize:vertical}
.fb-input:focus,.fb-text:focus{outline:none;border-color:var(--gold)}
.fb-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 1.5rem}
.fb-skip{background:none;border:none;font:inherit;font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-faint);cursor:pointer;min-height:44px;padding:0 0.5rem}
.fb-skip:hover{color:var(--gold)}
.fb-missing{color:var(--gold-dim);border:1px dashed var(--border-gold);padding:0.5rem 1rem;font-size:0.85rem}
.fb-error{color:#9b2c2c;border-inline-start:2px solid #9b2c2c;background:var(--surface-2);padding:0.75rem 1rem;font-size:0.9rem;text-align:start;max-width:620px;width:100%}
.fb-done{width:5rem;height:5rem;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--bg);font-size:2.2rem;animation:fbBurst 0.6s cubic-bezier(0.3,1.6,0.5,1) both}
@keyframes fbBurst{from{transform:scale(0) rotate(-30deg)}}
.fb-rate{width:100%;max-width:520px;padding:1.75rem;border:1px solid var(--border-gold);background:var(--surface-2);display:flex;flex-direction:column;align-items:center;gap:1rem}
.fb-rate p{font-size:0.95rem;line-height:1.7;color:var(--text-muted)}
.fb-stars{color:var(--gold);letter-spacing:0.2em;font-size:1.3rem}
.fb-foot{text-align:center;font-size:0.8rem;color:var(--text-faint);padding-top:1rem}
.fb-foot a{color:var(--gold);text-underline-offset:3px}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}
.spin{display:inline-block;width:0.9em;height:0.9em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:-0.1em}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:600px){
  .fb{padding:6rem 1.25rem 2rem}
  .fb-choices{--cols:2}
  .fb-choices.three{--cols:3}  /* jamais de case vide : 3 réponses restent sur une ligne */
  .fb-choices.three .fb-choice{padding:1rem 0.4rem;font-size:0.85rem}
  .fb-choice{min-height:7.5rem;padding:1.1rem 0.6rem;font-size:0.92rem}
  .fb-choice .emo{font-size:2rem}
}
@media(pointer:coarse){.fb-choice kbd,.fb-hint{display:none}}
@media(prefers-reduced-motion:reduce){.fb-mark{animation:none}}

/* ── Page après paiement : un seul message selon ?status= ── */
[data-status]{display:none}
[data-status].on{display:block}
html:not(.js) [data-status="ok"]{display:block}

/* Textes lus par les scripts (traduits à la génération, jamais affichés tels quels) */
#strings{display:none}