/* =====================================================
   RESET & GLOBAL
===================================================== */
#custom-loading { display: none; }

/* Décor de fond (bulles) */
body::before,
body::after,
.container::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  user-select: none;
}

body::before {
  width: 250px; height: 250px;
  top: 10%; left: -5%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), rgba(255,255,255,.02));
  animation: float-slow 15s ease-in-out infinite;
}
body::after {
  width: 180px; height: 180px;
  top: 60%; right: -3%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02));
  animation: float-medium 12s ease-in-out infinite reverse;
}
.container::before {
  width: 120px; height: 120px;
  top: 30%; right: 10%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.1), rgba(255,255,255,.02));
  animation: float-fast 8s ease-in-out infinite;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  z-index: 10;
}

#hipay-modal-title {
     font-size: 28px;
    font-weight: bold;
}

/* =====================================================
   RÉASSURANCES (carte à droite étape 2)
===================================================== */
.reassurance { display: none !important; } /* masqué par défaut */

.reassurance-section{
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
.reassurance-title{
  font-size:24px; font-weight:700; color:#2d3748;
  margin-bottom:30px; text-align:center;
}
.reassurance-item{
  display:flex; align-items:flex-start; gap:20px;
  margin-bottom:30px; padding:20px; background:#fff;
  border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.04);
  border:2px solid transparent; transition:.3s;
}
.reassurance-item:hover{
  border-color:#667eea; transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102,126,234,.15);
}
.reassurance-icon{
  width:50px; height:50px; flex-shrink:0;
  background: linear-gradient(135deg,#3a7bd5,#3a6073);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; box-shadow:0 4px 12px rgba(102,126,234,.3);
}
.reassurance-content h3{ font-size:18px; font-weight:600; color:#2d3748; margin-bottom:8px; }
.reassurance-content p{ color:#4a5568; line-height:1.5; font-size:15px; }

/* =====================================================
   FORMULAIRE / CHECKOUT
===================================================== */
#hipay-test{
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
  position: relative;
  height: 100%;
}
.form-title{
  font-size:24px; font-weight:700; color:#2d3748;
  margin-bottom:30px; text-align:center;
}

/* conteneurs larges */
.form-main, .modal-acquired, .modal-acquired-content, .content { width: 100%; }
.content{ margin-top:20px !important; }

/* Inputs */
.input-container{ margin-bottom:20px; }
.input-container label{
  display:block; margin-bottom:8px; font-size:14px; font-weight:600; color:#2d3748;
}
.cc-mail{ margin-top:30px !important; }

.form-control{
  width:100%; padding:12px 16px !important;
  border:2px solid #e2e8f0 !important; border-radius:12px;
  font-size:16px; background:#fff; transition:.3s; font-family:inherit;
}
.form-control:focus{ outline:0; border-color:#667eea; box-shadow:0 0 0 3px rgba(102,126,234,.1); }
.form-control:hover{ border-color:#667eea; }

/* Selects masqués */
.select, .country-selector{ position:relative; display:none !important; }
.select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#fff; cursor:pointer; padding-right:45px;
}
.select svg{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; stroke:#64748b; stroke-width:2; pointer-events:none;
}

/* Checkbox */
.checkbox-container{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer; margin-bottom:25px;
}
.checkbox{
  width:20px; height:20px; border:2px solid #45494f; border-radius:4px;
  display:flex; align-items:center; justify-content:center; transition:.3s; flex-shrink:0; margin-top:2px;
}
.checkbox-container input:checked + .checkbox{ background:linear-gradient(135deg,#3a7bd5,#3a6073); border-color:#667eea; }
.checkbox-container input:checked + .checkbox .checkmark::after{ content:"✓"; color:#fff; font-size:12px; font-weight:700; }
.checkbox-container .text{ font-size:13px; color:#4a5568; line-height:1.4; }
.checkbox-container .text a{ color:#667eea; text-decoration:none; }
.checkbox-container .text a:hover{ text-decoration:underline; }

/* CTA */
.simpay-next-step{
  display:inline-block; width:100%;
  padding:14px 22px; font-size:1.1rem; font-weight:600;
  border:0; border-radius:8px; color:#fff; cursor:pointer;
  text-align:center; transition:.25s; position:relative;
  background: linear-gradient(90deg,#007bff,#00c6ff);
  box-shadow: 0 4px 12px rgba(0,174,255,.3);
}
.simpay-next-step:hover{
  background: linear-gradient(90deg,#0056d2,#0099cc);
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0,174,255,.45);
}
.simpay-next-step i{ margin-left:10px; }

.cta-note{ margin-top:8px; font-size:.85rem; color:#555; text-align:center; }
.cta-note strong{ color:#007bff; }
.cta-note {
  display: none !important;
}
/* Bloc paiement sécurisé */
.secure-payment{
  display:flex; align-items:center; gap:12px; padding:16px;
  background: rgba(102,126,234,.05); border-radius:12px; margin-bottom:20px;
}
.secure-payment .img-wrap img{ width:24px; height:24px; }
.secure-payment .text-wrap p{ font-size:13px; color:#4a5568; margin:0; }

/* CGU */
.cgu-text-modal-hipay{ font-size:11px !important; color:#64748b; line-height:1.4; margin-top:20px; }
.cgu-text-modal-hipay a{ color:#667eea; text-decoration:none; }
.cgu-text-modal-hipay a:hover{ text-decoration:underline; }

/* Étape 2 – encart prix */
.price-container{
  background: linear-gradient(135deg, rgba(102,126,234,.1), rgba(118,75,162,.1));
  border:2px solid #667eea; border-radius:16px;
  padding:20px; margin-bottom:25px;
  display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap;
  text-align:center;
  position: relative;
}
.price-container #hipay-pay-message{ font-size:16px; color:#2d3748; font-weight:600; margin:0; }
.big-price{ font-size:35px; font-weight:700; color:#10b981; }
.big-price.mobile{ display:none; }
.price-container img{ max-height:30px; }
.limited {
      position: absolute;
    top: -15px;
    left: 20px;
    background: linear-gradient(135deg, #d93c49, #89050b);
    color: #fff;
    padding: 2px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 4px 12px rgb(193 75 101 / 30%);
}
.reassurance{
  display:flex !important;
  flex-direction: unset !important;
  gap:10px !important;               /* compact */
  justify-content:center !important;
  flex-wrap:wrap !important;         /* passe à la ligne sur mobile */
  margin-top:12px !important;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 15px;       /* compact */
  border-radius:999px;    /* pastille/pill */
  font-size:13px;
  font-weight:600;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  white-space:nowrap;
}

/* Couleurs vives/pastel */
.badge-pay{
  background:#E9F9EF;     /* vert clair */
  color:#127C3D;
  border:1px solid #BDE8CB;
}
.badge-users{
  background:#EAF2FF;     /* bleu clair */
  color:#1257B1;
  border:1px solid #C7DAFF;
}
.badge-support{
  background:#F4EAFE;     /* violet clair */
  color:#6B2FB7;
  border:1px solid #E1D0FB;
}




/* Split input carte bancaire */
.split-input{
  display:grid; grid-template-columns:2fr 1fr 1fr; /* desktop */
  gap:10px; margin-bottom:25px;
}
.split-input .input-container{ min-width:0; }
.split-input input{ width:100%; min-width:0; }
.input-container.cc-number,
.input-container.cc-exp,
.input-container.cc-cvc{ grid-column:span 1; }

/* Checkout container (logos après CTA) */
.hipay-checkout-container{
  display:flex; flex-direction:column; align-items:center; gap:20px; margin-bottom:30px;
}
.payment-button{
  width:100%; background:linear-gradient(135deg,#10b981,#059669);
  color:#fff; border:0; padding:18px 24px; border-radius:12px;
  font-size:18px; font-weight:700; cursor:pointer; transition:.3s;
}
.payment-button:hover{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(16,185,129,.3); }
.hipay-checkout-container img{ max-width:200px; opacity:.8; }

.step-2{ display:none; 
margin-top: 40px !important;} /* sera forcé visible côté JS */
.force-show{ display:block !important; }

/* Réassurance dans step 2 */
.step-2 .reassurance{ display:flex; flex-direction:column; gap:15px; margin-bottom:25px; }
.step-2 .reassurance-item{
  display:flex; align-items:center; gap:12px;
  padding:15px; background:rgba(248,250,252,.8); border-radius:12px; border:1px solid #e2e8f0;
}
.step-2 .reassurance-item img{ width:30px; height:30px; }
.step-2 .reassurance-content .reassurance-title{
  font-size:14px; font-weight:600; color:#2d3748; margin:0 0 4px 0; line-height:1.5em; padding-bottom:5px; text-align:left;
}
.step-2 .reassurance-content .reassurance-text{
  font-size:12px; color:#64748b; margin:0; text-align:left;
}

/* Erreurs */
.component-error, .alert-danger{ color:#e53e3e; font-size:12px; margin-top:5px; }

/* Sprites */
.sprites{ display:none; }

/* Prix récap (gauche) */
.price-summary{
  background: linear-gradient(135deg, rgba(102,126,234,.1), rgba(118,75,162,.1));
  border:2px solid #667eea; border-radius:16px;
  padding:25px; margin-bottom:30px; text-align:center;
}
.price-label{ font-size:16px; color:#4a5568; margin-bottom:8px; }
.price-amount{ font-size:36px; font-weight:700; color:#2d3748; margin-bottom:5px; }
.price-description{ font-size:14px; color:#64748b; }

/* Badge garantie */
.guarantee-badge{
  position:absolute; top:-15px; right:30px;
  background:linear-gradient(135deg,#10b981,#059669); color:#fff;
  padding:8px 16px; border-radius:20px; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px; box-shadow:0 4px 12px rgba(16,185,129,.3);
}

/* Étapes génériques */
.step{ display:none; }

/* =====================================================
   CARTE GAUCHE – APERÇU
===================================================== */
.card{ padding:20px 40px; height:100% !important; }

.preview-card .chip{
  background:#e8f5e8; color:#2e7d2e; padding:6px 12px; border-radius:20px;
  font-size:12px; font-weight:600; display:inline-block; margin-bottom:20px;
}
.preview-card h1{ font-size:28px; margin:0 0 12px; color:#1a1a1a; font-weight:700; }
.preview-card .intro{ margin:6px 0 12px; color:#666; font-size:16px; }
.preview-card .muted{ color:#6b7a90; font-weight:500; }

.preview-card .score-preview{ margin-top:10px; }
.preview-card .category-scores .category{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:10px; background:#f6f9fc; margin:0;
}

.preview-card .unlock-text{
  margin:18px 0 10px; font-weight:700; text-align:center; font-size:1rem; color:#2e7cf6;
}

.preview-card .features ul{ margin:0; padding-left:18px; color:#42526e; line-height:1.55; }
.preview-card .features li{ margin:4px 0; }

.preview-card .social-proof{
  margin-top:50px; font-size:.9rem; color:#52637e; text-align:center;
  background:#f4f7fb; border:1px solid #e8eef6; padding:10px 12px; border-radius:10px;
}

/* Blocs bénéfices (3 colonnes) */
.features-inline{
  display:flex; justify-content:space-between; gap:8px; margin:12px 0; flex-wrap: wrap;
}
.features-inline span{ flex:1; text-align:center; }
.features-inline .feature{
  flex:1; text-align:center; padding:10px 10px; font-size:1rem; font-weight:500;
  color:#2e3a59; background:#f5f8fc; border:1px solid #e1e8f0; border-radius:8px; transition:background .2s;
}
.features-inline .feature:nth-child(1){ background:#eafaf1; border:1px solid #c7eed8; color:#1f7a4d; }
.features-inline .feature:nth-child(2){ background:#eef6ff; border:1px solid #c7defc; color:#1b63c7; }
.features-inline .feature:nth-child(3){ background:#fdf1f6; border:1px solid #f6c9dc; color:#a03167; }
.features-inline .feature:hover{ background:#eaf2fb; }

/* Bloc score flouté */
.score-preview{
  background: linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);
  border-radius:12px; padding:24px; position:relative; margin-bottom:24px; overflow:hidden;
}
.blur-score{ filter:blur(6px); user-select:none; position:relative; }
.blur-score::after{
  content:"🔒"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:20px; z-index:2;
}
.total-score{ text-align:center; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid #ddd; }
.hidden-score{ font-size:36px; font-weight:700; color:#0066cc; margin-bottom:8px; }
.hidden-level{
  background:#ff9500; color:#fff; padding:6px 16px; border-radius:20px;
  font-weight:600; font-size:14px; display:inline-block;
}
.category-scores{ display:flex; flex-direction:column; gap:12px; }
.category{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; background:rgba(248,249,250,.8); border-radius:8px;
}
.cat-name{ font-weight:500; color:#374151; }
.cat-score{ font-weight:600; color:#0066cc; font-size:14px; }

.unlock-text{ text-align:center; color:#495057; font-weight:600; margin:16px 0; }
.features{ background:#f8f9fa; border-radius:8px; padding:16px; margin-bottom:24px; }
.features ul{ margin:0; padding-left:16px; color:#666; }
.features li{ margin-bottom:4px; }
.price-cta{ text-align:center; }
.price{ font-size:18px; font-weight:700; margin-bottom:8px; color:#1a1a1a; }
.reassurance{ font-size:14px; color:#666; margin-bottom:20px; }
.unlock-cta {
  display: none !important; /* masqué par défaut */
}
/* =====================================================
   ANIMATIONS
===================================================== */
@keyframes float-slow{
  0%,100%{ transform:translateY(0) translateX(0) scale(1); opacity:.15; }
  25%{ transform:translateY(-30px) translateX(20px) scale(1.1); opacity:.2; }
  50%{ transform:translateY(-10px) translateX(-15px) scale(.9); opacity:.1; }
  75%{ transform:translateY(-40px) translateX(10px) scale(1.05); opacity:.18; }
}
@keyframes float-medium{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0); opacity:.12; }
  33%{ transform:translateY(-25px) translateX(-20px) rotate(120deg); opacity:.18; }
  66%{ transform:translateY(-15px) translateX(25px) rotate(240deg); opacity:.08; }
}
@keyframes float-fast{
  0%,100%{ transform:translateY(0) translateX(0) scale(1); opacity:.1; }
  20%{ transform:translateY(-20px) translateX(15px) scale(1.2); opacity:.15; }
  40%{ transform:translateY(-35px) translateX(-10px) scale(.8); opacity:.5; }
  60%{ transform:translateY(-10px) translateX(20px) scale(1.1); opacity:.12; }
  80%{ transform:translateY(-25px) translateX(-5px) scale(.9); opacity:.08; }
}

/* =====================================================
   RESPONSIVE
===================================================== */

/* TABLETTE <= 979px */
@media (max-width: 979px){
  .container{ padding:20px; }
  #hipay-test{ padding:25px; }
  .payment-title{ font-size:24px; }

  /* prix */
  .price-container{ flex-direction:column; text-align:center; }
  .big-price{ display:none; }
  .big-price.mobile{ display:block; font-size:28px; }

  /* grille CB */
  .split-input{ grid-template-columns: 1fr 1fr; }
  .input-container.cc-number{ grid-column: 1 / -1; }

  /* réassurances step 2 */
  .step-2 .reassurance{ gap:12px; }
  .step-2 .reassurance-item{ flex-direction:column; text-align:center; gap:10px; padding:12px; }
  .checkbox-container{ flex-direction:row; gap:25px; }
  .checkbox{ align-self:flex-start; }
  .reassurance-icon{ margin:0 auto !important; }

  #hipay-modal-title{ font-size:28px !important; text-align:center; }
  #hipay-modal-subtitle{ font-size:16px; text-align:center; line-height:1.5em; }
  .secure-payment .img-wrap img{ height:50px !important; width:50px !important; }
  #hipay-test{ width:100% !important; }
  .text-wrap{ line-height:1.2em; }
  .modal-acquired-content{ margin-top:20px !important; }

  /* preview gauche */
  .preview-card h1{ font-size:24px; }
  .preview-card .intro{ font-size:15px; margin-bottom:24px; }
  .score-preview{ padding:20px; margin-bottom:20px; }
  .hidden-score{ font-size:28px; }
  .hidden-level{ padding:5px 12px; font-size:13px; }
  .total-score{ margin-bottom:20px; padding-bottom:12px; }
  .category-scores{ gap:10px; }
  .category{ padding:10px; }
  .cat-name{ font-size:14px; }
  .cat-score{ font-size:13px; }
  .features{ padding:14px; margin-bottom:20px; }
  .price{ font-size:16px; }
  .reassurance{ font-size:13px; }
  .blur-score::after{ font-size:16px; }
  #col-payment {
    margin-bottom: 50px !important;
  }
  .input-container {
    margin-bottom: 0px !important;
  }
  .features-inline {
    flex-direction: column  !important;
  }
  .features-inline .feature {
    width: 100% !important;
  }
  .unlock-cta {
    display: block !important; /* affiché sur mobile */
    width: 100%;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: 0;
    padding: 18px 24px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
    margin-bottom: 30px;
    margin-top: 30px !important;
    text-align: center;
  }
  .unlock-text {
    display: none !important;
  }
}

/* MOBILE <= 480px */
@media (max-width: 480px){
  .split-input{ grid-template-columns: 1fr; }
  .split-input .input-container{ grid-column: 1 / -1; }

  .payment-title{ font-size:20px; }

  .preview-card h1{ font-size:22px; }
  .score-preview{ padding:16px; }
  .hidden-score{ font-size:24px; }
  .category{ padding:8px; flex-wrap:wrap; gap:4px; }
  .cat-name, .cat-score{ font-size:13px; }
  .price{ font-size:15px; line-height:1.3; }
  .reassurance{ font-size:12px; line-height:1.4; }
  .card {
    padding: 20px !important;
  }
}

/* ADJUSTS between 980 and 1500 */
@media (min-width: 980px) and (max-width: 1500px){
  #col-payment{ padding-left:30px !important; }
  #custom-loading{ padding-left:20px !important; padding-right:20px !important; }
}

@media (min-width: 981px) and (max-width: 1400px){
  /* grille CB */
  .split-input{ grid-template-columns: 1fr 1fr; }
  .input-container.cc-number{ grid-column: 1 / -1; }
}