/* bringoldphotostolife.com : site de niche anglais édité par Incarn.
   Palette et typographies d'Incarn (« L'archive qui respire »), pour que le
   lien « by Incarn » se voie aussi à l'oeil. */

:root {
  --ink: #241c15;
  --ink-soft: #544636;
  --paper: #f3ecdf;
  --paper-2: #fbf6ec;
  --paper-3: #ede3d2;
  --sepia: #7a6248;
  --sepia-soft: #b4a184;
  --ember: #c4703a;
  --ember-deep: #a2542a;
  --rule: #d8ccb8;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 66ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 var(--ui);
}

a { color: var(--ember-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.prose { max-width: var(--measure); }

/* En-tête */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-name { font: 600 21px/1.1 var(--display); letter-spacing: -0.01em; }
.by-incarn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sepia);
}
.by-incarn img { width: 18px; height: 18px; border-radius: 4px; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a[aria-current="page"], .nav a:hover { color: var(--ember-deep); text-decoration: underline; }

/* Contenu */
main { padding: 40px 0 64px; }
.updated { font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sepia); margin: 0 0 10px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 50px); letter-spacing: -0.02em; margin: 0 0 18px; }
h2 { font-size: clamp(25px, 3.2vw, 31px); margin: 46px 0 12px; }
h3 { font-size: 21px; margin: 28px 0 8px; }
.lede { font-size: 20px; line-height: 1.6; color: var(--ink); margin: 0 0 26px; }
p, li { max-width: var(--measure); }
ol.steps { padding-left: 1.3em; }
ol.steps li { margin: 0 0 12px; padding-left: 4px; }
ol.steps li strong { font-family: var(--display); font-size: 19px; }

.cta {
  display: inline-block; margin: 8px 0 4px; padding: 13px 22px; border-radius: 999px;
  background: var(--ink); color: var(--paper-2); font-weight: 600; text-decoration: none;
}
.cta:hover { background: var(--ember-deep); color: var(--paper-2); }
.cta-note { display: block; font-size: 14px; color: var(--sepia); margin-top: 6px; }

.disclosure {
  max-width: var(--measure); margin: 0 0 26px; padding: 12px 16px;
  background: var(--paper-3); border-left: 3px solid var(--sepia-soft);
  font-size: 15px; color: var(--ink-soft);
}

/* Galerie avant / après */
.gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px; margin: 30px 0 10px;
}
.pair { margin: 0; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: 10px; }
.pair-media { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair-media img, .pair-media video {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: 8px; background: var(--paper-3);
}
.pair-label { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sepia); margin: 6px 2px 0; }
.pair figcaption { font-size: 14px; color: var(--ink-soft); margin: 6px 2px 2px; }
/* Sur téléphone, deux portraits suffisent : les étapes restent près du haut. */
@media (max-width: 600px) { .pair:nth-child(n+3) { display: none; } }

/* Tableaux */
.table-wrap { overflow-x: auto; margin: 18px 0 8px; }
table { border-collapse: collapse; min-width: 560px; font-size: 15px; background: var(--paper-2); }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
thead th { font-family: var(--display); font-size: 17px; background: var(--paper-3); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* FAQ */
.faq details { max-width: var(--measure); border-bottom: 1px solid var(--rule); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 8px 0 0; }

/* Liens vers les autres pages */
.more { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 18px 0; }
.more a {
  display: block; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--paper-2); color: var(--ink); text-decoration: none;
}
.more a:hover { border-color: var(--ember); }
.more span { display: block; font-size: 14px; color: var(--sepia); }

/* Pied de page */
.site-footer { border-top: 1px solid var(--rule); background: var(--paper-2); font-size: 14px; color: var(--ink-soft); }
.site-footer .wrap { padding-top: 24px; padding-bottom: 30px; display: grid; gap: 10px; }
.site-footer p { margin: 0; max-width: 80ch; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}