/* =========================================================================
   Stockage persistant — Imagilire Mini                 (Lot 2, tâche 1)
   Styles de la notification unique affichée lorsque le navigateur accorde
   le stockage persistant, et de l'infobulle « Stockage local » une fois
   l'avertissement devenu caduc.
   Comportement : js/imagilire-mini-persistence.js
   ========================================================================= */

/* --------- Notification « vos histoires sont à l'abri » --------- */
/* z-index 2200 : au-dessus des modales (2100 au plus haut dans le projet).
   Le message est transitoire, ancré en bas d'écran et refermable ; le laisser
   passer derrière la modale d'ajout d'histoire — encore ouverte à l'instant
   de l'enregistrement — le rendrait invisible. */
.storage-persist-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2200;

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

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

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

    animation: storagePersistIn 0.4s ease-out;
}

.storage-persist-toast > i {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--primary-color);
}

.storage-persist-toast-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

.storage-persist-toast-close {
    flex: 0 0 auto;
    /* 32 px : cible tactile confortable pour une main d'enfant comme d'adulte,
       sans faire grossir la bulle. */
    width: 32px;
    height: 32px;
    padding: 0;

    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;

    font-size: 22px;
    line-height: 1;
    color: var(--text-color);
    opacity: 0.6;
    transition: opacity 0.2s, background-color 0.2s;
}

.storage-persist-toast-close:hover,
.storage-persist-toast-close:focus-visible {
    opacity: 1;
    background-color: var(--shadow-color);
}

.storage-persist-toast.hide {
    animation: storagePersistOut 0.4s forwards;
}

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

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

/* --------- Infobulle « Stockage local » --------- */
/* Le paragraphe d'avertissement, réécrit par refreshStorageNotice() quand la
   persistance est acquise : le ton passe de la mise en garde à l'information. */
.info-tooltip p.storage-notice-persisted {
    color: var(--primary-color);
    font-weight: 600;
}

/* --------- Haut contraste --------- */
body.high-contrast .storage-persist-toast {
    background-color: #000;
    color: #FFF;
    border: 2px solid var(--secondary-color);
    border-left-width: 6px;
}

body.high-contrast .storage-persist-toast > i,
body.high-contrast .info-tooltip p.storage-notice-persisted {
    color: var(--secondary-color);
}

body.high-contrast .storage-persist-toast-close {
    color: #FFF;
    opacity: 1;
}

/* --------- Petits écrans --------- */
/* En dessous de 480 px, la bulle occupe toute la largeur utile ; elle est
   remontée pour ne pas recouvrir la notification d'orientation paysage
   (.landscape-notification, également ancrée à 20 px du bas). */
/* Animations dédiées : la bulle n'étant plus centrée par `translateX(-50%)`,
   réutiliser les images-clés du mode large la décalerait de la moitié de
   l'écran. */
@media (max-width: 480px) {
    .storage-persist-toast {
        bottom: 80px;
        left: 16px;
        right: 16px;
        max-width: none;
        transform: none;
        animation-name: storagePersistInFlat;
    }

    .storage-persist-toast.hide {
        animation-name: storagePersistOutFlat;
    }
}

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

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

/* --------- Mouvement réduit --------- */
/* Le module retire la bulle 400 ms après avoir posé la classe `hide` :
   sans animation, elle disparaît simplement à l'issue de ce délai. */
@media (prefers-reduced-motion: reduce) {
    .storage-persist-toast,
    .storage-persist-toast.hide {
        animation: none;
    }

    .storage-persist-toast.hide {
        opacity: 0;
    }
}