/* =========================================================================
   Séances de lecture — Imagilire Mini                   (Lot 5, tâche 1)
   -------------------------------------------------------------------------
   Deux blocs, tous deux dans la modale de statistiques :

     · `.stat-source.measured` — l'état « temps mesuré » de la ligne de
       provenance, sous le chiffre de la carte « Minutes de lecture » (la mise
       en forme de base de `.stat-source` vit dans
       css/imagilire-mini-statistics.css, deux cartes s'en servant) ;
     · `.reading-sessions` — la liste des dernières séances.

   Feuille séparée plutôt qu'ajout à `imagilire-mini-statistics.css` : ce sont
   des styles nés avec le module d'enregistrement, ils se retirent avec lui.
   Même découpage que les autres modules du projet (persistence, offline,
   backup).

   La modale de statistiques est écrite en couleurs fixes (fonds blancs,
   dégradés), sans variables de thème : ces styles suivent la même convention
   pour rester cohérents. Voir en fin de fichier ce que cela implique pour le
   mode haut contraste — et ce qui a été vérifié plutôt que supposé.
   ========================================================================= */

/* --------- Provenance du chiffre : mesure ou estimation --------- */
/* Discret mais toujours présent : le nombre ne doit jamais s'afficher seul,
   sinon rien ne distingue une mesure d'une multiplication.

   La mise en forme de base de `.stat-source` a rejoint
   css/imagilire-mini-statistics.css au Lot 5, tâche 2 : la carte « Histoires
   terminées » s'en sert aussi, et une règle partagée par deux cartes de la
   même modale n'a rien à faire dans la feuille d'un seul module. Ne reste ici
   que l'état `.measured`, qui n'a de sens que pour les séances. */

/* Mesuré : la nuance verte du reste de l'application (`--success-color`),
   posée en dur comme le reste de cette modale. */
.stat-card .stat-source.measured {
    font-weight: 700;
    opacity: 1;
    color: #1e8449;   /* même vert que « terminée » plus bas */
}

.stat-card .stat-source.measured::before {
    content: '\f058';                    /* fa-circle-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 5px;
}

/* --------- Liste des séances --------- */
/* Le titre, le chapeau et l'ossature de la liste (`.stats-list`,
   `.stats-list-item`) ont rejoint css/imagilire-mini-statistics.css au Lot 5,
   tâche 3 : la vue par histoire est bâtie sur exactement la même boîte et la
   même carte, et deux copies auraient divergé au premier ajustement
   d'espacement. Ne reste ici que ce qui est propre à une séance.
   La règle des trois minutes est écrite dans le chapeau du bloc (index.html),
   pas seulement dans le code : sans elle, un parent qui voit « 4 min » pour
   une demi-heure de tablette ouverte croit à un défaut. */
.reading-sessions {
    margin-top: 30px;
}

.session-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.session-title {
    font-weight: bold;
    color: #333;
    /* Un titre d'histoire personnalisée peut faire trois lignes : il cède la
       place à la durée, qui est la donnée de la ligne. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.session-duration {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;   /* les durées s'alignent en colonne */
    font-weight: bold;
    color: #667eea;
    font-size: 17px;
}

.session-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: #666;
}

.session-finished {
    color: #1e8449;
    font-weight: 600;
}

/* Séance close par une fermeture d'onglet : le temps de la dernière page peut
   manquer. Signalé, jamais masqué — une mesure incomplète annoncée reste
   utilisable, une mesure incomplète tue. */
.session-partial {
    color: #b9770e;
    font-weight: 600;
    cursor: help;
}

.session-detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e0e0e0;
    font-size: 12px;
    color: #555;
}

/* --------- Contraste élevé : ce qu'on a vérifié, et ce qu'on n'a pas fait ---
   Première version de cette feuille : la liste passait en blanc sur noir sous
   `body.high-contrast`. Vérification faite en pilotage navigateur, c'était un
   contresens — **la modale de statistiques ignore entièrement le mode haut
   contraste**. `.statistics-container` reste blanche, `.recent-activity` reste
   en #333 : `imagilire-mini-statistics.css` ne contient pas une seule règle
   `body.high-contrast`. Inverser ce seul bloc l'aurait rendu illisible, en
   blanc sur blanc — exactement le défaut H3b de la recette, celui du panneau
   de réglages.

   Cette feuille s'aligne donc sur ses voisines : sombre sur clair, avec des
   gris assez foncés pour rester lisibles (#555 et #666 sur blanc et sur
   #f8f9fa dépassent 5:1). Le vrai sujet — faire enfin réagir la modale de
   statistiques au mode haut contraste — dépasse cette tâche et rejoint le
   Lot 7 (accessibilité), au même titre que `.settings-group`.
   ------------------------------------------------------------------------- */

/* --------- Écrans étroits --------- */
/* La boîte de la liste est traitée avec l'ossature commune
   (`.stats-list`, css/imagilire-mini-statistics.css) : seul l'empilement du
   titre et de la durée est propre aux séances. */
@media (max-width: 600px) {
    .session-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* --------- Animations réduites --------- */
/* Rien n'anime cette liste, mais `.stat-card` (imagilire-mini-statistics.css)
   entre en fondu au-dessus d'elle. Le réglage système est respecté ici, en
   attendant la passe complète du Lot 7. */
@media (prefers-reduced-motion: reduce) {
    .stat-card {
        animation: none;
    }
}