/* ==========================================================================
   Pages projets (études de cas) – styles spécifiques
   Chargé après css/style.css. Gabarit commun à toutes les pages dans /projets
   ========================================================================== */

/* ---------- Briques communes ---------- */
.case-h { font-family: var(--font-serif); font-weight: 400; font-size: 44px; line-height: normal; }
.case-h em { font-weight: 900; }
.case-h--bold { font-weight: 700; }
.case-p { font-size: 18px; line-height: 1.5; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 1.4; }
.breadcrumb__link { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb__link:hover { color: var(--accent); }
.breadcrumb__sep { opacity: .6; }
.breadcrumb__current { font-weight: 600; }
.case-eyebrow { font-size: 16px; text-transform: uppercase; line-height: normal; }

.case-section { position: relative; }
.case-section > *:not(.deco) { position: relative; z-index: 1; }
.case-section > .deco { top: 0; bottom: 0; height: auto; }

.tags { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tags--tight { gap: 8px 0; }
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--surface);
  border-radius: 100px;
  color: #303030;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
}
.tag--sm { font-size: 15px; }
.tag--fictive { background: #fecc00; border: 1px solid #000; color: #0b0b0b; font-size: 15px; font-weight: 500; }

/* ---------- Décors (positions propres à ce gabarit) ---------- */
/* Hero */
.cd-hero-e { left: 15px; top: 64px; width: 1726px; height: 1196px; display: block; }
.cd-hero-e img { left: -11.59%; top: -16.72%; width: 123.18%; height: 133.44%; }
.cd-hero-p { left: 269px; top: -292px; width: 1635.02px; height: 1635.02px; }
.cd-hero-p > div { width: 1206px; height: 1206px; transform: rotate(28.47deg); opacity: .35; }
.cd-hero-p img { left: -5.74%; top: -12.44%; width: 111.48%; height: 99.88%; }

/* Problème / objectif */
.cd-prob-e { left: -120.68px; top: -350.21px; width: 786.487px; height: 796.454px; }
.cd-prob-e > div { width: 693.371px; height: 426.327px; transform: rotate(-46.51deg); }
.cd-prob-e img { left: -28.84%; top: -46.17%; width: 157.68%; height: 193.07%; }
.cd-prob-p { left: 987px; top: -18px; width: 703.412px; height: 703.412px; }
.cd-prob-p > div { width: 517.775px; height: 517.775px; transform: rotate(28.87deg); opacity: .35; }
.cd-prob-p img { left: -22.27%; top: -28.97%; width: 144.54%; height: 132.94%; }

/* Autres projets */
.cd-oth-e { left: -301px; top: 112px; width: 1885.482px; height: 1593.14px; }
.cd-oth-e > div { width: 1615px; height: 993px; transform: rotate(-25.59deg); }
.cd-oth-e img { left: -12.38%; top: -19.39%; width: 124.77%; height: 139.53%; }
.cd-oth-p { left: 178.49px; top: 137.41px; width: 1532.53px; height: 1532.53px; }
.cd-oth-p > div { width: 1206px; height: 1206px; transform: rotate(71.03deg); opacity: .35; }
.cd-oth-p img { left: -5.74%; top: -12.44%; width: 111.48%; height: 99.88%; }

/* Planètes décoratives (hero Ennov / Allociné) */
.cd-planet { position: absolute; }
.cd-planet img { position: absolute; max-width: none; }
.cd-planet--eclipse { left: 344px; top: 205px; width: 820px; height: 820px; }
.cd-planet--eclipse img { left: -24.39%; top: -24.39%; width: 148.78%; height: 148.78%; }
.cd-planet--big { left: 869px; top: 265px; width: 404px; height: 404px; }
.cd-planet--big img { left: -24.75%; top: -24.75%; width: 149.5%; height: 149.5%; }
.cd-planet--small { left: 228px; top: 719px; width: 232px; height: 232px; }
.cd-planet--small img { left: -34.48%; top: -34.48%; width: 168.96%; height: 168.96%; }

/* ---------- Hero ---------- */
.case-hero { padding: 100px var(--gutter); }
.case-hero__grid {
  --k: 1;
  --ov: -55px;
  display: grid;
  grid-template-columns: 498px 784px;
  grid-template-areas: "head phones" "meta phones";
  justify-content: space-between;
  align-content: start;
  row-gap: 60px;
  align-items: start;
}
.case-hero__head { grid-area: head; display: flex; flex-direction: column; gap: 20px; }
.case-meta { grid-area: meta; display: flex; flex-direction: column; gap: 24px; }
.phones { grid-area: phones; }

.case-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: normal;
}
.case-hero__title em { font-weight: 800; }

.case-meta__group { display: flex; flex-direction: column; gap: 16px; }
.case-meta__group--tight { gap: 12px; }
.case-meta__label { font-size: 14px; text-transform: uppercase; line-height: normal; }

/* Trois écrans qui se chevauchent */
.phones { display: flex; align-items: flex-start; }
.phones__item { display: flex; align-items: center; justify-content: center; flex: none; }
.phones__item--left { width: calc(337.777px * var(--k)); height: calc(579.77px * var(--k)); margin-right: var(--ov); }
.phones__item--center { width: calc(247px * var(--k)); height: calc(542.783px * var(--k)); margin-right: var(--ov); }
.phones__item--right { width: calc(337.636px * var(--k)); height: calc(579.724px * var(--k)); }
.phones__rot { flex: none; }
.phones__item--left .phones__rot { transform: rotate(-9.37deg); }
.phones__item--right .phones__rot { transform: rotate(9.35deg); }

.phone {
  position: relative;
  width: calc(252.252px * var(--k));
  height: calc(545.986px * var(--k));
  border-radius: 16px;
  overflow: hidden;
  filter: drop-shadow(150px 50px 125px rgba(9, 20, 50, .15));
}
.phones__item--center .phone {
  width: calc(247px * var(--k));
  height: calc(542.783px * var(--k));
  filter: drop-shadow(25px 15px 125px rgba(9, 20, 50, .1));
}
.phones__item--right .phone { filter: drop-shadow(150px 50px 125px rgba(9, 20, 50, .21)); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Variantes d'affichage selon la largeur */
.only-mobile { display: none; }

/* ---------- Hero « b » : deux colonnes égales, écrans inclinés à -8,63° / 8,1° (≥ 768px) ---------- */
@media (min-width: 1101px) {
  .case-hero__grid--b { grid-template-columns: 1fr 1fr; --ov: -62px; }
}
@media (min-width: 768px) {
  .case-hero__grid--b .phones__item--left { width: calc(298.11px * var(--k)); height: calc(522.142px * var(--k)); }
  .case-hero__grid--b .phones__item--center { width: calc(224px * var(--k)); height: calc(492.241px * var(--k)); }
  .case-hero__grid--b .phones__item--right { width: calc(295.425px * var(--k)); height: calc(520.954px * var(--k)); }
  .case-hero__grid--b .phones__item--left .phones__rot { transform: rotate(-8.63deg); }
  .case-hero__grid--b .phones__item--right .phones__rot { transform: rotate(8.1deg); }
  .case-hero__grid--b .phones__item--left .phone {
    width: calc(226.583px * var(--k));
    height: calc(493.73px * var(--k));
    filter: drop-shadow(25px 15px 125px rgba(9, 20, 50, .1));
  }
  .case-hero__grid--b .phones__item--center .phone { width: calc(224px * var(--k)); height: calc(492.241px * var(--k)); }
  .case-hero__grid--b .phones__item--right .phone { width: calc(228.11px * var(--k)); height: calc(493.73px * var(--k)); }
}

/* ---------- Contexte ---------- */
.case-context {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 100px;
  padding: 80px var(--gutter);
}
.case-context__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.case-context__media {
  flex: none;
  width: 612px;
  aspect-ratio: 612 / 375;
  border-radius: 24px;
  overflow: hidden;
  background: #d5d5ff;
}
.case-context__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Problème / objectif ---------- */
.case-pb { display: flex; gap: 80px; padding: 80px var(--gutter); }
.case-pb__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Démarche ---------- */
.case-approach { display: flex; flex-direction: column; gap: 20px; padding: 80px var(--gutter); }
.case-approach__steps { display: flex; flex-direction: column; gap: 32px; }
.case-sub--text,
.case-sub:has(> .case-ux__row--pad) { gap: 20px; }
.case-ux__row--pad { gap: 20px; padding: 20px 0; }

/* ---------- Galerie d'écrans ---------- */
.case-gallery {
  --gs: 1;
  position: relative;
  height: calc(1439px * var(--gs));
  overflow: hidden;
  background-color: #dfe3f0;
  background-image: conic-gradient(
    from 213deg at 86% 65%,
    rgb(255, 245, 197) 0%,
    rgb(220, 215, 225) 10.817%,
    rgb(184, 185, 254) 21.635%,
    rgb(141, 122, 231) 26.474%,
    rgb(120, 91, 219) 28.893%,
    rgb(98, 59, 208) 31.313%,
    rgb(122, 93, 217) 39.23%,
    rgb(146, 127, 227) 47.147%,
    rgb(170, 161, 236) 55.064%,
    rgb(194, 195, 245) 62.981%,
    rgb(255, 245, 197) 100%
  );
}
.case-gallery > .deco { inset: 0; height: auto; }
.case-gallery__mobile { display: none; }

.case-gallery__canvas {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: 1439px;
  transform: translateX(-50%) scale(var(--gs));
  transform-origin: top center;
}
.shot {
  position: absolute;
  width: 303.23px;
  height: 656.045px;
  border-radius: 38px;
  overflow: hidden;
  filter: drop-shadow(25px 15px 125px rgba(9, 20, 50, .15));
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot--1 { left: 387.81px; top: 146px; filter: drop-shadow(100px 100px 125px rgba(9, 20, 50, .15)); }
.shot--2 { left: 36.58px; top: 730.04px; height: 776.193px; filter: drop-shadow(100px 100px 125px rgba(9, 20, 50, .15)); }
.shot--3 { left: 36.58px; top: 26px; }
.shot--4 { left: 739.04px; top: -98px; filter: drop-shadow(150px 50px 125px rgba(9, 20, 50, .15)); }
.shot--5 { left: 387.49px; top: 850.04px; }
.shot--6 { left: 387px; top: -558px; }
.shot--7 { left: 738.4px; top: 606.04px; }
.shot--8 { left: 1090.27px; top: 26px; width: 304px; height: 696px; }
.shot--9 { left: 1089.3px; top: 770px; }

/* ---------- Galerie en mosaïque (écrans inclinés) – tailles et fond définis par page ---------- */
.case-gallery--mosaic {
  --mw: 711.349px;
  --mh: 711.349px;
  --rot: 45deg;
  --gh: 1568px;
  height: calc(var(--gh) * var(--gs));
}
.case-gallery--mosaic .case-gallery__canvas { height: var(--gh); }
.mosaic__item {
  position: absolute;
  width: var(--mw);
  height: var(--mh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mosaic__rot { flex: none; transform: rotate(var(--rot)); }
.mosaic__screen {
  width: 318px;
  height: 688px;
  border-radius: 38px;
  overflow: hidden;
  filter: drop-shadow(25px 15px 125px rgba(9, 20, 50, .15));
}
.mosaic__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Sous-sections de la démarche (titre + média) ---------- */
.case-sub { display: flex; flex-direction: column; gap: 32px; }
.case-sub__title { font-family: var(--font-sans); font-weight: 400; font-size: 24px; line-height: normal; }

/* ---------- Décisions UX clés ---------- */
.case-ux { display: flex; flex-direction: column; gap: 60px; padding: 80px var(--gutter); }
.case-ux__row { display: flex; gap: 24px; align-items: stretch; }
.ux-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid #000;
  border-radius: 16px;
}
.ux-card__head { display: flex; flex-direction: column; gap: 12px; }
.ux-card__num {
  font-family: var(--font-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 48px;
  line-height: normal;
  color: var(--surface-inverse);
  text-box: trim-both cap alphabetic;
}
.ux-card__title { font-weight: 400; font-size: 24px; line-height: normal; text-transform: uppercase; }
.ux-card__num + .ux-card__title { margin-top: -4px; }
.ux-card__text { font-size: 15px; line-height: 22px; }
.ux-card__text p { margin: 0; }
.ux-card__text p + p { margin-top: 8px; }

/* Listes à puces et accroche (problème / objectif) */
.case-p--lead { font-weight: 600; font-size: 20px; }
.case-rich-list { font-size: 18px; line-height: 1.5; }
.case-rich-list p + p { margin-top: 8px; }
.case-rich-list ul { margin: 8px 0; padding-left: 27px; list-style: disc; }
.case-rich-list ul:last-child { margin-bottom: 0; }
.case-rich-list li + li { margin-top: 4px; }

/* Métriques en grille (2 ou 3 côte à côte) */
.metrics--grid .metric { min-height: 140px; }

/* ---------- Emplacement vidéo (vidéos ajoutées dans une étape ultérieure) ---------- */
.video-slot {
  width: 314px;
  max-width: 100%;
  aspect-ratio: 314 / 640;
  border-radius: 54px;
  background: linear-gradient(180deg, rgba(228, 248, 254, .6) 0%, rgba(180, 184, 242, .6) 100%);
}

/* ---------- Résultats ---------- */
.case-results { display: flex; flex-direction: column; gap: 60px; padding: 80px var(--gutter); }
.case-results__text { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Autres projets ---------- */
.case-others { display: flex; flex-direction: column; gap: 60px; padding: 80px var(--gutter); }
.others { display: flex; align-items: stretch; gap: 48px; width: 100%; max-width: 1224px; }
.other-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 32px;
}
.other-card--mobile-only { display: none; }
.other-card__media { aspect-ratio: 588 / 384; border-radius: 32px; overflow: hidden; }
.other-card__media img { width: 100%; height: 100%; object-fit: cover; }
.other-card__body { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px 40px 48px; }
.other-card__text { display: flex; flex-direction: column; gap: 24px; }
.other-card__title { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: normal; }
.other-card__title em { font-weight: 800; }
.other-card__desc { font-size: 18px; line-height: 1.5; }
.other-card__link {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 24px;
  line-height: 1.5;
}
.other-card__link img { transition: transform .25s; }
.other-card__link:hover img { transform: translateX(6px); }

.other-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.other-card__name { font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: normal; }
.other-card__subtitle { font-family: var(--font-serif); font-weight: 900; font-style: italic; font-size: 36px; line-height: 44px; }
.other-card__text:has(.other-card__heading) { gap: 16px; }
.other-card__heading + .other-card__subtitle { margin-top: -16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .case-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "phones" "meta";
    row-gap: 40px;
  }
  .case-hero__grid { --k: .7; --ov: -40px; }
  .phones { justify-self: center; }

  .case-context { flex-direction: column; gap: 32px; }
  .case-context__media { width: 100%; }

  .case-ux__row { flex-wrap: wrap; }
  .ux-card { flex: 1 1 calc(50% - 24px); }
  /* 3 cartes : on garde une seule rangée plutôt que 2 + 1 orpheline */
  .case-ux__row:has(> .ux-card:nth-child(3):last-child) { flex-wrap: nowrap; }
}

@media (max-width: 960px) {
  .case-pb { flex-direction: column; }
  .others { flex-direction: column; align-items: stretch; max-width: none; }
}

/* Mobile (frame Figma 393 px) – n'affecte pas le rendu ≥ 768px */
@media (max-width: 767px) {
  .only-desktop { display: none; }
  .only-mobile { display: block; }

  /* Hero */
  .case-hero { padding: 32px var(--gutter); }
  .case-hero__grid { --k: .4442; --ov: -28px; row-gap: 28px; }
  .case-hero__title { font-size: 40px; }
  .case-meta__group--tight { gap: 12px; }
  .phones { justify-self: stretch; }

  /* Contexte */
  .case-context { gap: 20px; padding: 32px var(--gutter); }
  .case-context__media { aspect-ratio: 652 / 400; }

  /* Problème / objectif */
  .case-pb { gap: 80px; padding: 32px var(--gutter); }

  /* Problème / objectif : variante « b » (gap 32, décors dédiés) */
  .case-pb--b { gap: 32px; padding: 48px var(--gutter); }
  .case-pb--b .cd-prob-e { left: -96.08px; top: -185.48px; width: 591.078px; height: 585.535px; }
  .case-pb--b .cd-prob-e > div { width: 341.892px; height: 490.388px; transform: rotate(-46.51deg); }
  .case-pb--b .cd-prob-e img.u-mobile { left: -58.5%; top: -40.78%; width: 217%; height: 180.82%; }
  .case-pb--b .cd-prob-p { left: 125px; top: 346px; width: 498.209px; height: 498.209px; }
  .case-pb--b .cd-prob-p > div { width: 395.238px; height: 395.238px; transform: rotate(18.04deg); }
  .case-pb--b .cd-prob-p img.u-mobile { left: -31.25%; top: -37.95%; width: 162.5%; height: 150.9%; }

  /* Sous-sections de la démarche */
  .case-sub { gap: 20px; }
  .case-sub__title { font-size: 20px; }

  /* Démarche */
  .case-approach { padding: 48px var(--gutter); }

  /* Galerie : une seule image à la place du canevas desktop */
  .case-gallery { height: auto; background: none; }
  .case-gallery__canvas,
  .case-gallery > .deco { display: none; }
  .case-gallery__mobile { display: block; width: 100%; aspect-ratio: 2880 / 2878; object-fit: cover; }

  .case-gallery.case-gallery--mosaic { height: auto; background: none; }

  /* Décisions UX + résultats */
  .case-ux { gap: 48px; padding: 48px var(--gutter) 0; }
  .case-ux__row { flex-direction: column; flex-wrap: nowrap; gap: 24px; }
  .ux-card { flex: none; width: 100%; }
  .ux-card { padding: 24px 20px; }
  .ux-card__num { font-size: 40px; }
  .ux-card__title { font-size: 20px; }
  .case-p--lead { font-size: 18px; }
  .case-approach__steps { gap: 24px; }
  .case-ux__row--pad { padding: 0; }
  .case-results { gap: 20px; padding: 48px var(--gutter); }

  /* Autres projets : défilement horizontal */
  .case-others { gap: 20px; padding: 32px var(--gutter); }
  .others {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 8px;
    max-width: none;
    width: auto;
    -webkit-overflow-scrolling: touch;
  }
  .other-card { flex: 0 0 353px; min-width: 353px; scroll-snap-align: start; justify-content: space-between; }
  .other-card--mobile-only { display: flex; }
  .other-card[data-order="1"] { order: 1; }
  .other-card[data-order="2"] { order: 2; }
  .other-card[data-order="3"] { order: 3; }
  .other-card[data-order="4"] { order: 4; }
  .other-card[data-order="5"] { order: 5; }
  .other-card__media { aspect-ratio: 353 / 230; }
  .other-card__body { flex: 1 1 auto; justify-content: space-between; gap: 24px; padding: 20px 20px 32px; }
  .other-card__text { gap: 16px; }
  .other-card__title { font-size: 36px; }
  .other-card__desc { font-size: 14px; }
  .other-card__link { align-self: stretch; justify-content: space-between; }

  /* Décors */
  .cd-hero-p { left: calc(50% - .13px); top: -127.86px; width: 1674.745px; height: 1674.745px; transform: translateX(-50%); }
  .cd-hero-p > div { transform: rotate(-55.9deg); }
  .cd-prob-p { left: .02px; }
  .cd-oth-p { left: -345px; top: -311px; width: 1686.847px; height: 1686.847px; }
  .cd-oth-p > div { transform: rotate(36.51deg); }
}