/* Page de partage /app/<langue>/ — le lien à mettre en bio TikTok, Instagram…
   Tout tient sur un écran de téléphone, sans défiler : l'app, sa vidéo, et le bon bouton de store.
   Généré par _modele/outils/partage.py. S'appuie sur devolim.css (polices, boutons, iPhone). */

.k-share {
  --tabbar: 0px;
  min-height: 100vh; min-height: 100svh; padding: 0;
  display: grid; grid-template-rows: auto 1fr auto;
  color: #fff; overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 30%, rgba(255, 255, 255, .22), transparent 70%),
    linear-gradient(170deg, color-mix(in oklab, var(--app) 82%, #fff) 0%, var(--app) 45%, var(--app-2) 100%);
}
.k-share::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(30% 30% at 25% 35%, rgba(255, 255, 255, .14), transparent 70%), radial-gradient(25% 25% at 75% 75%, rgba(255, 255, 255, .1), transparent 70%);
  animation: k-drift 18s ease-in-out infinite alternate;
}

/* Barre du haut : « Une app Devolim » et le choix de la langue. */
.sh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 0; }
.sh-by { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--display); color: rgba(255, 255, 255, .9); text-decoration: none; }
.sh-by img { width: 22px; height: 22px; border-radius: 6px; background: #fff; padding: 3px; }
.sh-lang { position: relative; }
.sh-lang summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 750 13px/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
}
.sh-lang summary::-webkit-details-marker { display: none; }
.sh-lang summary svg { width: 16px; height: 16px; }
.sh-lang ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; margin: 0; padding: 6px; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 2px;
  max-height: 70svh; overflow: auto; border-radius: 18px; background: #fff; color: var(--nuit);
  box-shadow: 0 4px 0 #C9D1E6, 0 24px 40px -16px rgba(10, 16, 51, .55);
}
.sh-lang a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; font: 650 14.5px/1.2 var(--display); }
.sh-lang a:hover, .sh-lang a[aria-current] { background: color-mix(in oklab, var(--app) 14%, #fff); color: var(--app-ink); }

/* Cœur de la page. */
.sh-main { display: grid; align-content: center; justify-items: center; gap: clamp(12px, 2.4svh, 22px); padding: 8px 20px; text-align: center; min-height: 0; }
.sh-phone { width: 100%; display: grid; place-items: center; }
/* La hauteur de l'iPhone suit celle de l'écran pour que tout tienne sans défiler. */
.sh-phone .k-phone { --w: min(300px, 62vw, calc(42svh * 9 / 19.4)); --turn: -10deg; }
.sh-id { display: grid; justify-items: center; gap: 8px; }
.sh-name { display: inline-flex; align-items: center; gap: 12px; }
.sh-name img { width: clamp(44px, 6.5svh, 60px); height: auto; border-radius: 24%; box-shadow: 0 3px 0 rgba(0, 0, 0, .18), 0 12px 24px -10px rgba(0, 0, 0, .45); }
.sh-name h1 { font-size: clamp(25px, 4.2svh, 40px); letter-spacing: -0.03em; text-align: left; text-shadow: 0 2px 18px rgba(0, 0, 0, .16); max-width: 16ch; }
.sh-lead { font: 600 clamp(15px, 2.1svh, 18px)/1.38 var(--display); color: rgba(255, 255, 255, .94); max-width: 34ch; text-wrap: balance; }

/* Boutons des stores. Sans script (ou sur ordinateur) : les deux, côte à côte.
   Sur iPhone : l'App Store en grand, Android en petit lien dessous. Sur Android : l'inverse. */
.sh-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sh-stores .k-store { min-height: 60px; }
.sh-alt { display: none; font: 700 14px/1.2 var(--display); color: rgba(255, 255, 255, .92); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .5); padding: 6px 4px; }
.sh-alt svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }

.is-ios .sh-stores .sh-gplay, .is-android .sh-stores .sh-apple { display: none; }
.is-ios .sh-alt.to-android, .is-android .sh-alt.to-ios { display: inline-block; }
.is-ios .sh-stores .k-store, .is-android .sh-stores .k-store { min-height: 68px; min-width: min(300px, 84vw); justify-content: center; padding-inline: 26px; }
.is-ios .sh-stores .k-store svg, .is-android .sh-stores .k-store svg { width: 30px; height: 30px; }
.is-ios .sh-stores .k-store span, .is-android .sh-stores .k-store span { font-size: 21px; }
.is-ios .sh-stores .k-store small, .is-android .sh-stores .k-store small { font-size: 12px; }

/* QR code : seulement sur ordinateur, pour passer sur le téléphone. */
.sh-qr { display: none; }

.sh-foot { display: flex; justify-content: center; padding: 0 16px max(12px, env(safe-area-inset-bottom)); }
.sh-foot a { font: 650 13px/1 var(--display); color: rgba(255, 255, 255, .8); text-decoration: none; padding: 8px; }
.sh-foot a:hover { color: #fff; text-decoration: underline; }

/* Ordinateur : l'iPhone à gauche, le texte à droite, avec le QR code. */
@media (min-width: 900px) and (min-height: 560px) {
  .sh-main { grid-template-columns: auto minmax(0, 480px); justify-content: center; align-items: center; column-gap: clamp(40px, 6vw, 96px); text-align: left; justify-items: start; }
  .sh-main { grid-template-rows: 1fr auto auto auto 1fr; row-gap: 26px; }
  .sh-id { grid-column: 2; grid-row: 2; } .sh-cta { grid-column: 2; grid-row: 3; } .sh-qr { grid-column: 2; grid-row: 4; }
  .sh-phone { grid-column: 1; grid-row: 1 / -1; width: min(340px, calc(70svh * 9 / 19.4)); }
  .sh-phone .k-phone { --w: 100%; --turn: -14deg; }
  .sh-id { justify-items: start; gap: 14px; }
  .sh-name img { width: 72px; }
  .sh-name h1 { font-size: clamp(36px, 3.6vw, 52px); }
  .sh-lead { font-size: 19px; max-width: 40ch; }
  .sh-stores { justify-content: flex-start; }
  .is-desktop .sh-qr { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border-radius: 22px; background: rgba(255, 255, 255, .14); }
  .sh-qr svg { width: 120px; height: 120px; border-radius: 14px; background: #fff; flex: none; }
  .sh-qr p { font: 650 15px/1.35 var(--display); max-width: 22ch; }
}

/* Très petits écrans (iPhone SE…) : on serre. */
@media (max-height: 640px) {
  .sh-phone .k-phone { --w: min(300px, 50vw, calc(34svh * 9 / 19.4)); }
  .sh-main { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .k-share::before { animation: none; } }

/* Une app sur un seul store : son badge reste affiché partout. */
.sh-stores.solo .k-store { display: inline-flex !important; }

/* /app/ sans langue : liste de secours, le temps du renvoi (ou sans script). */
.sh-lang-list ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; max-width: 520px; }
.sh-lang-list a { display: block; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; text-decoration: none; font: 700 14.5px/1 var(--display); }

/* Bouton « Partager l'app » : menu de partage du téléphone, ou copie du lien. */
.sh-cta { display: grid; justify-items: center; gap: 6px; }
.sh-share {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin-top: 4px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font: 700 14px/1 var(--display); transition: background .2s, transform .15s var(--ease);
}
.sh-share:hover { background: rgba(255, 255, 255, .28); }
.sh-share:active { transform: scale(.96); }
.sh-share svg { width: 17px; height: 17px; }
.sh-share.done { background: #fff; color: var(--app-ink); }
@media (min-width: 900px) and (min-height: 560px) { .sh-cta { justify-items: start; } }