/* Page « Télécharger l'appli » (styles dans un fichier : la politique de sécurité du site refuse les styles en ligne) */
.appli-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 64px); }
.appli-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.appli-hero h1 { font: 400 clamp(40px, 6vw, 68px)/1.02 var(--serif); margin: 10px 0 16px; text-wrap: balance; }
.appli-hero .chapo { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-soft); max-width: 52ch; margin: 0 0 26px; }
.magasins { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.magasin { display: inline-grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 60px; padding: 8px 22px 8px 16px; border-radius: 14px; background: #111; color: #fff; text-decoration: none; transition: transform .25s cubic-bezier(.2, .9, .25, 1), box-shadow .25s; }
.magasin:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.magasin svg { grid-row: 1 / 3; width: 28px; height: 28px; fill: #fff; }
.magasin-haut { font-size: 12px; line-height: 1.1; opacity: .8; }
.magasin-bas { font: 600 18px/1.15 var(--sans); }
.magasin[aria-disabled="true"] { background: #6b6e74; cursor: default; }
.magasin[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.magasin.magasin-mien { order: -1; outline: 3px solid var(--red); outline-offset: 3px; }
.qr { display: flex; gap: 18px; align-items: center; margin-top: 8px; }
.qr img { width: 132px; height: 132px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.qr p { margin: 0; font-size: 14px; color: var(--ink-soft); max-width: 30ch; }
.tel-android .qr, .tel-iphone .qr { display: none; }
.appli-ecran { justify-self: center; width: min(320px, 100%); aspect-ratio: 9 / 19; border-radius: 44px; padding: 10px; background: #16181c; box-shadow: 0 30px 60px rgba(20, 22, 26, .25); }
.appli-ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 34px; display: block; }
.appli-points { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); }
.appli-points h2 { font: 400 clamp(28px, 3.2vw, 40px)/1.1 var(--serif); margin: 0 0 24px; }
.appli-points ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.appli-points li { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.appli-points strong { display: block; font: 400 22px/1.2 var(--serif); margin-bottom: 6px; }
.appli-points span { color: var(--ink-soft); font-size: 15px; }
.appli-note { font-size: 14px; color: var(--ink-soft); max-width: 70ch; }
@media (max-width: 820px) { .appli-hero .wrap { grid-template-columns: minmax(0, 1fr); } .appli-ecran { width: min(260px, 80%); } }
@media (prefers-reduced-motion: reduce) { .magasin { transition: none; } }
.appli-figure { justify-self: center; margin: 0; display: grid; gap: 10px; justify-items: center; width: min(320px, 100%); }
.appli-figure .appli-ecran { width: 100%; }
.appli-figure figcaption { font-size: 13px; color: var(--ink-soft); text-align: center; }
@media (max-width: 820px) { .appli-figure { width: min(260px, 80%); } }