/* ════════════════════════════════════════════════════════════
   MATURES — Styles extras (Stories, Rewind, etc.)
   À ajouter à la fin de style.css
   ════════════════════════════════════════════════════════════ */

/* Stories */
#stories-barre-wrap {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

#stories-barre {
  scrollbar-width: none;
}
#stories-barre::-webkit-scrollbar { display: none; }

.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  flex-shrink: 0;
}

.story-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-new {
  border: 2.5px solid var(--gold-d);
  padding: 2px;
  background: linear-gradient(45deg, #C9A96E, #FFD700);
  border: none;
  box-shadow: 0 0 0 2.5px var(--gold-d);
}

.story-seen {
  border: 2px solid var(--border);
}

.story-add {
  border: 2px dashed var(--border);
  background: var(--cream2);
}

.story-plus {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: var(--gold-d);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.story-initials {
  font-weight: 700;
  color: var(--gold-d);
  font-size: 1.2rem;
  font-family: 'Cormorant Garamond', serif;
}

.story-nom {
  font-size: 10px;
  color: var(--muted2);
  max-width: 56px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Story viewer */
#story-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
}

.story-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  max-width: 420px;
  max-height: 100vh;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

@media (max-width: 480px) {
  .story-viewer {
    border-radius: 0;
    max-width: 100%;
  }
}

.story-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 3px;
  padding: .6rem .8rem .4rem;
  z-index: 10;
}

.story-prog-item {
  flex: 1;
  height: 2.5px;
  background: rgba(255,255,255,.4);
  border-radius: 2px;
  overflow: hidden;
}

.story-prog-item.done .story-prog-fill {
  width: 100%;
  background: #fff;
}

.story-prog-fill {
  height: 100%;
  background: #fff;
  width: 0;
}

.story-prog-fill.animating {
  animation: storyProgress linear forwards;
}

@keyframes storyProgress {
  from { width: 0; }
  to   { width: 100%; }
}

.story-header {
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .8rem;
  z-index: 10;
}

.story-content {
  position: absolute;
  inset: 0;
}

.story-nav-left,
.story-nav-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  z-index: 9;
  cursor: pointer;
}

.story-nav-left  { left: 0; }
.story-nav-right { right: 0; }

/* Bouton Rewind */
.act-rewind {
  background: rgba(103,58,183,.12);
  color: #7e57c2;
  border: 1.5px solid rgba(103,58,183,.3);
}

/* Action bar — boutons uniformes */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem .5rem;
}

.act-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--card);
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}

.act-btn:active {
  /* !important nécessaire ici : style.css définit aussi .act-btn:active avec
     !important — sans le nôtre, sa règle gagnerait malgré le chargement plus
     tardif de ce fichier (une règle !important bat toujours une règle sans
     !important, peu importe l'ordre). Partout ailleurs dans ce bloc, extras.css
     l'emporte déjà naturellement (chargé après style.css, ou sélecteur plus
     spécifique) — donc aucun autre !important n'est nécessaire ici. */
  transform: scale(.92) !important;
}

.act-btn.act-like {
  background: rgba(201,169,110,.12);
  color: var(--gold-d);
  border-color: rgba(201,169,110,.4);
  width: 54px;
  height: 54px;
  font-size: 1.2rem;
}

.act-btn.act-nope {
  background: rgba(201,122,110,.1);
  color: var(--rose);
  border-color: rgba(201,122,110,.3);
}

.act-btn.act-super {
  background: rgba(255,193,7,.12);
  color: #f59e0b;
  border-color: rgba(255,193,7,.4);
}

.act-btn.act-diamond {
  background: rgba(33,150,243,.1);
  color: #1976d2;
  border-color: rgba(33,150,243,.3);
}

.act-btn.act-info {
  background: var(--cream2);
  color: var(--muted);
}

/* Effet événement actif sur nav */
@keyframes pulseEvent {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,110,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(201,169,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); }
}

#nav-evenements.event-actif i {
  color: var(--gold-d);
  animation: pulseEvent 2s infinite;
  border-radius: 50%;
}

#nav-evenements.event-actif span {
  color: var(--gold-d);
  font-weight: 600;
}

#nav-evenements.event-actif::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 8px;
  width: 7px;
  height: 7px;
  background: var(--gold-d);
  border-radius: 50%;
  animation: pulseEvent 2s infinite;
}

#nav-evenements {
  position: relative;
}

/* Badge événement pulsant */
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .7; }
}

/* Profil du jour dans stories */
.story-pdj {
  border: 2.5px solid var(--gold-d);
  box-shadow: 0 0 8px rgba(201,169,110,.5);
}

/* Profil du jour banner */
.profil-du-jour-banner {
  transition: opacity .2s;
}
.profil-du-jour-banner:hover {
  opacity: .9;
}

/* ── Panneau détail profil ────────────────────────────────── */
#profile-detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: #FAF8F4;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* !important conservé ici uniquement : c'est un toggle d'affichage
   (masquer/afficher le panneau) — mieux vaut une garantie explicite qu'il
   l'emporte toujours, plutôt qu'un panneau qui resterait visible par erreur
   si une règle [hidden] plus générique venait à être ajoutée ailleurs plus tard. */
#profile-detail[hidden] { display: none !important; }

#profile-detail .pd-photo {
  height: 360px;
  flex-shrink: 0;
  position: relative;
  background: #1a1410;
}

#profile-detail .pd-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 5rem;
}

#profile-detail .pd-actions {
  position: sticky;
  bottom: 0;
  width: 100%;
  background: linear-gradient(transparent, var(--cream) 30%);
  padding: .9rem 1.25rem 1.25rem;
  display: flex;
  gap: 10px;
  z-index: 10;
}

/* ── Respect de la préférence système "réduire les animations" ─────────────
   Cible uniquement les pulsations décoratives en boucle infinie (l'indicateur
   d'événement actif) — pas la barre de progression des stories, qui reste
   fonctionnelle (indique le temps restant) même pour les utilisateurs ayant
   demandé moins d'animations : un simple remplissage linéaire n'est pas le
   type de mouvement visé par cette préférence système. */
@media (prefers-reduced-motion: reduce) {
  #nav-evenements.event-actif i,
  #nav-evenements.event-actif::after {
    animation: none !important;
  }
  .profil-du-jour-banner {
    transition: none;
  }
}