/* Page commerçant (pro.html), ce qui lui est propre. Se charge APRÈS
   pro-styles.css (tokens pro, barre du haut, pied de page, image du hero,
   boutons, champs, carte de formulaire, manifeste, renvoi vers la carte
   conso) et landing.css (hero en deux colonnes, chiffres, maquette,
   sections, étapes, avantages, catégories, FAQ, communs avec index.html). */

/* ---------- barre du haut : un vrai CTA, pas un lien de sortie ---------- */
.btn-top{display:inline-flex;align-items:center;justify-content:center;background:var(--accent-light);color:#fff;font:700 13px/1 var(--sora);padding:11px 16px;border-radius:12px;white-space:nowrap}
.btn-top:hover{background:#7B5FE6;color:#fff}

@media (max-width:640px){.nav{gap:16px 18px}}

/* ---------- hero (image et voiles dans pro-styles.css) ---------- */
.hero__copy .h1{max-width:12em}
.h1__accent{color:var(--accent)}
.hero__copy .lead{font-size:17.5px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero__cta .btn{padding:0 26px}
.hero__cta .btn-outline{height:54px;padding:0 22px;border-radius:14px;background:rgba(255,255,255,.55)}

/* une seule colonne : le chapeau prend toute la largeur, y compris sous
   760px, où pro-styles.css borne `.lead` à 330px sur les autres pages pro */
@media (max-width:860px){.hero__copy .lead{max-width:none;font-size:16.5px}}

/* ---------- maquette : capture du récapitulatif de création du Pro ---------- */
.phone__shot{width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:860px){.phone__screen{height:500px}}

/* carte « code validé » (`.mock__card`, landing.css) : l'écran de succès de
   Valider, langage « coupon sombre » du Pro, posée sur le téléphone pour
   relier les deux faces */
.scan__brand{font:600 10px/1 var(--sora);letter-spacing:.14em;text-transform:uppercase;color:#B9A8F2;margin:0}
.scan__head{display:flex;align-items:center;gap:11px}
.scan__check{width:32px;height:32px;border-radius:16px;background:var(--accent-light);display:grid;place-items:center;flex:none}
.scan__check svg{width:18px;height:18px}
.scan__title{font:700 15.5px/1.2 var(--sora);margin:0}
.scan__sub{font:400 12px/1.3 var(--sora);color:rgba(255,255,255,.62);margin:0}
.scan__deal{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;font:600 12.5px/1.35 var(--sora);margin:0}
.scan__deal small{display:block;font:400 11px/1.3 var(--sora);color:rgba(255,255,255,.6);margin-top:3px}
.scan__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scan__stat{display:flex;flex-direction:column;gap:4px}
.scan__v{font:600 20px/1 var(--mono)}
.scan__l{font:400 11px/1.3 var(--sora);color:rgba(255,255,255,.62)}

/* ---------- les deux piliers : visibilité utile, preuve par le scan ---------- */
.pillars{display:flex;flex-direction:column;gap:20px}
.pillar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px 56px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(24px,4vw,46px);box-shadow:var(--shadow-card)}
.pillar--flip .pillar__visual{order:-1}
.pillar__copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.pillar__title{font:700 clamp(22px,2.6vw,28px)/1.18 var(--sora);letter-spacing:-.03em;margin:0;text-wrap:pretty}
.pillar__body{font:400 15.5px/1.65 var(--sora);color:var(--ink-2);margin:0;text-wrap:pretty}
.pillar__note{font:600 14px/1.5 var(--sora);color:var(--ink);margin:0;padding:12px 16px;border-left:3px solid var(--accent);background:var(--pressed);border-radius:0 12px 12px 0}
.pillar__visual{min-width:0}
.pillar__visual svg{width:100%;height:auto;display:block}
@media (max-width:820px){
  .pillar{grid-template-columns:1fr;gap:24px}
  .pillar--flip .pillar__visual{order:0}
  .pillar__visual{max-width:420px}
}
/* les quatre avantages (landing.css) suivent les piliers dans la même section */
.pillars + .benefits{margin-top:20px}

/* entonnoir : de l'affichage à la caisse, le dernier pas en évidence */
.funnel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.funnel li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:14px;position:relative}
.funnel li + li::before{content:'';position:absolute;left:29px;top:-10px;height:20px;width:2px;background:var(--line)}
.funnel__n{flex:none;width:32px;height:32px;border-radius:16px;background:var(--accent-surface);color:var(--accent-on);display:grid;place-items:center;font:600 12px/1 var(--mono);position:relative;z-index:1}
.funnel__t{font:700 15px/1.3 var(--sora);margin:0;color:var(--ink)}
.funnel__s{font:400 12.5px/1.45 var(--sora);color:var(--ink-3);margin:2px 0 0}
.funnel li.is-hot{background:var(--inverse);color:#fff;margin-top:6px}
.funnel li.is-hot .funnel__n{background:var(--accent-light);color:#fff}
.funnel li.is-hot .funnel__t{color:#fff}
.funnel li.is-hot .funnel__s{color:rgba(255,255,255,.65)}
.funnel__badge{margin-left:auto;align-self:center;flex:none;font:600 12px/1 var(--mono);background:rgba(255,255,255,.12);color:#fff;padding:7px 9px;border-radius:8px;white-space:nowrap}

/* ---------- comparatif pub classique / Bonispot ---------- */
.compare-wrap{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-card)}
.compare{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:18px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font:400 14.5px/1.55 var(--sora)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
.compare thead th{font:600 11px/1 var(--sora);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);background:var(--pressed);padding-top:14px;padding-bottom:14px}
.compare thead th.is-us{color:var(--accent-on);background:#E6E0F8}
.compare th[scope=row]{font:700 14.5px/1.4 var(--sora);color:var(--ink);width:22%}
.compare td.is-them{color:var(--ink-3)}
.compare td.is-us{color:var(--ink);background:#F7F5FD;font-weight:600}
@media (max-width:700px){
  .compare thead{display:none}
  .compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare tr{border-bottom:1px solid var(--line)}
  .compare tbody tr:last-child{border-bottom:none}
  .compare th[scope=row]{width:auto;padding:16px 18px 6px;border-bottom:none}
  .compare td{padding:8px 18px 12px;border-bottom:none}
  .compare td:last-child{padding-bottom:16px}
  .compare td::before{content:attr(data-col);display:block;font:600 10.5px/1 var(--sora);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
  .compare td.is-us::before{color:var(--accent-on)}
  .compare td.is-us{border-radius:12px;margin:0 10px 4px;padding:10px 8px 12px}
  .compare td.is-them{font-size:14px}
}

/* ---------- le lancement (carte sombre) ---------- */
.pilot{background:var(--inverse);color:#fff;border-radius:28px;padding:clamp(30px,5vw,52px) clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px 56px;align-items:center}
.pilot__copy{display:flex;flex-direction:column;gap:16px}
.pilot .h2{color:#fff;font-size:clamp(26px,3.4vw,34px)}
.pilot .eyebrow{color:#B9A8F2}
.pilot__lead{font:400 15.5px/1.65 var(--sora);color:rgba(255,255,255,.7);margin:0;max-width:520px;text-wrap:pretty}
.pilot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pilot__list li{display:flex;gap:12px;align-items:flex-start;font:400 15px/1.5 var(--sora);color:rgba(255,255,255,.92)}
.pilot__list li::before{content:'';flex:none;width:22px;height:22px;border-radius:11px;margin-top:1px;background:var(--accent-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center/13px 13px no-repeat}
.pilot__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding-top:4px}
.btn-light{background:var(--accent-light)}
.btn-light:hover{background:#7B5FE6}
.pilot__note{font:400 12.5px/1.5 var(--sora);color:rgba(255,255,255,.55);margin:0}
@media (max-width:820px){.pilot{grid-template-columns:1fr;gap:26px}}

/* ---------- rejoindre : texte + formulaire ---------- */
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:36px 64px;align-items:start}
.join__copy{display:flex;flex-direction:column;gap:16px}
.join__copy .h2{font-size:clamp(26px,3.4vw,34px)}
.join__lead{font:400 16px/1.65 var(--sora);color:var(--ink-2);margin:0;max-width:520px;text-wrap:pretty}
.join__steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.join__steps li{display:flex;gap:12px;align-items:flex-start;font:400 14.5px/1.5 var(--sora);color:var(--ink-2)}
.join__steps li b{flex:none;width:26px;height:26px;border-radius:13px;background:var(--accent-surface);color:var(--accent-on);display:grid;place-items:center;font:600 11.5px/1 var(--mono)}
.join .signup-card{box-shadow:var(--shadow-form)}
@media (max-width:860px){.join{grid-template-columns:1fr}}