/* ─── /app — « L'appli Weared » (01.10.2026) ─────────────────────────────
   Le tuto d'installation : téléphone d'abord. Chargée par la seule page /app
   (views/static/appli.ejs). Règle d'Alex : pas de texte explicatif — trois
   pastilles, des étapes de quelques mots, des dessins. Les dessins (partials/
   appli-dessin.ejs) se colorent ici, avec les jetons du site : clair et sombre
   sans une ligne de plus.

   Les cas (iPhone, Android, ordinateur, appli) sont des panneaux dont UN est
   montré (.est-choisi). Sans script, les liens du sélecteur (#cas-…) montrent
   leur panneau par :target. Déjà installé (display-mode standalone, ou
   .est-installee posée par le script pour l'iPhone) : « C'est fait » seul. */

.appli { max-width: 760px; margin: 0 auto; padding: 4px 0 24px; }
.appli-tete { text-align: center; }
.appli-icone { display: block; width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 18px;
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.appli-tete h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1.1; letter-spacing: -.01em; }

/* Trois pastilles : une icône, deux ou trois mots. */
.appli-pastilles { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px; }
.appli-pastilles li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: var(--r-round); background: var(--surface);
  font-size: .86rem; font-weight: 600; line-height: 1.2; color: var(--text); }
.appli-pastilles svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--or); }

/* Le vrai bouton (beforeinstallprompt) : montré par installer.js. */
.appli-installer { margin: 20px 0 0; text-align: center; }
.appli-installer .btn { min-width: 240px; padding: 15px 26px; font-size: 1rem; }
.appli-installer .btn svg { width: 20px; height: 20px; }

/* ─── Sélecteur ──────────────────────────────────────────────────────────── */
/* Quatre cases : deux par ligne au téléphone (« Instagram, TikTok… » ne
   tient pas à côté de trois autres sur 343 px), une ligne au-delà. */
.appli-choix { margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 600px) { .appli-choix { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.appli-choix a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text-dim);
  font-size: .9rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; }
.appli-choix a:hover { color: var(--text); border-color: var(--line-2); }
.appli-choix a[aria-current="true"] { color: #fff; background: var(--text); border-color: var(--text); }
:root[data-theme="dark"] .appli-choix a[aria-current="true"] { color: var(--bg); }
.appli-choix a:focus-visible { outline: none; box-shadow: var(--ring); }

/* Sous-sélecteur : le navigateur (Safari, Chrome…). Plus discret. */
.appli-nav { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.appli-nav a { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--r-round); font-size: .82rem; font-weight: 600;
  color: var(--text-dim); text-decoration: none; }
.appli-nav a:hover { color: var(--text); border-color: var(--line-2); }
.appli-nav a[aria-current="true"] { color: var(--text); border-color: var(--text); background: var(--surface); }
.appli-nav a:focus-visible { outline: none; box-shadow: var(--ring); }

/* ─── Panneaux ───────────────────────────────────────────────────────────── */
.appli-cas, .appli-variante { display: none; }
.appli-cas.est-choisi, .appli-variante.est-choisi { display: block; }
/* Sans script : le lien suivi montre son panneau, et cache celui de départ. */
.appli-cas:target, .appli-variante:target { display: block; }
.appli-corps:has(> .appli-cas:target) > .appli-cas.est-choisi:not(:target) { display: none; }
.appli-cas:has(.appli-variante:target) .appli-variante.est-choisi:not(:target) { display: none; }
.appli-cas { margin: 18px 0 0; scroll-margin-top: 90px; }
.appli-variante { scroll-margin-top: 90px; }
/* « Ouvre dans Safari » / « Ouvre dans Chrome » : la consigne, en titre. */
.appli-cas-titre { margin: 18px 0 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  line-height: 1.2; text-align: center; }

/* Les étapes : numéro, quelques mots, le dessin. Une colonne au téléphone,
   trois au bureau. */
.appli-etapes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: etape; }
@media (min-width: 720px) { .appli-etapes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.appli-etape { counter-increment: etape; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.appli-etape-mots { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700;
  font-size: 1rem; line-height: 1.3; }
.appli-etape-mots::before { content: counter(etape); flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: .88rem; color: var(--or);
  border: 1.5px solid var(--line-gold); }
/* Le bouton à toucher, dans la phrase : une pastille à sa forme (⋯, ⋮, ≡,
   Partager). Les points et les traits sont dessinés, pas tapés : toutes les
   polices n'ont pas « ⋮ ». */
.appli-glyphe { display: inline-grid; place-items: center; vertical-align: -7px; width: 30px; height: 26px;
  margin: 0 2px; border-radius: 8px; background: var(--tint-2); color: var(--text); }
.appli-glyphe svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.appli-glyphe svg path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.appli-glyphe-ios { color: #0a84ff; }
.appli-glyphe-ios svg path { stroke-width: 1.8; }

/* Quand le navigateur offre la vraie installation, le bouton suffit. */
.appli.peut-installer .appli-cas-android .appli-etapes,
.appli.peut-installer .appli-cas-android .appli-nav { display: none; }

/* Navigateur d'une appli : le bouton qui copie le lien. */
.appli-copier { margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.appli-copier .btn { min-width: 200px; }

/* Ordinateur : le QR code, qui ouvre /app sur le téléphone. */
.appli-qr { margin: 16px auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.appli-qr .partage-qr-svg { width: 200px; height: 200px; padding: 6px; border: 1px solid var(--line); }
.appli-qr figcaption { font-weight: 700; font-size: .95rem; }
.appli-qr-url { font-size: .84rem; color: var(--muted); }

/* Déjà installé. */
.appli-installee { display: none; margin: 22px 0 0; padding: 22px 18px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); text-align: center; }
.appli-installee-titre { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.35rem; }
.appli-installee-titre svg { width: 28px; height: 28px; color: var(--settled); }
.appli-installee .push-row { justify-content: center; }
.appli-installee .push-etat { margin: 8px 0 0; }
.appli-installee .btn { margin-top: 14px; }
.appli.est-installee .appli-installee { display: block; }
.appli.est-installee .appli-choix, .appli.est-installee .appli-corps, .appli.est-installee .appli-installer { display: none !important; }
@media all and (display-mode: standalone) {
  .appli .appli-installee { display: block; }
  .appli .appli-choix, .appli .appli-corps, .appli .appli-installer { display: none !important; }
}

/* ─── Dessins ────────────────────────────────────────────────────────────── */
.appli-dessin { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto;
  color: var(--text); overflow: visible; }
.appli-dessin .d-ecran { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.2; }
.appli-dessin .d-voile { fill: var(--bg-2); }
.appli-dessin .d-texte { fill: var(--line-2); }
.appli-dessin .d-texte.d-fort { fill: var(--muted); opacity: .55; }
.appli-dessin .d-barre { fill: var(--tint-2); }
.appli-dessin .d-feuille { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; }
.appli-dessin .d-ligne { fill: var(--tint); }
.appli-dessin .d-rond { fill: var(--tint-2); }
.appli-dessin .d-point { fill: currentColor; }
.appli-dessin .d-trait { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.appli-dessin .d-pale { opacity: .35; }
.appli-dessin .d-filet { stroke: var(--line-2); stroke-width: 1; }
.appli-dessin .d-poignee { fill: var(--line-2); }
.appli-dessin .d-ios { color: #0a84ff; }
.appli-dessin .d-ios-plein { fill: #0a84ff; }
.appli-dessin .d-tuile { fill: #FBF8F5; stroke: var(--line-2); stroke-width: 1; }
.appli-dessin .d-tuile-vide { fill: var(--tint-2); }
.appli-dessin .d-w { fill: #140E0D; }
.appli-dessin .d-bascule { fill: #34C759; }
.appli-dessin .d-bascule-rond { fill: #fff; }
.appli-dessin .d-bouton { fill: var(--text); opacity: .85; }
.appli-dessin .d-cible { fill: none; stroke: var(--or); stroke-width: 2.6; animation: d-pouls 1.8s ease-in-out infinite; }
@keyframes d-pouls { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .appli-dessin .d-cible { animation: none; } }

@media (max-width: 420px) {
  .appli-choix a { font-size: .86rem; }
  .appli-etape { padding: 12px; }
}