/* ===========================================================================
   Modal démo RCS Leadtonic — feuille de style partagée
   Extrait de lp-rcs.html, rendu autonome (couleurs en dur, sans variables de page).
   Inclus sur toutes les pages du site pour ouvrir la collecte de numéro (data-cta).
   =========================================================================== */

/* Overlay + carte */
.lt-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; }
.lt-modal[hidden]{ display:none; }
.lt-modal-backdrop{ position:absolute; inset:0; background:rgba(15,31,70,.55); backdrop-filter:blur(4px); animation:ltFade .25s ease; }
.lt-modal-card{ position:relative; z-index:1; width:100%; max-width:440px; background:#fff; border-radius:22px; padding:30px 28px 26px; box-shadow:0 40px 90px -30px rgba(15,31,70,.6); animation:ltPop .3s cubic-bezier(.22,1,.36,1); }
.lt-modal-x{ position:absolute; top:12px; right:14px; width:34px; height:34px; border:none; background:#F7F8FB; color:#3A4A6B; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s ease, color .15s ease; }
.lt-modal-x:hover{ background:#EFF3F8; color:#0F1F46; }
.lt-modal-card h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-0.02em; font-size:25px; color:#0F1F46; margin:14px 0 8px; line-height:1.15; }
.lt-modal-body > p{ font-size:15px; color:#3A4A6B; line-height:1.55; margin:0 0 18px; }
.lt-modal-card .cta-field{ max-width:none; }
.lt-modal-card .cta-consent{ max-width:none; }

@keyframes ltFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ltPop{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }

/* Formulaire (repris des .cta-*), scopé au modal pour ne rien casser sur la page */
.lt-modal .cta-form{ display:flex; flex-direction:column; gap:7px; }
.lt-modal .cta-field{ display:flex; align-items:center; gap:8px; background:#fff; border:2px solid #FF6A00; border-radius:14px; padding:5px 5px 5px 14px; box-shadow:0 12px 30px -12px rgba(255,106,0,.5); transition:border-color .15s ease, box-shadow .15s ease; }
.lt-modal .cta-field.invalid{ border-color:#E0354F; box-shadow:0 12px 30px -12px rgba(224,53,79,.45); }
.lt-modal .cta-prefix{ font-weight:700; color:#0F1F46; font-size:17px; white-space:nowrap; }
.lt-modal .cta-field input{ flex:1; min-width:0; border:none; outline:none; font-size:17px; font-family:'Outfit',sans-serif; color:#0F1F46; padding:10px 2px; background:transparent; letter-spacing:.03em; }
.lt-modal .cta-send{ flex:none; width:44px; height:44px; border:none; cursor:pointer; border-radius:11px; background:#FF6A00; color:#fff; font-size:21px; font-weight:700; line-height:1; display:grid; place-items:center; transition:background .15s ease; }
.lt-modal .cta-send:hover{ background:#E85F00; }
.lt-modal .cta-send[disabled]{ opacity:.6; cursor:default; }
.lt-modal .cta-honey{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lt-modal .cta-err{ font-size:13.5px; color:#C81E3A; }
.lt-modal .cta-consent{ font-size:12px; color:#9AA7C0; line-height:1.4; }

/* Pastille "live" en tête du modal */
.lt-modal .rb-tag{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.04em; color:#74C400; background:#F0FBC0; border:1px solid rgba(191,229,20,.55); padding:6px 12px; border-radius:999px; text-transform:uppercase; }
.lt-modal .live-dot{ width:8px; height:8px; border-radius:50%; background:#74C400; position:relative; flex:0 0 8px; }
.lt-modal .live-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#74C400; animation:live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse{ 0%{ transform:scale(1); opacity:.55; } 70%{ transform:scale(3.2); opacity:0; } 100%{ transform:scale(3.2); opacity:0; } }

/* État "message envoyé" */
.lt-modal-done{ text-align:center; padding:18px 6px 8px; }
.lt-modal-done strong{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:21px; letter-spacing:-0.01em; color:#0F1F46; margin-bottom:4px; }
.lt-modal-done span{ font-size:15px; color:#3A4A6B; }
.lt-modal-done span b{ color:#0F1F46; font-weight:700; }
.done-flow{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px; }
.df-logo img{ width:46px; height:46px; object-fit:contain; display:block; }
.df-phone svg{ width:34px; height:auto; display:block; }
.df-chevrons{ display:inline-flex; align-items:center; gap:3px; }
.df-chevrons i{ width:9px; height:9px; border-top:2.6px solid #74C400; border-right:2.6px solid #74C400; transform:rotate(45deg); opacity:.2; animation:dfChev 1.1s ease-in-out infinite; }
.df-chevrons i:nth-child(2){ animation-delay:.18s; }
.df-chevrons i:nth-child(3){ animation-delay:.36s; }
@keyframes dfChev{ 0%,100%{ opacity:.2; } 45%{ opacity:1; } }

/* Verrou de scroll du body pendant l'ouverture */
body.lt-locked{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

/* Mobile : feuille qui descend du haut */
@media (max-width:560px){
  .lt-modal{ align-items:flex-start; padding:0; }
  .lt-modal-card{ max-width:none; border-radius:0 0 22px 22px; padding:calc(20px + env(safe-area-inset-top)) 22px 26px; animation:ltSheet .34s cubic-bezier(.22,1,.36,1); }
  @keyframes ltSheet{ from{ transform:translateY(-100%); } to{ transform:none; } }
}
@media (prefers-reduced-motion: reduce){
  .df-chevrons i{ animation:none; opacity:.7; }
  .lt-modal .live-dot::after{ animation:none; }
}