/* --------- Sablier parental --------- */
#sessionTimer{
    position: fixed;          /* position fixe par rapport à la fenêtre */
    top: 12px;
    right: 12px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--page-color);
    box-shadow: 0 0 6px var(--shadow-color);
    overflow: hidden;
    pointer-events: none;
    opacity: .35;
    transition: opacity .3s;
    z-index: 950;
  }
  
  body.high-contrast #sessionTimer{ opacity:.6; }
  
  #sessionTimer i{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:18px;
    color:#fff;
    z-index:2;
  }
  
  #sessionTimer .timer-fill{
    position:absolute;
    bottom:0; left:0;
    width:100%;
    height:0%;
    background:#2ecc71;          /* vert départ */
    transition:height .6s linear, background-color .6s linear;
  }
  
  @keyframes flash{ 50%{opacity:.2;} }

/* --------- Fin de séance --------- */
/* `body.session-terminee` est posée par imagilire-mini-session-timer.js quand
   le sablier arrive au bout. Les deux cibles, comme pour `session-unlimited`
   plus bas : #sessionTimer porte l'état, #headerTimer en est la copie visible
   dans le bandeau. Une seule classe évite au bandeau d'avoir à recopier quoi
   que ce soit. */
body.session-terminee #sessionTimer .timer-fill,
body.session-terminee #headerTimer .timer-fill {
    animation: flash 1s step-end 6;
}

/* --------- Mouvement réduit --------- */
/* Le clignotement disait « la séance est finie ». Le filet global de
   css/styles.css (Lot 7, tâche 5) le réduit à rien du tout — et retirerait donc
   au parent la seule indication qu'il attendait. Ici, « moins de mouvement » ne
   peut pas vouloir dire « moins d'information » : le sablier prend à la place un
   état **fixe** et franc, pleine opacité et anneau rouge, qui se distingue sans
   ambiguïté du sablier en cours. Les deux propriétés choisies sont hors de
   portée du filet global, qui ne touche qu'aux durées. */
@media (prefers-reduced-motion: reduce) {
    body.session-terminee #sessionTimer,
    body.session-terminee #headerTimer {
        opacity: 1;
        box-shadow: 0 0 0 2px #e74c3c;
    }
}

/* Durée « Illimité » : aucun compte à rebours à montrer, on retire le sablier.
   `body.session-unlimited` est posée par imagilire-mini-session-timer.js.
   Les deux cibles sont nécessaires : #sessionTimer porte l'état (et un
   `style.display` en ligne, d'où le `!important`), #headerTimer en est la
   copie visible dans le bandeau (imagilire-mini-header.js). */
body.session-unlimited #sessionTimer,
body.session-unlimited #headerTimer {
  display: none !important;
}

/* Masquer le minuteur lorsque le livre est ouvert.
   Note : #sessionTimer précède #bookContainer dans index.html, le sélecteur
   frère `~` ne peut donc pas s'appliquer — c'est updateTimerVisibility()
   (imagilire-mini-session-timer.js), branchée sur un MutationObserver, qui
   assure réellement ce masquage. */