/* ==========================================================================
   Kimi Tsion Consulting · site vitrine one page
   Vert anglais profond (#0A1A16 / #0C221C), crème (#EFEBE3), accent sauge.
   Titrage Cormorant Garamond, labeur Helvetica.
   ========================================================================== */

:root {
  --ink: #0A1A16;
  --ink-alt: #0C221C;
  --cream: #EFEBE3;
  --sage: #8FBBA6;
  --mist: #C9D9CF;
  --pale: #DCE5DF;
  --paper-ink: #16241F;
  --serif: "Cormorant Garamond", Georgia, serif;
}

/* --------------------------------------------------------------- base --- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

::selection { background: #2E6B52; color: #F4F1EA; }

a { color: var(--cream); text-decoration: none; }
a:hover { color: var(--sage); }

h1, h2, h3, p, ul { margin: 0; }

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

/* `clip` rather than `hidden`: an ancestor with `overflow: hidden` would
   neutralise the sticky report sheet in section IV. */
.page { background: var(--ink); overflow-x: clip; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 44px; }

.serif { font-family: var(--serif); }

.eyebrow {
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--sage);
}

.label {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .45);
}

.rule-top { border-top: 1px solid rgba(239, 235, 227, .1); }
.rule-bottom { border-bottom: 1px solid rgba(239, 235, 227, .1); }

/* --------------------------------------------------------- révélations --- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s cubic-bezier(.16, .84, .3, 1),
              transform 1.1s cubic-bezier(.16, .84, .3, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-seq-item] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .85s cubic-bezier(.16, .84, .3, 1),
              transform .85s cubic-bezier(.16, .84, .3, 1);
}
[data-seq-item].is-in { opacity: 1; transform: none; }

@keyframes ktc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.72); }
}

@keyframes ktc-halo {
  0% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* ---------------------------------------------------------------- nav --- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 26px 0;
  border-bottom: 1px solid rgba(239, 235, 227, 0);
  transition: background .5s ease, border-color .5s ease, padding .5s ease;
}

.nav__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.nav__brand { display: flex; align-items: center; gap: 13px; flex: none; }
.nav__mark { height: 27px; width: auto; }
.nav__divider { display: block; width: 1px; height: 26px; background: rgba(239, 235, 227, .22); }
.nav__wordmark { display: flex; flex-direction: column; line-height: 1.05; }

.nav__wordmark-name {
  font-size: 13.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__wordmark-sub {
  font-size: 7.5px;
  letter-spacing: .46em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .55);
  margin-top: 5px;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  flex: none;
}

.nav__link {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .72);
  white-space: nowrap;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav__link:hover { color: var(--cream); border-bottom-color: var(--sage); }

.nav__cta {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid rgba(239, 235, 227, .28);
  padding: 13px 22px;
  color: var(--cream);
  white-space: nowrap;
}
.nav__cta:hover {
  color: var(--cream);
  border-color: rgba(239, 235, 227, .7);
  background: rgba(239, 235, 227, .06);
}

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

.btn-solid {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--cream);
  color: var(--ink);
  padding: 19px 34px;
}
.btn-solid:hover { background: #FFFFFF; color: var(--ink); }

.btn-ghost {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid rgba(239, 235, 227, .3);
  padding: 19px 34px;
}
.btn-ghost:hover { border-color: rgba(239, 235, 227, .75); }

/* --------------------------------------------------------- parallaxes --- */

.parallax {
  position: absolute;
  inset: -14% 0 -14% 0;
  background-size: cover;
  will-change: transform;
}

.veil { position: absolute; inset: 0; }

/* ---------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(239, 235, 227, .1);
}

.hero__bg {
  background-image: url("assets/img-5250.jpg");
  background-position: center 42%;
  filter: saturate(.62) contrast(1.03) brightness(.92);
}

.hero__veil {
  background: linear-gradient(180deg,
    rgba(10, 26, 22, .7) 0%,
    rgba(10, 26, 22, .5) 40%,
    rgba(10, 26, 22, .95) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 190px 44px 96px;
  width: 100%;
}

.hero__kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 38px; }

.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(46px, 5.6vw, 86px);
  line-height: 1.06;
  letter-spacing: -.015em;
  max-width: 16em;
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: rgb(201, 217, 207); }

.hero__lede-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-top: 52px;
}

.hero__lede {
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.85;
  color: rgba(239, 235, 227, .72);
  text-wrap: pretty;
}

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1px;
  background: rgba(239, 235, 227, .13);
  margin-top: 78px;
  border-top: 1px solid rgba(239, 235, 227, .13);
}

.fact { background: var(--ink); padding: 28px 30px 26px; }

.fact__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

.fact__meta {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .5);
  margin-top: 10px;
}

/* ------------------------------------------------------- I · le constat --- */

.constat { padding: 190px 0 170px; border-bottom: 1px solid rgba(239, 235, 227, .1); }

.constat__grid {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(320px, 1.28fr);
  gap: 96px;
  align-items: start;
}

.constat__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.14;
  margin: 26px 0 0;
}

.constat__sub {
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(239, 235, 227, .66);
  margin: 30px 0 0;
  max-width: 34ch;
  text-wrap: pretty;
}

.constat__lede {
  font-family: var(--serif);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.5;
  font-weight: 300;
  margin: 0 0 44px;
  color: var(--pale);
  text-wrap: pretty;
}

.constat__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1px;
  background: rgba(239, 235, 227, .13);
  border-top: 1px solid rgba(239, 235, 227, .13);
  border-bottom: 1px solid rgba(239, 235, 227, .13);
}

.constat__card { background: var(--ink); padding: 30px; }
.constat__num { font-size: 11px; letter-spacing: .24em; color: rgba(143, 187, 166, .85); }
.constat__text {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(239, 235, 227, .78);
  margin: 14px 0 0;
}

/* --------------------------------------------------------- II · l'offre --- */

.offre { padding: 190px 0 0; position: relative; }

.offre__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(239, 235, 227, .13);
  padding-bottom: 34px;
}

.offre__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.08;
  margin: 24px 0 0;
}
.offre__title em { font-style: italic; }

.offre__claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.5;
  color: var(--mist);
  max-width: 26ch;
}

.offre__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 80px;
  padding: 64px 0 96px;
}

.offre__principle {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.45;
  font-weight: 300;
  margin: 20px 0 0;
}

.offre__principle-note {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(239, 235, 227, .6);
  margin: 20px 0 0;
}

.list-rules { display: grid; gap: 0; margin-top: 20px; }

.list-rules > div {
  padding: 16px 0;
  border-bottom: 1px solid rgba(239, 235, 227, .11);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(239, 235, 227, .86);
}

/* bande citation */

.band {
  position: relative;
  height: 58vh;
  min-height: 380px;
  overflow: hidden;
  border-top: 1px solid rgba(239, 235, 227, .1);
  border-bottom: 1px solid rgba(239, 235, 227, .1);
}

.band__bg {
  inset: -16% 0 -16% 0;
  background-image: url("assets/img-5240.jpg");
  background-position: center 45%;
  filter: saturate(.55) contrast(1.04) brightness(.86);
}

.band__veil {
  background: linear-gradient(90deg,
    rgba(10, 26, 22, .95) 0%,
    rgba(10, 26, 22, .6) 62%,
    rgba(10, 26, 22, .85) 100%);
}

.band__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.quote { display: flex; align-items: flex-start; gap: clamp(18px, 2.4vw, 38px); }

.quote__mark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(86px, 10vw, 170px);
  line-height: .72;
  color: rgba(143, 187, 166, .5);
  flex: none;
  user-select: none;
}

.quote__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 3.1vw, 44px);
  line-height: 1.35;
  max-width: 22ch;
}

/* ------------------------------------------------------ III · méthode --- */

.methode { padding: 190px 0 170px; border-bottom: 1px solid rgba(239, 235, 227, .1); }

.methode__head { max-width: 52ch; }

.methode__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.1;
  margin: 24px 0 0;
}

.curve { position: relative; margin: 110px 0 0; height: 2500px; }

.curve__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.step {
  position: absolute;
  width: min(420px, 36vw);
}

.step--right {
  left: 82%;
  transform: translate(-100%, -50%);
  padding-right: 54px;
  text-align: right;
}

.step--left {
  left: 18%;
  transform: translate(0, -50%);
  padding-left: 54px;
  text-align: left;
}

.step--optional {
  left: 18%;
  top: 2380px;
  transform: translate(0, -30px);
  width: min(440px, 38vw);
  padding-left: 70px;
  text-align: left;
}

.step__node {
  position: absolute;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(239, 235, 227, .3);
  background: var(--ink);
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
}

.step--right .step__node { right: -7px; }
.step--left .step__node { left: -7px; }

.step--optional .step__node {
  left: -8px;
  top: 30px;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border-style: dashed;
  border-color: rgba(239, 235, 227, .45);
}

.step__body {
  opacity: .14;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s ease;
}
.step__body.is-on { opacity: 1; transform: none; }

.step__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  justify-content: flex-start;
}

.curve:not(.is-compact) .step--right .step__row { justify-content: flex-end; }

.step__badge {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  border: 1px solid rgba(143, 187, 166, .35);
  padding: 5px 11px;
  white-space: nowrap;
}

.step__badge--optional {
  color: rgba(239, 235, 227, .72);
  border: 1px dashed rgba(239, 235, 227, .42);
}

.step__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 2.2vw, 31px);
  line-height: 1.15;
}
.step--optional .step__title { color: var(--cream); }

.step__text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(239, 235, 227, .62);
  margin: 12px 0 0;
}

/* repli en liste verticale sous 900 px (piloté par main.js) */
.curve.is-compact { height: auto; }
.curve.is-compact .curve__svg { display: none; }
.curve.is-compact .step {
  position: relative;
  left: 0;
  /* Chaque etape porte un style="top:NNNpx" en ligne (sa place sur la
     courbe en S du desktop). Un style en ligne bat la feuille de style :
     sans !important, les etapes gardent leur decalage et laissent 476 px
     de vide entre chacune une fois empilees. */
  top: 0 !important;
  transform: none;
  width: auto;
  text-align: left;
  padding: 0 0 54px 28px;
  border-left: 1px solid rgba(239, 235, 227, .15);
}
.curve.is-compact .step__node { display: none; }

/* Sur la courbe, les etapes alternent gauche/droite et le badge passe a
   l exterieur : l ordre badge/titre est donc inverse une fois sur deux dans
   le HTML. Empilees en liste, cette alternance ne se lit plus comme un
   miroir mais comme une incoherence. On remet le badge devant partout. */
.curve.is-compact .step__row {
  /* Empilees, les etapes doivent avoir la meme cadence. En ligne, un titre
     court tient a cote de son badge et un titre long passe dessous : la
     colonne supprime cette loterie. */
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.curve.is-compact .step__badge { order: -1; }

.methode__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 80px;
  margin-top: 110px;
}

.methode__lede {
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.5;
  font-weight: 300;
  margin: 20px 0 0;
  color: var(--pale);
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.chip {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  border: 1px solid rgba(239, 235, 227, .2);
  padding: 9px 16px;
  color: rgba(239, 235, 227, .82);
}

.methode__grid-note {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(239, 235, 227, .6);
  margin: 18px 0 26px;
}

.grid-questions { display: grid; gap: 0; border-top: 1px solid rgba(239, 235, 227, .11); }

.grid-questions > div {
  display: flex;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(239, 235, 227, .11);
}

.grid-questions span:first-child {
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(143, 187, 166, .8);
  width: 22px;
  flex: none;
  padding-top: 4px;
}

.grid-questions span:last-child { font-size: 15px; line-height: 1.6; }

/* ------------------------------------------------------ IV · livrable --- */

.livrable {
  padding: 170px 0 150px;
  border-bottom: 1px solid rgba(239, 235, 227, .1);
  background: var(--ink-alt);
}

.livrable__head {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(239, 235, 227, .12);
  padding-bottom: 30px;
}

.livrable__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.1;
  margin: 22px 0 0;
}

.livrable__sub {
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(239, 235, 227, .6);
  max-width: 38ch;
}

.livrable__grid {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(320px, 1fr);
  gap: clamp(40px, 6vw, 96px);
  margin-top: 70px;
  align-items: start;
}

.sheet-wrap { position: sticky; top: 96px; }
.sheet-outer { position: relative; width: 100%; }

.sheet {
  position: relative;
  width: 400px;
  height: 536px;
  overflow: hidden;
  transform-origin: top left;
  background: var(--cream);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}

.sheet__page {
  position: absolute;
  inset: 0;
  padding: 30px 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.16, .84, .3, 1),
              transform .7s cubic-bezier(.16, .84, .3, 1);
}
.sheet__page.is-on { opacity: 1; transform: none; }

.sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sheet__kicker {
  font-size: 7.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(22, 36, 31, .45);
  overflow-wrap: anywhere;
}

.sheet__folio { font-size: 7.5px; letter-spacing: .14em; color: rgba(22, 36, 31, .4); }
.sheet__hr { height: 1px; background: rgba(22, 36, 31, .12); }

.sheet__title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--paper-ink);
}

.sheet__lede { font-size: 9.5px; line-height: 1.7; color: rgba(22, 36, 31, .72); }

.sheet__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(22, 36, 31, .1);
}
.sheet__row-num { font-size: 7.5px; letter-spacing: .14em; color: rgba(22, 36, 31, .4); width: 14px; }
.sheet__row-text { font-size: 10px; line-height: 1.5; color: var(--paper-ink); }

.sheet__foot {
  margin-top: auto;
  font-size: 7.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(22, 36, 31, .35);
}

.sheet__services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  margin-top: 2px;
}
.sheet__services > div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  color: rgba(22, 36, 31, .8);
}
.sheet__bullet { width: 4px; height: 4px; background: rgba(22, 36, 31, .4); }

.sheet__pull { margin-top: 6px; padding: 12px 14px; background: rgba(22, 36, 31, .045); }
.sheet__pull div { font-size: 9.5px; line-height: 1.65; color: rgba(22, 36, 31, .8); }

.sheet__stats { margin-top: auto; display: flex; gap: 16px; }
.sheet__stats div {
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(22, 36, 31, .45);
}

/* fiche d'opportunité : colonne de libellés à 88 px pour que
   « Recommandation » ne chevauche pas le texte */
.sheet__field {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(22, 36, 31, .1);
}
.sheet__field-label {
  font-size: 7.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(22, 36, 31, .45);
  overflow-wrap: anywhere;
}
.sheet__field-value { font-size: 9.5px; line-height: 1.5; color: var(--paper-ink); }

.sheet__tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sheet__tag {
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(22, 36, 31, .25);
  padding: 4px 8px;
  color: rgba(22, 36, 31, .65);
}

.sheet__group-label {
  font-size: 7.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(22, 36, 31, .45);
  overflow-wrap: anywhere;
}

.sheet__action {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(22, 36, 31, .1);
}
.sheet__action span:first-child { font-size: 9.5px; color: var(--paper-ink); }
.sheet__action span:last-child {
  font-size: 7.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(22, 36, 31, .45);
  white-space: nowrap;
}

.sheet__dots { display: flex; gap: 6px; margin-top: 18px; justify-content: center; }
.sheet__dots span {
  width: 22px;
  height: 1px;
  background: rgba(239, 235, 227, .16);
  transition: background .4s ease;
}
.sheet__dots span.is-on { background: rgba(239, 235, 227, .5); }

.chap {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 0 36px 30px;
  border-left: 1px solid rgba(239, 235, 227, .12);
  opacity: .32;
  transition: opacity .6s ease;
}
.chap.is-on { opacity: 1; }

.chap__meta { display: flex; align-items: baseline; gap: 14px; }
.chap__num { font-size: 10.5px; letter-spacing: .2em; color: var(--sage); }
.chap__tag {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .4);
}

.chap__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 2.2vw, 30px);
  line-height: 1.2;
  margin: 16px 0 0;
}

.chap__text {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(239, 235, 227, .62);
  margin: 14px 0 0;
  max-width: 42ch;
}

/* ----------------------------------------------------- V · l'exécution --- */

.execution { padding: 190px 0 170px; border-bottom: 1px solid rgba(239, 235, 227, .1); }

.execution__head {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(239, 235, 227, .13);
  padding-bottom: 38px;
}

.execution__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.1;
  margin: 24px 0 0;
  max-width: 22ch;
  text-wrap: balance;
}

.execution__lede {
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(239, 235, 227, .66);
  max-width: 46ch;
  text-wrap: pretty;
}

.execution__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: rgba(239, 235, 227, .13);
  border-bottom: 1px solid rgba(239, 235, 227, .13);
}

.volet { background: var(--ink); padding: 44px 38px 48px; }
.volet__meta { display: flex; align-items: baseline; gap: 14px; }
.volet__num { font-size: 10.5px; letter-spacing: .22em; color: var(--sage); }
.volet__dash { display: block; width: 26px; height: 1px; background: rgba(239, 235, 227, .13); }

.volet__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.22;
  margin: 22px 0 0;
}

.volet__text {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(239, 235, 227, .66);
  margin: 18px 0 0;
  text-wrap: pretty;
}

.execution__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  margin-top: 70px;
}

.execution__claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.55;
  color: var(--mist);
  max-width: 40ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------ VI · le cabinet --- */

.cabinet { padding: 190px 0 170px; border-bottom: 1px solid rgba(239, 235, 227, .1); }

.cabinet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 88px;
  align-items: start;
}

.cabinet__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(239, 235, 227, .14);
}

.cabinet__bg {
  inset: -12% 0 -12% 0;
  background-image: url("assets/cabinet-bureau.jpg");
  background-position: center 38%;
  filter: saturate(.7) contrast(1.02);
}

.cabinet__veil {
  background: linear-gradient(180deg, rgba(10, 26, 22, .16), rgba(10, 26, 22, .42));
}

.cabinet__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.14;
  margin: 24px 0 0;
}

.cabinet__claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.55;
  color: var(--mist);
  margin: 26px 0 0;
}

.cabinet__text {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(239, 235, 227, .66);
  margin: 24px 0 0;
}

.cabinet__skills {
  display: grid;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid rgba(239, 235, 227, .12);
}

.skill { padding: 22px 0; border-bottom: 1px solid rgba(239, 235, 227, .12); }

.skill__title {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
}

.skill__text {
  font-size: 14.5px;
  line-height: 1.75;
  margin: 10px 0 0;
  color: rgba(239, 235, 227, .82);
  text-wrap: pretty;
}

/* ------------------------------------------------------- VII · formule --- */

.formule {
  padding: 190px 0 170px;
  border-bottom: 1px solid rgba(239, 235, 227, .1);
  background: var(--ink-alt);
}

.formule__head { text-align: center; max-width: 44ch; margin: 0 auto; }

.formule__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.12;
  margin: 24px 0 0;
}

.formule__card {
  margin: 64px auto 0;
  max-width: 1000px;
  border: 1px solid rgba(239, 235, 227, .18);
  background: var(--ink);
}

.formule__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1px;
  background: rgba(239, 235, 227, .14);
}

.formule__pane { background: var(--ink); padding: 52px 46px; }

.formule__product {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.2;
  margin: 16px 0 0;
}

.formule__price { display: flex; align-items: baseline; gap: 12px; margin-top: 30px; }

.formule__price-figure {
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 54px);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.formule__price-vat {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .5);
}

/* contre-valeur en direct */

.live {
  margin-top: 20px;
  padding: 13px 16px;
  border: 1px solid rgba(143, 187, 166, .26);
  background: rgba(143, 187, 166, .05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.live__left { display: flex; align-items: baseline; gap: 10px; }

.live__dot {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  flex: none;
  align-self: center;
}
.live__dot span { position: absolute; inset: 0; border-radius: 50%; background: var(--sage); }
.live__dot span:first-child { animation: ktc-pulse 1.9s ease-in-out infinite; }
.live__dot span:last-child { animation: ktc-halo 1.9s ease-out infinite; }

.live__amount {
  font-family: var(--serif);
  font-size: clamp(23px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.live__vat {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .45);
}

.live__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(239, 235, 227, .48);
  font-variant-numeric: tabular-nums;
}

.conditions { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }

.conditions li {
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: 13px;
  align-items: start;
}

.conditions li > span:first-child {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(143, 187, 166, .85);
  margin-top: 8px;
}

.conditions li > span:last-child {
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(239, 235, 227, .62);
}

.conditions .cond-key { color: rgba(239, 235, 227, .9); }

.includes { display: grid; gap: 0; margin-top: 20px; }

.includes > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(239, 235, 227, .11);
  font-size: 14.5px;
}

.includes span:last-child { color: rgba(239, 235, 227, .5); white-space: nowrap; }

.formule__note {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(239, 235, 227, .5);
  margin: 24px 0 0;
}

.formule__cta { display: flex; justify-content: center; margin-top: 44px; }

.btn-solid--compact { display: inline-block; padding: 18px 32px; }

/* ------------------------------------------------------ VIII · contact --- */

.contact { position: relative; overflow: hidden; padding: 0; }

.contact__bg {
  background-image: url("assets/img-5335.jpg");
  background-position: center 55%;
  filter: saturate(.5) contrast(1.05) brightness(.8);
}

.contact__veil {
  background: linear-gradient(180deg, rgba(10, 26, 22, .9), rgba(10, 26, 22, .95));
}

.contact__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 180px 44px 150px;
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(470px, 100%), 1fr));
  gap: clamp(48px, 5vw, 80px);
  align-items: start;
}

.contact__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.08;
  margin: 26px 0 0;
  max-width: 20ch;
}

.contact__lede {
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(239, 235, 227, .66);
  margin: 26px 0 0;
  max-width: 44ch;
}

.contact__coords { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 44px; }

.contact__coord-label {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .45);
}

.contact__coord-value {
  font-family: var(--serif);
  font-size: 22px;
  margin-top: 8px;
  display: block;
}

/* formulaire */

.form {
  border: 1px solid rgba(239, 235, 227, .18);
  background: rgba(10, 26, 22, .6);
  padding: 42px 40px;
}

.form__fields { display: grid; gap: 22px; margin-top: 28px; }

.field { display: grid; gap: 9px; }

.field__label {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .55);
}

.field input,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(239, 235, 227, .28);
  color: var(--cream);
  font-family: inherit;
  font-size: 15px;
  padding: 9px 0;
  outline: none;
}

.field textarea { resize: none; }

/* le prototype supprimait l'outline sans rien remettre : on garde le repos
   identique et on rend seulement le focus visible au clavier */
.field input:focus,
.field textarea:focus { border-bottom-color: var(--sage); }

.field-group { display: grid; gap: 11px; }
.field-group__options { display: flex; gap: 10px; }

.country {
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: .06em;
  padding: 11px 20px;
  cursor: pointer;
  border: 1px solid rgba(239, 235, 227, .22);
  background: transparent;
  color: rgba(239, 235, 227, .78);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.country.is-on { border-color: var(--cream); background: var(--cream); color: var(--ink); }

/* calendrier de prise de rendez-vous, à la Calendly */

.booking {
  border-top: 1px solid rgba(239, 235, 227, .16);
  padding-top: 24px;
  margin-top: 2px;
}

.booking__row {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  transition: gap .3s ease;
}

.booking__month { flex: 0 0 auto; width: min(238px, 100%); }

.booking__month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.booking__month-label {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .03em;
  white-space: nowrap;
}

.booking__nav { display: flex; align-items: center; gap: 4px; }

.booking__arrow {
  background: transparent;
  border: 1px solid rgba(239, 235, 227, .18);
  color: rgba(239, 235, 227, .6);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  width: 24px;
  height: 24px;
  padding: 0;
  transition: color .2s ease, border-color .2s ease;
}
.booking__arrow:hover { color: var(--sage); border-color: rgba(143, 187, 166, .5); }
.booking__arrow:disabled { opacity: .35; cursor: default; }
.booking__arrow:disabled:hover {
  color: rgba(239, 235, 227, .6);
  border-color: rgba(239, 235, 227, .18);
}

.booking__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 14px;
}

.booking__dow {
  text-align: center;
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .32);
  padding-bottom: 3px;
}

.day {
  font-family: inherit;
  font-size: 12px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(239, 235, 227, .22);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.day--open {
  cursor: pointer;
  border-color: rgba(239, 235, 227, .18);
  color: rgba(239, 235, 227, .85);
}

.day--on {
  cursor: pointer;
  border-color: var(--cream);
  background: var(--cream);
  color: var(--ink);
}

.day--blank { border: 0; background: transparent; padding: 0; height: 30px; }

.booking__slots { flex: 0 0 118px; width: 118px; max-width: 118px; }

.booking__slots-label {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .42);
  padding-bottom: 12px;
}

.booking__slots-scroll {
  display: grid;
  gap: 5px;
  max-height: 244px;
  overflow-y: auto;
  padding-right: 6px;
}

/* ne pas déclarer `scrollbar-color` : Chromium basculerait sur le rendu
   natif et la règle ::-webkit-scrollbar de 4 px deviendrait inerte */
.booking__slots-scroll::-webkit-scrollbar { width: 4px; }
.booking__slots-scroll::-webkit-scrollbar-track { background: transparent; }
.booking__slots-scroll::-webkit-scrollbar-thumb { background: rgba(239, 235, 227, .24); }

.slot {
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 8px 6px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(239, 235, 227, .18);
  background: transparent;
  color: rgba(239, 235, 227, .82);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.slot.is-on { border-color: var(--cream); background: var(--cream); color: var(--ink); }

.form__recap { font-family: var(--serif); font-size: 16px; color: var(--mist); }

.form__submit {
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--cream);
  color: var(--ink);
  border: 0;
  padding: 17px 24px;
  cursor: pointer;
  transition: background .2s ease;
}
.form__submit:hover { background: #FFFFFF; }

.form__status { font-size: 12.5px; line-height: 1.6; color: var(--sage); min-height: 1em; }
.form__status[data-tone="error"] { color: #D9A8A0; }

.form__legal { font-size: 11px; line-height: 1.65; color: rgba(239, 235, 227, .38); }

/* -------------------------------------------------------------- footer --- */

.footer { border-top: 1px solid rgba(239, 235, 227, .12); background: var(--ink); }

.footer__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 78px 44px 0;
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.15fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}

.footer__lockup { height: 58px; width: auto; opacity: .9; }

.footer__claim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--mist);
  margin: 30px 0 0;
  max-width: 24ch;
  text-wrap: pretty;
}

.footer__link {
  display: inline-block;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .72);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(239, 235, 227, .22);
  transition: color .25s ease, border-color .25s ease;
}
.footer__link:hover { color: var(--cream); border-bottom-color: var(--sage); }

.footer__rows { border-top: 1px solid rgba(239, 235, 227, .1); }

.footer__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(239, 235, 227, .1);
}

.footer__row dt {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .38);
  white-space: nowrap;
  margin: 0;
}

.footer__row dd { margin: 0; font-size: 15px; color: rgba(239, 235, 227, .78); text-align: right; }
.footer__row dd a { color: var(--cream); }
.footer__row dd a:hover { color: var(--sage); }
.footer__row dd.is-num { font-variant-numeric: tabular-nums; }
.footer__row dd.is-tel a { white-space: nowrap; }

.footer__bar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 44px 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239, 235, 227, .34);
}

/* ---------------------------------------------------------- responsive --- */

/* Les grilles en `repeat(auto-fit, …)` se replient d'elles-mêmes : on
   n'intervient que sur les trois grilles à colonnes fixes, au point où elles
   déborderaient réellement. */

/* Bouton menu : masqué tant que les liens tiennent sur une ligne. */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.nav__burger span {
  display: block;
  height: 1px;
  width: 22px;
  margin: 0 auto;
  background: var(--cream);
  transition: transform .3s ease, opacity .2s ease;
}
.nav--open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1079px) {
  .nav__burger { display: flex; }

  /* Les six liens ne tiennent plus en ligne : ils passent dans un panneau
     déroulant. Positionné en absolu sur .nav (le seul ancêtre positionné),
     donc `top: 100%` suit tout seul la barre quand elle se condense au
     scroll — aucune hauteur à mesurer en JS. */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 44px 32px;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    /* Opaque, pas translucide : le texte de la page defilait derriere
       les liens et les rendait illisibles. */
    background: var(--ink);
    border-bottom: 1px solid rgba(239, 235, 227, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
  }

  .nav--open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__link {
    padding: 17px 0;
    border-bottom: 1px solid rgba(239, 235, 227, .1);
    font-size: 12.5px;
  }
  .nav__link:hover { border-bottom-color: rgba(239, 235, 227, .1); }

  .nav__cta {
    margin-top: 26px;
    text-align: center;
    padding: 16px 22px;
  }
}

@media (max-width: 760px) {
  .nav__links { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 800px) {
  .constat__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .livrable__grid { grid-template-columns: minmax(0, 1fr); }
  /* Empilee, la feuille passe AU-DESSUS des chapitres. Sans collage elle
     defile hors ecran avant meme le premier chapitre : les pages tournaient
     donc sans que personne ne les voie. Collee sous la barre, elle reste
     visible pendant toute la lecture, ce qui est tout l interet de la
     section. fitSheet() plafonne sa hauteur pour laisser la place au texte. */
  .sheet-wrap {
    position: sticky;
    top: 84px;
    /* Bande opaque pleine largeur. La feuille est plafonnee en hauteur, donc
       plus etroite que la colonne : sans ce fond, le texte du chapitre
       defile dans les pixels restes libres a droite d elle. */
    background: var(--ink-alt);
    margin: 0 -24px;
    padding: 10px 24px 18px;
    z-index: 2;
  }
  .chap { min-height: 0; padding-top: 28px; padding-bottom: 28px; opacity: 1; }
}

@media (max-width: 760px) {
  .wrap,
  .nav__inner,
  .hero__inner,
  .contact__inner,
  .footer__grid,
  .footer__bar { padding-left: 24px; padding-right: 24px; }

  .hero__inner { padding-top: 150px; padding-bottom: 72px; }
  .constat, .offre, .methode, .execution, .cabinet, .formule { padding-top: 120px; }
  .constat, .methode, .execution, .cabinet, .formule { padding-bottom: 110px; }
  .livrable { padding: 120px 0 100px; }
  .contact__inner { padding-top: 120px; padding-bottom: 100px; }
  .offre__cols, .methode__cols { gap: 56px; }
  .methode__cols { margin-top: 72px; }
  .formule__pane { padding: 40px 28px; }
  .form { padding: 32px 24px; }
  .footer__grid { padding-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal],
  [data-seq-item],
  .step__body,
  .sheet__page { transition-duration: .001s; }
  .live__dot span { animation: none; }
  .live__dot span:last-child { display: none; }
}