/* Présentations propres au guide des doléances ; aucun style partagé modifié. */
.grievance-article .grievance-page {
  --grievance-pale-blue: #edf3f6;
  --grievance-ivory: #f7f4ee;
}

/* Chaque section reste identifiable ; la comparaison partage un seul fond. */
.grievance-article .grievance-intro {
  padding: 36px 40px !important;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 50px -44px rgba(18, 58, 90, .35);
}
.grievance-article .grievance-intro::after { display: none; }
.grievance-article .grievance-intro .record-intro-copy { padding: 0; }
.grievance-article .grievance-intro .record-lead { margin-bottom: 0; }
.grievance-article .grievance-definition-grid {
  max-width: 960px;
  gap: 28px;
  margin: 0 auto;
  padding: 27px 28px;
  border-radius: 10px;
  background: var(--grievance-pale-blue);
}
.grievance-article .grievance-definition-grid article {
  padding: 0;
  border: 0;
  background: transparent;
}
.grievance-article .grievance-definition-grid h3 { color: #806137; }
.grievance-article .grievance-definition-grid p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
}

/* Grands cadres de section conservés, sans remettre les cartes des bénéfices. */
.grievance-article .grievance-purpose,
.grievance-article .grievance-topics,
.grievance-article .grievance-example {
  margin-top: 26px;
  padding: 36px 32px !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 50px -44px rgba(18, 58, 90, .35);
}
.grievance-article .grievance-purpose-grid {
  max-width: 960px;
  gap: 36px;
}
.grievance-article .grievance-purpose-grid article {
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.grievance-article .grievance-benefit-icon {
  flex: none;
  width: 36px;
  height: 36px;
  margin-bottom: 15px;
  fill: none;
  stroke: #8a6b3d;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.grievance-article .grievance-purpose-grid h3 { line-height: 1.25; }
.grievance-article .grievance-purpose-grid p {
  font-size: .9rem;
  line-height: 1.65;
}

/* Trois cartes distinctes pour les étapes, sans liserés dorés. */
.grievance-article .grievance-method {
  margin-top: 26px;
  padding: 36px 32px !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--grievance-ivory);
  box-shadow: none;
}
.grievance-article .grievance-method .record-section-head { max-width: 900px; }
.grievance-article .grievance-comparison {
  display: grid;
  grid-template-columns: minmax(170px, .75fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto 30px;
  padding: 22px 24px;
  border: 0;
  border-radius: 7px;
  background: var(--blue);
  text-align: left;
}
.grievance-article .grievance-comparison h3 {
  margin: 0;
  color: #e2c996;
  font-size: 1.2rem;
  line-height: 1.3;
}
.grievance-article .grievance-comparison p {
  margin: 0;
  color: #f0f4f6;
  font-size: .9rem;
  line-height: 1.6;
}
.grievance-article .grievance-outline {
  max-width: 960px;
  gap: 14px;
  margin: 0 auto;
}
.grievance-article .grievance-outline > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.grievance-article .grievance-outline > div > span {
  width: 38px;
  height: 38px;
  margin: 0;
  border: 0;
  background: var(--blue);
  color: #fff;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
}
.grievance-article .grievance-outline strong { font-size: 1.16rem; }
.grievance-article .grievance-outline p { font-size: .9rem; line-height: 1.6; }

/* Rubriques interactives à l'intérieur de leur section. */
.grievance-article .grievance-guided-start {
  margin-bottom: 25px;
  padding: 0;
  border: 0;
  background: transparent;
}
.grievance-article .grievance-topic { border-color: rgba(18, 58, 90, .18); }
.grievance-article .grievance-topic[open] {
  border-color: rgba(18, 58, 90, .3);
  box-shadow: none;
}
.grievance-article .grievance-topic[open] summary,
.grievance-article .grievance-guided-status { background: var(--grievance-pale-blue); }
.grievance-article .grievance-topic > div { border-top-color: rgba(18, 58, 90, .12); }
.grievance-article .grievance-guided-start button { min-height: 44px; }

/* Une comparaison d'exemples lisible, sans liseré doré. */
.grievance-article .grievance-example-grid { gap: 20px; }
.grievance-article .grievance-example-card {
  padding: 27px;
  border: 0;
  border-radius: 10px;
}
.grievance-article .grievance-example-vague { background: #f1f0ed; }
.grievance-article .grievance-example-clear { background: var(--grievance-pale-blue); }
.grievance-article .grievance-example-card p { font-size: .9rem; line-height: 1.6; }
.grievance-article .grievance-advice-section,
.grievance-article .grievance-fictional-example { margin-top: 26px; }
.grievance-article .grievance-fictional-example .fictional-example-link {
  border: 1px solid rgba(18, 58, 90, .18);
}
.grievance-article .grievance-fictional-example .fictional-example-link:hover {
  border-color: rgba(18, 58, 90, .35);
}

@media (max-width: 900px) {
  .grievance-article .grievance-outline > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .grievance-article .grievance-outline > div > span { margin: 0; }
}
@media (min-width: 761px) {
  @supports (grid-template-rows: subgrid) {
    .grievance-article .grievance-purpose-grid {
      grid-template-rows: 36px auto 1fr;
      gap: 15px 36px;
    }
    .grievance-article .grievance-purpose-grid article {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      justify-items: center;
      align-items: start;
    }
    .grievance-article .grievance-purpose-grid h3,
    .grievance-article .grievance-purpose-grid p,
    .grievance-article .grievance-benefit-icon { margin: 0; }
  }
}
@media (max-width: 760px) {
  .grievance-article .grievance-comparison {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 18px;
    text-align: center;
  }
  .grievance-article .grievance-purpose,
  .grievance-article .grievance-topics,
  .grievance-article .grievance-example {
    margin-top: 18px;
    padding: 26px 18px !important;
  }
  .grievance-article .grievance-purpose-grid { gap: 28px; }
  .grievance-article .grievance-method {
    margin-top: 18px;
    padding: 26px 18px !important;
  }
  .grievance-article .grievance-advice-section,
  .grievance-article .grievance-fictional-example { margin-top: 18px; }
  .grievance-article .grievance-intro { padding: 26px 18px !important; }
  .grievance-article .grievance-definition-grid { padding: 24px; gap: 22px; }
  .grievance-article .grievance-example-grid { gap: 14px; }
  .grievance-article .grievance-example-card { padding: 24px 22px; }
}
@media (max-width: 520px) {
  .grievance-article .grievance-intro { padding: 24px 16px !important; }
  .grievance-article .grievance-purpose-grid p,
  .grievance-article .grievance-definition-grid p,
  .grievance-article .grievance-comparison p,
  .grievance-article .grievance-outline p,
  .grievance-article .grievance-example-card p { font-size: .875rem; }
  .grievance-article .grievance-benefit-icon { width: 32px; height: 32px; margin-bottom: 12px; }
}