/* =========================================================
   Ambroise Carrière — Site
   Source : Claude Design « éditorial cinéma noir »
   ========================================================= */

/* ----- Webfonts (locales) ------------------------------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/dmsans-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/fraunces-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/fraunces-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/fraunces-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/fraunces-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Design tokens
   ========================================================= */
:root {
  --papier:        #F2EDE4;
  --papier-foncé:  #E8E1D4;
  --encre:         #15140F;
  --encre-90:      #15140FE6;
  --encre-50:      #15140F80;
  --encre-20:      #15140F33;
  --encre-10:      #15140F1A;

  --bg:            var(--papier);
  --bg-inverted:   var(--encre);
  --fg:            var(--encre);
  --fg-muted:      var(--encre-50);
  --fg-inverted:   var(--papier);
  --rule:          var(--encre-20);
  --accent:        var(--encre);

  --font-display:  "Fraunces", "Noe Display", "EB Garamond", Georgia, serif;
  --font-body:     "DM Sans", "Inter Tight", system-ui, sans-serif;

  --feat-body:     "onum" 1, "ss01" 0, "kern" 1, "liga" 1;
  --feat-ui:       "lnum" 1, "tnum" 1, "kern" 1;
  --feat-display:  "kern" 1, "liga" 1, "dlig" 1;

  --type-hero:     clamp(3.5rem, 9vw, 8rem);
  --type-h2:       clamp(2rem, 5vw, 4rem);
  --type-h3:       1.5rem;
  --type-quote:    2rem;
  --type-body:     clamp(1rem, 1.1vw, 1.125rem);
  --type-small:    0.875rem;
  --type-micro:    0.75rem;

  --lh-tight:      1.05;
  --lh-display:    1.08;
  --lh-h2:         1.1;
  --lh-h3:         1.35;
  --lh-body:       1.65;

  --tracking-caps: 0.12em;
  --tracking-meta: 0.02em;
  --tracking-tight:-0.01em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-48: 12rem;

  --gutter:         5vw;
  --gutter-desktop: 8vw;
  --measure:        62ch;
  --measure-narrow: 42ch;
  --max-width:      1440px;

  --radius-button: 2px;
  --radius-card:   0;
  --rule-hair:     0.5px;
  --rule-thin:     1px;

  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:      200ms;
  --dur-base:      400ms;
  --dur-slow:      600ms;

  --focus-ring:    var(--encre);
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-feature-settings: var(--feat-body);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* =========================================================
   Typographie sémantique
   ========================================================= */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  line-height: var(--lh-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 144;
  font-feature-settings: var(--feat-display);
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 80;
  margin: 0;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--type-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-5);
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--encre-20);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

/* =========================================================
   Layout
   ========================================================= */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .container { padding-inline: var(--gutter-desktop); }
}
section { padding-block: var(--space-12); }
@media (min-width: 900px) { section { padding-block: var(--space-16); } }

/* Mode sombre (toggle) */
body.dark {
  --bg: var(--encre);
  --fg: var(--papier);
  --rule: #F2EDE433;
  --fg-muted: #F2EDE499;
  background: var(--bg);
  color: var(--fg);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 0.5px solid var(--rule);
  padding-block: 1.1rem;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { height: 28px; width: auto; display: block; }
body.dark .brand img { filter: invert(1); }
.brand .wordmark { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.005em; }
.brand .wordmark em { font-style: italic; font-weight: 300; }

.nav-desktop { display: none; gap: 2rem; align-items: center; font-size: 0.875rem; font-weight: 500; }
@media (min-width: 900px) { .nav-desktop { display: flex; } }
.nav-desktop a {
  text-decoration: none; padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav-desktop a:hover { border-bottom-color: var(--fg); }

.nav-cta {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;
  padding: 0.6rem 1.1rem; border-radius: var(--radius-button);
  background: var(--fg); color: var(--bg);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav-cta:hover { opacity: 0.85; border-bottom-color: transparent; }

.menu-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  padding: 0.5rem; background: transparent; border: 0; cursor: pointer;
}
@media (min-width: 900px) { .menu-toggle { display: none; } }
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--fg); transition: transform 200ms ease, opacity 200ms ease; }
.menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 49;
  background: var(--bg); color: var(--fg);
  padding: 6rem var(--gutter) var(--gutter);
  display: flex; flex-direction: column; gap: var(--space-6);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 350ms var(--ease-out), visibility 0s linear 350ms;
}
.mobile-menu.open { transform: translateY(0); visibility: visible; transition: transform 350ms var(--ease-out), visibility 0s linear 0s; }
@media (min-width: 900px) { .mobile-menu { display: none; } }
.mobile-menu a {
  font-family: var(--font-display); font-size: 2rem; font-weight: 400;
  text-decoration: none; border-top: 0.5px solid var(--rule); padding-top: 1rem;
}
.mobile-menu a em { font-style: italic; font-weight: 300; }
.mobile-menu .mm-foot { margin-top: auto; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.mobile-menu .mm-close {
  position: absolute; top: 1.1rem; right: var(--gutter);
}

/* =========================================================
   Eyebrow + section heads
   ========================================================= */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
  font-feature-settings: var(--feat-ui);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow .dot { width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: 0.6; }

.section-head {
  border-top: 1.5px solid var(--fg);
  padding-top: var(--space-4);
  margin-bottom: var(--space-12);
  display: grid; gap: var(--space-2);
  grid-template-columns: 1fr;
  align-items: baseline;
}
@media (min-width: 800px) {
  .section-head { grid-template-columns: auto 1fr; column-gap: var(--space-12); row-gap: var(--space-2); }
}
.section-head .label {
  font-family: var(--font-body); font-size: 0.8125rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg); font-weight: 600;
  font-feature-settings: var(--feat-ui);
  white-space: nowrap;
}
.section-head .label .num {
  font-family: var(--font-display); font-feature-settings: "onum" 1;
  font-style: italic; font-weight: 300;
  font-variation-settings: "opsz" 24;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--fg-muted);
  margin-right: 0.6rem;
  text-transform: none;
}
.section-head .running {
  font-family: var(--font-body); font-size: 0.8125rem;
  color: var(--fg-muted); font-weight: 500;
  letter-spacing: 0;
  font-feature-settings: var(--feat-ui);
  justify-self: end;
}
.manifeste .section-head { border-top-color: var(--papier); }
body.dark .manifeste .section-head { border-top-color: var(--encre); }
.manifeste .section-head .label { color: var(--papier); }
body.dark .manifeste .section-head .label { color: var(--encre); }
.manifeste .section-head .label .num,
.manifeste .section-head .running { color: rgba(242,237,228,0.55); }
body.dark .manifeste .section-head .label .num,
body.dark .manifeste .section-head .running { color: var(--encre-50); }
.contact .section-head { border-top-color: var(--papier); }
body.dark .contact .section-head { border-top-color: var(--encre); }
.contact .section-head .label { color: var(--papier); }
body.dark .contact .section-head .label { color: var(--encre); }
.contact .section-head .label .num,
.contact .section-head .running { color: rgba(242,237,228,0.55); }
body.dark .contact .section-head .label .num,
body.dark .contact .section-head .running { color: var(--encre-50); }

/* =========================================================
   Hero
   ========================================================= */
.hero { padding-block: var(--space-12) var(--space-16); position: relative; }
@media (min-width: 900px) { .hero { padding-block: var(--space-16) var(--space-24); } }
.hero-grid {
  display: grid; gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.4fr 0.85fr; gap: var(--space-12); }
}
.hero h1 {
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.022em;
  margin-block: var(--space-6) var(--space-8);
  font-variation-settings: "opsz" 144;
}
.hero h1 em { font-style: italic; font-weight: 300; color: var(--fg-muted); display: block; }
.hero .lede {
  max-width: 38ch;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  line-height: 1.55;
  font-style: italic;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 300;
  margin-bottom: var(--space-8);
}
.hero-photo {
  position: relative; aspect-ratio: 4/5;
  overflow: hidden;
  align-self: end;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06); }
.hero-photo .corner-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(transparent, rgba(21,20,15,0.65));
  color: #F2EDE4;
  font-family: var(--font-body); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  display: flex; justify-content: space-between; gap: 12px;
  font-feature-settings: var(--feat-ui);
}
.hero-meta-row {
  display: flex; gap: 2rem; flex-wrap: wrap;
  border-top: 0.5px solid var(--rule);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); font-weight: 500;
  font-feature-settings: var(--feat-ui);
}

/* =========================================================
   Boutons
   ========================================================= */
.btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { opacity: 0.88; }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--rule); }
.btn-secondary:hover { background: var(--rule); }
body.dark .btn-secondary:hover { background: rgba(242,237,228,0.08); }
body:not(.dark) .btn-secondary:hover { background: var(--papier-foncé); }

/* =========================================================
   Manifeste — inverted
   ========================================================= */
.manifeste { background: var(--encre); color: var(--papier); }
body.dark .manifeste { background: var(--papier); color: var(--encre); }
.manifeste .eyebrow { color: rgba(242,237,228,0.6); }
body.dark .manifeste .eyebrow { color: var(--encre-50); }

.manifeste-intro {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-16);
}
@media (min-width: 900px) {
  .manifeste-intro { grid-template-columns: 0.4fr 1fr; gap: var(--space-12); }
}
.manifeste-intro .running {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(242,237,228,0.55); font-weight: 500;
  font-feature-settings: var(--feat-ui);
}
body.dark .manifeste-intro .running { color: var(--encre-50); }

.conviction {
  border-top: 0.5px solid rgba(242,237,228,0.2);
  padding-block: var(--space-12);
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}
body.dark .conviction { border-top-color: var(--encre-20); }
@media (min-width: 900px) {
  .conviction { grid-template-columns: clamp(4rem, 7vw, 6rem) 1fr 1.3fr; gap: var(--space-12); padding-block: var(--space-16); }
}
.conviction:last-of-type { border-bottom: 0.5px solid rgba(242,237,228,0.2); }
body.dark .conviction:last-of-type { border-bottom-color: var(--encre-20); }
.conviction .num {
  font-family: var(--font-display); font-feature-settings: "onum" 1;
  font-weight: 300; font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 0.85; color: rgba(242,237,228,0.4);
}
body.dark .conviction .num { color: var(--encre-20); }
.conviction h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400; line-height: 1.1;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 100;
  margin: 0;
}
.conviction p {
  margin: 0; max-width: 56ch;
  font-size: 1.0625rem; line-height: 1.75;
  color: rgba(242,237,228,0.78);
}
body.dark .conviction p { color: var(--encre-90); }

/* =========================================================
   Parcours — frise horizontale
   ========================================================= */
.parcours { padding-block: var(--space-16); }
@media (min-width: 900px) { .parcours { padding-block: var(--space-24) var(--space-16); } }

.parcours-intro {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-16);
}
@media (min-width: 900px) {
  .parcours-intro { grid-template-columns: 0.45fr 1fr; gap: var(--space-12); align-items: end; }
}
.parcours-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 400; line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 22ch;
  font-variation-settings: "opsz" 96;
}
.parcours-intro h2 em { font-style: italic; font-weight: 300; }
.parcours-intro .running {
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--fg-muted);
  font-style: italic; font-family: var(--font-display);
  font-variation-settings: "opsz" 32;
  font-weight: 300;
  max-width: 42ch;
}

.parcours-rail {
  position: relative;
  --rail-inset: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
  padding-left: var(--rail-inset);
}
@media (min-width: 900px) {
  .parcours-rail {
    --rail-inset: max(var(--gutter-desktop), calc((100vw - var(--max-width)) / 2 + var(--gutter-desktop)));
  }
}

.parcours-track {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .parcours-track {
    display: flex; gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rail-inset);
    scrollbar-width: none;
    padding-bottom: 1rem;
  }
  .parcours-track::-webkit-scrollbar { display: none; }
}
.parcours-step {
  scroll-snap-align: start;
  position: relative;
  padding-top: var(--space-8);
}
@media (min-width: 900px) {
  .parcours-step {
    flex: 0 0 clamp(380px, 28vw, 480px);
    padding: var(--space-8) var(--space-8) 0 0;
    border-left: none;
    display: grid; grid-template-rows: auto 1fr;
    gap: var(--space-6);
  }
  .parcours-step:last-child { padding-right: var(--rail-inset); }
}

.step-marker {
  display: flex; align-items: center; gap: 1rem;
  padding-right: var(--space-6);
}
.step-num {
  font-family: var(--font-display); font-feature-settings: "onum" 1;
  font-weight: 300; font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1; color: var(--fg);
}
.step-rule { flex: 1; height: 1.5px; background: var(--fg); }
.step-era {
  font-family: var(--font-body); font-size: 0.6875rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
  font-feature-settings: var(--feat-ui);
  white-space: nowrap;
}
.step-body { padding-right: var(--space-6); position: relative; }
.step-body::before {
  content: ""; display: block;
  width: 100%; height: 84px;
  margin-bottom: var(--space-6);
  background-color: transparent;
  background-repeat: repeat;
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}

/* Tone 1 — typographic noise */
.parcours-step[data-tone="type"] .step-body::before {
  background-image:
    repeating-linear-gradient(0deg, var(--fg) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, transparent 0 11px, var(--fg) 11px 12px, transparent 12px 23px);
  background-size: 100% 100%, 100% 100%;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* Tone 2 — wave */
.parcours-step[data-tone="wave"] .step-body::before {
  background: var(--fg);
  height: 84px;
  border: none;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='84' viewBox='0 0 800 84' preserveAspectRatio='none'><g fill='black'><rect x='0' y='28' width='3' height='28'/><rect x='10' y='14' width='3' height='56'/><rect x='20' y='34' width='3' height='16'/><rect x='30' y='8' width='3' height='68'/><rect x='40' y='22' width='3' height='40'/><rect x='50' y='30' width='3' height='24'/><rect x='60' y='10' width='3' height='64'/><rect x='70' y='26' width='3' height='32'/><rect x='80' y='2' width='3' height='80'/><rect x='90' y='30' width='3' height='24'/><rect x='100' y='18' width='3' height='48'/><rect x='110' y='28' width='3' height='28'/><rect x='120' y='12' width='3' height='60'/><rect x='130' y='34' width='3' height='16'/><rect x='140' y='6' width='3' height='72'/><rect x='150' y='24' width='3' height='36'/><rect x='160' y='30' width='3' height='24'/><rect x='170' y='14' width='3' height='56'/><rect x='180' y='28' width='3' height='28'/><rect x='190' y='20' width='3' height='44'/><rect x='200' y='10' width='3' height='64'/><rect x='210' y='32' width='3' height='20'/><rect x='220' y='22' width='3' height='40'/><rect x='230' y='4' width='3' height='76'/><rect x='240' y='30' width='3' height='24'/><rect x='250' y='16' width='3' height='52'/><rect x='260' y='28' width='3' height='28'/><rect x='270' y='8' width='3' height='68'/><rect x='280' y='34' width='3' height='16'/><rect x='290' y='20' width='3' height='44'/><rect x='300' y='26' width='3' height='32'/><rect x='310' y='12' width='3' height='60'/><rect x='320' y='30' width='3' height='24'/><rect x='330' y='6' width='3' height='72'/><rect x='340' y='22' width='3' height='40'/><rect x='350' y='32' width='3' height='20'/><rect x='360' y='14' width='3' height='56'/><rect x='370' y='28' width='3' height='28'/><rect x='380' y='10' width='3' height='64'/><rect x='390' y='34' width='3' height='16'/><rect x='400' y='20' width='3' height='44'/><rect x='410' y='28' width='3' height='28'/><rect x='420' y='8' width='3' height='68'/><rect x='430' y='32' width='3' height='20'/><rect x='440' y='18' width='3' height='48'/><rect x='450' y='30' width='3' height='24'/><rect x='460' y='12' width='3' height='60'/><rect x='470' y='26' width='3' height='32'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='84' viewBox='0 0 800 84' preserveAspectRatio='none'><g fill='black'><rect x='0' y='28' width='3' height='28'/><rect x='10' y='14' width='3' height='56'/><rect x='20' y='34' width='3' height='16'/><rect x='30' y='8' width='3' height='68'/><rect x='40' y='22' width='3' height='40'/><rect x='50' y='30' width='3' height='24'/><rect x='60' y='10' width='3' height='64'/><rect x='70' y='26' width='3' height='32'/><rect x='80' y='2' width='3' height='80'/><rect x='90' y='30' width='3' height='24'/><rect x='100' y='18' width='3' height='48'/><rect x='110' y='28' width='3' height='28'/><rect x='120' y='12' width='3' height='60'/><rect x='130' y='34' width='3' height='16'/><rect x='140' y='6' width='3' height='72'/><rect x='150' y='24' width='3' height='36'/><rect x='160' y='30' width='3' height='24'/><rect x='170' y='14' width='3' height='56'/><rect x='180' y='28' width='3' height='28'/><rect x='190' y='20' width='3' height='44'/><rect x='200' y='10' width='3' height='64'/><rect x='210' y='32' width='3' height='20'/><rect x='220' y='22' width='3' height='40'/><rect x='230' y='4' width='3' height='76'/><rect x='240' y='30' width='3' height='24'/><rect x='250' y='16' width='3' height='52'/><rect x='260' y='28' width='3' height='28'/><rect x='270' y='8' width='3' height='68'/><rect x='280' y='34' width='3' height='16'/><rect x='290' y='20' width='3' height='44'/><rect x='300' y='26' width='3' height='32'/><rect x='310' y='12' width='3' height='60'/><rect x='320' y='30' width='3' height='24'/><rect x='330' y='6' width='3' height='72'/><rect x='340' y='22' width='3' height='40'/><rect x='350' y='32' width='3' height='20'/><rect x='360' y='14' width='3' height='56'/><rect x='370' y='28' width='3' height='28'/><rect x='380' y='10' width='3' height='64'/><rect x='390' y='34' width='3' height='16'/><rect x='400' y='20' width='3' height='44'/><rect x='410' y='28' width='3' height='28'/><rect x='420' y='8' width='3' height='68'/><rect x='430' y='32' width='3' height='20'/><rect x='440' y='18' width='3' height='48'/><rect x='450' y='30' width='3' height='24'/><rect x='460' y='12' width='3' height='60'/><rect x='470' y='26' width='3' height='32'/></g></svg>");
}

/* Tone 3 — grid */
.parcours-step[data-tone="grid"] .step-body::before {
  background-image:
    linear-gradient(to right, var(--fg) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--fg) 0.5px, transparent 0.5px);
  background-size: 14px 14px;
  background-position: 0 0;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(135deg, #000 30%, transparent 95%);
}

/* Tone 4 — solid ink slab */
.parcours-step[data-tone="ink"] .step-body::before {
  background: var(--fg);
  height: 84px;
  border: none;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
}

.parcours-step[data-tone="type"] h3 { font-style: normal; }
.parcours-step[data-tone="wave"] h3 { font-style: italic; font-weight: 300; }
.parcours-step[data-tone="grid"] h3 { font-style: normal; }
.parcours-step[data-tone="ink"] h3 { font-style: italic; font-weight: 400; letter-spacing: -0.018em; }

.parcours-step h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 400; line-height: 1.12;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 60;
  margin-bottom: var(--space-4);
}
.parcours-step h3 em { font-style: italic; font-weight: 300; }
.parcours-step p { font-size: 1rem; line-height: 1.65; max-width: 36ch; margin: 0; }
.parcours-step .links { margin-top: var(--space-4); display: flex; gap: 1rem; font-size: 0.875rem; }
.parcours-step .links a { color: var(--fg); }

@media (max-width: 899px) {
  .parcours-track { padding-inline: 0; }
  .parcours-step { padding-left: 0; border-left: none; padding-bottom: var(--space-12); border-bottom: 0.5px solid var(--rule); }
  .parcours-step:last-child { border-bottom: none; }
  .step-body::before { display: none; }
  .step-marker { margin-bottom: var(--space-4); }
}

.parcours-controls { display: none; }
@media (min-width: 900px) {
  .parcours-controls {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    margin-top: var(--space-6);
  }
}
.parcours-controls button {
  width: 44px; height: 44px;
  border: 0.5px solid var(--rule);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body); font-size: 1.125rem;
  color: var(--fg);
  border-radius: var(--radius-button);
  transition: background var(--dur-fast) var(--ease-out);
}
.parcours-controls button:hover { background: var(--rule); }
.parcours-controls button:disabled { opacity: 0.3; cursor: default; }

.parcours-progress {
  height: 1.5px; background: var(--rule); position: relative;
  margin-top: 1rem; overflow: hidden;
}
.parcours-progress .bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--fg); width: 26%;
  transition: transform 200ms var(--ease-out);
}

/* =========================================================
   Formats
   ========================================================= */
.formats-intro { display: block; margin-bottom: var(--space-16); }
.formats-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 4.5rem);
  font-style: italic; font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 96;
  margin: 0;
  max-width: none;
  text-wrap: balance;
}

.formats-grid {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border-top: 0.5px solid var(--rule);
}
@media (min-width: 800px) {
  .formats-grid { grid-template-columns: 1fr 1fr; }
}
.format {
  border-bottom: 0.5px solid var(--rule);
  padding: var(--space-10) 0;
  display: grid; gap: var(--space-3);
}
@media (min-width: 800px) {
  .format { padding: var(--space-12) 0; padding-right: var(--space-12); }
  .format:nth-child(odd) { border-right: 0.5px solid var(--rule); }
  .format:nth-child(even) { padding-left: var(--space-12); padding-right: 0; }
}
.format h3 {
  font-family: var(--font-display); font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  font-weight: 400; line-height: 1.1;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 60;
}
.format .meta {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
  font-feature-settings: var(--feat-ui);
  margin-bottom: var(--space-3);
}
.format .lede {
  font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  margin-bottom: var(--space-3);
}
.format p { font-size: 0.9375rem; line-height: 1.65; margin: 0; max-width: 42ch; }
.format .ideal {
  margin-top: var(--space-4);
  font-style: italic; font-family: var(--font-display);
  font-weight: 300; font-size: 0.9375rem;
  color: var(--fg-muted);
  font-variation-settings: "opsz" 24;
  max-width: 38ch;
}
.format .titles { margin-top: 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.format .titles li { font-style: italic; font-family: var(--font-display); font-weight: 300; font-size: 1rem; }
.format .more {
  margin-top: var(--space-6);
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; letter-spacing: 0.06em;
  color: var(--fg);
  text-decoration: underline; text-decoration-color: var(--rule);
  text-underline-offset: 0.4em;
}
.format .more:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

.formats-footnote {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 0.5px solid var(--rule);
  font-style: italic; font-family: var(--font-display);
  font-weight: 300; font-size: 1.0625rem; line-height: 1.5;
  font-variation-settings: "opsz" 36;
  color: var(--fg-muted);
  max-width: 60ch;
}
.formats-footnote a { color: var(--fg); font-style: normal; font-family: var(--font-body); font-weight: 500; }

/* =========================================================
   Clients
   ========================================================= */
.clients-intro { margin-bottom: var(--space-12); }
.logos-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: var(--space-16);
}
@media (min-width: 900px) {
  .logos-strip { grid-template-columns: repeat(3, 1fr); }
}
.logo-cell {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  border-right: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  position: relative;
  transition: background var(--dur-fast) var(--ease-out);
}
.logo-cell:hover { background: rgba(21,20,15,0.025); }
body.dark .logo-cell:hover { background: rgba(242,237,228,0.04); }

/* Mobile : 2 colonnes — supprime border-right des cellules paires + border-bottom de la dernière rangée */
.logo-cell:nth-child(2n) { border-right: 0; }
.logo-cell:nth-last-child(-n+1) { border-bottom: 0; }

/* Desktop : 3 colonnes pour 9 logos (3×3) */
@media (min-width: 900px) {
  .logo-cell:nth-child(2n) { border-right: 0.5px solid var(--rule); }
  .logo-cell:nth-child(3n) { border-right: 0; }
  .logo-cell:nth-last-child(-n+3) { border-bottom: 0; }
}

.logo-cell img {
  max-width: 75%;
  max-height: 60%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.logo-cell:hover img { opacity: 1; }

/* Dark mode : inversion des logos sombres pour qu'ils restent lisibles */
body.dark .logo-cell img { filter: grayscale(1) contrast(1.05) invert(1); }

/* Fallback initiales — affiché uniquement si l'image casse */
.logo-fallback {
  display: none;
  width: 64px; height: 64px;
  align-items: center; justify-content: center;
  background: var(--papier-foncé);
  color: var(--encre);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36;
  font-feature-settings: "onum" 1;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.logo-cell:hover .logo-fallback { opacity: 1; }
.logo-cell.logo-broken img { display: none; }
.logo-cell.logo-broken .logo-fallback { display: inline-flex; }
body.dark .logo-fallback { background: rgba(242,237,228,0.08); color: var(--papier); }

.cases-grid { display: grid; gap: 0; }
@media (min-width: 900px) {
  .cases-grid { grid-template-columns: 1fr 1fr; gap: 0 var(--space-12); }
}
.case {
  border-top: 0.5px solid var(--rule);
  padding-block: var(--space-10);
  display: grid; gap: var(--space-3);
  align-content: start;
}
@media (min-width: 900px) {
  .case { padding-block: var(--space-12); }
}
.case .meta {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
  font-feature-settings: var(--feat-ui);
}
.case h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: 400; line-height: 1.15;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 60;
  margin-bottom: var(--space-1);
}
.case .description {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg);
  margin: 0;
  max-width: 48ch;
}

/* Verbatim — bloc prêt à recevoir une vraie citation client.
   Reste vide tant qu'aucun <blockquote class="verbatim"> n'est ajouté à la card. */
.case .verbatim {
  margin: var(--space-4) 0 0;
  border-left: 1.5px solid var(--fg);
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 1.125rem; line-height: 1.45;
  color: var(--fg);
  font-variation-settings: "opsz" 36;
  max-width: 44ch;
}
.case .verbatim p { margin: 0; }
.case .verbatim footer {
  margin-top: 0.75rem;
  font-family: var(--font-body); font-style: normal; font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
  font-feature-settings: var(--feat-ui);
}

/* =========================================================
   Terrains
   ========================================================= */
.terrains-intro { display: block; margin-bottom: var(--space-12); }
.terrains-intro p {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 3rem); line-height: 1.18;
  letter-spacing: -0.014em;
  font-variation-settings: "opsz" 72;
  max-width: none;
  margin: 0;
  text-wrap: balance;
}
@media (max-width: 899px) {
  .formats-intro h2 br, .terrains-intro p br { display: none; }
}

.terrains-grid {
  display: grid; gap: 0;
  border-top: 0.5px solid var(--rule);
}
@media (min-width: 900px) {
  .terrains-grid { grid-template-columns: 1fr 1fr; gap: 0; }
}
.terrain {
  padding: var(--space-12) 0;
  border-bottom: 0.5px solid var(--rule);
  display: grid; gap: var(--space-4);
  align-content: start;
}
@media (min-width: 900px) {
  .terrain { padding-right: var(--space-12); }
  .terrain:nth-child(odd) { border-right: 0.5px solid var(--rule); }
  .terrain:nth-child(even) { padding-left: var(--space-12); padding-right: 0; }
  .terrain:nth-last-child(-n+2) { border-bottom: 0; }
}
.terrain .meta {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
  font-feature-settings: var(--feat-ui);
}
.terrain h3 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 400; line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 120;
}
.terrain h3 em { font-style: italic; font-weight: 300; }
.terrain .lede { font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; }
.terrain p { font-size: 0.9375rem; line-height: 1.65; max-width: 42ch; margin: 0; }
.terrain a.go {
  margin-top: var(--space-6);
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.875rem; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--rule);
  text-underline-offset: 0.4em; width: fit-content;
}
.terrain a.go:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.terrain a.go .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.terrain a.go:hover .arrow { transform: translateX(4px); }

/* =========================================================
   Contact — inverted
   ========================================================= */
.contact { background: var(--encre); color: var(--papier); position: relative; overflow: hidden; }
body.dark .contact { background: var(--papier); color: var(--encre); }
.contact .eyebrow { color: rgba(242,237,228,0.55); }
body.dark .contact .eyebrow { color: var(--encre-50); }

.contact-bg {
  position: absolute; right: 0; top: 0; bottom: 0; width: 42%;
  pointer-events: none; z-index: 1; opacity: 0.85;
}
.contact-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 100%);
  mask-image: linear-gradient(to left, #000 25%, transparent 100%);
}
@media (max-width: 899px) { .contact-bg { width: 60%; opacity: 0.5; } }

.contact .container { position: relative; z-index: 2; }
.contact-grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-16); }
}
.contact h2 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  font-weight: 400; line-height: 1.02;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  max-width: 14ch;
  margin-bottom: var(--space-8);
}
.contact h2 em { font-style: italic; font-weight: 300; color: rgba(242,237,228,0.65); display: block; }
body.dark .contact h2 em { color: var(--encre-50); }
.contact .lede {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55;
  font-variation-settings: "opsz" 36;
  max-width: 42ch;
  color: rgba(242,237,228,0.85);
  margin-bottom: var(--space-8);
}
body.dark .contact .lede { color: var(--encre-90); }
.contact .coords {
  font-size: 0.8125rem; letter-spacing: 0.06em;
  color: rgba(242,237,228,0.7); font-weight: 500;
  font-feature-settings: var(--feat-ui);
  display: grid; gap: 0.6rem;
  margin-top: var(--space-6);
}
body.dark .contact .coords { color: var(--encre-50); }
.contact .coords a { color: var(--papier); text-decoration-color: rgba(242,237,228,0.25); }
body.dark .contact .coords a { color: var(--encre); text-decoration-color: var(--encre-20); }
.contact .footnote {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 0.5px solid rgba(242,237,228,0.15);
  font-size: 0.8125rem; line-height: 1.6;
  color: rgba(242,237,228,0.6);
  max-width: 50ch;
}
body.dark .contact .footnote { border-top-color: var(--encre-20); color: var(--encre-50); }

.contact .btn-row .btn-primary { background: var(--papier); color: var(--encre); }
body.dark .contact .btn-row .btn-primary { background: var(--encre); color: var(--papier); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--encre); color: rgba(242,237,228,0.6);
  padding-block: var(--space-16) var(--space-8);
  font-size: 0.8125rem;
  border-top: 1px solid rgba(242,237,228,0.08);
}
body.dark .site-footer { background: var(--papier); color: var(--encre-50); border-top-color: var(--encre-20); }

.footer-grid {
  display: grid; gap: var(--space-10);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-12);
  border-bottom: 0.5px solid rgba(242,237,228,0.12);
}
body.dark .footer-grid { border-bottom-color: var(--encre-20); }
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-12); }
}
.footer-col h4 {
  font-family: var(--font-body); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242,237,228,0.5); margin-bottom: 1rem;
}
body.dark .footer-col h4 { color: var(--encre-50); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.footer-col a { color: rgba(242,237,228,0.85); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
body.dark .footer-col a { color: var(--encre); }
.footer-col a:hover { border-bottom-color: currentColor; }
.footer-col .credo {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 1.125rem; line-height: 1.4;
  color: rgba(242,237,228,0.75);
  font-variation-settings: "opsz" 36;
  max-width: 28ch;
  margin: 0;
}
body.dark .footer-col .credo { color: var(--encre); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: var(--space-6);
  font-size: 0.75rem; letter-spacing: 0.06em;
  color: rgba(242,237,228,0.45);
}
body.dark .footer-bottom { color: var(--encre-50); }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }

/* =========================================================
   Cookie banner
   ========================================================= */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--papier); color: var(--encre);
  border-top: 1px solid var(--encre-20);
  padding: 1rem var(--gutter);
  transform: translateY(100%); transition: transform 350ms var(--ease-out);
}
body.dark .cookie-banner { background: var(--encre); color: var(--papier); border-top-color: rgba(242,237,228,0.2); }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cb-row {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 800px) {
  .cookie-banner .cb-row { grid-template-columns: 1fr auto; gap: 2rem; }
  .cookie-banner { padding: 1rem var(--gutter-desktop); }
}
.cookie-banner p { margin: 0; font-size: 0.875rem; line-height: 1.55; max-width: 80ch; }
.cookie-banner .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cookie-banner .btn { padding: 0.7rem 1.2rem; font-size: 0.8125rem; }
body.dark .cookie-banner .btn-primary { background: var(--papier); color: var(--encre); }
body.dark .cookie-banner .btn-secondary { color: var(--papier); border-color: rgba(242,237,228,0.25); }

/* =========================================================
   Theme toggle (bouton flottant)
   ========================================================= */
.theme-toggle {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 55;
  width: 44px; height: 44px;
  border: 0.5px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { transform: scale(1.05); }
.theme-toggle .ico-light { display: none; }
.theme-toggle .ico-dark { display: block; }
body.dark .theme-toggle .ico-light { display: block; }
body.dark .theme-toggle .ico-dark { display: none; }

/* =========================================================
   Reveal-on-scroll
   ========================================================= */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(10px); animation: rise 700ms var(--ease-out) forwards; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 120ms; }
.stagger > *:nth-child(3) { animation-delay: 240ms; }
.stagger > *:nth-child(4) { animation-delay: 360ms; }
.stagger > *:nth-child(5) { animation-delay: 480ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .stagger > * { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}