/* Page « Nos applis » (applis.html, en/applis.html). Complète style.css.
   Une appli = un encart .app-card (id = son slug). Pour en ajouter une : copier l'encart, changer l'id, les textes et les images. */
.apps-hero { text-align: center; padding-bottom: 1.5rem; }
.apps-hero .lead { margin-inline: auto; }

.apps-list { display: grid; gap: 2rem; }
.app-card { scroll-margin-top: 6rem; display: grid; gap: 1.75rem; padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: 32px; background: var(--glass); border: 1px solid rgb(255 255 255 / .9); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); box-shadow: var(--shadow-up), inset 0 1px 0 #fff; min-width: 0; }
.app-card:target { box-shadow: var(--shadow-up), inset 0 1px 0 #fff, 0 0 0 3px rgb(58 87 232 / .35); }

.app-head { display: flex; align-items: center; gap: 1rem; }
.app-icon { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 22%; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.app-head h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.app-sub { margin: .3rem 0 0; color: var(--muted); font-weight: 500; }
.app-tag { display: inline-block; margin-top: .5rem; padding: .25rem .75rem; border-radius: 999px; background: #EEF1FF; color: var(--blue); font-size: .8rem; font-weight: 600; letter-spacing: .03em; }

.app-text p { margin: 0 0 .75rem; max-width: 38rem; }
.app-text p:last-child { margin-bottom: 0; }

/* Captures : défilement horizontal sur téléphone, trois colonnes dès la tablette */
.app-shots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 46%); gap: 1rem; margin: 0; padding: .25rem .25rem 1rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.app-shots li { scroll-snap-align: start; }
.app-shots img { width: 100%; height: auto; aspect-ratio: 600 / 1304; border-radius: 22px; background: #FBF6EC; box-shadow: 0 0 0 1px var(--line), var(--shadow); }

/* Badges des magasins. Inactifs (« Bientôt ») tant que le lien n'est pas posé dans js/applis.js. */
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.store-badge { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .45rem 1.1rem .45rem .9rem; border-radius: 14px; background: var(--ink); color: #fff; text-decoration: none; line-height: 1.15; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 2px 0 #000, 0 12px 20px -12px rgb(11 11 15 / .6); }
.store-badge svg { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.store-badge small { display: block; font-size: .7rem; opacity: .75; }
.store-badge b { display: block; font-size: 1rem; font-weight: 600; }
.store-badge.is-soon { background: rgb(11 11 15 / .55); box-shadow: none; cursor: default; }
a.store-badge { transition: transform .2s var(--ease); }
a.store-badge:hover { transform: translateY(-2px); color: #fff; }
a.store-badge:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (min-width: 768px) {
  .app-shots { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; padding-bottom: .25rem; }
  .app-icon { width: 5.5rem; height: 5.5rem; }
}
@media (min-width: 1024px) {
  .app-card { grid-template-columns: 1fr 1.1fr; align-items: start; column-gap: 3rem; }
  .app-head, .app-text, .app-actions { grid-column: 1; }
  .app-shots { grid-column: 2; grid-row: 1 / span 3; }
}
@media (prefers-reduced-motion: reduce) { a.store-badge { transition: none; } }