/* Page Charte accompagnant — s'appuie sur les variables globales */
.charter .hero-mini { background:#fff; border-bottom:1px solid var(--line); }
.charter .hero-mini .container { padding:1.2rem 0; }
.charter h1 { margin:0; font-size:clamp(1.6rem,3.2vw,2.2rem); font-weight:800; }

.pill-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.2rem; }
.pill { display:inline-flex; align-items:center; padding:.5rem .8rem;
  border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink);
  background:#fff; font-weight:600; }
.pill:hover { border-color:var(--ink); }

.charter .card { background:var(--surface); border:1px solid var(--line);
  border-radius:calc(var(--radius) + 2px); box-shadow:0 10px 24px rgba(2,12,27,.06);
  padding:clamp(1rem,2.4vw,1.4rem); }

.grid-2 { display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
.grid-3 { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
@media (max-width: 1100px){ .grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 780px){ .grid-2, .grid-3 { grid-template-columns:1fr; } }

.highlight h2 { margin-top:.2rem; }

.ticks { margin:.6rem 0 .2rem; padding-left:1.2rem; }
.ticks li { margin:.25rem 0; }

.block h4 { margin:.2rem 0 .4rem; }
.memo {
  margin-top:.8rem; font-size:.95rem; background:#f6f8fb;
  border:1px solid var(--line); border-radius:12px; padding:.6rem .8rem;
}

/* FAQ */
.faq details { border:1px solid var(--line); border-radius:12px; padding:.6rem .8rem; margin:.5rem 0; background:#fff; }
.faq summary { cursor:pointer; font-weight:700; }
.faq p { margin:.4rem 0 0; }

/* CTA “Intéressé·e ?” (haut et bas) */
.cta-call {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:.6rem .8rem;
  border-left:4px solid var(--accent, #513A85);
}
.cta-call .cta-text { font-weight:800; }
.cta-call .cta-phone {
  font-weight:800; font-size:clamp(1rem, 2.2vw, 1.25rem); text-decoration:none; color:var(--ink);
}
.cta-call .cta-phone:hover { text-decoration:underline; }
.charter .hero-mini .cta-call.top { margin-top:.8rem; }
.charter .cta-call.bottom { margin-top:1rem; }

.legal-note { margin:1rem 0 2rem; }

/* Réutilisation : .container, .small, .muted, .card, etc. */