/* ==========================================================================
   Page Leocare Sinistres – compléments au gabarit css/pages/project.css
   ========================================================================== */

.metric__unit-b40 { font-weight: 700; font-size: 40px; }

/* ---------- Démarche : cartes, wireframe, prototype, tests ---------- */
.case-approach--rich { gap: 60px; }
.case-approach--rich > .case-h + .case-sub { margin-top: -40px; }
.case-approach__design { display: flex; flex-direction: column; gap: 48px; }

.wireframe { width: 100%; }
.wireframe img { display: block; width: 100%; height: auto; }
.wireframe .wireframe__part { display: none; }

.proto { display: flex; align-items: center; gap: 10px; }
.proto__overview { flex: 0 0 21.33%; min-width: 0; height: auto; }
.proto__details { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.proto__details img { width: 100%; aspect-ratio: 1236 / 558; object-fit: cover; }

.tests { display: flex; flex-direction: column; gap: 28px; padding: 40px; background: rgba(255, 255, 255, .8); border-radius: 24px; }
.tests__row { display: flex; align-items: stretch; gap: 28px; }
.test-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid #000;
  border-radius: 24px;
}
.test-card__title { font-weight: 400; font-size: 24px; line-height: normal; text-transform: uppercase; }
.test-card__list { display: flex; flex-direction: column; gap: 20px; margin: 0; font-size: 15px; line-height: 1.5; }
.test-card__list > div { display: flex; align-items: flex-start; gap: 4px; }
.test-card__list dt { flex: none; min-width: 84px; }
.test-card__list dd { flex: 1 1 0; min-width: 0; margin: 0; }
.test-card__learn { font-size: 15px; line-height: 1.5; }
.test-card__learn p + p { margin-top: 12px; }

/* ---------- Décisions UX : rangées carte / vidéo / écrans ---------- */
.ux-rows { display: flex; flex-direction: column; gap: 138px; }
.ux-row { display: flex; align-items: center; justify-content: center; gap: 40px; }
.ux-row__cards { flex: 0 0 421px; display: flex; flex-direction: column; gap: 16px; }
.ux-row__cards .ux-card { flex: none; }
.ux-row__cards .ux-card + .ux-note { margin-top: 8px; }
.ux-note { margin: 0; padding: 32px 28px; background: var(--surface); border-radius: 12px; font-size: 15px; line-height: 22px; }
.ux-row__img { position: relative; flex: 1 1 0; min-width: 0; align-self: stretch; min-height: 400px; }
.ux-row__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ux-row > .video-slot { flex: 0 0 314px; }
.ux-video { display: block; height: auto; object-fit: cover; background: none; }

/* ---------- Résultats : métriques ---------- */
.metrics--results { gap: 16px 24px; }
.metrics--results .metric { border-radius: 16px; }
.case-results .case-rich > p + p { margin-top: 20px; }

/* ---------- Texte riche compact (contexte, problème, objectif) ---------- */
.case-rich.case-rich--tight { line-height: 1.5; }
.case-rich.case-rich--tight > :is(p, ul) + :is(p, ul) { margin-top: 12px; }
.case-rich.case-rich--tight li + li { margin-top: 6px; }

/* ---------- Résultats : texte riche ---------- */
.case-rich p { margin: 0; }
.case-rich p.m,
.case-rich ul.m { margin-bottom: 27px; }
.case-rich ul { margin: 0; padding-left: 27px; list-style: disc; }
.case-rich { line-height: 1.7; }
.case-rich > :is(p, ul, h3) + :is(p, ul) { margin-top: 28px; }
.case-rich > h3 + :is(p, ul) { margin-top: 16px; }
.case-rich li + li { margin-top: 14px; }
.case-rich strong { font-weight: 600; }
.case-rich h3 { margin-top: 56px; font-family: var(--font-serif); font-weight: 700; font-size: 28px; line-height: normal; }
.case-rich > h3:first-child { margin-top: 0; }
.ux-card__text p { margin: 0; }
.ux-card__text p + p { margin-top: 12px; }

/* ---------- Mosaïque (galerie pivotée à 45°) : fond et positions ---------- */
.case-gallery--mosaic {
  background-color: #d2d2ff;
  background-image: conic-gradient(
    from 180deg at 50% 50%,
    rgb(194, 195, 245) -9.8915%,
    rgb(165, 226, 242) 7.9291%,
    rgb(142, 252, 239) 22.445%,
    rgb(184, 185, 254) 62.59%,
    rgb(188, 179, 255) 66.346%,
    rgb(194, 195, 245) 90.108%,
    rgb(165, 226, 242) 107.93%
  );
}

.mosaic__item--1  { left: 725.05px;  top: 1023.61px; }
.mosaic__item--2  { left: 725px;     top: 499px; }
.mosaic__item--3  { left: 1250.43px; top: 498.23px; }
.mosaic__item--4  { left: 239.26px;  top: -600.62px; }
.mosaic__item--5  { left: 203.2px;   top: 1017.95px; }
.mosaic__item--6  { left: 1253.96px; top: -32.81px; }
.mosaic__item--7  { left: -140.45px; top: 834.1px; }
.mosaic__item--8  { left: -286px;    top: 454px; }
.mosaic__item--9  { left: 910.31px;  top: -216.66px; }
.mosaic__item--10 { left: 765.35px;  top: -599.2px; }
.mosaic__item--11 { left: 239.97px;  top: -73.82px; }
.mosaic__item--12 { left: 383px;     top: 307px; }
.mosaic__item--13 { left: -288px;    top: -72px; }
.mosaic__item--6 .mosaic__screen,
.mosaic__item--11 .mosaic__screen { filter: drop-shadow(150px 50px 125px rgba(9, 20, 50, .15)); }
.mosaic__item--8 .mosaic__screen { filter: drop-shadow(100px 50px 125px rgba(9, 20, 50, .15)); }

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

/* ---------- Hero : deux colonnes égales, écrans inclinés à ±8° (≥ 768px) ---------- */
@media (min-width: 1101px) {
  body[data-project="sinistres"] .case-hero__grid { grid-template-columns: 1fr 1fr; --ov: -62px; }
}
@media (min-width: 768px) {
  body[data-project="sinistres"] .phones__item--left { width: calc(294.604px * var(--k)); height: calc(520.672px * var(--k)); }
  body[data-project="sinistres"] .phones__item--center { width: calc(224px * var(--k)); height: calc(492.241px * var(--k)); }
  body[data-project="sinistres"] .phones__item--right { width: calc(293.092px * var(--k)); height: calc(520.46px * var(--k)); }
  body[data-project="sinistres"] .phones__item--left .phones__rot { transform: rotate(-8deg); }
  body[data-project="sinistres"] .phones__item--right .phones__rot { transform: rotate(8deg); }
  body[data-project="sinistres"] .phones__item--left .phone { width: calc(228.11px * var(--k)); height: calc(493.73px * var(--k)); }
  body[data-project="sinistres"] .phones__item--center .phone { width: calc(224px * var(--k)); height: calc(492.241px * var(--k)); }
  body[data-project="sinistres"] .phones__item--right .phone {
    width: calc(226.583px * var(--k));
    height: calc(493.73px * var(--k));
    filter: drop-shadow(25px 15px 125px rgba(9, 20, 50, .1));
  }
}

/* ---------- Problème / objectif : dégradé propre à la page (desktop) ---------- */
@media (min-width: 768px) {
  body[data-project="sinistres"] .cd-prob-e { left: -203px; top: -426.95px; width: 1714px; height: 1683.966px; }
  body[data-project="sinistres"] .cd-prob-e > div { width: 799.44px; height: 1604.122px; transform: rotate(-46.51deg); }
  body[data-project="sinistres"] .cd-prob-e img { left: -25.02%; top: -11.72%; width: 150.04%; height: 124.19%; }
  body[data-project="sinistres"] .cd-prob-p { left: 1007px; top: 348px; }
  body[data-project="sinistres"] .cd-prob-p > div { opacity: 1; }
}

/* ---------- Décors (taches floues) : démarche et décisions UX ---------- */
.sd-app-e { left: 62.05px; top: 959.17px; width: 1974.598px; height: 1951.786px; }
.sd-app-e > div { width: 1500.613px; height: 1283.579px; transform: rotate(-139.29deg); }
.sd-app-e img { left: -13.33%; top: -14.83%; width: 126.66%; height: 130.41%; }
.sd-app-p { left: -821px; top: 1267px; width: 1979.059px; height: 1691.455px; }
.sd-app-p > div { width: 1553.883px; height: 1127.541px; transform: rotate(-151.24deg) skewX(-4.41deg); }
.sd-app-p img { left: -2.95%; top: -13.3%; width: 105.9%; height: 101.6%; }

.sd-ux-e1 { left: -117.24px; top: -222.07px; width: 1885.482px; height: 1593.14px; }
.sd-ux-e1 > div { width: 1615px; height: 993px; transform: rotate(-25.59deg); }
.sd-ux-e1 img { left: -12.38%; top: -19.39%; width: 124.77%; height: 139.53%; }
.sd-ux-p1 { left: 362.25px; top: -196.66px; width: 1532.53px; height: 1532.53px; }
.sd-ux-p1 > div { width: 1206px; height: 1206px; transform: rotate(71.03deg); }
.sd-ux-p1 img { left: -5.74%; top: -12.44%; width: 111.48%; height: 99.88%; }
.sd-ux-p2 { left: -553px; top: 1475px; width: 1667.851px; height: 1972.126px; }
.sd-ux-p2 > div { width: 1553.883px; height: 1127.541px; transform: rotate(-63deg) skewX(-4.41deg); }
.sd-ux-p2 img { left: -2.95%; top: -13.3%; width: 105.9%; height: 101.6%; }
.sd-ux-e2 { left: -481.43px; top: 1831.17px; width: 1874.702px; height: 1756.117px; }
.sd-ux-e2 > div { width: 1500.613px; height: 1283.579px; transform: rotate(-157.76deg); }
.sd-ux-e2 img { left: -13.33%; top: -14.83%; width: 126.66%; height: 130.41%; }

/* ---------- Mobile (frame Figma 393 px) ---------- */
@media (max-width: 767px) {
  /* Hero : décors */
  body[data-project="sinistres"] .cd-hero-e { left: 15px; top: 64px; width: 563px; height: 958px; }
  body[data-project="sinistres"] .cd-hero-e img.u-mobile { left: -35.52%; top: -20.88%; width: 171.04%; height: 141.76%; }
  body[data-project="sinistres"] .cd-hero-p { left: calc(50% + 147.87px); top: 25.31px; width: 1378.745px; height: 1418.569px; transform: translateX(-50%); }
  body[data-project="sinistres"] .cd-hero-p > div { width: 1081.614px; height: 932.759px; transform: rotate(-55.9deg); }
  body[data-project="sinistres"] .cd-hero-p img.u-mobile { left: -7.17%; top: -16.08%; width: 114.34%; height: 107.16%; }

  /* Démarche */
  .case-approach--rich { gap: 48px; padding: 48px var(--gutter); }
  .case-approach--rich > .case-h + .case-sub { margin-top: -28px; }
  .case-approach__design { gap: 32px; }
  .wireframe { display: flex; flex-direction: column; gap: 20px; }
  .wireframe .wireframe__full { display: none; }
  .wireframe .wireframe__part { display: block; aspect-ratio: 351 / 243; }
  .proto { flex-direction: column; align-items: stretch; gap: 20px; }
  .proto__overview { flex: none; width: 100%; }
  .tests { gap: 20px; padding: 20px; }
  .tests__row { flex-direction: column; gap: 20px; }
  .test-card { padding: 24px 20px; }
  .test-card__title { font-size: 20px; }
  .test-card__list > div { flex-direction: column; gap: 0; }
  .test-card__list dt { font-weight: 600; }

  /* Décisions UX : empilement carte, écrans, vidéo */
  .ux-rows { gap: 64px; }
  .ux-row { flex-direction: column; align-items: stretch; gap: 24px; }
  .ux-row__cards { flex: none; order: 0; }
  .ux-row__img { order: 1; flex: none; aspect-ratio: 1720 / 1704; min-height: 0; }
  .video-slot { order: 2; flex: none; width: min(314px, 80%); align-self: center; }

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

  /* Résultats */
  .case-results { padding-top: 48px; }
}