/* ==========================================================================
   2M Digital — Page /realisations
   S'appuie sur style.css (cartes .work__visual, pastilles, chiffres, cartes d'article, encart d'appel).
   ========================================================================== */

.rea-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 64px; padding-bottom: 72px; }
.rea-hero .glow { top: -260px; right: max(-160px, (100% - 1440px) / 2); }

/* Liste des projets */
.rea-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.rea-empty { grid-column: 1 / -1; padding: 80px 0; color: var(--label-2); text-align: center; }
.rea { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: var(--r-card); }
.rea[hidden] { display: none; }
.rea__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; }
/* Prestations du projet : pastilles sous l'image (elles masquaient une partie des captures) */
.rea__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rea__tags .pill { font-size: 14px; }
.rea__title { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.rea__desc { font-size: 17px; line-height: 1.5; color: var(--label-2); }
.rea__result { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--label-2); }
.rea__result strong { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--yellow); }
.rea__result--big { flex-direction: column; align-items: flex-start; margin-top: -4px; }
.rea__result--big strong { font-size: clamp(48px, 5vw, 72px); }

/* Projet mis en avant : visuel à gauche, texte à droite */
.rea--focus { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
/* Le cadre garde le format des captures d'écran (16:9) : pas d'étirement sur la hauteur du texte, rien n'est coupé */
.rea--focus .rea__media { display: flex; flex-direction: column; gap: 16px; margin: 24px 0 24px 24px; min-width: 0; }
.rea--focus .work__visual { aspect-ratio: 16 / 9; min-height: 0; height: auto; border-radius: calc(var(--r-card) - 8px); }
.rea--focus .rea__body { justify-content: center; padding: 48px; }
.rea--focus .eyebrow { margin-top: 18px; }

/* Carrousel : les photos défilent dans le cadre */
.carousel { display: block; }
.carousel__track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
.carousel__slide { position: relative; flex: 0 0 100%; padding: 0; border: 0; background: none; cursor: zoom-in; scroll-snap-align: start; }
.carousel__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Captures d'écran et plaquettes : affichées en entier (le cadre 16:9 s'adapte, un léger liseré remplit le reste) */
.rea .work__visual > img { object-fit: contain; }
button.work__visual { width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.carousel__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 28, 30, .72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--label);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease;
}
.carousel__nav--prev { left: 14px; }
.carousel__nav--next { right: 14px; }
.carousel:hover .carousel__nav, .carousel:focus-within .carousel__nav { opacity: 1; }
.carousel__nav:hover { background: var(--surface-2); }
.work__count { pointer-events: none; }

/* Visionneuse plein écran */
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .94); color: var(--label); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(92vw, 1400px); }
.lightbox__figure img { max-height: 82vh; width: auto; border-radius: var(--r-md); }
.lightbox__figure figcaption { font-size: 15px; color: var(--label-2); text-align: center; }
.lightbox__close, .lightbox__nav {
  position: absolute;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--label);
  cursor: pointer;
}
.lightbox__close { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--surface-3); }

@media (max-width: 1024px) {
  .rea-list { grid-template-columns: minmax(0, 1fr); }
  .rea--focus { grid-template-columns: minmax(0, 1fr); }
  .rea--focus .rea__media { margin: 0; gap: 0; }
  .rea--focus .work__visual { min-height: 0; aspect-ratio: 16 / 9; border-radius: 0; }
  .rea--focus .rea__media .rea__tags { padding: 20px 28px 0; }
  .rea--focus .rea__body { padding: 16px 28px 28px; }
  .carousel__nav { opacity: 1; }
}

@media (max-width: 640px) {
  .rea-hero { padding-top: 40px; padding-bottom: 48px; }
  .rea__body { padding: 22px; }
  .lightbox__nav { top: auto; bottom: calc(20px + env(safe-area-inset-bottom)); }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
}