/* ===== RESET & BODY ===== */
* {
  margin: 0; padding: 0; box-sizing: border-box;
  scroll-behavior: smooth;
}
body {
  font-family: 'Poppins', sans-serif;
  color: #3A2E2E;
  background: #FDF6F7;
}

/* ===== HEADER & NAV ===== */
header {
  display: flex; align-items: center; justify-content: space-between;
  background: #E7CBCF; padding: .5rem 1rem; position: sticky; top: 0; z-index: 1000;
}
.logo-container { display: flex; align-items: center; }
.logo-container img { height: 50px; margin-right: .5rem; }
.logo-container h1 { font-size: 1.4rem; font-weight: 600; }
.logo-container a { text-decoration: none; color: #3A2E2E; }

.header-contact {
  background: #CA978E; color: #FFF; padding: .5rem .75rem;
  border-radius: 5px; text-decoration: none; font-weight: 500;
  transition: background .3s;
}
.header-contact:hover { background: #b58980; }

#openBtn { display: none; cursor: pointer; }
.burger-icon span {
  display: block; width: 30px; height: 4px; background: #3A2E2E; margin: 5px 0;
}

/* Desktop nav */
#navMenu {
  display: flex; align-items: center; gap: 1rem;
}
#navMenu ul {
  list-style: none; display: flex; gap: 1rem;
}
#navMenu ul li a {
  text-decoration: none; color: #3A2E2E; padding: .4rem .6rem; border-radius: 4px;
  transition: background .3s;
}
#navMenu ul li a:hover { background: #f2e1e3; }

/* Mobile nav */
@media (max-width: 1280px) {
  .header-contact { display: none; }
  #openBtn { display: block; }
  #navMenu {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; background: #E7CBCF;
    flex-direction: column; padding-top: 60px; gap: 2rem; z-index: 999;
  }
  #navMenu.active { display: flex; }
  #closeBtn {
    display: block; position: absolute; top: 10px; right: 20px;
    font-size: 2rem; color: #3A2E2E; text-decoration: none;
  }
  #navMenu ul { flex-direction: column; text-align: center; }
}
@media (min-width: 1281px) {
  #closeBtn { display: none; }
}

/* ===== SOCIAL ICONS ===== */
.social-links { display: flex; gap: 1rem; align-items: center; }
.social-links img { width: 24px; height: auto; }

/* ===== LISTE DES PROPOSITIONS ===== */
.list-section {
  max-width: 1200px; margin: 2rem auto; padding: 0 1rem;
}
.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.proposal-item {
  background: #FFF; border: 1px solid #E7CBCF; border-radius: 6px;
  padding: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
}
.proposal-item h3 {
  font-size: 1.1rem; margin-bottom: .5rem;
}
.proposal-item p { font-size: .9rem; margin-bottom: .5rem; }
.stakes {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0;
}
.stake-badge {
  background: #E7CBCF; color: #3A2E2E; padding: .2rem .5rem;
  border-radius: 4px; font-size: .8rem;
}
.proposal-item a.details-link {
  margin-top: auto; align-self: flex-end;
  text-decoration: none; color: #CA978E; font-weight: 500;
  transition: color .3s;
}
.proposal-item a.details-link:hover { color: #b58980; }

/* ===== FOOTER ===== */
footer {
  background: #E7CBCF; text-align: center; padding: 1rem;
  color: #3A2E2E; margin-top: 2rem;
}

/* ==========================================================================
   Grid des propositions — ajouté pour forcer la mise en page
   ========================================================================== */
.items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  margin-top: 1rem !important;
}

/* ——— Spécificité accrue pour forcer la grille ——— */
.list-section .items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: start !important;
  margin-top: 1rem !important;
}

/* ===== How it works section ===== */
.how-it-works {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #FFF;
  border: 1px solid #E7CBCF;
  border-radius: 6px;
}
.how-it-works h2 { margin-bottom: 1rem; }
.how-it-works p  { margin-bottom: 1rem; }
.how-it-works ul { margin-left: 1.2rem; list-style: disc; }

/* ===== Form container (create proposal) ===== */
.form-container {
  max-width: 650px;
  margin: 2rem auto;
  padding: 1.5rem 2rem;
  background: #FFF;
  border: 1px solid #E7CBCF;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.form-container h2            { margin-bottom: 1.2rem; text-align: center; }
.form-container .form-group   { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-container label         { font-weight: 500; }
.form-container input,
.form-container select,
.form-container textarea      {
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.form-container button[type="submit"],
.form-container #addOption    {
  background: #CA978E;
  color: #FFF;
  border: none;
  padding: .6rem 1.1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background .3s;
  font-weight: 500;
}

.form-container button:hover,
.form-container #addOption:hover { background: #b58980; }

.form-container #addOption {
  margin-bottom: 1rem;
  align-self: flex-start;
}

/* ===== Activation box (pending proposal) ===== */
.activation-box {
  background: #FFF4E5;
  border: 1px solid #ffd59e;
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem 0 2rem;
}

/* ===== Feedback boxes ===== */
.success-box, .error-box {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid;
  border-radius: 4px;
}
.success-box { background:#e9f6ec; border-color:#60c26d; color:#277c34; }
.error-box   { background:#fdecea; border-color:#f5a097; color:#b00020; }

.copy-btn{
  margin-left:.5rem;
  padding:.25rem .6rem;
  font: inherit;
  background:#CA978E;
  color:#fff;
  border:0;
  border-radius:4px;
  cursor:pointer;
}
.copy-btn:hover{ background:#b58980; }