/* etumatch/style.css — Wizard + effets + curseur custom
   S'appuie sur tes main.css et style.css existants (déjà linkés) */

/* ===== Cursor ===== */
#cursor, #cursor-dot{
  position: fixed; left:0; top:0; pointer-events:none; z-index: 2000;
  transform: translate(-50%, -50%); mix-blend-mode: difference;
}
#cursor{
  width: 32px; height: 32px; border: 2px solid rgba(255,255,255,.8);
  border-radius: 50%; filter: blur(.2px); transition: width .15s, height .15s, border-color .2s;
}
a:hover ~ #cursor, button:hover ~ #cursor { border-color: #ffd54d; width: 38px; height: 38px; }

/* ===== Wizard ===== */
.wizard{
  max-width: 980px; margin: 22px auto 60px; padding: 0 16px;
}
.flash{
  margin: 0 auto 18px; padding: 12px 16px; border-radius: 12px;
  font-weight: 700; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.flash.ok{ background: #2de18b; color:#0f1720; }
.flash.error{ background: #ff6ea6; color:#111; }

.steps{ position: relative; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; box-shadow:0 14px 40px rgba(0,0,0,.35); overflow: hidden; }
.step{
  display: none; padding: 22px; animation: stepIn .25s ease;
}
.step.active{ display:block; }
@keyframes stepIn{ from{opacity:0; transform: translateY(8px)} to{opacity:1; transform:none} }

.step h2{ font-size: 22px; margin-bottom:12px; letter-spacing:.3px; }

.grid{
  display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 12px;
}
.grid label{ display:grid; gap:8px; font-weight:700; }
.grid input[type="text"], .grid input[type="email"], .grid textarea, .grid select, .grid input[type="number"]{
  background:#12152a; color:#eaf0ff; border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:12px; outline:none;
  transition: border-color .15s, box-shadow .15s;
}
.grid textarea{ resize: vertical; min-height: 84px; }

.grid input:focus, .grid select:focus, .grid textarea:focus{
  border-color:#ffd54d; box-shadow: 0 0 0 3px rgba(255,213,77,.15);
}

.full{ grid-column: 1 / -1; }

.nav{
  display:flex; justify-content: space-between; margin-top: 14px;
}
.btn{
  display:inline-block; border:0; border-radius:12px; padding:12px 18px;
  background: linear-gradient(135deg, #ffd54d, #ff8a00); color:#111; font-weight:900;
  box-shadow: 0 12px 26px rgba(255,213,77,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.02); box-shadow: 0 16px 30px rgba(255,213,77,.35); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips button{
  border:1px solid rgba(255,255,255,.12); background:#131836; color:#fff; font-weight:800;
  border-radius:999px; padding:8px 12px; cursor:pointer; transition: .15s;
}
.chips button.active{ background:#ffd54d; color:#111; border-color:transparent; }

.checks{ display:flex; flex-wrap:wrap; gap:14px; }
.checks label{ font-weight:700; display:inline-flex; gap:8px; align-items:center; }

.grid-slots{
  background:#0f1324; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px;
}
.slots-head, .slots-row{ display:grid; grid-template-columns: 110px repeat(3, 1fr); gap:8px; align-items:center; }
.slots-head{ color:#b7bfd3; font-weight:800; margin-bottom:6px; }
.slots-row span{ color:#eaf0ff; font-weight:800; }
.slots-row input{ transform: scale(1.1); }

.skills label{ display:grid; grid-template-columns: 1fr 120px; align-items:center; gap:10px; }
.quality{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }

.consents{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }

/* Responsive */
@media (max-width: 740px){
  .grid{ grid-template-columns: 1fr; }
  .quality{ grid-template-columns: 1fr; }
}

/* micro-animation glossy sur inputs au survol */
.grid input:hover, .grid select:hover, .grid textarea:hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.05);
}


/* ====== Phone field nice UI — RESPONSIVE ====== */
.input-group.phone{
  display:flex; align-items:center; gap:10px;
  flex-wrap: wrap;            /* ✅ permet de passer à la ligne sur mobile */
  width: 100%;                /* ✅ ne dépasse plus la colonne */
  background: rgba(10,16,35,.75);
  border:1px solid rgba(140,170,255,.25);
  border-radius:16px; padding:8px;
  box-shadow: 0 6px 20px rgba(40,70,200,.18) inset,
              0 10px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(3px);
}
.input-group.phone:focus-within{
  border-color: rgba(140,170,255,.6);
  box-shadow: 0 0 0 2px rgba(140,170,255,.35),
              0 12px 28px rgba(60,110,255,.25);
}
/* ✅ autorise les enfants à se réduire, sinon ça déborde */
.input-group.phone > * { min-width: 0; }

/* Sélecteur pays */
.nice-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background: rgba(20,30,60,.9);
  color:#dfe7ff; font-weight:600;
  border:1px solid rgba(140,170,255,.25);
  border-radius:12px;
  padding:10px 36px 10px 12px;
  line-height:1; cursor:pointer; position:relative;
  flex: 0 0 150px;            /* ✅ largeur flexible mais bornée */
  min-width: 120px;           /* ✅ plus bas qu’avant (180px) */
  max-width: 220px;
}
.nice-select:focus{ outline:none; border-color:rgba(140,170,255,.6); }
.nice-select::after{
  content:""; position:absolute; right:12px; top:50%; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: translateY(-50%) rotate(45deg); opacity:.7; pointer-events:none;
}

/* Input numéro */
.phone-box{
  flex: 1 1 220px;            /* ✅ prend la place restante, peut se réduire */
  min-width: 0;               /* ✅ important: autorise le shrink */
  background:transparent; border:0; color:#f3f6ff;
  padding:12px 8px; font-size:16px; letter-spacing:.3px;
  font-variant-numeric: tabular-nums;
}
.phone-box::placeholder{ color:#9fb0ff; opacity:.6; }
.phone-box:focus{ outline:none; }

.phone-hint{ margin-top:8px; color:#9fb0ffcc; font-size:12.5px; }

/* ====== Breakpoints ====== */
@media (max-width: 740px){
  .grid{ grid-template-columns: 1fr; } /* déjà présent pour tes steps */
  .input-group.phone{ gap:8px; }
  .nice-select, .phone-box{
    flex: 1 1 100%;          /* ✅ s’empilent sur toute la largeur */
    width: 100%;
  }
}

.step { display: none; }
.step.active { display: block; }
/* ====== Phone field nice UI ====== */
.input-group.phone{
  display:flex; align-items:center; gap:10px;
  background: rgba(10,16,35,.75);
  border:1px solid rgba(140,170,255,.25);
  border-radius:16px; padding:8px;
  box-shadow: 0 6px 20px rgba(40,70,200,.18) inset,
              0 10px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(3px);
}
.input-group.phone:focus-within{
  border-color: rgba(140,170,255,.6);
  box-shadow: 0 0 0 2px rgba(140,170,255,.35),
              0 12px 28px rgba(60,110,255,.25);
}

.nice-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background: rgba(20,30,60,.9);
  color:#dfe7ff; font-weight:600;
  border:1px solid rgba(140,170,255,.25);
  border-radius:12px;
  padding:10px 36px 10px 12px;
  line-height:1; cursor:pointer;
  position:relative; min-width: 180px;
}
.nice-select:focus{ outline:none; border-color:rgba(140,170,255,.6); }
.nice-select::after{
  content:""; position:absolute; right:12px; top:50%; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: translateY(-50%) rotate(45deg); opacity:.7; pointer-events:none;
}

.phone-box{
  flex:1; min-width:200px;
  background:transparent; border:0; color:#f3f6ff;
  padding:12px 8px; font-size:16px; letter-spacing:.3px;
  font-variant-numeric: tabular-nums;
}
.phone-box::placeholder{ color:#9fb0ff; opacity:.6; }
.phone-box:focus{ outline:none; }

.phone-hint{ margin-top:8px; color:#9fb0ffcc; font-size:12.5px; }
.inline-msg{min-height:20px;font-weight:700}
.inline-msg.ok{color:#2de18b}
.inline-msg.err{color:#ff6ea6}
.inline-msg.info{color:#9fb0ff}