/* =============================================================
   MNEMO — 04 — PHOTO TILE
   Polaroid Neon : cadre, halo, badges, ombres.
   ============================================================= */

/* ------ POLAROID (template Neon) --------------------------- */

.polaroid {
  flex: 0 0 auto;
  /* Modèle de défilement tranché (parti pris de la direction « Signal ») :
     un geste = une photo, identique en horizontal et en vertical. Les deux
     moitiés du mécanisme existaient mais jamais ensemble — la piste
     horizontale avait `scroll-snap-type` sans que l'élément ait
     `scroll-snap-align`, et la verticale l'inverse. Résultat : aucune des
     deux orientations n'accrochait réellement.

     Pas de `scroll-snap-stop: always` : il forçait l'arrêt à CHAQUE photo, ce
     qui empêchait de traverser plusieurs photos d'un geste — et bloquait net
     le défilement piloté par la jauge, qui saute souvent de plusieurs crans
     d'un coup. Le cran reste, la contrainte d'arrêt part. */
  scroll-snap-align: center;
  /* Hauteur 85 % du viewport carousel, largeur déduite via aspect-ratio polaroid classique */
  height: 85%;
  aspect-ratio: 0.82 / 1;
  /* Cap à 80vw plutôt que 85 : laisse de la marge pour le scaling Android.
     Le min() avec 420px sert pour les grands écrans desktop. */
  max-width: min(80vw, 420px);
  /* Structure verticale : image qui grandit + footer fixe (caption + meta) */
  display: flex;
  flex-direction: column;
  background: var(--carte);
  padding: 14px 14px 14px;
  position: relative;
  border-radius: calc(3px * var(--r-k));
  /* `--r` est l'inclinaison de l'éventail, posée par le carousel selon la
     distance au centre. La valeur de repli garde le travers du tirage papier
     quand le JS n'a pas encore mesuré (premier rendu, ou hors carousel). */
  transform: scale(var(--s, 1)) rotate(var(--r, 1.5deg));
  opacity: var(--o, 1);
  transform-origin: center bottom;
  will-change: transform, opacity;
  cursor: pointer;
  transition: filter 0.3s ease, box-shadow 0.4s ease;

  /* Tirage papier : ombre courte et basse. Le halo diffus de l'ancien thème
     néon lisait comme une salissure sur fond clair — remplacé par un filet
     d'encre qui porte la couleur du moment. */
  box-shadow:
    0 5px 12px rgba(var(--encre-rgb), 0.15),
    0 0 0 1px color-mix(in srgb, var(--accent, rgba(var(--encre-rgb), 0.3)) 30%, rgba(var(--encre-rgb), 0.12));
}

/* Plus de `rotate(0deg)` forcé ici : au centre `--r` vaut déjà ~0, donc la carte
   focalisée se redresse d'elle-même. L'écrire en dur annulait l'éventail. */
.polaroid-focused {
  box-shadow:
    0 10px 22px rgba(var(--ombre-rgb), 0.2),
    0 0 0 1.5px color-mix(in srgb, var(--accent, rgba(var(--ombre-rgb), 0.4)) 55%, rgba(var(--ombre-rgb), 0.16));
}

.polaroid-peripheral {
  filter: saturate(0.72) brightness(1.05) contrast(0.88);
}

/* Image du polaroid — prend tout l'espace vertical restant */
.polaroid-img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--carte);
  overflow: hidden;
  position: relative;
  border-radius: calc(1px * var(--r-k));
  box-shadow: inset 0 0 0 1px rgba(var(--ombre-rgb), 0.083);
}

/* Par défaut : cover (remplit tout le cadre, crop possible) — portrait et carré */
.polaroid-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}

/* Paysage : contain (affiche l'image entière, bandes noires top/bottom si besoin) */
.polaroid-landscape .polaroid-img img {
  object-fit: contain;
}

/* Badge d'heure + tag en overlay sur la photo */
.polaroid-time-badge {
  position: absolute;
  top: 10px; right: 10px;
  padding: 4px 10px;
  background: var(--accent, var(--tampon));
  color: var(--sur-grad);
  font-size: 10px;
  font-weight: 700;
  border-radius: calc(999px * var(--r-k));
  letter-spacing: 0.04em;
  box-shadow:
     0 1px 5px color-mix(in srgb, var(--accent, rgba(var(--ombre-rgb), 0.14)) 70%, transparent),
    0 2px 6px rgba(var(--ombre-rgb), 0.165);
  text-transform: uppercase;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bouton poubelle (coin haut gauche, apparaît uniquement sur le polaroid focus
   pour l'auteur ou les modérateurs) */
.polaroid-delete {
  position: absolute;
  top: 10px; left: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(var(--carte-rgb), 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--tampon);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s;
}
.polaroid-delete:hover {
  background: rgba(var(--tampon-rgb), 0.3);
  color: var(--text);
}
.polaroid-tag-name {
  opacity: 0.9;
  font-weight: 500;
}

/* ------ POLAROID VIDÉO -------------------------------------- */

/* Balise <video> qui se superpose à l'image poster pendant la lecture.
   Quand pas en lecture, on garde le poster visible (img dessous), donc
   on ne montre la balise vidéo qu'une fois isPlaying === true. */
.polaroid-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  background: var(--carte);
  z-index: 2;
  transition: opacity 0.2s;
}
.polaroid-video-el-playing {
  opacity: 1;
  pointer-events: auto;
}

/* Gros bouton play centré sur le poster (vidéos non en lecture) */
.polaroid-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(var(--carte-rgb), 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(var(--encre-rgb), 0.85);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-left: 4px; /* compenser asymétrie du triangle play */
  box-shadow: 0 6px 20px rgba(var(--encre-rgb), 0.275);
  transition: transform 0.15s, background 0.15s;
}
.polaroid-play:hover {
  background: rgba(var(--carte-rgb), 0.75);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Bouton toggle son en bas à droite du polaroid pendant la lecture */
.polaroid-mute {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 4;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(var(--carte-rgb), 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--encre-rgb), 0.18);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.polaroid-mute:hover {
  background: rgba(var(--carte-rgb), 0.85);
  transform: scale(1.08);
}

/* Petit liseré coloré sur le bord pour distinguer visuellement
   les polaroids vidéo (subtil pour ne pas casser le design). */
.polaroid-video .polaroid-img {
  box-shadow: inset 0 0 0 2px rgba(var(--ombre-rgb), 0.138);
}

/* Légende (style marker) */
.polaroid-caption {
  flex: 0 0 auto;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: var(--encre-2);
  text-align: center;
  margin-top: 12px;
  line-height: 1.15;
  letter-spacing: 0.5px;
  padding: 0 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* Préserve les sauts de ligne saisis par le mod dans une annonce */
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Méta en bas (avatar + pseudo + actions) */
.polaroid-meta {
  flex: 0 0 auto;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.polaroid-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: var(--sur-grad);
  font-weight: 900;
  display: grid; place-items: center;
  font-size: 10px;
  box-shadow:  0 1px 3px rgba(var(--ombre-rgb), 0.22);
  flex-shrink: 0;
  /* Pour permettre à l'image custom de remplir tout le cercle proprement */
  overflow: hidden;
  position: relative;
}
.polaroid-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.polaroid-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-mute);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Boutons like / commentaire intégrés au cadre blanc du polaroid */
.polaroid-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.polaroid-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  border-radius: calc(6px * var(--r-k));
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  font-family: 'Figtree', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}
.polaroid-btn:hover {
  background: rgba(var(--carte-rgb), 0.05);
}
.polaroid-btn.liked {
  color: var(--tampon);
}
.polaroid-btn.liked svg {
  fill: var(--tampon);
  filter: drop-shadow(0 0 4px rgba(var(--ombre-rgb), 0.275));
}
.polaroid-btn.heart-pop svg {
  animation: heartPop 0.4s ease;
}


/* ------ Actions (like/comment/delete — partagées) ---------- */

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: calc(10px * var(--r-k));
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}
.action-btn:hover { background: rgba(var(--encre-rgb), 0.063); color: var(--text); }

.action-btn.liked { color: var(--pink); }
.action-btn.liked svg { fill: var(--pink); filter: drop-shadow(0 0 6px var(--pink)); }

.action-btn.delete { margin-left: auto; color: var(--text-mute); }
.action-btn.delete:hover { color: var(--danger); background: rgba(var(--tampon-rgb), 0.1); }

@keyframes heartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.heart-pop svg { animation: heartPop 0.4s ease; }

.post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 14px;
}

.post-caption {
  padding: 4px 16px 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  /* Préserve les sauts de ligne saisis par l'utilisateur (textarea \n)
     et wrap normalement en bout de ligne. */
  white-space: pre-wrap;
  word-wrap: break-word;
}


/* ============================================================
   ANNOUNCEMENT POLAROID — variante visuelle pour les annonces officielles
   (Phase 4a)
   ============================================================ */

/* Polaroid en mode annonce : papier kraft/ivoire + glow doré au lieu du
   rose néon classique. Reste reconnaissable comme polaroid mais "officiel". */
.polaroid-announcement {
  /* On garde la rotation 1.5deg via la variable transform existante,
     mais on remplace le glow rose par un glow doré */
  background: var(--carte); /* léger jaune ivoire */
  box-shadow:
    0 18px 36px rgba(var(--encre-rgb), 0.3),
    0 0 28px rgba(var(--encre-rgb), 0.248),
    0 0 0 1.5px rgba(var(--encre-rgb), 0.3);
}
.polaroid-announcement.polaroid-focused {
  box-shadow:
    0 22px 44px rgba(var(--ombre-rgb), 0.3),
    0 0 40px rgba(var(--ombre-rgb), 0.3),
    0 0 0 2px rgba(var(--ombre-rgb), 0.3);
}

/* Badge OFFICIEL en haut à droite, par-dessus l'image */
.polaroid-official-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  padding: 5px 10px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--encre-2);
  background: linear-gradient(135deg, var(--jaune), var(--tampon));
  border-radius: calc(4px * var(--r-k));
  box-shadow:
    0 2px 8px rgba(var(--ombre-rgb), 0.193),
    0 0 0 1px rgba(var(--ombre-rgb), 0.22) inset;
}

/* Titre de l'annonce dans la polaroid : entre l'image et le caption */
.polaroid-announcement-title {
  font-family: 'Figtree', sans-serif;
  font-weight: 900;
  font-size: 15px;
  color: var(--text-mute);
  letter-spacing: -0.01em;
  line-height: 1.25;
  padding: 8px 4px 0;
  text-align: center;
  /* Préserve les sauts de ligne du titre (cas rare mais possible) */
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Sur les annonces, le caption peut faire plus de 2 lignes (vs 2 max sur
   les photos classiques pour préserver le format polaroid).
   On lève le line-clamp et on affiche tout le message. */
.polaroid-announcement .polaroid-caption {
  font-family: 'Figtree', sans-serif;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tampon);
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  /* Pas de troncature : on veut voir tout le message d'annonce.
     Override des -webkit-box / line-clamp de .polaroid-caption. */
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  max-height: none;
}

/* ============================================================
   ANNOUNCEMENT CARD — feed normal (Phase 4d.4)
   ============================================================ */

/* La carte est un mini-story 9:16.
   Comportement de taille aligné sur .polaroid : hauteur 85% du carousel,
   et la largeur est déduite via aspect-ratio. Ça garantit qu'elle ne dépasse
   jamais la hauteur disponible (et donc qu'elle ne se fait pas masquer par
   la timeline en bas du stage).
   On NE met PAS de width fixe, c'est l'aspect-ratio qui pilote tout. */
.ann-card {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: block;
  /* Même cran que .polaroid, et ici plutôt que sous .carousel-vertical où il
     était seul : en horizontal les cartes d'annonce n'avaient donc AUCUN point
     d'accroche. La piste les traversait sans s'arrêter — un sondage, un
     countdown ou un texte était impossible à cadrer, alors que les photos
     autour accrochaient normalement. Le trou se voyait surtout sur les
     sondages, les seules cartes où l'on s'arrête pour agir. */
  scroll-snap-align: center;
  height: 85%;
  aspect-ratio: 9 / 16;
  /* Cap pour ne pas qu'elle devienne énorme sur desktop ou écran ultra-large.
     Sur mobile (carousel ~80vh) une story 9:16 fera typiquement ~360px de large
     ce qui rentre dans 80vw — donc le cap ne déclenche qu'en desktop. */
  max-width: min(80vw, 360px);
  /* Le scaling et la couleur d'accent suivent la même logique que polaroid
     pour cohérence avec les transitions du carousel (peripheral/focused). */
  /* Même éventail que les polaroids : sans la rotation, une annonce se
     présentait bien droite au milieu d'une main de cartes inclinées. */
  transform: scale(var(--s, 1)) rotate(var(--r, 0deg));
  opacity: var(--o, 1);
  transform-origin: center bottom;
  will-change: transform, opacity;
  cursor: pointer;
  position: relative;
  text-align: left;
  border-radius: calc(16px * var(--r-k));
  overflow: hidden;
  border: 1px solid rgba(var(--jaune-rgb), 0.25);
  background: var(--carte);
  box-shadow:
    /* Tirage papier : ombre courte et basse. Le halo diffus de l'ancien
       thème néon lisait comme une salissure sur fond clair — remplacé par
       un filet d'encre qui porte la couleur du moment. */
    0 5px 12px rgba(var(--ombre-rgb), 0.15),
    0 0 0 1px color-mix(in srgb, var(--accent, rgba(var(--ombre-rgb), 0.3)) 30%, rgba(var(--ombre-rgb), 0.12));
  transition: filter 0.3s ease, box-shadow 0.4s ease, border-color 0.22s;
}

/* MODE VERTICAL : on garde l'aspect-ratio 9:16 (override la règle générique
   .carousel-vertical .polaroid qui force 0.82/1, sauf qu'on n'est pas un
   polaroid mais une ann-card, donc on s'auto-cible par sécurité).
   Largeur cap à 74% pour matcher la règle des polaroids voisins. */
.carousel-vertical .ann-card {
  height: auto;
  width: min(74%, 320px);
  max-width: none;
  aspect-ratio: 9 / 16;
  /* scroll-snap-align retiré d'ici : il est sur .ann-card, valable pour les
     deux orientations. Une seule source pour le cran. */
}

.ann-card-focused {
  border-color: rgba(var(--jaune-rgb), 0.5);
  box-shadow: 0 12px 48px rgba(var(--ombre-rgb), 0.3), 0 0 36px rgba(var(--ombre-rgb), 0.165);
}

.ann-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Dégradé bas pour la lisibilité de la meta */
.ann-card-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(var(--carte-rgb), 0.85), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Badge "ANNONCE OFFICIELLE" en haut à gauche */
.ann-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--encre-2);
  background: linear-gradient(135deg, var(--jaune), var(--tampon));
  border-radius: calc(999px * var(--r-k));
  box-shadow: 0 2px 8px rgba(var(--ombre-rgb), 0.22);
}

/* Variante sondage : badge rose pour signaler qu'on peut voter. */
.ann-card-badge-poll {
  color: var(--sur-accent);
  background: linear-gradient(135deg, var(--tampon), var(--tampon));
  box-shadow: 0 2px 8px rgba(var(--ombre-rgb), 0.22);
}

/* Bouton supprimer en haut à droite */
.ann-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 28px;
  height: 28px;
  border-radius: calc(8px * var(--r-k));
  background: rgba(var(--tampon-rgb), 0.12);
  border: 1px solid rgba(var(--tampon-rgb), 0.35);
  color: rgba(var(--tampon-rgb), 0.95);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ann-card-delete:hover {
  background: rgba(var(--tampon-rgb), 0.25);
  border-color: rgba(var(--tampon-rgb), 0.6);
}

/* Blocs positionnés en % par-dessus l'image. Pointer-events:none pour
   que le tap se propage au parent (ouverture du détail). */
.ann-card-block {
  position: absolute;
  z-index: 3;
  font-family: 'Figtree', sans-serif;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(var(--ombre-rgb), 0.3), 0 0 6px rgba(var(--ombre-rgb), 0.275);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 85%;
  pointer-events: none;
}

/* Meta en bas : date + likes + commentaires */
.ann-card-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
}

.ann-card-meta-date {
  font-size: 11px;
  color: rgba(var(--encre-rgb), 0.75);
  letter-spacing: 0.05em;
}

.ann-card-meta-actions {
  display: flex;
  gap: 6px;
}

.ann-card-meta-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(var(--carte-rgb), 0.5);
  border: 1px solid rgba(var(--encre-rgb), 0.12);
  border-radius: calc(999px * var(--r-k));
  color: rgba(var(--encre-rgb), 0.9);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ann-card-meta-btn:hover {
  background: rgba(var(--carte-rgb), 0.7);
  border-color: rgba(var(--encre-rgb), 0.25);
}
.ann-card-meta-btn-liked {
  color: var(--tampon);
  border-color: rgba(var(--tampon-rgb), 0.45);
}
.ann-card-meta-btn-pop {
  animation: ann-heart-pop 0.35s ease;
}
@keyframes ann-heart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Tampons sur la carte de feed : format réduit, la carte étant étroite. */
.ann-card-tampons { top: 8px; left: 8px; gap: 4px; }