/* ==========================================================================
   Le store « Apps Azur Tech » (octobre 2026) : /apps, /apps/<slug>,
   /apps/installer. Feuille DE PAGE : hors de style.css, que le contrat de
   poids de l'accueil compte sur toutes les pages.

   La charte d'Azur Tech (papier crème, encre, Space Grotesk / Inter Tight /
   JetBrains Mono) avec les codes d'un store : icônes à coins arrondis,
   pastille « Ouvrir » grise à texte bleu, cartes à la une, bandeau
   d'informations. Le bleu est celui du nom (azur), en deux valeurs mesurées :
   texte sur la pastille grise (5,1:1 en clair) et aplat du grand bouton
   (6,2:1 avec du blanc).
   ========================================================================== */

.page-store {
  --st-blue: #006b8f;          /* texte bleu sur pastille grise, clair */
  --st-blue-fill: #0a6c90;     /* aplat du grand bouton, clair */
  --st-on-blue: #ffffff;
  --st-pill: rgba(0, 0, 0, 0.06);
  --st-pill-hover: rgba(0, 0, 0, 0.1);
  --st-card: #ffffff;
  --st-sep: rgba(0, 0, 0, 0.08);
  --st-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.28), 0 2px 8px -4px rgba(0, 0, 0, 0.08);
  --st-plate: #fbfaf7;         /* plaque crème des logos (comme les tuiles) */
  --st-radius: 22%;            /* coin d'icône d'app */
}
[data-theme="dark"] .page-store {
  --st-blue: #7fd3ee;
  --st-blue-fill: #7fd3ee;
  --st-on-blue: #111110;
  --st-pill: rgba(255, 255, 255, 0.1);
  --st-pill-hover: rgba(255, 255, 255, 0.16);
  --st-card: #1c1c1a;
  --st-sep: rgba(255, 255, 255, 0.08);
  --st-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.7), 0 2px 8px -4px rgba(0, 0, 0, 0.4);
}

.store {
  max-width: 1180px;
  margin: 0 auto;
  padding: 112px 32px 96px;
  min-height: 100vh;
}
.st-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.st-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.st-head-txt { max-width: 660px; min-width: 0; }
.st-head .hero-eyebrow { margin: 0 0 14px; }
.st-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 16px;
}
.st-lead {
  margin: 0;
  font-size: 17px; line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.st-search {
  position: relative;
  flex: 0 1 340px;
  display: flex; align-items: center;
}
.st-search svg {
  position: absolute; left: 14px;
  width: 17px; height: 17px;
  color: var(--muted-3);
  pointer-events: none;
}
.st-search input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 40px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
  color: var(--fg);
  font: 500 15px/1 var(--font-body);
}
.st-search input::placeholder { color: var(--muted-3); }
.st-search input:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 2px; }

/* ── Icône d'app ─────────────────────────────────────────────────────── */
.st-icon {
  --st-size: 64px;
  flex: none;
  width: var(--st-size); height: var(--st-size);
  border-radius: var(--st-radius);
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--st-sep);
  background: var(--st-plate);
}
.st-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-icon--logo { padding: calc(var(--st-size) * 0.12); }  /* un % se lirait sur la largeur du PARENT */
.st-icon--logo img { object-fit: contain; }
.st-icon--glyph { background: var(--accent); color: #fff; padding: calc(var(--st-size) * 0.2); }
.st-icon--glyph svg { width: 100%; height: 100%; }
.st-icon--sm { --st-size: 48px; }
.st-icon--xl { --st-size: 116px; box-shadow: inset 0 0 0 1px var(--st-sep), var(--st-shadow); }

/* ── La pastille « Ouvrir » ──────────────────────────────────────────── */
.st-get {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 76px; height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--st-pill);
  color: var(--st-blue);
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 160ms var(--ease-standard), transform 160ms var(--ease-standard);
}
.st-get:hover { background: var(--st-pill-hover); }
.st-get:active { transform: scale(0.96); }
.st-get:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 2px; }
.st-get--lg {
  height: 44px; min-width: 132px;
  padding: 0 24px;
  font-size: 15px;
  background: var(--st-blue-fill);
  color: var(--st-on-blue);
}
.st-get--lg:hover { background: var(--st-blue-fill); filter: brightness(1.08); }
.st-get--ghost { height: 44px; padding: 0 20px; font-size: 15px; }

/* ── Cartes à la une ─────────────────────────────────────────────────── */
.st-une { position: relative; margin: 0 0 40px; }
.st-une-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 4px 2px 18px;
}
.st-une-track::-webkit-scrollbar { display: none; }
.st-une-track:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 4px; border-radius: 22px; }
.st-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--st-card);
  border: 1px solid var(--st-sep);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--st-shadow);
  transition: transform 220ms var(--ease-standard);
}
@media (hover: hover) {
  .st-card:hover { transform: translateY(-3px); }
}
.st-card-link {
  display: flex; flex-direction: column; flex: 1;
  color: inherit; text-decoration: none;
}
.st-card-link:focus-visible { outline: 2px solid var(--st-blue); outline-offset: -4px; border-radius: 22px; }
.st-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: color-mix(in oklab, var(--accent) 22%, var(--paper-2));
  overflow: hidden;
}
.st-card-media picture, .st-card-img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.st-card-panel {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
}
.st-card-panel svg { width: 34%; height: auto; opacity: 0.92; }
.st-card-txt { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 12px; }
.st-card-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-3);
}
.st-card-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.12;
  text-wrap: balance;
}
.st-card-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
.st-card-app {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--st-sep);
  margin-top: auto;
}
.st-une-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.st-une-h {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; letter-spacing: -0.03em;
  margin: 0;
}
.st-une-nav { display: flex; gap: 8px; }
.st-une-nav[hidden] { display: none; }
.st-arrow {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}
.st-arrow svg { width: 18px; height: 18px; }
.st-arrow[data-dir="-1"] svg { transform: rotate(180deg); }
.st-arrow:disabled { opacity: 0.35; cursor: default; }
.st-arrow:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 2px; }

/* ── Onglets des rayons (filtres) ────────────────────────────────────── */
.st-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px;
}
.st-tabs[hidden] { display: none; }
.st-tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg-soft);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
  transition: background-color 160ms var(--ease-standard), color 160ms var(--ease-standard);
}
.st-tab span {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted-3);
}
.st-tab:hover { color: var(--fg); border-color: var(--fg-soft); }
.st-tab.is-on { background: var(--fg); color: var(--on-accent); border-color: var(--fg); }
.st-tab.is-on span { color: inherit; opacity: 0.75; }
.st-tab:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 2px; }

/* ── Rayons et rangées ───────────────────────────────────────────────── */
.st-rayon { padding: 28px 0 8px; }
.st-rayon[hidden] { display: none; }
.st-rayon + .st-rayon { border-top: 1px solid var(--st-sep); }
.st-rayon-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.st-rayon-h {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; letter-spacing: -0.03em;
  margin: 0;
}
.st-rayon-sub { margin: 0; font-size: 14px; color: var(--muted-3); }
.st-rows {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
}
.st-row {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--st-sep);
}
.st-row[hidden] { display: none; }
.st-row-link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  color: inherit; text-decoration: none;
  border-radius: 16px;
}
.st-row-link:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 4px; }
.st-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-row-name {
  font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-row-sub {
  font-size: 13.5px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.st-row-meta { font-size: 12px; color: var(--muted-3); }
@media (hover: hover) {
  .st-row-link:hover .st-row-name { text-decoration: underline; text-underline-offset: 3px; }
}
.st-rows--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.st-empty {
  padding: 40px 0; text-align: center;
  color: var(--muted);
}
.st-empty[hidden] { display: none; }
.st-empty b { color: var(--fg); }
.st-empty-reset {
  margin-left: 6px;
  border: 0; background: none; padding: 0;
  color: var(--st-blue); font: 600 15px/1.4 var(--font-body);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

/* ── Sections de fin (installation, autres piliers) ─────────────────── */
.st-section-h {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08;
  margin: 0 0 12px;
  text-wrap: balance;
}
.st-section-sub { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 620px; }
.st-more {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--st-blue); font-weight: 600; font-size: 15px;
  text-decoration: none;
}
.st-more svg { width: 16px; height: 16px; }
.st-more:hover { text-decoration: underline; text-underline-offset: 3px; }

.st-install {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px;
  margin: 56px 0 0;
  padding: 40px;
  border-radius: 28px;
  background: var(--paper-2);
  scroll-margin-top: 96px;
}
.st-install-head .hero-eyebrow { margin: 0 0 12px; }

.st-cross { margin: 64px 0 0; }
.st-cross-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.st-cross-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px;
  border-radius: 22px;
  border: 1px solid var(--st-sep);
  background: var(--st-card);
  color: inherit; text-decoration: none;
  transition: transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
@media (hover: hover) {
  .st-cross-card:hover { transform: translateY(-2px); box-shadow: var(--st-shadow); }
}
.st-cross-card:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 3px; }
.st-cross-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--fg); color: var(--on-accent);
  margin-bottom: 6px;
}
.st-cross-ico svg { width: 22px; height: 22px; }
.st-cross-kicker {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-3);
}
.st-cross-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.st-cross-txt { color: var(--muted); font-size: 15px; line-height: 1.55; }
.st-cross-card .st-more { margin-top: auto; padding-top: 6px; }

/* ── Le guide d'installation (onglets) ───────────────────────────────── */
.st-guide { min-width: 0; }
.st-guide-tabs {
  display: none;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--st-pill);
  margin-bottom: 18px;
}
.st-guide.is-live .st-guide-tabs { display: flex; }
.st-guide-tab {
  flex: 1;
  min-height: 40px;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--fg-soft);
  font: 600 14px/1.2 var(--font-body);
  cursor: pointer;
}
.st-guide-tab[aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.st-guide-tab:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 2px; }
.st-guide-body { display: flex; gap: 28px; align-items: flex-start; }
.st-guide-panes { flex: 1; min-width: 0; }
.st-guide-pane + .st-guide-pane { margin-top: 28px; }
.st-guide.is-live .st-guide-pane + .st-guide-pane { margin-top: 0; }
.st-guide.is-live .st-guide-pane[hidden] { display: none; }
.st-guide-h { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.st-guide-h span { font-weight: 500; color: var(--muted-3); }
.st-guide.is-live .st-guide-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: st-step; }
.st-step {
  counter-increment: st-step;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--st-card);
  border: 1px solid var(--st-sep);
}
.st-step-ico {
  position: relative;
  flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--st-pill);
  color: var(--st-blue);
}
.st-step-ico::after {
  content: counter(st-step);
  position: absolute; top: -6px; left: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--fg); color: var(--on-accent);
  font: 700 11px/1 var(--font-mono);
}
.st-step-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
.st-step-txt b { font-size: 15px; }
.st-step-txt b a { color: inherit; text-decoration-color: var(--st-blue); text-underline-offset: 3px; }
.st-step-txt span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.st-guide-note { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.st-guide-result {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--st-pill);
  font-size: 14px; line-height: 1.5; color: var(--fg-soft);
}
.st-guide-result svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--st-blue); }
.st-qr {
  flex: none;
  width: 196px;
  margin: 0;
  padding: 14px;
  border-radius: 18px;
  background: var(--st-card);
  border: 1px solid var(--st-sep);
  text-align: center;
}
.st-qr img { display: block; width: 168px; height: 168px; margin: 0 auto 10px; border-radius: 8px; }
.st-qr figcaption { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* ── La fiche d'une app ──────────────────────────────────────────────── */
.fiche { max-width: 1040px; }
.fi-back { margin: 0 0 20px; }
.fi-back a {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px;
  color: var(--st-blue); font-weight: 600; font-size: 15px; text-decoration: none;
}
.fi-back svg { width: 18px; height: 18px; transform: rotate(180deg); }
.fi-back a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fi-head { display: flex; align-items: flex-start; gap: 28px; margin-bottom: 28px; }
.fi-head-txt { min-width: 0; flex: 1; }
.fi-name {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04;
  margin: 2px 0 6px;
}
.fi-sub { margin: 0 0 8px; font-size: 18px; color: var(--muted); line-height: 1.4; text-wrap: balance; }
.fi-dev {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px;
  font-size: 13px; color: var(--muted-3);
}
.fi-flag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--fg); color: var(--on-accent);
}
.fi-flag--labo { background: var(--st-pill); color: var(--fg-soft); }
.fi-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fi-install-link, .fi-share {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  font: 600 14px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.fi-install-link svg, .fi-share svg { width: 17px; height: 17px; }
.fi-install-link:hover, .fi-share:hover { border-color: var(--fg-soft); }
.fi-install-link:focus-visible, .fi-share:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 2px; }

.fi-infos {
  list-style: none; margin: 0 0 8px; padding: 14px 0;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--st-sep);
  border-bottom: 1px solid var(--st-sep);
}
.fi-infos::-webkit-scrollbar { display: none; }
.fi-infos li {
  flex: 1 0 auto;
  min-width: 112px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 2px 16px;
  text-align: center;
}
.fi-infos li + li { border-left: 1px solid var(--st-sep); }
.fi-info-k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-3);
}
.fi-info-v { font-size: 14.5px; font-weight: 600; color: var(--fg-soft); white-space: nowrap; }

.fi-section { padding: 32px 0 8px; scroll-margin-top: 96px; }
.fi-section + .fi-section { border-top: 1px solid var(--st-sep); }
.fi-h {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.fi-h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.fi-lead { margin: -4px 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.fi-lead a { color: var(--st-blue); font-weight: 600; }

.fi-shots {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 2px 18px;
}
.fi-shots::-webkit-scrollbar { display: none; }
.fi-shots:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 4px; border-radius: 18px; }
.fi-shot { scroll-snap-align: start; margin: 0; min-width: 0; }
.fi-shot--browser {
  align-self: start;
  width: min(620px, 82vw);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--card);
  box-shadow: var(--st-shadow);
}
/* Écran de téléphone : un cadre arrondi, sans dessiner de faux appareil. */
.fi-shot--phone {
  align-self: start;
  width: 260px;
  border-radius: 28px; overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--st-shadow);
  background: var(--card);
}
.fi-shot-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--paper); border-bottom: 1px solid var(--st-sep); }
.fi-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.fi-shot picture, .fi-shot-img { display: block; width: 100%; height: auto; }
/* La maquette de la page vitrine : remise d'aplomb (la vitrine la pose en
   perspective) et sans halo, posée comme une capture parmi les autres. */
.fi-shot--mock { align-self: start; width: min(560px, 82vw); }
.fi-shot--mock .appmock { transform: none; }

.fi-about-body { max-width: 720px; }
.fi-about-body p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--fg-soft); }
.fi-note { color: var(--muted) !important; font-size: 15px !important; }

.fi-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fi-feat {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--st-card);
  border: 1px solid var(--st-sep);
}
.fi-feat-ico {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--st-pill); color: var(--st-blue);
}
.fi-feat-ico svg { width: 15px; height: 15px; }
.fi-feat > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fi-feat b { font-size: 15px; }
.fi-feat > span:last-child > span { font-size: 14px; color: var(--muted); line-height: 1.5; }

.fi-data-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 720px; }
.fi-data-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--fg-soft); }
.fi-data-list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--muted-3); }
.fi-data-more { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.fi-data-more a { color: var(--st-blue); }

.fi-bridge {
  margin: 48px 0 0;
  padding: 28px;
  border-radius: 22px;
  background: var(--paper-2);
}
.fi-bridge p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--fg-soft); max-width: 720px; }
.fi-perso-note { color: var(--muted) !important; }
.fi-bridge-links { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 6px; }

/* Les sections de page vitrine posées dans une fiche : plus serrées que sur
   l'ancienne page dédiée (le store fait déjà l'en-tête). */
.fiche .story-section { padding: 48px 0 24px; border-top: 1px solid var(--st-sep); }
.fiche .story-stats { margin: 28px 0 8px; padding: 0; }  /* l'ancienne page la remontait sur son hero */
.fiche .story-midcta { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.fiche .story-midcta .story-cta-sub { margin: 0; color: var(--muted-3); font-size: 14px; }

/* ── Réservé à l'admin : les apps non publiques, hors vitrine (cf. apps.html).
   Ambre, comme la pastille « Vue visiteur » et la vue admin du placeholder de
   l'Espace Clients : la couleur du dépôt pour « tu regardes quelque chose que
   le visiteur ne voit pas ». Jamais rouge : une app privée est un état de
   travail normal, pas une panne (même arbitrage que la carte de visibilité).
   Les trois jetons sont DÉCLARÉS ici, dans les deux thèmes, plutôt que lus
   avec un repli en dur : la charte n'a pas d'ambre, et ce bloc ne vit que sur
   cette page (règle du jeton fantôme, cf. tests/test_jetons_css.py).
   Contrastes mesurés au navigateur, lavis composité sur son fond (un lavis à
   5,5 % lu comme un aplat opaque donne un chiffre absurde) : le plus faible
   des sept textes du bloc est à 4,82:1 en sombre et 5,36:1 en clair. */
.apps-private {
  --priv-fg: #8a5712;
  --priv-line: rgba(180, 118, 42, 0.42);
  --priv-bg: rgba(180, 118, 42, 0.055);
  margin: 56px auto 0;
  max-width: 760px;
  border: 1px dashed var(--priv-line);
  border-radius: 16px;
  padding: 22px 20px;
  background: var(--priv-bg);
}
[data-theme="dark"] .apps-private {
  --priv-fg: #e2b467;
  --priv-line: rgba(226, 180, 103, 0.3);
  --priv-bg: rgba(226, 180, 103, 0.06);
}
.apps-private-head { margin-bottom: 16px; }
.apps-private-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--priv-fg);
}
.apps-private-h {
  margin: 6px 0;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
}
.apps-private-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.apps-private-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.apps-private-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.apps-private-mark {
  flex: none;
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--fg);
}
.apps-private-mark svg { width: 18px; height: 18px; }
.apps-private-mark:has(.app-glyph-img) { background: #fbfaf7; padding: 4px; }
.apps-private-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.apps-private-txt b { font-size: 15px; font-weight: 600; }
.apps-private-txt span {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-3);
}
.apps-private-open {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 38px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--fg); text-decoration: none;
}
@media (hover: hover) {
  .apps-private-open:hover { background: var(--paper-2); }
}
/* Téléphone : la ligne s'empile, le bouton passe pleine largeur (règle maison
   des cibles tactiles : viser un bouton de 60 px en bout de ligne à 390 px). */
@media (max-width: 560px) {
  .apps-private { padding: 18px 14px; }
  .apps-private-row { flex-wrap: wrap; }
  .apps-private-open { flex: 1 0 100%; min-height: 44px; justify-content: center; }
}
/* ── Tablette ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .st-une-track { grid-auto-columns: minmax(0, 46%); }
  .st-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-install { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
}

/* ── Téléphone ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .store { padding: 92px 16px 72px; }
  .st-head { gap: 20px; margin-bottom: 24px; }
  .st-search { flex: 1 1 100%; }
  .st-lead { font-size: 16px; }
  .st-une { margin-bottom: 28px; }
  .st-une-track {
    grid-auto-columns: 86%;
    gap: 14px;
    margin: 0 -16px; padding: 4px 16px 16px;
    scroll-padding: 0 16px;
  }
  .st-card-title { font-size: 20px; }
  .st-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px 4px; padding: 2px 16px 6px;
  }
  .st-tabs::-webkit-scrollbar { display: none; }
  .st-tab { flex: none; min-height: 44px; }
  .st-rows, .st-rows--compact { grid-template-columns: minmax(0, 1fr); }
  .st-icon { --st-size: 60px; }
  .st-icon--xl { --st-size: 96px; }
  .st-install { margin-top: 40px; padding: 22px 16px; border-radius: 22px; margin-left: -4px; margin-right: -4px; }
  .st-cross-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-guide-body { flex-direction: column; }
  .st-qr { display: none; }
  .st-guide-tab { font-size: 13px; padding: 0 6px; }

  .fi-head { gap: 18px; }
  .fi-sub { font-size: 16px; }
  .fi-actions .st-get--lg { flex: 1 1 100%; }
  .fi-install-link, .fi-share { flex: 1; justify-content: center; }
  .fi-long { display: none; }
  .fiche .story-section { padding: 36px 0 16px; }
  .fi-infos { margin-left: -16px; margin-right: -16px; padding-left: 4px; padding-right: 4px; }
  .fi-infos li { min-width: 104px; padding: 2px 10px; }
  .fi-feats { grid-template-columns: minmax(0, 1fr); }
  .fi-shots { margin: 0 -16px; padding: 4px 16px 16px; scroll-padding: 0 16px; }
  .fi-shot--phone { width: 62vw; border-radius: 24px; }
  .fi-shot--browser, .fi-shot--mock { width: 84vw; }
  .fi-bridge { padding: 22px 18px; }
  /* Aucun champ sous 16 px sur téléphone : en dessous, iOS zoome au tap. */
  .st-search input { font-size: 16px; }
}
@media (max-width: 380px) {
  .fi-head { flex-direction: column; gap: 14px; }
}

/* ── Au doigt : la pastille d'une rangée vise 44 px (règle maison des cibles
   tactiles), la rangée garde sa hauteur : la pastille déborde dans sa marge. */
@media (pointer: coarse) {
  .st-get { min-height: 44px; }
  .st-tab, .st-guide-tab { min-height: 44px; }
}

/* ── Écran sans souris : pas d'état de survol qui colle après le tap ──── */
@media (hover: none) {
  .st-get:not(.st-get--lg):hover { background: var(--st-pill); }
  .st-get--lg:hover { filter: none; }
  .st-tab:hover { color: var(--fg-soft); border-color: var(--line-strong); }
  .st-tab.is-on:hover { color: var(--on-accent); border-color: var(--fg); }
}
@media (prefers-reduced-motion: reduce) {
  .st-card, .st-cross-card, .st-get, .st-tab { transition: none; }
  .st-une-track, .fi-shots { scroll-behavior: auto; }
}