/* Formulaires natifs Unipile (contact, DPA / SOC 2). Tout est scopé sous .upl-form
   et .upl-form-modal : aucune règle ne fuit vers le reste de la page. */
.upl-form{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;line-height:1.5;color:#1e293b;text-align:left;width:100%}
.upl-form *{box-sizing:border-box;margin:0;padding:0}
.upl-form [hidden]{display:none!important}
.upl-form .uf-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;line-height:1.3;color:#0f2736;margin:0 0 12px}
.upl-form .uf-sub{font-size:14px;line-height:1.55;color:#6b7280;margin:0 0 18px}
.upl-form .uf-label{display:block;font-size:13px;font-weight:600;color:#1e293b;margin:0 0 6px}
.upl-form .uf-opt{font-weight:400;color:#94a3b8}
.upl-form .uf-title .uf-opt{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;white-space:nowrap}

/* Champs */
.upl-form .uf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.upl-form .uf-field{display:flex;flex-direction:column}
.upl-form .uf-plain > .uf-field{margin-top:16px}
.upl-form input[type=text],.upl-form input[type=email],.upl-form textarea{width:100%;font:inherit;font-size:15px;color:#0f2736;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;outline:none;transition:border-color .2s ease,background .2s ease}
.upl-form input[type=text],.upl-form input[type=email]{height:42px}
.upl-form textarea{min-height:84px;resize:none;line-height:1.55}
.upl-form textarea::placeholder{color:#94a3b8}
.upl-form input:focus,.upl-form textarea:focus{border-color:#3BB98B;background:#fff}
.upl-form .uf-invalid input,.upl-form .uf-invalid textarea{border-color:#e5484d}
.upl-form .uf-err{display:none;font-size:12px;line-height:1.3;color:#e5484d;margin-top:4px}
.upl-form .uf-invalid > .uf-err{display:block}
.upl-form .uf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.upl-form .uf-group{margin:0 0 14px}
.upl-form .uf-slide > .uf-group:last-child{margin-bottom:0}

/* Pastilles (comptes, API) */
.upl-form .uf-pills{display:flex;flex-wrap:wrap;gap:6px}
.upl-form .uf-pill{position:relative;cursor:pointer}
.upl-form .uf-pill input{position:absolute;opacity:0;pointer-events:none}
.upl-form .uf-pill span{display:inline-block;font-size:13px;font-weight:500;color:#1e293b;background:#fff;border:1px solid #e5e7eb;border-radius:50px;padding:6px 12px;transition:all .2s ease}
.upl-form .uf-pill:hover span{border-color:#3BB98B}
.upl-form .uf-pill input:checked + span{background:#0f2736;border-color:#0f2736;color:#fff}
.upl-form .uf-pill input:focus-visible + span{outline:2px solid #3BB98B;outline-offset:2px}


/* Slide 1 : liste des demandes possibles */
.upl-form .uf-choices{display:flex;flex-direction:column;gap:8px}
.upl-form .uf-choice{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;font:inherit;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.upl-form .uf-choice input{position:absolute;opacity:0;pointer-events:none}
.upl-form .uf-choice:hover{border-color:#3BB98B}
.upl-form .uf-choice:has(input:checked){border-color:#0f2736;background:#f8fafc}
.upl-form .uf-choice:has(input:focus-visible),.upl-form button.uf-choice:focus-visible{outline:2px solid #3BB98B;outline-offset:2px}
.upl-form .uf-choice-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:rgba(59,185,139,.12);display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.upl-form .uf-choice-ico svg{width:18px;height:18px;color:#2aaa7e;transition:color .2s ease}
.upl-form .uf-choice:has(input:checked) .uf-choice-ico{background:#0f2736}
.upl-form .uf-choice:has(input:checked) .uf-choice-ico svg{color:#fff}
.upl-form .uf-choice-txt{flex:1;min-width:0}
.upl-form .uf-choice b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:#0f2736}
.upl-form .uf-choice small{display:block;font-size:12.5px;line-height:1.35;color:#6b7280;margin-top:1px}
.upl-form .uf-choice-go{flex-shrink:0;display:flex;color:#cbd5e0;transition:color .2s ease,transform .2s ease}
.upl-form .uf-choice-go svg{width:18px;height:18px}
.upl-form .uf-choice:hover .uf-choice-go{color:#0f2736;transform:translateX(2px)}
.upl-form .uf-choice:has(input:checked) .uf-choice-go{color:#0f2736}
.upl-form .uf-choices > .uf-err{margin-top:2px}
.upl-form .uf-spacer{flex:1}

/* Documents DPA / SOC 2 */
.upl-form .uf-docs{display:flex;flex-direction:column;gap:8px}
.upl-form .uf-doc{position:relative;display:flex;align-items:center;gap:12px;padding:9px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.upl-form .uf-doc input{position:absolute;opacity:0;pointer-events:none}
.upl-form .uf-doc:hover{border-color:#3BB98B}
.upl-form .uf-doc:has(input:checked){border-color:#3BB98B;background:rgba(59,185,139,.06)}
.upl-form .uf-doc:has(input:focus-visible){outline:2px solid #3BB98B;outline-offset:2px}
.upl-form .uf-doc-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:rgba(59,185,139,.12);display:flex;align-items:center;justify-content:center}
.upl-form .uf-doc-ico svg{width:18px;height:18px;color:#2aaa7e}
.upl-form .uf-doc-txt{flex:1;min-width:0}
.upl-form .uf-doc b{display:block;font-size:14px;font-weight:600;line-height:1.35;color:#0f2736}
.upl-form .uf-doc small{display:block;font-size:12px;line-height:1.4;color:#6b7280;margin-top:2px}
.upl-form .uf-tick{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid #cbd5e0;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.upl-form .uf-tick svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .2s ease}
.upl-form .uf-doc input:checked ~ .uf-tick{background:#3BB98B;border-color:#3BB98B}
.upl-form .uf-doc input:checked ~ .uf-tick svg{opacity:1}

/* Boutons, messages */
.upl-form .uf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;font:inherit;font-size:15px;font-weight:600;color:#0f2736;background:#DDDF4C;border:0;border-radius:10px;padding:0 20px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .2s ease,opacity .2s ease}
.upl-form .uf-btn svg{width:16px;height:16px;transition:transform .2s ease}
.upl-form .uf-btn:hover{transform:translateY(-1px)}
.upl-form .uf-btn:hover svg{transform:translateX(2px)}
.upl-form .uf-btn[disabled]{opacity:.6;cursor:wait;transform:none}
.upl-form .uf-actions{display:flex;justify-content:flex-end;margin:20px 0 0}
.upl-form .uf-note{font-size:12px;line-height:1.45;color:#94a3b8;margin:10px 0 0}
.upl-form .uf-note a{color:#6b7280}
.upl-form .uf-alert{display:none;margin:10px 0 0;padding:8px 12px;border-radius:8px;background:rgba(229,72,77,.08);color:#b4232a;font-size:13px}
.upl-form .uf-alert.on{display:block}
.upl-form .uf-spin{width:16px;height:16px;border:2px solid rgba(15,39,54,.25);border-top-color:#0f2736;border-radius:50%;animation:uf-spin .7s linear infinite}
@keyframes uf-spin{to{transform:rotate(360deg)}}
.upl-form .uf-done{text-align:center}
.upl-form .uf-check{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:rgba(59,185,139,.12);display:flex;align-items:center;justify-content:center;animation:uf-pop .45s cubic-bezier(.2,1.4,.4,1)}
.upl-form .uf-check svg{width:26px;height:26px;color:#3BB98B}
@keyframes uf-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.upl-form .uf-done .uf-title{margin-bottom:8px}
.upl-form .uf-downloads{display:flex;flex-direction:column;gap:8px;width:100%;max-width:320px;margin:0 auto}
.upl-form .uf-downloads .uf-btn{width:100%}

/* Formulaire simple (mini-site) : un bloc, le message prend la place disponible */
.uf-fill > .upl-form.uf-simple-form{height:100%}
.upl-form .uf-simple{display:flex;flex-direction:column;height:100%}
.upl-form .uf-simple > .uf-field{margin-top:14px}
.upl-form .uf-simple .uf-grow{flex:1;min-height:110px}
.upl-form .uf-simple .uf-grow textarea{flex:1;height:100%}
.upl-form .uf-simple .uf-actions{margin-top:16px}
.upl-form .uf-simple-form > .uf-done{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%}
.upl-form .uf-simple-form > .uf-done[hidden]{display:none}

/* ===== Contact en slides : hauteur fixe, la page ne bouge jamais =====
   --uf-h fixe la hauteur. Dans une carte qui s'étire (classe .uf-fill sur le conteneur),
   le formulaire prend la hauteur disponible, avec --uf-min comme plancher. */
.upl-form.uf-slides{--uf-h:510px;display:flex;flex-direction:column;height:var(--uf-h)}
.upl-form .uf-head{display:flex;align-items:center;gap:12px;flex-shrink:0;height:18px;margin:0 0 14px}
.upl-form .uf-count{flex-shrink:0;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#94a3b8}
.upl-form .uf-bar{flex:1;height:4px;border-radius:4px;background:#f0f1f3;overflow:hidden}
.upl-form .uf-bar i{display:block;height:100%;width:0;border-radius:4px;background:#3BB98B;transition:width .45s cubic-bezier(.4,0,.2,1)}
.upl-form .uf-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.uf-fill > .upl-form.uf-slides{height:100%;min-height:var(--uf-min,380px)}
.upl-form .uf-slide[data-s=docs] textarea{min-height:58px}
.upl-form .uf-slide{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;opacity:0;visibility:hidden;transform:translateX(32px);transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1),visibility 0s linear .35s}
.upl-form .uf-slide.is-left{transform:translateX(-32px)}
.upl-form .uf-slide.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease .05s,transform .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.upl-form .uf-slide.uf-done{justify-content:center;align-items:center}
.upl-form .uf-grow{flex:1;min-height:110px}
.upl-form .uf-grow textarea{flex:1;height:100%}
.upl-form .uf-foot{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:12px 0 0;margin:12px 0 0;border-top:1px solid #f0f1f3}
.upl-form .uf-round{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;color:#0f2736;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,opacity .2s ease}
.upl-form .uf-round svg{width:18px;height:18px}
.upl-form .uf-round:hover{border-color:#0f2736}
.upl-form .uf-round[disabled]{opacity:0;pointer-events:none}
.upl-form .uf-go{flex-shrink:0}
.upl-form.is-done .uf-foot,.upl-form.is-done .uf-head{visibility:hidden}
.upl-form .uf-restart{margin:18px auto 0;font:inherit;font-size:13px;font-weight:500;color:#6b7280;background:none;border:0;cursor:pointer}
.upl-form .uf-restart:hover{color:#0f2736;text-decoration:underline}
.upl-form.uf-slides > .uf-alert{flex-shrink:0}

@media(max-width:600px){
  .upl-form.uf-slides{--uf-h:600px}
  .upl-form .uf-grid [data-f=email],.upl-form .uf-grid [data-f=company]{grid-column:1 / -1}
  .upl-form .uf-plain .uf-grid{grid-template-columns:1fr}
  .upl-form .uf-plain .uf-grid [data-f]{grid-column:auto}
  .upl-form .uf-btn{padding:0 16px}
}
@media(prefers-reduced-motion:reduce){
  .upl-form .uf-slide,.upl-form .uf-slide.is-on{transition:none}
}

/* Fenêtre modale (demande DPA / SOC 2 ouverte depuis n'importe quelle page) */
.upl-form-modal{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;inset:0}
.upl-form-modal::backdrop{background:rgba(15,39,54,.55)}
.upl-form-modal .ufm-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.upl-form-modal .ufm-card{position:relative;width:100%;max-width:520px;background:#fff;border-radius:16px;padding:32px;animation:uf-in .25s ease}
@keyframes uf-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.upl-form-modal .ufm-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f4f5f7;color:#0f2736;font-size:20px;line-height:1;cursor:pointer}
.upl-form-modal .ufm-close:hover{background:#e5e7eb}
@media(max-width:560px){.upl-form-modal .ufm-card{padding:28px 20px}}
