/* ----------------- Reset & Base ----------------- */
* { margin:0; padding:0; box-sizing:border-box; }
main { font-family: 'Shayan', 'Cairo', 'Tajawal', 'Arial', sans-serif; line-height:1.5; color:#333; background:#f9f9f9; }

h2,h3,h4,h5,h6 { font-weight:700; color:#111; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { max-width:100%;}

/* ----------------- Containers ----------------- */
/* .container { max-width:1080px; margin:0 auto; padding:0 15px; } */


/* ----------------- Stepper ----------------- */
.stepper { list-style:none; display:flex; justify-content:space-between; margin:2rem 0 3rem; padding:0; counter-reset:step; }
.step-create-commaunaute,.step-create-commaunaute { position:relative; text-align:center; flex:1; cursor:pointer; transition:0.3s; }
.step-create-commaunaute .num { display:block; width:36px; height:36px; margin:0 auto 8px; line-height:36px; border-radius:50%; background:rgba(255, 123, 46, 0.539);border: 1px solid #fc7b30; color:#fff; font-weight:600; transition:all 0.3s; }
.step-create-commaunaute.is-active .num,
.step-create-commaute.is-complete .num { background:#fc7b30; color:#fff; }
.step-create-commaunaute .lbl { font-size:.875rem; color:#555; }
.step-create-commaunaute.is-active .lbl,
.step-create-commaunaute.is-complete .lbl { color:#fc7b30; font-weight:600; }
.step-create-commaunaute::after {
   content:""; position:absolute; top:18px; right:0%; width:100%; height:4px; background:rgba(255, 123, 46, 0.084); z-index:1; transition:0.3s; 
  }
.step-create-commaute.is-complete::after { background:#fc7b30; }
.step-create-commaute:last-child::after { display:none; }


/* ----------------- Step Panes ----------------- */
.step-pane { 
  
  border: 1px solid rgba(0,0,0, .06);
  display:none;
  animation:fadeIn .3s ease;
  background:#fff;
  padding:2rem;
  border-radius:18px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  margin-bottom:2rem; 
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08);;
}

/* radio tiles */
.radio-tile input{display:none}
.radio-tile{
  width: 100%;
  margin: 10px;
}
@media (max-width: 767px) {
  /* Styles pour mobile */
  .radio-tile{
  width: 90%;
  margin: 10px;
}
}
.radio-tile .tile{
  background:#fff;
  /* border:2px solid #ececec; */
  border-radius:14px;padding:1rem;
  display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;cursor:pointer;height:100%;
  transition:.2s;
  box-shadow:0 6px 16px rgba(3, 7, 18, 0.326);
   position:relative;
  width: 100% !important;
}
.radio-tile .tile i{font-size:1.4rem}
.radio-tile input:checked + .tile{border-color:var(--wayo-orange);box-shadow:0 0 0 4px rgba(244,122,31,.15), 0 10px 22px rgba(244,122,31,.12)}
.price-grid .tile i{color:var(--wayo-orange)}

/* disabled & coming soon */
.tile-disabled{ opacity:.55; filter:grayscale(.25); cursor:not-allowed; }
.tile-disabled::after{
  content:"Coming soon";
  position:absolute; top:10px; right:10px;
  font-size:.72rem; font-weight:800; padding:.2rem .5rem; border-radius:999px;
  background:#23235B; color:#fff; box-shadow:0 6px 12px rgba(0,0,0,.08);
}



.step-pane.is-visible { display:block; }
.panel-head h2 { font-size:1.5rem; margin-bottom:0.5rem; }
.legend-required { font-size:0.875rem; color:#888; }
.req { color:red; }
.panel-actions { display:flex; justify-content:space-between; margin-top:2rem; }
.btn-primary { background:#fc7b30 !important; color:#fff; border: 1px solid #fc7b30 !important ; }
.btn-primary:hover { background:#4a3ce0; }
.btn-secondary { background:transparent !important; border: 2px solid #fc7b30 !important; color:#fc7b30 !important; }
.btn-secondary:hover { background:#c5c2ff; }
.btn-success { background:#28a745; color:#fff; }
.btn-success:hover { background:#218838; }


/* cards / panels */
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--r-lg);box-shadow:var(--sh)}
.card.soft{padding:1rem ; border-radius:15px;}
.panel{padding:2rem}
.panel-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;justify-content:space-between}
.legend-required{color:#666;font-size:.95rem}
.legend-required .req{color:#F04747;font-weight:800}

/* ----------------- Form Fields ----------------- */
.field { 
  display: flex; 
  flex-direction: column; 
  margin-bottom: 1rem; 
}

.field-label { 
  font-weight: 600; 
  margin-bottom: 0.25rem; 
  display: flex; 
  align-items: center; 
  gap: 0.25rem; 
  position: relative;   /* nécessaire pour le tooltip */
  overflow: visible;    /* évite que le tooltip soit coupé */
}

.field input, 
.field textarea, 
.field select { 
  padding: 14px 16px; 
  border: 1px solid #ECEEF3; 
  border-radius: 12px; 
  font-size: 1rem; 
  transition: 0.3s; 
  background: #f7f8fb;
}

.field input:focus, 
.field textarea:focus, 
.field select:focus { 
  outline: none; 
  border-color: #fc7b30; 
}

.error { 
  color: red; 
  font-size: 0.875rem; 
  margin-top: 0.25rem; 
  width: 100% !important;
  background-color: transparent;
}

.help { 
  font-size: 0.75rem; 
  color: #666; 
  margin-top: 0.25rem; 
}

/* -------- Tooltip universel -------- */
.info {
  color: #6e6e6e;
  font-size: .95rem;
  margin-left: .35rem;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.info:hover {
  color: #fc7b30;
}

.info::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #fc7b30;
  color: #fff;
  padding: .44rem .6rem;
  border-radius: 8px;
  font-size: .8rem;
  line-height: 1.25;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 10;
}

.info::before {
  content: "";
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #23235B;
  opacity: 0;
  transition: opacity .18s;
}

.info:hover::after,
.info:hover::before {
  opacity: 1;
}

/* -------- Switch checkbox -------- */
@media (max-width: 768px) {
  .switch-emph .info::after {
    left: auto;
    right: 0;
    transform: none;
    max-width: 90vw; /* jamais dépasser la largeur de l'écran */
  }

  .switch-emph .info::before {
    left: auto;
    right: 10px; /* ajuster pour le petit triangle */
    transform: none;
  }
}

/* -------- Switch checkbox -------- */
.switch-emph {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.switch-emph input[type="checkbox"] {
  cursor: pointer;
}


/* ----------------- Grid ----------------- */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; }
.stack { display:flex; flex-direction:column; gap:1rem; }

/* ----------------- Switch ----------------- */
.switch { display:flex; align-items:center; gap:0.5rem; }
.switch input { margin-right:0.5rem; }
.switch-emph { display:flex; align-items:center; gap:0.25rem; font-weight:600; color:#333; }

/* ----------------- Uploader ----------------- */
.uploader { border:4px dashed #ccc; padding:2.3rem; border-radius:4px; text-align:center; cursor:pointer; position:relative; }
.uploader input[type="file"] { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.uploader .preview { margin-top:1rem; }
.uploader img { max-width:120px; border-radius:4px; }

/* ----------------- Tooltip Info ----------------- */
.info { cursor:pointer; color:#fc7b30; }
.info i { font-size:0.875rem; }

/* ----------------- Summary ----------------- */
.summary { background:#f1f3ff; padding:1rem; border-radius:6px; font-size:1rem; }

.summary-member{display:flex;flex-direction:column;gap:1rem}
.summary-title{font-size:1.1rem}
.summary-list{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;background:#fff;border:1px solid #eee;padding:1rem;border-radius:16px}
.summary-list dt{font-weight:800}.summary-list dd{margin:0}
.checklist{display:flex;flex-direction:column;gap:.35rem}
.checklist li{display:flex;align-items:center;gap:.5rem}

@media (max-width: 767px) {
 .summary-list{display:grid;grid-template-columns: none; /* annule la grid */
    gap: 0;background:#fff;border:1px solid #eee;padding:1rem;border-radius:16px}
}



/* ----------------- Animations ----------------- */
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

/* ----------------- Responsive ----------------- */
@media(max-width:768px){
  .grid-2 { grid-template-columns:1fr; }
  .main-nav ul { flex-direction:column; gap:0.5rem; }
  .nav-toggle { display:block; }
}