/* Formulaires contact & rendez-vous: HOKKO studio */
.nav-cta{
  display:inline-block;text-decoration:none;text-align:center;
  background:var(--blue);color:var(--wh);
  padding:0.6rem 1.4rem;border-radius:100px;
  font-family:var(--ffb);font-size:0.85rem;font-weight:500;
  border:none;cursor:pointer;transition:background .2s;
}
.nav-cta:hover{background:var(--bl)}
.nav-cta,.btn-solid,.btn-ghost,.btn-outline,.slot-btn{text-decoration:none}
.success-panel .form-actions a.btn-solid,
.success-panel .form-actions a.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
}
.contact-page{position:relative;z-index:2}
.contact-wrap{max-width:920px;margin:0 auto;padding:0 3rem 5rem}
.contact-card{background:var(--n2);border:1px solid var(--bdr);border-radius:20px;padding:2.25rem;position:relative;overflow:hidden}
.contact-card::before{content:'';position:absolute;top:-80px;right:-80px;width:220px;height:220px;background:radial-gradient(circle,rgba(45,142,255,0.1),transparent 65%);pointer-events:none}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-field{display:flex;flex-direction:column;gap:0.45rem}
.contact-field.full{grid-column:1/-1}
.contact-field label{font-size:0.82rem;color:var(--ow);font-weight:500}
.contact-field input,.contact-field textarea,.contact-field select{background:var(--n3);border:1px solid var(--bdr);border-radius:10px;padding:0.85rem 1rem;color:var(--wh);font-family:var(--ffb);font-size:0.92rem;transition:border-color .2s,box-shadow .2s;width:100%}
.contact-field input:focus,.contact-field textarea:focus,.contact-field select:focus{outline:none;border-color:rgba(45,142,255,0.55);box-shadow:0 0 0 3px rgba(45,142,255,0.12)}
.contact-field textarea{min-height:140px;resize:vertical;line-height:1.6}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:rgba(138,155,181,0.65)}
.contact-type{display:flex;gap:0.75rem;flex-wrap:wrap}
.type-pill{flex:1;min-width:140px}
.type-pill input{position:absolute;opacity:0;pointer-events:none}
.type-pill label{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.85rem 1rem;border-radius:10px;border:1px solid var(--bdr);background:var(--n3);color:var(--mu);cursor:pointer;font-size:0.88rem;transition:all .2s}
.type-pill input:checked+label{border-color:rgba(45,142,255,0.55);background:rgba(45,142,255,0.12);color:var(--wh)}
.company-field{display:none}
.company-field.visible{display:flex}
.contact-b2b-note{margin:0;padding:0.9rem 1.1rem;border-radius:12px;border:1px solid rgba(45,142,255,0.25);background:rgba(45,142,255,0.08);color:var(--ow);font-size:0.86rem;line-height:1.6}
.contact-consent{display:flex;flex-direction:column;gap:0.75rem;margin-top:0.35rem}
.consent-check{
  display:grid;
  grid-template-columns:1.35rem minmax(0,1fr);
  align-items:start;
  gap:0.75rem;
  color:var(--mu);
  font-size:0.84rem;
  line-height:1.55;
  cursor:pointer;
  font-weight:400;
  width:100%;
  text-align:left;
}
.consent-check input[type="checkbox"]{
  width:1.25rem;
  height:1.25rem;
  max-width:1.25rem;
  margin:0.2rem 0 0;
  accent-color:var(--blue);
  cursor:pointer;
  flex-shrink:0;
}
.consent-check > span{
  min-width:0;
  overflow-wrap:break-word;
  word-break:normal;
}
.consent-check a{color:var(--bl);text-decoration:underline}
.consent-check strong{color:var(--ow);font-weight:600}
.field-invalid{border-color:rgba(239,68,68,0.6)!important;box-shadow:0 0 0 3px rgba(239,68,68,0.12)!important}
input[type="checkbox"].field-invalid{outline:2px solid rgba(239,68,68,0.6);outline-offset:2px;box-shadow:none!important}
.consent-check .field-invalid ~ span{color:#fecaca}
.form-actions{display:flex;gap:0.85rem;flex-wrap:wrap;margin-top:1.5rem;align-items:center}
.btn-solid{background:var(--blue);color:var(--wh);padding:0.95rem 1.75rem;border-radius:12px;font-family:var(--ffb);font-size:0.95rem;font-weight:600;border:none;cursor:pointer;transition:all .2s}
.btn-solid:hover{background:var(--bl);transform:scale(1.02)}
.btn-solid:disabled{opacity:0.55;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;color:var(--mu);padding:0.95rem 1.5rem;border-radius:12px;font-family:var(--ffb);font-size:0.92rem;font-weight:500;border:1px solid var(--bdr);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center}
.btn-ghost:hover{border-color:rgba(255,255,255,0.22);color:var(--wh)}
.btn-outline{background:transparent;color:var(--blue);padding:0.85rem 1.4rem;border-radius:10px;font-family:var(--ffb);font-size:0.88rem;font-weight:600;border:1px solid rgba(45,142,255,0.45);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn-outline:hover{background:rgba(45,142,255,0.12);color:var(--bl)}
.form-note{font-size:0.82rem;color:var(--mu);margin-top:0.75rem;line-height:1.6}
.form-errors,.form-success{display:none;margin-top:1rem;padding:0.9rem 1rem;border-radius:10px;font-size:0.88rem;line-height:1.55}
.form-errors.visible{display:block;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.35);color:#fecaca}
.form-success.visible{display:block;background:rgba(45,200,154,0.1);border:1px solid rgba(45,200,154,0.35);color:#bbf7d0}
.rdv-banner{margin-top:1.5rem;padding:1.1rem 1.25rem;border-radius:14px;border:1px solid rgba(45,142,255,0.25);background:rgba(45,142,255,0.08);display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rdv-banner p{margin:0;color:var(--ow);font-size:0.9rem;max-width:520px;line-height:1.6}
.success-panel{display:none;margin-top:2rem;padding:2rem;border-radius:18px;border:1px solid rgba(45,200,154,0.35);background:linear-gradient(145deg,rgba(45,200,154,0.08),rgba(45,142,255,0.06));text-align:center}
.success-panel.visible{display:block}
.success-panel h3{font-family:var(--fft);font-size:1.6rem;margin-bottom:0.75rem}
.success-panel p{color:var(--mu);margin-bottom:1.25rem;line-height:1.7}
.booking-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem}
.calendar-panel,.booking-form-panel{background:var(--n2);border:1px solid var(--bdr);border-radius:18px;padding:1.5rem}
.calendar-panel h3,.booking-form-panel h3{font-family:var(--fft);font-size:1.1rem;margin-bottom:1rem}
.calendar-nav{display:flex;gap:0.65rem;margin-bottom:0.85rem;flex-wrap:wrap}
.cal-select{flex:1;min-width:120px;background:var(--n3);border:1px solid var(--bdr);border-radius:10px;padding:0.65rem 0.85rem;color:var(--wh);font-family:var(--ffb);font-size:0.88rem;cursor:pointer}
.cal-select:focus{outline:none;border-color:rgba(45,142,255,0.55)}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0.45rem;margin-bottom:0.35rem}
.calendar-weekdays span{text-align:center;font-size:0.68rem;color:var(--mu);font-weight:600;text-transform:uppercase;letter-spacing:0.04em}
.calendar-dates{display:grid;grid-template-columns:repeat(7,1fr);gap:0.45rem;margin-bottom:1.25rem;min-height:220px}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--bdr);background:var(--n3);color:var(--mu);font-size:0.78rem;cursor:pointer;transition:all .15s}
.cal-day:hover:not(.disabled):not(.selected){border-color:rgba(45,142,255,0.4);color:var(--wh)}
.cal-day.selected{background:var(--blue);border-color:var(--blue);color:var(--wh);font-weight:600}
.cal-day.disabled{opacity:0.35;cursor:not-allowed}
.cal-day.empty{border:none;background:transparent;cursor:default}
.slots-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.55rem}
.slot-btn{padding:0.75rem;border-radius:10px;border:1px solid var(--bdr);background:var(--n3);color:var(--ow);font-family:var(--ffb);font-size:0.85rem;cursor:pointer;transition:all .15s}
.slot-btn:hover{border-color:rgba(45,142,255,0.45)}
.slot-btn.selected{background:rgba(45,142,255,0.15);border-color:rgba(45,142,255,0.55);color:var(--wh)}
.slots-empty{color:var(--mu);font-size:0.88rem;line-height:1.6;padding:0.5rem 0}
.verify-panel{display:none;margin-top:1.5rem;padding:1.5rem;border-radius:16px;border:1px solid rgba(45,142,255,0.28);background:rgba(45,142,255,0.06)}
.verify-panel.visible{display:block}
.verify-code{display:flex;gap:0.65rem;flex-wrap:wrap;margin-top:0.75rem}
.verify-code input{flex:1;min-width:160px;letter-spacing:0.35em;text-align:center;font-size:1.25rem;font-weight:700}
.step-indicator{display:flex;gap:0.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.step-pill{padding:0.45rem 0.9rem;border-radius:100px;border:1px solid var(--bdr);color:var(--mu);font-size:0.78rem;font-weight:500}
.step-pill.active{border-color:rgba(45,142,255,0.45);background:rgba(45,142,255,0.12);color:var(--bl)}
@media(max-width:900px){
  .contact-grid,.booking-layout{grid-template-columns:1fr}
  .contact-wrap{padding:0 1.25rem 4rem}
  nav{padding:1rem 1.25rem}
  .hero{padding:5rem 1.25rem 3rem}
}