@font-face {
  font-family: buenos-aires;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/buenos-aires-light.woff2)format("woff2"), url(fonts/buenos-aires-light.woff)format("woff")
}
@font-face {
  font-family: buenos-aires;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/buenos-aires-semi-bold.woff2)format("woff2"), url(fonts/buenos-aires-semi-bold.woff)format("woff")
}
@font-face {
  font-family: buenos-aires;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/buenos-aires-bold.woff2)format("woff2"), url(fonts/buenos-aires-bold.woff)format("woff")
}
/* --- Variables --- */ :root {
  --blue: #4754FF;
  --light-blue: #f0f6ff;
  --yellow: #fff164;
  --gray: #f9fafc;
  --text: #222;
  --primary-foreground: #161637;
}
.clear {
  clear: both;
  height: 10px;
}
.clear50px {
  clear: both;
  height: 50px;
}
/* --- Base --- */
body {
  margin: 0;
  font-family: "buenos-aires", Arial, sans-serif;
  color: var(--text);
  background: var(--gray);
}
/* --- Header --- */
header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: #fff;
}
header img {
  height: 40px;
  margin-right: 15px;
}
header h1 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
header .step {
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
}
/* --- Progress bar --- */
.progress-container {
  width: 100%;
  height: 6px;
  background: #dfe1ff;
}
.progress-bar {
  height: 6px;
  width: 0%;
  background: var(--blue);
  transition: width 0.4s ease;
}
/* --- Section globale --- */
.section {
  display: block;
  padding: 30px 20px;
  text-align: center;
  background: var(--light-blue) url("../img/maison-trio.svg") no-repeat right bottom;
  background-size: 1000px;
  min-height: 70vh;
  position: relative;
}
.section_container {
  width: 60%;
  max-width: 550px;
  margin: auto;
  height: auto;
}
.section_container_lg {
  width: 95%;
  max-width: 1200px;
  margin: auto;
  font-size: 12px;
  text-align: justify;
  bottom: 25px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 15px;
}
.section_container_lg .links {
  display: flex;
  gap: 15px;
}
.section_container_lg a {
  color: #000000;
  text-underline-offset: 4px;
}
.question {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
}
/* --- Étapes internes --- */
.step-content {
  display: none;
}
.step-content.active {
  display: block;
}
/* --- Champs & boutons --- */
.text-left {
  text-align: left;
  font-weight: 700;
}
input[type=text] {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  margin-bottom: 15px;
  border: 1px solid #d7e1f8;
  font-weight: bold;
  box-sizing: border-box;
}
input[type=text]:focus {
  border: 1px solid #4754ff;
}
input::placeholder {
  font-family: "buenos-aires", Arial, sans-serif;
}
button.next {
  background: var(--yellow);
  border: none;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  width: 132px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  gap: 7px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button.next:hover {
  background-color:
    color-mix(in oklab, var(--yellow) 80%, transparent);
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.15);
}
/* --- Notice jaune --- */
.notice {
  width: 95%;
  max-width: 960px;
  border-radius: 10px;
  border: 1px solid #fff164;
  background: #fffbd0;
  color: #5c5c73;
  margin: auto;
  font-size: 14px;
  padding: 15px;
}
/* --- Radio stylisé --- */
.radio-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 200px;
  margin: auto;
}
.radio-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: #fff;
  border-radius: 5px;
  padding: 22px 25px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  position: relative;
}
.radio-card span:first-child {
  font-size: 18px;
  color: #000;
  font-weight: 500;
}
.radio-card input {
  opacity: 0;
  position: absolute;
  right: 0;
}
.radio-mark {
  width: 22px;
  height: 22px;
  border: 1px solid #4754FF;
  border-radius: 50%;
  position: relative;
}
.radio-card input:checked + .radio-mark::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #4754FF;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
}
.radio-card:hover {
  background: #fffbd0;
}
.radio-card input:checked ~ span:first-child {
  font-weight: 600;
  color: #4754FF;
}
/* --- Footer --- */
.footer-allianz {
  background-color: var(--primary-foreground);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  min-height: 440px;
}
.footer-container {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  align-items: flex-start;
  width: 95%;
  max-width: 1200px;
  gap: 40px;
  margin: 0 auto;
}
.logo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.logo-allianz {
  height: 80px;
  margin-bottom: 10px;
}
.footer-col h4 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 20px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col ul li {
  margin-bottom: 10px;
}
.footer-col a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s;
}
.footer-col a:hover {
  opacity: 0.7;
}
.contact-company {
  margin-top: 15px;
  line-height: 1.6;
}
.steps-wrapper {
  min-height: 310px;
}
.back-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  margin: 20px 20px 0 20px;
  font-size: 15px;
  transition: color 0.2s ease;
}
.back-container:hover {
  color: var(--blue);
}
.back-container .arrow {
  font-size: 18px;
  font-weight: bold;
}
.css-q7mezt {
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  flex-shrink: 0;
  fill: currentcolor;
  font-size: 1.5rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.input-error {
  border: 1px solid #d93025 !important;
}
.error-text {
  color: #d93025;
  font-size: 14px;
  margin-bottom: 6px;
  display: none;
  text-align: left;
}
.pac-container:after {
  display: none !important;
}
/* Conteneur des deux colonnes */
.section_container_two_col {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  border-radius: 10px;
  padding: 40px;
  padding-bottom: 15px;
  flex-wrap: nowrap;
  max-width: 1030px;
  margin: auto;
    
}
/* Colonne gauche (paiement) */
.col-left {
  flex: 0 0 55%;
  background: none;
  font-size: 18px;
}
/* Colonne droite (résumé) */
.col-right {
  flex: 0 0 40%;
  background: #fff;
  border-radius: 12px;
  padding: 25px 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
/* Bloc bas sous les colonnes */
.section_bottom_payment {
  border-radius: 10px;
  padding: 30px 40px;
    padding-top: 5px;
  text-align: center;
}
/* Styles généraux */
.col-left h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3em;
}
.secure {
  font-weight: 500;
  margin-bottom: 8px;
}
.montant {
  font-size: 16px;
  margin-bottom: 25px;
}
/* Bouton principal */
.btn-pay {
  background: var(--yellow);
  border: none;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  width: 132px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  gap: 7px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-pay:hover {
  background-color: color-mix(in oklab, var(--yellow) 80%, transparent);
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.15);
}
/* Bloc légal */
.legal {
  font-size: 13px;
  color: #666;
  margin: 10px 0;
}

/*
.custom-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
  user-select: none;
  margin: 20px auto;
  max-width: 820px;
  text-align: left;
     flex-wrap: wrap; 
}
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.custom-checkbox .checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  border: 1px solid #3f51ff;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease;
}
.custom-checkbox .checkmark svg {
  display: none;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #3f51ff;
}
.custom-checkbox input:checked ~ .checkmark svg {
  display: block;
}
.custom-checkbox:hover .checkmark {
  box-shadow: 0 0 0 3px rgba(63, 81, 255, 0.15);
}*/


.custom-checkbox {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
  user-select: none;
  margin: 20px auto;
  max-width: 820px;
  text-align: left;
  flex-wrap: nowrap; /* ❗ empêche la case et le texte de se séparer */
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


.custom-checkbox .checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
   width: 20px;
   height: 20px;
  min-width: 20px;
   min-height: 20px;
  border: 1px solid #3f51ff;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease;
  flex-shrink: 0;    /* ← empêche la réduction en responsive */
  margin-top: 2px;
}

/* Icône check cachée par défaut */
.custom-checkbox .checkmark svg {
  display: none;
  width: 12px;
  height: 12px;
}

/* État coché */
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: #3f51ff;
}
.custom-checkbox input[type="checkbox"]:checked + .checkmark svg {
  display: block;
}

/* Survol */
.custom-checkbox:hover .checkmark {
  box-shadow: 0 0 0 3px rgba(63, 81, 255, 0.15);
}

/* Texte */
.custom-checkbox .checkbox-text {
  flex: 1;
  color: #333;
}
.custom-checkbox .checkbox-text a {
  color: #3f51ff;
  text-decoration: underline;
}


/* Texte */
.custom-checkbox .checkbox-text a {
  color: #000;
  text-decoration: underline;
}
/* Texte final */
.confirm-text {
  font-size: 14px;
  margin: 15px auto;
  color: #333;
  max-width: 700px;
}
/* Liste récapitulatif à droite */
.col-right strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  color: #000;
}
.col-right ul {
  margin: 8px 0 15px 0;
  padding-left: 0;
}
.col-right li {
  list-style: none;
  padding-left: 0;
}
#card-element {
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.p-PaymentMethodSelector {
  display: none !important;
}
.stripe-field {
  margin-bottom: 16px;
}
.stripe-inline {
  display: flex;
  gap: 16px;
}
#card-number, #card-expiry, #card-cvc {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}
select {
  width: 100%;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
  background: #fff;
}

.StripeElement iframe + div p,
.__PrivateStripeElement iframe + div p {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .footer-allianz {
    padding: 40px 20px;
  }
  .logo-allianz {
    height: 60px;
  }
}
@media (max-width: 500px) {
  .section_container {
    width: 80%;
  }
  .notice {
    width: 90%;
  }
    
  .section_container_two_col {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    border-radius: 10px;
    padding: 10px;
    flex-wrap: nowrap;
    max-width: 1030px;
    margin: auto;
    flex-direction: column-reverse;
}
    
     .custom-checkbox {
        align-items: flex-start;
        font-size: 14px;
        line-height: 1.4;
        flex-wrap: nowrap; 
      }
      .custom-checkbox .checkmark {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
      }
    
    #card-element {
        height: 285px !important;
    }
}