/* Une mise en page de revue : le texte, les sources et des notes en marge. */
.approach-page { --approach-ink: #302f2b; --approach-muted: #67655f; --approach-rule: #d9d6cf; --approach-accent: #97472f; color: var(--approach-ink); }
.approach-frame { width: min(1260px, calc(100% - 96px)); margin-inline: auto; }
.approach-intro { padding-top: 41px; border-bottom: 1px solid var(--approach-ink); }
.approach-topline { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; font-size: 12px; }
.approach-topline p { margin: 0; }
.approach-topline a { color: var(--approach-muted); font-size: 11px; }
.approach-topline a span { margin-left: 12px; }
.approach-topline a:hover { color: var(--approach-accent); }
.approach-opening { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 9%; padding-block: 51px 57px; }
.approach-opening h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(58px, 6.6vw, 94px); line-height: 1.04; letter-spacing: -4.5px; font-weight: 400; margin: 0; }
.approach-label { font-size: 10px; line-height: 1.6; font-weight: 400; text-transform: uppercase; letter-spacing: 1.3px; color: var(--approach-accent); margin: 0; }
.approach-mission > p { margin: 0; }
.approach-mission .approach-label { margin-bottom: 17px; }
.approach-mission .approach-lead { font-size: clamp(19px, 1.65vw, 24px); line-height: 1.45; letter-spacing: -.45px; color: var(--approach-ink); margin-bottom: 17px; }
.approach-mission > p:last-child { font-size: 14px; line-height: 1.8; color: var(--approach-muted); max-width: 410px; }
.approach-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr) 240px; gap: 54px; padding-top: 48px; padding-bottom: 46px; }
.approach-margin nav { position: sticky; top: 30px; }
.approach-margin .approach-label { margin-bottom: 21px; color: var(--approach-muted); }
.approach-margin a { display: block; width: fit-content; font-size: 11px; line-height: 1.6; color: var(--approach-muted); margin-bottom: 15px; }
.approach-margin a:hover { color: var(--approach-accent); text-decoration: underline; text-underline-offset: 5px; }
.approach-essay { min-width: 0; }
.approach-essay section { padding-bottom: 36px; margin-bottom: 33px; border-bottom: 1px solid var(--approach-rule); scroll-margin-top: 30px; }
.approach-essay section:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; }
.approach-essay h2 { font-size: 29px; line-height: 1.19; letter-spacing: -.75px; font-weight: 400; margin: 0 0 23px; }
.approach-essay section > .approach-label { margin-bottom: 17px; }
.approach-essay section > p:not(.approach-label) { font-size: 15px; line-height: 1.85; margin: 0 0 18px; color: #55534e; }
.approach-inline-link { display: inline; font-size: 12px; line-height: 1.8; color: var(--approach-ink); text-decoration: underline; text-decoration-color: #b3ada2; text-underline-offset: 5px; }
.approach-inline-link span { margin-left: 9px; }
.approach-inline-link:hover { color: var(--approach-accent); text-decoration-color: currentColor; }
.approach-reading { align-self: start; padding-left: 27px; border-left: 1px solid var(--approach-rule); }
.approach-reading > h2 { color: var(--approach-muted); margin-bottom: 25px; }
.approach-reading-item { display: block; padding-bottom: 28px; margin-bottom: 25px; border-bottom: 1px solid var(--approach-rule); }
.approach-reading-item:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
.approach-reading-type { display: block; color: var(--approach-accent); font-size: 10px; line-height: 1.6; margin-bottom: 11px; }
.approach-reading-item strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; line-height: 1.14; letter-spacing: -.5px; }
.approach-reading-item p { font-size: 12px; line-height: 1.75; color: var(--approach-muted); margin: 12px 0; }
.approach-reading-source { display: block; color: var(--approach-muted); font-size: 10px; line-height: 1.7; margin: 13px 0 16px; }
.approach-reading-source cite { font-style: italic; }
.approach-reading-action { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 10px; line-height: 1.8; }
.approach-reading-action > span { font-size: 16px; }
.approach-reading-item:hover strong, .approach-reading-item:hover .approach-reading-action { color: var(--approach-accent); }
.approach-charter { border-top: 1px solid var(--approach-ink); border-bottom: 1px solid var(--approach-rule); }
.approach-charter summary { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 25px; cursor: pointer; list-style: none; font-size: 17px; letter-spacing: -.3px; }
.approach-charter summary::-webkit-details-marker { display: none; }
.approach-charter-action { display: flex; align-items: center; gap: 32px; flex-shrink: 0; font-size: 11px; color: var(--approach-muted); letter-spacing: 0; }
.approach-charter-action > span { display: inline-block; font-size: 24px; font-weight: 300; }
.approach-charter[open] .approach-charter-action > span { transform: rotate(45deg); }
.approach-charter-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; padding-block: 9px 31px; }
.approach-charter-body h2 { font-size: 16px; line-height: 1.5; letter-spacing: -.2px; margin: 0 0 10px; }
.approach-charter-body p { font-size: 12px; line-height: 1.8; color: var(--approach-muted); margin: 0; }
.approach-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 34px 43px; }
.approach-next p { font-family: Georgia, "Times New Roman", serif; font-size: 25px; letter-spacing: -.5px; line-height: 1.3; margin: 0; }
.approach-next a { display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-shrink: 0; padding-bottom: 7px; border-bottom: 1px solid #aaa398; font-size: 12px; }
.approach-next a:hover { color: var(--approach-accent); border-color: currentColor; }
.approach-next a span { font-size: 21px; }
.approach-footer { display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--approach-rule); padding-block: 23px; color: var(--approach-muted); font-size: 10px; }
.approach-footer .wordmark { color: var(--approach-ink); gap: 7px; }
.approach-footer .brand-symbol { font-size: 30px; }
.approach-footer .wordmark strong { font-size: 26px; }
.approach-footer > a:last-child { margin-left: auto; }
@media (min-width: 1500px) { .approach-opening { padding-block: 63px 65px; } }
@media (max-width: 1150px) {
  .approach-layout { grid-template-columns: 128px minmax(0, 1fr) 205px; gap: 33px; }
  .approach-reading { padding-left: 22px; }
  .approach-opening h1 { letter-spacing: -3.7px; }
}
@media (max-width: 950px) {
  .approach-frame { width: calc(100% - 56px); }
  .approach-opening { grid-template-columns: 1.1fr 1fr; gap: 6%; }
  .approach-opening h1 { font-size: 64px; letter-spacing: -3px; }
  .approach-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 42px; padding-top: 31px; }
  .approach-margin { grid-column: 1 / -1; border-bottom: 1px solid var(--approach-rule); padding-bottom: 19px; }
  .approach-margin nav { display: flex; flex-wrap: wrap; gap: 12px 25px; position: static; }
  .approach-margin .approach-label { width: 100%; margin: 0; font-size: 9px; }
  .approach-margin a { margin: 0; }
  .approach-reading { padding-left: 23px; }
}
@media (max-width: 680px) {
  .approach-frame { width: calc(100% - 40px); }
  .approach-intro { padding-top: 27px; }
  .approach-topline a { font-size: 0; }
  .approach-topline a::before { content: "Collectif Point Zéro"; font-size: 10px; }
  .approach-topline a span { font-size: 12px; margin-left: 7px; }
  .approach-topline { font-size: 11px; }
  .approach-opening { grid-template-columns: 1fr; gap: 30px; padding-block: 31px; }
  .approach-opening h1 { font-size: clamp(48px, 12.7vw, 76px); letter-spacing: -2.7px; line-height: 1.02; }
  .approach-mission .approach-label { margin-bottom: 11px; font-size: 9px; }
  .approach-mission .approach-lead { font-size: 20px; line-height: 1.5; max-width: 480px; margin-bottom: 12px; }
  .approach-mission > p:last-child { font-size: 13px; line-height: 1.8; max-width: 480px; }
  .approach-layout { grid-template-columns: 1fr; gap: 31px; padding-block: 24px 31px; }
  .approach-margin nav { gap: 11px 21px; }
  .approach-margin a { font-size: 10px; }
  .approach-essay h2 { font-size: 28px; margin-bottom: 19px; }
  .approach-essay section { padding-bottom: 28px; margin-bottom: 28px; }
  .approach-essay section > p:not(.approach-label) { font-size: 14px; line-height: 1.85; margin-bottom: 16px; }
  .approach-reading { border-left: 0; border-top: 1px solid var(--approach-rule); padding: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 25px; }
  .approach-reading > h2 { grid-column: 1 / -1; margin-bottom: 0; }
  .approach-reading-item { padding: 0 0 20px; margin: 0; }
  .approach-reading-item:first-of-type { grid-column: 1 / -1; }
  .approach-reading-item:first-of-type strong br { display: none; }
  .approach-reading-item:last-child { padding-bottom: 20px; border-bottom: 1px solid var(--approach-rule); }
  .approach-reading-item strong { font-size: 23px; }
  .approach-reading-item p { font-size: 11px; }
  .approach-reading-type { font-size: 9px; }
  .approach-reading-action { font-size: 10px; }
  .approach-charter summary { align-items: flex-start; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.4; padding-block: 22px; }
  .approach-charter-action { width: 100%; justify-content: space-between; font-size: 10px; }
  .approach-charter-action > span { line-height: 1; }
  .approach-charter-body { grid-template-columns: 1fr; gap: 23px; }
  .approach-next { flex-direction: column; align-items: flex-start; gap: 23px; padding-block: 29px 35px; }
  .approach-next p { font-size: 24px; }
  .approach-next a { width: 100%; font-size: 11px; }
  .approach-footer { gap: 15px; font-size: 9px; }
}
@media (max-width: 370px) {
  .approach-opening h1 { font-size: 45px; letter-spacing: -2.3px; }
  .approach-reading { grid-template-columns: 1fr; }
  .approach-reading-item:first-of-type { grid-column: auto; }
}