/* ============================================================
   PAGE LUTTES ET CAMPAGNES
   ============================================================ */

/* ---- GRILLE DES CAMPAGNES ---- */
.luttes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem; margin-top:2rem; }

.acc-card {
  background: rgba(255,255,255,0.042);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
  position: relative;
}
.acc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--gradient); transform:scaleX(0);
  transition:transform 0.3s; transform-origin:left;
}
.acc-card:hover { border-color: rgba(var(--magenta-light-rgb),0.32); transform: translateY(-2px); }
.acc-card:hover::before { transform: scaleX(1); }

.acc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.5rem;
  cursor: pointer;
  gap: 0.8rem;
  user-select: none;
  -webkit-user-select: none;
}
.acc-header-left { display:flex; align-items:center; gap:0.75rem; }
.acc-icon  { font-size: 1.7rem; flex-shrink: 0; }
.acc-title {
  font-family: var(--font-spartan); font-weight: 700;
  font-size: 0.95rem; line-height: 1.25;
  color: var(--blanc);
}

.acc-chevron {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s, background 0.2s;
}
.acc-chevron svg { transition: transform 0.3s; }
.acc-card.open .acc-chevron { background: var(--gradient); }
.acc-card.open .acc-chevron svg { transform: rotate(180deg); }

.acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s;
  padding: 0 1.5rem;
}
.acc-card.open .acc-body { max-height: 1000px; padding-bottom: 1.5rem; }

.acc-body p { font-size: 0.87rem; color: rgba(255,255,255,0.68); line-height: 1.6; margin-bottom: 0.7rem; }
.acc-body p:last-child { margin-bottom: 0; }
.acc-body ul { list-style: none; padding: 0; margin: 0 0 0.7rem 0; }
.acc-body ul li {
  font-size: 0.87rem; color: rgba(255,255,255,0.68); line-height: 1.6;
  padding-left: 1.1rem; position: relative; margin-bottom: 0.3rem;
}
.acc-body ul li::before { content: '→'; position: absolute; left: 0; color: var(--magenta); font-size: 0.8rem; }

.acc-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0.9rem 0; }

.acc-tag {
  display: inline-block;
  font-family: var(--font-spartan); font-weight: 700;
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill);
  padding: 0.18rem 0.65rem; margin-bottom: 0.6rem;
  color: rgba(255,255,255,0.55);
}

/* ---- PERMANENCE BOX ---- */
.perm-box {
  background: rgba(var(--violet-tint-rgb),0.09);
  border: 1px solid rgba(var(--violet-tint-rgb),0.24);
  border-radius: 20px; padding: 1.8rem;
  display: flex; gap: 1.2rem; align-items: flex-start;
  margin-top: 2rem;
}
.perm-icon { font-size: 2rem; flex-shrink: 0; }
.perm-body h3 { font-family: var(--font-spartan); font-weight: 700; font-size: 1rem; margin-bottom: 0.4rem; }