/* Tokens + Montserrat + Dark/Light */
:root{
  --accent:#ff6233;

  /* light */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f6f7f9;
  --text:#111319;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow-1:0 10px 26px rgba(0,0,0,.06);

  --radius:16px;
  --radius-sm:12px;
}
:root[data-theme="dark"]{
  --bg:#0f131b;
  --surface:#0b0e14;
  --surface-2:#0f141e;
  --text:#e8edf5;
  --muted:#9aa4b2;
  --border:#1c2230;
  --shadow-1:0 16px 36px rgba(0,0,0,.45);
}

body.proposer-ma-page{
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--surface-2);
  color: var(--text);
  overflow-x: hidden; /* Sécurité anti-scroll */
}

/* Layout (container 1200px) */
.page-wrapper{ padding: clamp(2.5rem,6vw,5rem) 0; }
.container{ max-width: var(--container, 1200px); margin: 0 auto; padding: 0 1.5rem; }
.section-rail{ max-width: 860px; margin-inline:auto; }

/* Intro */
.page-intro{ margin-bottom:1.25rem; }
.page-title{ font-weight:800; font-size:clamp(2rem,4.2vw,2.6rem); margin:0 0 .35rem; color:var(--text); }
.page-subtitle{ color:var(--muted); font-size:clamp(1rem,1.6vw,1.1rem); margin:0; }

/* Card */
.card.form-ma{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1.25rem;
}

/* Grid + Fields */
.form-ma .grid{ display:grid; gap:1rem; grid-template-columns: 1fr 1fr; }
.form-ma .field-full{ grid-column: 1 / -1; }
@media (max-width: 760px){ .form-ma .grid{ grid-template-columns: 1fr; } }

.field{
  display:flex; flex-direction:column; gap:.45rem;
  min-width: 0; /* Important pour éviter overflow flex */
}
.group-title{ font-size:1.1rem; font-weight:800; margin:.2rem 0; color:var(--text); }

.form-ma label{ font-weight:700; color:var(--text); }

/* CORRECTIF RESPONSIVE ICI */
.form-ma input[type="text"],
.form-ma input[type="email"],
.form-ma input[type="url"],
.form-ma input[type="file"],
.form-ma select,
.form-ma textarea{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;

  /* Indispensable pour ne pas déborder sur mobile avec le padding */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.form-ma textarea{ resize: vertical; min-height: 8rem; }
.form-ma input::placeholder, .form-ma textarea::placeholder{ color: color-mix(in oklab, var(--muted) 86%, transparent); }
.form-ma input:focus, .form-ma select:focus, .form-ma textarea:focus{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, #fff);
}

/* Help + error states */
.help{ color: var(--muted); font-size:.9rem; margin-top:.25rem; }
.field-error{
  display:none !important;
  color:#dc2626; font-weight:700; margin-top:.15rem;
}
.field.invalid .field-error{
  display:block !important;
}

/* Preview */
.preview{
  margin-top:.6rem; border:1px dashed var(--border);
  border-radius:12px; padding:.5rem;
  background: color-mix(in oklab, var(--surface) 96%, var(--surface-2));
}
.preview img{ display:block; max-width:100%; height:auto; border-radius:10px; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Info box */
.form-help{
  margin: .25rem 0 0;
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--border));
  border-radius: 12px;
  padding: .9rem 1rem;
  color: var(--text);
}

/* Actions + buttons */
.actions{ margin-top:1rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; cursor:pointer; border-radius:999px; padding:.7rem 1.1rem; border:1px solid transparent; }
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 16px 30px rgba(0,0,0,.16); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.btn .spinner{ display:none; }
.btn.is-submitting .label{ display:none; }
.btn.is-submitting .spinner{ display:inline; }

/* Status */
.success{ color:#16a34a; font-weight:800; margin-top:.6rem; }
.error{ color:#dc2626; font-weight:800; margin-top:.6rem; }