/* Aurélie Ndjock-Lambert (démo) — styles propres à la page Contact.
   Chargée après styles.css, uniquement sur contact.html. Même couche « pages ». */
@layer pages {
/* ===== Contact ===== */
.contact-layout { display: grid; gap: var(--space-7) var(--gutter); align-items: start; }
@media (min-width: 64em) { .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .contact-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.contact-aside { display: grid; gap: var(--space-5); }
.place-card { display: grid; gap: .75rem; }
.place-card h3 { font-size: 1.7rem; font-weight: 400; display: flex; align-items: center; gap: .6rem; }
.place-card h3 .icon { color: var(--color-terracotta-texte); }
.place-card address { font-style: normal; line-height: 1.6; }
.place-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: var(--fs-small); }
.place-card li { display: flex; gap: .55rem; align-items: flex-start; margin: 0; }
.place-card li .icon { color: var(--color-prune); margin-block-start: .15rem; }
.hours th { font-weight: 500; }
.hours td:last-child { color: var(--color-attenue); }
.map-facade { background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--radius-1); padding: clamp(1rem, 3vw, 2rem); }
.map-svg { inline-size: 100%; block-size: auto; }
.map-svg .m-coast { fill: none; stroke: var(--color-filet); stroke-width: 1.2; }
.map-svg .m-land { fill: var(--color-lin-2); }
.map-svg .m-thread { fill: none; stroke: var(--color-terracotta); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.map-svg .m-city { fill: var(--color-prune); }
.map-svg .m-halo { fill: none; stroke: var(--color-prune); stroke-width: 1; opacity: .35; }
.map-svg .m-label { font: italic 500 22px var(--font-display); fill: var(--color-prune); }
.map-svg .m-small { font: 500 12px var(--font-text); letter-spacing: .1em; fill: var(--color-attenue); text-transform: uppercase; }
.map-svg .m-train { font: 500 13px var(--font-text); fill: var(--color-terracotta-texte); }
.map-svg .m-online { fill: var(--color-sauge-pale); stroke: var(--color-sauge-texte); stroke-width: 1; }
.map-svg .m-online-t { font: 500 13px var(--font-text); fill: var(--color-sauge-texte); }
.map-facade p { font-size: var(--fs-small); color: var(--color-attenue); margin-block-start: .75rem; }
.pro-success { display: grid; gap: var(--space-4); padding: clamp(1.4rem, 4vw, 2.5rem); border-radius: var(--radius-1); background: var(--color-sauge-pale); color: #3E5038; }
.pro-success h2 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); color: var(--color-sauge-texte); }
.pro-success h2:focus { outline: none; }
.draft-note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }


.hours td:nth-child(2) { white-space: nowrap; }
.hours th { padding-inline-end: 1rem; }
.map-svg .m-dots { fill: url(#carte-points); }

.contact-layout > * { min-inline-size: 0; }
.contact-aside > * { min-inline-size: 0; }
.place-card li, .place-card a { overflow-wrap: anywhere; }
.contact-photo { margin: var(--space-6) 0 0; }
.contact-photo .media { aspect-ratio: 3 / 2; border-radius: var(--radius-1); }
@media (max-width: 63.99em) { .contact-photo { display: none; } }
.map-facade { align-self: start; }
}