/* ==========================================================================
   Page Allociné « Soirée ciné à la maison » – compléments au gabarit project.css
   ========================================================================== */

/* ---------- Hero ---------- */
@media (min-width: 768px) {
  body[data-project="allocine"] .case-hero { background: #fff; }
}
@media (min-width: 1101px) {
  body[data-project="allocine"] .case-hero__grid { row-gap: 25px; }
}
.case-hero__title em { font-weight: 900; }
.case-hero__title .star { font-style: italic; font-weight: 400; }
.case-note { font-family: var(--font-sans); font-style: italic; font-size: 15px; line-height: 25px; }
@media (max-width: 767px) {
  .case-hero__title em,
  .case-hero__title .star { font-weight: 800; }
}

/* Décors du hero (desktop puis mobile) */
.ad-poly4 { left: 102px; top: 257px; width: 1206px; height: 917px; }
.ad-poly4 > div { width: 1206px; height: 917px; transform: none; }
.ad-poly4 img { left: -5.74%; top: -16.36%; width: 111.48%; height: 107.72%; }

.ad-e18 { left: 15px; top: 64px; width: 1726px; height: 1196px; display: block; }
.ad-e18 img { left: -11.59%; top: -16.72%; width: 123.18%; height: 133.44%; }
.ad-e22 { display: none; }

.ad-p2 { left: 15px; top: -32px; width: 1206px; height: 1206px; }
.ad-p2 > div { width: 1206px; height: 1206px; transform: none; }
.ad-p2 img { left: -5.74%; top: -12.44%; width: 111.48%; height: 99.88%; }

.ad-e21 { left: calc(50% + .5px); top: 0; width: 1337px; height: 1196px; transform: translateX(-50%); }
.ad-e21 > div { width: 1337px; height: 1196px; }
.ad-e21 img { left: -14.96%; top: -16.72%; width: 129.92%; height: 133.44%; }

.ad-p5 { left: 549px; top: -576px; width: 1206px; height: 1206px; }
.ad-p5 > div { width: 1206px; height: 1206px; transform: none; }
.ad-p5 img { left: -5.74%; top: -12.44%; width: 111.48%; height: 99.88%; }

/* ---------- Contexte : image à gauche, texte à droite ---------- */
@media (min-width: 1101px) {
  .case-context--allocine { flex-direction: row; align-items: center; }
}

/* ---------- Démarche : images grand format ---------- */
.case-approach--allocine { gap: 64px; }
.case-approach--allocine .case-approach__intro { display: flex; flex-direction: column; gap: 20px; }
.case-approach--allocine .case-approach__intro .case-p { font-size: 16px; line-height: 1.6; }
.case-approach--allocine .case-sub { gap: 32px; }

.alc-img { display: block; width: 100%; height: auto; }
.alc-img--benchmark { aspect-ratio: 1280 / 776.16; object-fit: cover; }
.alc-img--sitemap { aspect-ratio: 1280 / 303; object-fit: cover; }
.alc-row { display: flex; align-items: flex-start; width: 100%; }
.alc-row img { display: block; height: auto; }
.alc-row--sitemap img:first-child { width: 15.16%; }
.alc-row--sitemap img:last-child { width: 81.48%; }
.alc-row--persona { align-items: center; }
.alc-row--persona img:first-child { flex: none; width: 22.81%; }
.alc-row--persona img:last-child { flex: 1 1 0; min-width: 0; aspect-ratio: 3248 / 2934; object-fit: cover; }

.alc-crop { position: relative; width: 100%; aspect-ratio: 1270 / 478; overflow: hidden; }
.alc-crop img { position: absolute; left: 0; top: -181.12%; width: 100.79%; height: 280.95%; max-width: none; }

.alc-img--ds1 { aspect-ratio: 4096 / 2345; object-fit: cover; }
.alc-card { width: 100%; padding: 32px; background: var(--surface); border-radius: 32px; }
.alc-img--ds2 { aspect-ratio: 4096 / 3185; object-fit: cover; }
.alc-img--dsm { aspect-ratio: 2560 / 3550; object-fit: cover; }
.alc-img.only-mobile { display: none; }
.alc-img--proto { aspect-ratio: 4096 / 2585; object-fit: cover; }

/* ---------- Démarche : taches floues (persona, wireframes) ---------- */
.ad-app-e { left: 226px; top: 1674px; width: 1974.598px; height: 1951.786px; }
.ad-app-e > div { width: 1500.613px; height: 1283.579px; transform: rotate(-139.29deg); }
.ad-app-e img { left: -13.33%; top: -14.83%; width: 126.66%; height: 130.41%; }
.ad-app-p { left: -534px; top: 2585px; width: 1292.128px; height: 1110.455px; }
.ad-app-p > div { width: 1007.436px; height: 747.541px; transform: rotate(-151.24deg) skewX(-4.41deg); }
.ad-app-p img { left: -8.19%; top: -20.07%; width: 116.38%; height: 115.14%; }

/* ---------- Mosaïque : écrans inclinés à 45°, fond uni ---------- */
.case-gallery--mosaic {
  --rot: 45deg;
  --gh: 1200px;
  background: #dfe3f0;
}
.mosaic__item--1  { left: 597.72px;  top: 1100.01px; }
.mosaic__item--2  { left: 565px;     top: -447px; }
.mosaic__item--3  { left: 454.88px;  top: 715.34px; }
.mosaic__item--4  { left: 980.26px;  top: 189.96px; }
.mosaic__item--5  { left: -90.65px;  top: 733.65px; }
.mosaic__item--6  { left: -612px;    top: 200.76px; }
.mosaic__item--7  { left: 434.73px;  top: 208.27px; }
.mosaic__item--8  { left: -86.62px;  top: -324.62px; }
.mosaic__item--9  { left: 960.11px;  top: -317.11px; }
.mosaic__item--10 { left: 438.76px;  top: -850px; }
.mosaic__item--11 { left: -477.79px; top: 593.01px; }
.mosaic__item--12 { left: 47.59px;   top: 67.63px; }
.mosaic__item--13 { left: 1114px;    top: 585px; }
.mosaic__item--7 .mosaic__screen,
.mosaic__item--8 .mosaic__screen { filter: drop-shadow(150px 100px 125px rgba(9, 20, 50, .15)); }
.mosaic__item--13 .mosaic__screen { filter: drop-shadow(150px 50px 125px rgba(9, 20, 50, .15)); }

/* ---------- Décisions UX clés : cartes vitrées + capture de l'application ---------- */
.ux-card--glass {
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ux-stack { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.ux-stack .case-ux__row { width: 100%; }
.ux-phone { display: block; width: 422px; max-width: 100%; aspect-ratio: 422 / 868; height: auto; object-fit: cover; border-radius: 73px; }
.cd-ux-e { left: -179px; top: 0; width: 1885.482px; height: 1593.14px; }
.cd-ux-e > div { width: 1615px; height: 993px; transform: rotate(-25.59deg); }
.cd-ux-e img { left: -12.38%; top: -19.39%; width: 124.77%; height: 139.53%; }
.cd-ux-p { left: 300.49px; top: 25.41px; width: 1532.53px; height: 1532.53px; }
.cd-ux-p > div { width: 1206px; height: 1206px; transform: rotate(71.03deg); opacity: .35; }
.cd-ux-p img { left: -5.74%; top: -12.44%; width: 111.48%; height: 99.88%; }

/* ---------- Autres projets : cartes pleine largeur ---------- */
body[data-project="allocine"] .others { max-width: none; }

/* ---------- Mobile (frame Figma 393 px) ---------- */
@media (max-width: 767px) {
  /* Hero : décors */
  .ad-poly4,
  .ad-e18 { display: none; }
  .ad-e22 { display: block; left: 15px; top: 205px; width: 329px; height: 1055px; }
  .ad-e22 img { left: -60.79%; top: -18.96%; width: 221.58%; height: 137.92%; }
  .ad-e21 { left: calc(50% + 29.5px); top: 138px; width: 544px; height: 629px; }
  .ad-e21 > div { width: 544px; height: 629px; }
  .ad-e21 img.u-mobile { left: -36.76%; top: -31.8%; width: 173.52%; height: 163.6%; }
  .ad-p5 { left: -30px; top: 138px; width: 648px; height: 581px; }
  .ad-p5 > div { width: 648px; height: 581px; }
  .ad-p5 img.u-mobile { left: -16.45%; top: -25.82%; width: 132.9%; height: 126.64%; }

  /* Démarche */
  .alc-img.only-mobile { display: block; }
  .alc-img.only-desktop,
  .alc-card.only-desktop { display: none; }
  .case-approach--allocine { gap: 20px; }
  .case-approach--allocine .case-sub { gap: 20px; }

  /* Galerie : image unique */
  .case-gallery--mosaic .case-gallery__mobile { aspect-ratio: 393 / 428; }

  /* Décisions UX : pas de décor, capture pleine largeur */
  .case-ux--allocine { padding-bottom: 48px; }
  .case-ux--allocine > .deco { display: none; }
  .ux-stack { gap: 48px; }
  .ux-phone { width: 100%; aspect-ratio: 353 / 726; }
}