/* Faux téléphone 3D de la section Photos : démonstration décorative (aria-hidden), boucle de 9 s.
   Épaisseur = quelques « tranches » empilées en profondeur ; inclinaison pilotée par js/tilt.js. */

.photos-intro {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.photos-intro__text { display: grid; gap: clamp(14px, 2vw, 22px); }
.photos-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.steps--big { gap: .8rem; font-size: clamp(1.05rem, 1vw + .7rem, 1.3rem); }
@media (min-width: 900px) {
  .photos-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

.phone-stage {
  --pw: clamp(190px, 54vw, 250px);
  --loop: 9s;
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--pw) * 2.2);
  perspective: 1100px;
}
@media (min-width: 900px) { .phone-stage { --pw: clamp(220px, 19vw, 290px); } }

.phone {
  --rx: 5deg;
  --ry: -16deg;
  position: relative;
  width: var(--pw);
  height: calc(var(--pw) * 2.05);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  will-change: transform;
}
.phone__slab {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--pw) * .17);
  background: linear-gradient(135deg, #9a9ea7, #4a4d55 55%, #a4a8b0);
  transform: translateZ(var(--z));
}
.phone__front {
  position: absolute;
  inset: 0;
  padding: calc(var(--pw) * .035);
  border-radius: calc(var(--pw) * .17);
  background: #0c0d10;
  box-shadow: inset 0 0 0 calc(var(--pw) * .01) #3b3e45;
  transform: translateZ(1px);
}
.phone__front::after { /* reflet du verre */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .08) 100%);
  pointer-events: none;
  z-index: 6;
}
.phone__island {
  position: absolute;
  z-index: 5;
  top: calc(var(--pw) * .06);
  left: 50%;
  width: calc(var(--pw) * .28);
  height: calc(var(--pw) * .08);
  border-radius: 99px;
  background: #000;
  translate: -50% 0;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--pw) * .14);
  overflow: hidden;
  background: #F6CBBD;
  isolation: isolate;
  font-size: calc(var(--pw) * .05);
}
.phone-shadow {
  position: absolute;
  bottom: 1%;
  width: 62%;
  height: 5%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  filter: blur(14px);
}

/* ---------- Écrans de la démonstration ---------- */
.demo {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: var(--loop) linear infinite;
}
.demo--site {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  padding: 1.6em;
  background: #F6CBBD;
  animation-name: d-site;
}
.demo__title { font-family: var(--font-display); font-weight: 600; font-size: 2.4em; line-height: .98; color: #3D6044; }
.demo__btn {
  align-self: flex-start;
  padding: .8em 1.4em;
  border-radius: 99px;
  background: #3D6044;
  color: #F6CBBD;
  font-weight: 600;
  font-size: .95em;
  animation: press var(--loop) linear infinite;
}
.demo__tap {
  position: absolute;
  width: 3.2em;
  height: 3.2em;
  margin: -1.6em 0 0 -1.6em;
  border-radius: 50%;
  border: 2px solid #3D6044;
  background: rgba(61, 96, 68, .22);
  scale: 0;
  opacity: 0;
}
.demo__tap--site { left: 34%; top: 62%; animation: tap-site var(--loop) linear infinite; }

.demo--camera { background: #111; animation-name: d-cam; }
.demo--camera img { width: 100%; height: 100%; object-fit: cover; }
.demo__corners {
  position: absolute;
  inset: 16% 9% 24%;
  --c: linear-gradient(#fff, #fff);
  background:
    var(--c) top left / 1.6em 2px no-repeat, var(--c) top left / 2px 1.6em no-repeat,
    var(--c) top right / 1.6em 2px no-repeat, var(--c) top right / 2px 1.6em no-repeat,
    var(--c) bottom left / 1.6em 2px no-repeat, var(--c) bottom left / 2px 1.6em no-repeat,
    var(--c) bottom right / 1.6em 2px no-repeat, var(--c) bottom right / 2px 1.6em no-repeat;
}
.demo__shutter {
  position: absolute;
  bottom: 2.6em;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4.2em;
  height: 4.2em;
  margin-left: -2.1em;
  border: 3px solid #fff;
  border-radius: 50%;
  animation: shutter var(--loop) linear infinite;
}
.demo__shutter i { width: 3.2em; height: 3.2em; border-radius: 50%; background: #fff; }
.demo__tap--shutter { left: 50%; bottom: 4.7em; margin-top: 0; animation: tap-shutter var(--loop) linear infinite; }
.demo__flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash var(--loop) linear infinite; }

.demo--gallery { padding: 3.4em 1.2em 1.2em; background: #F7EBE0; animation-name: d-gal; }
.demo__gtitle { font-family: var(--font-display); font-weight: 600; font-size: 1.7em; color: #3D6044; margin-bottom: .6em; }
.demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.demo__ph { margin: 0; padding: .35em; background: #fff; }
.demo__ph:nth-child(even) { rotate: 2.5deg; }
.demo__ph:nth-child(3) { rotate: -2deg; }
.demo__ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.demo__new { rotate: -4deg; animation: drop var(--loop) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.demo__toast {
  position: absolute;
  left: 50%;
  bottom: 1.6em;
  translate: -50% 0;
  padding: .7em 1.3em;
  border-radius: 99px;
  background: #2E3341;
  color: #fff;
  font-weight: 600;
  font-size: .95em;
  opacity: 0;
  animation: toast var(--loop) linear infinite;
}

@keyframes d-site { 0%, 26% { opacity: 1; } 29%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes d-cam { 0%, 27% { opacity: 0; } 29%, 53% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes d-gal { 0%, 54% { opacity: 0; } 57%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tap-site { 0%, 12% { scale: 0; opacity: 0; } 15% { scale: 1; opacity: 1; } 22%, 100% { scale: 1.6; opacity: 0; } }
@keyframes press { 0%, 13% { scale: 1; } 16% { scale: .92; } 20%, 100% { scale: 1; } }
@keyframes tap-shutter { 0%, 38% { scale: 0; opacity: 0; } 41% { scale: 1; opacity: 1; } 48%, 100% { scale: 1.6; opacity: 0; } }
@keyframes shutter { 0%, 40% { scale: 1; } 43% { scale: .84; } 47%, 100% { scale: 1; } }
@keyframes flash { 0%, 43% { opacity: 0; } 45% { opacity: .95; } 52%, 100% { opacity: 0; } }
@keyframes drop {
  0%, 58% { translate: 0 -170%; scale: .6; opacity: 0; rotate: -16deg; }
  66%, 100% { translate: 0 0; scale: 1; opacity: 1; rotate: -4deg; }
}
@keyframes toast { 0%, 66% { opacity: 0; translate: -50% 14px; } 70%, 92% { opacity: 1; translate: -50% 0; } 96%, 100% { opacity: 0; translate: -50% 0; } }

/* Mouvement réduit : on fige l'écran final (la photo est arrivée dans la galerie) */
@media (prefers-reduced-motion: reduce) {
  .demo, .demo * { animation: none !important; }
  .demo--site, .demo--camera { opacity: 0; }
  .demo--gallery { opacity: 1; }
  .demo__new { translate: 0 0; scale: 1; opacity: 1; }
  .demo__toast { opacity: 1; }
}