/* base : styles partagés du site. */
:root {
    --bg: #070707;
    --bg-soft: #111;
    --panel: #171717;
    --text: #ededed;
    --muted: #a2a2a2;
    --gold: #d4af37;
    --line: #262626;
    --title-font: "Playfair Display", Georgia, "Times New Roman", serif;
    --body-font: Lato, Arial, Helvetica, sans-serif;
    --content: 1200px;
    --focus: #f2ca50;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; min-width: 280px; background: var(--bg); color: var(--text); font-family: var(--body-font); font-size: 16px; line-height: 1.65; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.skip-link { position: fixed; left: .75rem; top: .75rem; z-index: 10000; transform: translateY(-200%); padding: .75rem 1rem; background: #fff; color: #000; }
.skip-link:focus { transform: none; }
.container { width: min(100% - 2rem, var(--content)); margin-inline: auto; }
.narrow-container { width: min(100% - 2rem, 820px); margin-inline: auto; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
main { min-height: 60vh; }
h1, h2, h3 { font-family: var(--title-font); font-weight: 400; }
.btn, .btn-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .75rem 1.35rem; border: 1px solid #fff; background: transparent; color: #fff; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover, .btn-cta:hover { background: #fff; color: #000; }
.card { overflow: hidden; background: var(--panel); transition: transform .2s ease; }
.card:hover { transform: translateY(-3px); }
.card-img-wrap { overflow: hidden; aspect-ratio: 4/3; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-content { padding: 1rem; }
.card-title { color: #fff; font-family: var(--title-font); font-size: 1.08rem; }
.card-meta { color: var(--muted); font-size: .82rem; }
.card-text { color: #c9c9c9; font-size: .9rem; }
input, textarea, select { width: 100%; min-height: 44px; margin-bottom: 1rem; padding: .8rem .9rem; border: 1px solid #333; background: #151515; color: #fff; }
textarea { min-height: 140px; resize: vertical; }
@media (min-width: 640px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}