/* ==========================================================================
   Studio by Ju — page « Actu » (blog, photos façon Polaroïd)
   ========================================================================== */

/* Sommaire par année */
.actu-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.actu-sommaire .puce { text-decoration: none; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; padding: 8px 18px; }
.actu-sommaire .puce:hover { background: var(--texte); color: var(--bg); }

/* Le fil : une ligne dorée qui relie les articles */
.actu-fil .wrap { position: relative; }
.actu {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px clamp(28px, 5vw, 80px);
  align-items: start;
  padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 80px) clamp(34px, 4vw, 56px);
  scroll-margin-top: 90px;
}
.actu::before { /* ligne verticale */
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, #c9a25a 8%, #c9a25a 92%, transparent);
  opacity: .55;
}
.actu__repere { position: absolute; left: 0; top: calc(clamp(40px, 6vw, 80px) + 10px); }
.actu__repere span { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid #c9a25a; box-shadow: 0 0 0 5px var(--bg); }
.actu:first-child .actu__repere span { background: #c9a25a; }

.actu__gauche { grid-column: 1; position: sticky; top: 110px; }
.actu__tete { margin: 0; }
.actu__date { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #b04a5f; }
.actu__titre { margin: 0; line-height: 1.05; }
.actu__emoji { font-style: normal; font-size: .7em; vertical-align: .12em; }
.actu__texte p { margin: 0 0 14px; max-width: 46ch; font-size: clamp(1rem, .96rem + .2vw, 1.12rem); line-height: 1.6; color: var(--texte); }
.actu__encadre { display: inline-block; padding: 12px 16px; border-radius: 14px; background: #fffaf3; border: 1px solid var(--trait); font-size: .95rem !important; }
.actu__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }

.actu__tete { margin-bottom: 18px; }
.actu__polaroids, .actu__avant-apres { grid-column: 2; grid-row: 1; }

/* --------------------------------------------------------------- Polaroïds */
.actu__polaroids { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(14px, 2vw, 26px) clamp(10px, 1.6vw, 20px); padding: 10px 0; }
.polaroid {
  --larg: clamp(150px, 19vw, 235px);
  position: relative; margin: 0; width: var(--larg);
  background: #fffdf9; padding: 10px 10px 0;
  box-shadow: 0 1px 2px rgba(34,18,12,.12), 0 18px 34px -16px rgba(34,18,12,.42);
  rotate: var(--r, 0deg);
  transition: rotate .6s var(--ease), scale .6s var(--ease), box-shadow .6s var(--ease), opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.polaroid--paysage { --larg: clamp(220px, 29vw, 360px); }
.actu__polaroids--1 .polaroid { --larg: clamp(240px, 34vw, 420px); }
.polaroid::before { /* petit morceau de scotch */
  content: ""; position: absolute; top: -11px; left: 50%; width: 76px; height: 22px; translate: -50% 0; rotate: calc(var(--r, 0deg) * -1.6);
  background: rgba(239, 220, 200, .78); box-shadow: 0 1px 2px rgba(34,18,12,.08);
}
.polaroid:hover { rotate: 0deg; scale: 1.04; z-index: 2; box-shadow: 0 2px 4px rgba(34,18,12,.12), 0 30px 50px -20px rgba(34,18,12,.5); }
.polaroid__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--creme-2); }
.polaroid--paysage .polaroid__photo { aspect-ratio: 4 / 3; }
.polaroid__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.polaroid__legende { min-height: 54px; display: flex; align-items: center; justify-content: center; padding: 8px 6px 10px; font-family: var(--f-main); font-size: 1.12rem; line-height: 1.1; color: var(--choco-900); text-align: center; }

/* Avant / après */
.actu__avant-apres { display: grid; gap: 18px; }
.actu__groupe { position: relative; }
.actu__etiquette { margin: 0 0 4px; font-family: var(--f-display); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); color: #b04a5f; }
.actu__groupe--avant .polaroid { filter: grayscale(.25); }

.actu-fin { margin: 30px 0 0 clamp(34px, 4vw, 56px); color: var(--texte-doux); max-width: 52ch; }

/* --------------------------------------------------------------- Mobile */
@media (max-width: 860px) {
  .actu { grid-template-columns: 1fr; }
  .actu__gauche { position: static; }
  .actu__polaroids, .actu__avant-apres { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .actu__polaroids { gap: 18px 12px; }
  .polaroid { --larg: calc(50% - 8px); max-width: 240px; padding: 7px 7px 0; }
  .polaroid--paysage { --larg: 94%; max-width: 420px; }
  .actu__polaroids--1 .polaroid { --larg: 90%; max-width: 420px; }
  .polaroid__legende { min-height: 42px; font-size: .98rem; }
  .polaroid::before { width: 52px; height: 17px; top: -8px; }
}
@media (max-width: 420px) {
  .actu { padding-left: 26px; }
  .actu__repere span { width: 14px; height: 14px; }
  .actu-fin { margin-left: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .polaroid, .polaroid:hover { transition: none; scale: 1; }
}