/* Aurélie Ndjock-Lambert (démo) — styles propres à la page Approche.
   Chargée après styles.css, uniquement sur approche.html. Même couche « pages ». */
@layer pages {
/* ===== Approche ===== */
.approach-steps { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; position: relative; }
.approach-steps > li { display: grid; gap: var(--space-4) var(--gutter); padding-block: clamp(2rem, 5vw, 3.25rem); border-block-start: 1px solid var(--color-filet); margin: 0; position: relative; }
.approach-steps__num { font: italic 400 clamp(3.5rem, 2.5rem + 4vw, 6rem)/.9 var(--font-display); color: var(--color-terracotta-texte); }
.approach-steps h3 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 400; }
.approach-steps__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .6rem; }
.approach-steps__get { padding: 1rem 1.15rem; background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--radius-1); font-size: var(--fs-small); align-self: start; }
.approach-steps__get strong { display: block; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-terracotta-texte); margin-block-end: .25rem; }
@media (min-width: 64em) {
.approach-steps > li { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.approach-steps__num { grid-column: 1 / span 2; }
.approach-steps__main { grid-column: 3 / span 6; }
.approach-steps__get { grid-column: 9 / -1; }
}
.compass-big { display: grid; gap: var(--space-7) var(--gutter); align-items: center; }
.compass-big__art { inline-size: min(100%, 26rem); justify-self: center; }
@media (min-width: 64em) { .compass-big { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.compass-points { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); }
@media (min-width: 40em) { .compass-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compass-points li { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--color-filet); border-radius: var(--radius-1); background: var(--color-creme); }
.compass-points strong { display: flex; align-items: baseline; gap: .5rem; font: 500 1.45rem/1.2 var(--font-display); color: var(--color-prune); }
.compass-points strong span { font: 500 var(--fs-xs)/1 var(--font-text); letter-spacing: .14em; color: var(--color-terracotta-texte); }
.tripartite { display: grid; gap: var(--space-7) var(--gutter); align-items: center; }
@media (min-width: 64em) { .tripartite { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.tri-svg { inline-size: min(100%, 34rem); justify-self: center; }
.tri-svg .t-line { stroke: var(--color-terracotta); stroke-width: 1.25; fill: none; vector-effect: non-scaling-stroke; }
.tri-svg .t-line--dash { stroke: var(--color-attenue); stroke-dasharray: 3 5; }
.tri-svg .t-node { fill: var(--color-creme); stroke: var(--color-prune); stroke-width: 1.25; }
.tri-svg .t-node--you { fill: var(--color-prune); }
.tri-svg .t-label { font: 500 15px var(--font-text); fill: var(--color-encre); text-anchor: middle; }
.tri-svg .t-label--light { fill: var(--color-lin); }
.tri-svg .t-small { font: 400 12.5px var(--font-text); fill: var(--color-attenue); text-anchor: middle; }
.tri-svg .t-lock { stroke: var(--color-prune); fill: none; stroke-width: 1.5; }
.share-list { display: grid; gap: var(--space-4); }
.share-list > div { padding: 1.1rem 1.25rem; border-radius: var(--radius-1); border: 1px solid var(--color-filet); background: var(--color-creme); }
.share-list h3 { font-size: 1.35rem; display: flex; align-items: center; gap: .5rem; margin-block-end: .35rem; }
.share-list .is-never { background: #F7EDEA; border-color: #E9CDBF; }
.charter { display: grid; gap: var(--gutter); list-style: none; padding: 0; margin: 0; }
@media (min-width: 48em) { .charter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .charter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.charter li { margin: 0; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--radius-1); display: grid; gap: .5rem; align-content: start; }
.charter .roman { font-size: 1.5rem; line-height: 1; }
.charter h3 { font-size: 1.5rem; }
.charter li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
@media (max-width: 71.99em) { .charter li:last-child:nth-child(3n + 1) { grid-column: auto; } }
.charter__foot { margin-block-start: var(--space-5); font-size: var(--fs-small); color: var(--color-attenue); max-inline-size: 62ch; }
.dont-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-block-start: 1px solid rgb(201 187 196 / .3); }
.dont-list li { margin: 0; display: flex; gap: 1rem; align-items: baseline; padding-block: 1.1rem; border-block-end: 1px solid rgb(201 187 196 / .3); font: 400 clamp(1.3rem, 1.15rem + .7vw, 1.75rem)/1.3 var(--font-display); color: var(--color-lin); }
.dont-list .icon { color: var(--color-terracotta-clair); flex: none; transform: translateY(.2rem); }
.section--dark { background: var(--color-prune); color: var(--color-lin); }
.section--dark h2 { color: var(--color-lin); }
.section--dark .eyebrow { color: var(--color-terracotta-clair); }
.section--dark .eyebrow::before { background: var(--color-terracotta-clair); }
.section--dark :focus-visible { outline-color: var(--color-terracotta-clair); }
.section--dark .section-head > p:not(.eyebrow) { color: var(--color-sombre-2); }


.compass-big__art { --halo: var(--color-lin-2); }

}