/* Ebanda & Valcourt — feuille complémentaire « article » : chargée seulement par les pages concernées. */
@layer reset, tokens, base, layout, components, utilities, pages;

@layer components {
  .callout--retenir { margin-top: var(--space-7); border-left-width: 3px; background: var(--color-velin); }
  .callout--retenir h2 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; margin-bottom: var(--space-4); }
  .prose--art { max-width: none; font-size: 1.125rem; }
  .prose--art > * { max-width: 65ch; }
  .prose--art h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); scroll-margin-top: calc(var(--hdr) + 1rem); }
  .prose--art h2:first-child { margin-top: 0; }
  .note-marge { font-size: .8125rem; line-height: 1.5; color: var(--color-pierre); border-left: 2px solid var(--color-or); padding: .15rem 0 .15rem .75rem; max-width: 65ch; }
  .note-marge__tag { display: block; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .6875rem; color: var(--color-or-profond); }
  @media (min-width: 80em) {
    .prose--art { display: grid; grid-template-columns: minmax(0, 65ch) 13.5rem; column-gap: 2.5rem; }
    .prose--art > * { grid-column: 1; grid-row: var(--r, auto); margin-top: 0; }
    .prose--art > * + * { margin-top: 0; }
    .prose--art > p, .prose--art > ul, .prose--art > ol { margin-bottom: 1.1em; }
    .prose--art > .note-marge { grid-column: 2; align-self: start; margin-bottom: 1rem; }
    .prose--art > .callout { grid-row: auto; grid-column: 1 / -1; max-width: 65ch; }
    .prose--art > h2 { margin: 2.1em 0 .6em; }
    .prose--art > h2:first-child { margin-top: 0; }
    .prose--art > blockquote { margin-bottom: 1.1em; }
  }
  .toc { border: 1px solid var(--color-filet); background: var(--color-carte); }
  .toc__sum { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: 0 var(--space-4); font-weight: 600; color: var(--color-marine); list-style: none; }
  .toc__sum::-webkit-details-marker { display: none; }
  .toc__sum .ico { transition: transform var(--dur-2); }
  .toc[open] .toc__sum .ico { transform: rotate(180deg); }
  .toc__n { font-family: var(--font-serif); color: var(--color-or-profond); min-width: 1.6rem; }
  @media (min-width: 64em) { .exp-aside .toc__sum, .art-aside .toc__sum { display: none; } .toc { border: 0; background: transparent; } .toc__list { padding: 0; } }
  .art-head { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
  .art-head__tags { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; font-size: var(--fs-small); color: var(--color-pierre); }
  .art-head__h1 { margin-top: var(--space-4); font-size: clamp(2rem, 1.4rem + 2.8vw, 3.6rem); max-width: 22ch; }
  .art-head .lead { margin-top: var(--space-5); }
  .art-head__by { margin-top: var(--space-5); font-weight: 600; }
  .art-head__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: var(--fs-small); color: var(--color-pierre); margin-top: var(--space-2); }
  .art-head .rule-double { margin-top: var(--space-6); }
  .art-layout, .exp-layout { display: grid; gap: var(--space-5) var(--gap); padding-block: var(--space-7) var(--sec); align-items: start; }
  .art-main { min-width: 0; }
  @media (min-width: 64em) {
    .art-layout { grid-template-columns: 14rem minmax(0, 1fr); }
    .exp-layout { grid-template-columns: 15rem minmax(0, 1fr); }
    .art-aside, .exp-aside { position: sticky; top: calc(var(--hdr) + 1.5rem); }
  }
  .abox { display: flex; gap: var(--space-4); align-items: center; }
  .abox__n { font-weight: 600; }
  .abox__r { font-size: var(--fs-small); color: var(--color-pierre); }
  .share { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
  .share__t { font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-pierre); }
  .share__a { display: flex; flex-wrap: wrap; gap: .5rem; }
}

@layer pages {
  .exp { padding-block: var(--space-7); border-top: 1px solid var(--color-marine); }
  .exp:first-child { border-top: 0; padding-top: 0; }
  .exp__head { display: grid; gap: var(--space-3); grid-template-columns: auto 1fr; align-items: center; }
  .exp__n { font-family: var(--font-serif); font-size: 1.2rem; color: var(--color-or-profond); }
  .exp__ico { width: 2.25rem; height: 2.25rem; color: var(--color-marine); justify-self: end; }
  .exp__t { grid-column: 1 / -1; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); max-width: 20ch; }
  .exp__lead { grid-column: 1 / -1; font-size: 1.15rem; color: color-mix(in srgb, var(--color-encre) 82%, var(--color-ivoire)); max-width: 52ch; }
  .exp__cols { display: grid; gap: var(--space-5) var(--gap); margin-top: var(--space-6); }
  @media (min-width: 48em) { .exp__cols { grid-template-columns: 1fr 1.4fr; } }
  .exp__cols h3, .exp__ops h3, .exp__refs h3, .exp__read h3 { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-or-profond); margin-bottom: var(--space-3); }
  .exp__ops { margin-top: var(--space-6); padding: var(--space-5); background: var(--color-velin); }
  .exp__ops ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
  .exp__ops li { padding-left: 1.25rem; position: relative; font-size: .9375rem; }
  .exp__ops li::before { content: "§"; position: absolute; left: 0; color: var(--color-or-profond); font-family: var(--font-serif); }
  .exp__foot { margin-top: var(--space-6); display: grid; gap: var(--space-5) var(--gap); align-items: start; }
  @media (min-width: 48em) { .exp__foot { grid-template-columns: 1fr 1fr; } .exp__cta { grid-column: 1 / -1; } }
  .refs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
  .refchip { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem 1rem .3rem .3rem; border: 1px solid var(--color-filet); border-radius: 99px; text-decoration: none; font-weight: 600; font-size: .875rem; background: var(--color-carte); color: var(--color-marine); }
  .refchip:hover { border-color: var(--color-marine); background: var(--color-velin); }
  .refchip .portrait--sm { width: 2rem; height: 2rem; }
  .refchip .portrait--sm .portrait__mono { font-size: .8rem; }
  .exp__read ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
  .method__i { padding-top: var(--space-4); border-top: 2px solid var(--color-marine); display: grid; gap: .35rem; align-content: start; }
  .method__n { font-family: var(--font-serif); font-size: 2.4rem; color: var(--color-or-profond); line-height: 1; }
  .method__i p { color: var(--color-pierre); font-size: .9375rem; }
  .sectors { list-style: none; padding: 0; display: grid; gap: var(--space-5) var(--gap); }
  @media (min-width: 40em) { .sectors { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64em) { .sectors { grid-template-columns: repeat(3, 1fr); } }
  .sector { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--color-filet); }
  .sector .ico { width: 1.75rem; height: 1.75rem; color: var(--color-marine); margin-bottom: var(--space-2); }
  .sector h3 { font-size: 1.05rem; }
  .sector p { color: var(--color-pierre); font-size: .9375rem; }
  .sec[aria-labelledby="s-sect"] .sector { transition: border-color var(--dur-2); }
}