/* Aurélie Ndjock-Lambert (démo) — styles propres à la page À propos.
   Chargée après styles.css, uniquement sur a-propos.html. Même couche « pages ». */
@layer pages {
/* ===== À propos ===== */
.about-hero { display: grid; gap: var(--space-7) var(--gutter); align-items: end; position: relative; }
.about-hero__media { position: relative; inline-size: min(100%, 26rem); justify-self: center; }
.about-hero__media .media { aspect-ratio: 4 / 5; border-radius: var(--radius-arch); box-shadow: var(--shadow-2); }
.about-hero__media::before { content: ""; position: absolute; inset: -1rem -1rem 1rem 1rem; border: 1px solid var(--color-terracotta); border-radius: var(--radius-arch); opacity: .6; }
.about-hero__text { display: grid; gap: var(--space-5); }
.about-hero__text h1 { max-inline-size: 13ch; }
.about-hero blockquote { border-inline-start: 1px solid var(--color-terracotta); padding-inline-start: var(--space-5); }
.about-hero blockquote p { font: italic 400 clamp(1.4rem, 1.2rem + .9vw, 1.95rem)/1.35 var(--font-display); color: var(--color-prune); max-inline-size: 34ch; }
@media (min-width: 64em) {
.about-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.about-hero__text { grid-column: 1 / span 7; padding-block-end: var(--space-6); }
.about-hero__media { grid-column: 8 / -1; justify-self: end; inline-size: 100%; max-inline-size: 27rem; }
}
.breakout { display: grid; grid-template-columns: [full-start] minmax(1rem, 1fr) [content-start] min(100% - 2rem, var(--measure)) [content-end] minmax(1rem, 1fr) [full-end]; row-gap: 1.2em; }
.breakout > * { grid-column: content; }
.breakout > .breakout__wide { grid-column: full; inline-size: min(100% - 2rem, 56rem); justify-self: center; margin-block: var(--space-5); }
.breakout h2 { margin-block: 1.4em .2em; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.breakout h2:first-child { margin-block-start: 0; }
.dropcap::first-letter { float: left; font: 400 4.4em/.8 var(--font-display); color: var(--color-terracotta-texte); margin: .08em .1em 0 0; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 0; }
.timeline::before { content: ""; position: absolute; inset-block: .6rem; inset-inline-start: 7.6rem; inline-size: 1px; background: var(--color-terracotta); opacity: .7; }
.timeline li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 2.2rem; padding-block: .9rem; margin: 0; position: relative; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: calc(7.6rem - 4px); inset-block-start: 1.45rem; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--color-lin); border: 1.5px solid var(--color-terracotta-texte); }
.section--alt .timeline li::before { background: var(--color-lin-2); }
.timeline time { font: 500 1.25rem/1.5 var(--font-display); color: var(--color-terracotta-texte); text-align: end; font-variant-numeric: lining-nums; white-space: nowrap; }
.timeline p { max-inline-size: 58ch; }
.timeline em { font: italic 400 1.2rem/1.4 var(--font-display); color: var(--color-prune); display: block; margin-block-start: .3rem; }
@media (min-width: 48em) { .timeline time { font-size: 1.45rem; } }
.langs { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
@media (min-width: 40em) { .langs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .langs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.langs li { margin: 0; display: grid; gap: .3rem; padding: 1.25rem; border-radius: var(--radius-arch); background: var(--color-creme); border: 1px solid var(--color-filet); text-align: center; padding-block-start: 2.2rem; }
.langs strong { font: 500 1.6rem/1.1 var(--font-display); color: var(--color-prune); }
.langs span { font-size: var(--fs-small); color: var(--color-attenue); }
.langs .lang-code { font: 500 var(--fs-xs)/1 var(--font-text); letter-spacing: .14em; color: var(--color-terracotta-texte); text-transform: uppercase; }
.values { display: grid; gap: var(--gutter); list-style: none; padding: 0; margin: 0; }
@media (min-width: 48em) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.values li { margin: 0; padding: clamp(1.4rem, 3vw, 2rem); border-block-start: 1px solid var(--color-prune); background: var(--color-creme); display: grid; gap: .5rem; }
.values h3 { font-size: 1.9rem; font-weight: 400; }
.training { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-block-start: 1px solid var(--color-filet); }
.training li { display: flex; gap: .9rem; align-items: flex-start; padding-block: 1rem; border-block-end: 1px solid var(--color-filet); margin: 0; }
.training .icon { color: var(--color-sauge-texte); margin-block-start: .2rem; }
.cities { display: grid; gap: var(--gutter); }
@media (min-width: 48em) { .cities { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .cities figure:last-child { margin-block-start: var(--space-8); } }
.cities figure { margin: 0; }
.cities .media { aspect-ratio: 4 / 5; border-radius: var(--radius-1); }
.cities figcaption { font-size: var(--fs-small); margin-block-start: .75rem; }
.cities figcaption strong { display: block; font: 500 1.4rem/1.2 var(--font-display); color: var(--color-prune); }

}

/* Bruxelles : illustration au trait (aucune photo libre de droits exploitable) */
.cities .media--art { background: var(--color-creme); border: 1px solid var(--color-filet); display: grid; place-items: stretch; }
.city-art { inline-size: 100%; block-size: 100%; }
.city-art .lines path { fill: none; stroke: var(--color-prune); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.city-art .lines .w { stroke-width: 1; opacity: .7; }
.city-art .lines .p { stroke: var(--color-filet); stroke-width: 2; }
.city-art .sun { fill: var(--color-terracotta); opacity: .85; }
.city-art .thread { fill: none; stroke: var(--color-terracotta); stroke-width: 1.4; }
.city-art .thread-dot { fill: var(--color-terracotta); }