/* ================================
   RÉSEAU ET STOCKAGE
   ================================
   Indicateur hors ligne, éléments qui ont besoin du réseau (bouton AR)
   et avertissement quand le navigateur n'enregistre pas le passeport.
   La classe .is-offline est posée sur <html> par NetworkManager. */

/* Indicateur discret sous la navigation */
.network-status {
    width: fit-content;
    max-width: calc(100% - 2 * var(--spacing-sm));
    margin: 0 auto var(--spacing-xs);
    padding: 0.4rem 1rem;
    border: 1px dashed var(--warning);
    border-radius: 999px;
    background: rgba(255, 217, 61, 0.08);
    color: var(--warning);
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.4;
}

/* Bouton AR désactivé hors ligne */
[data-requires-network]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: grayscale(0.6);
}

/* Explication sous les actions de la fiche, visible seulement hors ligne */
.offline-hint {
    display: none;
    margin-top: var(--spacing-xs);
    color: var(--warning);
    font-size: 0.9rem;
}

.is-offline .offline-hint {
    display: block;
}

/* Passeport gardé en mémoire seulement (voir SafeStorage) */
.storage-warning {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--accent-red);
    border-radius: var(--radius-md);
    background: rgba(255, 107, 107, 0.1);
    color: var(--text-primary);
    line-height: 1.5;
}

@media (max-width: 480px) {
    .network-status {
        font-size: 0.8rem;
        border-radius: var(--radius-md);
    }
}