/* ====== 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-cc-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é supplémentaire */
}

/* ====== 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; }

/* ====== Rail (H1 + card alignés) ====== */
.section-rail{
  max-width: 860px;
  margin-inline: auto;
}

/* ====== Intro ====== */
.page-intro{ text-align:left; 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 formulaire ====== */
.card.form-cc{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1.25rem;
}

.form-cc .grid{
  display:grid; gap:1rem;
  grid-template-columns: 1fr 1fr;
}
.form-cc .field-full{ grid-column: 1 / -1; }

@media (max-width: 760px){
  .form-cc .grid{ grid-template-columns: 1fr; }
}

.form-cc .field{
  display:flex; flex-direction:column; gap:.45rem;
  min-width: 0; /* Important pour éviter overflow flex */
}
.form-cc label{ font-weight:700; color:var(--text); }

/* CORRECTIF RESPONSIVE ICI */
.form-cc input[type="text"],
.form-cc input[type="email"],
.form-cc input[type="file"],
.form-cc select,
.form-cc 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-cc textarea{ resize: vertical; min-height: 8rem; }
.form-cc input::placeholder, .form-cc textarea::placeholder{
  color: color-mix(in oklab, var(--muted) 86%, transparent);
}
.form-cc input:focus, .form-cc select:focus, .form-cc 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 */
.help{ color: var(--muted); font-size:.9rem; margin-top:.25rem; }
.field-error{ color:#dc2626; font-weight:700; margin:.25rem 0 0; }

/* preview image */
.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; }

/* actions */
.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-lg{ font-size:1rem; }
.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; }

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