/* Application installable (pwa.md) : écran de lancement, squelette de page, cartes d'invitation, fenêtre de mise à jour.
   Tout ce qui est propre à l'application installée passe par la classe « app » posée sur <html> avant l'affichage. */

/* « hidden » doit l'emporter sur les display: flex de ces éléments (et seulement les leurs). */
.ar-carte[hidden], .ar-carte [hidden], .ar-fenetre[hidden], .ar-notif[hidden], .pwa-aide[hidden], .pwa-bloc [hidden] { display: none !important; }

/* 1. Écran de lancement : logo qui bat, puis squelette de page (logo seul sur fond encre pour le lecteur, sur fond blanc pour l'administration). */
.ar-lancement { display: none; position: fixed; inset: 0; z-index: 2147483000; align-items: center; justify-content: center; background: #171717; transition: opacity .3s ease; }
.ar-lancement.ar-admin { background: #ffffff; }
html.ar-lance .ar-lancement { display: flex; animation: ar-secours 0s linear 8s forwards; }
.ar-lancement.ar-fondu { opacity: 0; }
.ar-logo { width: min(36vw, 170px); height: auto; aspect-ratio: 120 / 100; animation: ar-bat 1.1s ease-in-out infinite; }
.ar-squelette { display: none; position: absolute; inset: 0; padding: 22px 18px; background: var(--background, #f5f5f6); }
.ar-squelette-actif .ar-logo, .ar-navigation .ar-logo { display: none; }
.ar-squelette-actif .ar-squelette, .ar-navigation .ar-squelette { display: block; }
.ar-navigation { transition: none; background: var(--background, #f5f5f6); }
.ar-forme { background: var(--soft, #e4e4e7); border-radius: 14px; animation: ar-clair 1.2s ease-in-out infinite; }
.ar-forme-titre { height: 22px; width: 52%; margin-bottom: 20px; }
.ar-forme-carte { height: 108px; margin-bottom: 14px; }
.ar-forme-ligne { height: 14px; width: 90%; margin-bottom: 10px; border-radius: 8px; }
@keyframes ar-bat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes ar-clair { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes ar-secours { to { visibility: hidden; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ar-logo, .ar-forme { animation: none; }
  .ar-lancement { transition: opacity .15s ease; }
}

/* 2. Carte d'invitation à installer, et carte d'activation des notifications. */
.ar-carte { position: fixed; inset-inline: 12px; bottom: 12px; z-index: 1200; max-width: 540px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 16px; background: var(--card, #fff); color: var(--foreground, #171717); border: 1px solid var(--border, #d9d9d3); border-radius: 20px; box-shadow: 0 10px 30px rgb(0 0 0 / .14); }
.ar-carte-icone { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.ar-carte-texte { flex: 1 1 200px; min-width: 0; }
.ar-carte-texte strong { display: block; font-family: var(--police-titre, inherit); font-size: 15px; }
.ar-carte-texte p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-foreground, #5b5b57); }
/* Les deux boutons ont la même largeur et la même hauteur, l'un sous l'autre sur grand écran, côte à côte sur téléphone. */
.ar-carte-actions { display: grid; gap: 8px; min-width: 150px; margin-inline-start: auto; }
.ar-carte-actions .btn { width: 100%; min-height: 44px; padding-block: 0; justify-content: center; text-align: center; white-space: nowrap; }
@media (max-width: 560px) { .ar-carte-actions { grid-template-columns: 1fr 1fr; width: 100%; margin-inline-start: 0; } }
@media (max-width: 820px) { .ar-carte { bottom: 88px; } }

/* 3. Fenêtre de mise à jour. */
.ar-fenetre { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgb(0 0 0 / .45); }
.ar-fenetre-corps { width: min(100%, 380px); padding: 22px; background: var(--card, #fff); color: var(--foreground, #171717); border-radius: 24px; border: 1px solid var(--border, #d9d9d3); }
.ar-fenetre-corps h2 { margin: 0 0 6px; font-size: 19px; }
.ar-fenetre-corps p { margin: 0 0 18px; color: var(--muted-foreground, #5b5b57); }
.ar-fenetre-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* 4. Bouton « Installer l'application » permanent (Mon compte, administration, retour de paiement). */
.pwa-bloc { margin: 14px 0; }
.pwa-bloc .discret { margin: 6px 0 0; }
.pwa-aide { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--soft, #ececea); font-size: 14px; }

/* 5. Notes visibles seulement dans l'application installée. */
.pwa-google-ios, .pwa-transfert { display: none; margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-foreground, #5b5b57); }
html.app-ios .pwa-google-ios { display: block; }
html.app .pwa-transfert { display: block; }

/* 6. Pages simples hors du site (hors ligne, paiement reçu). */
.pwa-page-simple { background: var(--background, #f4f4f1); color: var(--foreground, #171717); font-family: var(--police-texte, system-ui, sans-serif); }
.pwa-simple { max-width: 420px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.pwa-simple h1 { font-family: var(--police-titre, inherit); font-size: 26px; margin: 22px 0 8px; }
.pwa-simple p { color: var(--muted-foreground, #5b5b57); }
.pwa-simple-logo { width: 96px; height: auto; }
html[data-theme="dark"] .pwa-simple-logo { filter: invert(1); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="sepia"]) .pwa-simple-logo { filter: invert(1); } }

/* 7. Réglages des notifications (Mon compte, administration). */
.pwa-notif-reglage { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border, #d9d9d3); }
.pwa-notif-reglage h3 { margin: 0 0 4px; font-size: 16px; }
.pwa-notif-types { display: grid; gap: 8px; margin-top: 10px; }
.pwa-notif-types .btn { justify-self: start; margin-top: 4px; }

/* 8. Guide d'installation (iPhone, Safari de bureau) : trois étapes numérotées et une flèche vers la barre du navigateur. */
.ar-guide[hidden] { display: none !important; }
.ar-guide-etapes { list-style: none; counter-reset: etape; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.ar-guide-etapes li { counter-increment: etape; position: relative; padding-inline-start: 44px; min-height: 32px; line-height: 1.5; display: flex; align-items: center; }
.ar-guide-etapes li::before { content: counter(etape); position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; background: var(--accent-citron, #c6ff34); color: var(--accent-ink, #171717); }
.ar-guide-fleche { display: none; position: fixed; inset-inline: 0; bottom: 10px; justify-content: center; color: #fff; pointer-events: none; }
html.app-ios .ar-guide-fleche, .ar-guide.ar-guide-ios .ar-guide-fleche { display: flex; animation: ar-fleche 1.1s ease-in-out infinite; }
@keyframes ar-fleche { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ar-guide-fleche { animation: none !important; } }