/* ==========================================================================
   MutuCash — Pages de contenu (légales, contact) · identité Sapin & Papier
   Requiert tokens.css (variables --mc-*) + les Google Fonts.
   ========================================================================== */

* { box-sizing: border-box; }

body.mc-page {
  margin: 0;
  background: var(--mc-papier);
  color: var(--mc-encre);
  font-family: var(--mc-font-texte);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- Header (repris de la landing) ---------------- */
.mc-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--mc-voile);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mc-brume);
}
.mc-header-inner {
  max-width: 900px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 20px;
}
.mc-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mc-brand .wm { font: 700 21px var(--mc-font-titre); letter-spacing: -.3px; }
.mc-brand .wm .a { color: var(--mc-sapin); }
.mc-brand .wm .b { color: var(--mc-vert); }
.mc-header .cta {
  margin-left: auto;
  font: 600 15px var(--mc-font-texte);
  background: var(--mc-sapin); color: var(--mc-papier);
  text-decoration: none; border-radius: 12px; padding: 10px 18px;
  transition: background .18s ease;
}
.mc-header .cta:hover { background: var(--mc-sapin-fonce); }

/* ---------------- Corps ---------------- */
.mc-wrap { max-width: 800px; margin: 0 auto; padding: 48px 28px 72px; }

.mc-back {
  display: inline-block; margin-bottom: 24px;
  color: var(--mc-vert); text-decoration: none; font-weight: 600; font-size: 15px;
}
.mc-back:hover { color: var(--mc-sapin); }

.mc-wrap h1 {
  font: 700 40px/1.12 var(--mc-font-titre);
  letter-spacing: -.8px; color: var(--mc-sapin);
  margin: 0 0 12px; text-wrap: balance;
}
.mc-lead { color: var(--mc-texte-2); font-size: 17px; margin: 0 0 36px; text-wrap: pretty; }

.mc-section {
  background: var(--mc-blanc-chaud);
  border: 1px solid var(--mc-brume);
  border-radius: var(--mc-r-carte);
  padding: 24px 26px;
  margin-bottom: 18px;
}
.mc-section.accent { border-left: 3px solid var(--mc-vert); }

.mc-section h2 {
  font: 700 21px var(--mc-font-titre); color: var(--mc-sapin);
  margin: 0 0 12px;
}
.mc-section h3 {
  font: 600 16px var(--mc-font-texte); color: var(--mc-encre);
  margin: 16px 0 6px;
}
.mc-section p { margin: 0 0 10px; color: var(--mc-texte-2); }
.mc-section p:last-child { margin-bottom: 0; }
.mc-section strong { color: var(--mc-encre); }
.mc-section a { color: var(--mc-vert); font-weight: 600; }
.mc-section ul { margin: 0 0 10px; padding-left: 22px; color: var(--mc-texte-2); }
.mc-section li { margin-bottom: 6px; }

.mc-note { color: var(--mc-texte-3); font-size: 14px; }

/* ---------------- Contact form ---------------- */
.mc-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.mc-field label { font: 600 13px var(--mc-font-texte); color: var(--mc-texte-2); }
.mc-field input, .mc-field textarea {
  background: var(--mc-blanc-chaud);
  border: 1.5px solid var(--mc-bordure-champ); border-radius: var(--mc-r-input);
  padding: 13px 16px; font: 500 15px var(--mc-font-texte); color: var(--mc-encre);
  width: 100%; resize: vertical;
}
.mc-field input:focus, .mc-field textarea:focus {
  outline: 2px solid var(--mc-vert); outline-offset: 1px; border-color: var(--mc-vert);
}
.mc-submit {
  font: 600 16px var(--mc-font-texte);
  background: var(--mc-sapin); color: var(--mc-papier);
  border: none; border-radius: var(--mc-r-bouton); padding: 14px 26px; cursor: pointer;
  transition: background .18s ease;
}
.mc-submit:hover { background: var(--mc-sapin-fonce); }

/* ---------------- Footer ---------------- */
.mc-footer {
  background: var(--mc-encre); color: #A8A695;
  padding: 32px 28px;
}
.mc-footer-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.mc-footer .wm { font: 700 17px var(--mc-font-titre); }
.mc-footer .wm .a { color: var(--mc-papier); }
.mc-footer .wm .b { color: var(--mc-vert-clair); }
.mc-footer .base { font-size: 13.5px; color: #6E6C5E; }
.mc-footer nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.mc-footer nav a { color: #A8A695; text-decoration: none; font-size: 13.5px; transition: color .18s ease; }
.mc-footer nav a:hover { color: var(--mc-papier); }

@media (max-width: 560px) {
  .mc-wrap h1 { font-size: 30px; }
  .mc-footer nav { margin-left: 0; }
}