/* ═══════════════════════════════════════════════════════════════
   Calculateur de prix — section "Création de site internet" (/tarifs/)
   Réutilise les tokens (--ink,--mu,--line,--shadow-*,--r,--ease) déjà
   déclarés dans page-tarifs.css et le pattern modal existant
   (.tw-popup-overlay/.tw-popup-box) pour rester visuellement identique.
═══════════════════════════════════════════════════════════════ */

/* ── Overlay / box : mêmes valeurs que le popup devis existant ── */
.tpcfg-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(4,17,38,.85);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;padding:20px;
}
.tpcfg-overlay.open{opacity:1;pointer-events:auto;}
.tpcfg-box{
  --tpcfg-accent:var(--c1,#06b6d4);
  background:#fff;border-radius:var(--r,20px);
  width:100%;max-width:980px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  position:relative;box-shadow:0 32px 80px rgba(0,0,0,.3);
  transform:scale(.96) translateY(20px);transition:transform .3s ease;
}
.tpcfg-overlay.open .tpcfg-box{transform:scale(1) translateY(0);}
/* Zone scrollable interne : le bouton fermer reste hors de ce conteneur donc fixe visuellement */
.tpcfg-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tpcfg-scroll::-webkit-scrollbar{display:none;width:0;height:0;}
.tpcfg-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:32px;height:32px;border-radius:50%;border:none;
  background:#f1f5f9;color:#64748b;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.tpcfg-close:hover{background:#e2e8f0;color:#0f172a;}

/* ── Layout 2 colonnes : config à gauche, récap sticky à droite ── */
.tpcfg-layout{display:grid;grid-template-columns:1fr 300px;gap:0;}
@media(max-width:760px){.tpcfg-layout{grid-template-columns:1fr;}}
.tpcfg-left{padding:32px 32px 28px;display:flex;flex-direction:column;gap:22px;}
@media(max-width:640px){.tpcfg-left{padding:24px 20px 20px;}}

.tpcfg-head{display:flex;align-items:center;gap:14px;}
.tpcfg-head-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.tpcfg-eyebrow{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0 0 3px;}
.tpcfg-title{font-size:19px;font-weight:800;color:var(--ink,#0f172a);margin:0;}
.tpcfg-lead{font-size:12.5px;color:var(--mu,#64748b);line-height:1.55;margin:0;}

.tpcfg-group{display:flex;flex-direction:column;gap:10px;}
.tpcfg-gtitle{font-size:12px;font-weight:800;color:var(--ink,#0f172a);margin:0;}
.tpcfg-base-desc{font-size:12.5px;color:var(--mu,#64748b);background:#f8fafc;border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:10px 12px;margin:0;line-height:1.5;}

/* stepper pages */
.tpcfg-stepper{display:flex;align-items:center;gap:12px;}
.tpcfg-step-btn{
  width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line,#e2e8f0);
  background:#fff;cursor:pointer;font-size:16px;font-family:inherit;color:#64748b;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s;
}
.tpcfg-step-btn:hover:not(:disabled){background:var(--tpcfg-accent);border-color:var(--tpcfg-accent);color:#fff;}
.tpcfg-step-btn:disabled{opacity:.35;cursor:not-allowed;}
.tpcfg-step-val{font-size:15px;font-weight:800;color:var(--ink,#0f172a);min-width:26px;text-align:center;}

/* select palier produits */
.tpcfg-select-wrap{position:relative;}
.tpcfg-select{
  width:100%;padding:10px 36px 10px 14px;appearance:none;
  background:#fff;border:1.5px solid var(--line,#e2e8f0);border-radius:10px;
  font-family:inherit;font-size:13px;color:var(--ink,#0f172a);cursor:pointer;
}
.tpcfg-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:10px;color:#94a3b8;pointer-events:none;}

/* options — grille de checkboxes premium */
.tpcfg-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media(max-width:640px){.tpcfg-options{grid-template-columns:1fr;}}
.tpcfg-opt{
  display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  padding:9px 10px;border-radius:10px;border:1.5px solid var(--line,#e2e8f0);
  transition:border-color .15s,background .15s;
}
.tpcfg-opt:hover{border-color:var(--tpcfg-accent);}
.tpcfg-opt input{display:none;}
.tpcfg-opt-box{
  width:17px;height:17px;flex-shrink:0;border-radius:5px;
  border:1.5px solid #cbd5e1;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
}
.tpcfg-opt-box i{font-size:8px;color:#fff;opacity:0;transition:opacity .1s;}
.tpcfg-opt input:checked ~ .tpcfg-opt-box{background:var(--tpcfg-accent);border-color:var(--tpcfg-accent);}
.tpcfg-opt input:checked ~ .tpcfg-opt-box i{opacity:1;}
.tpcfg-opt input:checked ~ .tpcfg-opt-label{color:var(--ink,#0f172a);font-weight:700;}
.tpcfg-opt:has(input:checked){background:color-mix(in srgb, var(--tpcfg-accent) 6%, #fff);border-color:var(--tpcfg-accent);}
.tpcfg-opt-label{flex:1;font-size:12.5px;color:var(--body,#334155);line-height:1.35;}
.tpcfg-opt-label em{font-style:normal;color:#94a3b8;font-size:11px;}
.tpcfg-opt-price{font-size:11.5px;font-weight:700;color:var(--tpcfg-accent);white-space:nowrap;}

/* ── Récap sticky à droite ── */
.tpcfg-right{background:#f8fafc;border-left:1px solid var(--line,#e2e8f0);border-radius:0 var(--r,20px) var(--r,20px) 0;}
@media(max-width:760px){.tpcfg-right{border-left:none;border-top:1px solid var(--line,#e2e8f0);border-radius:0;}}
.tpcfg-recap{position:sticky;top:0;padding:32px 26px 28px;display:flex;flex-direction:column;gap:14px;}
@media(max-width:640px){.tpcfg-recap{padding:24px 20px;}}
.tpcfg-r-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin:0;}

.tpcfg-r-meta{display:flex;flex-direction:column;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--line,#e2e8f0);}
.tpcfg-r-meta div{display:flex;justify-content:space-between;font-size:12px;}
.tpcfg-r-meta span{color:var(--mu,#64748b);}
.tpcfg-r-meta strong{color:var(--ink,#0f172a);font-weight:700;text-align:right;}

.tpcfg-r-lines{display:flex;flex-direction:column;max-height:150px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.tpcfg-r-lines::-webkit-scrollbar{display:none;width:0;height:0;}
.tpcfg-r-opt{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;padding:5px 0;border-bottom:1px solid #eef2f6;}
.tpcfg-r-opt span{color:var(--ink,#0f172a);}
.tpcfg-r-opt strong{color:var(--tpcfg-accent);white-space:nowrap;font-weight:700;}
.tpcfg-r-empty{font-size:11.5px;color:#94a3b8;font-style:italic;margin:4px 0;}

.tpcfg-r-totals{display:flex;flex-direction:column;padding-top:6px;border-top:1px solid var(--line,#e2e8f0);}
.tpcfg-r-line{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;}
.tpcfg-r-line span{color:var(--mu,#64748b);}
.tpcfg-r-line strong{color:var(--ink,#0f172a);font-weight:700;}
.tpcfg-r-vat strong{color:#94a3b8;font-weight:600;}

.tpcfg-r-ttc{display:flex;align-items:baseline;justify-content:space-between;padding-top:6px;}
.tpcfg-r-ttc span:first-child{font-size:13px;font-weight:800;color:var(--ink,#0f172a);}
.tpcfg-r-amount{
  font-size:26px;font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--tpcfg-accent),var(--c2,#0891b2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tpcfg-r-vatnote{font-size:10px;color:#94a3b8;margin:-8px 0 0;}

.tpcfg-r-time{
  display:flex;align-items:center;gap:7px;font-size:11.5px;color:#0f766e;
  background:rgba(15,118,110,.08);border:1px solid rgba(15,118,110,.18);
  border-radius:8px;padding:8px 11px;
}
.tpcfg-r-time strong{color:#0f766e;}

.tpcfg-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:44px;padding:0 16px;margin-top:4px;
  font-size:13.5px;font-weight:700;font-family:inherit;
  color:#fff;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,#2ec8e8 0%,#1fb7d8 50%,#12a9cb 100%);
  box-shadow:0 6px 20px rgba(34,211,238,.25);
  transition:transform .3s ease,box-shadow .3s ease;
}
.tpcfg-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(34,211,238,.35);}
.tpcfg-cta i{font-size:12px;}
.tpcfg-r-disclaimer{font-size:10px;color:#94a3b8;margin:0;text-align:center;line-height:1.4;}