/*
 * Variations éditoriales appliquées uniquement sous le haut de page.
 * Le hero conserve volontairement le modèle CMA d'origine : texte à gauche,
 * image séparée à droite, fond clair et contraste constant.
 */

.budget-page .dc-toc,
.budget-page .dc-section,
.budget-page .dc-band,
.budget-page .dc-cards > *,
.budget-page .dc-note {
  transition: none;
}

/* Contraste des cartes placées dans une section sombre. */
.budget-page .dc-dark .dc-cards article,
.budget-page .dc-dark .dc-cards > a {
  background: #fff;
  color: #20211f;
  border-color: #deded9;
}
.budget-page .dc-dark .dc-cards article h3,
.budget-page .dc-dark .dc-cards > a h3 {
  color: #20211f;
}

/* Affiche : sommaire en pastilles et première carte éditoriale mise en avant. */
.layout-poster .dc-toc {
  gap: 10px;
  border-bottom: 0;
}
.layout-poster .dc-toc a {
  padding: 9px 14px;
  background: #f3f3f0;
  border: 1px solid #e1e1dc;
  border-radius: 999px;
}
.layout-poster .dc-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.layout-poster .dc-cards > *:first-child {
  grid-row: span 2;
  padding: 38px;
  background: #fff8df;
  border-color: #ead38c;
}

/* Centré : rythme plus aéré pour les pages orientées comparaison. */
.layout-centered .dc-section:not(.dc-dark) > .dc-label,
.layout-centered .dc-section:not(.dc-dark) > h2,
.layout-centered .dc-section:not(.dc-dark) > p:first-of-type {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.layout-centered .dc-section:not(.dc-dark) > p:first-of-type {
  max-width: 820px;
}
.layout-centered .dc-cards {
  align-items: stretch;
}
.layout-centered .dc-cards > * {
  border-top: 5px solid #ffc431;
  border-radius: 8px 8px 18px 18px;
}

/* Inversé : l'encadré pratique précède le développement dans les sections à deux colonnes. */
.layout-reverse .dc-two {
  grid-template-columns: .9fr 1.25fr;
}
.layout-reverse .dc-two > *:first-child {
  order: 2;
}
.layout-reverse .dc-two > *:last-child {
  order: 1;
}
.layout-reverse .dc-note {
  background: #fff8df;
  border-left-color: #ffc431;
  box-shadow: 0 14px 34px rgba(32,33,31,.07);
}
.layout-reverse .dc-cards > *:nth-child(even) {
  transform: translateY(14px);
}

/* Panneaux : cartes plus visuelles, toujours sur fond clair. */
.layout-panel .dc-cards {
  gap: 14px;
}
.layout-panel .dc-cards > * {
  border: 0;
  border-radius: 24px 8px 24px 8px;
  box-shadow: 0 12px 34px rgba(32,33,31,.09);
}
.layout-panel .dc-band .dc-cards > *:nth-child(2) {
  background: #fff8df;
}
.layout-panel .dc-note {
  border-left: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px #e7d69f;
}

/* Éditorial : largeur de lecture resserrée et composition proche d'un article magazine. */
.layout-editorial .dc-section.wrap {
  max-width: 980px;
}
.layout-editorial .dc-section:not(.dc-dark) > h2 {
  font-size: clamp(32px, 4vw, 50px);
  max-width: 820px;
}
.layout-editorial .dc-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.layout-editorial .dc-cards > * {
  border-radius: 6px;
  border-left: 5px solid #ffc431;
}
.layout-editorial .dc-band {
  background: #f6f4ec;
}

/* Récit : colonne de lecture calme et encadrés horizontaux. */
.layout-story .dc-section.wrap {
  max-width: 920px;
}
.layout-story .dc-section:not(.dc-dark) > p {
  max-width: 790px;
}
.layout-story .dc-note {
  border-left: 0;
  border-top: 5px solid #ffc431;
  border-radius: 0 0 18px 18px;
}
.layout-story .dc-cards > * {
  border-radius: 4px;
}

/* Guide : sommaire structuré et étapes numérotées, sans bande sombre. */
.layout-guide .dc-toc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin-top: 24px;
  border: 1px solid #deded9;
  border-radius: 16px;
  overflow: hidden;
}
.layout-guide .dc-toc a {
  padding: 16px 18px;
  border-right: 1px solid #deded9;
  border-bottom: 1px solid #deded9;
}
.layout-guide .dc-cards {
  counter-reset: guide-card;
}
.layout-guide .dc-cards > * {
  counter-increment: guide-card;
  border-radius: 6px;
  box-shadow: 7px 7px 0 #ecece6;
}
.layout-guide .dc-cards > *::before {
  content: counter(guide-card, decimal-leading-zero);
  display: block;
  margin-bottom: 16px;
  color: #795900;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
}

/* La page TNS conserve ses cartes de guide, avec le sommaire léger commun aux autres pages. */
.layout-guide.toc-standard .dc-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 0;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid #deded9;
  border-radius: 0;
  overflow: visible;
}
.layout-guide.toc-standard .dc-toc a {
  padding: 0;
  border: 0;
}

@media (max-width: 800px) {
  .layout-poster .dc-cards,
  .layout-editorial .dc-cards,
  .layout-guide .dc-toc,
  .layout-reverse .dc-two {
    grid-template-columns: 1fr;
  }
  .layout-poster .dc-cards > *:first-child {
    grid-row: auto;
    padding: 28px;
  }
  .layout-reverse .dc-two > *:first-child,
  .layout-reverse .dc-two > *:last-child {
    order: initial;
  }
  .layout-reverse .dc-cards > *:nth-child(even) {
    transform: none;
  }
  .layout-guide .dc-toc a {
    border-right: 0;
  }
}