/* 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: 700 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; }
.installer { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0 0 20px; }
.installer-carte { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.installer-carte h2 { font: 600 18px/1.25 var(--sans); margin: 0 0 10px; }
.installer-carte ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.installer-carte strong { color: var(--ink); font-weight: 600; }
.installer-carte a { color: var(--red); }
.installer-carte.mien { order: -1; border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.installer-action { margin: 0 0 18px; }
.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 { background: #16181c; }
.appli-ecran img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #f2f1ec; border-radius: 34px; display: block; }
.appli-points { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); }
.appli-points h2 { font: 700 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: 700 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%); } }
.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%); } }