.hero {
  /* Palette neutre limitée au hero ; les autres sections gardent leurs tokens. */
  --color-ink: var(--color-graphite);
  --color-muted: #616161;
  --color-line: #e2e2e2;
  --color-connection: #b9b9b9;
  --color-map: #e6e6e6;
  --color-track: #f2f2f2;
  --color-fill: #c8c8c8;
  --color-chart: #898989;
  --shadow-panel: 0 6px 28px rgb(0 0 0 / 0.07);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--viewport-height) - var(--header-height));
  overflow: clip;
}
.hero-stage {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  max-width: var(--container-content);
  margin-inline: auto;
  margin-block: auto;
  padding: 100px 0 253px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
}
.hero-eyebrow {
  font: 400 14px/20px var(--font-mono);
  letter-spacing: 1.6px;
  color: var(--color-muted);
}
.hero h1 {
  margin-top: 32px;
  font-size: 68px;
  line-height: 1.025;
  letter-spacing: -3.4px;
  font-weight: 740;
}
.hero h1 span,
.hero-description span {
  display: block;
}
.hero-description {
  margin-top: 22px;
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: -1px;
  color: var(--color-ink);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.hero-explore {
  color: var(--color-muted);
  margin-top: 16px;
  font-size: 18px;
  gap: 14px;
}
.hero-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--color-map);
  opacity: 0.35;
  mask-image:
    radial-gradient(ellipse 45% 70% at 50% 32%, transparent 48%, #000 95%),
    linear-gradient(transparent, #000 12%, #000 84%, transparent);
  mask-composite: intersect;
}
.hero-map svg {
  position: absolute;
  width: 118%;
  height: 165%;
  left: -9%;
  top: -26%;
}
.hero-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--color-muted);
  opacity: 0.18;
  mask-image: linear-gradient(
    to right,
    #000,
    transparent 35%,
    transparent 65%,
    #000
  );
}
.network-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.network-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}
.network-svg--tablet,
.network-svg--mobile {
  display: none;
}
.network-lines path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 0.85;
  opacity: 0.47;
}
.network-lines-secondary path {
  fill: none;
  stroke: var(--color-connection);
  stroke-width: 1;
  opacity: 0.75;
}
.network-terminal circle {
  fill: var(--color-surface);
  fill-opacity: 0.7;
  stroke: var(--color-accent);
  stroke-opacity: 0.22;
  stroke-width: 0.8;
}
.network-terminal circle:nth-child(2) {
  stroke-opacity: 0.1;
}
.network-terminal rect,
.network-hub rect,
.network-markers rect,
.network-signals rect {
  fill: var(--color-accent);
}
.network-markers {
  stroke: var(--color-surface);
  stroke-width: 1.5;
}
.hub-ring,
.hub-core,
.hub-pulse {
  fill: var(--color-surface);
  fill-opacity: 0.85;
  stroke: var(--color-accent);
  stroke-width: 1;
  stroke-opacity: 0.18;
}
.hub-ring {
  stroke-opacity: 0.1;
}
.hub-pulse {
  fill: none;
  opacity: 0;
}
.hub-orbit {
  fill: none;
  stroke: var(--color-accent);
  stroke-opacity: 0.5;
  stroke-width: 1;
}
.restaurant-card,
.headquarters-card {
  position: absolute;
  left: var(--desktop-x);
  top: var(--desktop-y);
  width: var(--desktop-width);
  padding: 12px 17px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 11px;
  box-shadow: var(--shadow-panel);
  color: var(--color-graphite);
  pointer-events: auto;
}
.restaurant-card {
  min-height: 114px;
}
.card-eyebrow {
  font: 400 13px/20px var(--font-mono);
  letter-spacing: 1.1px;
  color: var(--color-muted);
  white-space: nowrap;
}
.restaurant-card h2 {
  margin-top: 1px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 450;
  letter-spacing: -0.7px;
}
.forecast-chart {
  width: 100%;
  height: 85px;
  margin-top: -34px;
  overflow: visible;
}
.forecast-history {
  fill: none;
  stroke: var(--color-chart);
  stroke-width: 1.8;
}
.forecast-projection {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  stroke-linecap: round;
}
.restaurant-card--stock {
  min-height: 141px;
  padding-top: 9px;
}
.stock-chart {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.metric-row {
  display: grid;
  grid-template-columns: 83px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.5px;
  color: var(--color-muted);
}
.metric-track {
  position: relative;
  height: 10px;
  background: var(--color-track);
  border-radius: 4px;
}
.metric-fill {
  position: absolute;
  height: 100%;
  left: 0;
  width: 60%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--color-fill),
    var(--color-line),
    var(--color-fill)
  );
}
.stock-marker,
.margin-marker {
  position: absolute;
  left: 75%;
  top: -3px;
  height: 16px;
  width: 3px;
  border-radius: 1px;
  background: var(--color-accent);
}
.staff-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 11px;
}
.staff-chart > div {
  text-align: center;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 22px;
}
.staff-slot {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(120deg, var(--color-track), var(--color-fill));
}
.staff-slot--active {
  background: var(--color-accent);
}
.restaurant-card--margin {
  min-height: 137px;
  padding-top: 9px;
}
.margin-chart {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.margin-chart .metric-row {
  grid-template-columns: 78px 1fr;
}
.margin-marker {
  left: 88%;
}
.margin-marker--target {
  left: 67%;
  background: var(--color-ink);
}
.margin-chart .metric-row:last-child .metric-fill {
  width: 37%;
}
.headquarters-card {
  container-type: inline-size;
  padding: 14px 20px 10px;
  min-height: 120px;
}
.headquarters-card h2 {
  margin-top: 0;
  font-size: clamp(17px, 8.6cqi, 24px);
  line-height: 30px;
  letter-spacing: -0.052em;
  font-weight: 560;
  white-space: nowrap;
}
.headquarters-card ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.6px;
  color: var(--color-ink);
}
.headquarters-card li + li::before {
  content: '·';
  display: inline-block;
  margin-right: 12px;
}
.headquarters-card li {
  white-space: nowrap;
}
.hero-benefits {
  position: relative;
  flex-shrink: 0;
  margin: 0 2.8%;
  padding: 24px 8% 28px;
}
@media (width >= 1200px) and (height < 1000px) {
  .hero-benefits {
    padding-block: 18px;
  }
}
.hero-benefits ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1260px;
}
.hero-benefits li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 12.5em);
  align-items: baseline;
  justify-content: center;
  column-gap: 24px;
  padding-inline: 12px;
  color: var(--color-ink);
  font-size: 16px;
  letter-spacing: -0.45px;
  line-height: 30px;
}
.hero-benefits li + li {
  border-left: 1px solid var(--color-connection);
}
.hero-benefit-number {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--color-graphite);
  font-size: 19px;
}
.network-control {
  position: absolute;
  right: 4px;
  bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--color-muted);
  font-size: 11px;
}
@media (1200px <= width < 1450px) {
  .hero h1 {
    font-size: 59px;
    letter-spacing: -3.5px;
  }
  .hero-description {
    font-size: 21px;
  }
  .headquarters-card {
    padding-inline: 14px;
  }
  .headquarters-card ul {
    font-size: 12px;
    gap: 4px;
  }
  .headquarters-card li + li::before {
    margin-right: 6px;
  }
  .restaurant-card {
    padding-inline: 12px;
  }
  .metric-row {
    grid-template-columns: 72px 1fr;
    gap: 5px;
    font-size: 11px;
  }
  .restaurant-card h2 {
    font-size: 14px;
  }
  .card-eyebrow {
    font-size: 11px;
  }
}
@media (width < 1200px) {
  .headquarters-card ul {
    font-size: clamp(11px, 1.8vw, 14px);
    gap: 4px;
  }
  .headquarters-card li + li::before {
    margin-right: 6px;
  }
  .hero-stage {
    padding: 68px 24px 40px;
  }
  .hero h1 {
    font-size: clamp(42px, 6.2vw, 66px);
    letter-spacing: -0.055em;
  }
  .hero-description {
    font-size: 21px;
    letter-spacing: -0.6px;
  }
  .hero-map {
    opacity: 0.45;
  }
  .network-visual {
    position: relative;
    max-width: 820px;
    width: 100%;
    height: 590px;
    margin: 40px auto 0;
  }
  .restaurant-card,
  .headquarters-card {
    left: var(--tablet-x);
    top: var(--tablet-y);
    width: var(--tablet-width);
  }
  .restaurant-card {
    min-height: 147px;
    padding: 14px 17px;
  }
  .restaurant-card h2 {
    font-size: 16px;
  }
  .forecast-chart {
    height: 85px;
    margin-top: -18px;
  }
  .network-svg--desktop {
    display: none;
  }
  .network-svg--tablet {
    display: block;
  }
  .network-lines path {
    stroke-width: 1;
  }
  .hero-benefits {
    padding-inline: 0;
  }
  .hero-benefits li {
    gap: 12px;
    padding-inline: 12px;
    font-size: 14px;
  }
  .hero-benefit-number {
    font-size: 16px;
  }
}
@media (width < 640px) {
  .hero-stage {
    padding: 51px 16px 24px;
  }
  .hero-copy {
    max-width: 100%;
    width: 100%;
  }
  .hero-eyebrow {
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 1px;
  }
  .hero h1 {
    margin-top: 22px;
    font-size: clamp(30px, 7.9vw, 49px);
    line-height: 1.08;
    letter-spacing: -0.055em;
  }
  .hero-description {
    max-width: 370px;
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -0.45px;
  }
  .hero-description span {
    display: inline;
  }
  .hero-actions {
    margin-top: 24px;
  }
  .hero-explore {
    font-size: 15px;
    margin-top: 15px;
  }
  .network-visual {
    height: 866px;
    margin-top: 44px;
  }
  .network-svg--tablet {
    display: none;
  }
  .network-svg--mobile {
    display: block;
  }
  .restaurant-card,
  .headquarters-card {
    left: var(--mobile-x);
    top: var(--mobile-y);
    width: var(--mobile-width);
    padding: 14px;
  }
  .restaurant-card {
    min-height: 146px;
  }
  .restaurant-card h2 {
    font-size: 16px;
    letter-spacing: -0.55px;
  }
  .card-eyebrow {
    font-size: 12px;
    letter-spacing: 0.7px;
  }
  .headquarters-card ul {
    font-size: 11px;
    letter-spacing: -0.2px;
    gap: 3px;
  }
  .headquarters-card li + li::before {
    margin-right: 4px;
  }
  .metric-row {
    grid-template-columns: 82px 1fr;
    font-size: 12px;
  }
  .staff-chart {
    margin-top: 19px;
  }
}
@media (width < 768px) {
  .hero-benefits {
    margin-inline: 16px;
    padding: 18px 4px 38px;
  }
  .hero-benefits ol {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hero-benefits li {
    border: 0;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    padding-inline: 0;
    gap: 20px;
    font-size: 15px;
  }
  .hero-benefits li + li {
    border-left: 0;
  }
  .network-control {
    bottom: 0;
    font-size: 12px;
    min-height: 36px;
  }
}

/* Un réseau lointain, sous les cartes et les trajets du premier plan. */
.hero-depth {
  position: absolute;
  inset: -7% 0 -4%;
  width: 100%;
  height: 111%;
  pointer-events: none;
  color: #7e7e7e;
  mask-image:
    radial-gradient(ellipse 42% 50% at 50% 31%, transparent 42%, #000 89%),
    linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}
.depth-plane path,
.depth-bridges path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.75;
}
.depth-plane circle {
  fill: currentColor;
}
.depth-plane .depth-node-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.7;
}
.depth-plane--0 {
  opacity: 0.2;
}
.depth-plane--1 {
  opacity: 0.14;
  filter: blur(0.35px);
}
.depth-plane--2 {
  opacity: 0.09;
  filter: blur(0.8px);
}
.depth-bridges {
  opacity: 0.1;
}
.hero-depth ~ .hero-grid {
  opacity: 0.045;
}

/* Le script synchrone prépare texte et décor avant leur fondu commun.
   Sans JavaScript ou en mouvement réduit, le HTML reste immédiatement lisible. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-intro-pending]
    [data-hero]
    :is(
      .network-visual,
      .hero-depth,
      .hero-map,
      .hero-grid,
      [data-opening-eyebrow],
      [data-opening-title],
      [data-opening-description],
      [data-opening-actions]
    ) {
    opacity: 0;
  }
}
.hero-map {
  opacity: 0.16;
}
@media (width < 1200px) {
  .hero-depth {
    height: 850px;
    top: 100px;
    mask-image: linear-gradient(transparent, #000 22%, #000 80%, transparent);
  }
  .depth-plane--0 {
    opacity: 0.14;
  }
  .hero-map {
    opacity: 0.16;
  }
}
@media (width < 640px) {
  .hero-depth {
    top: 220px;
    height: 1100px;
  }
  .depth-plane--2,
  .depth-bridges {
    display: none;
  }
}
.page-flow-root {
  position: relative;
  isolation: isolate;
}
praedixa-section-flow {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: clip;
}
.section-flow {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
praedixa-section-flow[data-ready] .section-flow {
  opacity: 1;
}
.section-flow path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.section-flow-track {
  stroke: #b7b7b7;
  stroke-width: 1;
  opacity: 0.28;
}
.section-flow-trace {
  stroke: var(--color-accent);
  stroke-width: 1.2;
  opacity: 0.58;
}
.section-flow-origin,
.section-flow-signal {
  fill: var(--color-accent);
}
.section-flow-signal {
  stroke: var(--color-canvas);
  stroke-width: 1.5;
}
.page-flow-root .anticiper-section {
  min-height: var(--viewport-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (width >= 1920px) {
  .page-flow-root .connecter-section > .site-container,
  .page-flow-root .anticiper-section > .site-container {
    max-width: 1760px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-flow-signal {
    display: none;
  }
  .section-flow-trace {
    opacity: 0.22;
  }
}
/* Deux conséquences indépendantes, sans piste de fond concurrente. */
[data-flow-stage='2'] .section-flow-trace,
[data-flow-stage='3'] .section-flow-trace,
.section-flow-arrow {
  stroke: var(--color-accent);
  stroke-width: 2px;
  opacity: 1;
  stroke-linecap: round;
}
[data-flow-stage='2'] .section-flow-track,
[data-flow-stage='3'] .section-flow-track {
  visibility: hidden;
}
.section-flow-arrow {
  opacity: 0;
}
praedixa-opening[data-astro-cid-lglfz45c] {
  display: block;
}
praedixa-connecter {
  display: block;
}
.connecter-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--viewport-height);
  padding-block: 60px 56px;
}
.connecter-section > .site-container {
  flex-shrink: 0;
}
.connecter-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: end;
  gap: 40px;
  margin-top: 34px;
}
.connecter-heading h2 {
  font-size: clamp(60px, 5.85cqi, 86px);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.052em;
}
.connecter-heading h2 > span {
  display: block;
  white-space: nowrap;
}
.connecter-period {
  position: relative;
  color: transparent;
}
.connecter-period::after {
  content: '';
  position: absolute;
  width: 0.165em;
  height: 0.165em;
  bottom: 0.235em;
  left: 0.035em;
  background: var(--color-accent);
}
.connecter-description {
  margin-bottom: 4px;
  font-size: clamp(17px, 1.47cqi, 22px);
  line-height: 1.5;
  letter-spacing: -0.025em;
}
.connecter-description > span {
  display: block;
}
.connecter-diagram {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 23.4fr 13.2fr 26.8fr 9.4fr 27.2fr;
  margin-top: 46px;
  padding: 34px 16px;
}
.connecter-diagram::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 0.5px 0.5px,
    var(--color-chart) 0.6px,
    transparent 0.75px
  );
  background-size: 22px 22px;
  opacity: calc(0.5 * var(--scene-reveal, 1));
}
.connecter-sources,
.connecter-decisions {
  min-width: 0;
  position: relative;
}
.diagram-label {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  height: var(--connecter-heading);
  font: 400 17px/24px var(--font-mono);
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.diagram-label::after {
  content: '';
  height: 1px;
  flex: 1;
  margin-top: 12px;
  background: var(--color-chart);
}
.source-list {
  display: grid;
  gap: var(--connecter-sourceGap);
}
.source-card {
  transform-origin: 100% 50%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 19px;
  min-height: var(--connecter-source);
  padding: 12px 20px;
  border: 1px solid
    color-mix(in srgb, var(--color-graphite) 45%, var(--color-canvas));
  border-radius: var(--radius-control);
  background: var(--color-canvas);
}
.source-label {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.055em;
}
.source-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-graphite);
  opacity: 0.6;
  font-size: 12px;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.source-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.connecter-micro {
  width: 42px;
  height: 34px;
  overflow: visible;
}
.micro-track {
  stroke: var(--color-line);
  stroke-width: 1;
}
.micro-line {
  stroke: var(--color-graphite);
  stroke-width: 1.7;
  stroke-linecap: round;
}
.micro-soft {
  stroke: var(--color-chart);
  stroke-width: 1.2;
}
.micro-fill {
  fill: var(--color-chart);
}
.micro-fill-soft {
  fill: var(--color-line);
}
.micro-accent {
  fill: var(--color-accent);
}
.micro-accent-line {
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.connecter-engine {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: var(--connecter-panel);
  padding: 31px 28px 20px;
  border: 1px solid var(--color-graphite);
  border-radius: var(--radius-control);
  background: var(--color-graphite);
  color: var(--color-surface);
  box-shadow: var(--shadow-panel);
}
.engine-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  margin-bottom: 16px;
}
.engine-steps {
  display: grid;
  grid-template-rows: repeat(4, 61px);
}
.engine-step {
  position: relative;
  display: flex;
  gap: 27px;
  align-items: center;
  padding-inline: 27px 8px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-surface) 24%, transparent);
}
.engine-active {
  position: absolute;
  inset: 0;
  border-left: 3px solid var(--color-accent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-surface) 3%, transparent),
    transparent
  );
  opacity: 0;
  pointer-events: none;
}
.engine-index {
  position: relative;
  font: 400 15px/1 var(--font-mono);
  letter-spacing: 0.07em;
  color: var(--color-fill);
}
.engine-index-accent {
  position: absolute;
  inset: 0;
  color: var(--color-accent);
  opacity: 0;
}
.engine-step--rest .engine-active,
.engine-step--rest .engine-index-accent {
  opacity: 1;
}
.engine-label {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.engine-forecast {
  margin-left: auto;
  width: 66px;
  height: 24px;
  stroke: var(--color-fill);
  stroke-width: 1.2;
  opacity: 0.8;
}
.engine-forecast [data-forecast-trace] {
  stroke: var(--color-accent);
  stroke-width: 1.5;
  opacity: 0;
}
.engine-selection {
  display: flex;
  gap: 4px;
  margin-left: auto;
  opacity: 0;
}
.engine-selection i {
  width: 9px;
  height: 3px;
  background: var(--color-fill);
}
.engine-selection i:nth-child(2) {
  background: var(--color-accent);
}
.engine-context {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
  margin-top: 26px;
  color: var(--color-fill);
  font-size: 12px;
  line-height: 20px;
}
.engine-context > span:first-child::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
}
.engine-context > span:nth-child(2) {
  color: var(--color-chart);
}
.decision-list {
  display: grid;
  height: calc(var(--connecter-panel) - var(--connecter-heading));
  grid-template-rows: repeat(3, 1fr);
}
.decision-row {
  --decision-inset: 24px;
  --decision-node-x: 0px;
  transform-origin: 0 var(--connecter-desktopDecisionAnchor);
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: var(--connecter-decisionVisual) auto;
  align-content: start;
  align-items: center;
  gap: 5px 20px;
  padding-top: var(--connecter-desktopDecisionInset);
  padding-left: var(--decision-inset);
}
.decision-row .connecter-micro {
  grid-area: 1 / 1;
  height: var(--connecter-decisionVisual);
}
.decision-anchor {
  grid-area: 1 / 1;
  place-self: center start;
  width: 0;
  height: 0;
  margin-left: calc(var(--decision-node-x) - var(--decision-inset));
}
.decision-copy {
  display: contents;
}
.decision-title {
  grid-area: 1 / 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.055em;
}
.decision-copy > p {
  grid-area: 2 / 2;
  font-size: 14px;
  color: var(--color-graphite);
  opacity: 0.6;
  line-height: 1.4;
  letter-spacing: -0.04em;
}
.connecter-wires {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
}
.wire-fallback {
  overflow: visible;
  width: 100%;
  height: var(--connecter-panel);
  pointer-events: none;
}
.wire-incoming,
.wire-outgoing {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.wire-incoming {
  stroke: var(--color-graphite);
}
.wire-outgoing {
  stroke: var(--color-accent);
}
.wire-node,
.wire-signal {
  fill: var(--color-accent);
}
.wire-signal {
  stroke: var(--color-canvas);
  stroke-width: 1;
  opacity: 0;
}
.junction-pulse {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1;
  opacity: 0;
}
.connecter-diagram[data-connected] .wire-fallback {
  visibility: hidden;
}
.connecter-diagram[data-connected] .connecter-wires {
  visibility: visible;
}
.mobile-input,
.mobile-output-bridge,
.mobile-output-rail {
  display: none;
}
.connecter-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 38px;
  padding-top: 37px;
}
.connecter-section:focus-visible .connecter-engine {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}
@media (1200px <= width < 1450px) {
  .connecter-heading {
    gap: 26px;
  }
  .source-card {
    column-gap: 12px;
    padding-inline: 14px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }
  .source-card .connecter-micro {
    width: 32px;
  }
  .source-label {
    font-size: 15px;
  }
  .source-status {
    font-size: 11px;
    gap: 4px;
  }
  .connecter-engine {
    padding-inline: 20px;
  }
  .engine-step {
    gap: 20px;
    padding-inline: 18px 4px;
  }
  .engine-forecast {
    width: 46px;
  }
  .decision-row {
    --decision-inset: 18px;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 15px;
  }
  .decision-row .connecter-micro {
    width: 36px;
  }
  .decision-title {
    font-size: 18px;
  }
  .decision-copy > p {
    font-size: 13px;
  }
  .diagram-label {
    font-size: 15px;
    gap: 14px;
  }
}
@media (width < 1200px) {
  .source-card:nth-child(even) {
    transform-origin: 0 50%;
  }
  .decision-row {
    transform-origin: 16px var(--connecter-mobileDecisionAnchor);
  }
  .connecter-section {
    padding-block: 64px 48px;
  }
  .connecter-heading {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 28px;
  }
  .connecter-heading h2 {
    font-size: clamp(40px, 6.7vw, 74px);
  }
  .connecter-description {
    font-size: 19px;
    letter-spacing: -0.025em;
  }
  .connecter-diagram {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 680px;
    margin-inline: auto;
    gap: var(--connecter-bridge);
    padding: 26px 16px;
    margin-top: 34px;
  }
  .source-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--connecter-mobileGap);
  }
  .source-card {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: var(--connecter-mobileSource);
    padding: 16px;
    column-gap: 12px;
  }
  .source-card .connecter-micro {
    grid-row: 1 / 3;
  }
  .source-label {
    align-self: end;
    font-size: 17px;
  }
  .source-status {
    grid-column: 2;
    align-self: start;
    margin-top: 6px;
  }
  .connecter-engine {
    width: min(100%, 394px);
    margin-inline: auto;
  }
  .connecter-decisions {
    padding-left: 0;
  }
  .connecter-decisions .diagram-label {
    padding-left: 32px;
  }
  .decision-list {
    height: auto;
    gap: var(--connecter-mobileGap);
    grid-template-rows: repeat(3, var(--connecter-decision));
  }
  .decision-row {
    --decision-inset: 32px;
    --decision-node-x: 16px;
    padding-top: var(--connecter-mobileDecisionInset);
    column-gap: 22px;
  }
  .decision-title {
    font-size: 21px;
  }
  .decision-copy > p {
    font-size: 14px;
  }
  .desktop-input,
  .desktop-output {
    display: none;
  }
  .mobile-input {
    display: block;
    position: absolute;
    top: var(--connecter-heading);
    left: calc(50% - 8px);
    width: 16px;
    height: calc(
      2 * var(--connecter-mobileSource) + var(--connecter-mobileGap) +
        var(--connecter-bridge)
    );
  }
  .mobile-output-bridge {
    display: block;
    position: absolute;
    top: calc(-1 * var(--connecter-bridge));
    left: 8px;
    width: calc(50% - 8px);
    height: calc(
      var(--connecter-bridge) + var(--connecter-heading) +
        var(--connecter-mobileDecisionAnchor)
    );
  }
  .mobile-output-rail {
    display: block;
    position: absolute;
    left: 0;
    top: var(--connecter-heading);
    width: 16px;
    height: calc(
      3 * var(--connecter-decision) + 2 * var(--connecter-mobileGap)
    );
  }
  .connecter-benefits {
    margin-top: 28px;
    gap: 16px;
    padding-inline: 0;
  }
}
@media (width < 640px) {
  .connecter-section {
    padding-top: 52px;
  }
  .connecter-heading h2 {
    font-size: clamp(26px, 9.2cqi, 50px);
    line-height: 1.06;
    letter-spacing: -0.055em;
  }
  .connecter-description {
    font-size: 17px;
    line-height: 1.5;
  }
  .connecter-description > span + span {
    margin-top: 3px;
  }
  .connecter-diagram {
    padding-inline: 0;
  }
  .diagram-label {
    font-size: 14px;
    letter-spacing: 0.16em;
  }
  .source-card {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 8px;
    padding: 14px 10px;
  }
  .source-card .connecter-micro {
    width: 26px;
  }
  .source-label {
    font-size: 14px;
    align-self: center;
  }
  .source-status {
    grid-column: 2;
    margin-top: 8px;
    font-size: 11px;
    gap: 4px;
  }
  .connecter-engine {
    padding-inline: 22px;
  }
  .engine-step {
    gap: 24px;
    padding-inline: 20px 4px;
  }
  .decision-row {
    column-gap: 16px;
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .decision-row .connecter-micro {
    width: 36px;
  }
  .decision-title {
    font-size: 18px;
  }
  .decision-copy > p {
    line-height: 1.45;
  }
  .connecter-benefits {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 28px;
  }
}
@media (1200px <= width < 1280px) {
  .connecter-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}
@media (width >= 1200px) and (height < 1000px) {
  .connecter-section {
    padding-block: 32px 28px;
  }
  .connecter-heading {
    margin-top: 26px;
  }
  .connecter-diagram {
    margin-top: 32px;
    padding-block: 24px;
  }
  .connecter-benefits {
    margin-top: 24px;
    padding-top: 24px;
  }
}

/* Finitions du schéma existant : surfaces neutres et plans discrets. */
.connecter-section {
  --color-ink: var(--color-graphite);
  --color-muted: #666;
  --color-line: #dedede;
  --color-chart: #999;
  --color-fill: #c9c9c9;
  --color-connection: #b9b9b9;
}
.connecter-diagram::before {
  opacity: calc(0.26 * var(--scene-reveal, 1));
}
@media (width >= 1920px) {
  .connecter-section > .site-container {
    max-width: 1760px;
  }
}
.source-card {
  border-color: #c8c8c8;
  background: linear-gradient(145deg, #fff, #fafafa);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 3px rgb(0 0 0 / 0.025),
    0 10px 24px rgb(0 0 0 / 0.045);
}
.connecter-engine {
  isolation: isolate;
  background: var(--surface-dark-background);
  border-color: #414141 #1b1b1b #080808;
  box-shadow: var(--surface-dark-shadow);
}
.connecter-engine::before {
  content: '';
  position: absolute;
  inset: 6px -7px -7px 7px;
  z-index: -1;
  border: 1px solid #d0d0d0;
  border-radius: inherit;
  pointer-events: none;
}
.connecter-engine::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(255 255 255 / 0.045);
  border-radius: 3px;
  pointer-events: none;
}
.engine-step {
  border-bottom-color: rgb(255 255 255 / 0.15);
}
.decision-row::after {
  content: '';
  position: absolute;
  left: var(--decision-inset);
  right: 0;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, #dedede, transparent);
  pointer-events: none;
}
.period-selector[data-astro-cid-oonebbzk] {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
}

button[data-astro-cid-oonebbzk] {
  min-width: 76px;
  min-height: 44px;
  padding: 9px 14px;
  border-radius: calc(var(--radius-control) - 1px);
  color: var(--color-graphite);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color var(--motion-hover) var(--motion-ease-transition),
      color var(--motion-hover) var(--motion-ease-transition);
}

button[data-astro-cid-oonebbzk] + button[data-astro-cid-oonebbzk] {
  border-inline-start: 1px solid var(--color-line);
}

button[data-astro-cid-oonebbzk][aria-selected="true"] {
  background: var(--color-graphite);
  color: var(--color-surface);
}

@media (hover: hover) {
  button[data-astro-cid-oonebbzk]:not([aria-selected="true"]):hover {
    background: var(--color-track);
  }
}

button[data-astro-cid-oonebbzk]:focus-visible {
  position: relative;
  z-index: 1;
}

@media (width < 640px) {
  .period-selector[data-astro-cid-oonebbzk] {
    display: grid;
    width: 100%;
  }

  button[data-astro-cid-oonebbzk] {
    min-width: 0;
    font-size: 14px;
  }
}
praedixa-anticiper {
  display: block;
}
.anticiper-section {
  --color-line: #e2e2e2;
  --color-fill: #c8c8c8;
  --color-connection: #b9b9b9;
  --color-track: #f2f2f2;
  padding-block: 80px 56px;
  min-height: var(--viewport-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (width >= 1920px) {
  .anticiper-section > .site-container {
    max-width: 1760px;
  }
}
.anticiper-composition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 2.3cqi, 36px);
  align-items: stretch;
}
.anticiper-section:focus-visible .forecast-card {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}
.anticiper-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 44px 28px;
  min-width: 0;
}
.anticiper-copy h2 {
  margin-top: 36px;
  font-size: clamp(40px, 4.5cqi, 64px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.058em;
}
.anticiper-copy h2 > span {
  display: block;
  white-space: nowrap;
}
.anticiper-copy h2 > span + span {
  margin-top: 5px;
  color: var(--color-accent);
}
.anticiper-description {
  max-width: 32ch;
  margin-top: 30px;
  font-size: clamp(18px, 1.48cqi, 21px);
  line-height: 1.55;
  letter-spacing: -0.035em;
  color: color-mix(in srgb, var(--color-graphite) 76%, var(--color-canvas));
}
.anticiper-capabilities {
  display: grid;
  width: min(100%, 330px);
  gap: 24px;
  margin-block: 48px 0;
  font-size: 19px;
  letter-spacing: -0.04em;
  line-height: 1.4;
}
.anticiper-capabilities li {
  position: relative;
  padding-left: 28px;
}
.anticiper-capabilities li::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  left: 0;
  top: 9px;
  border-radius: 1px;
  background: var(--color-fill);
}
.anticiper-capabilities li[aria-current='true'] {
  font-weight: 650;
}
.anticiper-capabilities li[aria-current='true']::before {
  background: var(--color-accent);
}
.anticiper-capabilities li:not(:last-child)::after {
  content: '';
  position: absolute;
  width: 1px;
  height: calc(100% + 24px);
  left: 4px;
  top: 14px;
  background: var(--color-line);
}
.horizon-label {
  display: block;
}
.horizon-distance {
  display: block;
  position: relative;
  width: 100%;
  height: 14px;
  margin-top: 9px;
  background: repeating-linear-gradient(
      90deg,
      #dedede 0 1px,
      transparent 1px 20px
    )
    left center / 100% 5px no-repeat;
}
.horizon-distance > span {
  display: block;
  position: absolute;
  left: 0;
  top: 6px;
  width: 7.1429%;
  height: 1px;
  background: #a5a5a5;
}
[data-forecast-horizon='week'] .horizon-distance > span {
  width: 50%;
}
[data-forecast-horizon='fortnight'] .horizon-distance > span {
  width: 100%;
}
.horizon-distance > span::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  background: inherit;
}
[aria-current='true'] .horizon-distance > span {
  background: var(--color-accent);
}
.anticiper-explore {
  margin-top: auto;
  padding-top: 52px;
  gap: 10px;
  color: var(--color-graphite);
  text-decoration-color: var(--color-connection);
  font-size: 17px;
  letter-spacing: -0.03em;
}
.forecast-card {
  min-width: 0;
  padding: 24px 18px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: linear-gradient(155deg, #fff 0%, #fff 38%, #f7f7f7 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgb(0 0 0 / 0.025),
    0 18px 46px -20px rgb(0 0 0 / 0.17);
}
.forecast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 12px 26px;
}
.forecast-header h3 {
  font-size: clamp(22px, 2.05cqi, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.05em;
}
.forecast-header p {
  margin-top: 5px;
  color: #616161;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.035em;
}
.forecast-views {
  display: grid;
  isolation: isolate;
}
.forecast-panel {
  grid-area: 1 / 1;
  min-width: 0;
}
.forecast-figure {
  border: 0;
  --forecast-red: #ff6470;
  --forecast-text: #eeeeee;
  --forecast-muted: #b5b5b5;
  --forecast-grid: #494949;
  border-radius: 4px;
  color: var(--forecast-text);
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
  padding: 24px 22px 22px;
}
.forecast-chart-meta {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  justify-content: space-between;
  gap: 5px 12px;
  min-height: 34px;
  line-height: 1.4;
}
.forecast-unit {
  font-size: 13px;
  font-weight: 500;
}
.forecast-range {
  color: var(--forecast-muted);
  font-size: 11px;
}
.forecast-canvas {
  position: relative;
  height: clamp(285px, 27cqi, 370px);
}
.forecast-plot {
  position: absolute;
  inset: 50px 12px 36px 30px;
}
.forecast-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.forecast-svg path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.forecast-grid path {
  stroke: var(--forecast-grid);
  stroke-width: 1;
  opacity: 0.42;
}
.forecast-axis {
  stroke: var(--forecast-grid);
  stroke-width: 1;
}
.forecast-svg .forecast-band {
  fill: var(--forecast-red);
  opacity: 0.16;
}
.forecast-svg .forecast-band-accent {
  fill: var(--forecast-red);
  opacity: 0;
}
.forecast-rush-window {
  fill: var(--forecast-red);
  opacity: 0.07;
}
.anticiper-section .forecast-history {
  stroke: #d7d7d7;
  stroke-width: 2;
}
.forecast-line,
.forecast-trace {
  stroke: var(--forecast-red);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.forecast-trace {
  opacity: 0;
  stroke-width: 2.6;
}
.forecast-guide {
  stroke: var(--forecast-text);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.6;
}
.forecast-guide--rush {
  stroke: var(--forecast-red);
  opacity: 0.8;
}
.forecast-y-tick,
.forecast-x-tick {
  position: absolute;
  font-size: 12px;
  color: var(--forecast-muted);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.forecast-y-tick {
  right: calc(100% + 12px);
  transform: translateY(-50%);
}
.forecast-x-tick {
  top: calc(100% + 16px);
  transform: translateX(-50%);
}
.forecast-x-tick:last-of-type {
  transform: translateX(-100%);
}
.forecast-annotation {
  position: absolute;
  top: -45px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}
.forecast-annotation--rush {
  padding-right: 9px;
  color: var(--forecast-red);
  transform: translateX(-100%);
  text-align: right;
}
.forecast-annotation--rush span {
  display: block;
}
.forecast-annotation--event {
  top: -26px;
  padding-left: 8px;
}
.forecast-marker,
.forecast-event-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--forecast-text);
  transform: translate(-50%, -50%);
}
.forecast-marker--rush {
  width: 11px;
  height: 11px;
  border-radius: 1px;
  background: var(--forecast-red);
}
.forecast-event-dot {
  top: 0;
  width: 5px;
  height: 5px;
}
.forecast-marker i {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: var(--forecast-text);
  opacity: 0;
}
.forecast-marker--rush i {
  background: var(--forecast-red);
}
.forecast-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  min-height: 22px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--forecast-muted);
}
.forecast-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.forecast-legend li > span {
  display: block;
  width: 29px;
  height: 2px;
  flex: 0 0 auto;
  background: #d7d7d7;
}
.forecast-legend .legend-forecast {
  background: var(--forecast-red);
}
.forecast-legend .legend-band {
  width: 23px;
  height: 13px;
  background: color-mix(in srgb, var(--forecast-red) 25%, #111);
}
.forecast-summary {
  display: grid;
  grid-template-columns: auto minmax(32px, 1fr) auto;
  align-items: center;
  gap: 19px;
  padding: 24px 16px 12px;
  margin-top: 4px;
  border: 0;
}
.forecast-metric {
  min-width: 0;
}
.forecast-metric-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: calc(3.9ch + 68px);
  font-size: clamp(60px, 6.1cqi, 88px);
}
.forecast-total {
  position: relative;
  display: inline-block;
  font-size: 1em;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.065em;
  font-variant-numeric: tabular-nums;
}
.forecast-total > span {
  position: absolute;
  inset: auto 5px -5px 0;
  height: 2px;
  background: var(--color-accent);
  opacity: 0;
}
.forecast-metric-label {
  font-size: 16px;
  letter-spacing: -0.045em;
  line-height: 1.25;
}
.forecast-scope {
  margin-top: 10px;
  font-size: 11px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-graphite) 64%, var(--color-canvas));
}
.forecast-action-wire {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
}
.forecast-action-wire path {
  stroke: var(--color-accent);
  stroke-width: 1;
  fill: none;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}
.forecast-action-node,
.forecast-action-signal {
  fill: var(--color-accent);
}
.forecast-action-signal {
  opacity: 0;
}
.forecast-action {
  position: relative;
  isolation: isolate;
}
.forecast-prepare {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 57px;
  padding: 13px 17px;
  border-radius: var(--radius-control);
  font-size: clamp(13px, 1.1cqi, 15px);
  gap: 14px;
  letter-spacing: -0.04em;
}
.forecast-action-feedback {
  position: absolute;
  inset: -4px;
  border: 1px solid var(--color-accent);
  border-radius: calc(var(--radius-control) + 3px);
  opacity: 0;
  pointer-events: none;
}
.anticiper-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  padding-top: 21px;

  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-graphite) 66%, var(--color-canvas));
}

@media (width < 1200px) {
  .anticiper-section {
    padding-top: 56px;
  }
  .anticiper-composition {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }
  .anticiper-copy {
    padding: 0;
  }
  .anticiper-copy h2 {
    font-size: clamp(44px, 7.6cqi, 76px);
    margin-top: 28px;
  }
  .anticiper-description {
    max-width: 42ch;
    font-size: 20px;
    margin-top: 24px;
  }
  .anticiper-capabilities {
    margin-top: 32px;
    gap: 21px;
  }
  .anticiper-capabilities li:not(:last-child)::after {
    height: calc(100% + 21px);
  }
  .anticiper-explore {
    margin-top: 28px;
    padding: 0;
  }
  .forecast-header h3 {
    font-size: 28px;
  }
  .forecast-canvas {
    height: 345px;
  }
  .forecast-metric-main {
    font-size: 72px;
  }
  .forecast-prepare {
    font-size: 15px;
  }
}
@media (width < 640px) {
  .anticiper-section {
    padding-block: 40px;
  }
  .anticiper-composition {
    gap: 30px;
  }
  .anticiper-copy h2 {
    font-size: clamp(34px, 9.8cqi, 56px);
    letter-spacing: -0.06em;
  }
  .anticiper-description {
    font-size: 18px;
    line-height: 1.55;
    max-width: 32ch;
  }
  .anticiper-capabilities {
    font-size: 17px;
  }
  .anticiper-explore {
    font-size: 16px;
  }
  .forecast-card {
    padding: 17px 10px 10px;
  }
  .forecast-header {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 0 3px 18px;
  }
  .forecast-header h3 {
    font-size: 25px;
  }
  .forecast-header p {
    font-size: 16px;
  }
  .forecast-figure {
    padding: 14px 10px 12px;
  }
  .forecast-chart-meta {
    display: block;
    min-height: 47px;
  }
  .forecast-range {
    margin-top: 5px;
    font-size: 10px;
  }
  .forecast-unit {
    font-size: 12px;
  }
  .forecast-canvas {
    height: 275px;
  }
  .forecast-plot {
    inset: 50px 12px 36px 25px;
  }
  .forecast-y-tick,
  .forecast-x-tick {
    font-size: 11px;
  }
  .forecast-y-tick {
    right: calc(100% + 8px);
  }
  .forecast-tick-secondary {
    display: none;
  }
  .forecast-annotation {
    font-size: 11px;
  }
  .forecast-annotation--rush {
    padding-right: 7px;
  }
  .forecast-annotation--event {
    padding-left: 4px;
  }
  .forecast-legend {
    gap: 9px 16px;
    font-size: 11px;
    min-height: 42px;
    align-content: center;
  }
  .forecast-legend li {
    gap: 6px;
  }
  .forecast-legend li > span {
    width: 19px;
  }
  .forecast-legend .legend-band {
    width: 17px;
    height: 11px;
  }
  .forecast-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 19px;
    padding: 17px 12px;
  }
  .forecast-metric-main {
    gap: 17px;
    font-size: 68px;
    min-width: 0;
  }
  .forecast-metric-label {
    font-size: 17px;
  }
  .forecast-scope {
    font-size: 11px;
    margin-top: 9px;
  }
  .forecast-action-wire {
    width: 24px;
    height: 24px;
    justify-self: center;
    margin-block: -8px;
  }
  .forecast-prepare {
    min-height: 54px;
    padding: 12px;
    font-size: 14px;
    text-align: left;
    justify-content: space-between;
    gap: 10px;
  }
  .anticiper-footer {
    gap: 12px;
    margin-top: 28px;
    padding-top: 18px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

.forecast-prepare .button-arrow {
  rotate: 135deg;
}

[data-flow-connected] .forecast-action-signal,
[data-flow-connected] .forecast-action-feedback,
[data-flow-connected] [data-metric-pulse] {
  visibility: hidden;
}
praedixa-stocks {
  display: block;
}
.stocks-section {
  padding-block: clamp(88px, 8vw, 140px) 72px;
  scroll-margin-top: calc(var(--header-height) + 20px);
  --stocks-line: #e5e5e5;
  --stocks-muted: #747474;
}
.stocks-content {
  width: min(100%, var(--stock-content-width, 100%));
  container-type: inline-size;
}
.stocks-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: end;
  gap: 40px;
  margin-top: 32px;
}
.stocks-heading h2 {
  font-size: clamp(42px, 5.3cqi, 86px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.058em;
}
.stocks-heading h2 span {
  display: block;
  white-space: nowrap;
}
.stocks-heading h2 span + span {
  color: var(--color-accent);
}
.stocks-heading > p {
  max-width: 36ch;
  padding-bottom: 4px;
  font-size: clamp(17px, 1.55cqi, 24px);
  line-height: 1.5;
  letter-spacing: -0.035em;
}
.stocks-composition {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 26fr) minmax(0, 21fr) minmax(0, 38fr);
  gap: 7.5%;
  margin-top: 60px;
}
.stocks-composition::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -20px -16px -24px;
  background-image: radial-gradient(#cecece 0.7px, transparent 0.8px);
  background-size: 16px 16px;
  opacity: calc(0.56 * var(--scene-reveal, 1));
  mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent);
  pointer-events: none;
}
.stocks-stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.stocks-stage-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font: 400 clamp(10px, 0.93cqi, 14px)/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #575757;
}
.stocks-stage-label > span {
  color: var(--color-accent);
  font-weight: 600;
  white-space: nowrap;
}

.stocks-card {
  position: relative;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  background: linear-gradient(145deg, #fff, #fefefe);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgb(0 0 0 / 0.025),
    0 12px 28px -8px rgb(0 0 0 / 0.08);
}
.stocks-demand {
  flex: 1;
  padding: clamp(18px, 1.65cqi, 28px);
  display: flex;
  flex-direction: column;
}

.stocks-service {
  display: flex;
  gap: 8px;
  font: 400 clamp(9px, 0.79cqi, 12px)/1.6 var(--font-mono);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: #585858;
}
.stocks-volumes {
  margin-top: 12px;
}
.stocks-volumes > div {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: clamp(18px, 1.6cqi, 28px);
}
.stocks-volumes > div + div {
  border-top: 1px solid var(--stocks-line);
}
.stocks-volumes dt {
  order: 2;
  font-size: clamp(13px, 1.22cqi, 19px);
  letter-spacing: -0.04em;
  line-height: 1.4;
}
.stocks-volumes dd {
  min-width: 2.1ch;
  font-size: clamp(46px, 4.5cqi, 74px);
  font-weight: 750;
  letter-spacing: -0.065em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stocks-chart {
  margin-top: auto;
  padding-top: 24px;
  color: var(--color-accent);
}
.stocks-chart svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.stocks-chart-grid {
  stroke: #e9e9e9;
  stroke-width: 1;
}
.stocks-chart-ticks {
  fill: var(--stocks-muted);
  font-size: 10px;
  text-anchor: end;
}
.stocks-chart-history {
  stroke: #858585;
  stroke-width: 2;
  stroke-linejoin: round;
}
.stocks-chart-area {
  fill: url(#stocks-chart-fill);
}
.stocks-chart-divider {
  stroke: #ccc;
  stroke-dasharray: 4 3;
}
.stocks-chart-forecast {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
.stocks-chart-point {
  fill: white;
  stroke: currentColor;
  stroke-width: 1.5;
}
.stocks-chart-past-label,
.stocks-chart-next-label {
  font-size: 11px;
}
.stocks-chart-past-label {
  fill: var(--stocks-muted);
}
.stocks-chart-next-label {
  fill: currentColor;
}
.stocks-recipes {
  display: grid;
  gap: 18px;
  flex: 1;
}
.stocks-recipe {
  padding: clamp(16px, 1.5cqi, 26px);
}
.stocks-recipe h4,
.stocks-needs h4 {
  font-size: clamp(19px, 1.72cqi, 28px);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.15;
}
.stocks-recipe > p,
.stocks-needs-heading p {
  margin-top: 5px;
  font-size: clamp(12px, 1.05cqi, 17px);
  line-height: 1.4;
  color: var(--stocks-muted);
  letter-spacing: -0.025em;
}
.stocks-recipe dl {
  margin-top: 10px;
}
.stocks-recipe dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--stocks-line);
  padding-block: 5px;
  font-size: clamp(12px, 1.08cqi, 17px);
  letter-spacing: -0.035em;
}
.stocks-recipe dl > div:last-child {
  padding-bottom: 0;
}
.stocks-recipe dd {
  white-space: nowrap;
}
.stocks-needs {
  flex: 1;
  padding: clamp(18px, 1.65cqi, 28px);
  display: flex;
  flex-direction: column;
}
.stocks-needs h4 {
  font-size: clamp(23px, 2cqi, 32px);
}
.stocks-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 18px 0;
  font-size: clamp(12px, 1.2cqi, 19px);
  line-height: 1.35;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.stocks-table th,
.stocks-table td {
  text-align: left;
  padding: clamp(10px, 0.9cqi, 16px) clamp(6px, 0.75cqi, 13px);
  border-bottom: 1px solid var(--stocks-line);
}
.stocks-table thead th {
  font-size: clamp(8px, 0.75cqi, 12px);
  font-weight: 650;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  background: #f6f6f6;
  color: #626262;
}
.stocks-table thead th:last-child {
  white-space: nowrap;
}
.stocks-table tbody th {
  font-weight: 450;
}
.stocks-table td {
  color: #626262;
  white-space: nowrap;
}
.stocks-table tr > :last-child {
  background: color-mix(in srgb, var(--color-accent) 4%, white);
  color: var(--color-accent);
}
.stocks-table tbody td:last-child {
  font-weight: 750;
}
.stocks-calculation {
  margin-top: auto;
  padding-top: 18px;
  font-size: clamp(11px, 0.94cqi, 15px);
  color: var(--stocks-muted);
  letter-spacing: -0.025em;
}
.stocks-order-output {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 16px;
  padding: 13px 8px;
  border-radius: 7px;
  background: var(--color-accent);
  color: white;
  font-size: clamp(14px, 1.3cqi, 20px);
  font-weight: 500;
  letter-spacing: -0.035em;
}
.stocks-order-output svg {
  flex-shrink: 0;
}
.stocks-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.stocks-wires path {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.stocks-wires-in path {
  stroke: #989898;
}
.stocks-wires-out path {
  stroke: var(--color-accent);
}
.stocks-wires rect {
  fill: var(--color-accent);
}
.stocks-formula {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin-block: 46px 30px;
  font-size: clamp(16px, 1.6cqi, 25px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.045em;
}
.stocks-formula b {
  color: var(--color-accent);
  font-weight: 450;
}
.stocks-signatures {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
}
@media (width >= 1920px) {
  .stocks-section > .site-container {
    max-width: 1760px;
  }
}
@container (width <= 900px) {
  .stocks-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .stocks-heading h2 {
    font-size: clamp(38px, 7.3cqi, 70px);
  }
  .stocks-heading > p {
    max-width: 46ch;
    font-size: 18px;
  }
  .stocks-composition {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 54px 12%;
    margin-top: 58px;
  }
  .stocks-needs-stage {
    grid-column: 1 / -1;
  }
  .stocks-stage-label {
    font-size: 12px;
  }
  .stocks-service {
    font-size: 11px;
  }
  .stocks-volumes dt {
    font-size: 17px;
  }
  .stocks-volumes dd {
    font-size: 62px;
  }
  .stocks-volumes > div {
    padding-block: 26px;
  }
  .stocks-recipe h4 {
    font-size: 25px;
  }
  .stocks-recipe > p,
  .stocks-needs-heading p {
    font-size: 15px;
  }
  .stocks-recipe dl > div {
    font-size: 16px;
    padding-block: 7px;
  }
  .stocks-recipe,
  .stocks-demand,
  .stocks-needs {
    padding: 24px;
  }
  .stocks-table {
    font-size: 17px;
  }
  .stocks-table thead th {
    font-size: 11px;
  }
  .stocks-table th,
  .stocks-table td {
    padding: 14px 12px;
  }
  .stocks-calculation {
    font-size: 13px;
  }
  .stocks-order-output {
    font-size: 18px;
  }
  .stocks-formula {
    font-size: 18px;
  }
  .stocks-signatures {
    flex-wrap: wrap;
  }
}
@container (width <= 600px) {
  .stocks-heading {
    margin-top: 26px;
    gap: 22px;
  }
  .stocks-heading h2 {
    font-size: clamp(27px, 10.5cqi, 48px);
  }
  .stocks-heading > p {
    font-size: 17px;
    line-height: 1.5;
    max-width: 34ch;
  }
  .stocks-composition {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    margin-top: 56px;
  }
  .stocks-stage-label {
    margin-bottom: 24px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .stocks-needs-stage {
    grid-column: auto;
  }
  .stocks-demand,
  .stocks-recipe,
  .stocks-needs {
    padding: 22px;
  }
  .stocks-service {
    font-size: 10px;
  }
  .stocks-volumes > div {
    gap: 20px;
    padding-block: 22px;
  }
  .stocks-volumes dd {
    font-size: 60px;
  }
  .stocks-volumes dt {
    font-size: 17px;
  }
  .stocks-chart {
    padding-top: 12px;
  }
  .stocks-chart svg {
    max-height: 170px;
  }
  .stocks-recipes {
    gap: 16px;
  }
  .stocks-recipe h4 {
    font-size: 24px;
  }
  .stocks-recipe dl > div {
    padding-block: 7px;
  }
  .stocks-needs h4 {
    font-size: 25px;
  }
  .stocks-table {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .stocks-table thead th {
    font-size: 9px;
    letter-spacing: 0;
  }
  .stocks-table thead th:last-child {
    white-space: normal;
  }
  .stocks-table th,
  .stocks-table td {
    padding: 12px 6px;
  }
  .stocks-formula {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-block: 36px 28px;
    font-size: 18px;
  }
  .stocks-formula b {
    line-height: 1;
  }
  .stocks-signatures {
    flex-direction: column;
    gap: 20px;
  }
}
@container (width <= 320px) {
  .stocks-demand,
  .stocks-recipe {
    padding: 18px;
  }
  .stocks-needs {
    padding: 16px 12px;
  }
  .stocks-table {
    font-size: 12px;
  }
  .stocks-table th,
  .stocks-table td {
    padding-inline: 4px;
  }
  .stocks-table thead th {
    font-size: 9px;
  }
  .stocks-needs h4 {
    font-size: 23px;
  }
  .stocks-order-output {
    font-size: 16px;
    gap: 10px;
  }
  .stocks-service {
    font-size: 9px;
  }
  .stocks-volumes dt {
    font-size: 15px;
  }
  .stocks-volumes dd {
    font-size: 54px;
  }
}
@media (width < 640px) {
  .stocks-section {
    padding-block: 82px 48px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  praedixa-stocks:has([data-entrance-state]) .stocks-wires path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset var(--motion-path)
      var(--motion-ease-transition);
    transition-delay: 0.45s;
  }
  praedixa-stocks:has(
      .stocks-recipes-stage:is(
        [data-entrance-state='playing'],
        [data-entrance-state='complete']
      )
    )
    .stocks-wires-in
    path,
  praedixa-stocks:has(
      .stocks-needs-stage:is(
        [data-entrance-state='playing'],
        [data-entrance-state='complete']
      )
    )
    .stocks-wires-out
    path {
    stroke-dashoffset: 0;
  }
}

.stocks-demand-stage .stocks-stage-label {
  align-self: flex-start;
  max-width: calc(100% - 48px);
}

.stocks-reception-mark {
  position: absolute;
  top: -2px;
  right: 24px;
  left: auto;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}
praedixa-planning {
  display: block;
}
.planning-section {
  --planning-muted: #737373;
  --planning-line: #e7e7e7;
  padding-block: clamp(110px, 9vw, 172px) clamp(110px, 9vw, 164px);
  scroll-margin-top: calc(var(--header-height) + 20px);
}
.planning-section > .site-container {
  max-width: 1500px;
  container-name: planning;
}
.planning-layout {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
}
.planning-copy {
  position: relative;
  z-index: 2;
  padding-block: 28px;
}
.planning-copy h2 {
  margin-top: 36px;
  font-size: clamp(52px, 5.8cqi, 94px);
  line-height: 0.99;
  font-weight: 800;
  letter-spacing: -0.066em;
}
.planning-copy h2 > span {
  display: block;
  white-space: nowrap;
}
.planning-period {
  color: var(--color-accent);
}
.planning-description {
  max-width: 29ch;
  margin-top: 42px;
  font-size: clamp(20px, 1.92cqi, 30px);
  line-height: 1.38;
  letter-spacing: -0.046em;
  color: #4d4d4d;
}
.planning-capabilities {
  margin-top: 27px;
  max-width: 36ch;
  font-size: clamp(15px, 1.3cqi, 21px);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--planning-muted);
}
.planning-discover {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  margin-top: 55px;
  font-size: clamp(18px, 1.6cqi, 25px);
  letter-spacing: -0.045em;
}
.planning-discover > a {
  gap: 18px;
  min-height: 44px;
  color: var(--color-graphite);
}
.planning-discover svg {
  color: var(--color-accent);
  flex: 0 0 auto;
  transition: transform var(--motion-hover) var(--motion-ease-out);
}
@media (hover: hover) {
  .planning-discover:has(a[href]):hover svg {
    transform: translate(var(--motion-arrow), calc(-1 * var(--motion-arrow)));
  }
}
.planning-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 6%;
}
.planning-demand-dock {
  position: relative;
  margin-top: 70px;
  z-index: 2;
  min-width: 0;
}
.planning-demand-card {
  position: relative;
  border: 1px solid #eaeaea;
  border-radius: 13px;
  padding: 22px 18px 15px;
  background: linear-gradient(150deg, #fff 10%, #fdfdfd);
  box-shadow:
    0 2px 5px rgb(0 0 0 / 0.025),
    0 15px 38px -10px rgb(0 0 0 / 0.12),
    inset 0 1px 0 #fff;
}
.planning-demand-card h3 {
  font: 400 clamp(10px, 0.96cqi, 15px)/1.4 var(--font-mono);
  letter-spacing: 0.065em;
  text-transform: uppercase;
  color: #626262;
  white-space: nowrap;
}
.planning-demand-graph {
  position: relative;
  margin-top: 9px;
  aspect-ratio: 340 / 160;
  color: var(--color-accent);
}
.planning-demand-graph > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.planning-graph-area {
  fill: url('#planning-demand-fill');
}
.planning-graph-guide {
  stroke: #e6e6e6;
  stroke-dasharray: 3 3;
}
.planning-graph-history {
  stroke: #666;
  stroke-width: 1.7;
}
.planning-graph-forecast {
  stroke: var(--color-accent);
  stroke-opacity: 0.42;
  stroke-width: 1.7;
}
.planning-peak {
  position: absolute;
  left: 68.2353%;
  top: 16.875%;
  width: 1px;
  height: 1px;
}
.planning-peak i {
  position: absolute;
  left: -6px;
  top: -6px;
  display: block;
  width: 12px;
  height: 12px;
  background: var(--color-accent);
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow:
    0 0 0 7px rgb(255 255 255 / 0.72),
    0 0 17px var(--color-accent-soft);
}
.planning-peak-label {
  position: absolute;
  left: 59%;
  bottom: 0;
  font-size: clamp(12px, 1.06cqi, 17px);
  line-height: 1.45;
  white-space: nowrap;
  letter-spacing: -0.025em;
}
.planning-peak-label span {
  display: block;
  color: #6b6b6b;
}
.planning-peak-label strong {
  font-weight: 450;
}
.planning-demand-dock figcaption {
  margin-top: 15px;
  padding-inline: 4px;
  font-size: clamp(12px, 1.1cqi, 18px);
  line-height: 1.4;
  letter-spacing: -0.035em;
  color: #6b6b6b;
}
.planning-flow-anchor {
  position: absolute;
  top: -1px;
  left: 23px;
  width: 10px;
  height: 2px;
  z-index: 3;
  background: var(--color-accent);
}
.planning-connection {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.planning-connection path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.planning-device-dock {
  position: relative;
  width: 100%;
  max-width: 440px;
  justify-self: end;
  container-type: inline-size;
}
.planning-phone-entry {
  position: absolute;
  left: 0;
  top: 31.5%;
  width: 1px;
  height: 1px;
}
.planning-device-shadow {
  position: absolute;
  height: 7%;
  left: -12%;
  right: -12%;
  bottom: -2%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgb(0 0 0 / 0.23),
    rgb(0 0 0 / 0.07) 40%,
    transparent 70%
  );
  filter: blur(7px);
}
.planning-device {
  position: relative;
  padding: 2.6cqi;
  border-radius: 15.2cqi;
  background: linear-gradient(
    105deg,
    #282828,
    #c0c0c0 1%,
    #191919 2.3%,
    #525252 3.1%,
    #101010 5%,
    #050505 92%,
    #7e7e7e 97%,
    #202020 98.8%,
    #989898
  );
  box-shadow:
    0 0 0 1px #777,
    inset 0 0 0 1.2px #b9b9b9,
    inset 0 0 0 3px #343434,
    0 4px 5px rgb(0 0 0 / 0.12),
    0 26px 35px -22px rgb(0 0 0 / 0.36);
}
.planning-device::before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 1.05cqi;
  border: 1px solid #777;
  border-radius: 14.3cqi;
  box-shadow: inset 0 0 0 1px #000;
}
.planning-screen {
  position: relative;
  overflow: hidden;
  min-height: 187cqi;
  border-radius: 12.6cqi;
  background: linear-gradient(120deg, #fff, #fdfdfd 60%, #fafafa);
  border: 1px solid #ccc;
  color: #111;
}
.planning-screen:focus-visible {
  outline-offset: -5px;
}
.planning-hardware-button {
  position: absolute;
  z-index: -1;
  background: linear-gradient(90deg, #313131, #aaa, #303030);
  width: 1cqi;
  border-radius: 1cqi;
  left: -0.65cqi;
}
.planning-hardware-button--mute {
  top: 18%;
  height: 4%;
}
.planning-hardware-button--volume {
  top: 26%;
  height: 16%;
}
.planning-hardware-button--power {
  top: 29%;
  height: 13%;
  left: auto;
  right: -0.65cqi;
}
.planning-status-bar {
  position: relative;
  height: 16cqi;
  padding: 4.2cqi 7cqi 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 3.5cqi;
  font-weight: 650;
  letter-spacing: -0.04em;
}
.planning-camera {
  position: absolute;
  top: 2.6cqi;
  left: 50%;
  transform: translateX(-50%);
  width: 29cqi;
  height: 8cqi;
  border-radius: 8cqi;
  background: linear-gradient(150deg, #171717, #020202 65%);
  box-shadow: inset 0 1px 2px #555;
}
.planning-camera i {
  position: absolute;
  top: 2.5cqi;
  right: 3cqi;
  width: 3cqi;
  height: 3cqi;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    #50545c,
    #121820 35%,
    #070707 65%
  );
}
.planning-status-icons {
  width: 16cqi;
  height: 3.7cqi;
  margin-top: 0.6cqi;
}
.planning-app {
  padding: 2cqi 4.6cqi 10cqi;
}
.planning-app-header {
  padding-bottom: 6.5cqi;
  border-bottom: 1px solid var(--planning-line);
}
.planning-app-header > p {
  color: var(--planning-muted);
  font-size: 4.7cqi;
  line-height: 1.35;
  letter-spacing: -0.045em;
}
.planning-app-header h3 {
  margin-top: 0.9cqi;
  font-size: 9cqi;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.067em;
}
.planning-app-header .planning-app-date {
  margin-top: 1.8cqi;
  font-size: max(14px, 4.9cqi);
  letter-spacing: -0.06em;
}
.planning-service-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: 4.5cqi 5cqi;
}
.planning-service-title h4 {
  font-size: max(14px, 4.85cqi);
  font-weight: 650;
  letter-spacing: -0.05em;
}
.planning-service-title > span {
  width: 2.4cqi;
  height: 2.4cqi;
  background: var(--color-accent);
  border-radius: 50%;
}
.planning-roster {
  position: relative;
  --roster-label: 23%;
  padding-top: 8cqi;
}
.planning-hours {
  position: absolute;
  left: var(--roster-label);
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  color: var(--planning-muted);
  font-size: 3.65cqi;
  letter-spacing: -0.045em;
  line-height: 1.3;
}
.planning-hours span {
  width: 0;
  display: flex;
  justify-content: center;
}
.planning-hours span:first-child {
  justify-content: flex-start;
}
.planning-hours span:last-child {
  justify-content: flex-end;
}
.planning-hours span:nth-child(3) {
  color: var(--color-accent);
}
.planning-roster-grid {
  position: absolute;
  top: 4.5cqi;
  bottom: 0;
  left: var(--roster-label);
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.planning-roster-grid span {
  border-left: 1px dashed #e6e6e6;
}
.planning-roster-grid span:nth-child(3) {
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}
.planning-roster-grid span:last-child {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
.planning-person {
  position: relative;
  display: grid;
  grid-template-columns: var(--roster-label) 1fr;
  align-items: center;
  min-height: 13.35cqi;
}
.planning-person-label {
  padding-block: 2.2cqi;
  line-height: 1.15;
  letter-spacing: -0.045em;
}
.planning-person-label strong {
  display: block;
  font-size: max(12px, 3.85cqi);
  font-weight: 550;
}
.planning-person-label > span {
  display: block;
  margin-top: 0.6cqi;
  font-size: max(10px, 3.3cqi);
  color: var(--planning-muted);
}
.planning-person-shift {
  position: relative;
  height: 4.4cqi;
}
.planning-shift-base,
.planning-shift-peak {
  display: block;
  position: absolute;
  inset-block: 0;
  border-radius: 1.35cqi;
  transform-origin: left center;
}
.planning-shift-base {
  left: var(--shift-start);
  right: var(--shift-end);
  background: linear-gradient(#ddd, #d4d4d4);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.6);
}
.planning-shift-peak {
  left: 50%;
  width: 25%;
  background: var(--color-accent);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.17);
}
.planning-service-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqi;
  padding: 3.8cqi 4.2cqi;
  margin-top: 3.5cqi;
  border: 1px solid var(--planning-line);
  border-radius: 2.4cqi;
  line-height: 1.4;
  letter-spacing: -0.05em;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.015);
}
.planning-service-summary p {
  color: var(--planning-muted);
  font-size: 3.8cqi;
}
.planning-service-summary strong {
  font-size: max(14px, 4.55cqi);
  font-weight: 500;
  white-space: nowrap;
}
.planning-service-summary > span {
  width: 3.3cqi;
  height: 3.3cqi;
  border-radius: 0.6cqi;
  background: var(--color-accent);
  flex-shrink: 0;
}
.planning-home-indicator {
  position: absolute;
  bottom: 2.6cqi;
  left: 33%;
  right: 33%;
  height: 1.2cqi;
  border-radius: 2cqi;
  background: #080808;
}
@media (width >= 1920px) {
  .planning-section > .site-container {
    max-width: 1760px;
  }
}
@container planning (width <= 1150px) {
  .planning-layout {
    grid-template-columns: 1fr;
    gap: 65px;
  }
  .planning-copy {
    max-width: 800px;
    padding-block: 0;
  }
  .planning-copy h2 {
    font-size: clamp(48px, 7.7cqi, 78px);
  }
  .planning-copy h2 > span:nth-child(2),
  .planning-copy h2 > span:nth-child(3) {
    display: inline-block;
  }
  .planning-copy h2 > span:nth-child(2) {
    margin-inline-end: 0.16em;
  }
  .planning-description {
    max-width: 40ch;
    font-size: 23px;
    margin-top: 30px;
  }
  .planning-capabilities {
    font-size: 18px;
    margin-top: 20px;
  }
  .planning-discover {
    font-size: 21px;
    margin-top: 28px;
  }
  .planning-scene {
    width: min(100%, 850px);
    justify-self: center;
    gap: 8%;
  }
  .planning-demand-card h3 {
    font-size: 12px;
  }
  .planning-peak-label {
    font-size: 16px;
  }
  .planning-demand-dock figcaption {
    font-size: 16px;
  }
  .planning-device-dock {
    max-width: 390px;
  }
}
@container planning (width <= 620px) {
  .planning-layout {
    gap: 48px;
  }
  .planning-copy h2 {
    margin-top: 28px;
    font-size: clamp(38px, 8.3cqi, 55px);
    line-height: 1.03;
    letter-spacing: -0.06em;
  }
  .planning-description {
    font-size: 20px;
    margin-top: 28px;
    max-width: 30ch;
    line-height: 1.45;
  }
  .planning-capabilities {
    font-size: 16px;
    max-width: 29ch;
  }
  .planning-discover {
    font-size: 19px;
    margin-top: 27px;
  }
  .planning-scene {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .planning-demand-dock {
    width: min(100% - 18px, 355px);
    margin: 0;
    justify-self: start;
  }
  .planning-demand-card {
    padding: 22px 18px 17px;
  }
  .planning-demand-card h3 {
    font-size: clamp(10px, 3cqi, 12px);
  }
  .planning-peak-label {
    font-size: 14px;
  }
  .planning-demand-dock figcaption {
    font-size: 14px;
  }
  .planning-device-dock {
    width: min(100% - 12px, 355px);
    justify-self: center;
  }
  .planning-device-shadow {
    left: 0;
    right: 0;
  }
  .planning-phone-entry {
    top: 0;
    left: 73%;
  }
}
@media (width < 640px) {
  .planning-section {
    padding-block: 95px 90px;
  }
}
praedixa-fiches {
  display: block;
}
.fiches-section {
  --fiches-muted: #737373;
  --fiches-gap: clamp(18px, 2cqi, 32px);
  padding-block: clamp(88px, 7vw, 132px) 64px;
}
.fiches-section > .site-container {
  max-width: 1500px;
}
.fiches-heading {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 40px;
  margin-top: 26px;
}
.fiches-heading h2 {
  font-size: clamp(40px, 4.5cqi, 72px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.058em;
}
.fiches-heading h2 > span {
  display: block;
  white-space: nowrap;
}
.fiches-heading h2 > span + span {
  color: var(--color-accent);
}
.fiches-heading > p {
  padding-bottom: 3px;
  max-width: 34ch;
  color: #414141;
  font-size: clamp(17px, 1.55cqi, 23px);
  line-height: 1.45;
  letter-spacing: -0.035em;
}
.fiches-composition {
  position: relative;
  isolation: isolate;
  margin-top: 46px;
}
.fiches-recipes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fiches-gap);
}
.recipe-sheet {
  position: relative;
  min-width: 0;
  padding: clamp(16px, 1.35cqi, 22px);
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: linear-gradient(150deg, #fff 60%, #fdfdfd);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgb(0 0 0 / 0.025),
    0 16px 34px -18px rgb(0 0 0 / 0.16);
}
.recipe-photo {
  aspect-ratio: 1.92;
  overflow: hidden;
  border-radius: 4px;
  background: #e9e4de;
}
.recipe-photo > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.recipe-heading {
  margin-top: 24px;
}
.recipe-heading h3 {
  font-size: clamp(24px, 2.45cqi, 37px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.057em;
}
.recipe-heading p,
.recipe-cost > p {
  margin-top: 10px;
  color: var(--fiches-muted);
  font-size: clamp(14px, 1.38cqi, 20px);
  letter-spacing: -0.035em;
  line-height: 1.4;
}
.recipe-ingredients {
  margin-top: 18px;
}
.recipe-ingredients > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  font-size: clamp(14px, 1.32cqi, 20px);
  line-height: 1.35;
  letter-spacing: -0.035em;
}
.recipe-ingredients > div + div {
  border-top: 1px solid #ededed;
}
.recipe-ingredients dd {
  flex-shrink: 0;
  color: #737373;
  font-variant-numeric: tabular-nums;
}
.recipe-cost {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e7e7e7;
}
.recipe-cost > p {
  margin-top: 0;
}
.recipe-cost-value {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5cqi, 40px);
  margin-top: 8px;
}
.recipe-cost-mark {
  width: clamp(26px, 3cqi, 48px);
  height: 3px;
  flex-shrink: 0;
  background: var(--color-accent);
}
.recipe-cost-value strong {
  display: block;
  font-size: clamp(40px, 4.1cqi, 62px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.065em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.recipe-cost-value strong > span {
  font-size: 0.88em;
}
.recipe-outlet {
  position: absolute;
  left: calc(50% - 5px);
  bottom: -5px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-accent);
}
.fiches-reception {
  position: absolute;
  z-index: 2;
  top: -3px;
  right: 25px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--color-accent);
}
.fiches-result {
  margin-top: 56px;
}
.fiches-financial {
  position: relative;
  padding: clamp(22px, 2.3cqi, 36px);
  border: 1px solid #3c3c3c;
  border-radius: 6px;
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
  color: #fff;
}
.financial-inlet {
  position: absolute;
  top: -3px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--color-accent);
}
.financial-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.financial-heading h3 {
  font-size: clamp(24px, 2.15cqi, 34px);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.048em;
}
.financial-heading > p {
  color: #bbb;
  font-size: clamp(13px, 1.25cqi, 19px);
  white-space: nowrap;
  letter-spacing: -0.025em;
}
.financial-indicators {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.15fr;
  margin-top: 28px;
}
.financial-indicator {
  min-width: 0;
  padding-inline: clamp(20px, 3cqi, 46px);
}
.financial-indicator:first-child {
  padding-left: 0;
}
.financial-indicator:last-child {
  padding-right: 0;
}
.financial-indicator + .financial-indicator {
  border-left: 1px solid #545454;
}
.financial-indicator dt {
  color: #d1d1d1;
  font-size: clamp(14px, 1.35cqi, 20px);
  line-height: 1.4;
  letter-spacing: -0.035em;
}
.financial-indicator strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(40px, 4.15cqi, 64px);
  line-height: 1.1;
  font-weight: 730;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.financial-indicator strong > span {
  font-size: 0.82em;
}
.financial-scope {
  display: block;
  margin-top: 9px;
  color: #c3c3c3;
  font-size: clamp(13px, 1.22cqi, 18px);
  line-height: 1.4;
  letter-spacing: -0.027em;
}
.fiches-note {
  margin: 18px 2px 0;
  color: var(--fiches-muted);
  font: 11px/1.4 var(--font-mono);
}
.fiches-wires {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.fiches-wires path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (width >= 1920px) {
  .fiches-section > .site-container {
    max-width: 1760px;
  }
}
@media (width >= 1200px) and (height <= 1100px) {
  .fiches-section {
    padding-block: 80px 52px;
  }
  .fiches-heading {
    margin-top: 22px;
  }
  .fiches-heading h2 {
    font-size: clamp(48px, 4.05cqi, 65px);
  }
  .fiches-composition {
    margin-top: 36px;
  }
  .recipe-photo {
    aspect-ratio: 2.5;
  }
  .recipe-heading {
    margin-top: 18px;
  }
  .recipe-heading h3 {
    font-size: clamp(26px, 2.12cqi, 34px);
  }
  .recipe-heading p {
    margin-top: 6px;
  }
  .recipe-ingredients {
    margin-top: 12px;
  }
  .recipe-ingredients > div {
    padding-block: 8px;
  }
  .recipe-cost {
    margin-top: 12px;
    padding-top: 14px;
  }
  .recipe-cost-value {
    margin-top: 5px;
  }
  .recipe-cost-value strong {
    font-size: clamp(44px, 3.6cqi, 58px);
  }
  .fiches-result {
    margin-top: 46px;
  }
  .fiches-financial {
    padding-block: 24px;
  }
  .financial-indicators {
    margin-top: 20px;
  }
  .financial-indicator strong {
    font-size: clamp(44px, 3.6cqi, 58px);
  }
}
@media (width < 1200px) {
  .fiches-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .fiches-heading h2 {
    font-size: clamp(40px, 5.9cqi, 66px);
  }
  .fiches-heading > p {
    max-width: 45ch;
  }
  .recipe-heading h3 {
    font-size: clamp(21px, 2.55cqi, 30px);
  }
  .recipe-ingredients > div {
    font-size: 14px;
    gap: 8px;
  }
  .recipe-cost-value {
    gap: 16px;
  }
  .recipe-cost-mark {
    width: 22px;
  }
  .recipe-cost-value strong {
    font-size: clamp(35px, 4.2cqi, 48px);
  }
  .financial-indicator {
    padding-inline: 20px;
  }
}
@media (width < 780px) {
  .fiches-section {
    padding-block: 80px 40px;
  }
  .fiches-heading {
    gap: 22px;
    margin-top: 24px;
  }
  .fiches-heading h2 {
    font-size: clamp(34px, 7.9cqi, 55px);
    line-height: 1.08;
  }
  .fiches-heading h2 > span {
    white-space: normal;
  }
  .fiches-heading > p {
    font-size: 18px;
  }
  .fiches-composition {
    margin-top: 40px;
  }
  .fiches-recipes {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .recipe-sheet {
    padding: clamp(18px, 3.8cqi, 26px);
  }
  .recipe-photo {
    aspect-ratio: 2;
  }
  .recipe-heading {
    margin-top: 24px;
  }
  .recipe-heading h3 {
    font-size: clamp(29px, 6.2cqi, 38px);
  }
  .recipe-heading p,
  .recipe-cost > p {
    font-size: 17px;
  }
  .recipe-ingredients > div {
    font-size: 17px;
    padding-block: 11px;
  }
  .recipe-cost {
    padding-top: 20px;
  }
  .recipe-cost-value {
    gap: 32px;
  }
  .recipe-cost-value strong {
    font-size: clamp(50px, 10.5cqi, 62px);
  }
  .recipe-cost-mark {
    width: 38px;
  }
  .financial-heading {
    display: block;
  }
  .financial-heading h3 {
    max-width: 15ch;
    font-size: clamp(27px, 5.5cqi, 36px);
  }
  .financial-heading > p {
    margin-top: 10px;
  }
  .financial-indicators {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 0;
  }
  .financial-indicator {
    padding-inline: 16px;
  }
  .financial-indicator:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .financial-indicator:nth-child(even) {
    padding-right: 0;
  }
  .financial-indicator dt {
    min-height: 2.8em;
    font-size: 14px;
  }
  .financial-indicator strong {
    font-size: clamp(35px, 8cqi, 48px);
  }
  .financial-scope {
    font-size: 13px;
  }
}
.recipe-picture[data-astro-cid-6n6lldxy], .recipe-picture[data-astro-cid-6n6lldxy] img[data-astro-cid-6n6lldxy] {
  display: block;
  width: 100%;
  height: 100%;
}

.recipe-picture[data-astro-cid-6n6lldxy] img[data-astro-cid-6n6lldxy] {
  object-fit: cover;
}
praedixa-haccp {
  display: block;
}
.haccp-section {
  padding-block: clamp(90px, 7vw, 140px) 64px;
}
.haccp-section > .site-container {
  max-width: 1500px;
}
.haccp-layout {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas: 'media copy';
  align-items: center;
  gap: clamp(36px, 4cqi, 72px);
}
.haccp-copy {
  grid-area: copy;
  min-width: 0;
  container-type: inline-size;
  padding-bottom: 15%;
}
.haccp-copy h2 {
  margin-top: 42px;
  font-size: clamp(36px, 9.1cqi, 78px);
  line-height: 1.08;
  letter-spacing: -0.064em;
  font-weight: 800;
}
.haccp-copy h2 > span {
  display: block;
  white-space: nowrap;
}
.haccp-copy h2 > span + span {
  color: var(--color-accent);
}
.haccp-description {
  margin-top: 38px;
  max-width: 31ch;
  color: #535353;
  font-size: clamp(20px, 4.15cqi, 31px);
  line-height: 1.42;
  letter-spacing: -0.043em;
}
.haccp-discover {
  margin-top: clamp(32px, 8cqi, 62px);
}
.haccp-discover .text-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: clamp(18px, 3.4cqi, 26px);
  letter-spacing: -0.04em;
  color: var(--color-graphite);
}
.haccp-discover svg {
  color: var(--color-accent);
  flex-shrink: 0;
}
.haccp-media {
  position: relative;
  grid-area: media;
  min-width: 0;
  aspect-ratio: 1060 / 1036;
}
.haccp-photo-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 7px;
  background: #ddd8d0;
  box-shadow: 0 22px 50px -38px rgb(0 0 0 / 0.35);
}
.haccp-photo-depth,
.haccp-photo {
  display: block;
  width: 100%;
  height: 100%;
}
.haccp-photo-depth {
  position: relative;
}
.haccp-screen-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.haccp-screen-backplate {
  visibility: hidden;
}
[data-haccp-ready] .haccp-screen-backplate,
[data-haccp-ready] .haccp-screen-viewport {
  visibility: visible;
}
.haccp-screen-canvas {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1060px;
  height: 1036px;
  transform: scale(var(--haccp-scale, 1));
  transform-origin: 0 0;
}
.haccp-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 760px;
  transform-origin: 0 0;
  transform: matrix3d(
    0.965035588,
    0.060905945,
    0,
    -0.000042201,
    -0.13611298,
    0.901350852,
    0,
    -0.000034338,
    0,
    0,
    1,
    0,
    344,
    135,
    0,
    1
  );
  border-radius: 17px;
  padding: 23px;
  overflow: hidden;
  background: linear-gradient(120deg, #fcfcfd, #f5f6f8);
  color: #101112;
  box-shadow: inset 0 0 12px rgb(0 0 0 / 0.035);
  letter-spacing: -0.035em;
  line-height: 1.3;
}
.haccp-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.haccp-app-brand {
  display: flex;
  align-items: center;
  gap: 7px;
}
.haccp-section .haccp-app-brand .brand {
  gap: 7px;
}
.haccp-section .haccp-app-brand .brand-emblem {
  width: 29px;
  height: 29px;
}
.haccp-section .haccp-app-brand .brand-word {
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.055em;
}
.haccp-app-header > span {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  color: #686b70;
}
.haccp-app-header i,
.haccp-reading i {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  transform: rotate(45deg);
  margin-top: -5px;
}
.haccp-app-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 19px;
  border-bottom: 1px solid #e1e3e7;
  font-size: 17px;
  color: #72757a;
}
.haccp-app-tabs > span {
  position: relative;
  text-align: center;
  padding: 8px 0 15px;
}
.haccp-tab-active {
  color: #141414;
  font-weight: 600;
}
.haccp-tab-active i {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--color-accent);
}
.haccp-app-content {
  padding-top: 17px;
}
.haccp-app-title h3 {
  font-size: 29px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.055em;
}
.haccp-app-title p {
  margin-top: 4px;
  font-size: 17px;
  color: #787b80;
}
.haccp-task-card {
  border: 1px solid #dedfe3;
  border-radius: 8px;
  padding: 17px;
  background: rgb(255 255 255 / 0.35);
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.018);
}
.haccp-task-card--active {
  margin-top: 15px;
}
.haccp-task-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.haccp-task-card h4 {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.haccp-task-card p {
  margin-top: 4px;
  font-size: 16px;
  color: #787b80;
}
.haccp-status {
  flex-shrink: 0;
  padding: 4px 16px;
  border: 1px solid #e5e6e9;
  border-radius: 20px;
  font-size: 15px;
  color: #66696e;
  background: #eaecef;
}
.haccp-status--active {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.haccp-reading {
  display: grid;
  gap: 12px;
  margin-top: 23px;
}
.haccp-reading > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.haccp-reading dt {
  font-size: 16px;
  color: #72757b;
}
.haccp-reading dd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 39px;
  padding: 5px 12px;
  border: 1px solid #cdd0d6;
  border-radius: 6px;
  background: #f9fafb;
  font-size: 18px;
}
.haccp-reading strong {
  display: block;
  font-size: 22px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.haccp-reading dd > span {
  align-self: stretch;
  display: grid;
  align-items: center;
  border-left: 1px solid #d8dade;
  padding-left: 14px;
  color: #656970;
}
.haccp-task-card .haccp-photo-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 21px;
  color: #6d7076;
  font-size: 16px;
}
.haccp-photo-label svg {
  color: #46494d;
}
.haccp-save {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 18px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-accent);
  color: white;
  font-size: 17px;
  font-weight: 600;
}
.haccp-save-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgb(255 255 255 / 0.38) 50%,
    transparent 80%
  );
  transform: translateX(-110%);
  pointer-events: none;
}
.haccp-task-card--pending {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 12px;
  min-height: 85px;
}
.haccp-task-card--pending > div {
  margin-right: auto;
}
.haccp-chevron {
  width: 9px;
  height: 9px;
  border-top: 1.5px solid #72757b;
  border-right: 1.5px solid #72757b;
  transform: rotate(45deg);
  margin-inline: 4px;
}
.haccp-inlet,
.haccp-outlet,
.haccp-receipt {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  background: var(--color-accent);
}
.haccp-inlet {
  top: -3px;
  right: 26px;
  width: 6px;
  height: 6px;
}
.haccp-outlet {
  top: var(--haccp-outlet-y, calc(79% - 4px));
  right: calc(7% - 4px);
}
.haccp-transfer {
  position: absolute;
  right: 2%;
  bottom: 8.4%;
  padding-left: 28px;
  max-width: 40%;
}
.haccp-receipt {
  left: 0;
  top: calc(50% - 4px);
}
.haccp-transfer p {
  color: #676767;
  font-size: clamp(17px, 1.35cqi, 22px);
  line-height: 1.3;
  letter-spacing: -0.04em;
}
.haccp-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.haccp-wire path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.haccp-signatures {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-inline: 3%;
  margin-top: clamp(60px, 6cqi, 100px);
}
@media (width >= 1920px) {
  .haccp-section > .site-container {
    max-width: 1760px;
  }
}
@media (width >= 1200px) and (height <= 1100px) {
  .haccp-section {
    padding-top: 80px;
  }
  .haccp-copy h2 {
    margin-top: 32px;
  }
  .haccp-description {
    margin-top: 28px;
  }
  .haccp-signatures {
    margin-top: 54px;
  }
}
@media (width < 1100px) {
  .haccp-layout {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'media' 'transfer';
    gap: 40px;
  }
  .haccp-copy {
    padding-bottom: 0;
  }
  .haccp-copy h2 {
    font-size: clamp(36px, 6.5cqi, 64px);
    margin-top: 28px;
  }
  .haccp-description {
    font-size: clamp(20px, 3cqi, 26px);
    max-width: 40ch;
    margin-top: 25px;
  }
  .haccp-discover {
    margin-top: 30px;
  }
  .haccp-discover .text-link {
    font-size: 20px;
  }
  .haccp-media {
    width: 100%;
    max-width: 740px;
    justify-self: center;
  }
  .haccp-transfer {
    grid-area: transfer;
    position: relative;
    inset: auto;
    justify-self: end;
    max-width: none;
    margin: 12px 4% 0 0;
  }
  .haccp-transfer p {
    font-size: 19px;
  }
  .haccp-outlet {
    top: auto;
    bottom: -4px;
    right: auto;
    left: var(--haccp-outlet-x, calc(100% - 28px));
  }
  .haccp-signatures {
    gap: 26px;
    padding-inline: 0;
    margin-top: 56px;
  }
}
@media (width < 640px) {
  .haccp-section {
    padding-block: 72px 48px;
  }
  .haccp-copy h2 {
    font-size: clamp(33px, 9.5cqi, 52px);
  }
  .haccp-copy h2 > span {
    white-space: normal;
  }
  .haccp-description {
    font-size: 20px;
  }
  .haccp-layout {
    gap: 34px;
  }
  .haccp-signatures {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }
}
.haccp-picture[data-astro-cid-q6rmvbk7] {
  display: block;
  width: 100%;
  height: 100%;
}

.haccp-photo[data-astro-cid-q6rmvbk7] {
  object-fit: cover;
}

.haccp-photo-overlay[data-astro-cid-q6rmvbk7] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
praedixa-faq {
  display: block;
}
.faq-section {
  padding-block: clamp(112px, 9vw, 176px) 100px;
}
.faq-section > .site-container {
  max-width: 1500px;
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.5fr);
  gap: clamp(50px, 6cqi, 100px);
  align-items: start;
}
.faq-aside {
  min-width: 0;
  container-type: inline-size;
}
.faq-copy h2 {
  margin-top: 42px;
  font-size: clamp(42px, 12cqi, 85px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.066em;
}
.faq-copy h2 > span {
  display: block;
  white-space: nowrap;
}
.faq-copy h2 > span + span {
  color: var(--color-accent);
}
.faq-description {
  margin-top: 38px;
  max-width: 28ch;
  font-size: clamp(21px, 5.4cqi, 31px);
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: #5c5c5c;
}
.faq-contact {
  margin-top: clamp(48px, 15cqi, 88px);
}
.faq-contact > p {
  margin-bottom: 20px;
  font-size: clamp(21px, 4.7cqi, 27px);
  letter-spacing: -0.04em;
}
.faq-contact .button-primary {
  gap: 24px;
  min-height: 58px;
  padding: 14px 32px;
  border-radius: 5px;
  font-size: clamp(18px, 4.1cqi, 23px);
  letter-spacing: -0.04em;
}
.faq-contact .button-arrow svg {
  width: 24px;
  height: 24px;
}
.faq-flow-tail {
  position: relative;
  height: 150px;
}
.faq-flow-tail > span {
  /* Repère de hauteur invisible : le fil reste dans la gouttière extérieure. */
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 8px;
  height: 8px;
}
.faq-questions {
  min-width: 0;
}
.faq-item {
  position: relative;
  border-top: 1px solid #e2e2e2;
}
.faq-item:last-child {
  border-bottom: 1px solid #e2e2e2;
}
.faq-item summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: clamp(18px, 1.9cqi, 32px);
  position: relative;
  padding: 33px 24px 33px 32px;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-number {
  font: 500 clamp(14px, 1.35cqi, 21px)/1.2 var(--font-mono);
  color: #757575;
  transition: color var(--motion-hover) var(--motion-ease-out);
}
.faq-question {
  font-size: clamp(20px, 1.75cqi, 28px);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.04em;
}
.faq-toggle {
  position: relative;
  width: 23px;
  height: 23px;
  color: var(--color-graphite);
  transition: color var(--motion-hover) var(--motion-ease-out);
}
.faq-toggle > i {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 10px;
  height: 2px;
  background: currentColor;
}
.faq-toggle > i + i {
  transform: rotate(90deg);
  transition:
    transform var(--motion-feedback) var(--motion-ease-out),
    opacity var(--motion-hover) var(--motion-ease-out);
}
.faq-active-mark {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--motion-group) var(--motion-ease-out);
}
.faq-item[open] .faq-active-mark {
  transform: scaleY(1);
}
.faq-item[open] .faq-number,
.faq-item[open] .faq-toggle {
  color: var(--color-accent);
}
.faq-item[open] .faq-toggle > i + i {
  transform: rotate(0);
  opacity: 0;
}
.faq-answer {
  padding: 0 52px 42px calc(84px + clamp(18px, 1.9cqi, 32px));
}
.faq-answer p {
  color: #666;
  font-size: clamp(18px, 1.55cqi, 24px);
  line-height: 1.45;
  letter-spacing: -0.033em;
}
@media (hover: hover) {
  .faq-item summary:hover .faq-number,
  .faq-item summary:hover .faq-toggle {
    color: var(--color-accent);
  }
}
@media (width >= 1920px) {
  .faq-section > .site-container {
    max-width: 1760px;
  }
}
@media (width >= 1200px) and (height <= 1100px) {
  .faq-section {
    padding-block: 112px 76px;
  }
  .faq-copy h2 {
    margin-top: 36px;
  }
  .faq-item summary {
    padding-block: 30px;
  }
  .faq-answer {
    padding-bottom: 34px;
  }
}
@media (width < 1200px) {
  .faq-layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.2fr);
    gap: 40px;
  }
  .faq-copy h2 {
    font-size: clamp(38px, 12cqi, 62px);
  }
  .faq-description {
    font-size: 21px;
  }
  .faq-item summary {
    grid-template-columns: 30px minmax(0, 1fr) 21px;
    gap: 16px;
    padding: 27px 14px 27px 22px;
  }
  .faq-question {
    font-size: 19px;
  }
  .faq-answer {
    padding: 0 22px 30px 68px;
  }
  .faq-answer p {
    font-size: 18px;
  }
}
@media (width < 900px) {
  .faq-section {
    padding-block: 80px 64px;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .faq-copy h2 {
    font-size: clamp(42px, 8.4cqi, 65px);
    margin-top: 28px;
  }
  .faq-description {
    max-width: 34ch;
    font-size: 22px;
    margin-top: 26px;
  }
  .faq-contact {
    margin-top: 34px;
  }
  .faq-contact > p {
    font-size: 21px;
    margin-bottom: 17px;
  }
  .faq-contact .button-primary {
    font-size: 19px;
    padding-inline: 26px;
  }
  .faq-flow-tail {
    height: 112px;
  }
  .faq-item summary {
    grid-template-columns: 30px minmax(0, 1fr) 22px;
    padding: 26px 12px 26px 18px;
  }
  .faq-answer {
    padding-left: 64px;
  }
}
@media (width < 480px) {
  .faq-item summary {
    grid-template-columns: 24px minmax(0, 1fr) 19px;
    gap: 12px;
    padding-inline: 12px 4px;
  }
  .faq-question {
    font-size: 18px;
  }
  .faq-number {
    font-size: 12px;
  }
  .faq-toggle {
    width: 19px;
    height: 19px;
  }
  .faq-toggle > i {
    top: 8px;
  }
  .faq-answer {
    padding: 0 12px 28px 48px;
  }
  .faq-answer p {
    font-size: 17px;
    line-height: 1.5;
  }
}