/* ESDI — L'APP IPHONE SUR LE WEB (2026-10-11).
   Chargée UNIQUEMENT quand le lien App Store est réglé et hors de l'app (injectée par
   extensions/server_connect/routes/esdi-app-store.js). Jetons du design system, clair et sombre.

   LE BADGE D'APPLE — règles d'usage (developer.apple.com/app-store/marketing/guidelines) :
   · l'artwork officiel, intact : /img/app-store/badge-fr-noir.svg et badge-fr-blanc.svg (« Télécharger dans
     l'App Store », téléchargés depuis les outils marketing d'Apple le 11/10) — jamais recoloré, recadré ni animé ;
   · 40 px de haut au minimum à l'écran ;
   · une zone de protection d'au moins un quart de sa hauteur tout autour (ici 12 px pour 44 px) ;
   · le noir sur fond clair, le blanc (bordure grise) sur fond sombre. */

.esdi-as-badge { display: inline-block; line-height: 0; margin: 12px; border-radius: 8px; flex: 0 0 auto; }
.esdi-as-badge img { display: block; height: 44px; width: auto; }
.esdi-as-badge--grand img { height: 52px; }
.esdi-as-badge:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 3px; }
.esdi-as-badge__blanc { display: none !important; }
[data-theme="dark"] .esdi-as-badge__noir { display: none !important; }
[data-theme="dark"] .esdi-as-badge__blanc { display: block !important; }

/* Le badge et son QR, côte à côte (ordinateur) ; le QR toujours noir sur blanc, pour qu'il se lise. */
.esdi-as-duo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: -12px; }
.esdi-as-qr-bloc { margin: 12px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.esdi-as-qr { width: 112px; height: 112px; padding: 6px; background: #fff; border-radius: var(--radius-md); border: 1px solid var(--line); display: block; }
.esdi-as-duo__legende { font-size: var(--text-caption, 13px); color: var(--ink-faded); max-width: 16ch; line-height: 1.4; margin: 0; text-align: center; }
@media (pointer: coarse) { .esdi-as-qr-bloc { display: none !important; } }

/* L'INVITATION (iPhone et iPad, hors de l'app). Posée sur la page, sous la barre d'état, jamais par-dessus tout :
   pas de voile, pas de piège — « Plus tard » et la croix la retirent, et elle se tait 7 jours. */
.esdi-as-invitation {
  position: fixed; z-index: 1080;
  top: calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  left: 12px; right: 12px; margin: 0 auto; max-width: 480px;
  display: grid; grid-template-columns: 44px 1fr 44px; column-gap: 12px; row-gap: 10px; align-items: center;
  padding: 12px 8px 12px 14px;
  background: var(--bg-card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  animation: esdi-as-entree var(--duration-medium, 240ms) var(--ease-out-strong, ease-out) both;
}
@keyframes esdi-as-entree { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .esdi-as-invitation { animation: none; } }
.esdi-as-invitation__icone { width: 44px; height: 44px; border-radius: 10px; }
.esdi-as-invitation__texte { min-width: 0; }
.esdi-as-invitation__texte strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.esdi-as-invitation__texte span { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-soft); margin-top: 2px; }
.esdi-as-invitation__fermer {
  width: 44px; height: 44px; display: grid; place-items: center; align-self: start;
  border: 0; background: none; color: var(--ink-faded); border-radius: var(--radius-pill); padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.esdi-as-invitation__fermer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.esdi-as-invitation__actions { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; padding-right: 6px; }
.esdi-as-invitation__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border-radius: var(--radius-pill); background: var(--gradient-brand); color: #fff; font-size: 16px; font-weight: 600;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.esdi-as-invitation__btn:hover, .esdi-as-invitation__btn:focus { color: #fff; text-decoration: none; }
.esdi-as-invitation__plus-tard {
  min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--ink-soft);
  font: inherit; font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.esdi-as-invitation__btn:active, .esdi-as-invitation__plus-tard:active, .esdi-as-invitation__fermer:active { opacity: .6; }

/* Un bloc caché reste caché, quel que soit l'affichage que lui donne sa page (.mr-rangee est en flex). */
[data-app-store-bloc][hidden], [data-app-store-ios][hidden], [data-app-store-sans][hidden], [data-app-store-masque-ios][hidden], img[data-app-store-qr][hidden], .esdi-as-qr-bloc[hidden] { display: none !important; }
.esdi-as-invitation[hidden] { display: none !important; }