:root{
    --purple-dark:#2b1250;
    --purple-accent:#5b2a86;
    --orange:#f0632a;
    --bg-lav:#f3eefb;
    --border-grey:#e2dfe6;
    --text-grey:#6b6b76;
    --text-dark:#221a33;
    --input-bg:#ffffff;
  }

  *{box-sizing:border-box;}

  html,body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    overflow-x:hidden;           /* prevents any residual horizontal scroll on mobile */
    font-family:"Helvetica Neue", Arial, sans-serif;
    color:var(--text-dark);
  }

  .page{
    display:flex;
    height:100vh;
    overflow:hidden;
    width:100%;
    max-width:100vw;
  }

  /* LEFT SCROLLABLE COLUMN - scrollbar hidden but still scrollable */
  .left-col{
    flex:1 1 58%;
    min-width:0;                 /* lets flex children shrink instead of overflowing */
    height:100vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;      /* Firefox */
    -ms-overflow-style:none;   /* IE/Edge */
  }
  .left-col::-webkit-scrollbar{
    display:none;              /* Chrome/Safari */
    width:0;
    height:0;
  }

  .logo-bar{
    padding:28px 60px 20px;
  }

  .logo{
    font-family:Georgia, "Times New Roman", serif;
    font-weight:700;
    font-style:italic;
    font-size:26px;
    color:var(--purple-dark);
    letter-spacing:1px;
  }

  .logo img{
    width:150px;
    max-width:50%;
    height:auto;
    display:block;
  }

  .hero{
    background:var(--bg-lav);
    padding:10px 60px 45px;
  }

  .hero h1{
    font-size:36px;
    font-weight:800;
    color:var(--purple-dark);
    margin:10px 0 18px;
    line-height:1.15;
  }

  .hero p{
    font-size:15px;
    line-height:1.6;
    color:var(--text-dark);
    max-width:520px;
    margin:0;
  }

  .form-wrap{
    padding:40px 60px 80px;
  }

  section.block{
    margin-bottom:32px;
  }

  section.block h2{
    font-size:18px;
    font-weight:700;
    color:#2b1250;
    margin:0 0 6px;
	padding-bottom: 12px;
  }

  section.block > p.desc{
    font-size:13.5px;
    color:var(--text-grey);
    line-height:1.55;
    margin:0 0 20px;
    max-width:560px;
  }

  hr.divider{
    border:none;
    border-top:1px solid var(--border-grey);
    margin:0 0 32px;
  }

  label.field-label{
    display:block;
    font-size:13.5px;
    /*font-weight:700;*/
    color:var(--text-dark);
    margin-bottom:8px;
  }

  .field{
    width:100%;
    max-width:100%;
    padding:14px 16px;
    border:1px solid var(--border-grey);
    border-radius:8px;
    font-size:14px;
    color:var(--text-dark);
    background:var(--input-bg);
    margin-bottom:6px;
    outline:none;
    transition:border-color .15s ease;
    font-family:inherit;
    appearance:none;
    -webkit-appearance:none;
  }

  select.field{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%236b6b76'/></svg>");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:36px;
  }

  .field::placeholder{
    color:#8f8c98;
  }

  .field:focus{
    border-color:var(--purple-accent);
  }

  .field:disabled{
    background:#f2f1f4;
    color:#a6a3ad;
    cursor:not-allowed;
  }

  .error-msg{
    color:var(--orange);
    font-size:12.5px;
    min-height:16px;
    margin-bottom:14px;
  }

  .row-2{
    display:flex;
    gap:16px;
  }

  .row-2 .field-group{
    flex:1;
    min-width:0;                 /* stops long placeholder text forcing overflow */
  }

  .field-group{
    margin-bottom:16px;
    min-width:0;
  }

  .phone-row{
    display:flex;
    gap:8px;
    align-items:stretch;
    margin-bottom:6px;
  }

  .phone-code{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    min-width:76px;
    background:#efeaf6;
    border:1px solid var(--border-grey);
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    color:var(--purple-accent);
    white-space:nowrap;
    user-select:none;
    pointer-events:none;
  }

  .phone-row .field{
    flex:1;
    min-width:0;
    margin-bottom:0;
  }

  /* checkbox / radio lists */
  .check-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:6px 0 6px;
  }

  .check-item, .radio-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    color:var(--text-dark);
    line-height:1.5;
    cursor:pointer;
  }

  .check-item input[type="checkbox"],
  .radio-item input[type="radio"]{
    width:18px;
    height:18px;
    margin-top:1px;
    accent-color:var(--purple-accent);
    flex-shrink:0;
  }

  .radio-row{
    display:flex;
    gap:32px;
    align-items:center;
    margin:6px 0 6px;
    flex-wrap:wrap;
  }

  .radio-row .radio-item{
    gap:6px;
  }

  .field-note{
    font-size:14px;
    /*font-weight:700;*/
    color:var(--text-dark);
    margin:0 0 4px;
	padding-bottom: 5px;
  }

  .helper-note{
    font-size:13.5px;
    color:var(--text-grey);
    margin:0 0 18px;
  }

  .gdpr-box{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:13.5px;
    line-height:1.55;
    color:var(--text-dark);
  }

  .gdpr-box input[type="checkbox"]{
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:var(--purple-accent);
    flex-shrink:0;
  }

  .gdpr-box a{
    color:var(--purple-accent);
    text-decoration:underline;
  }

  /* Accordion */
  .optional-accordion{
    margin-top:10px;
    margin-bottom:10px;
  }

  .accordion-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    cursor:pointer;
    background:#faf8fd;
    border:1px solid var(--border-grey);
    border-radius:10px;
    padding:16px 18px;
  }

  .accordion-text{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  .accordion-title{
    font-size:14.5px;
    font-weight:700;
    color:var(--purple-dark);
  }

  .accordion-subtitle{
    font-size:12.5px;
    color:var(--text-grey);
    margin-top:3px;
  }

  .arrow{
    width:26px;
    height:26px;
    background:var(--orange);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:bold;
    transition:transform 0.3s ease;
    margin-left:10px;
    flex-shrink:0;
  }

  .accordion-header.active .arrow{
    transform:rotate(180deg);
  }

  .accordion-content{
    display:none;
    background:#fff;
    border:1px solid var(--border-grey);
    border-top:none;
    padding:20px 18px 6px;
    margin-top:-6px;
    border-radius:0 0 10px 10px;
  }

  .accordion-content .field-group,
  .accordion-content .radio-row,
  .accordion-content .check-item{
    margin-bottom:18px;
  }

  textarea.field{
    resize:vertical;
    min-height:100px;
  }

  .submit-btn{
    background:var(--orange);
    color:#fff;
    border:none;
    padding:16px 34px;
    border-radius:999px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:background .15s ease;
    width:100%;
    max-width:320px;
  }

  .submit-btn:hover{
    background:#d9531d;
  }

  .form-loader{
    margin-top:14px;
    font-size:13.5px;
    color:var(--purple-accent);
    display:none;
  }

  .footer-strip{
    padding:24px 60px;
    background:var(--purple-dark);
    color:#e7defb;
    font-size:12px;
    text-align:center;
  }

  /* FAB */
  .fab{
    position:fixed;
    bottom:30px;
    left:30px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--orange);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
    z-index:10;
  }

  /* RIGHT STATIC IMAGE COLUMN */
  .right-col{
    flex:1 1 42%;
    max-width:42%;
    height:100vh;
    position:sticky;
    top:0;
    overflow:hidden;
  }

  .right-col img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

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

  @media (max-width:900px){
    .page{
      flex-direction:column;
      height:auto;
      overflow:visible;
    }
    .left-col, .right-col{
      max-width:100%;
      width:100%;
      height:auto;
      overflow:visible;
      position:relative;
      min-width:0;
    }
    .right-col{
      order:-1;
      height:220px;
    }
    .hero, .form-wrap, .logo-bar{
      padding-left:24px;
      padding-right:24px;
    }
    .hero{
      padding-top:24px;
      padding-bottom:32px;
    }
    .hero h1{
      font-size:28px;
    }
    .form-wrap{
      padding-top:28px;
      padding-bottom:60px;
    }
    .row-2{
      flex-direction:column;
      gap:0;
    }
    .submit-btn{
      width:100%;
      max-width:none;
    }
  }

  @media (max-width:480px){
    .logo-bar, .hero, .form-wrap{
      padding-left:16px;
      padding-right:16px;
    }
    .hero h1{
      font-size:24px;
    }
    .hero p{
      font-size:14px;
    }
    .right-col{
      height:180px;
    }
    section.block h2{
      font-size:16px;
    }
    .field, .submit-btn{
      font-size:14px;
    }
    .radio-row{
      gap:20px;
    }
    .phone-code{
      min-width:64px;
      padding:0 10px;
      font-size:13px;
    }
    .accordion-title{
      font-size:13.5px;
    }
  }

  .site-below-footer-wrap1[data-section="section-below-footer-builder"] {
    background-color: #421f5b !important;
    background-image: none !important;
    min-height: 80px !important;
}

.ast-footer-copyright {
	display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    text-align: center;
    background-color: #421f5b !important;

}
.site-footer .ast-footer-copyright {
    display: flex;
    justify-content: center;   /* Horizontal center */
    align-items: center;       /* Vertical center */
    min-height: 100px;         /* Adjust the height as needed */
    text-align: center;
    padding: 0;
    margin: 0;
}

.site-footer .ast-footer-copyright p {
    margin: 0;
    color: #fff;
    font-size: 12px;
}

/* ============================================================
   ADD THIS BLOCK TO style_junia_new_design.css
   (append at the end of the file — it only adds new selectors,
   it does not remove or override anything you already have)
   ============================================================ */

/* Breadcrumb, top of hero */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  color:var(--purple-dark);
  margin-bottom:18px;
}

.breadcrumb a{
  color:var(--purple-dark);
  text-decoration:none;
}

.breadcrumb a:hover{
  text-decoration:underline;
}

.breadcrumb .crumb-sep{
  color:var(--orange);
}

.breadcrumb .crumb-current{
  color:var(--text-grey);
  font-weight:500;
}

/* Black "Infos générales"-style section heading (as opposed to
   the purple section.block h2 already in use elsewhere) */
h2.section-title-black{
  font-size:22px;
  font-weight:800;
  color:var(--text-dark);
  margin:0 0 18px;
  padding-bottom:0;
}

/* Floating bottom nav pill */
.fab-nav{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:flex;
  gap:4px;
  background:#ffffff;
  border-radius:999px;
  padding:8px;
  box-shadow:0 10px 30px rgba(43,18,80,.18);
  z-index:1000;
  max-width:94vw;
}

.fab-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:88px;
  padding:8px 14px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-grey);
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}

.fab-link svg{
  width:20px;
  height:20px;
}

.fab-link.active,
.fab-link:hover{
  background:var(--bg-lav);
  color:var(--purple-dark);
}

@media (max-width:900px){

  .breadcrumb{
    font-size:12px;
    margin-bottom:14px;
  }

  h2.section-title-black{
    font-size:19px;
  }

  /* Give the page bottom padding so the fixed nav never covers
     the submit button or last field on small screens */
  .form-wrap{
    padding-bottom:120px;
  }

  .fab-nav{
    bottom:14px;
    padding:6px;
    gap:2px;
    max-width:94%;
    overflow-x:auto;
  }

  .fab-link{
    min-width:76px;
    padding:6px 10px;
    font-size:10.5px;
  }

  .fab-link svg{
    width:18px;
    height:18px;
  }
}

@media (max-width:480px){
  .fab-link span{
    display:none; /* icon-only on very small screens */
  }
  .fab-link{
    min-width:auto;
    padding:10px;
  }
}