/* Palette beige / marron / noir, sans bleu.
   --blush est un quasi-blanc : il ne sert que sur les fonds sombres (hero,
   cartes bordeaux) et pour la section contact. Sur les fonds clairs, c'est
   --burgundy qui porte l'accent, sinon il disparaitrait. */
:root {
  --burgundy: #652f33;
  --burgundy-dark: #38191c;
  --ivory: #f4ede2;
  --paper: #fdf9f2;
  --ink: #1a1614;
  --blush: #fffaf9;
  --clay: #8c6a45;
  --line-dark: rgba(26, 22, 20, 0.18);
  --line-light: rgba(244, 237, 226, 0.24);
  --shell: min(1400px, calc(100vw - 64px));
  --header-height: 80px;
}

* {
  box-sizing: border-box;
}

/* overflow-x: clip et pas hidden. Avec hidden, l'axe vertical passe de
   visible a auto : html, body et main deviennent des conteneurs de scroll
   et cassent le position: sticky du scroll horizontal de la section methode. */
html {
  scroll-behavior: smooth;
  background: var(--ivory);
  max-width: 100%;
  overflow-x: clip;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  overflow-x: clip;
}

main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body::before {
  position: fixed;
  z-index: 999;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

::selection {
  color: var(--paper);
  background: var(--burgundy);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-progress {
  position: fixed;
  z-index: 150;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
}

.page-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: left;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: var(--shell);
  height: var(--header-height);
  color: var(--ivory);
  transform: translateX(-50%);
  transition: color 240ms ease, background 240ms ease, width 240ms ease, padding 240ms ease;
}

.site-header.is-scrolled {
  top: 10px;
  width: min(1180px, calc(100vw - 28px));
  height: 62px;
  padding: 0 18px;
  color: var(--ink);
  background: rgba(244, 237, 226, 0.92);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
}

.brand small {
  display: inline-block;
  margin-top: 4px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 8px;
  font-weight: 400;
  opacity: 0.65;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  color: var(--ink);
  background: var(--blush);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 23px;
  font-style: italic;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 11px;
  text-transform: uppercase;
}

.main-nav a,
.header-social,
.footer-links a {
  transition: opacity 180ms ease, color 180ms ease;
}

.main-nav a:hover,
.header-social:hover,
.footer-links a:hover {
  color: var(--clay);
}

.header-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

.header-social svg,
.menu-toggle svg {
  width: 20px;
  height: 20px;
}

.menu-toggle {
  display: none;
  color: inherit;
  background: transparent;
  border: 0;
}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 96svh;
  color: var(--ivory);
  background: var(--burgundy);
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 4;
  width: var(--shell);
  padding: 124px 0 126px;
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 22px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.hero-title {
  max-width: 850px;
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  line-height: 0.88;
}

.title-line,
.title-subline {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  animation: title-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.title-line {
  font-size: 182px;
}

/* Tient sur une seule ligne sous "Jennifer" : nowrap, et taille indexee sur
   la largeur du viewport pour que la ligne ne deborde jamais. */
.title-subline {
  margin-top: 12px;
  color: var(--blush);
  font-size: clamp(16px, 2.35vw, 33px);
  font-style: italic;
  line-height: 1.1;
  white-space: nowrap;
  animation-delay: 130ms;
}

@keyframes title-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Phrase principale du hero : filet beige et corps nettement plus grand
   pour qu'elle ressorte du reste du bloc. */
.hero-copy {
  position: relative;
  max-width: 640px;
  padding-top: 32px;
  margin: 42px 0 0;
  font-size: clamp(21px, 2.05vw, 29px);
  font-weight: 300;
  line-height: 1.32;
}

.hero-copy::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 2px;
  background: var(--blush);
  content: "";
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid currentColor;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.button svg,
.offer-link svg,
.text-link svg,
.floating-cta svg {
  width: 17px;
  height: 17px;
}

.button:hover {
  transform: translateY(-3px);
}

.button-primary {
  color: var(--ink);
  background: var(--ivory);
  border-color: var(--ivory);
}

.button-primary:hover {
  background: var(--blush);
  border-color: var(--blush);
}

.button-dark {
  color: var(--ivory);
  background: var(--ink);
  border-color: var(--ink);
}

.button-dark:hover {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--paper);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 11px;
  text-transform: uppercase;
}

.text-link:hover {
  color: var(--burgundy);
}

/* Sur les fonds bordeaux, c'est l'inverse : le survol doit s'eclaircir. */
.hero .text-link:hover,
.about-copy .text-link:hover {
  color: var(--blush);
}

.hero-person {
  position: absolute;
  z-index: 3;
  right: -2vw;
  bottom: -1px;
  width: min(53vw, 860px);
  height: min(91svh, 940px);
  pointer-events: none;
}

.hero-person img {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 28px 42px rgba(24, 6, 8, 0.28));
}

.hero-note {
  position: absolute;
  z-index: 5;
  right: 3.6vw;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  width: min(330px, 31vw);
  padding: 16px 18px;
  color: var(--ink);
  background: var(--blush);
  border: 1px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
}

.hero-note span {
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 9px;
  text-transform: uppercase;
}

.hero-note strong {
  margin-top: 7px;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
}

.scroll-cue {
  position: absolute;
  z-index: 6;
  bottom: 32px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 9px;
  text-transform: uppercase;
}

.scroll-cue svg {
  width: 15px;
  animation: cue-bounce 1.4s ease-in-out infinite;
}

@keyframes cue-bounce {
  50% { transform: translateY(6px); }
}

.marquee {
  color: var(--ink);
  background: var(--blush);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 16px 0;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
}

.marquee-track span {
  padding: 0 26px;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 46px;
}

.marquee-track b {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 34px;
  font-style: italic;
  font-weight: 400;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.story-scroll {
  position: relative;
  background: var(--ivory);
}

.story-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.story-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  height: 100%;
  will-change: transform;
}

/* Retour de Jennifer (30/08) : « le 5 n'est pas aligne aux autres ». Les
   textes etaient ancres en bas (space-between) : un titre sur trois lignes
   demarrait plus haut, et sur un ecran peu haut le 05 debordait et tombait
   plus bas. Les textes sont donc ancres en haut, a la meme hauteur sur tous
   les panneaux, et les tailles suivent la hauteur d'ecran pour tenir dans
   les 100svh. */
.story-panel {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(40px, 9vh, 96px);
  width: min(72vw, 980px);
  min-width: 720px;
  height: 100%;
  padding: clamp(42px, 6vw, 94px);
  background: var(--ivory);
  border-right: 1px solid var(--line-dark);
}

.story-intro {
  justify-content: center;
  gap: 0;
  width: 100vw;
  min-width: 100vw;
  padding-right: 24vw;
}

.story-intro h2,
.section-heading h2,
.about-copy h2,
.contact-copy h2 {
  max-width: 950px;
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 104px;
  font-weight: 400;
  line-height: 1;
}

.story-intro h2 em,
.section-heading h2 em,
.about-copy h2 em,
.contact-copy h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  text-transform: none;
}

/* Le panneau d'intro porte maintenant deux titres au lieu d'un. On reduit
   les deux et on les indexe sur la hauteur de viewport pour qu'ils tiennent
   dans les 100svh du panneau, qui est en overflow: hidden. */
.story-intro h2 {
  font-size: clamp(48px, 9.5vh, 104px);
}

.story-intro-second {
  max-width: 950px;
  margin: clamp(12px, 2vh, 24px) 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(30px, 6vh, 64px);
  font-weight: 400;
  line-height: 1;
}

.story-intro-second em {
  color: var(--burgundy);
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  text-transform: none;
}

.story-intro > p:last-child {
  max-width: 520px;
  margin: clamp(16px, 3vh, 34px) 0 0;
  font-size: 19px;
  line-height: 1.55;
}

.panel-number {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(110px, 16vh, 154px);
  line-height: 0.8;
}

.story-panel h3 {
  max-width: 760px;
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(54px, 9vh, 88px);
  font-weight: 400;
  line-height: 1;
}

.story-panel > div > p:last-child {
  max-width: 530px;
  margin: 26px 0 0;
  font-size: 18px;
  line-height: 1.55;
}

.panel-burgundy {
  color: var(--ivory);
  background: var(--burgundy);
}

.panel-ink {
  color: var(--ivory);
  background: var(--ink);
}

.panel-final {
  color: var(--ivory);
  background: var(--burgundy);
}

.section-shell {
  width: var(--shell);
  margin: 0 auto;
}

.results-section {
  padding: 136px 0 88px;
  background: var(--paper);
  border-top: 1px solid var(--line-dark);
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 360px);
  align-items: end;
  gap: 48px;
}

/* Les cas clients ont leur propre section : l'ancre #resultats tombe sur eux
   et non sur la methode de suivi qui les precede. */
.results-cases {
  padding-top: 110px;
}

/* ---------- Cas clients ---------- */

.cases {
  margin-top: 66px;
}

.cases-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line-dark);
}

.cases-tabs button {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 28px 18px 0;
  margin-right: 28px;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}

.cases-tabs button span {
  font-size: 10px;
  opacity: 0.5;
}

.cases-tabs button:hover {
  color: var(--clay);
}

.cases-tabs button[aria-selected="true"] {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}

.cases-stage {
  position: relative;
  padding-top: 54px;
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 86px);
}

.case[hidden] {
  display: none;
}

.case-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.case-shots figure {
  margin: 0;
}

/* Captures d'ecran de telephone fournies par Jennifer le 29/08, toutes en
   900x1600 : le cadre est au meme ratio pour qu'elles le remplissent. */
.case-shots img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  object-position: center top;
  background: var(--ivory);
  border: 1px solid var(--line-dark);
}

.case-shots figcaption {
  margin-top: 12px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.case-role {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
}

.case-copy h3 {
  max-width: 520px;
  margin: 18px 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(34px, 3.2vw, 50px);
  font-weight: 400;
  line-height: 1.05;
}

.case-what {
  max-width: 500px;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.62;
  opacity: 0.82;
}

/* Nature de la mission : accompagnement dans la duree ou audit ponctuel.
   C'est l'axe de lecture des cas, pas les chiffres d'abonnes. */
.case-mission {
  display: inline-block;
  padding: 5px 11px;
  margin-right: 14px;
  color: var(--paper);
  background: var(--burgundy);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.case-mission-audit {
  color: var(--burgundy);
  background: transparent;
  border: 1px solid var(--burgundy);
}

/* Le travail est qualifie par ce qui a change, pas par un chiffre. */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 32px 0 0;
  list-style: none;
}

.case-tags li {
  padding: 9px 14px;
  border: 1px solid var(--line-dark);
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.case-copy blockquote {
  max-width: 520px;
  padding-left: 22px;
  margin: 34px 0 0;
  border-left: 2px solid var(--burgundy);
}

.case-copy blockquote p {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 22px;
  font-style: italic;
  line-height: 1.42;
}

/* Retour de Jennifer (24/09) : sans guillemets on ne comprend pas tout de
   suite que c'est le client qui parle. Guillemets francais, avec l'espace
   insecable d'usage, poses en CSS pour les trois cas a la fois. */
.case-copy blockquote p::before {
  content: "« ";
}

.case-copy blockquote p::after {
  content: " »";
}

.case-copy blockquote cite::before {
  content: "— ";
}

.case-copy blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.66;
}

.case-copy .text-link {
  margin-top: 30px;
}

.cases-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 26px;
  margin-top: 58px;
  border-top: 1px solid var(--line-dark);
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cases-also {
  margin: 0;
  opacity: 0.55;
}

.cases-footer > a {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}

.cases-footer > a:hover {
  color: var(--clay);
}

.cases-controls {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.cases-controls button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line-dark);
  font-size: 15px;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

.cases-controls button:hover {
  color: var(--paper);
  background: var(--burgundy);
  border-color: var(--burgundy);
}

.section-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -4px;
  color: var(--burgundy);
}

.section-heading h2 {
  font-size: 96px;
}

.section-heading > p:last-child {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.55;
}

.results-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(56px, 8vw, 130px);
  margin-top: 98px;
}

.process-proof {
  border-top: 1px solid var(--ink);
}

.proof-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: start;
  gap: 28px;
  min-height: 150px;
  padding: 28px 0;
  border-bottom: 1px solid var(--ink);
}

.proof-item > span {
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  color: var(--ivory);
  background: var(--burgundy);
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 10px;
}

.proof-item h3 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 1;
}

.proof-item p {
  max-width: 470px;
  margin: 13px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

.report-stage {
  position: relative;
  min-height: 700px;
  perspective: 1200px;
}

.report-label {
  position: absolute;
  top: -42px;
  right: 0;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 10px;
  text-transform: uppercase;
}

.report-sheet {
  position: absolute;
  width: min(78%, 520px);
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--blush);
  border: 1px solid var(--ink);
  box-shadow: 16px 18px 0 rgba(26, 22, 20, 0.12);
  transition: transform 300ms ease;
}

.report-sheet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.report-back {
  top: 2%;
  right: 1%;
  transform: rotate(6deg) translateZ(-40px);
}

.report-front {
  bottom: 8%;
  left: 1%;
  transform: rotate(-5deg) translateZ(20px);
}

.report-stage:hover .report-back {
  transform: rotate(3deg) translate(8px, -8px) translateZ(-40px);
}

.report-stage:hover .report-front {
  transform: rotate(-2deg) translate(-8px, 8px) translateZ(20px);
}

.report-stamp {
  position: absolute;
  z-index: 3;
  right: 2%;
  bottom: 2%;
  display: grid;
  place-items: center;
  width: 118px;
  aspect-ratio: 1;
  color: var(--blush);
  background: var(--burgundy);
  border: 2px solid var(--burgundy-dark);
  border-radius: 50%;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(9deg);
}

.data-note {
  max-width: 780px;
  margin: 56px 0 0;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 9px;
  line-height: 1.6;
  text-transform: uppercase;
  opacity: 0.58;
}

.about-section {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) 1.18fr;
  min-height: 820px;
  color: var(--ivory);
  background: var(--burgundy);
  border-top: 1px solid var(--ink);
}

.about-portrait {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background: var(--blush);
  border-right: 1px solid var(--line-light);
}

/* Photo pleine et non plus portrait detoure : on remplit la colonne. Le
   cadrage est decale a droite pour garder Jennifer dans le champ, l'image
   etant plus large que la colonne une fois mise a l'echelle. */
.about-portrait img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

.about-copy {
  align-self: center;
  max-width: 900px;
  padding: clamp(54px, 7vw, 118px);
}

.about-copy h2 {
  font-size: 76px;
}

/* Lettre ouverte : mesure confortable et interlignage genereux. */
.about-copy > p {
  max-width: 640px;
  margin: 34px 0 0;
  color: rgba(244, 237, 226, 0.88);
  font-size: 19px;
  line-height: 1.78;
}

.text-link-light {
  margin-top: 38px;
}

.offers-section {
  padding: 136px 0;
  background: var(--ivory);
}

.offers-heading {
  display: block;
}

.offers-heading h2 {
  max-width: 1000px;
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 80px;
}

.offer-card {
  display: flex;
  flex-direction: column;
  min-height: 690px;
  padding: 30px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 4px;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.offer-card:hover {
  transform: translateY(-7px);
  box-shadow: 10px 10px 0 var(--ink);
}

.offer-featured {
  color: var(--ivory);
  background: var(--burgundy);
  border-color: var(--burgundy-dark);
}

.offer-featured:hover {
  box-shadow: 10px 10px 0 var(--burgundy-dark);
}

.offer-topline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid currentColor;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 9px;
  text-transform: uppercase;
}

.offer-card h3 {
  min-height: 150px;
  margin: 34px 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
}

.offer-intro {
  min-height: 86px;
  margin: 20px 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 24px;
  font-style: italic;
  line-height: 1.22;
}

.offer-card ul {
  display: grid;
  gap: 13px;
  padding: 26px 0 0;
  margin: 0;
  border-top: 1px solid currentColor;
  list-style: none;
}

.offer-card li {
  position: relative;
  padding-left: 21px;
  font-size: 14px;
  line-height: 1.45;
}

.offer-card li::before {
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--clay);
  content: "+";
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-weight: 500;
}

.offer-featured li::before {
  color: var(--blush);
}

/* Le prix passe en bas de carte, juste avant le lien : demande de Jennifer. */
.offer-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
  margin: auto 0 0;
}

.offer-price span {
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 9px;
  text-transform: uppercase;
  opacity: 0.6;
}

.offer-price strong {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 31px;
  font-weight: 400;
  line-height: 1;
  text-align: right;
}

/* Duree sous le prix (consulting = 3 mois, cf. CGV art. 3). */
.offer-price strong small {
  display: block;
  margin-top: 8px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.offer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid currentColor;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 10px;
  text-transform: uppercase;
}

.offer-link:hover {
  color: var(--clay);
}

.offer-featured .offer-link:hover {
  color: var(--blush);
}

/* Le bouton reprend le bordeaux : la section ayant perdu son aplat colore,
   c'est lui qui porte desormais la couleur du bloc. */
.contact-section .button-dark {
  background: var(--burgundy);
  border-color: var(--burgundy);
}

.contact-section .button-dark:hover {
  color: var(--burgundy);
  background: var(--paper);
  border-color: var(--paper);
}

.contact-section {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 86svh;
  padding: 120px 32px;
  color: var(--ink);
  background: var(--blush);
  border-top: 1px solid var(--ink);
  overflow: hidden;
}

.contact-copy {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  text-align: center;
}

/* Le titre porte maintenant une phrase entiere et non plus une accroche
   courte : a 128px il debordait de la section, qui est en overflow: hidden. */
.contact-copy h2 {
  max-width: 1040px;
  margin: 0 auto;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.08;
}

.contact-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: 32px auto;
  font-size: 18px;
  line-height: 1.68;
}

/* ---------- Formulaire de contact ---------- */

.contact-form {
  max-width: 640px;
  margin: 40px auto 0;
  text-align: left;
}

/* Pot de miel : masque a l'oeil et retire du flux, mais toujours dans le DOM
   pour que les robots le remplissent et se trahissent. */
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
}

.form-field label {
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
}

.form-field label span {
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

/* Filets plutot que boites, comme le reste du site. */
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 2px;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: inherit;
  font-size: 17px;
  transition: border-color 200ms ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--burgundy);
  border-bottom-width: 2px;
  padding-bottom: 11px;
}

.form-field input::placeholder {
  color: currentColor;
  opacity: 0.32;
}

/* Signale les champs invalides seulement apres une tentative d'envoi. */
.contact-form.is-submitted :invalid {
  border-bottom-color: var(--burgundy);
}

.contact-form button[type="submit"] {
  margin-top: 6px;
}

.contact-form button[disabled] {
  cursor: progress;
  opacity: 0.55;
}

.form-status {
  min-height: 22px;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.form-status.is-error {
  color: var(--burgundy);
}

.contact-alt {
  margin: 26px 0 0;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.contact-alt a {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}

.contact-alt a:hover {
  color: var(--burgundy);
}

.contact-symbols span {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 92px;
  aspect-ratio: 1;
  border: 1px solid var(--burgundy);
  border-radius: 50%;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 34px;
  animation: symbol-float 5s ease-in-out infinite;
}

.contact-symbols span:nth-child(1) { top: 13%; left: 7%; }
.contact-symbols span:nth-child(2) { top: 20%; right: 8%; animation-delay: -1s; }
.contact-symbols span:nth-child(3) { right: 16%; bottom: 9%; animation-delay: -2s; }
.contact-symbols span:nth-child(4) { bottom: 12%; left: 12%; animation-delay: -3s; }

@keyframes symbol-float {
  50% { transform: translateY(-14px) rotate(7deg); }
}

.floating-cta {
  position: fixed;
  z-index: 90;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  color: var(--ivory);
  background: var(--ink);
  border: 1px solid var(--ivory);
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 10px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.floating-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 32px;
  padding: 54px max(32px, calc((100vw - 1400px) / 2));
  color: var(--ivory);
  background: var(--ink);
  border-top: 1px solid var(--line-light);
}

.footer-brand {
  color: var(--ivory);
}

.site-footer > p {
  margin: 0;
  color: rgba(244, 237, 226, 0.62);
  font-size: 13px;
}

.footer-links {
  display: flex;
  gap: 22px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 9px;
  text-transform: uppercase;
}

.site-footer > small {
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid var(--line-light);
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.16em;
  font-size: 9px;
  text-transform: uppercase;
  opacity: 0.55;
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (max-width: 1100px) {
  :root {
    --shell: calc(100vw - 40px);
  }

  .hero-person {
    right: -14vw;
    width: 67vw;
    opacity: 0.92;
  }

  .hero-content {
    padding-top: 150px;
  }

  .hero-copy {
    max-width: 430px;
  }

  .title-line {
    font-size: 122px;
  }

  /* taille geree par le clamp de .title-subline, qui garantit une seule ligne */

  .hero-note {
    right: 24px;
  }

  .results-layout {
    grid-template-columns: 1fr;
  }

  .report-stage {
    min-height: 650px;
  }

  .about-section {
    grid-template-columns: 0.7fr 1.3fr;
  }

  .story-intro h2 {
    font-size: 74px;
  }

  .story-panel h3 {
    font-size: 68px;
  }

  .section-heading h2,
  .about-copy h2 {
    font-size: 70px;
  }

  .contact-copy h2 {
    font-size: 88px;
  }

  /* minmax(0, 1fr) et pas 1fr : sinon la largeur mini du titre elargit la
     piste et la carte deborde du viewport. */
  .offers-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer-card {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    column-gap: 50px;
    min-height: 0;
  }

  .offer-topline,
  .offer-price,
  .offer-link {
    grid-column: 1 / -1;
  }

  .offer-card h3,
  .offer-intro {
    min-height: 0;
  }

  .offer-card ul {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: start;
    margin-top: 34px;
  }

  .offer-link {
    margin-top: 36px;
  }
}

@media (max-width: 760px) {
  :root {
    --shell: calc(100vw - 32px);
    --header-height: 68px;
  }

  html,
  body {
    overscroll-behavior-x: none;
  }

  body {
    touch-action: pan-y;
  }

  .site-header,
  .site-header.is-scrolled {
    top: 0;
    grid-template-columns: 1fr auto;
    width: 100%;
    height: var(--header-height);
    padding: 0 16px;
    color: var(--ivory);
    background: rgba(101, 47, 51, 0.9);
    border: 0;
    border-bottom: 1px solid var(--line-light);
    backdrop-filter: blur(16px);
    transform: none;
    left: 0;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
  }

  .main-nav {
    position: absolute;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    padding: 12px 16px 22px;
    color: var(--ivory);
    background: var(--burgundy);
    border-bottom: 1px solid var(--line-light);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .main-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .main-nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--line-light);
  }

  .header-social {
    display: none;
  }

  .hero {
    align-items: start;
    min-height: 96svh;
  }

  .hero-content {
    width: var(--shell);
    padding: 120px 0 0;
  }

  .eyebrow span {
    display: block;
    margin: 7px 0 0;
  }

  .title-line {
    font-size: 64px;
  }

  .title-subline {
    line-height: 1.05;
  }

  .hero-copy {
    max-width: 92%;
    padding-top: 24px;
    margin-top: 30px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
  }

  .hero-person {
    right: -8%;
    bottom: 0;
    width: 108%;
    height: 43%;
    opacity: 1;
    transform: none;
  }

  .hero-note {
    display: none;
  }

  .scroll-cue {
    display: none;
  }

  .marquee-track {
    padding: 12px 0;
  }

  .marquee-track span {
    font-size: 26px;
  }

  .story-scroll {
    height: auto !important;
  }

  .story-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .story-track {
    display: block;
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .story-panel,
  .story-intro {
    justify-content: space-between;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 520px;
    height: auto;
    padding: 48px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .story-intro {
    justify-content: center;
    min-height: 650px;
  }

  .story-intro h2,
  .section-heading h2,
  .about-copy h2,
  .contact-copy h2 {
    font-size: 48px;
  }

  /* Sans cela le second titre arrive a 45px et fait jeu egal avec le premier. */
  .story-intro-second {
    font-size: 30px;
  }

  .story-panel h3 {
    font-size: 50px;
  }

  .panel-number {
    font-size: 90px;
  }

  .results-section,
  .offers-section {
    padding: 82px 0;
  }

  .section-heading {
    display: block;
  }

  .section-heading > p:last-child {
    margin-top: 26px;
  }

  .results-layout {
    gap: 56px;
    margin-top: 62px;
  }

  .proof-item {
    grid-template-columns: 48px 1fr;
    gap: 18px;
  }

  .proof-item h3 {
    font-size: 34px;
  }

  .report-stage {
    min-height: 480px;
  }

  .report-sheet {
    width: 82%;
  }

  .report-stamp {
    width: 90px;
    font-size: 9px;
  }

  .about-section {
    grid-template-columns: 1fr;
  }

  .about-portrait {
    min-height: 620px;
    border-right: 0;
    border-bottom: 1px solid var(--line-light);
  }

  .about-copy {
    padding: 70px 20px;
  }

  .offers-grid {
    margin-top: 52px;
  }

  .offer-card {
    display: flex;
    min-height: 640px;
    padding: 24px;
  }

  /* "management" en 44px mesure 356px de large : la carte depassait le
     viewport et se faisait rogner a droite. */
  .offer-card h3 {
    min-height: 110px;
    font-size: 34px;
  }

  .offer-price strong {
    font-size: 22px;
  }

  .offer-card ul {
    margin-top: 0;
  }

  .contact-section {
    min-height: 760px;
    padding: 90px 20px;
  }

  .contact-copy h2 {
    font-size: 40px;
  }

  .contact-symbols span {
    width: 62px;
    font-size: 23px;
    opacity: 0.55;
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding: 46px 20px;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  /* ---------- Cas clients en mobile ---------- */

  .results-cases {
    padding-top: 62px;
  }

  .cases {
    margin-top: 40px;
  }

  /* Onglets en bande defilante plutot qu'en retour a la ligne desordonne. */
  .cases-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cases-tabs::-webkit-scrollbar {
    display: none;
  }

  .cases-tabs button {
    flex: none;
    padding: 0 0 14px;
    margin-right: 22px;
    font-size: 11px;
  }

  .cases-stage {
    padding-top: 34px;
  }

  /* Une seule colonne : les captures au-dessus, le recit en dessous. */
  .case {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case-shots {
    gap: 10px;
  }

  .case-copy h3 {
    font-size: 30px;
  }

  .case-what {
    font-size: 15px;
  }

  .case-copy blockquote {
    padding-left: 16px;
    margin-top: 26px;
  }

  .case-copy blockquote p {
    font-size: 19px;
  }

  .cases-footer {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 38px;
  }

  .cases-controls {
    width: 100%;
    margin-left: 0;
  }

  .cases-controls button {
    flex: 1;
    width: auto;
  }

  /* ---------- Confort tactile ---------- */

  .text-link {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .cases-footer > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .footer-links {
    gap: 4px 22px;
  }

  .footer-links a {
    display: inline-block;
    padding: 13px 0;
  }

  .contact-form {
    margin-top: 32px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-field input,
  .form-field textarea {
    padding: 14px 2px;
    font-size: 16px; /* sous 16px, iOS zoome automatiquement au focus */
  }

  .floating-cta {
    right: 12px;
    bottom: 12px;
    padding: 13px 15px;
  }
}

@media (max-width: 390px) {
  .title-line {
    font-size: 54px;
  }

  /* idem : le clamp suffit */

  .contact-copy h2 {
    font-size: 32px;
  }
}

@media (max-width: 370px) {
  .contact-copy h2 {
    font-size: 30px;
  }
}

@media (max-width: 340px) {
  .contact-copy h2 {
    font-size: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .story-scroll {
    height: auto !important;
  }

  .story-sticky {
    position: relative;
    height: auto;
  }

  .story-track {
    display: block;
    width: 100%;
    transform: none !important;
  }

  .story-panel,
  .story-intro {
    justify-content: space-between;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 600px;
  }

  .story-intro {
    justify-content: center;
  }
}

/* ---------- Pages legales (CGV, Mentions legales) ---------- */
.legal-page {
  padding: calc(var(--header-height) + 64px) 0 120px;
  background: var(--paper);
  min-height: 100vh;
}

.legal-page .section-shell {
  max-width: 760px;
  margin: 0 auto;
}

.legal-eyebrow {
  display: block;
  margin-bottom: 16px;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
}

.legal-page h1 {
  margin: 0 0 12px;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
}

.legal-updated {
  margin: 0 0 56px;
  font-size: 14px;
  opacity: 0.6;
}

.legal-page h2 {
  margin: 48px 0 16px;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  color: var(--burgundy);
}

.legal-page p,
.legal-page li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}

.legal-page p {
  margin: 0 0 16px;
}

.legal-page ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-page li {
  margin-bottom: 8px;
}

.legal-page a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page strong {
  font-weight: 500;
  color: var(--burgundy-dark);
}

.legal-nav {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
}

@media (max-width: 760px) {
  .legal-page {
    padding: calc(var(--header-height) + 40px) 0 88px;
  }

  .legal-page .section-shell {
    width: calc(100vw - 48px);
  }
}