/* Fonctionnalités « Bento vivant » (aurore-v2/fonctions-1) : une mini-démo par carte (lumière au survol : lumiere.css). */
.b1-legend { margin-top: 26px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 14px; color: var(--muted); }
.b1-legend > span { display: inline-flex; align-items: center; gap: 9px; }
.b1-mono { font-family: var(--f-mono); font-size: .92em; color: var(--text); }

.b1-grid { --gap: 16px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); grid-auto-flow: row dense; }
.b1-edit { grid-column: span 5; }
.b1-page { grid-column: span 4; }
.b1-mc { grid-column: span 3; }
.b1-stats { grid-column: span 7; }
.b1-deploy { grid-column: span 5; grid-row: span 2; }
.b1-cdn { grid-column: span 4; }
.b1-login { grid-column: span 3; }
.b1-sign, .b1-domain, .b1-team { grid-column: span 4; }
.b1-cli { grid-column: span 7; }
.b1-quota { grid-column: span 5; }

/* Carte : fond discret, bordure 1 px (liseré et lueur au survol : lumiere.js) */
.bx {
  position: relative; display: flex; flex-direction: column; gap: 22px; min-width: 0;
  padding: 24px; border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3.5%, transparent), color-mix(in srgb, var(--text) 1%, transparent));
  border: 1px solid var(--line);
  isolation: isolate;
}
.bx::before {
  /* liseré haut, comme dans A */
  content: ""; position: absolute; left: 22%; right: 22%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 35%, transparent), transparent);
}
.bx-h h3 { margin-top: 14px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.bx-h p { margin-top: 7px; font-size: 14.5px; color: var(--muted); max-width: 48ch; text-wrap: pretty; }
.bx-d { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bx .dm { --dm-fs: 12px; }
.b1-deploy .dm { --dm-fs: 12.5px; }
.b1-deploy .dm-dp-ab { display: block; }
.b1-deploy .dm-dp { gap: 1.2em; }
.b1-deploy .bx-d { justify-content: flex-start; padding-top: 6px; }
.b1-deploy .dm-dp-chart svg { height: 9em; }

/* La carte « Hébergement inclus » porte le pli Envol */
.b1-fold { position: absolute; top: -1px; right: -1px; width: 40px; height: 40px; z-index: 2; border-top-right-radius: 20px; overflow: hidden; }
.b1-fold::before { content: ""; position: absolute; inset: 0; background: var(--bg); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.b1-fold::after { content: ""; position: absolute; inset: 0; background: var(--revers); clip-path: polygon(0 0, 100% 100%, 0 100%); filter: drop-shadow(-2px 2px 3px color-mix(in srgb, var(--bg) 60%, transparent)); }
.b1-quota .bx-h h3 { padding-right: 30px; }

.b1-grid .rv:nth-child(3n+2) { transition-delay: .08s; }
.b1-grid .rv:nth-child(3n) { transition-delay: .16s; }

@media (max-width: 1080px) {
  .b1-edit { grid-column: span 7; } .b1-page { grid-column: span 5; } .b1-mc { grid-column: span 5; }
  .b1-stats { grid-column: span 7; } .b1-deploy { grid-column: span 5; grid-row: span 2; }
  .b1-cdn { grid-column: span 7; } .b1-login { grid-column: span 5; }
  .b1-sign, .b1-domain { grid-column: span 6; } .b1-team { grid-column: span 5; } .b1-cli { grid-column: span 7; } .b1-quota { grid-column: span 12; }
}
@media (max-width: 860px) {
  .b1-grid > .bx { grid-column: span 6; grid-row: auto; }
  .b1-grid > .b1-stats, .b1-grid > .b1-deploy, .b1-grid > .b1-cli, .b1-grid > .b1-edit, .b1-grid > .b1-quota { grid-column: span 12; }
}
@media (max-width: 640px) {
  .b1-grid > .bx { grid-column: span 12; }
  .bx { padding: 20px; }
}

/* Petit mobile : démos un cran plus grandes, textes ≥ 10 px */
@media (max-width: 640px) {
  .bx .dm, .b1-deploy .dm { --dm-fs: 13px; }
}