/* =========================================================
   AIS™ — Art Intelligence Stratégique
   Monochrome system · typography as architecture
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Libre+Caslon+Text:ital,wght@0,400;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* monochrome palette */
  --bg:        #0A0A0A;
  --bg-2:      #0E0E0E;
  --paper:     #F4F3F0;
  --paper-ink: #0A0A0A;
  --ink:       #FAFAF8;
  --muted:     #8A8A86;
  --muted-2:   #6A6A66;
  --line:      rgba(250,250,248,0.13);
  --line-2:    rgba(250,250,248,0.07);
  --line-pap:  rgba(10,10,10,0.14);
  --muted-pap: #6E6E68;
  --pap-body:    #33332E;
  --pap-mech-no: #9a988f;
  --pap-mech-d:  #454540;
  --hair-dark:   #4a4a46;
  --hair-pap:    #b8b6ae;
  --bar-bg:      rgba(10,10,10,.92);
  --nav-bg:      rgba(10,10,10,0.72);
  --body-soft:   #C9C9C4;
  --body-soft-2: #C2C2BD;

  /* accent unique — un seul point par page */
  --accent: #7B9EB8;
  /* rouge du mécanisme — réservé à la dette symbolique et à ses marqueurs */
  --signal: #C0362C;

  /* type families */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* measure / layout */
  --maxw: 1180px;
  --pad: clamp(22px, 5vw, 80px);
  --display-weight: 300;
  --serif-tracking: -0.005em;
}

/* ---- direction variants (hero treatment + display serif) ---- */
html[data-dir="2"]{
  --serif: 'Libre Caslon Text', Georgia, serif;
  --display-weight: 400;
  --serif-tracking: 0em;
}
html[data-dir="3"]{
  --serif: 'Cormorant Garamond', Georgia, serif;
  --display-weight: 400;
  --serif-tracking: 0em;
}

*{ box-sizing: border-box; }

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

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.005em;
}

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

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

/* =========================================================
   Shared primitives
   ========================================================= */
.wrap{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

.label{
  font-family: var(--mono);
  font-size: clamp(12px, 1.3vw, 13px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.rule{ height:1px; background: var(--line); border:0; margin:0; }

.serif{ font-family: var(--serif); font-weight: var(--display-weight); letter-spacing: var(--serif-tracking); }

/* display scale */
.d1{ font-family: var(--serif); font-weight: var(--display-weight);
  font-size: clamp(34px, 7.2vw, 104px); line-height: 1.02; letter-spacing: var(--serif-tracking); }
.d2{ font-family: var(--serif); font-weight: var(--display-weight);
  font-size: clamp(30px, 4.6vw, 60px); line-height: 1.04; letter-spacing: var(--serif-tracking); }
.d3{ font-family: var(--serif); font-weight: var(--display-weight);
  font-size: clamp(24px, 3.2vw, 40px); line-height: 1.12; letter-spacing: var(--serif-tracking); }

.lede{
  font-family: var(--serif); font-weight: var(--display-weight);
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.34;
  letter-spacing: var(--serif-tracking);
  color: var(--ink);
  font-style: italic;
}

.body{
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.72;
  color: var(--body-soft);
  max-width: 62ch;
}
.body p{ margin: 0 0 1.3em; }
.body p:last-child{ margin-bottom:0; }
.body strong{ color: var(--ink); font-weight: 500; }

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position: sticky; top:0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
.nav__in{
  max-width: var(--maxw); margin:0 auto; padding-inline: var(--pad);
  height: 68px; display:flex; align-items:center; justify-content: space-between;
}
.brand{
  font-family: var(--serif); font-weight: 400;
  font-size: 21px; letter-spacing: 0.02em;
  display:flex; align-items: baseline; gap: 2px;
}
.brand sup{ font-family: var(--sans); font-size: 9px; top:-0.9em; letter-spacing: 0; }
.nav__links{ display:flex; align-items:center; gap: clamp(18px, 2.6vw, 40px); }
.nav__links a{
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  transition: color .25s ease;
}
.nav__links a:hover{ color: var(--ink); }
.nav__links a.is-active{ color: var(--ink); }

.lang{
  display:flex; gap:0; align-items:center;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  border:1px solid var(--line); border-radius: 999px; overflow:hidden;
}
.lang span, .lang a{ padding: 5px 11px; color: var(--muted-2); cursor: default; }
.lang .on{ background: var(--ink); color: var(--bg); }

.nav__menu-btn{ display:none; }

/* =========================================================
   Section frame
   ========================================================= */
section{ position: relative; }
.sec{ padding-block: clamp(46px, 7.5vh, 104px); }
.sec--tight{ padding-block: clamp(34px, 5vh, 68px); }

/* numbered section header */
.shead{ display:flex; gap: clamp(20px,4vw,64px); align-items: baseline; margin-bottom: clamp(34px,5vh,64px); }
.shead__no{ font-family: var(--mono); font-size: clamp(15px, 1.7vw, 17px); letter-spacing: 0.12em; color: var(--muted); white-space:nowrap; padding-top:6px; }
.shead__title{ flex:1; }

.grid2{ display:grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 72px); }
@media(min-width: 860px){ .grid2{ grid-template-columns: 0.92fr 1.08fr; } }
@media(min-width: 860px){ .grid2--even{ grid-template-columns: 1fr 1fr; } }

/* =========================================================
   Hero — direction 01 (Ledger / editorial)
   ========================================================= */
.hero{ border-bottom: 1px solid var(--line); }
.hero__in{ padding-block: clamp(70px, 16vh, 190px); }
.hero__eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom: clamp(28px,5vh,52px); }
.hero__eyebrow .dot{ width:5px; height:5px; background: var(--accent); border-radius:50%; }
.hero__phrase{ max-width: 17ch; }
.hero__phrase em{ font-style: italic; color: var(--ink); }
.hero__meta{
  margin-top: clamp(34px,6vh,60px);
  display:flex; flex-wrap:wrap; gap: 10px 26px; align-items:center;
}
.hero__sub{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }

/* hero variants: toggled by data-dir */
.hero--2 .hero__in{ text-align:center; }
html[data-dir="2"] .hero__eyebrow{ justify-content:center; }
html[data-dir="2"] .hero__phrase{ margin-inline:auto; max-width: 20ch; }
html[data-dir="2"] .hero__meta{ justify-content:center; }
html[data-dir="2"] .hero__in{ padding-block: clamp(90px, 22vh, 240px); }

/* direction 3 — Cormorant: left-aligned, airier, framed by a hairline + larger scale */
html[data-dir="3"] .hero__phrase{ max-width: 15ch; padding-top: clamp(22px,4vh,40px); border-top:1px solid var(--line); }
html[data-dir="3"] .d1{ font-size: clamp(44px, 8vw, 116px); line-height: 0.96; }
html[data-dir="3"] .hero__in{ padding-block: clamp(78px, 18vh, 210px); }

/* index strip under hero */
.indexstrip{ border-bottom:1px solid var(--line); }
.indexstrip__in{ display:grid; grid-template-columns: 1fr; }
@media(min-width: 760px){ .indexstrip__in{ grid-template-columns: repeat(3, 1fr); } }
.idx{ padding: clamp(24px,4vh,40px) 0; border-top:1px solid var(--line-2); }
@media(min-width:760px){
  .idx{ border-top:0; padding-right: 32px; }
  .idx + .idx{ border-left:1px solid var(--line-2); padding-left: 32px; }
}
.idx__no{ font-family:var(--mono); font-size:12px; color:var(--muted-2); letter-spacing:0.2em; }
.idx__t{ font-family:var(--serif); font-weight:var(--display-weight); font-size: clamp(19px,1.8vw,23px); margin:14px 0 8px; }
.idx__d{ font-size: 13.5px; line-height:1.6; color: var(--muted); max-width: 34ch; }

/* =========================================================
   Statement block
   ========================================================= */
.statement{ }
.statement .d2{ max-width: 20ch; }
.statement__note{ margin-top: 28px; }

/* mechanisms (inflection points) */
.mechs{ display:grid; grid-template-columns:1fr; gap:0; }
.mech{ display:grid; grid-template-columns: 1fr; gap: 10px 40px; padding: clamp(26px,4vh,40px) 0; border-top:1px solid var(--line); }
@media(min-width: 820px){ .mech{ grid-template-columns: 52px 0.85fr 1.15fr; align-items:start; } }
.mech:last-child{ border-bottom:1px solid var(--line); }
.mech__no{ font-family:var(--mono); font-size:12px; color:var(--muted-2); letter-spacing:0.16em; padding-top:6px; }
.mech__t{ font-family:var(--serif); font-weight:var(--display-weight); font-size: clamp(21px,2.3vw,30px); line-height:1.12; }
.mech__d{ font-size:15px; line-height:1.7; color: var(--body-soft-2); max-width:46ch; }

/* =========================================================
   Day in the work — fragments
   ========================================================= */
.day{ background: var(--bg-2); border-block:1px solid var(--line); }
.day__row{ display:grid; grid-template-columns:1fr; gap:8px 40px; padding: clamp(28px,4.5vh,44px) 0; border-top:1px solid var(--line); }
.day__row:first-of-type{ border-top:0; }
@media(min-width: 820px){ .day__row{ grid-template-columns: 168px 1fr; align-items:baseline; } }
.day__time{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--muted); }
.day__text{ font-family:var(--serif); font-weight:var(--display-weight); font-style:italic; font-size: clamp(18px,1.9vw,25px); line-height:1.4; color:var(--ink); max-width:40ch; }

/* =========================================================
   Testimonials
   ========================================================= */
.quotes{ display:grid; grid-template-columns:1fr; gap:0; }
.quote{ padding: clamp(30px,5vh,52px) 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr; gap:18px; }
.quote:last-child{ border-bottom:1px solid var(--line); }
@media(min-width: 860px){ .quote{ grid-template-columns: 1.4fr 0.6fr; gap:48px; } }
.quote__text{ font-family:var(--serif); font-weight:var(--display-weight); font-size: clamp(19px,2vw,26px); line-height:1.42; color:var(--ink); }
.quote__by{ font-family:var(--mono); font-size:12px; line-height:1.7; letter-spacing:0.04em; color:var(--muted); }
.quote__by b{ color: var(--body-soft); font-weight:500; display:block; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; gap: 24px; align-items:baseline; justify-content:space-between;
  padding: clamp(22px,3.4vh,32px) 0; color:var(--ink);
  font-family:var(--serif); font-weight:var(--display-weight);
  font-size: clamp(18px,1.9vw,24px); line-height:1.2;
}
.faq__q:hover .faq__sign{ color:var(--ink); }
.faq__sign{ font-family:var(--mono); font-size:18px; color:var(--muted); transition:color .2s, transform .3s; flex:none; }
.faq__item[open] .faq__sign{ transform: rotate(45deg); color:var(--ink); }
.faq__a{ overflow:hidden; }
.faq__a .body{ padding-bottom: clamp(24px,3.6vh,36px); max-width: 64ch; }
/* V35b — FAQ lisible sur pages paper (bug: --ink blanc sur crème) */
.paper .faq{ border-top-color: var(--line-pap); }
.paper .faq__item{ border-bottom-color: var(--line-pap); }
.paper .faq__q{ color: var(--paper-ink); }
.paper .faq__sign{ color: var(--muted-pap); }
.paper .faq__q:hover .faq__sign,
.paper .faq__item[open] .faq__sign{ color: var(--paper-ink); }
details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }

/* =========================================================
   CTA band
   ========================================================= */
.cta{ border-top:1px solid var(--line); }
.cta__in{ padding-block: clamp(72px,14vh,150px); }
.cta__row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: 40px; }

.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--bg); background:var(--ink);
  padding: 17px 26px; border-radius:999px; border:1px solid var(--ink);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn .arr{ transition: transform .25s ease; }
.btn:hover .arr{ transform: translateX(4px); }

.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--bg); }

.link-arrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.link-arrow:hover{ color:var(--ink); }
.link-arrow .arr{ transition: transform .25s ease; }
.link-arrow:hover .arr{ transform: translateX(4px); }

/* =========================================================
   Footer
   ========================================================= */
.foot{ border-top:1px solid var(--line); padding-block: clamp(48px,8vh,80px); }
.foot__in{ display:grid; grid-template-columns:1fr; gap:36px; }
@media(min-width:760px){ .foot__in{ grid-template-columns: 1fr auto; align-items:end; } }
.foot__tag{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; color:var(--muted-2); line-height:2; text-transform:uppercase; }
.foot__brand{ font-family:var(--serif); font-size: clamp(40px,9vw,120px); font-weight:var(--display-weight); line-height:0.9; }

/* =========================================================
   Light (paper) section modifier
   ========================================================= */
.paper{ background: var(--paper); color: var(--paper-ink); }
.paper .label{ color: var(--muted-pap); }
.paper .body{ color: var(--pap-body); }
.paper .body strong{ color: var(--paper-ink); }
.paper .rule{ background: var(--line-pap); }
.paper .shead__no{ color: var(--muted-pap); }
.paper .mech{ border-color: var(--line-pap); }
.paper .mech__no{ color: var(--pap-mech-no); }
.paper .mech__d{ color: var(--pap-mech-d); }

/* =========================================================
   Page header (cases / start-here)
   ========================================================= */
.phead{ border-bottom:1px solid var(--line); }
.phead__in{ padding-block: clamp(60px,13vh,150px); }
.phead__kicker{ margin-bottom: clamp(24px,4vh,40px); }

/* =========================================================
   Case article
   ========================================================= */
.case{ border-bottom:1px solid var(--line); }
.case__in{ padding-block: clamp(50px,9vh,110px); }
.case__meta{ display:flex; flex-wrap:wrap; gap:8px 28px; margin-bottom: clamp(28px,4vh,44px); }
.case__meta span{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.casebody{ display:grid; grid-template-columns:1fr; gap: clamp(34px,5vh,60px); }
.casblock{ display:grid; grid-template-columns:1fr; gap:14px 40px; padding-top: clamp(26px,4vh,40px); border-top:1px solid var(--line); }
@media(min-width: 820px){ .casblock, .caseblock{ } .casblock{ } }
@media(min-width: 820px){ .casebody .casblock{ grid-template-columns: 200px 1fr; } }
.casblock__h{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); padding-top:4px; }
.casblock__b{ }

.pullquote{ font-family:var(--serif); font-weight:var(--display-weight); font-style:italic; font-size: clamp(24px,3.4vw,42px); line-height:1.22; letter-spacing:var(--serif-tracking); max-width: 22ch; }

/* =========================================================
   Offers (start here)
   ========================================================= */
.offers{ display:grid; grid-template-columns:1fr; gap:0; }
.offer{ display:grid; grid-template-columns:1fr; gap:18px 40px; padding: clamp(34px,5.5vh,56px) 0; border-top:1px solid var(--line); }
.offer:last-child{ border-bottom:1px solid var(--line); }
@media(min-width: 880px){
  .offer{ grid-template-columns: 56px 1fr 0.85fr; align-items:start; }
  .offer__desc{ grid-column: 2 / 4; grid-row: 2; }
}
.offer__no{ font-family:var(--mono); font-size:12px; color:var(--muted-2); letter-spacing:0.16em; padding-top:8px; }
.offer__head{ }
.offer__name{ font-family:var(--serif); font-weight:var(--display-weight); font-size: clamp(26px,3vw,40px); line-height:1.04; }
.offer__price{ font-family:var(--mono); font-size:13px; letter-spacing:0.06em; color:var(--ink); margin-top:14px; }
.offer__price span{ color:var(--muted); }
.offer__desc{ font-size:15px; line-height:1.72; color: var(--body-soft-2); max-width:46ch; }
.offer__desc p{ margin:0 0 1em; }
.offer__desc p:last-child{ margin:0; }

/* =========================================================
   Inflection teaser (home)
   ========================================================= */
.teaser__grid{ display:grid; grid-template-columns:1fr; gap: clamp(22px,3vw,48px); align-items:end; }
@media(min-width: 820px){ .teaser__grid{ grid-template-columns: 1.1fr 0.9fr; } }
.teaser__list{ display:flex; flex-direction:column; gap: 2px; margin-top: 4px; }
.teaser__row{ display:flex; align-items:baseline; gap:16px; padding: 14px 0; border-top:1px solid var(--line-pap); }
.teaser__row:first-child{ border-top:0; }
.teaser__row .n{ font-family:var(--mono); font-size:12px; letter-spacing:0.16em; color: var(--pap-mech-no); }
.teaser__row .t{ font-size: clamp(15px,1.5vw,18px); line-height:1.35; color: var(--pap-body); }

/* =========================================================
   WINDOW — free entry point (start here)
   ========================================================= */
.window{ border:1px solid var(--line); }
.window__in{ display:grid; grid-template-columns:1fr; gap: clamp(24px,3vw,56px); padding: clamp(30px,5vw,60px); align-items:center; }
@media(min-width: 840px){ .window__in{ grid-template-columns: 1fr auto; } }
.window__tag{ display:inline-flex; align-items:center; gap:10px; margin-bottom: 20px; }
.window__tag .free{ font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bg); background:var(--ink); padding:4px 9px; border-radius:999px; }
.window__name{ font-family:var(--serif); font-weight:var(--display-weight); font-size: clamp(30px,4vw,52px); line-height:1; }
.window__desc{ font-size:15px; line-height:1.7; color: var(--body-soft-2); max-width:48ch; margin-top:18px; }
.window__desc b{ color:var(--ink); font-weight:500; }

/* =========================================================
   Application form
   ========================================================= */
.form{ display:grid; grid-template-columns:1fr; gap: clamp(22px,3vw,30px); }
@media(min-width: 720px){ .form{ grid-template-columns: 1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:10px; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-family:var(--mono); font-size:14px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{
  background: transparent; border:0; border-bottom:1px solid var(--line);
  color: var(--ink); font-family: var(--sans); font-size: 16px; line-height:1.5;
  padding: 10px 0; border-radius:0; transition: border-color .25s ease;
}
.field textarea{ resize: vertical; min-height: 92px; }
.field input::placeholder, .field textarea::placeholder{ color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color: var(--ink); }
.field select{ -webkit-appearance:none; appearance:none; cursor:pointer; background-image: linear-gradient(45deg,transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 18px, calc(100% - 8px) 18px; background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; }
.field select option{ background: var(--bg); color: var(--ink); }
.form__actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top: 6px; }
.form__note{ font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--muted-2); max-width:40ch; line-height:1.7; }
.form__msg{ grid-column:1 / -1; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--ink); padding-top:8px; }

/* paper variant of form */
.paper .field input, .paper .field select, .paper .field textarea{ color: var(--paper-ink); border-bottom-color: var(--line-pap); }
.paper .field label{ color: var(--muted-pap); }
.paper .field input:focus, .paper .field select:focus, .paper .field textarea:focus{ border-bottom-color: var(--paper-ink); }
.paper .window{ border-color: var(--line-pap); }
.paper .window__desc{ color: var(--pap-mech-d); }
.paper .window__desc b{ color: var(--paper-ink); }



/* =========================================================
   Reveal on scroll
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ opacity:0; transform: translateY(16px); transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); }
  .js .reveal.in{ opacity:1; transform:none; }
}
@media print{ .reveal{ opacity:1 !important; transform:none !important; } .rev{ display:none !important; } }

/* =========================================================
   Mobile nav
   ========================================================= */
@media(max-width: 720px){
  .nav__links{ gap: 16px; }
  .nav__links a.nav-collapse{ display:none; }
  .lang{ display:none; }
}

/* =========================================================
   RHYTHM — three levers (cadence, not noise)
   ========================================================= */

/* Lever 1 — hero, sequenced entrance ----------------------- */
@media (prefers-reduced-motion: no-preference){
  .js .hero__eyebrow,
  .js .hero__phrase,
  .js .hero__meta,
  .js .hero__cta{
    opacity:0; transform: translateY(22px);
    animation: heroIn .9s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .js .hero__eyebrow{ animation-delay:.08s; }
  .js .hero__phrase{ animation-delay:.24s; }
  .js .hero__meta{ animation-delay:.52s; }
  .js .hero__cta{ animation-delay:.68s; }
}
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* Lever 2 — the mechanism as a full-bleed beat ------------- */
.breath{ min-height: 90vh; display:flex; align-items:center; padding-block: clamp(72px,12vh,140px); }
.breath__in{ width:100%; }
.breath__no{ font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted-2); margin-bottom: clamp(34px,6vh,64px); }
.breath__lead{ font-family:var(--serif); font-weight:var(--display-weight); letter-spacing:var(--serif-tracking);
  font-size: clamp(30px,5vw,66px); line-height:1.07; max-width: 19ch; }
.breath__lead em{ font-style:italic; color:var(--ink); }
.pays{ display:grid; grid-template-columns:1fr; gap:0; margin-top: clamp(46px,8vh,90px); }
@media(min-width:780px){ .pays{ grid-template-columns: repeat(3,1fr); } }
.pay{ padding: clamp(24px,3.5vh,34px) 0; border-top:1px solid var(--line); }
@media(min-width:780px){ .pay{ padding-right: clamp(20px,3vw,46px); } }
.pay__n{ font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted-2); }
.pay__t{ font-family:var(--serif); font-weight:var(--display-weight); font-size: clamp(22px,2.4vw,30px); line-height:1.1; margin:14px 0 10px; }
.pay__d{ font-size:14px; line-height:1.62; color:var(--muted); max-width:30ch; margin:0; }
.pays .pay:nth-child(2){ transition-delay:.10s; }
.pays .pay:nth-child(3){ transition-delay:.20s; }
.breath__close{ margin-top: clamp(40px,6vh,72px); }

/* Lever 3 — cadence: the thinking, kept current ------------ */
.cadence{ border-top:1px solid var(--line); }
.cadence__top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:18px 40px; margin-bottom: clamp(30px,4.5vh,48px); }
.cadence__live{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.cadence__live .pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent); position:relative; flex:none; }
.cadence__live .pulse::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--accent); opacity:.6; animation: cadencePulse 2.6s ease-out infinite; }
@keyframes cadencePulse{ 0%{ transform:scale(.55); opacity:.7; } 100%{ transform:scale(1.8); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .cadence__live .pulse::after{ animation:none; } }
.notes{ border-top:1px solid var(--line); }
.note{ display:grid; grid-template-columns:1fr; gap:6px 28px; padding: clamp(22px,3.4vh,30px) 0; border-bottom:1px solid var(--line); transition: padding-left .3s cubic-bezier(.2,.7,.2,1); }
@media(min-width:760px){ .note{ grid-template-columns: 124px 1fr auto; align-items:baseline; } }
.note:hover{ padding-left: 12px; }
.note__date{ font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2); }
.note__title{ font-family:var(--serif); font-weight:var(--display-weight); font-size: clamp(18px,1.9vw,24px); line-height:1.24; color:var(--ink); max-width:42ch; }
.note__go{ font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--muted); transition: color .2s ease, transform .25s ease; white-space:nowrap; }
.note:hover .note__title{ color:var(--ink); }
.note:hover .note__go{ color:var(--ink); transform: translateX(5px); }
.cadence__foot{ margin-top: clamp(30px,4.5vh,48px); display:flex; flex-wrap:wrap; gap:22px; align-items:center; }

/* --- Fix témoignages sur fond paper (étaient blanc sur crème) --- */
.paper .quote{ border-color: var(--line-pap); }
.paper .quote__text{ color: var(--paper-ink); }
.paper .quote__by{ color: var(--muted-pap); }
.paper .quote__by b{ color: var(--paper-ink); }

/* --- Rythme des fonds : overrides paper pour case + boutons --- */
.paper.case{ border-color: var(--line-pap); }
.paper .casblock{ border-color: var(--line-pap); }
.paper .case__meta span, .paper .casblock__h{ color: var(--muted-pap); }
.paper .btn{ background: var(--paper-ink); color: var(--paper); }
.paper .btn:hover{ background:transparent; color: var(--paper-ink); box-shadow: inset 0 0 0 1px var(--paper-ink); }

/* ── Sticky conversion bar (V28) ── */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background: var(--bar-bg); backdrop-filter:saturate(140%) blur(8px);
  border-top:1px solid rgba(138,138,134,.28);
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:12px 20px; font-family:var(--mono); font-size:12px; letter-spacing:.08em;
}
.stickybar a{ color:var(--ink); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:10px; }
.stickybar a .arr{ transition:transform .25s ease; }
.stickybar a:hover .arr{ transform:translateX(4px); }
.stickybar__price{ color:var(--muted); }
.stickybar a.stickybar__notes{ color: var(--muted); font-size:13px; }
.stickybar a.stickybar__notes:hover{ color: var(--ink); }
.stickybar__sep{ display:inline-block; width:1px; height:11px; background:var(--muted); opacity:.35; }
@media (max-width:520px){ .stickybar__notes, .stickybar__sep{ display:none; } }
/* réserver l'espace pour que la barre fixe ne masque jamais le bas de page (surtout mobile) */
.foot{ padding-bottom: calc(clamp(40px,6vh,72px) + 64px); }
@media (max-width:520px){ .stickybar{ font-size:13px; padding:10px 14px; } .stickybar__price{ display:none; } .foot{ padding-bottom: calc(clamp(40px,6vh,72px) + 56px); } }

/* ── Images & atmosphère (V30) ── */
.figure{ margin: clamp(28px,5vh,52px) 0 0; }
.figure img{ display:block; width:100%; height:auto; border-radius:2px; }
.figure--home{ max-width:520px; }
.figure--band{ max-width:100%; }
.figure__cap{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--muted); margin-top:10px; text-transform:uppercase; }
.paper .figure img{ box-shadow: 0 1px 0 rgba(10,10,10,.06); }
/* icônes des moments */
.mech__rail{ display:flex; flex-direction:column; gap:16px; }
.mech__icon{ width:30px; height:30px; display:block; opacity:.9; }
.mech__icon svg{ width:100%; height:100%; display:block; }
.mech__icon [stroke]{ stroke: var(--ink); }
.paper .mech__icon [stroke]{ stroke: var(--paper-ink); }
.mech__icon [data-accent]{ stroke: var(--signal); }
/* texture de cas */
.casefig{ width:100%; height:44px; margin: 4px 0 clamp(20px,3vh,30px); }
.casefig svg{ width:100%; height:100%; display:block; }
.case{ --casehair: var(--hair-dark); }
.paper.case, .case.paper{ --casehair: var(--hair-pap); }
/* plus d'air entre sections */
.sec, .sec--tight{ scroll-margin-top: 80px; }


/* ── Marque : logo vectoriel (V32) ── */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand__mark{ width:26px; height:22px; display:block; flex:none; }
.brand__mark svg{ width:100%; height:100%; display:block; }
.foot__mark{ width:64px; height:54px; display:block; margin-bottom:18px; color:var(--ink); }
.paper .foot__mark{ color: var(--paper-ink); }
.foot__mark svg{ width:100%; height:100%; display:block; }
/* légende d'image, un peu plus lisible */
.figure__cap{ font-size:12px; letter-spacing:.06em; }


/* ── Thème clair (V32) : inverse la base ET le rythme des sections papier ── */
:root[data-theme="light"]{
  --bg:        #F4F3F0;
  --bg-2:      #EDECE7;
  --ink:       #0A0A0A;
  --muted:     #6E6E68;
  --muted-2:   #8a8880;
  --line:      rgba(10,10,10,0.14);
  --line-2:    rgba(10,10,10,0.07);

  /* les sections .paper deviennent les sections sombres */
  --paper:     #0A0A0A;
  --paper-ink: #FAFAF8;
  --line-pap:  rgba(250,250,248,0.13);
  --muted-pap: #8A8A86;
  --pap-body:    #D8D8D2;
  --pap-mech-no: #6A6A66;
  --pap-mech-d:  #C2C2BD;
  --hair-dark:   #b8b6ae;
  --hair-pap:    #4a4a46;
  --bar-bg:      rgba(244,243,240,.94);
  --nav-bg:      rgba(244,243,240,0.78);
  --body-soft:   #33332E;
  --body-soft-2: #454540;
  --accent:      #4F738D;
}

/* bascule de thème */
.themetog{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-left:12px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  color:var(--muted); cursor:pointer; flex:none;
  transition: color .2s ease, border-color .2s ease;
}
.themetog:hover{ color:var(--ink); border-color:var(--ink); }
.themetog svg{ width:15px; height:15px; display:block; }
.themetog .ico-sun{ display:none; }
:root[data-theme="light"] .themetog .ico-sun{ display:block; }
:root[data-theme="light"] .themetog .ico-moon{ display:none; }
html, body{ transition: background-color .25s ease, color .25s ease; }
@media (prefers-reduced-motion: reduce){ html, body{ transition:none; } }


/* ── Mécanisme de la dette symbolique (extrait des styles en ligne, V32) ── */
.mech-strip{
  margin-top: clamp(30px,5vh,46px); padding-top:24px;
  border-top:1px solid rgba(138,138,134,.28);
  display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; max-width:760px;
}
.mech-strip__item{ flex:1; min-width:150px; }
.mech-strip__k{ letter-spacing:.14em; color: var(--ink); }
.mech-strip__k--signal{ color: var(--signal); }
.mech-strip__d{ color: var(--muted); font-size:.82em; margin-top:6px; max-width:24ch; }
.mech-strip__arrow{ color: var(--muted); align-self:flex-start; padding-top:2px; font-size:1.1em; }
.mech-strip__legend{ flex-basis:100%; margin-top:12px; }
.mech-strip__legend-t{ color: var(--muted); }


/* ── Accessibilité (V33) ── */
.skiplink{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--ink); color: var(--bg);
  padding:12px 18px; font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; border-radius:0 0 4px 0;
}
.skiplink:focus{ left:0; }
#main:focus{ outline:none; }
/* anneau de focus visible au clavier, invisible à la souris */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.btn:focus-visible, .themetog:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
/* les <h2> de section ne doivent pas hériter des marges par défaut */
h2.shead__no{ margin:0; font-weight:400; }

/* titres réels sur la page Cases, sans changement visuel */
h2.case__meta, h3.casblock__h{ margin:0; font-weight:400; }

/* ── Témoignages sur l'accueil (V33) ── */
.vquote{ max-width:62ch; margin:0 0 clamp(26px,4vh,38px); padding-left:22px; border-left:2px solid var(--line); }
.vquote:last-child{ margin-bottom:0; }
.vquote__t{ font-family:var(--serif); font-size: clamp(17px,1.5vw,20px); line-height:1.55; color:var(--ink); font-style:italic; margin:0; }
.vquote__by{ display:block; margin-top:12px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-style:normal; }
.vquote__by b{ display:block; color:var(--ink); font-weight:400; margin-bottom:3px; }

/* ── Correctifs de lisibilité sur fond papier (V34) ── */
/* Le fond papier inverse l'encre : toute couleur doit avoir sa variante. */
.foot__bio{ max-width:62ch; margin:0 0 clamp(20px,3vh,30px); font-size:14px; line-height:1.6; color: var(--ink); }
.paper .foot__bio{ color: var(--paper-ink); }

.vquote--page{ max-width:60ch; margin: clamp(36px,5vh,56px) 0 0; }
.paper .vquote__t{ color: var(--paper-ink); }
.paper .vquote__by{ color: var(--muted-pap); }
.paper .vquote__by b{ color: var(--paper-ink); }
.paper .vquote{ border-left-color: var(--line-pap); }

.ilink{ color: var(--ink); border-bottom:1px solid var(--muted); }
.paper .ilink{ color: var(--paper-ink); border-bottom-color: var(--muted-pap); }
.ilink--soft{ color: var(--muted); border-bottom-color: var(--line); }
.paper .ilink--soft{ color: var(--muted-pap); border-bottom-color: var(--line-pap); }

.soft{ color: var(--muted); }
.paper .soft{ color: var(--muted-pap); }
.softsm{ font-size:0.7em; color: var(--muted); }
.paper .softsm{ color: var(--muted-pap); }
.mt14{ margin-top:1.4em; }
.mt16{ margin-top:1.6em; }

.offer__tag{ font-size:0.82em; color: var(--muted); margin-bottom:0.6em; font-style:italic; }
.paper .offer__tag{ color: var(--muted-pap); }

/* prix et description des offres : invisibles sur papier avant correction */
.paper .offer__price{ color: var(--paper-ink); }
.paper .offer__price span{ color: var(--muted-pap); }
.paper .offer__desc{ color: var(--pap-body); }

/* ── Bloc de données sourcées (V34) ── */
.facts{ display:flex; gap: clamp(24px,4vw,56px); flex-wrap:wrap; margin-top: clamp(24px,4vh,38px); }
.fact{ flex:1; min-width:190px; }
.fact__n{ font-family:var(--serif); font-size: clamp(38px,4.4vw,58px); line-height:1; color: var(--ink); letter-spacing:var(--serif-tracking); }
.paper .fact__n{ color: var(--paper-ink); }
.fact__t{ margin-top:12px; font-size:15px; line-height:1.6; color: var(--body-soft); max-width:26ch; }
.facts__src{ flex-basis:100%; margin-top: clamp(18px,3vh,26px); font-family:var(--mono); font-size:12px; letter-spacing:.06em; color: var(--muted); }
.paper .facts__src{ color: var(--muted-pap); }
.facts__src a{ color:inherit; border-bottom:1px solid var(--line); }
.facts__intro{ max-width:58ch; margin:0 0 clamp(20px,3vh,30px); }
@media (max-width:640px){ .facts{ gap:26px; } .fact{ min-width:100%; } .fact__n{ font-size:40px; } }
.evidence-note{ margin-top:1.5em; padding-left:18px; border-left:1px solid var(--line); font-size:0.94em; color: var(--muted); }
.paper .evidence-note{ color: var(--muted-pap); border-left-color: var(--line-pap); }
.evidence-note a{ color:inherit; border-bottom:1px solid var(--line); }
.hero__sub{ font-family:var(--sans); font-size: clamp(16px,1.6vw,19px); line-height:1.5; color: var(--muted); max-width:46ch; margin: clamp(18px,2.6vh,26px) 0 0; }