/* =========================================================================
   Application installable — Imagilire Mini              (Lot 3, tâche 1)
   Bloc « Installer l'application » du panneau de réglages
   (« Gestion & confidentialité »), en tête du groupe : une application
   installée obtient de Chrome un stockage persistant sans invite, ce qui
   conditionne la jauge affichée juste en dessous.
   Comportement : js/imagilire-mini-pwa.js
   ========================================================================= */

/* Le squelette porte `hidden` dans index.html. Aucun des trois états n'est
   décidé côté serveur : c'est le script qui révèle le bloc une fois qu'il sait
   quoi proposer (invite native, mode d'emploi, ou constat d'installation).
   Sans le script, rien ne s'affiche — jamais un bouton inerte. */
.pwa-install[hidden],
.pwa-install [hidden] {
    display: none;
}

/* --------- Bouton d'installation --------- */
/* Reprend `.settings-btn` pour la couleur et la taille ; seul le placement
   diffère, calqué sur les boutons de sauvegarde complète du même groupe. */
#pwaInstallBtn {
    display: block;
    margin: 6px 0 0;
}

/* Indispensable, et pas une redondance de la règle générique ci-dessus :
   `#pwaInstallBtn` (spécificité 1-0-0) l'emporte sur `.pwa-install [hidden]`
   (0-2-0). Sans cette ligne, le bouton reste **visible** alors que le script
   le déclare masqué — défaut constaté en pilotage navigateur. Toute règle
   posée ici sur un `id` doit avoir sa contrepartie `[hidden]`. */
#pwaInstallBtn[hidden] {
    display: none;
}

/* --------- Ligne d'état --------- */
/* Une seule ligne, écrite par le script : « Vous utilisez la version
   installée », ou le mode d'emploi propre au navigateur quand aucune invite
   native n'est disponible. */
.pwa-install-state {
    margin: 6px 0 0;
    font-size: 0.85em;
    line-height: 1.4;
    color: #666;
}

/* Même code couleur que la ligne « stockage persistant » de la jauge voisine
   (css/imagilire-mini-storage-quota.css) : la teinte de marque signale un état
   acquis, jamais une consigne à suivre. */
.pwa-install-state[data-state="installed"] {
    color: var(--primary-color);
    font-weight: 600;
}

/* --------- Haut contraste --------- */
/* `.settings-group` reste **blanc** en haut contraste (css/settings-styles.css)
   alors que `body.high-contrast` bascule `--text-color` en blanc : écrire clair
   ici rendrait le bloc invisible. Noir sur blanc, comme le bloc « Espace de
   stockage ». Le défaut de fond — tous les `<label>` du panneau sont blancs sur
   blanc dans ce mode — reste hors périmètre de ce fichier. */
body.high-contrast .pwa-install #pwaInstallLabel,
body.high-contrast .pwa-install-state,
body.high-contrast .pwa-install-state[data-state="installed"] {
    color: #000;
}

/* `--primary-color` vaut `#000` en haut contraste : un bouton noir à texte
   blanc reste conforme, mais sans bordure il se confond avec le texte de la
   ligne d'état juste au-dessus. */
body.high-contrast #pwaInstallBtn {
    border: 2px solid #000;
    background-color: #000;
    color: #FFF;
}

/* =========================================================================
   Bannière « nouvelle version disponible »              (Lot 3, tâche 3)
   -------------------------------------------------------------------------
   Sur un dépôt FTP sans étape de build, c'est la pièce qui manque le plus :
   sans elle, une mise à jour n'est prise qu'au **deuxième** lancement, et
   personne ne sait qu'il en existe une.
   Comportement : js/imagilire-mini-pwa.js
   ========================================================================= */

/* Ancrée en bas, comme les trois autres éléments flottants de l'application
   — mais **au-dessus** d'eux : `bottom: 92px` la place hors d'atteinte du
   bouton « + » (60 px de haut, ancré à 20 px du bas et à droite), de la
   notification d'orientation et de la bulle de stockage persistant, toutes
   trois à 20 px du bas. Centrée à 480 px de large sur un écran de 800 px, la
   bannière **touchait** le bouton « + » — constaté en pilotage navigateur.
   Décaler les autres aurait marché aussi, mais eux sont transitoires et elle
   ne l'est pas : c'est à l'élément qui reste de céder le passage.

   z-index 1900 : au-dessus du contenu et du livre ouvert (10), en dessous
   des modales (2100) et de la bulle de stockage persistant (2200). */
.pwa-update-banner {
    position: fixed;
    bottom: 92px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1900;

    display: flex;
    align-items: center;
    gap: 12px;

    max-width: min(480px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 12px;

    background-color: var(--page-color);
    color: var(--text-color);
    border-left: 4px solid var(--secondary-color);
    box-shadow: 0 5px 20px var(--shadow-color);

    animation: pwaUpdateIn 0.4s ease-out;
}

.pwa-update-banner > i {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--secondary-color);
}

.pwa-update-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

.pwa-update-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 40 px de haut : cible tactile confortable sur tablette, sans faire grossir
   la bannière au point de couvrir la page du livre. */
.pwa-update-btn {
    min-height: 40px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--primary-color);
    color: #FFF;
    transition: background-color 0.3s;
}

.pwa-update-btn:hover {
    background-color: #2a8e90;
}

.pwa-update-btn-secondaire {
    background: none;
    color: var(--text-color);
    font-weight: 400;
    text-decoration: underline;
}

.pwa-update-btn-secondaire:hover {
    background: none;
    opacity: 0.7;
}

/* --------- Petits écrans --------- */
/* En dessous de 560 px, texte et boutons s'empilent : côte à côte, le texte
   tomberait à deux mots par ligne. La bannière prend alors toute la largeur
   utile, ce qui la ferait passer **par-dessus** le bouton « + » si elle
   était restée à 20 px du bas — d'où le `bottom: 92px` de la règle
   générale, qui vaut aussi ici. */
@media (max-width: 560px) {
    .pwa-update-banner {
        left: 16px;
        right: 16px;
        max-width: none;
        transform: none;
        flex-direction: column;
        align-items: stretch;
        animation-name: pwaUpdateInFlat;
        /* Sur un téléphone tenu à la verticale, la notification d'orientation
           s'étale sur trois ou quatre lignes : 20 px du bas + ~80 px de haut.
           À 92 px, la bannière lui mangeait sa première ligne — constaté à
           375 px. 124 px la dégagent, bouton « + » compris. */
        bottom: 124px;
    }

    .pwa-update-actions {
        justify-content: flex-end;
    }
}

@keyframes pwaUpdateIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes pwaUpdateInFlat {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------- Haut contraste --------- */
/* Ici le fond est celui de l'application (`--page-color` passe au noir),
   contrairement au bloc des réglages : le texte clair est donc le bon choix,
   et c'est le jaune du mode qui porte l'accent. */
body.high-contrast .pwa-update-banner {
    background-color: #000;
    color: #FFF;
    border: 2px solid var(--secondary-color);
    border-left-width: 6px;
}

body.high-contrast .pwa-update-banner > i {
    color: var(--secondary-color);
}

body.high-contrast .pwa-update-btn {
    background-color: var(--secondary-color);
    color: #000;
}

body.high-contrast .pwa-update-btn-secondaire {
    background: none;
    color: #FFF;
}

/* --------- Mouvement réduit --------- */
@media (prefers-reduced-motion: reduce) {
    .pwa-update-banner {
        animation: none;
    }
}