/* Hallmark · genre: editorial · macrostructure: Split Studio (photographique) · theme: Almanac Corporate
 * tone: corporate/financier · anchor hue: 190 (pétrole) · accent: laiton 78
 * nav: N1 navbar collante · footer: Ft3 colonnes (demande client)
 * enrichment: photographie libre de droit (Unsplash) · pre-emit critique: P4 H5 E4 S4 R4 V4
 * Tous les tokens sont dans tokens.css, chargé juste avant. Aucune valeur brute ci-dessous.
 */

/* ============================================================ base ==== */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-md));
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p, figure, dl { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: var(--color-accent-soft); color: var(--color-ink); }

:where(a, button, input, summary):focus-visible {
  outline: var(--rule-strong) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.skip {
  position: absolute;
  inset-inline-start: -100vmax;
  top: var(--space-xs);
  z-index: var(--z-sticky-nav);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
}
.skip:focus { inset-inline-start: var(--space-xs); }

/* --- pièces typographiques partagées ---------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.eyebrow::before {
  content: "";
  width: var(--space-xl);
  height: var(--rule-strong);
  background: var(--color-accent-ink);
}
.eyebrow--invert { color: var(--color-accent-soft); }
.eyebrow--invert::before { background: var(--color-accent); }

.section-head { max-width: 34ch; }
.section-head h2 { margin-top: var(--space-md); font-size: var(--text-2xl); }
.section-head p { margin-top: var(--space-md); color: var(--color-muted); max-width: 56ch; }

.lede { max-width: var(--measure); color: var(--color-muted); }

/* --- boutons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-brand-deep);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--color-brand); transform: translateY(-1px); }
}
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--color-paper-3);
  color: var(--color-muted);
  pointer-events: none;
}

.btn--ghost { background: none; border-color: var(--color-rule-strong); color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
}

.btn--accent { background: var(--color-accent); color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: var(--color-accent-soft); }
}

.btn--outline-light { background: none; border-color: var(--color-accent-soft); color: var(--color-paper); }
@media (hover: hover) and (pointer: fine) {
  .btn--outline-light:hover { background: var(--color-paper); color: var(--color-brand-deep); }
}

/* --- liens typographiques --------------------------------------------- */

.link {
  color: var(--color-brand);
  font-weight: 500;
  text-decoration: none;
  border-bottom: var(--rule-strong) solid var(--color-rule);
  padding-bottom: 0.1em;
  white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.link:hover { border-color: var(--color-accent-ink); }
.link:active { color: var(--color-ink); }
.link--invert { color: var(--color-accent-soft); border-bottom-color: var(--color-brand); }
.link--invert:hover { border-color: var(--color-accent); }

/* ======================================================= navbar ====== */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--nav-height);
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.015em;
  font-variant-numeric: lining-nums;
}
.wordmark strong em { font-style: normal; color: var(--color-accent-ink); }
.wordmark span {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

@media (max-width: 30rem) {
  .wordmark strong { font-size: var(--text-md); }
  .wordmark span { letter-spacing: 0.1em; }
}

.nav__toggle { width: 0; height: 0; margin: 0; opacity: 0; pointer-events: none; }
.nav__burger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding-inline: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.nav__burger span {
  display: block;
  width: 1.25rem;
  height: var(--rule-strong);
  background: var(--color-ink);
  box-shadow: 0 -6px 0 var(--color-ink), 0 6px 0 var(--color-ink);
}
.nav__toggle:focus-visible + .nav__burger { outline: var(--rule-strong) solid var(--color-focus); outline-offset: 3px; }

.nav__menu {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-md) var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.nav__toggle:checked ~ .nav__menu { display: flex; }

.nav__link {
  display: block;
  padding-block: var(--space-sm);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-strong) solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.nav__link:hover { color: var(--color-brand); border-bottom-color: var(--color-accent-ink); }

@media (min-width: 62rem) {
  .nav__burger { display: none; }
  .nav__menu {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
    padding: 0;
    border: none;
  }
  .nav__link { padding-block: var(--space-xs); }
}

/* ===================================================== hero =========== */

.hero {
  position: relative;
  background: var(--color-brand-deep);
  color: var(--color-paper);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  padding-block: var(--space-2xl) var(--space-3xl);
}
.hero__display {
  margin-top: var(--space-lg);
  font-size: var(--text-display);
  letter-spacing: -0.03em;
}
.hero__display em { font-style: normal; color: var(--color-accent); }
.hero__lede {
  margin-top: var(--space-lg);
  max-width: 48ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-paper-3);
}
.hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.hero__figure { position: relative; }
.hero__figure img {
  width: 100%;
  height: 100%;
  max-height: 34rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.hero__strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-brand);
  padding-block: var(--space-lg) var(--space-2xl);
}
.hero__strip div { display: flex; align-items: baseline; gap: var(--space-sm); }
.hero__strip b {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-accent);
}
.hero__strip span { color: var(--color-paper-3); font-size: var(--text-base); }

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-3xl);
    align-items: center;
    padding-block: var(--space-3xl) var(--space-2xl);
  }
  .hero__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
}

/* ============================================ volets de prestations === */

.volets { padding-block: var(--space-3xl); }
.volets__head { margin-bottom: var(--space-2xl); }

.volet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule);
  scroll-margin-top: calc(var(--nav-height) + var(--space-lg));
}
.volet:first-of-type { border-top: none; padding-top: 0; }

.volet__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hair);
}
.volet__title { margin-top: var(--space-md); font-size: var(--text-xl); }
.volet__body { margin-top: var(--space-md); color: var(--color-muted); max-width: 52ch; }

.livrables { margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.livrables li {
  position: relative;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-lg);
  font-size: var(--text-base);
  line-height: 1.5;
}
.livrables li + li { margin-top: var(--space-xs); }
.livrables li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.65em;
  width: var(--space-sm);
  height: var(--rule-strong);
  background: var(--color-accent-ink);
}

@media (min-width: 62rem) {
  .volet { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; padding-block: var(--space-3xl); }
  .volet:last-of-type { padding-bottom: 0; }
  .volet--flip .volet__text { grid-column: 1; grid-row: 1; }
  .volet--flip .volet__figure { grid-column: 2; grid-row: 1; }
}

/* ================================================= bande citation ==== */

.bande {
  position: relative;
  color: var(--color-paper);
  background: var(--color-brand-deep);
  isolation: isolate;
}
.bande img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.bande::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-strong);
  z-index: -1;
}
@media (max-width: 48rem) {
  .bande::after { background: var(--scrim-soft); }
}
.bande__inner { padding-block: var(--space-3xl); }
.bande__inner > * { max-width: 46rem; }
.bande blockquote {
  margin: var(--space-lg) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.bande figcaption { margin-top: var(--space-lg); color: var(--color-paper-3); font-size: var(--text-base); }

/* ==================================================== méthode ======== */

.methode { background: var(--color-paper-2); padding-block: var(--space-3xl); }
.etapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  counter-reset: etape;
}
.etape {
  padding: var(--space-lg);
  background: var(--color-paper);
  border-top: var(--rule-strong) solid var(--color-accent-ink);
  box-shadow: var(--shadow-hair);
}
.etape::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-accent-ink);
}
.etape h3 { margin-top: var(--space-xs); font-size: var(--text-md); }
.etape p { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-base); }
.etape dl { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.etape dt {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.etape dd { margin: var(--space-2xs) 0 0; font-size: var(--text-base); }

@media (min-width: 48rem) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 74rem) { .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); } }

/* ===================================================== secteurs ====== */

.secteurs { padding-block: var(--space-3xl); }
.secteurs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.chips li {
  padding: var(--space-xs) var(--space-md);
  background: var(--color-brand-wash);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--color-ink-2);
  list-style: none;
}
.secteurs ul { margin: 0; padding: 0; }

@media (min-width: 62rem) {
  .secteurs__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); }
}

/* ========================================================== faq ====== */

.faq { background: var(--color-paper-2); padding-block: var(--space-3xl); }
.faq__list { margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule-strong); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule-strong); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-short) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-accent-ink);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--color-brand); }
.faq p { padding-bottom: var(--space-lg); max-width: 68ch; color: var(--color-muted); font-size: var(--text-base); }

/* ======================================================= footer ====== */

.footer { background: var(--color-ink); color: var(--color-paper-3); font-size: var(--text-base); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}
.footer h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}
.footer ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.footer a { text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.footer a:hover { color: var(--color-accent); }
.footer__brand p { margin-top: var(--space-md); max-width: 40ch; color: var(--color-neutral); font-size: var(--text-base); }
.footer__brand .wordmark strong { color: var(--color-paper); }
.footer__brand .wordmark strong em { color: var(--color-accent); }
.footer__brand .wordmark span { color: var(--color-neutral); }

.footer__legal {
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-ink-2);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}
.footer__legal p { max-width: 74ch; }
.footer__legal a { border-bottom: var(--rule-hair) solid var(--color-ink-2); }

@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); padding-block: var(--space-3xl); }
}

/* ================================================== apparition ======= */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { transform: none; animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; } }
}

@media print {
  .reveal { opacity: 1; transform: none; animation: none; }
  .nav { position: static; }
  .hero, .footer, .bande { background: none; color: var(--color-ink); }
}