/* =========================================================
   BEELY STUDIO — Pages formulaire (contact / devis) + merci
   Styles de champs d'après la maquette Figma, thème clair/sombre
   (s'appuie sur les tokens de styles.css)
   ========================================================= */

/* L'attribut hidden doit toujours l'emporter sur les display: flex/inline-flex */
[hidden] { display: none !important; }

/* Bordure des champs au repos (un peu plus marquée en clair, champs blancs sur blanc) */
:root { --field-border: var(--surface-border); }
[data-theme="light"] { --field-border: rgba(20, 24, 31, 0.14); }

/* ---------- Layout 2 colonnes (gauche fixe 50vw/100vh, droite scrollable) ---------- */
.contact { display: flex; height: 100vh; overflow: hidden; }
.contact__inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
}
.contact__aside {
  flex: 1 1 0;            /* = 50vw */
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: clamp(28px, 4vw, 72px);
  background: rgba(30, 105, 254, 0.06);
}
.contact__main {
  flex: 1 1 0;            /* = 50vw */
  min-width: 0;
  height: 100%;
  overflow-y: auto;      /* seule cette colonne défile */
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 72px);
}

/* Barre du haut (retour accueil + thème) */
.contact__topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.contact__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-w-t3);
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.contact__back:hover { color: var(--color-primary); gap: 12px; }
.contact__back svg { width: 16px; height: 16px; }

/* Accroche */
.contact__heading { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; margin-top: auto; max-width: 30rem; }
.contact__title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.contact__lead { color: var(--color-w-t3); font-size: var(--fs-s); max-width: 42ch; }
.contact__points { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-s); margin-bottom: auto; }
.contact__point { display: flex; gap: 12px; align-items: flex-start; color: var(--color-w-t1); font-size: var(--fs-s); }
.contact__point svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; color: var(--color-primary); }

/* ---------- Formulaire ---------- */
.cform { display: flex; flex-direction: column; gap: var(--space-s); width: 100%; max-width: 440px; margin: 0 auto; }
.cform__head { display: flex; flex-direction: column; gap: var(--space-2xs); padding-bottom: var(--space-2xs); }
.cform__title { font-size: var(--fs-m); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.cform__desc { color: var(--color-w-t3); font-size: var(--fs-xs); }

/* Indicateur d'étapes */
.cform__progress { display: flex; align-items: center; gap: 8px; }
.cform__dot { width: 26px; height: 4px; border-radius: 99px; background: var(--color-w-t5); transition: background 0.3s var(--ease); }
.cform__dot.is-active { background: var(--color-primary); }
.cform__stepnum { margin-left: auto; font-size: var(--fs-2xs); color: var(--color-w-t3); }

.cform__step { display: flex; flex-direction: column; gap: var(--space-s); }
.cform__step[hidden] { display: none; }

/* ---------- Animations ---------- */
@keyframes cfIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* Champs : entrée en cascade à chaque affichage d'étape (et au chargement) */
.cform__step:not([hidden]) > * { animation: cfIn 0.45s var(--ease) backwards; }
.cform__step:not([hidden]) > *:nth-child(1) { animation-delay: 0.04s; }
.cform__step:not([hidden]) > *:nth-child(2) { animation-delay: 0.10s; }
.cform__step:not([hidden]) > *:nth-child(3) { animation-delay: 0.16s; }
.cform__step:not([hidden]) > *:nth-child(4) { animation-delay: 0.22s; }
.cform__step:not([hidden]) > *:nth-child(5) { animation-delay: 0.28s; }
.cform__step:not([hidden]) > *:nth-child(n+6) { animation-delay: 0.34s; }
/* Choix (cartes radio/checkbox) : cascade interne */
.cform__step:not([hidden]) .choice { animation: cfIn 0.4s var(--ease) backwards; }
.cform__step:not([hidden]) .choice:nth-child(2) { animation-delay: 0.12s; }
.cform__step:not([hidden]) .choice:nth-child(3) { animation-delay: 0.17s; }
.cform__step:not([hidden]) .choice:nth-child(4) { animation-delay: 0.22s; }
.cform__step:not([hidden]) .choice:nth-child(5) { animation-delay: 0.27s; }
.cform__step:not([hidden]) .choice:nth-child(n+6) { animation-delay: 0.32s; }
/* Titre + description de l'étape : ré-animés à chaque changement */
.cform__title.is-anim, .cform__desc.is-anim { animation: cfIn 0.4s var(--ease) backwards; }
/* Select ouvert : l'étape (et son dropdown) passe au-dessus des boutons */
.cform__step:has(.csel[data-open="true"]) { z-index: 20; }

@media (prefers-reduced-motion: reduce) {
  .cform__step:not([hidden]) > *,
  .cform__step:not([hidden]) .choice,
  .cform__title.is-anim, .cform__desc.is-anim { animation: none !important; }
}

/* Champs */
.f-row { display: flex; gap: var(--space-s); }
.f-row > .f-field { flex: 1 1 0; min-width: 0; }
.f-field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.f-field > label, .f-legend { font-size: var(--fs-xs); font-weight: 500; color: var(--color-white); padding: 0; }
.f-legend { margin-bottom: 6px; }  /* le <legend> ne reçoit pas le gap flex du .f-field -> on aligne sur l'écart des champs texte (6px) */
.f-field .opt { color: var(--color-w-t3); font-weight: 400; }

.f-input {
  width: 100%;
  padding: 12px 13px;
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-xs);
  color: var(--color-white);
  font: 400 var(--fs-s) / 1.5 var(--font);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.f-input::placeholder { color: var(--color-w-t3); font-weight: 300; }
.f-input:hover { border-color: var(--color-primary-t3); }
.f-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-t5); }
textarea.f-input { min-height: 130px; resize: vertical; }

/* État erreur */
.f-input.is-error { border-color: var(--color-pink); background: rgba(255, 45, 85, 0.1); }
.f-field.is-error .csel__btn { border-color: var(--color-pink); background: rgba(255, 45, 85, 0.1); }
.f-error { font-size: var(--fs-2xs); color: var(--color-pink); display: none; }
.f-field.is-error .f-error { display: block; }

/* Select custom */
.f-select { position: relative; }
.f-select select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.f-select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--color-w-t3);
  border-bottom: 1.5px solid var(--color-w-t3);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.f-select select option { background: var(--color-d2); color: var(--color-white); }

/* ---------- Select custom (déroulant stylé, JS) ---------- */
.f-select.is-enhanced::after { display: none; }            /* on retire le chevron natif */
.csel__native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.csel { position: relative; }
.csel__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; }
.csel__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel__btn.is-placeholder .csel__value { color: var(--color-w-t3); font-weight: 300; }
.csel__chev {
  flex: 0 0 auto; width: 9px; height: 9px; margin-right: 3px;
  border-right: 1.5px solid var(--color-w-t3);
  border-bottom: 1.5px solid var(--color-w-t3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.csel[data-open="true"] .csel__chev { transform: translateY(1px) rotate(-135deg); border-color: var(--color-primary); }

.csel__list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 5px; list-style: none;
  background: var(--color-d2);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xs);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38), 0 3px 10px rgba(0, 0, 0, 0.22);
  max-height: 244px; overflow-y: auto;
  opacity: 0; transform: translateY(-6px) scale(0.99); transform-origin: top center;
  pointer-events: none; transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.csel[data-open="true"] .csel__list { opacity: 1; transform: none; pointer-events: auto; }
.csel__opt {
  padding: 9px 11px; border-radius: var(--radius-2xs);
  font-size: var(--fs-s); color: var(--color-w-t1); cursor: pointer;
  transition: background-color 0.12s var(--ease), color 0.12s var(--ease);
}
.csel__opt.is-active { background: var(--color-primary-t5); color: var(--color-primary); }
.csel__opt[aria-selected="true"] { color: var(--color-primary); font-weight: 500; }

/* ---------- Choix en cartes (radios / checkboxes groupés) ---------- */
.choice-group { display: flex; flex-direction: column; }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-top-width: 0.5px;
  border-bottom-width: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.choice-group .choice:first-child { border-top-width: 1px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.choice-group .choice:last-child { border-bottom-width: 1px; border-radius: 0 0 var(--radius-xs) var(--radius-xs); }
.choice-group .choice:only-child { border-width: 1px; border-radius: var(--radius-xs); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__txt { flex: 1 1 0; min-width: 0; font-size: var(--fs-xs); font-weight: 500; }
.choice__txt small { display: block; font-weight: 400; color: var(--color-w-t3); font-size: var(--fs-2xs); margin-top: 2px; }
/* marqueur */
.choice__mark { position: relative; width: 20px; height: 20px; flex: 0 0 20px; border: 1.5px solid var(--color-w-t3); transition: border-color 0.2s var(--ease); }
.choice--radio .choice__mark { border-radius: 50%; }
.choice--check .choice__mark { border-radius: 4px; }
.choice__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform 0.18s var(--ease);
}
/* état sélectionné */
.choice:hover { border-color: var(--color-primary-t3); z-index: 1; }
.choice:has(input:checked) {
  background: var(--color-primary-t5);
  border-color: var(--color-primary);
  color: var(--color-primary);
  z-index: 2;
}
.choice:has(input:checked) .choice__mark { border-color: var(--color-primary); }
.choice:has(input:checked) .choice__mark::after { transform: scale(1); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--color-primary-t5); z-index: 3; }

/* Consentement simple */
.f-consent { display: flex; flex-direction: row; align-items: flex-start; gap: 11px; padding: 11px 13px; border: 1px solid var(--field-border); border-radius: var(--radius-xs); background: var(--surface); font-size: var(--fs-2xs); line-height: 1.5; color: var(--color-w-t3); cursor: pointer; }
.f-consent input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; accent-color: var(--color-primary); cursor: pointer; }
.f-consent a { color: var(--color-white); text-decoration: underline; }
.f-field.is-error.f-consent, .f-consent.is-error { color: var(--color-pink); }

/* ---------- Navigation du formulaire ---------- */
.cform__nav { display: flex; align-items: center; gap: var(--space-xs); padding-top: var(--space-2xs); }
.cform__nav .btn-prev {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h); flex: 0 0 auto;
  border: 1px solid var(--color-white); border-radius: var(--radius-s);
  color: var(--color-white); background: transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cform__nav .btn-prev:hover { background: var(--color-white); color: var(--color-d6); }
.cform__nav .btn-prev svg { width: 16px; height: 16px; }
.cform__nav .btn { margin-left: auto; }
.cform__status { font-size: var(--fs-xs); margin: 0; }
.cform__status--err { color: var(--color-pink); }

/* ---------- Thème clair : colonne droite blanche + champs blancs (hairline marquée) ---------- */
[data-theme="light"] .contact__main { background: var(--color-d2); }   /* blanc pur */
[data-theme="light"] .csel__list { box-shadow: 0 16px 34px rgba(20, 24, 31, 0.14), 0 3px 10px rgba(20, 24, 31, 0.08); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .contact { height: auto; overflow: visible; }
  .contact__inner { flex-direction: column; height: auto; }
  .contact__aside { height: auto; overflow: visible; gap: var(--space-m); }
  .contact__heading { margin-top: var(--space-s); max-width: none; }
  .contact__points { margin-bottom: 0; }
  .contact__main { height: auto; overflow: visible; padding-top: var(--space-l); }
  .cform { margin: 0 auto; }
}
@media (max-width: 640px) {
  /* Aside compact : on garde logo + retour accueil + toggle, on masque l'argumentaire */
  .contact__heading { display: none; }
  .contact__aside {
    gap: var(--space-s);
    padding: 14px clamp(16px, 5vw, 22px);
    border-bottom: 1px solid var(--field-border);
  }
  .contact__main { padding-top: var(--space-m); }
}
@media (max-width: 480px) {
  .f-row { flex-direction: column; }
}

/* =========================================================
   PAGE MERCI
   ========================================================= */
.thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  padding: var(--space-section) var(--space-m);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.thanks__glow {
  position: absolute;
  top: -10%; left: 50%;
  width: min(720px, 90%);
  transform: translateX(-50%);
  z-index: -1;
  opacity: var(--glow-opacity);
  pointer-events: none;
}
.thanks__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin-bottom: var(--space-m);
  border-radius: 50%;
  background: var(--color-primary-t5);
  color: var(--color-primary);
}
.thanks__badge svg { width: 38px; height: 38px; }
.thanks__title { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; max-width: 16ch; }
.thanks__title .accent { color: var(--color-primary); }
.thanks__text { color: var(--color-w-t3); font-size: var(--fs-s); max-width: 52ch; margin-top: var(--space-s); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; margin-top: var(--space-l); }