/* Dossier autonome : le sous-domaine a sa propre racine et ne voit pas ../assets. Couleurs reprises de assets/style.css. */
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-500-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans"; src: url(fonts/sourcesans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans"; src: url(fonts/sourcesans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --navy: #0f1b2d;
  --brass: #c19a5b;
  --serif: "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Source Sans", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--navy); color: #d8d3c8; font: 400 1.15rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.carte { position: relative; width: 100%; max-width: 480px; margin: 0 auto; padding: 32px 24px 40px; }

.lang { position: absolute; top: 32px; right: 24px; font-size: .95rem; letter-spacing: .08em; }
.lang a, .lang span { display: inline-block; padding: 4px 8px; text-decoration: none; }
.lang span { color: var(--brass); font-weight: 600; }

.portrait { position: relative; width: 176px; margin: 0 0 40px; }
/* cadre laiton décalé derrière la photo, comme sur le site */
.portrait::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--brass); }
.portrait img { position: relative; filter: saturate(.85) contrast(1.03); }

.eyebrow { margin: 0 0 12px; font-size: .85rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
h1 { margin: 0; font: 500 3.6rem/1 var(--serif); color: #fff; }
h1 em { font-style: italic; color: var(--brass); }
.rule { width: 88px; height: 1px; margin: 22px 0; background: var(--brass); }

.tags { list-style: none; margin: 0 0 28px; padding: 0; color: #fff; }
.tags li::before { content: "—"; margin-right: 8px; color: var(--brass); }

.liens { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid rgba(193,154,91,.22); }
.liens a { display: block; padding: 11px 0; border-bottom: 1px solid rgba(193,154,91,.22); color: #fff; text-decoration: none; }
.liens a:hover { color: var(--brass); }
.liens small { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }

.btns { display: grid; gap: 14px; }
.btn { display: block; padding: 14px 20px; border: 1px solid var(--brass); font-weight: 600; letter-spacing: .04em; text-align: center; text-decoration: none; transition: background .2s; }
.btn--solid { background: var(--brass); color: var(--navy); }
.btn--solid:hover { background: #d4b27a; }
.btn--ghost { color: #fff; }
.btn--ghost:hover { background: rgba(193,154,91,.15); }

.footer { margin-top: auto; padding: 16px 24px; background: #0a1422; color: #8f8a7f; font-size: .85rem; text-align: center; }
.footer p { margin: 0; }

@media (min-width: 860px) {
  body { background: #0a1422; }
  .carte { max-width: 880px; margin: auto; padding: 56px; display: grid; grid-template-columns: 280px 1fr; gap: 72px; align-items: center; background: var(--navy); border: 1px solid rgba(193,154,91,.35); }
  .lang { top: 20px; right: 28px; }
  .portrait { width: 100%; margin: 0; }
  .portrait::before { inset: 18px -18px -18px 18px; }
  .footer { margin-top: 0; }
}