/* =========================================================
   CARTE CONTACT — assistant en 4 étapes
   Prefixe .sh- : aucun croisement avec style.css / app.js
   ========================================================= */
html.sh-lock, html.sh-lock body{ overflow:hidden; }

#sh-modal{ position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  padding:clamp(8px,3vw,36px); overflow-y:auto; opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s; }
#sh-modal.open{ opacity:1; visibility:visible; }

#sh-modal .sh-back{ position:absolute; inset:0; border:0; cursor:pointer;
  background:rgba(10,8,6,.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }

#sh-modal .sh-panel{ position:relative; width:min(760px,100%); overflow:visible;
  background:var(--accent,#FF8A3D); color:#1A0E04; border-radius:28px;
  padding:clamp(1.4rem,3.6vw,2.6rem);
  box-shadow:0 44px 120px -40px rgba(0,0,0,.6);
  transform:translateY(24px) scale(.97);
  transition:transform .55s cubic-bezier(.16,1,.3,1); }
#sh-modal.open .sh-panel{ transform:none; }

#sh-modal .sh-x{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; border:0; cursor:pointer; background:transparent; color:#1A0E04;
  transition:background .3s, transform .3s; z-index:3; }
#sh-modal .sh-x:hover{ background:rgba(0,0,0,.12); transform:rotate(90deg); }

/* ---------- en-tête ---------- */
#sh-modal .sh-count{ display:block; margin-bottom:.45rem; font-size:.6rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; opacity:.65; }
#sh-modal .sh-head h2{ margin:0; font-size:clamp(1.3rem,3.2vw,1.95rem); line-height:1.08;
  font-weight:800; letter-spacing:-.03em; max-width:20ch; }
#sh-modal .sh-bar{ height:4px; border-radius:99px; background:rgba(26,14,4,.18);
  margin:1rem 0 .9rem; overflow:hidden; }
#sh-modal .sh-bar i{ display:block; height:100%; width:25%; border-radius:99px;
  background:#1A0E04; transition:width .5s cubic-bezier(.16,1,.3,1); }

/* ---------- RÉCAPITULATIF cliquable ---------- */
#sh-modal .sh-recap{ display:none; flex-wrap:wrap; gap:.4rem; align-items:center;
  padding:.75rem .85rem; margin-bottom:1.2rem; border-radius:14px;
  background:rgba(255,255,255,.28); border:1px solid rgba(26,14,4,.14); }
#sh-modal .sh-recap.on{ display:flex; }
#sh-modal .sh-recap .lb{ font-size:.58rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6; margin-right:.2rem; }
#sh-modal .sh-chip{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.34rem .7rem; border-radius:99px; border:1px solid rgba(26,14,4,.28);
  background:rgba(255,255,255,.55); color:#1A0E04; font:inherit; font-size:.7rem; font-weight:700;
  transition:background .25s, transform .25s cubic-bezier(.16,1,.3,1); }
#sh-modal .sh-chip:hover{ background:#1A0E04; color:#FFF3E9; transform:translateY(-1px); }
#sh-modal .sh-chip .pen{ font-size:.62rem; opacity:.65; }
#sh-modal .sh-chip:hover .pen{ opacity:1; }

/* ---------- étapes ---------- */
#sh-modal .sh-step{ display:none; animation:shIn .45s cubic-bezier(.16,1,.3,1); }
#sh-modal .sh-step.on{ display:block; }
@keyframes shIn{ from{ opacity:0; transform:translateX(14px); } }
#sh-modal .sh-legend{ font-size:.82rem; line-height:1.6; opacity:.8; margin:0 0 1rem; }

/* ---------- cartes de choix (secteur + services) ---------- */
#sh-modal .sh-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
@media(max-width:600px){ #sh-modal .sh-grid{ grid-template-columns:1fr; } }

#sh-modal .sh-opt{ position:relative; display:flex; align-items:center; gap:.75rem;
  padding:.8rem .9rem; border:1.5px solid rgba(26,14,4,.2); border-radius:15px; cursor:pointer;
  background:rgba(255,255,255,.2); transition:.28s cubic-bezier(.16,1,.3,1); }
#sh-modal .sh-opt:hover{ transform:translateY(-2px); border-color:#1A0E04; }
#sh-modal .sh-opt input{ position:absolute; opacity:0; pointer-events:none; }
#sh-modal .sh-opt .ic{ width:38px; height:38px; flex:0 0 auto; border-radius:11px;
  display:grid; place-items:center; background:rgba(255,255,255,.6);
  border:1px solid rgba(26,14,4,.12); transition:.28s; }
#sh-modal .sh-opt .ic svg{ width:19px; height:19px; fill:none; stroke:#1A0E04;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#sh-modal .sh-opt .tx{ min-width:0; }
#sh-modal .sh-opt b{ display:block; font-size:.84rem; font-weight:700; line-height:1.25; }
#sh-modal .sh-opt small{ display:block; margin-top:2px; font-size:.68rem; opacity:.66; line-height:1.35; }
#sh-modal .sh-opt .tick{ margin-left:auto; width:20px; height:20px; flex:0 0 auto; border-radius:6px;
  border:1.5px solid rgba(26,14,4,.35); display:grid; place-items:center;
  font-size:.65rem; color:#FFF3E9; background:transparent; transition:.28s; }
#sh-modal .sh-opt.radio .tick{ border-radius:50%; }
#sh-modal .sh-opt .tick span{ transform:scale(0); transition:transform .25s cubic-bezier(.34,1.6,.64,1); }
#sh-modal .sh-opt:has(input:checked){ background:rgba(255,255,255,.62); border-color:#1A0E04; }
#sh-modal .sh-opt:has(input:checked) .ic{ background:#1A0E04; }
#sh-modal .sh-opt:has(input:checked) .ic svg{ stroke:#FFF3E9; }
#sh-modal .sh-opt:has(input:checked) .tick{ background:#1A0E04; border-color:#1A0E04; }
#sh-modal .sh-opt:has(input:checked) .tick span{ transform:scale(1); }

/* ---------- champs ---------- */
#sh-modal .sh-field{ display:flex; align-items:center; gap:10px; padding:11px 0;
  border-bottom:1px solid rgba(26,14,4,.2); }
#sh-modal .sh-field label{ font-size:.76rem; font-weight:800; white-space:nowrap; min-width:96px; }
#sh-modal .sh-field input{ flex:1; min-width:0; background:transparent; border:0; outline:none;
  color:#1A0E04; font:inherit; font-size:.9rem; }
#sh-modal .sh-field input::placeholder{ color:rgba(26,14,4,.42); }
#sh-modal .sh-field.err{ border-bottom-color:#8B1E1E; }
#sh-modal .sh-msg{ width:100%; min-height:140px; background:rgba(255,255,255,.24);
  border:1px solid rgba(26,14,4,.18); border-radius:14px; padding:.9rem 1rem; resize:vertical;
  color:#1A0E04; font:inherit; font-size:.9rem; outline:none; }
#sh-modal .sh-msg::placeholder{ color:rgba(26,14,4,.45); }
#sh-modal .sh-msg:focus{ border-color:#1A0E04; }

/* ---------- pied ---------- */
#sh-modal .sh-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid rgba(26,14,4,.2); }
#sh-modal .sh-status{ font-size:.78rem; font-weight:700; line-height:1.45; min-height:1.2em; flex:1; }
#sh-modal .sh-nav{ display:flex; gap:.5rem; flex:0 0 auto; }
#sh-modal .sh-btn{ display:inline-flex; align-items:center; gap:.5rem; height:46px; padding:0 1.25rem;
  border-radius:999px; border:1.5px solid #1A0E04; background:transparent; color:#1A0E04;
  font:inherit; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s, color .3s; }
#sh-modal .sh-btn:hover{ transform:translateY(-2px); }
#sh-modal .sh-btn.solid{ background:#1A0E04; color:#FFF3E9; }
#sh-modal .sh-btn[disabled]{ opacity:.55; cursor:progress; transform:none; }
#sh-modal .sh-btn.hide{ display:none; }

#sh-modal .sh-hp{ position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; opacity:0 !important; }

/* ---------- confirmation ---------- */
#sh-modal .sh-done{ display:none; text-align:center; padding:1.4rem 0 .4rem; }
#sh-modal .sh-done.on{ display:block; animation:shIn .5s cubic-bezier(.16,1,.3,1); }
#sh-modal .sh-done .tk{ width:62px; height:62px; margin:0 auto 1rem; border-radius:50%;
  display:grid; place-items:center; background:#1A0E04; color:#FFF3E9; font-size:1.5rem; }
#sh-modal .sh-done h3{ margin:0; font-size:1.25rem; font-weight:800; letter-spacing:-.02em; }
#sh-modal .sh-done p{ margin:.55rem auto 0; max-width:38ch; font-size:.84rem; line-height:1.7; opacity:.8; }

@media(max-width:600px){
  #sh-modal .sh-panel{ border-radius:22px; }
  #sh-modal .sh-field{ flex-direction:column; align-items:stretch; gap:4px; }
  #sh-modal .sh-field label{ min-width:0; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
  #sh-modal .sh-foot{ flex-direction:column; align-items:stretch; }
  #sh-modal .sh-nav{ justify-content:space-between; }
  #sh-modal .sh-btn{ flex:1 1 auto; justify-content:center; }
}
@media(prefers-reduced-motion:reduce){
  #sh-modal, #sh-modal *{ animation:none !important; transition:none !important; }
}