/* ===== SKIN LOA 2025 (design only) ===== */

.titre-formulaire-loa-etape-1 {
  color: #fff;
  text-transform: capitalize;
}

/* Overlay / Modal base */
.btpmat-loa .loa-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:none;z-index:9999
}
.btpmat-loa .loa-overlay[data-closed="false"]{display:block}

.btpmat-loa .loa-modal{
  width:min(1090px,96vw);max-height:92vh;overflow:auto;margin:4vh auto;background:#fff;
  border-radius:20px;position:relative
}
.btpmat-loa .loa-close{
  position:absolute;right:16px;top:8px;font-size:28px;line-height:1;background:none;border:0;cursor:pointer;color:#333
}
.btpmat-loa .loa-btn-open{
  display:inline-block;padding:10px 14px;border:0;
  background:#000;color:#fff;font-weight:700;cursor:pointer
}
.btpmat-loa .loa-btn-open:hover{background:#e68900}

/* Layout */
.btpmat-loa .loa-container { display:flex; min-height:460px; align-items:stretch; }
.btpmat-loa .loa-left{
  flex:1;
  background:linear-gradient(135deg,#f27c00,#91000b);
  color:#fff;
  padding:40px;
  display:flex; flex-direction:column; justify-content:center;
}
.btpmat-loa .loa-right{
  flex:1;background:#fff;color:#333;padding:40px;display:flex;
  flex-direction:column;justify-content:center;text-align:left
}

/* Typo & sections */
.btpmat-loa h2{font-weight:700;margin-bottom:8px;font-size:22px}
.btpmat-loa .sub{font-size:14px;margin:0 0 22px;color:#f0f0f0}
.btpmat-loa .section{margin:14px 0}
.btpmat-loa .section-title{font-weight:600;margin:18px 0 10px}

/* Inputs / group */
.btpmat-loa .input-group,
.btpmat-loa .input-addon,
.btpmat-loa input[type="number"],
.btpmat-loa .prefill-btn { border-radius:10px }

.btpmat-loa .input-group{
  display:inline-flex;align-items:center;gap:8px;
}
.btpmat-loa .input-addon{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;font-weight:700
}
.btpmat-loa input[type="number"]{
  height:38px;line-height:38px;padding:0 10px;border:0;width:220px;border-radius:10px
}
.btpmat-loa .prefill{margin-top:8px}
.btpmat-loa .prefill-btn{
  font-size:12px;background:transparent;border:1px solid rgba(255,255,255,.5);
  color:#fff;border-radius:8px;padding:6px 8px;margin-right:8px;cursor:pointer
}
.btpmat-loa .prefill-btn:hover{background:rgba(255,255,255,.1)}

/* Toggles / radios */
.btpmat-loa .toggle-group .btn{
  display:inline-block;padding:8px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.35); color:#fff;background:transparent;
  margin-right:6px;cursor:pointer
}
.btpmat-loa .btn-check{position:absolute;opacity:0;pointer-events:none}
.btpmat-loa .btn-check:checked + .btn{background:#fff;color:#222;border-color:#fff}

.btpmat-loa .inline-radios{display:flex;gap:35px;align-items:center;flex-wrap:wrap;margin-left: 19px;}
.btpmat-loa .radio{display:flex;align-items:center;gap:6px}
.btpmat-loa .radio span{color:#fff}

/* CTA */
.btpmat-loa .cta-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;justify-content:flex-start}
.btpmat-loa .btn-primary,
.btpmat-loa .btn-secondary{
  border-radius:10px;padding:12px 16px;font-weight:700;cursor:pointer;min-width:220px;text-align:center
}
.btpmat-loa .btn-primary{background:#ffffff;border:0;color:#222}
.btpmat-loa .btn-secondary{background:transparent;border:3px solid #fff;color:#fff}
.btpmat-loa .btn-secondary:hover{background:rgba(255,255,255,.12)}

/* Étape 2 (gauche) */
.btpmat-loa .result-intro{ text-align:center; font-size:15px; }
.btpmat-loa .result-value{
  text-align:center; font-size:37px; background:#ffffff3a; color:#fff;
  font-weight:800; padding:15px; border-radius:10px; margin:8px auto
}
.btpmat-loa .result-notes{ text-align:center; font-size:12px; color:#fff }

/* Droite : Étape 1 */
.btpmat-loa .benefits{list-style:none;margin:20px 0 0;padding:0}
.btpmat-loa .benefits li{
  padding:10px 12px; border:1px solid #e9ecef; border-radius:8px; margin-bottom:8px;
}

/* Droite : Étape 2 (logo + cards 2x2 + légal) */
.btpmat-loa .right-logo{max-width:400px;margin:0 auto 25px auto;display:block}
.btpmat-loa .cards-grid{margin:0; padding:0}
.btpmat-loa .cards-grid .row{--bs-gutter-x:1rem; --bs-gutter-y:1rem;}
.btpmat-loa .card{border:1px solid #e9ecef; border-radius:12px}
.btpmat-loa .card-title{
  color:#C81831; font-weight:800; text-transform:uppercase; text-align:center; margin:0;
}
.btpmat-loa .legal-text{font-size:11px;margin-top:12px; text-align: center;}

/* Droite : Étape 3 image plein cadre */
.btpmat-loa .right-image{flex:1; position:relative; min-height:460px; padding:0; background:#000}
.btpmat-loa .right-image img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* Misc */
.btpmat-loa .center{text-align:center}
.btpmat-loa .muted{color:#d9d9d9;font-size:12px}

/* Responsive */
@media (max-width: 992px){
  .btpmat-loa .loa-container{flex-direction:column}
  .btpmat-loa .loa-right{order:-1}
  .btpmat-loa input[type="number"]{width:100%}
}

/* Version mobile */
@media (max-width: 576px) {
  .btpmat-loa .loa-modal {
    width: 94vw;          /* laisse un petit bord à gauche/droite */
    margin: 3vh auto;     /* espace haut/bas */
    border-radius: 14px;  /* coins un peu moins gros sur mobile */
  }

  .btpmat-loa .loa-left,
  .btpmat-loa .loa-right {
    padding: 20px;        /* réduit padding interne */
  }

  .btpmat-loa h2 {
    font-size: 18px;
    text-align: center;
  }

  .btpmat-loa .btn-primary,
  .btpmat-loa .btn-secondary {
    min-width: unset;     /* pas de min trop large */
    width: 100%;          /* boutons plein écran */
  }

  .btpmat-loa .cta-row {
    flex-direction: column;
    gap: 10px;
  }

  .btpmat-loa .inline-radios {
    flex-direction: column;
    gap: 12px;
    margin-left: 0;
  }

  .btpmat-loa .result-value {
    font-size: 26px;      /* réduit la taille */
    padding: 10px;
  }

  .btpmat-loa .loa-form-modern input,
  .btpmat-loa .loa-form-modern textarea {
    font-size: 14px;
    padding: 10px 12px;
  }
}


/* ===== FORMULAIRE MODERNE (étape 3) ===== */
.btpmat-loa .loa-form-modern .form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.btpmat-loa .loa-form-modern input,
.btpmat-loa .loa-form-modern textarea {
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  background: rgba(255,255,255,0.9);
  color: #222;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) inset;
  transition: all 0.2s ease;
}

.btpmat-loa .loa-form-modern input:focus,
.btpmat-loa .loa-form-modern textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px #ff9800;
}

.btpmat-loa .loa-form-modern textarea {
  resize: vertical;
  min-height: 100px;
}

.btpmat-loa .form-check-modern {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 22px;
  font-size: 13px;
  color: #fff;
}

.btpmat-loa .form-check-modern input[type="checkbox"] {
  margin-top: 3px;
  transform: scale(1.2);
  accent-color: #ff9800; /* moderne */
}

.btpmat-loa .btn-primary {
  background: #ff9800;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btpmat-loa .btn-primary:hover {
  background: #e68900;
}