/* =========================================================================
   Sauvegarde complète — Imagilire Mini                 (Lot 2, tâche 4)
   Modale « Tout sauvegarder / Tout restaurer » : choix de ce qui doit être
   restauré, puis compte rendu. Comportement : js/imagilire-mini-backup.js

   La modale est construite en JavaScript et retirée du DOM à la fermeture :
   il n'y a pas d'état « caché » à styler, contrairement aux modales écrites
   dans index.html (`.add-story-form`, visibilité portée par `opacity` et la
   classe `active`).

   La liste des profils réutilise volontairement les classes
   `.profile-import-item` de css/styles.css : c'est la même liste à cocher que
   dans l'ancienne modale d'import de profils, avec le même aspect. Un second
   jeu de styles pour le même objet aurait divergé au premier ajustement.
   ========================================================================= */

/* --------- Voile --------- */
/* z-index 2250 : au-dessus des modales du projet (2100) et de la bulle du
   stockage persistant (2200), en dessous du dialogue « espace saturé »
   (2300) — celui-ci peut s'ouvrir *pendant* une restauration, et c'est alors
   lui qui doit être lu en premier. */
.backup-overlay {
    position: fixed;
    inset: 0;
    z-index: 2250;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;

    background-color: rgba(0, 0, 0, 0.7);
    animation: backupFadeIn 0.2s ease-out;
}

/* --------- Boîte --------- */
.backup-dialog {
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;

    padding: 24px;
    border-radius: 12px;
    border-top: 5px solid var(--primary-color);

    background-color: var(--page-color);
    color: var(--text-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

    text-align: left;
    animation: backupZoomIn 0.2s ease-out;
}

.backup-title {
    margin: 0 0 14px;
    font-size: 1.25em;
    line-height: 1.3;
    color: var(--primary-color);
}

.backup-title > i {
    margin-right: 6px;
}

.backup-message {
    margin: 0 0 12px;
    font-size: 1em;
    line-height: 1.45;
}

/* Précisions et mises en garde : plus petites que le message, jamais
   porteuses de l'information principale. */
.backup-hint {
    margin: 0 0 14px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.05);

    font-size: 0.85em;
    line-height: 1.5;
    color: #555;
}

/* --------- Cases à cocher --------- */
.backup-choices {
    margin: 0 0 14px;
}

.backup-choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;

    /* 44 px de cible tactile : la modale s'affiche aussi sur les tablettes,
       où l'application est le plus utilisée. */
    min-height: 44px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;

    cursor: pointer;
    transition: background-color 0.2s;
}

.backup-choice:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.backup-choice input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.backup-choice-text {
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.4;
}

/* Liste des profils, en retrait sous la case qui la commande : le décalage
   dit visuellement ce que la case maîtresse gouverne. */
.backup-profile-list {
    margin: 0 0 10px 32px;
}

.backup-profile-list[hidden] {
    display: none;
}

/* --------- Conflit de nom (Lot 6, tâche 4) --------- */
/* La fiche entière prend la couleur du conflit — et l'emporte sur le cadre
   `.checked`, posé plus haut dans css/styles.css. Dans une classe de
   vingt-cinq élèves, la liste se parcourt en diagonale : les deux ou trois
   profils qui demandent une décision doivent se repérer sans lire. */
.profile-import-item--conflict,
.profile-import-item--conflict.checked {
    border-color: #ecc94b;
}

/* Le bloc n'apparaît que sur les profils dont le nom existe déjà ici. Il est
   volontairement appuyé — bande ambre, icône — parce qu'il annonce la seule
   opération de cette modale qui puisse effacer des données. Les profils sans
   conflit gardent la fiche sobre d'avant : une mise en garde qui s'affiche
   partout ne se lit nulle part. */
.backup-conflict {
    margin: 10px 0 2px;
    padding: 10px 12px;
    border-left: 4px solid #ecc94b;
    border-radius: 0 6px 6px 0;
    background-color: #fffaf0;
    color: #744210;
}

/* Le profil retrouvé à l'identique — même nom, même date de création — n'est
   pas un conflit : il n'a ni bande ambre, ni icône, ni choix. Juste une phrase
   qui dit ce qui sera remplacé. Trois mises en garde pour une restauration de
   sa propre sauvegarde apprendraient surtout à ne plus les lire. */
.backup-conflict--same {
    border-left-color: var(--primary-color);
    background-color: rgba(0, 0, 0, 0.04);
    color: inherit;
}

/* Profil décoché : les commandes sont inertes, et se voient inertes. */
.backup-conflict--off {
    opacity: 0.5;
}

.backup-conflict-title {
    margin: 0 0 6px;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.35;
}

.backup-conflict-title > i {
    margin-right: 6px;
    color: #b7791f;
}

.backup-conflict-detail {
    margin: 0 0 10px;
    font-size: 0.82em;
    font-weight: normal;
    line-height: 1.45;
}

/* Seule ligne du bloc paisible : rien ne la suit, donc pas de marge basse. */
.backup-conflict--same .backup-conflict-detail {
    margin-bottom: 0;
}

.backup-conflict-option {
    display: flex;
    gap: 9px;
    align-items: flex-start;

    /* 44 px comme les autres cibles de la modale : elle s'affiche aussi sur
       les tablettes, où l'application est le plus utilisée. */
    min-height: 44px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.backup-conflict-option:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.backup-conflict-option input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.backup-conflict-option-text {
    font-size: 0.86em;
    font-weight: 600;
    line-height: 1.35;
}

/* La conséquence chiffrée du remplacement — « 12 séances de lecture seront
   effacées » — est en maigre sous l'intitulé : c'est une précision, pas un
   second intitulé. */
.backup-conflict-option-text small {
    font-weight: normal;
    opacity: 0.85;
}

.backup-conflict-rename {
    margin: 2px 0 4px 27px;   /* aligné sur le texte du bouton radio au-dessus */
}

.backup-conflict-rename[hidden] {
    display: none;
}

.backup-conflict-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78em;
    font-weight: 600;
}

.backup-conflict-input {
    width: 100%;
    max-width: 260px;
    min-height: 44px;
    padding: 8px 10px;
    border: 2px solid #cbd5e0;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    font-family: inherit;
    font-size: 0.95em;
}

.backup-conflict-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(54, 177, 179, 0.25);
}

.backup-conflict-hint {
    margin: 8px 0 0;
    font-size: 0.78em;
    font-style: italic;
    line-height: 1.4;
}

/* --------- Compte rendu --------- */
.backup-report {
    margin: 0 0 14px;
    padding-left: 22px;
    font-size: 0.95em;
    line-height: 1.6;
}

/* `role="status"` : lu par les lecteurs d'écran à chaque changement — c'est
   ce qui annonce « Restauration en cours » sans que rien ne bouge à l'écran. */
.backup-status {
    margin: 0 0 14px;
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 4px solid var(--primary-color);
    background-color: rgba(54, 177, 179, 0.12);

    font-size: 0.9em;
    line-height: 1.45;
}

.backup-status[hidden] {
    display: none;
}

/* --------- Actions --------- */
.backup-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.backup-btn {
    min-height: 44px;
    padding: 10px 18px;

    border: 2px solid var(--primary-color);
    border-radius: 8px;
    background-color: transparent;
    color: var(--primary-color);

    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.backup-btn.primary {
    background-color: var(--primary-color);
    color: #FFF;
}

.backup-btn:hover,
.backup-btn:focus-visible {
    opacity: 0.85;
}

.backup-btn:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Pendant l'écriture : le curseur dit que l'attente est normale, et les deux
   boutons sont désactivés pour qu'aucun second clic ne relance la
   restauration en cours. */
.backup-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* --------- Partager une histoire (Lot 13) --------- */
/* Même modale, deux listes : celle des histoires à envoyer (`.share-list`),
   et celle des histoires reçues, qui reprend les fiches à cocher des profils
   (`.profile-import-item`) — le même objet, donc le même aspect. */
.share-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.share-item {
    display: flex;
    gap: 12px;
    align-items: center;

    padding: 10px 12px;
    margin-bottom: 8px;
    border: 2px solid var(--border-color, #ddd);
    border-radius: 8px;
    transition: border-color 0.2s;
}

/* Une histoire déjà envoyée garde son cadre : dans une liste de vingt, on
   voit d'un coup d'œil celles qui sont parties. */
.share-item--fait {
    border-color: var(--primary-color);
}

.share-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background-color: rgba(0, 0, 0, 0.06);
}

.share-info {
    flex: 1 1 auto;
    min-width: 0;   /* sans quoi un long titre pousse les boutons hors de la boîte */
}

.share-title {
    display: block;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.share-meta,
.share-done {
    display: block;
    font-size: 0.8em;
    line-height: 1.4;
}

.share-meta {
    opacity: 0.8;
}

.share-done {
    font-weight: 600;
    color: var(--primary-color);
}

.share-done[hidden] {
    display: none;
}

.share-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.share-actions .backup-btn {
    padding: 8px 12px;
    white-space: nowrap;
}

/* Liste des histoires reçues : pas de retrait, il n'y a pas de case
   maîtresse au-dessus d'elle comme pour les profils. */
.share-import-list {
    margin: 0 0 14px;
}

.share-import-label {
    align-items: center;
}

.share-import-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

/* Déjà là, à l'identique : rien à décider, la fiche s'efface. */
.share-import-item--off .profile-import-item-label {
    opacity: 0.6;
    cursor: default;
}

.share-owner {
    margin: 0 0 14px;
}

.share-owner-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9em;
    font-weight: 700;
}

.share-owner-select {
    max-width: 100%;
}

.share-owner-hint {
    margin: 6px 0 0;
    font-size: 0.8em;
    font-style: italic;
    line-height: 1.4;
}

/* --------- Choix des histoires et sélection (Lot 14) --------- */
/* À la restauration, la liste des histoires se replie au-delà de cinq : une
   sauvegarde de classe en compte des dizaines, et elle repousserait les
   profils hors de l'écran. */
.backup-story-details {
    margin: -4px 0 10px 32px;
}

.backup-story-details[hidden] {
    display: none;
}

.backup-story-summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    font-size: 0.88em;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
}

/* La liste est déjà en retrait sous son dépliant. */
.backup-story-details .backup-story-list {
    margin-left: 0;
}

.backup-story-tools {
    display: flex;
    gap: 14px;
    margin: 0 0 8px;
}

/* Des liens d'action plutôt que des boutons pleins : ils agissent sur la
   liste, pas sur la modale, et ne doivent pas rivaliser avec « Exporter ». */
.backup-link-btn {
    min-height: 32px;
    padding: 4px 2px;
    border: none;
    background: none;
    color: var(--primary-color);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.backup-link-btn:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
}

.selection-heading {
    margin: 16px 0 8px;
    font-size: 1em;
    color: var(--primary-color);
}

.selection-categories {
    margin: 0 0 6px;
    padding: 6px 10px 2px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
}

.selection-categories .backup-choice {
    min-height: 40px;
    margin-bottom: 2px;
    padding: 6px 8px;
}

/* Aucun profil coché : les catégories n'ont rien à gouverner, et se voient
   inertes plutôt que de disparaître — on comprend ainsi à quoi elles
   serviront. */
.selection-categories:disabled {
    opacity: 0.5;
}

.selection-legend {
    padding: 0 4px;
    font-size: 0.88em;
    font-weight: 700;
}

/* Le résumé reste visible au-dessus des boutons : c'est lui qui dit ce que
   le clic sur « Exporter » va produire. */
.selection-summary {
    position: sticky;
    bottom: -24px;
    margin-top: 14px;
    /* Opaque : la liste défile dessous. La teinte de `.backup-status` est
       reposée par-dessus le fond de page. */
    background-color: var(--page-color);
    background-image: linear-gradient(rgba(54, 177, 179, 0.12), rgba(54, 177, 179, 0.12));
}

/* --------- Haut contraste --------- */
/* La boîte est construite sur `--page-color`, qui passe au noir dans ce mode :
   elle suit donc le thème, contrairement au panneau de réglages (fond blanc
   en dur). Seules les zones à fond translucide doivent être reprises — sur
   fond noir, un voile noir à 5 % ne se distingue plus de rien. */
body.high-contrast .backup-dialog {
    border: 2px solid var(--secondary-color);
    border-top-width: 6px;
}

body.high-contrast .backup-title {
    color: var(--secondary-color);
}

body.high-contrast .backup-hint {
    color: #FFF;
}

body.high-contrast .backup-hint,
body.high-contrast .backup-status {
    background-color: transparent;
    border: 1px solid var(--secondary-color);
}

body.high-contrast .backup-choice:hover {
    background-color: transparent;
    outline: 2px solid var(--secondary-color);
}

/* Les fiches de profil viennent de css/styles.css, où leur bordure vaut
   `--border-color, #ddd` : sur le fond noir du mode haut contraste, le cadre
   disparaît et les deux profils se confondent en une seule liste. */
body.high-contrast .backup-profile-list .profile-import-item,
body.high-contrast .backup-profile-list .profile-import-item.checked {
    border-color: var(--secondary-color);
    background-color: transparent;
    box-shadow: none;
}

/* Le bloc de conflit pose un fond ambre clair en dur : sur le fond noir de ce
   mode, son texte brun deviendrait illisible. Il repasse en noir sur ambre,
   avec un cadre — plutôt qu'en transparent, car c'est le seul endroit de la
   modale qui annonce un effacement possible et il doit rester distinct. */
body.high-contrast .backup-conflict {
    background-color: #FFF3C4;
    border: 2px solid var(--secondary-color);
    border-left-width: 5px;
    color: #000;
}

body.high-contrast .backup-conflict-title > i {
    color: #000;
}

body.high-contrast .backup-conflict-option:hover {
    background-color: transparent;
    outline: 2px solid #000;
}

body.high-contrast .backup-conflict-input {
    border-color: #000;
}

/* Comme les fiches de profil : un cadre `#ddd` disparaît sur fond noir. */
body.high-contrast .share-item,
body.high-contrast .share-import-list .profile-import-item,
body.high-contrast .share-import-list .profile-import-item.checked {
    border-color: var(--secondary-color);
    background-color: transparent;
    box-shadow: none;
}

body.high-contrast .share-done,
body.high-contrast .backup-story-summary,
body.high-contrast .backup-link-btn,
body.high-contrast .selection-heading {
    color: var(--secondary-color);
}

body.high-contrast .selection-summary {
    background-color: var(--page-color);
    background-image: none;
}

body.high-contrast .backup-story-list .profile-import-item,
body.high-contrast .backup-story-list .profile-import-item.checked,
body.high-contrast .selection-categories {
    border-color: var(--secondary-color);
    background-color: transparent;
    box-shadow: none;
}

body.high-contrast .backup-btn {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

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

/* --------- Petits écrans --------- */
@media (max-width: 480px) {
    .backup-dialog {
        padding: 18px;
    }

    /* Boutons pleine largeur : à 375 px, deux boutons côte à côte réduisent
       chaque cible à une largeur inconfortable.
       `column` et non `column-reverse` : l'ordre à l'écran reste celui du DOM,
       donc celui de la tabulation et de la lecture vocale. */
    .backup-actions {
        flex-direction: column;
    }

    .backup-btn {
        width: 100%;
    }

    /* Le retrait de la liste des profils est réduit : à cette largeur, 32 px
       pris sur la gauche font passer les noms à la ligne. */
    .backup-profile-list {
        margin-left: 16px;
    }

    /* Les boutons d'une histoire passent sous son titre : à côté, ils ne
       lui laisseraient que quelques lettres par ligne. */
    .share-item {
        flex-wrap: wrap;
    }

    .share-info {
        flex-basis: calc(100% - 76px);
    }

    .share-actions {
        width: 100%;
    }

    .share-actions .backup-btn {
        flex: 1 1 0;
        width: auto;
    }

    .backup-story-details {
        margin-left: 16px;
    }

    .selection-summary {
        bottom: -18px;
    }
}

/* --------- Mouvement réduit --------- */
@media (prefers-reduced-motion: reduce) {
    .backup-overlay,
    .backup-dialog {
        animation: none;
    }

    .backup-btn,
    .backup-choice {
        transition: none;
    }
}

@keyframes backupFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes backupZoomIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}