@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===== Variables par défaut (light) ===== */
:root,
html[data-bs-theme="light"],
html[data-theme="light"]{
  --bg:#ffffff;
  --panel:#ffffff;
  --fg:#07074D;
  --muted:#6381b4a6;
  --border:#DDE3EC;
  --primary:#5c95f9;
  --shadow:0 5px 8px rgba(0,0,0,.05);
}

/* ===== Dark explicite via attribut ===== */
html[data-bs-theme="dark"],
html[data-theme="dark"]{
  --bg:#0E1116;
  --panel:#151922;
  --fg:#E6E8EE;
  --muted:#9AA4B2;
  --border:#2A2F3A;
  --primary:#6EA2FF;
  --shadow:0 5px 12px rgba(0,0,0,.35);
}

/* ===== Préférence système SEULEMENT si pas d’attribut ===== */
html:not([data-bs-theme]):not([data-theme]) { /* reste en light par défaut */ }
@media (prefers-color-scheme: dark){
  html:not([data-bs-theme]):not([data-theme]){
    --bg:#111317;
    --panel:#151922;
    --fg:#E6E8EE;
    --muted:#9AA4B2;
    --border:#2A2F3A;
    --primary:#6EA2FF;
    --shadow:0 5px 12px rgba(0,0,0,.35);
  }
}

/* ===== Reset + body ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Inter",sans-serif;
  background:var(--bg);
  color:var(--fg);
}

/* ===== Wrapper ===== */
.formbold-main-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 16px;
}
.formbold-form-wrapper{
  width:min(90vw,1400px);
  margin:auto;
  background:var(--panel);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow);
}

/* ===== Grille 2 colonnes ===== */
.formbold-input-flex{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(12px,2vw,24px);
  row-gap:22px;
  margin-bottom:22px;
}
.formbold-input-flex>div{
  display:flex;
  flex-direction:column-reverse;
  min-width:0;
}

/* ===== Zone textarea ===== */
.formbold-textarea{
  display:flex;
  flex-direction:column-reverse;
  margin-bottom:22px;
}

/* ===== Champs ===== */
.formbold-form-input{
  width:100%;
  padding:12px 8px;
  background:var(--panel);
  border:none;
  border-bottom:2px solid var(--border);
  font:500 18px/1.4 "Inter",sans-serif;
  color:var(--fg);
  outline:none;
  resize:none;
  transition:border-color .2s, background .2s;
}
.formbold-form-input::placeholder{color:var(--muted)}
.formbold-form-input:focus{border-color:var(--primary)}
.formbold-form-label{
  color:var(--fg);
  font-weight:500;
  font-size:14px;
  line-height:24px;
  margin-bottom:5px;
}
.formbold-form-input:focus + .formbold-form-label{color:var(--primary)}

/* petit contraste en dark */
html[data-bs-theme="dark"] .formbold-form-input,
html[data-theme="dark"] .formbold-form-input{
  background:color-mix(in oklab, var(--panel), #ffffff 3%);
}

/* ===== Boutons ===== */
.formbold-btn{
  font-size:16px;
  border-radius:5px;
  padding:12px 25px;
  border:none;
  font-weight:500;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  display:inline-block;
  transition:box-shadow .2s,transform .1s;
}
.formbold-btn:hover{
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}

/* ===== Responsive ===== */
@media (max-width:900px){
  .formbold-input-flex{grid-template-columns:1fr;}
}