/* ==========================================================================
   Site public — gratuité, ligne de démonstration, barre d'action mobile.
   Feuille séparée d'app.css, chargée par layouts/main.php avec un ?v= égal à
   la date de modification du fichier : rien à bumper à la main.
   ========================================================================== */

/* ---- Mention de gratuité, sous les boutons d'inscription ----------------
   Sélecteurs préfixés par « p. » : ils doivent l'emporter sur « .cta-final p »
   et « .cta-secteur p » (app.css), qui imposent taille, marges et couleur. */
p.essai-gratuit{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;max-width:none;font-size:.86rem;
  line-height:1.45;color:var(--body);font-weight:550}
p.essai-gratuit svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--mint-ink)}
p.essai-gratuit strong{color:var(--ink);font-weight:750}
p.essai-gratuit.essai-gratuit--centre{justify-content:center;text-align:left;margin:14px auto 0;max-width:560px}
p.essai-gratuit.essai-gratuit--sombre{color:rgba(255,255,255,.88);position:relative;z-index:1}
p.essai-gratuit.essai-gratuit--sombre svg{color:#7DE0C8}
p.essai-gratuit.essai-gratuit--sombre strong{color:#fff}
p.essai-gratuit.essai-gratuit--carte{font-size:.8rem;margin-top:10px;color:var(--muted);font-weight:500}
p.essai-gratuit.essai-gratuit--carte strong{color:var(--mint-ink)}
@media (max-width:860px){
  .secteur-hero-content p.essai-gratuit{justify-content:center}
}

/* ---- Ligne de démonstration (lien tel:) ---------------------------------- */
p.ligne-demo-bloc{margin:14px 0 0;max-width:none;font-size:1rem;color:inherit}
p.ligne-demo-bloc.ligne-demo-bloc--centre{text-align:center;margin-left:auto;margin-right:auto}
.ligne-demo{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;
  border-radius:999px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-s);
  color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.3;transition:border-color .15s,transform .15s}
.ligne-demo:hover{border-color:var(--accent);transform:translateY(-1px)}
.ligne-demo-ic{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-deep)}
.ligne-demo-ic svg{width:16px;height:16px}
.ligne-demo-txt{color:var(--body)}
.ligne-demo-num{font-weight:800;letter-spacing:.01em;white-space:nowrap;color:var(--ink)}
.ligne-demo--sombre{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);box-shadow:none;position:relative;z-index:1}
.ligne-demo--sombre .ligne-demo-txt{color:rgba(255,255,255,.82)}
.ligne-demo--sombre .ligne-demo-num{color:#fff}
.ligne-demo--sombre .ligne-demo-ic{background:rgba(255,255,255,.16);color:#fff}
.ligne-demo--sombre:hover{border-color:#fff}
@media (max-width:860px){
  .secteur-hero-content p.ligne-demo-bloc{text-align:center}
}
@media (max-width:420px){
  .ligne-demo{flex-wrap:wrap;justify-content:center;border-radius:18px;padding:9px 14px;text-align:center}
}

/* ---- Barre d'action fixe, mobile uniquement ------------------------------ */
.vx-barre{display:none}
@media (max-width:768px){
  body.vx-barre-page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .vx-barre{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:290;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);border-top:1px solid var(--line-2);
    box-shadow:0 -10px 28px -14px rgba(23,24,29,.25);
    transform:translateY(115%);visibility:hidden;
    transition:transform .25s ease,visibility 0s linear .25s}
  body.vx-barre-visible .vx-barre{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  body.nav-ouvert .vx-barre{display:none}
  .vx-barre .btn{flex:1 1 0;min-width:0;padding:12px 10px;font-size:.93rem;border-radius:12px;white-space:nowrap}
  .vx-barre .btn:hover{transform:none}
  .vx-barre .btn svg{width:17px;height:17px;flex:none}
  /* Le lanceur du chatbot vit dans le même coin : il monte au-dessus de la barre. */
  body.vx-barre-visible .vx-chat{bottom:calc(var(--vx-barre-h,68px) + 12px)}
}
@media (max-width:360px){
  .vx-barre{gap:8px;padding-left:12px;padding-right:12px}
  .vx-barre .btn{font-size:.86rem;padding:11px 6px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .vx-barre,body.vx-barre-visible .vx-barre{transition:none}
}