/* XÉDRIA S02 — Accompagnement IA entreprise — CSS isolé CMS */
.s02-page{
  
  --bg-deep:      #071116;
  --bg:           #0A1217;
  --bg-deeper:    #050C10;

  
  --ivory:        #E7E1D5;
  --ivory-dim:    rgba(231, 225, 213, 0.58);
  --ivory-faint:  rgba(231, 225, 213, 0.34);

  
  --teal:         #2B8175;
  --teal-soft:    rgba(43, 129, 117, 0.18);
  --cyan:         #62D5E5;
  --cyan-dim:     rgba(98, 213, 229, 0.55);
  --gold:         #C6A768;

  
  --line:         rgba(231, 225, 213, 0.10);
  --line-strong:  rgba(231, 225, 213, 0.22);

  
  --font-display: "Segoe UI Variable Display", "Avenir Next", Avenir, Futura, "Century Gothic", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Cascadia Mono", "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --font-serif:   "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);

  
  --container:    1200px;
  --gutter:       clamp(20px, 4vw, 48px);
  --section-pad:  clamp(88px, 11vw, 148px);
  --header-h:     76px;
}
.s02-page *, .s02-page *::before, .s02-page *::after{ box-sizing: border-box; }
.s02-page{
  margin: 0;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.s02-page h1, .s02-page h2, .s02-page h3{
  font-family: var(--font-display);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}
.s02-page p{ margin: 0; }
.s02-page a{ color: inherit; text-decoration: none; }
.s02-page img, .s02-page svg{ display: block; max-width: 100%; }
.s02-page ::selection{ background: var(--cyan); color: var(--bg-deep); }
.s02-page :focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 1px;
}
.s02-page ::-webkit-scrollbar{ width: 10px; }
.s02-page ::-webkit-scrollbar-track{ background: var(--bg-deeper); }
.s02-page ::-webkit-scrollbar-thumb{ background: rgba(231, 225, 213, 0.16); border-radius: 8px; }
.s02-page ::-webkit-scrollbar-thumb:hover{ background: rgba(231, 225, 213, 0.28); }
.s02-page .s02-container{
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.s02-page .s02-dim{ opacity: 0.45; font-weight: 400; }
.s02-page .s02-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 34px;
  border: 1px solid;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft);
}
.s02-page .s02-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.s02-page .s02-btn:hover::before, .s02-page .s02-btn:focus-visible::before{ transform: scaleX(1); }
.s02-page .s02-btn-primary{
  border-color: var(--cyan);
  color: var(--cyan);
  z-index: 0;
}
.s02-page .s02-btn-primary::before{ background: var(--cyan); }
.s02-page .s02-btn-primary:hover, .s02-page .s02-btn-primary:focus-visible{ color: var(--bg-deep); }
.s02-page .s02-btn-ghost{
  border-color: var(--line-strong);
  color: var(--ivory-dim);
  background: transparent;
}
.s02-page .s02-btn-ghost::before{ background: rgba(231, 225, 213, 0.06); }
.s02-page .s02-btn-ghost:hover, .s02-page .s02-btn-ghost:focus-visible{ color: var(--ivory); border-color: rgba(231, 225, 213, 0.5); }
.s02-page .s02-btn-large{ padding: 20px 44px; }
.s02-page .s02-hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-deep);
  padding: calc(var(--header-h) + 48px) 0 110px;
  overflow: hidden;
}
.s02-page .s02-hero-canvas{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(0 0 0 60%);
}
.s02-page .s02-hero-canvas svg{
  width: 100%;
  height: 100%;
  transform: translateX(18%);
  transform-origin: center;
  will-change: transform;
}
.s02-page .s02-hero-canvas::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(7, 17, 22, 0.88) 0%,
    rgba(7, 17, 22, 0.55) 34%,
    rgba(7, 17, 22, 0) 62%);
}
.s02-page .s02-hero-canvas::before{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  background: linear-gradient(to top, rgba(7, 17, 22, 0.9), rgba(7, 17, 22, 0));
  z-index: 1;
}
.s02-page .s02-hero-canvas .s02-b, .s02-page .s02-hero-canvas .s02-d, .s02-page .s02-hero-canvas .s02-precise{
  stroke-dasharray: 1;
}
.s02-page .s02-hero-canvas .s02-b{ stroke-opacity: 0.20; }
.s02-page .s02-hero-canvas .s02-d{ stroke-opacity: 0.13; }
.s02-page .s02-hero-canvas .s02-ring-2{ transform-box: fill-box; transform-origin: center; }
.s02-page .s02-hero-canvas .s02-halo, .s02-page .s02-hero-canvas .s02-dot{
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes s02-hero-draw{ to { stroke-dashoffset: 0; } }
@keyframes s02-hero-fade{ to { opacity: 1; } }
@keyframes s02-hero-pop{ to { transform: scale(1); } }
@keyframes s02-ring-spin{ to { transform: rotate(360deg); } }
@keyframes s02-halo-breathe{ 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.s02-page .s02-hero-content{ position: relative; z-index: 2; max-width: 660px; }
.s02-page .s02-hero-eyebrow{
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cyan-dim);
  margin-bottom: 34px;
}
.s02-page .s02-eyebrow-line{
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, var(--cyan), transparent);
}
.s02-page .s02-hero-title{
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  letter-spacing: -0.032em;
  color: var(--ivory);
}
.s02-page .s02-hero-title .s02-dim{ display: block; margin-top: 6px; }
.s02-page .s02-hero-intro{
  margin-top: 32px;
  max-width: 520px;
  color: var(--ivory-dim);
  font-size: 1.075rem;
}
.s02-page .s02-hero-actions{
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.s02-page .s02-hero-footer{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.s02-page .s02-scroll-hint{
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ivory-faint);
}
.s02-page .s02-scroll-track{
  position: relative;
  width: 1px;
  height: 46px;
  background: var(--line-strong);
  overflow: hidden;
}
.s02-page .s02-scroll-dot{
  position: absolute;
  left: 0;
  top: -14px;
  width: 1px;
  height: 14px;
  background: var(--cyan);
  animation: s02-scroll-drop 2.6s var(--ease-soft) infinite;
}
@keyframes s02-scroll-drop{
  0%   { top: -14px; }
  70%  { top: 46px; }
  100% { top: 46px; }
}
.s02-page .s02-scroll-label{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.s02-page .s02-hero-meta{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  color: var(--ivory-faint);
}
.s02-page .s02-section{ position: relative; padding: var(--section-pad) 0; }
.s02-page .s02-section-head{
  border-top: 1px solid var(--line);
  padding-top: 30px;
  margin-bottom: clamp(48px, 6vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 5vw, 80px);
  align-items: end;
}
.s02-page .s02-section-code{
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  filter: brightness(1.7);
  margin-bottom: 6px;
}
.s02-page .s02-section-code::before{ content: "— "; color: var(--ivory-faint); }
.s02-page .s02-section-title{
  font-size: clamp(2rem, 4.1vw, 3.3rem);
}
.s02-page .s02-section-title .s02-dim{ display: inline-block; }
.s02-page .s02-section-lead{
  color: var(--ivory-dim);
  max-width: 440px;
  font-size: 1rem;
  padding-bottom: 8px;
}
.s02-page .s02-problems{ background: var(--bg); }
.s02-page .s02-problem-list{ border-bottom: 1px solid var(--line); }
.s02-page .s02-problem-row{
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 8px clamp(20px, 3.4vw, 56px);
  align-items: start;
  padding: clamp(36px, 4.4vw, 52px) 0;
  border-top: 1px solid var(--line);
  margin-left: calc(var(--indent, 0) * 6.5%); 
  transition: border-color 0.5s var(--ease-soft);
}
.s02-page .s02-problem-row:hover{ border-top-color: var(--line-strong); }
.s02-page .s02-problem-marker{
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ivory-faint);
}
.s02-page .s02-problem-num{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  transition: color 0.4s var(--ease-soft);
}
.s02-page .s02-problem-marker svg{
  width: 26px;
  height: 26px;
  opacity: 0.65;
  transition: color 0.4s, opacity 0.4s, transform 0.6s var(--ease);
}
.s02-page .s02-problem-row:hover .s02-problem-num{ color: var(--cyan); }
.s02-page .s02-problem-row:hover .s02-problem-marker svg{ color: var(--cyan); opacity: 1; transform: rotate(45deg); }
.s02-page .s02-problem-title{
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  margin-bottom: 12px;
}
.s02-page .s02-problem-text{
  color: var(--ivory-dim);
  max-width: 620px;
  font-size: 0.98rem;
}
.s02-page .s02-problem-tag{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--ivory-faint);
  padding-top: 10px;
  white-space: nowrap;
}
.s02-page .s02-method{
  background:
    radial-gradient(1100px 460px at 78% 34%, rgba(43, 129, 117, 0.10), transparent 68%),
    var(--bg-deep);
}
.s02-page .s02-method-track{
  position: relative;
  height: 520px;
  margin-top: clamp(16px, 3vw, 40px);
}
.s02-page .s02-method-path{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.s02-page .s02-method-path *{ vector-effect: non-scaling-stroke; }
.s02-page .s02-method-path .s02-m-beam, .s02-page .s02-method-path .s02-m-main, .s02-page .s02-method-path .s02-m-end{
  stroke-dasharray: 1;
}
.s02-page .s02-method-path .s02-m-node{
  transform-box: fill-box;
  transform-origin: center;
}
.s02-page .s02-method-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}
.s02-page .s02-step{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 19.5%;
  max-width: 300px;
}
.s02-page .s02-step-node{ display: none; }
.s02-page .s02-step-num{
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  margin-bottom: 12px;
}
.s02-page .s02-step-title{
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  margin-bottom: 12px;
}
.s02-page .s02-step-text{
  color: var(--ivory-dim);
  font-size: 0.92rem;
  line-height: 1.62;
}
.s02-page .s02-step-final .s02-step-title{ color: var(--gold); }
.s02-page .s02-step-final .s02-step-num{ color: rgba(198, 167, 104, 0.65); }
.s02-page .s02-directions{ background: var(--bg); }
.s02-page .s02-direction-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 2.6vw, 40px);
  row-gap: clamp(28px, 4vw, 56px);
}
.s02-page .s02-direction{
  grid-column: var(--dc, auto);
  margin-top: var(--dy, 0);
  position: relative;
  padding: 30px 4px 0 0;
  border-top: 1px solid var(--line-strong);
  transition: border-color 0.5s var(--ease-soft);
}
.s02-page .s02-direction::before{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 32px;
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  transform: scale(0.58);
  transform-origin: top left;
  opacity: 0.62;
  transition: transform 0.55s var(--ease), border-color 0.45s var(--ease-soft), opacity 0.45s var(--ease-soft);
}
.s02-page .s02-direction::after{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), rgba(98,213,229,0));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.8;
  transition: transform 0.72s var(--ease);
}
.s02-page .s02-direction:hover{ border-top-color: rgba(98,213,229,0.22); }
.s02-page .s02-direction:hover::before{ transform: scale(1); border-color: var(--cyan-dim); opacity: 1; }
.s02-page .s02-direction:hover::after{ transform: scaleX(1); }
.s02-page .s02-direction-head{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.s02-page .s02-direction-num{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--teal);
  filter: brightness(1.8);
  transition: color 0.4s;
}
.s02-page .s02-direction:hover .s02-direction-num{ color: var(--cyan); }
.s02-page .s02-direction-line{
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.7s var(--ease), background-color 0.5s;
}
.s02-page .s02-direction:hover .s02-direction-line{ transform: scaleX(1); background: var(--line-strong); }
.s02-page .s02-direction-title{
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.s02-page .s02-direction-text{
  color: var(--ivory-dim);
  font-size: 0.96rem;
  max-width: 460px;
}
.s02-page .s02-direction-more{
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.4s, gap 0.45s var(--ease);
}
.s02-page .s02-direction-more span{ transition: transform 0.45s var(--ease); }
.s02-page .s02-direction:hover .s02-direction-more{ color: var(--cyan); gap: 16px; }
.s02-page .s02-case{
  background:
    linear-gradient(to bottom, rgba(5, 12, 16, 0) 0%, rgba(5, 12, 16, 0.6) 18%, rgba(5, 12, 16, 0.6) 82%, rgba(5, 12, 16, 0) 100%);
}
.s02-page .s02-case .s02-section-head{ border-top-color: var(--line-strong); }
.s02-page .s02-case-grid{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.s02-page .s02-case-timeline{
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line-strong);
}
.s02-page .s02-case-step{
  position: relative;
  padding: 26px 0 30px 42px;
}
.s02-page .s02-case-step:last-child{ padding-bottom: 6px; }
.s02-page .s02-case-node{
  position: absolute;
  left: -5.5px;
  top: 34px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.4px solid var(--ivory-dim);
  background: var(--bg-deep);
}
.s02-page .s02-case-node-cyan{ border-color: var(--cyan); box-shadow: 0 0 0 5px rgba(98, 213, 229, 0.09); }
.s02-page .s02-case-label{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cyan-dim);
  margin-bottom: 10px;
}
.s02-page .s02-case-text{
  color: var(--ivory-dim);
  font-size: 0.96rem;
}
.s02-page .s02-case-result{
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 640;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.s02-page .s02-case-visual{ margin: 0; }
.s02-page .s02-realisation-link{
  display: block;
  color: inherit;
}
.s02-page .s02-realisation-window{
  position: relative;
  display: block;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 82% 0%, rgba(98,213,229,.10), transparent 36%),
    linear-gradient(145deg, rgba(231,225,213,.035), rgba(5,12,16,.35));
  box-shadow: 0 26px 80px rgba(0,0,0,.28);
  overflow: hidden;
  transition:
    transform .65s var(--ease),
    border-color .5s var(--ease-soft),
    box-shadow .65s var(--ease);
}
.s02-page .s02-realisation-link:hover .s02-realisation-window,
.s02-page .s02-realisation-link:focus-visible .s02-realisation-window{
  transform: translateY(-7px);
  border-color: rgba(98,213,229,.52);
  box-shadow: 0 34px 95px rgba(0,0,0,.36), 0 0 0 1px rgba(98,213,229,.08);
}
.s02-page .s02-realisation-toolbar{
  min-height: 46px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(5,12,16,.78);
}
.s02-page .s02-realisation-dot{
  width: 6px;
  height: 6px;
  border: 1px solid var(--ivory-faint);
  border-radius: 50%;
}
.s02-page .s02-realisation-dot:first-child{
  border-color: var(--cyan-dim);
  background: rgba(98,213,229,.18);
}
.s02-page .s02-realisation-toolbar-label{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--ivory-faint);
}
.s02-page .s02-realisation-image-wrap{
  position: relative;
  display: block;
  padding: clamp(18px,2.6vw,30px);
  background:
    linear-gradient(rgba(231,225,213,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(231,225,213,.026) 1px,transparent 1px);
  background-size: 36px 36px;
}
.s02-page .s02-realisation-image{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(231,225,213,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.32);
  transition: transform .8s var(--ease), filter .8s var(--ease);
}
.s02-page .s02-realisation-shine{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(112deg, transparent 28%, rgba(255,255,255,.08) 47%, transparent 66%);
  transform: translateX(-55%);
  transition: opacity .4s ease, transform .9s var(--ease);
}
.s02-page .s02-realisation-link:hover .s02-realisation-image,
.s02-page .s02-realisation-link:focus-visible .s02-realisation-image{
  transform: scale(1.015);
  filter: contrast(1.035) brightness(1.035);
}
.s02-page .s02-realisation-link:hover .s02-realisation-shine,
.s02-page .s02-realisation-link:focus-visible .s02-realisation-shine{
  opacity: 1;
  transform: translateX(45%);
}
.s02-page .s02-realisation-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  transition: color .4s var(--ease-soft), background .4s var(--ease-soft);
}
.s02-page .s02-realisation-cta span:last-child{
  color: var(--cyan);
  font-size: .9rem;
  transition: transform .5s var(--ease);
}
.s02-page .s02-realisation-link:hover .s02-realisation-cta,
.s02-page .s02-realisation-link:focus-visible .s02-realisation-cta{
  color: var(--ivory);
  background: rgba(98,213,229,.035);
}
.s02-page .s02-realisation-link:hover .s02-realisation-cta span:last-child,
.s02-page .s02-realisation-link:focus-visible .s02-realisation-cta span:last-child{
  transform: translate(3px,-3px);
}
.s02-page .s02-case-meta{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--ivory-faint);
  text-transform: uppercase;
}
.s02-page .s02-manifesto{
  background: var(--ivory);
  color: var(--bg);
  padding: clamp(110px, 14vw, 176px) 0;
}
.s02-page .s02-manifesto-code{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.s02-page .s02-manifesto-code::before{ content: "— "; color: rgba(10, 18, 23, 0.35); }
.s02-page .s02-manifesto-row{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  max-width: 980px;
}
.s02-page .s02-manifesto-mark{ color: rgba(10, 18, 23, 0.35); padding-top: 14px; }
.s02-page .s02-manifesto-mark svg{ width: 32px; height: 76px; }
.s02-page .s02-manifesto-quote p{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 3.3vw, 2.75rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #101B21;
  text-wrap: balance;
}
.s02-page .s02-manifesto-quote .s02-gold{
  font-style: italic;
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: rgba(198, 167, 104, 0.55);
}
.s02-page .s02-manifesto-aside{
  margin-top: clamp(44px, 5vw, 72px);
  margin-left: auto;
  max-width: 420px;
  color: rgba(10, 18, 23, 0.62);
  font-size: 1rem;
  border-top: 1px solid rgba(10, 18, 23, 0.18);
  padding-top: 22px;
}
.s02-page .s02-faq{ background: var(--bg); }
.s02-page .s02-faq-grid{
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.s02-page .s02-faq-head{ position: sticky; top: calc(var(--header-h) + 32px); }
.s02-page .s02-faq-list{ border-top: 1px solid var(--line); }
.s02-page .s02-faq-item{ border-bottom: 1px solid var(--line); }
.s02-page .s02-faq-item summary{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 20px;
  align-items: baseline;
  gap: 18px;
  padding: 26px 0;
  transition: background-color 0.4s;
}
.s02-page .s02-faq-item summary::-webkit-details-marker{ display: none; }
.s02-page .s02-faq-item summary:hover .s02-faq-question{ color: var(--cyan); }
.s02-page .s02-faq-num{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--ivory-faint);
}
.s02-page .s02-faq-question{
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 560;
  letter-spacing: -0.01em;
  transition: color 0.35s var(--ease-soft);
}
.s02-page .s02-faq-icon{
  position: relative;
  width: 13px;
  height: 13px;
  justify-self: end;
  align-self: center;
}
.s02-page .s02-faq-icon::before, .s02-page .s02-faq-icon::after{
  content: "";
  position: absolute;
  background: var(--ivory-dim);
  transition: transform 0.45s var(--ease), background-color 0.3s;
}
.s02-page .s02-faq-icon::before{ left: 0; right: 0; top: 6px; height: 1.4px; }
.s02-page .s02-faq-icon::after{ top: 0; bottom: 0; left: 6px; width: 1.4px; }
.s02-page .s02-faq-item[open] .s02-faq-icon::after{ transform: scaleY(0); }
.s02-page .s02-faq-item[open] .s02-faq-icon::before, .s02-page .s02-faq-item[open] .s02-faq-icon::after{ background: var(--cyan); }
.s02-page .s02-faq-body{
  padding: 0 0 30px 82px;
}
.s02-page .s02-faq-body p{
  color: var(--ivory-dim);
  font-size: 0.97rem;
  max-width: 620px;
}
@keyframes s02-faq-open{
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.s02-page .s02-final{
  background:
    radial-gradient(900px 420px at 50% 108%, rgba(43, 129, 117, 0.16), transparent 70%),
    var(--bg-deep);
  text-align: center;
  overflow: hidden;
}
.s02-page .s02-final-inner{ display: grid; justify-items: center; }
.s02-page .s02-convergence{ width: min(320px, 68vw); margin-bottom: 8px; }
.s02-page .s02-convergence svg{ width: 100%; height: auto; }
.s02-page .s02-convergence .s02-c-line{ stroke-dasharray: 1; }
.s02-page .s02-convergence .s02-c-tail{ stroke-dasharray: 1; }
.s02-page .s02-final-title{
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  margin: 26px 0 24px;
  max-width: 760px;
}
.s02-page .s02-final-text{
  color: var(--ivory-dim);
  max-width: 520px;
  margin: 0 auto;
}

.s02-page .s02-final-reassurance{
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}

.s02-page .s02-final-actions{
  margin-top: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.s02-page .s02-final-alt{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color 0.4s, border-color 0.4s;
}
.s02-page .s02-final-alt:hover{ color: var(--ivory); border-color: var(--ivory-dim); }
@media (max-width: 1023px){.s02-page .s02-method-track{ height: auto; padding-left: 4px; }
.s02-page .s02-method-path{ display: none; }
.s02-page .s02-method-steps{ display: block; }
.s02-page .s02-method-steps::before{
    content: "";
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 26px;
    width: 1px;
    background: linear-gradient(to bottom, var(--line) 55%, var(--cyan-dim));
  }
.s02-page .s02-step{
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    max-width: 520px;
    padding: 0 0 44px 48px;
  }
.s02-page .s02-step:last-child{ padding-bottom: 8px; }
.s02-page .s02-step-node{
    display: block;
    position: absolute;
    left: 3.5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.4px solid var(--ivory-dim);
    background: var(--bg-deep);
  }
.s02-page .s02-step-final .s02-step-node{ border-color: var(--gold); box-shadow: 0 0 0 5px rgba(198, 167, 104, 0.1); }
.s02-page .s02-direction-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
.s02-page .s02-direction{ grid-column: auto !important; margin-top: 0 !important; }
.s02-page .s02-direction:nth-child(even){ margin-top: 44px !important; }
.s02-page .s02-case-grid{ grid-template-columns: 1fr; gap: 56px; }
.s02-page .s02-faq-grid{ grid-template-columns: 1fr; gap: 40px; }
.s02-page .s02-faq-head{ position: static; }
}

@media (max-width: 1180px) and (min-width: 768px){
  .s02-page .s02-hero-canvas{
    clip-path: inset(0 0 0 69%);
  }
  .s02-page .s02-hero-canvas svg{
    transform: translateX(28%);
    opacity: .72;
  }
}

@media (max-width: 767px){.s02-page{ font-size: 1rem; }
.s02-page .s02-hero{ padding-bottom: 130px; }
.s02-page .s02-hero-canvas{
    clip-path: inset(0 0 0 78%);
  }
.s02-page .s02-hero-canvas svg{
    opacity: 0.42;
    transform: translateX(38%);
  }
.s02-page .s02-hero-canvas::after{
    background: linear-gradient(to bottom,
      rgba(7, 17, 22, 0.92) 0%,
      rgba(7, 17, 22, 0.68) 45%,
      rgba(7, 17, 22, 0.3) 100%);
  }
.s02-page .s02-hero-title{ font-size: clamp(2.1rem, 9.6vw, 2.7rem); }
.s02-page .s02-hero-actions .s02-btn{ width: 100%; }
.s02-page .s02-hero-meta{ display: none; }
.s02-page .s02-section-head{ grid-template-columns: 1fr; align-items: start; }
.s02-page .s02-section-lead{ padding-bottom: 0; }
.s02-page .s02-problem-row{
    grid-template-columns: 1fr;
    margin-left: calc(var(--indent, 0) * 4%);
    gap: 14px;
    padding: 34px 0;
  }
.s02-page .s02-problem-tag{ padding-top: 0; order: -1; }
.s02-page .s02-faq-item summary{ grid-template-columns: 1fr 20px; }
.s02-page .s02-faq-num{ grid-column: 1 / -1; margin-bottom: 6px; }
.s02-page .s02-faq-body{ padding-left: 0; }
.s02-page .s02-faq-icon{ align-self: start; margin-top: 4px; }
.s02-page .s02-final-actions{ flex-direction: column; gap: 22px; }
.s02-page .s02-final-actions .s02-btn{ width: 100%; }

.s02-page .s02-manifesto-row{ grid-template-columns: 1fr; gap: 28px; }
.s02-page .s02-manifesto-mark svg{ width: 26px; height: 48px; }}
@media (prefers-reduced-motion: reduce){.s02-page *, .s02-page *::before, .s02-page *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
.s02-page .s02-scroll-dot{ animation: none; top: 4px; }}
.s02-page .s02-problem-indent-0{ --indent: 0; }
.s02-page .s02-problem-indent-1{ --indent: 1; }
.s02-page .s02-problem-indent-2{ --indent: 2; }
.s02-page .s02-step-pos-1{ --x: 6%; --y: 266px; }
.s02-page .s02-step-pos-2{ --x: 29%; --y: 266px; }
.s02-page .s02-step-pos-3{ --x: 56.5%; --y: 294px; }
.s02-page .s02-step-pos-4{ --x: 79.5%; --y: 294px; }
.s02-page .s02-direction-pos-1{ --dc: 1 / span 7; --dy: 0; }
.s02-page .s02-direction-pos-2{ --dc: 8 / span 5; --dy: 56px; }
.s02-page .s02-direction-pos-3{ --dc: 1 / span 5; --dy: -28px; }
.s02-page .s02-direction-pos-4{ --dc: 7 / span 6; --dy: 28px; }

@media (max-width: 639px){
.s02-page .s02-direction-grid{grid-template-columns:1fr;row-gap:36px;}
.s02-page .s02-direction:nth-child(even){margin-top:0!important;}
}

/* ============================================================
   S02 — ANIMATIONS CSS (conversion stricte de la maquette Orfèvre)
   Aucun JavaScript requis pour les animations de cette page.
   Le contenu reste entièrement visible si les scroll timelines
   ne sont pas supportées.
   ============================================================ */

/* 1 — Hero : tracé initial, halo, anneaux et apparition du contenu */
.s02-page .s02-hero-canvas .s02-b,
.s02-page .s02-hero-canvas .s02-d,
.s02-page .s02-hero-canvas .s02-precise{
  stroke-dashoffset: 1;
}
.s02-page .s02-beam .s02-b{
  animation: s02-hero-draw 2.1s var(--ease-soft) forwards;
}
.s02-page .s02-beam .s02-b:nth-child(1){ animation-delay:.25s; }
.s02-page .s02-beam .s02-b:nth-child(2){ animation-delay:.36s; }
.s02-page .s02-beam .s02-b:nth-child(3){ animation-delay:.47s; }
.s02-page .s02-beam .s02-b:nth-child(4){ animation-delay:.58s; }
.s02-page .s02-beam .s02-b:nth-child(5){ animation-delay:.69s; }
.s02-page .s02-beam .s02-b:nth-child(6){ animation-delay:.80s; }
.s02-page .s02-beam .s02-b:nth-child(7){ animation-delay:.91s; }
.s02-page .s02-beam .s02-b:nth-child(8){ animation-delay:1.02s; }
.s02-page .s02-beam .s02-b:nth-child(9){ animation-delay:1.13s; }

.s02-page .s02-dropped .s02-d{
  animation: s02-hero-draw 1.5s var(--ease-soft) forwards;
}
.s02-page .s02-dropped .s02-d:nth-child(1){ animation-delay:1.45s; }
.s02-page .s02-dropped .s02-d:nth-child(2){ animation-delay:1.55s; }
.s02-page .s02-dropped .s02-d:nth-child(3){ animation-delay:1.65s; }
.s02-page .s02-hero-canvas .s02-precise{
  animation: s02-hero-draw 1.1s var(--ease-soft) 1.75s forwards;
}

.s02-page .s02-dropped-dots .s02-dd{ opacity:0; animation:s02-hero-fade .8s var(--ease) forwards; }
.s02-page .s02-dropped-dots .s02-dd:nth-child(1){ animation-delay:1.4s; }
.s02-page .s02-dropped-dots .s02-dd:nth-child(2){ animation-delay:1.52s; }
.s02-page .s02-dropped-dots .s02-dd:nth-child(3){ animation-delay:1.64s; }

.s02-page .s02-hero-canvas .s02-ring{ opacity:0; animation:s02-hero-fade 1.4s var(--ease) 1.5s forwards; }
.s02-page .s02-hero-canvas .s02-ring-2{
  animation: s02-hero-fade 1.4s var(--ease) 1.5s forwards,
             s02-ring-spin 110s linear 1.5s infinite;
}
.s02-page .s02-hero-canvas .s02-halo,
.s02-page .s02-hero-canvas .s02-dot{ transform:scale(0); }
.s02-page .s02-hero-canvas .s02-halo{
  animation: s02-hero-pop 1.2s var(--ease) forwards,
             s02-halo-breathe 6s ease-in-out 2.8s infinite;
}
.s02-page .s02-hero-canvas .s02-dot{
  animation: s02-hero-pop .9s var(--ease) 1.55s forwards;
}
.s02-page .s02-hero-canvas .s02-ticks{
  opacity:0;
  animation:s02-hero-fade 1.5s var(--ease) 2.45s forwards;
}

@keyframes s02-hero-content-in{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}
.s02-page .s02-hero-eyebrow,
.s02-page .s02-hero-title,
.s02-page .s02-hero-intro,
.s02-page .s02-hero-actions{
  opacity:0;
  animation:s02-hero-content-in 1s var(--ease) forwards;
}
.s02-page .s02-hero-eyebrow{ animation-delay:.15s; }
.s02-page .s02-hero-title{ animation-delay:.30s; }
.s02-page .s02-hero-intro{ animation-delay:.45s; }
.s02-page .s02-hero-actions{ animation-delay:.60s; }

/* Parallax léger du hero en CSS scroll-driven. Fallback : hero fixe. */
@keyframes s02-hero-parallax{ to{ transform:translate3d(0,96px,0); } }
@supports (animation-timeline: scroll()){
  .s02-page .s02-hero-canvas{
    animation:s02-hero-parallax linear both;
    animation-timeline:scroll(root block);
    animation-range:0 900px;
  }
}

/* 2 — Révélations de sections en CSS. Fallback : éléments visibles. */
@keyframes s02-view-reveal{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:none; }
}
@supports (animation-timeline: view()){
  .s02-page .s02-reveal{
    opacity:0;
    animation:s02-view-reveal linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 28%;
  }
}

/* 3 — Trajectoire Méthode : animation CSS stable, sans JS ni scroll-timeline.
   Le titre et les étapes restent immédiatement lisibles. Le mouvement est purement décoratif. */
@keyframes s02-method-flow{
  to{ stroke-dashoffset:-1; }
}
@keyframes s02-method-node-pulse{
  0%,100%{ opacity:.72; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.32); }
}
.s02-page .s02-method-path .s02-m-beam{
  stroke-dasharray:.08 .045;
  animation:s02-method-flow 9s linear infinite;
}
.s02-page .s02-method-path .s02-m-main{
  stroke-dasharray:.13 .035;
  animation:s02-method-flow 5.5s linear infinite;
}
.s02-page .s02-method-path .s02-m-end{
  stroke-dasharray:.16 .06;
  animation:s02-method-flow 4s linear infinite;
}
.s02-page .s02-method-path .s02-m-node{
  animation:s02-method-node-pulse 3.8s var(--ease-soft) infinite;
}
.s02-page .s02-method-path .s02-m-node:nth-of-type(2){ animation-delay:.55s; }
.s02-page .s02-method-path .s02-m-node:nth-of-type(3){ animation-delay:1.1s; }
.s02-page .s02-method-path .s02-m-node:nth-of-type(4){ animation-delay:1.65s; }

/* 4 — FAQ native : animation CSS à l'ouverture, aucun JS. */
.s02-page .s02-faq-item[open] .s02-faq-body{
  animation:s02-faq-open .55s var(--ease) both;
}

/* 5 — Convergence finale : CSS view timeline, aucun JS. */
@supports (animation-timeline: view()){
  .s02-page .s02-final{
    view-timeline-name:--s02-final;
    view-timeline-axis:block;
  }
  .s02-page .s02-convergence .s02-c-line,
  .s02-page .s02-convergence .s02-c-tail{
    stroke-dashoffset:1;
    animation:s02-hero-draw linear both;
    animation-timeline:--s02-final;
  }
  .s02-page .s02-convergence g .s02-c-line:nth-child(1){ animation-range:entry 4% cover 14%; }
  .s02-page .s02-convergence g .s02-c-line:nth-child(2){ animation-range:entry 8% cover 18%; }
  .s02-page .s02-convergence g .s02-c-line:nth-child(3){ animation-range:entry 12% cover 22%; }
  .s02-page .s02-convergence g .s02-c-line:nth-child(4){ animation-range:entry 16% cover 26%; }
  .s02-page .s02-convergence g .s02-c-line:nth-child(5){ animation-range:entry 20% cover 30%; }
  .s02-page .s02-convergence .s02-c-dot{
    opacity:0;
    transform-box:fill-box;
    transform-origin:center;
    transform:scale(0);
    animation:s02-hero-pop linear both;
    animation-timeline:--s02-final;
    animation-range:entry 28% cover 38%;
  }
  .s02-page .s02-convergence .s02-c-tail{ animation-range:entry 36% cover 46%; }
}



/* 6 — Parcours : pas d'animation d'entrée dépendante du scroll.
   Les blocs restent stables ; les micro-interactions CSS au survol portent le mouvement. */
@media (hover:hover){
  .s02-page .s02-direction:hover{
    transform:translateY(-4px);
  }
}
.s02-page .s02-direction{
  transition:transform .5s var(--ease), border-color .5s var(--ease-soft);
}

/* Réduction de mouvement : état final immédiatement lisible. */
@media (prefers-reduced-motion: reduce){
  .s02-page .s02-hero-canvas .s02-b,
  .s02-page .s02-hero-canvas .s02-d,
  .s02-page .s02-hero-canvas .s02-precise,
  .s02-page .s02-method-path .s02-m-beam,
  .s02-page .s02-method-path .s02-m-main,
  .s02-page .s02-method-path .s02-m-end,
  .s02-page .s02-convergence .s02-c-line,
  .s02-page .s02-convergence .s02-c-tail{ stroke-dashoffset:0 !important; }
  .s02-page .s02-hero-canvas .s02-dd,
  .s02-page .s02-hero-canvas .s02-ring,
  .s02-page .s02-hero-canvas .s02-structure,
  .s02-page .s02-hero-canvas .s02-ticks,
  .s02-page .s02-hero-canvas .s02-svg-labels,
  .s02-page .s02-method-path .s02-m-diamond,
  .s02-page .s02-convergence .s02-c-dot,
  .s02-page .s02-reveal,
  .s02-page .s02-hero-eyebrow,
  .s02-page .s02-hero-title,
  .s02-page .s02-hero-intro,
  .s02-page .s02-hero-actions{ opacity:1 !important; transform:none !important; }
  .s02-page .s02-direction{ clip-path:none !important; transform:none !important; }
  .s02-page .s02-method-path .s02-m-beam,
  .s02-page .s02-method-path .s02-m-main,
  .s02-page .s02-method-path .s02-m-end,
  .s02-page .s02-method-path .s02-m-node{ animation:none !important; }
  .s02-page .s02-hero-canvas .s02-halo,
  .s02-page .s02-hero-canvas .s02-dot,
  .s02-page .s02-method-path .s02-m-node{ transform:scale(1) !important; }
}

@media (prefers-reduced-motion: reduce){
  .s02-page .s02-realisation-window,
  .s02-page .s02-realisation-image,
  .s02-page .s02-realisation-shine,
  .s02-page .s02-realisation-cta span:last-child{
    transform:none !important;
    transition:none !important;
  }
}