/* Opérationnel et Prévision : le plateau clair des quatre outils, la couche sombre de Prévision
   posée sur son bord, deux flèches rouges vers Stocks et Planning. Les tuiles partagent leurs
   rangées (subgrid) : les noms des outils restent sur une ligne, l’apport de l’IA au-dessus. */
.pricing-layers {
  --layers-link: clamp(64px, 6.4vw, 92px);
  --layers-overlap: 24px;
  --layers-inset: clamp(12px, 2.2vw, 32px);
  --layers-arrow-x: 24px;
  display: grid;
  margin-top: clamp(48px, 6vw, 88px);
}

/* ---------- La couche Prévision ---------- */
.pricing-layer-ai {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 40px;
  margin-inline: var(--layers-inset);
  padding: clamp(26px, 3vw, 42px) clamp(22px, 3vw, 44px);
  border-radius: var(--radius-panel);
  color: #fff;
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
}
.pricing-layer-ai::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(22px, 3vw, 44px);
  width: 56px;
  height: 2px;
  background: var(--color-accent);
}
.pricing-layer-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  color: var(--pricing-label);
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pricing-layer-label strong {
  color: var(--color-graphite);
  font-weight: 650;
}
.pricing-layer-ai .pricing-layer-label {
  grid-column: 1 / -1;
  color: var(--pricing-on-dark-muted);
}
.pricing-layer-ai .pricing-layer-label strong {
  color: #fff;
}
.pricing-layer-title {
  max-width: 22ch;
  font-size: clamp(25px, 2.7vw, 40px);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -0.052em;
  text-wrap: balance;
}
.pricing-layer-ai .pricing-signal {
  margin-bottom: 4px;
}

/* ---------- Le plateau des outils ---------- */
.pricing-layer-tray {
  margin-top: calc(-1 * var(--layers-overlap));
  padding: calc(var(--layers-overlap) + var(--layers-link)) var(--layers-inset)
    clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--pricing-card-border);
  border-radius: calc(var(--radius-panel) + 8px);
  background:
    var(--pricing-dots) 0 0 / 16px 16px,
    color-mix(in srgb, var(--color-track) 72%, var(--color-canvas));
}
.pricing-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  column-gap: clamp(10px, 1.2vw, 16px);
}
/* L'étiquette d'Opérationnel, sous ses quatre outils : un temps d'air la détache des cartes. */
.pricing-layer-label--tools {
  margin-top: 20px;
}
.pricing-tool {
  position: relative;
  z-index: 2;
  display: grid;
  grid-row: 1 / span 3;
  grid-template-rows: subgrid;
  border: 1px solid var(--pricing-card-border);
  border-radius: 12px;
  background: var(--pricing-card-background);
  box-shadow: var(--pricing-card-shadow);
}
.pricing-tool:not(.is-ai) {
  grid-row: 2 / span 2;
}
.pricing-tool-name {
  grid-row: 2;
  align-self: end;
  padding: 18px 20px 0;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.pricing-tool-text {
  grid-row: 3;
  padding: 6px 20px 20px;
  color: var(--pricing-text);
  font-size: 14.5px;
  line-height: 1.45;
  letter-spacing: -0.015em;
}
.pricing-tool:not(.is-ai) .pricing-tool-name {
  grid-row: 1;
}
.pricing-tool:not(.is-ai) .pricing-tool-text {
  grid-row: 2;
}
/* L’apport de la Prévision, au-dessus du nom, là où arrive la flèche. */
.pricing-tool-ai {
  position: relative;
  grid-row: 1;
  padding: 16px 20px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
  border-radius: 11px 11px 0 0;
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
  font-size: 15px;
  font-weight: 620;
  line-height: 1.4;
  letter-spacing: -0.025em;
}
.pricing-tool-ai-label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-accent);
  font: 650 var(--text-micro)/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Les flèches : port sur la couche, trait, pointe ---------- */
.pricing-tool.is-ai::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: calc(var(--layers-arrow-x) - 1px);
  width: 2px;
  height: var(--layers-link);
  background: var(--color-accent);
  transform-origin: 50% 0;
  scale: 1 var(--scene-reveal, 1);
}
.pricing-tool.is-ai::after {
  content: '';
  position: absolute;
  bottom: calc(100% + var(--layers-link) - 4px);
  left: calc(var(--layers-arrow-x) - 4px);
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--pricing-accent-glow);
}
.pricing-tool-ai::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: calc(var(--layers-arrow-x) - 7px);
  width: 12px;
  height: 9px;
  background: var(--color-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: clamp(0, calc((var(--scene-reveal, 1) - 0.8) * 5), 1);
}

@media (width < 960px) {
  .pricing-layer-ai {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .pricing-layer-ai .pricing-signal {
    justify-self: start;
  }
  .pricing-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
  }
  .pricing-tool:not(.is-ai) {
    grid-row: 4 / span 2;
    margin-top: 12px;
  }
}
@media (width < 768px) {
  .pricing-layer-label--tools {
    margin-top: 16px;
  }
}
@media (width < 640px) {
  .pricing-layers {
    --layers-inset: 10px;
    --layers-arrow-x: 20px;
  }
  .pricing-tools {
    column-gap: 10px;
  }
  .pricing-tool-name {
    padding: 14px 14px 0;
  }
  .pricing-tool-text {
    padding: 5px 14px 16px;
    font-size: 14px;
  }
  .pricing-tool-ai {
    padding: 13px 14px;
    font-size: 14px;
  }
}
.receipt-pilot[data-astro-cid-cf63woyv] {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--pricing-on-dark-line);
}

.receipt-pilot-label[data-astro-cid-cf63woyv] {
  color: var(--pricing-accent-on-dark);
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.receipt-pilot-text[data-astro-cid-cf63woyv] {
  max-width: 34ch;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.025em;
}
/* « Composez votre offre » : les commandes sur une carte claire, le reçu sur la surface sombre.
   Sans JavaScript, les commandes inactives gardent leur aspect : le reçu dit « Exemple ». */
.pricing-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(48px, 6vw, 84px);
}

/* ---------- Les commandes ---------- */
.pricing-calculator-controls {
  display: grid;
  align-content: start;
  gap: clamp(30px, 3.2vw, 44px);
  padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--pricing-card-border);
  border-radius: var(--radius-panel);
  background: var(--pricing-card-background);
  box-shadow: var(--pricing-card-shadow);
}
.pricing-choice {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.pricing-choice > legend {
  margin-bottom: 16px;
  padding: 0;
}
.pricing-option {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas:
    'box name price'
    '. text text';
  align-items: center;
  gap: 5px 14px;
  padding: 16px 18px 17px;
  border: 1px solid var(--pricing-card-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-track) 50%, var(--color-surface));
  cursor: pointer;
  transition:
    border-color var(--motion-hover) var(--motion-ease-out),
    background-color var(--motion-hover) var(--motion-ease-out),
    box-shadow var(--motion-hover) var(--motion-ease-out);
}
/* La vraie case couvre la tuile : un clic n’importe où la coche, le lecteur d’écran la lit. */
.pricing-option input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.pricing-option:has(input:disabled) {
  cursor: default;
}
.pricing-option:has(input:checked) {
  border-color: var(--color-graphite);
  background: var(--color-surface);
  box-shadow: var(--pricing-card-shadow);
}
.pricing-option:has(input:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
@media (hover: hover) {
  .pricing-option:hover:has(input:enabled:not(:checked)) {
    border-color: var(--color-connection);
    background: var(--color-surface);
  }
}
.pricing-option-box {
  position: relative;
  grid-area: box;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--color-chart);
  border-radius: 6px;
  background: var(--color-surface);
  transition:
    background-color var(--motion-press) var(--motion-ease-out),
    border-color var(--motion-press) var(--motion-ease-out);
}
.pricing-option-box::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 6.5px;
  width: 6px;
  height: 11px;
  border: solid var(--color-surface);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  opacity: 0;
  scale: 0.6;
  transition:
    opacity var(--motion-press) var(--motion-ease-out),
    scale var(--motion-press) var(--motion-ease-out);
}
input:checked + .pricing-option-box {
  border-color: var(--color-graphite);
  background: var(--color-graphite);
}
input:checked + .pricing-option-box::after {
  opacity: 1;
  scale: 1;
}
.pricing-option-name {
  grid-area: name;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.pricing-option-price {
  grid-area: price;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.pricing-option-text {
  grid-area: text;
  color: var(--pricing-text);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.012em;
}

/* Établissements : − / champ / +, larges sous le pouce. */
.pricing-sites {
  display: grid;
  justify-items: start;
  gap: 16px;
}
.pricing-stepper {
  display: inline-grid;
  grid-template-columns: 52px 78px 52px;
  height: 54px;
  border: 1px solid var(--pricing-card-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--pricing-card-shadow);
}
.pricing-step {
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--color-graphite);
  cursor: pointer;
  transition:
    background-color var(--motion-hover) var(--motion-ease-out),
    color var(--motion-hover) var(--motion-ease-out);
}
.pricing-step svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.pricing-step:disabled,
.pricing-step[aria-disabled='true'] {
  color: #ababab;
  cursor: default;
}
@media (hover: hover) {
  .pricing-step:enabled:not([aria-disabled='true']):hover {
    background: var(--color-track);
  }
}
.pricing-step:enabled:not([aria-disabled='true']):active {
  scale: var(--motion-press-scale);
}
.pricing-sites-input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-inline: 1px solid var(--pricing-card-border);
  background: transparent;
  color: var(--color-graphite);
  font: inherit;
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
}
.pricing-sites-input::-webkit-inner-spin-button,
.pricing-sites-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}
.pricing-stepper :focus-visible {
  position: relative;
  z-index: 1;
  outline-offset: 2px;
}

/* ---------- Le reçu ---------- */
.pricing-receipt {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--radius-panel);
  color: #fff;
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
}
.pricing-receipt::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(24px, 2.6vw, 40px);
  width: 56px;
  height: 2px;
  background: var(--color-accent);
}
.pricing-receipt-head,
.pricing-receipt-total-label,
.pricing-receipt-unit {
  color: var(--pricing-on-dark-muted);
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pricing-receipt-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
}
.pricing-receipt-mode {
  color: #fff;
}
.pricing-receipt-summary {
  margin-top: 18px;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.04em;
}
.pricing-receipt-lines {
  margin-top: 24px;
  border-top: 1px solid var(--pricing-on-dark-line);
}
.pricing-receipt-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(5.2ch, auto);
  align-items: baseline;
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--pricing-on-dark-line);
  font-size: 15.5px;
  letter-spacing: -0.02em;
}
.pricing-receipt-line[hidden] {
  display: none;
}
.pricing-receipt-math {
  color: var(--pricing-on-dark-muted);
  font: 400 12.5px/1.5 var(--font-mono);
  white-space: nowrap;
}
.pricing-receipt-amount {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.pricing-receipt-per-site {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 16px;
  color: var(--pricing-on-dark-muted);
  font-size: 15px;
}
.pricing-receipt-per-site > span:last-child {
  color: #fff;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.pricing-receipt-total {
  margin-top: auto;
  padding-top: clamp(30px, 3.4vw, 52px);
}
.pricing-receipt-figure {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  font-size: clamp(64px, 6.2vw, 100px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.065em;
}
.pricing-receipt-currency {
  margin: 0.1em 0 0 0.14em;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0;
}
.pricing-receipt-unit {
  margin-top: 12px;
}
/* Les réseaux : la phrase garde sa place, qu’elle soit montrée ou non, et n’apparaît qu’en
   fondu. Cachée, elle quitte aussi l’arbre d’accessibilité (visibility), après son fondu. */
.pricing-receipt-network {
  max-width: 38ch;
  margin-top: 16px;
  color: #d6d6d6;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  transition:
    opacity var(--motion-hover) var(--motion-ease-out),
    transform var(--motion-hover) var(--motion-ease-out),
    visibility 0s;
}
.pricing-receipt-network[data-shown='false'] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--motion-distance-mobile));
  transition:
    opacity var(--motion-hover) var(--motion-ease-out),
    transform var(--motion-hover) var(--motion-ease-out),
    visibility 0s linear var(--motion-hover);
}
/* Mouvement réduit : la phrase apparaît sur place, sans glisser. */
@media (prefers-reduced-motion: reduce) {
  .pricing-receipt-network,
  .pricing-receipt-network[data-shown='false'] {
    transform: none;
    transition: none;
  }
}
.pricing-receipt-empty {
  margin-top: auto;
  padding-top: 30px;
  color: var(--pricing-accent-on-dark);
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.03em;
}
.pricing-receipt-action {
  align-self: flex-start;
  margin-top: 30px;
}

@media (width < 960px) {
  .pricing-calculator {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Sur une colonne, le reçu suit le formulaire : la place réservée à la phrase des réseaux y
     laisserait un trou sous le total. Elle n’existe qu’une fois affichée et entre en fondu ; elle
     ne déplace que le bas du reçu, sous les commandes qu’on vient de toucher. */
  .pricing-receipt-network[data-shown='false'] {
    display: none;
  }
  @starting-style {
    .pricing-receipt-network[data-shown='true'] {
      opacity: 0;
      transform: translateY(var(--motion-distance-mobile));
    }
  }
}
@media (width < 640px) {
  .pricing-option {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    padding: 15px 14px 16px;
    column-gap: 12px;
  }
  .pricing-option-name {
    font-size: 17px;
  }
  .pricing-option-price {
    font-size: 15px;
  }
  .pricing-receipt-action {
    align-self: stretch;
  }
}
/* Le haut de la page Tarifs et son ticket de caisse (PricingTicket.astro). Dès 1 100 px, le haut
   passe en deux colonnes, comme l’ouverture de /produit/ : le texte à gauche, centré sur la
   hauteur du ticket, le ticket à droite ; l’écart avant les cartes se resserre pour qu’elles
   affleurent sous le ticket. Plus étroit, le ticket s’efface. */
.pricing-ticket {
  display: none;
}
@media (width >= 1100px) {
  .pricing-hero .page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr);
    grid-template-rows: minmax(0, 1fr) repeat(3, auto) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 112px);
    padding-bottom: clamp(56px, 5.6vw, 84px);
  }
  .pricing-hero .page-hero > * {
    grid-column: 1;
  }
  .pricing-hero .page-hero > .section-index {
    grid-row: 2;
  }
  .pricing-hero .page-hero > h1 {
    grid-row: 3;
  }
  .pricing-hero .page-hero > .editorial-hero-bottom {
    grid-row: 4;
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-hero .page-hero > .pricing-ticket {
    display: grid;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
  }
}

/* ---------- Le ticket ---------- */
/* La fente de la caisse, sombre et fixe ; le papier en sort, plus étroit, bord bas dentelé. */
.pricing-ticket {
  --ticket-inset: 20px;
  --ticket-tooth: 14px;
  width: min(100%, 440px);
  margin: 0;
}
.pricing-ticket-slot {
  position: relative;
  z-index: 1;
  height: 26px;
  border-radius: 13px;
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
}
.pricing-ticket-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  width: 56px;
  height: 2px;
  background: var(--color-accent);
}
.pricing-ticket-slot::after {
  content: '';
  position: absolute;
  right: calc(var(--ticket-inset) - 6px);
  bottom: 8px;
  left: calc(var(--ticket-inset) - 6px);
  height: 5px;
  border-radius: 3px;
  background: #000;
  box-shadow:
    inset 0 2px 3px rgb(0 0 0 / 0.9),
    0 1px 0 rgb(100% 100% 100% / 0.14);
}
/* L’ombre est portée par l’enveloppe : sur le papier, le masque des dents la couperait. */
.pricing-ticket-roll {
  margin: -11px var(--ticket-inset) 0;
  filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.07))
    drop-shadow(0 2px 3px rgb(0 0 0 / 0.06));
}
.pricing-ticket-paper {
  padding: 32px clamp(24px, 2.2vw, 32px)
    calc(clamp(22px, 2vw, 26px) + var(--ticket-tooth) / 2);
  background:
    linear-gradient(rgb(0 0 0 / 0.08), transparent 20px), var(--color-surface);
  mask: conic-gradient(
      from -45deg at bottom,
      #0000,
      #000 1deg 89deg,
      #0000 90deg
    )
    50% / var(--ticket-tooth) 100%;
}

.pricing-ticket-head {
  display: grid;
  gap: 2px;
  padding-bottom: 14px;
  border-bottom: 1.5px dashed var(--color-fill);
  color: var(--pricing-label);
  font: 400 var(--text-micro)/1.6 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pricing-ticket-head > :first-child {
  color: var(--color-graphite);
  font-weight: 650;
}

/* Une ligne par brique : nom, points de conduite, prix ; le signal de Prévision dessous. */
.pricing-ticket-lines {
  padding-block: 4px;
}
.pricing-ticket-line {
  display: grid;
  grid-template-columns: auto minmax(20px, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding-block: 13px;
}
.pricing-ticket-line + .pricing-ticket-line {
  border-top: 1px solid var(--color-line);
}
.pricing-ticket-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.pricing-ticket-leader {
  height: 0;
  border-bottom: 2px dotted var(--color-fill);
}
/* Le montant et l’euro en exposant, comme sur les cartes, collés : la boîte flexible ignore
   l’espace du balisage. Sa ligne de base reste celle du montant, alignée sur le nom. */
.pricing-ticket-price {
  display: flex;
  align-items: flex-start;
  gap: 0.06em;
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 790;
  line-height: 1;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}
.pricing-ticket-currency {
  margin-top: 0.08em;
  font-size: 0.55em;
  font-weight: 650;
  letter-spacing: 0;
}
.pricing-ticket-signal {
  display: inline-flex;
  grid-column: 1 / -1;
  justify-self: start;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  color: var(--color-accent);
  font: 400 var(--text-xs)/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pricing-ticket-signal > span {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--pricing-accent-glow);
}

/* Pied du ticket : l’offre pilote, la section qui suit les cartes. */
.pricing-ticket-pilot {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1.5px dashed var(--color-fill);
}
.pricing-ticket-pilot-label {
  color: var(--pricing-label);
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pricing-ticket-pilot > :last-child {
  max-width: 34ch;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

/* Une fois, au chargement : le papier sort de la fente, son bord haut reste sous elle. Rien ne
   reste appliqué après l’impression (backwards ne tient que l’attente). */
@media (prefers-reduced-motion: no-preference) {
  .pricing-ticket-paper {
    animation: pricing-ticket-print var(--motion-path) var(--motion-ease-out)
      var(--motion-hover) backwards;
  }
}
@keyframes pricing-ticket-print {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(-100%);
  }
  to {
    clip-path: inset(0);
    transform: none;
  }
}
/* Page Tarifs : la palette de la page (cartes claires, surface sombre de la brique phare), les
   trois briques sur des rangées partagées, leurs petits graphiques, la grande vue de l’analyse et
   l’offre pilote. Le calculateur et les couches ont leurs feuilles (src/components/pricing). */
.pricing-page {
  --pricing-card-background: var(--color-surface);
  --pricing-card-border: var(--color-line);
  --pricing-card-shadow: var(--shadow-panel);
  --pricing-label: var(--color-muted);
  --pricing-text: #3d3d3d;
  --pricing-on-dark-muted: #a8a8a8;
  --pricing-on-dark-line: rgb(100% 100% 100% / 0.13);
  --pricing-accent-on-dark: color-mix(
    in srgb,
    var(--color-accent) 60%,
    var(--color-surface)
  );
  --pricing-accent-glow: color-mix(
    in srgb,
    var(--color-accent) 22%,
    transparent
  );
  --pricing-dots: radial-gradient(
    circle at 1px 1px,
    rgb(0 0 0 / 0.09) 1px,
    transparent 1.5px
  );
}

.pricing-kicker {
  color: var(--pricing-label);
  font: 400 var(--text-micro)/1.6 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* Le signal, la valeur et l'heure du pic sont en rouge sur le noir : jamais sous 13 px. */
.pricing-signal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--pricing-accent-on-dark);
  font: 400 13px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.pricing-signal > span {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--pricing-accent-glow);
}

/* ---------- Les trois briques ---------- */
.pricing-bricks {
  margin-top: clamp(4px, 1vw, 16px);
}
.pricing-brick-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
/* Six rangées communes : nom, prix, promesse, pour qui, modules, analyse. Les prix et les
   graphiques tombent à la même hauteur d’une carte à l’autre. */
.pricing-brick {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(22px, 2.3vw, 34px);
  border: 1px solid var(--pricing-card-border);
  border-radius: var(--radius-panel);
  background: var(--pricing-card-background);
  box-shadow: var(--pricing-card-shadow);
  color: var(--color-graphite);
}
.pricing-brick.is-featured {
  border-color: transparent;
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
  color: #fff;
}
.pricing-brick.is-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(22px, 2.3vw, 34px);
  width: 56px;
  height: 2px;
  background: var(--color-accent);
}
.pricing-brick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}
.pricing-brick-name {
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: 720;
  letter-spacing: -0.045em;
}

.pricing-price {
  display: grid;
  gap: 10px;
  margin-top: clamp(22px, 2.4vw, 34px);
}
.pricing-price-figure {
  display: flex;
  align-items: flex-start;
  line-height: 0.86;
}
.pricing-price-amount {
  font-size: clamp(64px, 6.6vw, 100px);
  font-weight: 790;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
}
.pricing-price-currency {
  margin: 0.12em 0 0 0.08em;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 650;
  letter-spacing: -0.03em;
}
.pricing-price-unit {
  color: var(--pricing-label);
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.is-featured .pricing-price-unit {
  color: var(--pricing-on-dark-muted);
}
.pricing-brick-promise {
  max-width: 30ch;
  margin-top: 20px;
  color: var(--pricing-text);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.is-featured .pricing-brick-promise {
  color: #e6e6e6;
}
/* Pour qui : plus discret que la promesse, tenu par un filet. Calé en haut de sa rangée, le
   filet suit la hauteur de la phrase, pas celle de la plus longue des trois cartes. */
.pricing-brick-audience {
  align-self: start;
  max-width: 34ch;
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--color-fill);
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.is-featured .pricing-brick-audience {
  border-left-color: rgb(100% 100% 100% / 0.28);
  color: var(--pricing-on-dark-muted);
}

.pricing-brick-modules {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--pricing-card-border);
}
.is-featured .pricing-brick-modules {
  border-top-color: var(--pricing-on-dark-line);
}
.is-featured .pricing-kicker {
  color: var(--pricing-on-dark-muted);
}
.pricing-brick-modules > ul {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.pricing-module {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}
.pricing-module-mark {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--color-fill);
}
.is-featured .pricing-module-mark {
  background: rgb(100% 100% 100% / 0.32);
}
.pricing-module.is-ai .pricing-module-mark {
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--pricing-accent-glow);
}
.pricing-module .text-link {
  justify-self: start;
  min-height: 26px;
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.02em;
}
.is-featured .pricing-module .text-link {
  color: #fff;
}
.pricing-module-detail {
  grid-column: 2;
  color: var(--pricing-label);
  font-size: 13px;
  line-height: 1.4;
}
.is-featured .pricing-module-detail {
  color: var(--pricing-on-dark-muted);
}
.pricing-module.is-ai .pricing-module-detail {
  color: var(--pricing-accent-on-dark);
}
.pricing-brick:not(.is-featured) .pricing-module.is-ai .pricing-module-detail {
  color: var(--color-accent);
}

/* L’analyse comprise : un encart en bas de chaque carte, avec son graphique d’exemple. */
.pricing-insight {
  align-self: stretch;
  margin-top: 28px;
  padding: 16px 16px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-track) 70%, var(--color-surface));
}
.is-featured .pricing-insight {
  background: rgb(100% 100% 100% / 0.06);
}
.pricing-insight-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-graphite);
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.is-featured .pricing-insight-label {
  color: #fff;
}
.pricing-insight-icon {
  flex: none;
  fill: var(--color-chart);
}
.pricing-insight-icon .is-peak {
  fill: var(--color-accent);
}
.pricing-mini {
  margin: 14px 0 0;
}
.pricing-mini-caption {
  margin-top: 12px;
  color: var(--pricing-label);
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.08em;
}
.is-featured .pricing-mini-caption {
  color: var(--pricing-on-dark-muted);
}

/* Barres : la hauteur suit la part de l’échelle, le pic rouge porte sa valeur. */
.pricing-bars-plot {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 66px;
  padding-top: 16px;
}
.pricing-bar {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 100%;
}
.pricing-bar-fill {
  width: 100%;
  height: calc(var(--share) * 100%);
  border-radius: 2px 2px 0 0;
  background: var(--color-fill);
}
.is-featured .pricing-bar-fill {
  background: rgb(100% 100% 100% / 0.24);
}
.pricing-bar.is-peak .pricing-bar-fill {
  background: var(--color-accent);
}
.pricing-bar-value {
  position: absolute;
  bottom: calc(var(--share) * 100% + 3px);
  left: 50%;
  color: var(--pricing-accent-on-dark);
  font: 600 13px/1 var(--font-mono);
  transform: translateX(-50%);
}
.pricing-bars-axis {
  display: flex;
  gap: 3px;
  margin-top: 6px;
  color: var(--pricing-label);
  font: 400 var(--text-xs)/1.4 var(--font-mono);
}
.pricing-bars-axis > span {
  flex: 1;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
}
.is-featured .pricing-bars-axis {
  color: var(--pricing-on-dark-muted);
}
.pricing-bars-axis > .is-peak {
  color: var(--pricing-accent-on-dark);
  font-size: 13px;
  font-weight: 600;
}

/* Coût matière : le théorique gris, le réel prolongé en rouge de son écart. */
.pricing-cost,
.pricing-readings {
  display: grid;
  gap: 9px;
}
.pricing-cost-row,
.pricing-readings-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.pricing-cost-name,
.pricing-readings-name {
  color: var(--pricing-text);
  font-size: 12px;
}
.pricing-cost-track {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-fill) 35%, var(--color-surface));
}
.pricing-cost-fill {
  display: block;
  width: calc(var(--share) * 100%);
  height: 100%;
  border-radius: 4px;
  background: var(--color-chart);
}
.pricing-cost-row.is-actual .pricing-cost-fill {
  background: linear-gradient(
    90deg,
    var(--color-chart) 0 calc(var(--base) / var(--share) * 100%),
    var(--color-accent) 0
  );
}
.pricing-cost-value,
.pricing-readings-value {
  color: var(--color-graphite);
  font: 500 12px/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pricing-cost-gap {
  margin-left: 6px;
  color: var(--color-accent);
  font-weight: 600;
}

/* Relevés en retard : un carré rouge par relevé, un trait quand il n’y en a aucun. */
.pricing-readings-units {
  display: flex;
  align-items: center;
  gap: 3px;
}
.pricing-readings-unit {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-accent);
}
.pricing-readings-none {
  width: 14px;
  height: 1px;
  background: var(--color-fill);
}
.pricing-readings-row.is-late .pricing-readings-value {
  color: var(--color-accent);
  font-weight: 600;
}

.pricing-bricks-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-top: 24px;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
}
.pricing-bricks-note .text-link {
  gap: 12px;
  font-size: 14px;
  font-weight: 560;
}
.pricing-bricks-note .link-arrow {
  color: var(--color-accent);
}

/* ---------- L’analyse des données ---------- */
.pricing-analysis {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.62fr);
  align-items: start;
  gap: clamp(14px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 84px);
}
.pricing-week {
  --week-gutter: 36px;
  margin: 0;
  padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--pricing-card-border);
  border-radius: var(--radius-panel);
  background: var(--pricing-card-background);
  box-shadow: var(--pricing-card-shadow);
}
.pricing-week-head {
  display: grid;
  gap: 6px;
}
.pricing-week-title {
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.pricing-week-meta {
  color: var(--pricing-label);
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.08em;
}
.pricing-week-plot {
  position: relative;
  height: clamp(200px, 22vw, 290px);
  margin: 40px 0 0 var(--week-gutter);
}
.pricing-week-grid > span {
  position: absolute;
  right: 0;
  bottom: calc(var(--share) * 100%);
  left: calc(-1 * var(--week-gutter));
  display: flex;
  align-items: center;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0 var(--week-gutter),
    var(--color-line) var(--week-gutter)
  );
  color: var(--pricing-label);
  font: 400 var(--text-xs)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pricing-week-bars,
.pricing-week-axis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(8px, 1.8vw, 24px);
}
.pricing-week-bars {
  position: absolute;
  inset: 0;
}
.pricing-week-day {
  position: relative;
}
/* La fourchette annoncée, derrière la barre : de la prévision basse à la haute. */
.pricing-week-range {
  position: absolute;
  right: -4px;
  bottom: calc(var(--low) * 100%);
  left: -4px;
  height: calc((var(--high) - var(--low)) * 100%);
  border-block: 1px dashed var(--color-connection);
  background: color-mix(in srgb, var(--color-fill) 22%, transparent);
  opacity: var(--scene-reveal, 1);
}
.pricing-week-day.is-peak .pricing-week-range {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: var(--color-accent-soft);
}
.pricing-week-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--share) * 100%);
  border-radius: 4px 4px 0 0;
  background: var(--color-chart);
  transform: scaleY(var(--scene-reveal, 1));
  transform-origin: 50% 100%;
}
.pricing-week-day.is-peak .pricing-week-bar {
  background: var(--color-accent);
}
.pricing-week-value {
  position: absolute;
  bottom: calc(var(--high) * 100% + 7px);
  left: 50%;
  color: var(--pricing-text);
  font: 500 var(--text-xs)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  opacity: var(--scene-reveal, 1);
  transform: translateX(-50%);
}
.pricing-week-day.is-peak .pricing-week-value {
  color: var(--color-accent);
  font-weight: 650;
}
.pricing-week-axis {
  margin: 12px 0 0 var(--week-gutter);
  color: var(--pricing-label);
  font: 400 var(--text-micro)/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.pricing-week-axis > .is-peak {
  color: var(--color-accent);
}
.pricing-week-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--pricing-card-border);
}
.pricing-week-stats dt {
  color: var(--pricing-label);
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pricing-week-stats dd {
  margin-top: 6px;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 720;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.pricing-analysis-list {
  display: grid;
  gap: clamp(22px, 2.4vw, 34px);
  padding-top: 8px;
}
.pricing-analysis-item {
  padding-left: 20px;
  border-left: 2px solid var(--color-line);
}
.pricing-analysis-item.is-featured {
  border-left-color: var(--color-accent);
}
.pricing-analysis-name {
  color: var(--color-graphite);
  font: 600 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pricing-analysis-text {
  margin-top: 8px;
  color: var(--pricing-text);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

/* ---------- L’offre pilote ---------- */
.pricing-pilot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: clamp(48px, 6vw, 84px);
  overflow: hidden;
  border: 1px solid var(--pricing-card-border);
  border-radius: var(--radius-panel);
  background: var(--pricing-card-background);
  box-shadow: var(--pricing-card-shadow);
}
.pricing-pilot-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(26px, 3.4vw, 52px);
}
.pricing-pilot-text {
  max-width: 22ch;
  font-size: clamp(25px, 2.5vw, 36px);
  font-weight: 720;
  line-height: 1.14;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.pricing-pilot-start {
  max-width: 36ch;
  margin-top: 18px;
  color: var(--pricing-text);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
/* Ce que nous mesurons : la méthode, puis ses indicateurs, marqués comme les modules. */
.pricing-pilot-measure {
  align-self: stretch;
  margin-top: clamp(24px, 2.6vw, 34px);
  padding-top: 22px;
  border-top: 1px solid var(--pricing-card-border);
}
.pricing-pilot-measure-text {
  max-width: 44ch;
  margin-top: 10px;
  color: var(--pricing-text);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}
/* Deux colonnes à la largeur du plus long : quatre indicateurs, jamais un seul orphelin. */
.pricing-pilot-indicators {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px;
  margin-top: 14px;
}
.pricing-pilot-indicators > li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 11px;
  border: 1px solid var(--pricing-card-border);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-track) 55%, var(--color-surface));
  font-size: 14px;
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.pricing-pilot-indicators > li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--color-chart);
}
.pricing-pilot-action {
  margin-top: auto;
}
.pricing-pilot-measure + .pricing-pilot-action {
  margin-top: clamp(28px, 3vw, 44px);
}
.pricing-pilot-scope {
  padding: clamp(26px, 3.4vw, 52px);
  border-left: 1px solid var(--pricing-card-border);
  background:
    var(--pricing-dots) 0 0 / 16px 16px,
    color-mix(in srgb, var(--color-track) 60%, var(--color-surface));
}
.pricing-pilot-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 14px;
}
.pricing-pilot-module {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.pricing-pilot-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
}
.pricing-pilot-check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pricing-pilot-module .text-link {
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.02em;
}
.pricing-pilot-module.is-excluded .pricing-pilot-check {
  background: var(--color-line);
  color: var(--color-muted);
}
.pricing-pilot-module.is-excluded .text-link {
  color: var(--color-muted);
}
.pricing-pilot-excluded {
  color: var(--color-muted);
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pricing-pilot-till-label {
  margin-top: 30px;
}
.pricing-pilot-till {
  max-width: 40ch;
  margin-top: 8px;
  color: var(--pricing-text);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (width < 1000px) {
  .pricing-brick-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-brick {
    grid-row: auto;
    grid-template-rows: none;
  }
  .pricing-brick-promise {
    max-width: 44ch;
  }
  .pricing-analysis {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-analysis-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (width < 860px) {
  .pricing-pilot {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-pilot-scope {
    border-top: 1px solid var(--pricing-card-border);
    border-left: 0;
  }
}
@media (width < 640px) {
  .pricing-week {
    --week-gutter: 30px;
  }
  .pricing-week-bars,
  .pricing-week-axis {
    gap: 6px;
  }
  .pricing-week-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .pricing-analysis-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-pilot-modules {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Étroit, deux colonnes coupent « Écart entre prévu et vendu » : chaque étiquette à sa largeur. */
  .pricing-pilot-indicators {
    display: flex;
    flex-wrap: wrap;
  }
}