/* ================================================================
   CTA AIDLY — CSS scopé .sp-cta (zéro collision avec le thème)
   Couleurs de marque : teal #1B6E7E · corail #E76A3C
   Le corail est RÉSERVÉ au bouton d'appel (action principale).
   Source : handoff designer 22/06/2026 (cta-A.html + cta-B.html)
   ================================================================ */

.sp-cta *{box-sizing:border-box;margin:0;padding:0}
.sp-cta{
  --teal:#1B6E7E; --teal-dark:#155663; --teal-soft:#E7F1F2;
  --coral:#E76A3C; --coral-dark:#D2592D;
  --ink:#2E3A3E; --body:#5C686B; --muted:#6B7679; --faint:#9AA6A8;
  --line:#E8EDED; --line-soft:#EEF2F2; --field:#D8E2E2; --error:#C0392B;
  font-family:'Mulish',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--body); -webkit-font-smoothing:antialiased;
  max-width:760px;
}
.sp-card{
  background:#fff;border:1px solid var(--line);border-radius:26px;
  padding:38px;box-shadow:0 26px 56px -34px rgba(27,110,126,.5);
  display:flex;gap:40px;align-items:stretch;
}
.sp-left{flex:1;min-width:0;display:flex;flex-direction:column}
.sp-badge{
  display:inline-flex;align-self:flex-start;align-items:center;gap:8px;
  background:var(--teal-soft);color:var(--teal);font-weight:700;font-size:13px;
  padding:7px 13px;border-radius:999px;font-family:'Quicksand',sans-serif;
}
.sp-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.sp-title{
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:33px;line-height:1.16;
  color:var(--teal);margin:20px 0 12px;text-wrap:balance;
}
.sp-title .accent{color:var(--coral)}
.sp-lead{font-size:17px;line-height:1.55;color:var(--body);margin-bottom:22px;max-width:40ch}
.sp-points{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:auto;padding-top:18px}
.sp-point{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#41504F}

.sp-action{
  flex:none;width:340px;background:#FBFCFC;border:1px solid var(--line);
  border-radius:22px;padding:24px;display:flex;flex-direction:column;
}
.sp-call{
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--coral);border-radius:16px;padding:16px 18px;text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(231,106,60,.75);transition:background .15s;
}
.sp-call:hover{background:var(--coral-dark)}
.sp-call .ico{width:42px;height:42px;flex:none;border-radius:50%;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:#fff}
.sp-call .lab{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);display:block}
.sp-call .num{font-size:22px;font-weight:700;color:#fff;letter-spacing:.02em;display:block;font-family:'Quicksand',sans-serif}
.sp-hours{text-align:center;font-size:13px;color:var(--muted);margin-top:10px}

.sp-or{display:flex;align-items:center;gap:12px;margin:16px 0}
.sp-or span{flex:1;height:1px;background:var(--line)}
.sp-or em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--faint)}

.sp-recall-intro{font-size:13.5px;color:#41504F;line-height:1.4;margin-bottom:9px}

/* Champ téléphone avec indicatif +33 */
.sp-phone{
  display:flex;align-items:center;gap:10px;border:1.5px solid var(--field);
  border-radius:13px;padding:0 14px;background:#fff;transition:border-color .15s;
}
.sp-phone:focus-within{border-color:var(--teal)}
.sp-flag{
  width:22px;height:16px;flex:none;border-radius:3px;
  background:linear-gradient(to right,#23368C 0 33.34%,#fff 33.34% 66.67%,#E1000F 66.67% 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.sp-cc{font-size:15px;font-weight:700;color:var(--muted)}
.sp-sep{width:1px;height:22px;background:var(--line)}
.sp-phone-input{
  flex:1;min-width:0;border:none;outline:none;padding:15px 0;
  font-size:16px;font-family:'Mulish',sans-serif;color:var(--ink);background:transparent;
}
.sp-recall.is-error .sp-phone{border-color:var(--error)}
.sp-error{display:none;font-size:12.5px;color:var(--error);margin-top:7px;padding:0 2px}
.sp-recall.is-error .sp-error{display:block}

.sp-recall-btn{
  width:100%;margin-top:9px;border:1.5px solid var(--teal);background:#fff;color:var(--teal);
  border-radius:13px;padding:13px;font-size:15px;font-weight:700;font-family:'Quicksand',sans-serif;cursor:pointer;transition:background .15s;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.sp-recall-btn:hover{background:var(--teal-soft)}
.sp-recall-btn[disabled]{opacity:.6;cursor:default}
.sp-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:none;animation:sp-spin .7s linear infinite}
.sp-recall.is-loading .sp-spinner{display:inline-block}
.sp-recall.is-loading .sp-recall-btn__label{opacity:.85}
@keyframes sp-spin{to{transform:rotate(360deg)}}

.sp-legal{font-size:11px;line-height:1.45;color:var(--faint);margin-top:10px;padding:0 2px}
.sp-legal a{color:var(--muted);text-decoration:underline}

.sp-success{display:none;align-items:center;gap:11px;background:var(--teal-soft);border-radius:13px;padding:14px}
.sp-success.is-visible{display:flex}
.sp-success .chk{width:32px;height:32px;flex:none;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center}
.sp-success p{font-size:13.5px;color:var(--teal-dark);line-height:1.4}

.sp-reassure{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.sp-reassure span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}

/* ================================================================
   VARIANTE B — Bloc avis + photo conseillère
   ================================================================ */
.sp-review{margin:18px 0;padding:14px;background:var(--teal-soft);border-radius:14px}
.sp-stars-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.sp-stars{color:#F5A623;font-size:18px;letter-spacing:1px}
.sp-rating{font-size:14px;font-weight:700;color:var(--teal-dark)}
.sp-rating-sub{font-size:12px;color:var(--muted)}
.sp-quote{font-size:13.5px;line-height:1.45;color:#3A4849;font-style:italic;margin-bottom:6px}
.sp-quote-who{font-size:12px;color:var(--muted);font-weight:600}

.sp-advisor{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.sp-avatar{width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;font-family:'Quicksand',sans-serif;flex:none;overflow:hidden}
.sp-avatar img{width:100%;height:100%;object-fit:cover}
.sp-advisor-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2}
.sp-advisor-sub{font-size:12px;color:var(--muted);margin-top:3px}

/* ================================================================
   MOBILE (< 680px) — stack en 1 colonne
   ================================================================ */
@media (max-width:680px){
  .sp-card{flex-direction:column;padding:24px;border-radius:24px;gap:0}
  .sp-title{font-size:26px}
  .sp-lead{font-size:16px;max-width:none}
  .sp-points{display:none}
  .sp-action{width:auto;background:transparent;border:none;padding:0;margin-top:22px}
  .sp-call .num{font-size:23px}
  /* Variante B */
  .sp-review{max-width:none;margin-bottom:20px}
  .sp-advisor{order:-1;margin-top:0;padding-top:0;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line-soft);border-top:none}
}

/* ================================================================
   OVERRIDES THÈME & WRAPPER LP — spécificité élevée à 0,2,0
   (.sp-cta .X) pour battre :
   - hello-biz : [type="submit"], button { border-color: #CC3366 }
   - aidly-lp : .aidly-lp * { padding: 0; margin: 0 }  (spec 0,1,1)
     qui sinon casse TOUS les paddings/margins internes de la carte.
   Constaté en prod : sans ces overrides, la carte CTA rend collée
   (padding 0 partout) et le bouton "Être rappelé" rend rose.
   ================================================================ */

/* — Couleurs (battent hello-biz) — */
.sp-cta .sp-recall-btn{border-color:var(--teal);color:var(--teal);background:#fff}
.sp-cta .sp-recall-btn:hover{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.sp-cta .sp-recall-btn[disabled]{border-color:var(--teal);color:var(--teal)}
.sp-cta .sp-call{color:#fff;background:var(--coral);border-color:transparent}
.sp-cta .sp-call:hover{background:var(--coral-dark);color:#fff;border-color:transparent}
.sp-cta .sp-spinner{border-color:currentColor;border-top-color:transparent}
.sp-cta .sp-phone-input{color:var(--ink)}
.sp-cta .sp-recall.is-error .sp-phone{border-color:var(--error)}
.sp-cta .sp-recall.is-error .sp-recall-btn{border-color:var(--teal);color:var(--teal)}

/* — Paddings & margins (battent .aidly-lp * reset) — */
.sp-cta .sp-card{padding:38px}
.sp-cta .sp-badge{padding:7px 13px}
.sp-cta .sp-lead{margin-bottom:22px}
.sp-cta .sp-title{margin:20px 0 12px}
.sp-cta .sp-points{padding-top:18px}
.sp-cta .sp-action{padding:24px}
.sp-cta .sp-call{padding:16px 18px}
.sp-cta .sp-hours{margin-top:10px}
.sp-cta .sp-or{margin:16px 0}
.sp-cta .sp-recall-intro{margin-bottom:9px}
.sp-cta .sp-phone{padding:0 14px}
.sp-cta .sp-phone-input{padding:15px 0}
.sp-cta .sp-error{margin-top:7px;padding:0 2px}
.sp-cta .sp-recall-btn{margin-top:9px;padding:13px}
.sp-cta .sp-legal{margin-top:10px;padding:0 2px}
.sp-cta .sp-success{padding:14px}
.sp-cta .sp-reassure{margin-top:18px;padding-top:16px}
.sp-cta .sp-review{margin:18px 0;padding:14px}
.sp-cta .sp-stars-row{margin-bottom:7px}
.sp-cta .sp-rating-sub,
.sp-cta .sp-quote{margin-bottom:6px}
.sp-cta .sp-quote-who{margin-top:0}
.sp-cta .sp-advisor{margin-top:18px;padding-top:18px}
.sp-cta .sp-advisor-sub{margin-top:3px}

/* — Desktop (>= 681px) : carte plus aérée, sans bordure ni coins arrondis
   Feedback user post-recette /aidly-v2/ (22/06) : design plus "ouvert".
   Le shadow reste pour la profondeur visuelle. — */
@media (min-width:681px){
  .sp-cta{max-width:920px}
  .sp-cta .sp-card{border:none;border-radius:0;gap:48px}
}

/* — Mobile override (< 680px) prefixé pour spec 0,2,0 — */
@media (max-width:680px){
  .sp-cta .sp-card{padding:24px}
  .sp-cta .sp-action{padding:0;margin-top:22px}
  .sp-cta .sp-review{margin-bottom:20px}
  .sp-cta .sp-advisor{margin-top:0;padding-top:0;padding-bottom:18px;margin-bottom:18px}
}

/* ================================================================
   FORM-ONLY — template form-only.php injecté dans la carte V1
   (#sp-callback-slot de l'aside.contact-card du hero Aidly).
   Spécificité 0,2,0 (.aidly-lp .sp-callback-form ...) ou 0,1,1
   (.sp-callback-form .sp-cbf__X) pour battre :
   - .aidly-lp * reset (padding:0, margin:0) → spec 0,1,1 = égalité,
     mais on charge APRÈS .aidly-lp donc on gagne en cas d'égalité
   - hello-biz [type="submit"] → spec 0,1,0, on bat avec 0,1,1
   ================================================================ */
.sp-callback-form{font-family:'Mulish',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#5C686B;text-align:left;margin-top:0}

/* Champ téléphone avec indicatif +33 */
.sp-callback-form .sp-cbf__field{
  display:flex;align-items:center;gap:10px;border:1.5px solid #D8E2E2;
  border-radius:12px;padding:0 14px;background:#fff;transition:border-color .15s;
}
.sp-callback-form .sp-cbf__field:focus-within{border-color:#1B6E7E}
.sp-callback-form .sp-cbf__flag{
  width:22px;height:16px;flex:none;border-radius:3px;
  background:linear-gradient(to right,#23368C 0 33.34%,#fff 33.34% 66.67%,#E1000F 66.67% 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.sp-callback-form .sp-cbf__cc{font-size:15px;font-weight:700;color:#6B7679}
.sp-callback-form .sp-cbf__sep{width:1px;height:22px;background:#E8EDED}
.sp-callback-form .sp-cbf__input{
  flex:1;min-width:0;border:none;outline:none;padding:14px 0;
  font-size:16px;font-family:inherit;color:#2E3A3E;background:transparent;
}
.sp-callback-form.is-error .sp-cbf__field{border-color:#C0392B}
.sp-callback-form .sp-cbf__error{display:none;font-size:12.5px;color:#C0392B;margin-top:7px;padding:0 2px}
.sp-callback-form.is-error .sp-cbf__error{display:block}

/* Bouton submit (border teal, hover bg teal-soft) — spec 0,1,1 bat hello-biz */
.sp-callback-form .sp-cbf__btn{
  width:100%;margin-top:10px;border:1.5px solid #1B6E7E;background:#fff;color:#1B6E7E;
  border-radius:12px;padding:13px;font-size:15px;font-weight:700;
  font-family:'Quicksand','Mulish',sans-serif;cursor:pointer;transition:background .15s;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.sp-callback-form .sp-cbf__btn:hover{background:#E7F1F2;border-color:#1B6E7E;color:#1B6E7E}
.sp-callback-form .sp-cbf__btn[disabled]{opacity:.6;cursor:default}
.sp-callback-form .sp-cbf__spinner{
  width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;display:none;animation:sp-cbf-spin .7s linear infinite;
}
.sp-callback-form.is-loading .sp-cbf__spinner{display:inline-block}
.sp-callback-form.is-loading .sp-cbf__btn-label{opacity:.85}
@keyframes sp-cbf-spin{to{transform:rotate(360deg)}}

/* Mention RGPD */
.sp-callback-form .sp-cbf__legal{
  font-size:11px;line-height:1.45;color:#9AA6A8;margin-top:10px;padding:0 2px;text-align:left;
}
.sp-callback-form .sp-cbf__legal a{color:#6B7679;text-decoration:underline}