/************************************************************************************
 * FINANCEMENT EXPRESS - HARMONISÉ AVEC BUDGET BUDDY
 ************************************************************************************/
/* -------------------------- */
/*          VARIABLES         */
/* -------------------------- */
:root {
  /* Palette de couleurs alignée sur Budget Buddy */
  --color-primaryF1:#4183ff;     /* Couleur principale */
  --color-primaryF: #49f2eb;    /* Ton plus clair (pour dégradés éventuels) */
  --color-bg: #FAFBFD;          /* Arrière-plan très léger */
  --color-text: #2D2F33;        /* Texte principal */
  --color-gray: #0b0d10;        /* Gris textes secondaires */
  --color-border: #DDE1E7;      /* Bordures subtiles */
/* Transitions et animations */
--transition-fast:    0.2s;
--transition-medium:  0.4s;
--transition-ease:    cubic-bezier(0.16, 0.84, 0.44, 1);

/* Espacements */
--spacing-xs: 6px;
--spacing-s:  10px;
--spacing-m:  16px;
--spacing-l:  24px;
--spacing-xl: 32px;

/* Rayons de bordure */
--radius-s:  4px;
--radius-m:  6px;
--radius-l:  10px;

/* Ombres */
--shadow-light:  0 2px 4px rgba(0,0,0,0.06);
--shadow-medium: 0 4px 12px rgba(0,0,0,0.08);
--shadow-hover:  0 8px 24px rgba(0,0,0,0.12);

/* Optionnel effet « verre dépoli » */
--glass-bg:  rgba(255,255,255,0.8);
--glass-blur: 8px;
}

/* Police + icônes (comme Budget Buddy) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* Reset de base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Corps global */
body {
font-family: 'Poppins', sans-serif;
color: var(--color-text);
background-color: var(--color-bg);
line-height: 1.4;
}

/* Tooltip (icône + bulle) */
.bb-tooltip-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 1.1em;
height: 1.1em;
color: #ff746b;
cursor: pointer;
font-size: 1.1rem;
border-radius: 50%;
}

/************************************************************************************
* WRAPPER PRINCIPAL
************************************************************************************/
.financement-express-wrapper {
display: flex;
gap: var(--spacing-l);
padding: var(--spacing-m) var(--spacing-xl);
background: var(--color-bg);
min-height: 100vh;
transition: opacity var(--transition-medium) var(--transition-ease);
}
.financement-express-wrapper.js-wizard-enabled {
opacity: 1;
}

/************************************************************************************
* NAVIGATION LATÉRALE
************************************************************************************/
.wizard-nav1 {
top: var(--spacing-xl);
min-width: 220px;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: var(--radius-l);
padding: var(--spacing-l);
box-shadow: var(--shadow-medium);
height: fit-content;
transition: box-shadow var(--transition-fast) var(--transition-ease);
}
.wizard-nav1:hover {
box-shadow: var(--shadow-hover);
}
.wizard-nav1-title {
font-size: 1.1rem;
margin-bottom: var(--spacing-m);
color: #444;
font-weight: 600;
letter-spacing: 0.5px;
background: #fff;
}

.wizard-nav1-list {
list-style: none;
padding: 0;
margin: 0;
}
.wizard-nav1-item {
display: flex;
align-items: center;
gap: var(--spacing-s);
cursor: pointer;
padding: var(--spacing-s) var(--spacing-m);
border-radius: var(--radius-m);
margin-bottom: var(--spacing-xs);
position: relative;
color: var(--color-text);
transition:
  background-color var(--transition-fast) var(--transition-ease),
  transform var(--transition-fast) var(--transition-ease),
  box-shadow var(--transition-fast) var(--transition-ease);
}
.wizard-nav1-item i {
color: #b0afff;
background-color: #f7f7f7;
border: 2px solid #fff;
border-radius: 50%;
font-size: 1rem;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.wizard-nav1-item:hover {
background-color: rgba(88,101,242,0.05);
transform: translateX(3px);
box-shadow: var(--shadow-light);
}
.wizard-nav1-item.active {
background: linear-gradient(90deg, var(--color-primaryF1), var(--color-primaryF));
color: #fff;
transform: translateX(0);
box-shadow: none;
}
/* Indicateur de completion */
.completed-check {
margin-left: auto;
color: #fff;
display: none;
font-size: 1rem;
}
.wizard-nav1-item.completed:not(.active) .completed-check {
color: var(--color-primaryF1);
display: inline-block;
}

/************************************************************************************
* NAV MOBILE
************************************************************************************/
/* Par défaut, masqué en desktop */
.wizard-nav1-mobile {
display: none;

padding: var(--spacing-s);
margin-bottom: var(--spacing-m);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
background: linear-gradient(178deg, #e6e6ff96, #f9f9fb);
}
.wizard-nav1-mobile::-webkit-scrollbar {
display: none;
}
.wizard-nav1-mobile-list {
display: flex;
gap: var(--spacing-s);
list-style: none;
margin: 0;
padding-top: 15px;
}
.wizard-nav1-mobile-item {
flex-shrink: 0;
background-color: #ffffff;
color: #666;
font-weight: 500;
border-radius: 999px;
padding: 6px 14px;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
font-size: 0.9rem;
}
.wizard-nav1-mobile-item.active {
background: linear-gradient(90deg, var(--color-primaryF1), var(--color-primaryF));
color: #fff;
}

/* Media query pour mobiles < 992px => on masque la sidebar .wizard-nav1 */
@media (max-width: 992px) {
.wizard-nav1 {
  display: none !important;
}
.wizard-nav1-mobile {
  display: block !important;
}
}

/************************************************************************************
* CONTENU CENTRAL
************************************************************************************/
.wizard-main {
flex: 1;
border-radius: var(--radius-l);
padding: 0;
min-width: 0; /* évite un overflow horizontal sur flex */
}

/* Barre de progression globale */
.overall-progress-bar {
width: 100%;
height: 6px;
background-color: var(--color-border);
border-radius: var(--radius-s);
overflow: hidden;
margin-bottom: var(--spacing-l);
position: relative;
}
.progress-bar-inner {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--color-primaryF1), var(--color-primaryF));
transition: width var(--transition-medium) var(--transition-ease);
}

/************************************************************************************
* WIZARD CATEGORIES (ÉTAPES)
************************************************************************************/
.wizard-category {
display: none;
opacity: 0;
transform: translateY(15px);
transition:
  opacity var(--transition-medium) var(--transition-ease),
  transform var(--transition-medium) var(--transition-ease);
margin-bottom: var(--spacing-xl);
padding: var(--spacing-l);
background: #fff;
border-radius: var(--radius-l);
}
.wizard-category.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.wizard-category h2 {
font-size: 1.25rem;
margin-bottom: var(--spacing-s);
color: #444;
font-weight: 600;
letter-spacing: 0.5px;
}
.category-description {
color: var(--color-gray);
margin-bottom: var(--spacing-m);
font-size: 0.9rem;
line-height: 1.4;
}

/************************************************************************************
* FORM GROUPS (Champs de formulaire)
************************************************************************************/
.form-group {
margin-bottom: var(--spacing-m);
}
.form-group label {
font-weight: 500;
margin-bottom: var(--spacing-xs);
display: block;
color: var(--color-text);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--spacing-s) var(--spacing-m);
font-size: 0.95rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-m);
outline: none;
transition:
  border-color var(--transition-fast) var(--transition-ease),
  box-shadow var(--transition-fast) var(--transition-ease);
background: #fff;
color: var(--color-text);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--color-primaryF1);
box-shadow: 0 0 0 2px rgba(65,131,255,0.15);
}
.form-group small.ux-hint {
display: block;
margin-top: 4px;
font-size: 0.85rem;
color: var(--color-gray);
}

/************************************************************************************
* CHECKBOX SWITCH
************************************************************************************/
.fe-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-s);
margin-top: var(--spacing-s);
}
.fe-checkbox-line {
display: inline-flex;
align-items: center;
position: relative;
cursor: pointer;
font-size: 0.95rem;
}
.fe-checkbox-line input[type="checkbox"] {
display: none; /* on masque le checkbox natif */
}
.fe-toggle-switch {
  position: relative;
  width: 46px;
  height: 24px;
  background: #f0f0ff;
  border-radius: 99px;
  border: solid 1px #cecdff;
  margin-right: 8px;
  transition: background 0.3s;
  padding: 1px 30px 1px 20px;
}
.fe-toggle-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}
.fe-checkbox-line input[type="checkbox"]:checked + .fe-toggle-switch {
  background: #7cd272;
}
.fe-checkbox-line input[type="checkbox"]:checked + .fe-toggle-switch::before {
transform: translateX(22px);
}

/************************************************************************************
* BOUTONS
************************************************************************************/
.bb-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-s) var(--spacing-l);
border: none;
border-radius: var(--radius-m);
cursor: pointer;
/* Couleur harmonisée : dégradé + texte blanc */
background: linear-gradient(90deg, var(--color-primaryF1), var(--color-primaryF));
color: #fff;
font-weight: 500;
transition:
  background var(--transition-fast) var(--transition-ease),
  transform var(--transition-fast) var(--transition-ease),
  box-shadow var(--transition-fast) var(--transition-ease);
margin-right: var(--spacing-s);
margin-top: var(--spacing-s);
min-width: 120px;
box-shadow: var(--shadow-light);
}
.bb-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.bb-button:active {
transform: scale(0.97);
box-shadow: none;
}
/* Styles communs pour les deux boutons */
.bb-button.prev-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #ffffff;
  color: #007aff;
  border: solid 0.2px #e4e4ff;
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  height: 50px;
  font-weight: 600;
}
.bb-button.next-button {

    display: inline-block;
    padding: 0.5rem 1rem;
    background: #edecff;
    color: #007aff;
    border: solid 0.2px #e4e4ff;
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: 50px;
}

/* Effet de survol : on assombrit légèrement le bleu */
.bb-button.prev-button:hover,
.bb-button.next-button:hover {
  background-color: #dad9ff; /* bleu un peu plus soutenu */
}

/* Optionnel : s’il y a un état “désactivé” */
.bb-button.prev-button:disabled,
.bb-button.next-button:disabled {
  background: #cce7f5;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Footer de chaque wizard-category (pour loger les boutons) */
.wizard-footer {
margin-top: var(--spacing-m);
text-align: right;
}



/************************************************************************************
* SECTION RÉSUMÉ
************************************************************************************/
.financement-summary {
margin-top: var(--spacing-s);
background: #fbfbfc;
border: 1px solid #efefef;
border-radius: var(--radius-m);
padding: var(--spacing-m);
}
.financement-summary h3 {
margin-bottom: var(--spacing-s);
font-size: 1.1rem;
color: var(--color-primaryF1);
font-weight: 600;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
}
.financement-summary h3::before {
content: "📊";
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.summary-label {
color: var(--color-gray);
}
.summary-value {
font-weight: 600;
}
.total-estimation {
font-size: 1.2rem;
font-weight: 700;
color: #6ccb7f;
margin-top: var(--spacing-xs);
}

/************************************************************************************
* SIDEBAR RÉCAP À DROITE (si utilisé)
************************************************************************************/
.financement-express-sidebar {
margin: 15px;
}
.financement-express-sidebar h3 {
margin-top: 0;
color: #555;
}
.financement-express-sidebar p {
margin: 6px 0;
font-size: 0.95em;
}
.financement-express-sidebar strong {
color: #333;
}

/************************************************************************************
* ALERTES & TOAST
************************************************************************************/
.alert {
padding: var(--spacing-s);
border-radius: var(--radius-s);
margin-bottom: var(--spacing-s);
font-size: 0.9rem;
}
.alert-success {
background-color: #e1f8e1;
color: #2c6e2c;
border: 1px solid #a0d6a0;
}
.alert-error {
background-color: #f8e1e1;
color: #6e2c2c;
border: 1px solid #d6a0a0;
}

/* Toast “save-message” (optionnel) */
.save-toast {
position: fixed;
bottom: var(--spacing-xl);
right: var(--spacing-xl);
background: var(--color-primaryF1);
color: #fff;
padding: var(--spacing-s) var(--spacing-l);
border-radius: var(--radius-m);
box-shadow: var(--shadow-medium);
opacity: 0;
transform: translateY(20px);
transition:
  opacity var(--transition-fast) var(--transition-ease),
  transform var(--transition-fast) var(--transition-ease);
z-index: 9999;
}
.save-toast.show {
opacity: 1;
transform: translateY(0);
}

/************************************************************************************
* RESPONSIVE (GÉNÉRAL)
************************************************************************************/
/* En mobile < 600px => les 2 boutons (précédent/suivant) se partagent la largeur */
@media (max-width: 600px) {
  .wizard-footer {
    display: flex;
    justify-content: space-between;
    gap: 1px ;
  }
  
  }
@media (max-width: 992px) {
.financement-express-wrapper {
  flex-direction: column;
  padding: var(--spacing-s);
}
.wizard-nav,
.wizard-sidebar-right {
  position: static;
  margin-bottom: var(--spacing-m);
  width: auto;
}
.wizard-sidebar-right {
  margin-right: 0;
  width: 100%;
  box-shadow: var(--shadow-light);
}
.wizard-category {
  padding: var(--spacing-m) var(--spacing-s);
}
.summary-row {
  flex-wrap: wrap;
}
}
@media (max-width: 600px) {
.wizard-nav {
  padding: var(--spacing-m) var(--spacing-s);
}
.wizard-sidebar-right {
  padding: var(--spacing-m) var(--spacing-s);
}
}
@media (max-width: 768px) {
.wizard-nav1 {
  width: auto;
  float: none;
}
.wizard-main {
  width: 100%;
  margin-left: 0;
}
.wizard-footer .bb-button {
  width: 100%;
  margin-right: 0;
  box-shadow: none;
  border: solid 1px #dadaf8;
  border-radius: 8px;
  margin-top: 3px;

}
.wizard-category h2 {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-s);
  color: #444;
  font-weight: 600;
  letter-spacing: 0.5px;
}
}