/* Charte MAEF v3 : ajustements propres aux pages « accompagnements » (/accompagnements/[slug]).
 * Couvre aussi les blocs de contenu partagés avec le blog (encadrés, chiffres clés, tableaux,
 * FAQ, étapes, citations) : leurs couleurs codées en dur dans ENHANCE_CSS (layout.tsx) étaient
 * bleues ou rouges. Habillage seulement : même HTML, mêmes textes. */

/* ---- Corps de texte : liens et petits textes ---- */
.maef-v3 .w-richtext a {
  color: var(--v3-green);
  text-decoration: underline;
  text-decoration-color: rgba(16, 65, 59, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.maef-v3 .w-richtext a:hover { color: var(--v3-green-deep); text-decoration-color: var(--v3-green); }
.maef-v3 .w-richtext h2 { color: var(--v3-ink); }
.maef-v3 .w-richtext h3 { color: var(--v3-green); }
.maef-v3 .maef-updated { color: var(--v3-grey); }
.maef-v3 .maef-sources { color: var(--v3-grey); }
.maef-v3 .maef-sources a { color: var(--v3-green); }

/* ---- Chiffres clés : tuiles sauge, chiffre en 800 resserré ---- */
/* La règle « .w-richtext ul » d'ENHANCE_CSS décalait la grille vers la droite : on l'aligne sur le texte. */
.maef-v3 .maef-keyfigures,
.maef-v3 .w-richtext .maef-keyfigures,
.maef-v3 .w-richtext .maef-steps-grid { padding-left: 0; }
.maef-v3 .maef-keyfigures { gap: 14px; }
.maef-v3 .maef-keyfigures li,
.maef-v3 .maef-steps-grid li { margin-bottom: 0; }
.maef-v3 .maef-keyfigures li {
  background: var(--v3-sage);
  border: 0;
  border-radius: 24px;
  padding: 22px 22px 20px;
}
.maef-v3 .maef-keyfigures .kf-value {
  color: var(--v3-green);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.maef-v3 .maef-keyfigures .kf-label { color: var(--v3-ink); }
.maef-v3 .maef-keyfigures .kf-source,
.maef-v3 .maef-keyfigures .kf-source a { color: var(--v3-grey); }
.maef-v3 .maef-keyfigures .kf-source a { text-decoration-color: rgba(90, 97, 94, 0.45); }

/* ---- Encadrés : exemple en sauge, « à retenir » en crème avec trait d'or ---- */
.maef-v3 .callout {
  background: var(--v3-sage);
  border-left: 0;
  border-radius: 24px;
  padding: 18px 24px;
  color: var(--v3-ink);
}
.maef-v3 .callout em { color: var(--v3-green); }
.maef-v3 .callout-tip {
  background: var(--v3-cream);
  box-shadow: inset 4px 0 0 var(--v3-cta);
}
.maef-v3 .callout-tip em { color: var(--v3-ink); }

/* ---- Citations ---- */
.maef-v3 .w-richtext blockquote {
  background: var(--v3-cream);
  border-left: 4px solid var(--v3-green);
  border-radius: 0 24px 24px 0;
  color: var(--v3-ink);
}

/* ---- Tableaux (délais, changements, tableaux Markdown du blog) ---- */
.maef-v3 .maef-table-wrap {
  border: 1px solid var(--v3-line);
  border-radius: 24px;
  background: #fff;
}
.maef-v3 .maef-table-wrap .maef-table { margin: 0; }
.maef-v3 .maef-table th,
.maef-v3 .maef-table td { border-bottom-color: var(--v3-line); padding: 12px 14px; }
.maef-v3 .maef-table tbody tr:last-child td { border-bottom: 0; }
.maef-v3 .maef-table th,
.maef-v3 .w-richtext thead th {
  background: var(--v3-sage);
  color: var(--v3-green);
  font-weight: 700;
}
.maef-v3 .w-richtext th,
.maef-v3 .w-richtext td { border-color: var(--v3-line); }
.maef-v3 .w-richtext tbody tr:nth-child(even) { background: #FAFAF7; }
.maef-v3 .maef-table tbody tr:nth-child(even) { background: #FAFAF7; }

/* ---- « Comment Mon Avenir en France peut vous aider » : bande verte forêt ---- */
.maef-v3 .maef-steps {
  background: var(--v3-green);
  background-image: none;
  border-radius: 24px;
  padding: 30px 28px 24px;
}
.maef-v3 .maef-steps-intro { color: rgba(255, 255, 255, 0.86); }
.maef-v3 .maef-steps-grid li {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 20px 18px 18px;
}
.maef-v3 .maef-steps-grid .ms-num {
  color: rgba(255, 255, 255, 0.32);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.maef-v3 .maef-steps-grid .ms-icon {
  background: var(--v3-hl);
  color: var(--v3-green);
  border-radius: 12px;
}
.maef-v3 .maef-steps-grid strong {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.maef-v3 .maef-steps-grid p { color: rgba(255, 255, 255, 0.82); }
.maef-v3 .maef-steps-note { color: rgba(255, 255, 255, 0.66); }

/* ---- Foire aux questions ---- */
.maef-v3 .w-richtext .article-faq .faq-title { color: var(--v3-ink); font-weight: 800; letter-spacing: -0.035em; }
.maef-v3 .faq-item {
  border: 1px solid var(--v3-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.maef-v3 .faq-item[open] {
  border-color: transparent;
  box-shadow: 0 1px 0 var(--v3-line), 0 24px 50px -30px rgba(16, 65, 59, 0.45);
}
.maef-v3 .faq-item summary.faq-q { color: var(--v3-ink); font-weight: 700; }
.maef-v3 .faq-item summary.faq-q:hover { color: var(--v3-green); }
.maef-v3 .faq-item[open] summary.faq-q { border-bottom-color: var(--v3-line); color: var(--v3-green); }
.maef-v3 .faq-chevron { border-right-color: var(--v3-green); border-bottom-color: var(--v3-green); }
.maef-v3 .faq-item .faq-a p { color: var(--v3-grey); }

/* ---- Colonne de droite : sommaire et encart ---- */
.maef-v3 .article-toc .toc-title { color: var(--v3-green); }
.maef-v3 .article-toc li + li { border-top-color: var(--v3-line); }
.maef-v3 .article-toc a { color: var(--v3-ink); }
.maef-v3 .article-toc a:hover { color: var(--v3-green); }
.maef-v3 .widget-block { border-color: var(--v3-line); border-radius: 24px; }

@media (max-width: 600px) {
  .maef-v3 .maef-steps { padding: 24px 16px 18px; border-radius: 24px; }
  .maef-v3 .callout { padding: 16px 18px; }
  .maef-v3 .maef-keyfigures li { padding: 18px 18px 16px; }
}