h5 {color:#323368}
.text-undertitle {color:#29363F!important; font-size: 14px!important;} 
.mb-2rem { margin-bottom: 2rem !important; }

.breadCrumbs  {
    text-align: center;
    width: 100%;
    padding:40px 10px 20px 10px;
}

.breadCrumbs h1 {
    font-weight: bold;
    font-size: 41px;
    margin-bottom: 20px;
}

.breadCrumbs a {
    font-size: 18px;
    font-weight: 500;
    color:#2d5f80;
}

.breadCrumbs span {
    font-size: 18px;
    font-weight: 500;
}
.nav-infos-enfant {
    display: flex;
    position: relative;
    margin: -80px auto 20px auto;
    z-index: 2;
    justify-content: center;
}

.nav-infos-enfant  ul {
    display: flex;
    gap: 140px;
    padding-left: 0;
}
.nav-infos-enfant  ul li a {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #29363F;
    font-size: 14px;
    font-weight: bold;
    line-height: 15px;
}
.active .num-infos-enfant {
    width: 60px;
    height: 60px;
    background: #323368;
    text-align: center;
    line-height: 59px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.done .num-infos-enfant {
    width: 60px;
    height: 60px;
    background: #E78B0B;
    text-align: center;
    line-height: 59px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.num-infos-enfant {
    width: 60px;
    height: 60px;
    background: #8DA1AE;
    text-align: center;
    line-height: 59px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.num-infos-enfant .fa-solid {
    font-size: 30px;    font-weight: bold;
}

.conteneur-inf-enf {
    padding: 0 0 30px;
    gap: 40px;
    border-bottom: 1px solid #A5B7C4;
    margin-bottom: 5px; flex-wrap: wrap;
    justify-content: flex-start;
}

.conteneur-inf-enf .commonBtn {
    padding: 13px 18px;
    border-radius: 20px;
    margin-top: 0;
}

.content-inf-enf {
      background: #71a0bf;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
.content-inf-enf.active {
    background: #22577A;
}

.conteuneur-student-photo {
    width: 25%; padding-right: 30px;
}
.conteuneur-student-infos {
 width: 75%; gap:4%
}


.admissionPage.newStudentAdmission .formContainer .formWapper .inputWrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

#student_photo {
    font-size: 14px;
    margin: 30px 0;
}
.title-infos  {
    color: #323368;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.title-infos i  {
    margin-right: 20px;
}
.gap4 {
    gap: 4%;
}

.upfiles {
    padding: 0 !important;
    border: 0 !important;
    font-size: 14px;
    border-radius: 0 !important;
}

.foot-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.foot-payment h4 {
    font-size: 16px!important;
    color: #323368!important;
    font-weight: bold;
}

.foot-payment h2 {
    font-size: 32px!important;
    color: #323368!important;
    font-weight: bold!important;
}

.admissionPage .formBtnsWrapper button:first-child {
    padding: 10px 20px;
    border-radius: 5px;
}

.payment-option .form-check {
    margin: 0;
    border: 0 !important;
    display: flex;
}

.f-wrap {
    flex-wrap: wrap;
}

.payment-option .form-check-label {
    display: block!important;
    padding: 0!important;
}
.payment-option .form-check {
    align-items: flex-start;
}

.payment-option .form-check-input {
    margin-right: 10px;
}

.payment-option {
    margin-bottom: 15px;
    border: 1px solid #A5B7C4;
    padding: 20px;
    border-radius: 4px;
}

.payment-option.checked {
    background: #22577a;
}

.payment-option.checked .form-check-label,
.payment-option.checked .text-primary  {color: #fff!important;}
.payment-option .text-primary  {color: #333!important;}

.admissionPage .formContainer .formWapper .inputWrapper label {
    font-weight: 500;
    color: #4F5356;
}

.type-selected {
    background: #F2F5F7!important;
    padding: 23px!important;
    margin: 0 0 20px 0;
}

.cont-int-cursus { 
    border: 1px solid #A5B7C4;
    padding: 20px;
    border-radius: 4px;
    margin-top: 10px;
}

.commonBtn2 {
    background-color: #22577a;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    margin-top: 12px;
    width: max-content;
    transition: background-color 0.3s;
}

.commonBtn3 {
    background-color: #F2F5F7;
    color: #000000;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    margin-top: 12px;
    width: max-content;
    transition: background-color 0.3s;
}

.mtop-10 {margin-top: 10px;}


.gap-30    {
    gap: 30px;
}
.brd-1 {
    border: 1px solid #A5B7C4;
    padding: 30px 25px;
    border-radius: 10px;
}
.brd-1.checked {
   color:#fff;
    background:#22577A;
}


.tit-20-b {
    color: #29363F;
    font-size: 20px;
    font-weight: 700;
}

.checked .tit-20-b {
    color: #fff;
}

.gren-14-b {
    color: #31A727;
    font-size: 14px;
    font-weight: 700;
}

.level-available input[type="radio"] {
  width: 30px;
}
.level-available input[type="radio"]:checked{
  background:red;
}

.loginBtn {
    color: var(--primary-color);
    padding: 4px 10px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    margin-top: 12px;
    width: max-content;
    transition: background-color 0.3s;
}

.landing-insc p {font-size:14px}
.conteneurBtnLanding {margin-top: 65px; display: flex; gap: 20px; justify-content: center;}
.conteneurLoginLanding { margin: 95px 0 45px 0 !important;}
.BtnIcon {
    padding: 23px;
    font-size: 16px;
    font-weight: 700;
}
@media (min-width: 992px) {
    .col-lg-6.quatrehuit {
        flex: 0 0 auto;
        width: 48%;
    }
}

.nombre-enfants .col-12.formBtnsWrapper {display: none;}

.pad-admission {padding: 0 45px!important;}
.sepa-tarif{border-left: 2px solid #ccc;}
@media (max-width: 769px) {
 
     .cta-zone {
        flex-direction: column;
        margin-top: 40px;
    }
    .steps {
    margin: 40px 0 0 0;
}
.steps .step-line {
    display: none;
}
.step.inactive {
    display: none;  }

    #monthly-amount-display {
    font-size: 14px!important;
}
    .admissionPage .formContainer .formHeading {
    font-size: 16px!important;
}
body { font-size: 14px!important; }

    .conteneur-inf-enf {
        gap: 5px!important;
    }    
    .content-inf-enf {
        padding: 10px 20px!important;
        font-size: 14px!important;
    }
    .conteuneur-student-infos {margin-top: 30px;}

    .pad-admission {padding: 0!important;}
.nav-infos-enfant {
    z-index: 1; 
}
    .nav-infos-enfant ul {
        display: block;
        width: 100%;
    }
    .nav-infos-enfant ul li a {
        display: none;
    }
    .nav-infos-enfant ul li a.active {
        display: block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    .nav-infos-enfant ul li a div br {
        display: none;
    }

    .active .num-infos-enfant {
        margin: 10px auto;
    }
    .box-student-infos, .mod-direction-column {
        flex-direction: column!important;
    }
    .conteuneur-student-photo {
        width: 100%;
        padding-right: 0;
    }
    .conteuneur-student-infos {
        width: 100%;
        gap: 0;
        flex-direction: column;
    }


    #echelon-content .payment-option {
        margin-bottom: 15px;
        width: 100%;
    }

    .cont-eleve-ainscrire {
        gap: 15px!important;
    }
    .cont-eleve-ainscrire .avatar-placeholder-small {
        margin: 0 auto!important;
    }

    .sepa-tarif{border: 0;}
}


.payment-option.checked .text-muted {
    color: #fff !important;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue:#22577a; --blue-light:#EBF2FF;
  --pink:#C2185B; --pink-light:#FCE4EC;
  --green:#0E7A4A; --green-light:#EDFAF3;
  --orange:#C05621; --orange-light:#FEF3EB;
  --red:#C0392B;
  --text:#1A1A2E; --text-muted:#6B7280; --text-hint:#9CA3AF;
  --bg:#F5F6FA; --surface:#FFFFFF; --border:#E5E7EB; --border-focus:#1A56DB;
  --radius:10px; --radius-lg:16px;
  --shadow-card:0 2px 8px rgba(26,86,219,0.08),0 0 0 0.5px rgba(0,0,0,0.06);
}
.btn-primary {
    color: #fff;
    background-color: #22577a!important;
    border-color: #22577a!important;
}

.btn-primary:hover {
    color: #fff;
    background-color: #143449!important;
    border-color: #143449!important;
}
.header { text-align:center; margin-bottom:28px; }
.logo-mark { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:var(--blue); border-radius:12px; margin-bottom:10px; }
.header h1 { font-family:'Ubuntu',serif; font-size:22px; font-weight:400; letter-spacing:-0.02em; }
.header p { font-size:13px; color:var(--text-muted); margin-top:3px; }

.card { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); width:100%; max-width:500px; overflow:hidden; }

.progress-header { padding:20px 24px 0; }
.step-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.step-counter { font-size:11px; font-weight:500; color:var(--blue); letter-spacing:0.06em; text-transform:uppercase; }
.step-name { font-size:11px; color:var(--text-muted); }
.progress-track { height:3px; background:var(--border); border-radius:99px; margin-bottom:12px; overflow:hidden; }
.progress-fill { height:100%; background:var(--blue); border-radius:99px; transition:width 0.4s ease; }
.step-labels { display:flex; justify-content:space-between; padding-bottom:14px; border-bottom:0.5px solid var(--border); }
.step-labels span { font-size:9px; color:var(--text-hint); text-align:center; flex:1; }
.step-labels span.done { color:var(--blue); }
.step-labels span.active { color:var(--blue); font-weight:600; }

.card-body { padding:22px 24px; }
.step-title { font-family:'Ubuntu',serif; font-size:19px; font-weight:400; line-height:1.25; margin-bottom:18px; letter-spacing:-0.01em; }

.section-heading { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin:18px 0 10px; display:flex; align-items:center; gap:8px; }
.section-heading::after { content:''; flex:1; height:0.5px; background:var(--border); }
.section-heading:first-child { margin-top:0; }

label.field-label { display:block; font-size:11px; font-weight:500; color:var(--text-muted); letter-spacing:0.04em; text-transform:uppercase; margin-bottom:5px; margin-top:12px; }
label.field-label.mt0 { margin-top:0; }
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],select,textarea {
  width:100%; border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 14px; font-family:'Ubuntu',sans-serif; font-size:14px;
  color:var(--text); background:var(--surface); transition:border-color 0.15s; outline:none; appearance:none;
}
textarea { resize:vertical; min-height:72px; line-height:1.5; }
input:focus,select:focus,textarea:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(26,86,219,0.08); }
input::placeholder,textarea::placeholder { color:var(--text-hint); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.qty-picker { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:8px 0 6px; }
.qty-btn { width:44px; height:44px; border:none; background:var(--bg); color:var(--text); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.1s; font-weight:300; }
.qty-btn:hover { background:var(--border); }
.qty-val { width:56px; height:44px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:500; border-left:1px solid var(--border); border-right:1px solid var(--border); }

.gender-toggle { display:flex; gap:10px; margin:6px 0 0; }
.gender-opt { flex:1; border:1.5px solid var(--border); border-radius:var(--radius); padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:border-color 0.15s,background 0.15s,color 0.15s; font-size:13px; font-weight:500; color:var(--text-muted); }
.gender-opt:hover { border-color:#93B4F5; color:#3B6FE8; }
.gender-icon { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.gender-opt.boy .gender-icon { background:#E3F0FF; color:#3B6FE8; }
.gender-opt.girl .gender-icon { background:#FCE4EC; color:#C2185B; }
.gender-opt.boy { color:var(--text-muted); }
.gender-opt.girl { color:var(--text-muted); }
.gender-opt.boy.selected { border-color:var(--blue); background:var(--blue-light); color:var(--blue); }
.gender-opt.girl.selected { border-color:var(--pink); background:var(--pink-light); color:var(--pink); }
.gender-opt.boy.selected .gender-icon { background:#BFDBFE; color:var(--blue); }
.gender-opt.girl.selected .gender-icon { background:#FBCFE8; color:var(--pink); }

/* Student accordion */
.student-block { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:14px; overflow:hidden; }
.student-header { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg); border-bottom:1px solid var(--border); cursor:pointer; user-select:none; }
.student-num { width:24px; height:24px; background:var(--blue); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex-shrink:0; }
.student-header-title { font-size:14px; font-weight:500; flex:1; }
.student-arrow { font-size:11px; color:var(--text-muted); transition:transform 0.2s; }
.student-header.closed .student-arrow { transform:rotate(-90deg); }
.student-content { padding:16px; display:none; }
.student-content.open { display:block; }

/* Level cards — inside student block, radio-style */
.level-list { display:flex; flex-direction:column; gap:7px; }
.level-card { border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:border-color 0.15s,background 0.15s; }
.level-card:hover { border-color:#93B4F5; }
.level-card.selected { border-color:var(--blue); background:var(--blue-light); }
.lv-radio { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color 0.15s; }
.level-card.selected .lv-radio { border-color:var(--blue); }
.lv-radio::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--blue); display:none; }
.level-card.selected .lv-radio::after { display:block; }
.lv-info { flex:1; }
.lv-name { font-size:13px; font-weight:500; }
.lv-time { font-size:11px; color:var(--text-muted); margin-top:1px; }
.level-card.selected .lv-time { color:#4B79DE; }
.lv-spots { font-size:11px; color:var(--green); white-space:nowrap; display:flex; align-items:center; gap:4px; flex-shrink:0; }
.lv-spots::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; flex-shrink:0; }
.lv-spots.low { color:var(--red); }
.lv-spots.low::before { background:var(--red); }

/* File upload */
.file-upload-list { display:flex; flex-direction:column; gap:8px; }
.file-upload-item { display:flex; align-items:center; gap:12px; border:1.5px dashed var(--border); border-radius:var(--radius); padding:10px 14px; cursor:pointer; transition:border-color 0.15s,background 0.15s; }
.file-upload-item:hover { border-color:var(--blue); background:var(--blue-light); }
.file-upload-item.uploaded { border-style:solid; border-color:var(--green); background:var(--green-light); }
.file-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; }
.fi-blue{background:var(--blue-light)} .fi-orange{background:var(--orange-light)} .fi-green{background:var(--green-light)} .fi-pink{background:var(--pink-light)}
.file-upload-info { flex:1; min-width:0; }
.file-upload-info .fn { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-upload-info .fd { font-size:11px; color:var(--text-muted); margin-top:1px; }
.file-upload-item.uploaded .fd { color:var(--green); }
.file-upload-btn { font-size:11px; color:var(--blue); font-weight:500; white-space:nowrap; flex-shrink:0; }
.file-upload-item.uploaded .file-upload-btn { color:var(--green); }
input[type="file"] { display:none; }

/* Parent tabs */
.parent-tabs { display:flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:18px; }
.parent-tab { flex:1; padding:10px; text-align:center; font-size:13px; font-weight:500; cursor:pointer; background:var(--bg); color:var(--text-muted); border:none; font-family:'Ubuntu',sans-serif; transition:background 0.15s,color 0.15s; }
.parent-tab.active { background:var(--blue); color:white; }

/* Radio group */
.radio-group { display:flex; gap:10px; margin:6px 0 10px; }
.radio-opt { flex:1; border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; display:flex; align-items:center; gap:8px; cursor:pointer; transition:border-color 0.15s,background 0.15s; font-size:14px; }
.radio-opt.selected { border-color:var(--blue); background:var(--blue-light); }
.radio-dot { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.radio-opt.selected .radio-dot { border-color:var(--blue); }
.radio-dot::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--blue); display:none; }
.radio-opt.selected .radio-dot::after { display:block; }

/* Info box */
.info-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; font-size:12px; line-height:1.8; margin:10px 0; }
.info-box .irow { display:flex; justify-content:space-between; align-items:center; }
.info-box .irow+.irow { border-top:0.5px solid var(--border); padding-top:4px; margin-top:4px; }
.info-box .irow.total { font-weight:600; font-size:13px; }
.info-box .lbl { color:var(--text-muted); }
.info-box .val { color:var(--text); font-weight:500; }
.info-box .val.green { color:var(--green); }
.info-box .val.big { font-size:16px; }

/* Checkbox */
.check-row { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--text-muted); margin-top:10px; line-height:1.5; cursor:pointer; }
.check-box { width:16px; height:16px; border-radius:4px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; transition:background 0.15s,border-color 0.15s; }
.check-box.checked { background:var(--blue); border-color:var(--blue); }

/* Pay options */
.pay-list { display:flex; flex-direction:column; gap:7px; margin:8px 0; }
.pay-opt { border:1px solid var(--border); border-radius:var(--radius); padding:11px 14px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:border-color 0.15s,background 0.15s; }
.pay-opt:hover { border-color:#93B4F5; }
.pay-opt.selected { border-color:var(--blue); background:var(--blue-light); }
.po-info { flex:1; }
.po-name { font-size:13px; font-weight:500; }
.po-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
.pay-opt.selected .po-sub { color:#4B79DE; }
.po-amount { font-size:14px; font-weight:600; }
.pay-opt.selected .po-amount { color:var(--blue); }
.sel-dot { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sel-dot::after { content:''; width:9px; height:9px; background:var(--blue); border-radius:50%; }
.unsel-dot { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0; }

/* Summary bar */
.summary-bar { background:var(--blue-light); border:1px solid #C3D8FB; border-radius:var(--radius); padding:10px 14px; display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.summary-bar .s-lbl { font-size:12px; color:#3B6FE8; }
.summary-bar .s-amt { font-size:17px; font-weight:600; color:var(--blue); }

/* Card logos */
.card-logos { display:flex; gap:8px; margin:10px 0; align-items:center; }
.card-logo-visa { height:28px; width:52px; background:#1A1F71; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.card-logo-mc { height:28px; width:46px; border-radius:6px; display:flex; align-items:center; justify-content:center; background:#252525; overflow:hidden; position:relative; }
.card-logo-cb { height:28px; width:40px; border:1px solid var(--border); border-radius:6px; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#003189; letter-spacing:0.02em; }

/* Règlement */
.reglement-box { border:1px solid var(--border); border-radius:var(--radius); padding:14px; max-height:160px; overflow-y:auto; font-size:12px; color:var(--text-muted); line-height:1.6; margin-bottom:10px; background:var(--bg); }
.reglement-box h4 { font-size:12px; font-weight:600; color:var(--text); margin-bottom:8px; }
.reglement-box p { margin-bottom:6px; }

/* CTA */
.cta-zone { border-top:0.5px solid var(--border); padding:16px 24px; }
.cta-back-link { display:block; text-align:center; font-size:12px; color:var(--text-muted); cursor:pointer; margin-bottom:10px; background:none; border:none; width:100%; font-family:'Ubuntu',sans-serif; transition:color 0.1s; }
.cta-back-link:hover { color:var(--text); }
.btn-primary { width:100%; padding:13px; background:linear-gradient(135deg, #265b80 0%, #589ac8 100%); color:white; border:none; border-radius:var(--radius); font-family:'Ubuntu',sans-serif; font-size:16px; font-weight:bold; cursor:pointer; transition:background 0.15s; letter-spacing:-0.01em; box-shadow: 0 4px 6px rgba(99, 91, 255, 0.2); }
.btn-primary:hover { background:linear-gradient(135deg, #589ac8 0%, #42a4e8 100%); 
transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); }
.btn-ghost { flex:1; padding:12px; background:transparent; color:var(--text); border:1px solid var(--border); border-radius:var(--radius); font-family:'Ubuntu',sans-serif; font-size:14px; cursor:pointer; transition:border-color 0.15s; }
.btn-ghost:hover { border-color:#9CA3AF; }
.btns-split { display:flex; gap:10px; }
.btn-cta { flex:2; padding:12px; background:var(--blue); color:white; border:none; border-radius:var(--radius); font-family:'Ubuntu',sans-serif; font-size:14px; font-weight:500; cursor:pointer; transition:background 0.15s; }
.btn-cta:hover { background:#22577A; }
.btn-pay { width:100%; padding:14px; background:#0F3FA8; color:white; border:none; border-radius:var(--radius); font-family:'Ubuntu',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:background 0.15s; letter-spacing:-0.01em; }
.btn-pay:hover:not(:disabled) { background:#0A2E7A; }
.btn-pay:disabled { background:var(--border); color:var(--text-hint); cursor:not-allowed; }
.secure-note { display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:var(--text-muted); margin-top:10px; }
.hint-text { font-size:12px; color:var(--text-muted); line-height:1.5; margin-top:6px; }

/* ── Entry & choice screens ── */
.choice-grid { display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.choice-card { border:1.5px solid var(--border); border-radius:var(--radius); padding:18px 20px; cursor:pointer; display:flex; align-items:center; gap:16px; transition:border-color 0.15s,background 0.15s,box-shadow 0.15s; }
.choice-card:hover { border-color:#93B4F5; box-shadow:0 2px 12px rgba(26,86,219,0.08); }
.choice-card.selected { border-color:var(--blue); background:var(--blue-light); }
.choice-card.reinscription:hover,.choice-card.reinscription.selected { border-color:#0E7A4A; background:var(--green-light); }
.cc-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cc-icon.blue { background:var(--blue-light); color:var(--blue); }
.cc-icon.green { background:var(--green-light); color:var(--green); }
.cc-icon.orange { background:var(--orange-light); color:var(--orange); }
.cc-icon.purple { background:#EDE9FE; color:#6D28D9; }
.cc-body { flex:1; }
.cc-title { font-size:15px; font-weight:500; color:var(--text); }
.cc-sub { font-size:12px; color:var(--text-muted); margin-top:3px; line-height:1.4; }
.cc-arrow { color:var(--text-hint); flex-shrink:0; }

/* ── Madrassati login screen ── */
.madrassati-badge { display:inline-flex; align-items:center; gap:8px; background:#EDE9FE; border:1px solid #C4B5FD; border-radius:99px; padding:6px 14px; font-size:12px; font-weight:500; color:#6D28D9; margin-bottom:20px; }
.login-divider { text-align:center; font-size:12px; color:var(--text-hint); margin:14px 0; position:relative; }
.login-divider::before,.login-divider::after { content:''; position:absolute; top:50%; width:42%; height:0.5px; background:var(--border); }
.login-divider::before { left:0; } .login-divider::after { right:0; }
.btn-outline { width:100%; padding:12px; background:transparent; color:var(--blue); border:1.5px solid var(--blue); border-radius:var(--radius); font-family:'Ubuntu',sans-serif; font-size:14px; font-weight:500; cursor:pointer; transition:background 0.15s; }
.btn-outline:hover { background:var(--blue-light); }

/* .step { display:none; }
.step.active { display:block; }
*/
@keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.step.active .card-body { animation:fadeIn 0.22s ease; }

/* Segmented toggle (situation familiale) */
.seg-toggle { display:flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:6px; }
.seg-opt { flex:1; padding:9px 6px; text-align:center; font-size:12px; font-weight:500; cursor:pointer; color:var(--text-muted); background:var(--bg); border:none; transition:background 0.15s,color 0.15s; }
.seg-opt+.seg-opt { border-left:1px solid var(--border); }
.seg-opt.selected { background:var(--blue); color:white; }

/* Address child options */
.addr-options { display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.addr-opt { border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; cursor:pointer; display:flex; align-items:center; gap:10px; font-size:13px; transition:border-color 0.15s,background 0.15s; }
.addr-opt:hover { border-color:#93B4F5; }
.addr-opt.selected { border-color:var(--blue); background:var(--blue-light); font-weight:500; }
.addr-radio { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:border-color 0.15s; }
.addr-opt.selected .addr-radio { border-color:var(--blue); }
.addr-radio::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--blue); display:none; }
.addr-opt.selected .addr-radio::after { display:block; }

@media(max-width:520px) {
  body { padding:16px 10px 60px; }
  .card-body { padding:18px; }
  .cta-zone { padding:14px 18px; }
  .row2 { grid-template-columns:1fr; }
}

    /* Style général du conteneur d'étapes */
.steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px; 
}
.step {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
/* Style des cercles numérotés */
.step-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  outline: 4px solid white;
}

/* Étape active */
.step-circle.active {
  background: linear-gradient(100deg, #265b80, #4d88b1);
  color: #fff;
  transform: scale(1.05);
}

/* Étapes inactives */
.step-circle.inactive {
  background-color: #f0f4f8;
  color: #7a8a9a;
}

/* Étapes done */
.step-circle.done {
  background-color: #589ac8;
  color: #fff;
}

/* Ligne de connexion entre les étapes */
.step-line {
  flex: 1;
  height: 1px;
    width: 50px;
  background-color: #d9e2ec;
}

/* Texte sous les numéros */
.step-label {
  text-align: left;
    font-size: 0.9rem;
    color: #4a5568;
    margin-top: 0;
    width: 120px;
    line-height: 18px;
}

.active.step-label {
  font-weight: 700;
}

.step-circle.active {
  animation: pulse 0.4s ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1.05); }
}