/* Methodology hub — one-screen summary, four parts, sections folded on phones, a complete sticky table of contents
   (23 Oct. 2026, docs/design/methodologie-et-catalogue-2026-10-22.md § 1). Structure: app/views/methodology/show.html.erb;
   behaviour: responsive_disclosure and methodology_toc controllers. Loaded after the earlier layers (zz_). */

/* ---- Summary ------------------------------------------------------------------------------------------------- */

.methodology-essentials { margin: 0; padding-left: 1rem; border-left: 3px solid var(--color-blue); }
.methodology-hub .methodology-essentials > h2 { margin: 0 0 0.5rem; padding: 0; border: 0; font-size: var(--type-h3); }
.methodology-essentials ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.methodology-essentials li { margin: 0; line-height: 1.5; }
.methodology-essentials li + li { margin-top: 0; }
.methodology-essentials li > span { margin-right: 0.35rem; }
/* An inline link in a sentence: the padding widens the touch area to 44 px without spacing the lines apart. */
.methodology-essentials__link { padding-block: 0.7rem; font-size: var(--text-sm); white-space: normal; }

/* ---- Parts (H2) and sections (H3) ---------------------------------------------------------------------------- */

.methodology-part { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--ciq-border); }
.methodology-hub .methodology-part > h2 { margin: 0 0 0.25rem; padding: 0; border: 0; font-size: 1.5rem; }
.methodology-section { margin-top: var(--space-4); }
.methodology-hub .methodology-section h3 { margin: 0 0 0.5rem; font-size: var(--type-h3); }
.methodology-section > summary { display: flex; align-items: center; gap: 0.75rem; list-style: none; }
.methodology-section > summary::-webkit-details-marker { display: none; }
.methodology-hub .methodology-section > summary h3 { margin: 0; }
.methodology-section > summary + .methodology-section__body { margin-top: 0.5rem; }
.methodology-section__body > :last-child { margin-bottom: 0; }

/* Wide screens: a summary is a heading, everything reads without a click. */
.methodology-body:not(.is-folding) .methodology-section > summary { cursor: auto; }

/* Phones: the folded sections read as a list of titles separated by a rule, each a 44 px target. */
.methodology-body.is-folding .methodology-section--foldable { margin-top: 0; border-bottom: 1px solid var(--ciq-border); }
.methodology-body.is-folding .methodology-part > h2 + .methodology-section--foldable { margin-top: 0.5rem; border-top: 1px solid var(--ciq-border); }
.methodology-body.is-folding .methodology-section--foldable > summary { min-height: 44px; padding-block: 0.6rem; cursor: pointer; }
.methodology-body.is-folding .methodology-section--foldable > summary h3 { font-size: 1.05rem; line-height: 1.3; }
.methodology-body.is-folding .methodology-section--foldable > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  margin-right: 0.25rem;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg) translateY(-2px);
}
.methodology-body.is-folding .methodology-section--foldable[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.methodology-body.is-folding .methodology-section--foldable[open] > .methodology-section__body { padding-bottom: 1rem; }
.methodology-body.is-folding .methodology-section--foldable + .methodology-section:not(.methodology-section--foldable) { margin-top: var(--space-4); }

.methodology-expand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.methodology-expand[hidden] { display: none; }

/* ---- Reference scenarios: a section of the first part, not a box in the body box ----------------------------- */

.brand-continuity .methodology-hub .methodology-reference { padding: 0; border: 0; border-radius: 0; background: none; }
.methodology-reference .methodology-metadata { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-block: 0.5rem 0.75rem; }
.methodology-reference .methodology-metadata div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; padding: 0; border: 0; border-radius: 0; background: none; }
.methodology-reference .methodology-metadata dt { font-size: var(--text-sm); font-weight: 600; }
.methodology-reference .methodology-metadata dd { font-size: var(--text-sm); }
.methodology-levels h4,
.methodology-scenarios h4 { margin: 1.25rem 0 0.4rem; font-size: 1rem; }
.methodology-levels__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding: 0; list-style: none; }
.methodology-hub .methodology-levels__list li { margin: 0; }
.methodology-rules { margin-block: 1rem; border-block: 1px solid var(--ciq-border); }
.methodology-rules > summary { display: flex; min-height: 44px; align-items: center; gap: 0.75rem; font-weight: 700; cursor: pointer; list-style: none; }
.methodology-rules > summary::-webkit-details-marker { display: none; }
.methodology-rules > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  margin-right: 0.25rem;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg) translateY(-2px);
}
.methodology-rules[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.methodology-rules > p { margin-block: 0 0.75rem; }
.methodology-hub .methodology-scenarios { margin-top: 0; }
/* The displayed strategies and the responsible-credit note: rules and a margin line, not boxes in the body box. */
.methodology-reference .methodology-scenario-list { gap: 0; border-top: 1px solid var(--ciq-border); }
.methodology-reference .methodology-scenario-list details { border: 0; border-bottom: 1px solid var(--ciq-border); border-radius: 0; background: none; }
.methodology-reference .methodology-scenario-list summary { position: relative; min-height: 44px; justify-content: center; padding: 0.5rem 1.5rem 0.5rem 0; font-weight: 700; list-style: none; }
.methodology-reference .methodology-scenario-list summary::-webkit-details-marker { display: none; }
.methodology-reference .methodology-scenario-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: translateY(-70%) rotate(45deg);
}
.methodology-reference .methodology-scenario-list details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.methodology-reference .methodology-scenario-list details > div { padding: 0 0 0.75rem; }
.brand-continuity .methodology-reference .credit-note { margin-top: 1rem; padding: 0 0 0 1rem; border: 0; border-left: 3px solid #eadfcd; border-radius: 0; background: none; }

/* ---- Questions: the fourth part ----------------------------------------------------------------------------- */

.methodology-body .guide-faq { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--ciq-border); }
.fintech-site .methodology-body .guide-faq > h2 { margin: 0 0 0.75rem; padding: 0; font-size: 1.5rem; }

/* ---- End of page: two links, three guides, as text ----------------------------------------------------------- */

.methodology-next { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--ciq-border); }
.brand-continuity .methodology-hub .methodology-next .guide-product-links { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.methodology-hub .methodology-next .guide-related { margin: 0; }
.fintech-site .methodology-next h2 { margin: 0 0 0.25rem; padding: 0; border: 0; font-size: 1rem; }
.methodology-next ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.methodology-hub .methodology-next .guide-related ul { display: grid; grid-template-columns: none; gap: 0; }
.methodology-hub .methodology-next li { margin: 0; }
.methodology-next a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }

/* ---- Table of contents ---------------------------------------------------------------------------------------- */

.guide-toc .methodology-toc { margin: 0.55rem 0 0; padding: 0; list-style: none; }
.guide-toc .methodology-toc ol { margin: 0.2rem 0 0.5rem; padding-left: 0.85rem; list-style: none; }
.guide-toc .methodology-toc li + li { margin-top: 0.1rem; }
.brand-continuity .methodology-hub .methodology-toc .methodology-toc__part { color: var(--ciq-text); font-weight: 700; }
.brand-continuity .methodology-hub .methodology-toc a[aria-current="true"] { color: var(--color-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  /* A block, not a grid: the sticky bar's containing block is then the whole article. */
  .brand-continuity .methodology-hub .guide-article-layout { display: block; }
  .brand-continuity .methodology-hub .methodology-toc-bar {
    position: sticky;
    top: var(--header-height);
    z-index: 5;
    margin: 0 0 1rem;
    padding: 0;
    border: 1px solid var(--ciq-border);
    border-radius: var(--radius-md);
    background: #fff;
    font-size: var(--text-sm);
  }
  .methodology-toc-bar > summary { display: flex; min-height: 48px; align-items: center; gap: 0.4rem; padding: 0 1rem; cursor: pointer; list-style: none; }
  .methodology-toc-bar > summary::-webkit-details-marker { display: none; }
  .methodology-toc-bar__label { flex: none; font-weight: 700; }
  .methodology-toc-bar__current { min-width: 0; overflow: hidden; color: var(--color-muted); text-overflow: ellipsis; white-space: nowrap; }
  .methodology-toc-bar__current::before { content: "· "; }
  .methodology-toc-bar > summary::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform: rotate(45deg) translateY(-2px);
  }
  .methodology-toc-bar[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .methodology-toc-bar > .methodology-toc {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: calc(100dvh - var(--header-height) - 4rem);
    margin: 0;
    padding: 0.5rem 1rem 0.75rem;
    overflow-y: auto;
    border: 1px solid var(--ciq-border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--elevation-2);
  }
  .methodology-toc-bar .methodology-toc a { display: flex; min-height: 44px; align-items: center; padding-block: 0; }
}

@media (max-width: 767.98px) {
  .brand-continuity .methodology-hub .methodology-toc-bar { top: var(--header-height-compact); }
  .methodology-toc-bar > .methodology-toc { max-height: calc(100dvh - var(--header-height-compact) - 4rem); }
}

@media print {
  .methodology-toc-bar,
  .methodology-expand { display: none; }
}