/* Laoud — page « Laoud pour les entreprises » (entreprises.html), en complément de style.css (en-tête, bandeau .hero, cartes
   .apps / .app, étapes .steps, encadré .note, pied de page). Clair par défaut, sombre via les jetons de style.css. */

/* Bandeau sombre : le bouton principal est clair (le bouton de marque, foncé, disparaîtrait sur le bandeau). */
.biz-hero .label { color: var(--on-ink-muted); }
.biz-hero .button { background: #FFFFFF; color: var(--ink); margin-top: 8px; }
.biz-hero .button:hover { text-decoration: underline; text-underline-offset: 4px; }
.biz-hero .button:active { background: var(--pressed); }
.biz-hero .button:focus-visible { outline: 3px solid var(--on-ink); outline-offset: 3px; }
.biz-hero .biz-hint { color: var(--on-ink-muted); font-size: 15px; margin: 10px 0 0; }

.biz-note { margin-top: 28px; }

/* Cartes « Ce que vous gérez » : titre court, phrase concrète ; une seule surface par carte (filet, pas d'ombre). */
/* 4 cartes : 2 × 2 sur grand écran (jamais une carte seule sur une ligne), 1 colonne sur téléphone. */
.biz-cards { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.biz-cards .app h3 { font-size: 19px; margin: 0 0 6px; }
.biz-cards .app p { color: var(--text-muted); }

/* Prix : un seul encadré, sans montant inventé. */
.biz-price { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; max-width: var(--measure); }
.biz-price p:last-child { margin-bottom: 0; }

.biz-cta { margin: 8px 0 0; }
.button:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 3px; }