/* 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; } }

/* Écrans de lancement animés, d'après le début de deux vidéos d'application. Lectrices (fond sombre) : la marque se construit couche par couche en
   partant du bas, le nom apparaît dessous et une fine ligne avance. Administration (fond clair) : le fond s'éclaire, la marque apparaît en grandissant
   à peine, le nom monte. Les styles de base sont l'état final, la marque entière ; le mouvement n'est ajouté que pour qui ne demande pas de réduire
   les animations. Animation d’environ 1,4 s suivie d’une courte pause, pour 1,9 s au minimum : la durée minimale de l'écran de lancement (public/js/pwa.js). */
.ar-bloc { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ar-squelette-actif .ar-bloc, .ar-navigation .ar-bloc, .ar-squelette-actif .ar-progression, .ar-navigation .ar-progression { display: none; }
.ar-pile, .ar-halo { animation: none; height: auto; overflow: visible; }
.ar-pile { width: min(46vw, 210px); aspect-ratio: 120 / 100; }
.ar-halo { width: min(40vw, 190px); aspect-ratio: 120 / 100; }
.ar-nom { margin: 0; font-family: inherit; font-size: 17px; font-weight: 650; letter-spacing: .04em; }
.ar-lecteur .ar-nom { color: #f1ecda; }
.ar-admin .ar-nom { color: #171717; }
.ar-pile .ar-trace, .ar-pile .ar-livre path { stroke: #e9bf55; }
.ar-halo .ar-trace, .ar-halo .ar-livre path { stroke: #171717; }
.ar-trace { stroke-width: 3.6; }
.ar-trace-fin { stroke-width: 1.4; }
.ar-livre path { stroke-width: 3; }
.ar-pile .ar-plein { fill: #e9bf55; }
.ar-halo .ar-plein { fill: #171717; }
.ar-coeur { fill: #e5333f; stroke: none; }
.ar-progression { position: absolute; left: 50%; bottom: calc(44px + env(safe-area-inset-bottom, 0px)); width: min(34vw, 150px); height: 3px; margin-left: calc(min(34vw, 150px) / -2); border-radius: 2px; background: rgb(255 255 255 / .12); overflow: hidden; }
.ar-progression span { display: block; width: 100%; height: 100%; border-radius: 2px; background: #dfa62a; }
.ar-admin::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #ececea 0, #ffffff 62%); }
.ar-admin .ar-bloc { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ar-pile .ar-trace { stroke-dasharray: 1; animation: ar-tracer .6s cubic-bezier(.65, 0, .35, 1) .35s backwards; }
  .ar-pile .ar-trace-fin { animation-delay: .5s; }
  .ar-pile .ar-livre path { animation: ar-couche .5s cubic-bezier(.34, 1.4, .64, 1) backwards; }
  .ar-pile .ar-livre path:nth-child(7) { animation-delay: .05s; }
  .ar-pile .ar-livre path:nth-child(1), .ar-pile .ar-livre path:nth-child(4) { animation-delay: .12s; }
  .ar-pile .ar-livre path:nth-child(2), .ar-pile .ar-livre path:nth-child(5) { animation-delay: .19s; }
  .ar-pile .ar-livre path:nth-child(3), .ar-pile .ar-livre path:nth-child(6) { animation-delay: .26s; }
  .ar-pile .ar-plein { animation: ar-apparaitre .25s ease-out .85s backwards; }
  .ar-pile .ar-coeur { transform-box: fill-box; transform-origin: center; animation: ar-coeur .45s cubic-bezier(.34, 1.56, .64, 1) .95s backwards; }
  .ar-lecteur .ar-nom { animation: ar-monter .5s cubic-bezier(.22, 1, .36, 1) .8s backwards; }
  .ar-progression span { transform-origin: left center; animation: ar-avancer 1.25s cubic-bezier(.45, .05, .2, 1) .05s backwards; }

  .ar-admin::before { animation: ar-apparaitre .9s ease-out backwards; }
  .ar-halo .ar-marque { transform-box: fill-box; transform-origin: center; animation: ar-entrer .8s cubic-bezier(.16, 1, .3, 1) .1s backwards; }
  .ar-halo .ar-coeur { transform-box: fill-box; transform-origin: center; animation: ar-coeur .45s cubic-bezier(.34, 1.56, .64, 1) .7s backwards; }
  .ar-admin .ar-nom { animation: ar-monter .5s cubic-bezier(.22, 1, .36, 1) .7s backwards; }
}
@keyframes ar-couche { from { opacity: 0; transform: translateY(-18px); } }
@keyframes ar-tracer { from { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } }
@keyframes ar-apparaitre { from { opacity: 0; } }
@keyframes ar-coeur { from { opacity: 0; transform: scale(0); } }
@keyframes ar-monter { from { opacity: 0; transform: translateY(10px); } }
@keyframes ar-avancer { from { transform: scaleX(0); } }
@keyframes ar-entrer { from { opacity: 0; transform: scale(.88); } }
@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-reglage .pwa-aide { margin: 14px 0 0; }
.pwa-notif-reglage .pwa-aide + p { margin: 14px 0 0; }
.pwa-notif-types { display: grid; gap: 12px; margin-top: 20px; }
.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; } }

/* 9. Centre de notifications : liste, états vides, choix par catégorie. */
.centre-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.centre-entete p { margin: 0; }
.centre-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.centre-liste li { border: 1px solid var(--border, #d9d9d3); border-radius: 16px; background: var(--card, #fff); }
.centre-liste a { display: grid; gap: 2px; padding: 12px 14px 12px 28px; color: inherit; text-decoration: none; position: relative; }
.centre-liste li.non-lue { border-color: var(--foreground, #171717); }
.centre-liste li.non-lue a::before { content: ""; position: absolute; inset-inline-start: 11px; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); background: var(--accent-citron, #c6ff34); box-shadow: 0 0 0 1px var(--foreground, #171717); }
.centre-liste li.lue strong { font-weight: 500; }
.centre-vide { display: flex; align-items: center; gap: 12px; padding: 18px; margin: 0 0 14px; border-radius: 16px; background: var(--soft, #ececea); color: var(--muted-foreground, #5b5b57); }
.centre-vide p { margin: 0; }
.centre-vide-ok { background: transparent; border: 1px dashed var(--border, #d9d9d3); }
.centre-choix { margin-top: 18px; }
.centre-choix summary { cursor: pointer; font-weight: 600; }
.centre-acces { margin: 0 0 10px; }
.centre-pastille { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 12px; background: var(--accent-citron, #c6ff34); color: var(--accent-ink, #171717); }

/* Ligne « Application installée » du menu de l'administration : un constat, pas un bouton. */
.pwa-bloc [data-pwa-bouton][aria-disabled="true"] { pointer-events: none; cursor: default; opacity: .65; }

/* Fenêtres et carte d'installation : fond plein. Le thème « verre » de l'administration rend --card translucide, et le texte se
   mélangeait alors à la page derrière. */
.ar-fenetre-corps, .ar-carte { background: #ffffff; color: #171717; }
html[data-theme="dark"] .ar-fenetre-corps, html[data-theme="dark"] .ar-carte { background: #242824; color: #f0f2ed; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="sepia"]) .ar-fenetre-corps, html:not([data-theme="light"]):not([data-theme="sepia"]) .ar-carte { background: #242824; color: #f0f2ed; }
}