/* Pages annexes — L'Atelier de Ninine
   Contrastes (WCAG 2.2 AA) : texte #0a2828/#faf5eb 14,35:1 · texte secondaire #3a5454/#faf5eb 7,5:1
   titres #0a4d4d/#faf5eb 8,86:1 · liens #a8284f/#faf5eb 6,27:1 · en-tête #f5ede0/#0a4d4d 8,28:1 */
@font-face { font-family: 'Inter'; font-weight: 300 600; font-display: swap; src: url(../fonts/inter.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 300 600; font-display: swap; src: url(../fonts/cormorant-garamond.woff2) format('woff2'); }
@font-face { font-family: 'Parisienne'; font-weight: 400; font-display: swap; src: url(../fonts/parisienne.woff2) format('woff2'); }
:root { --forest:#0a4d4d; --cream:#f5ede0; --ivory:#faf5eb; --ink:#0a2828; --ink-soft:#3a5454; --link:#a8284f; }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--ivory); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; color: var(--ink); padding: .75rem 1rem; z-index: 10; }
header { background: var(--forest); color: var(--cream); }
header .in { max-width: 860px; margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
header a { color: var(--cream); text-decoration: none; display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; }
header img { width: 56px; height: 56px; border-radius: 6px; }
header .brand { font-family: 'Parisienne', cursive; font-size: 1.75rem; }
header .back { font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }
main { max-width: 860px; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
h1 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(2.25rem, 6vw, 3rem); line-height: 1.1; color: var(--forest); margin: 0 0 1.5rem; }
h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.5rem; color: var(--forest); margin: 2.25rem 0 .5rem; }
p, li { max-width: 70ch; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
header :focus-visible { outline-color: var(--cream); }
.todo { background: #fff3c4; color: var(--ink); padding: 0 .25em; border-radius: 3px; }
.maj { color: var(--ink-soft); font-size: 1rem; margin-top: 3rem; }
footer { border-top: 1px solid rgba(10,77,77,.35); text-align: center; padding: 1.5rem 1.25rem; color: var(--ink-soft); }
footer a { display: inline-block; min-height: 44px; line-height: 44px; margin: 0 .5rem; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }