/* ==========================================================================
   Maquettes d'appareils en HTML/CSS pur : navigateur, MacBook, iPhone, iPad.
   Chaque appareil est un conteneur de requête : ses proportions (cadre, rayons,
   îlot, boutons) sont exprimées en cqw et suivent la largeur donnée par --w.
   Les ombres et reflets sont réservés à ces objets, qui « flottent » vraiment.
   ========================================================================== */

/* Ombre portée commune aux appareils (plusieurs couches très diffuses). */
.device-shadow {
  box-shadow: /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
    0 2px 4px rgb(0 0 0 / 0.22),
    0 12px 24px -6px rgb(0 0 0 / 0.32),
    0 40px 80px -20px rgb(0 0 0 / 0.55);
}
/* Variante pour les formes arrondies (téléphones, tablettes) : l'ombre suit la silhouette. */
.device-shadow-soft { filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.3)) drop-shadow(0 28px 36px rgb(0 0 0 / 0.42)); } /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */

/* Reflet : une lumière rasante venue du haut à gauche. */
.glare { position: relative; }
.glare::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.10) 0%, rgb(255 255 255 / 0.03) 26%, rgb(255 255 255 / 0) 42%); /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
  mix-blend-mode: screen;
}

/* --- Fenêtre de navigateur --- */
.browser {
  container-type: inline-size;
  width: var(--w, 100%);
}
.browser__body {
  overflow: hidden;
  border-radius: max(8px, 0.9cqw);
  background: var(--calamine-2);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: max(10px, 1.6cqw);
  height: max(30px, 3.2cqw);
  padding-inline: max(12px, 1.4cqw);
  background: #23272e;
  color: #b7bcc4;
}
.browser__dots { display: flex; gap: max(5px, 0.62cqw); flex: none; }
.browser__dots i { width: max(8px, 0.95cqw); height: max(8px, 0.95cqw); border-radius: 50%; background: #4a4f58; }
.browser__dots i:nth-child(1) { background: #ff5f57; }
.browser__dots i:nth-child(2) { background: #febc2e; }
.browser__dots i:nth-child(3) { background: #28c840; }
.browser__title {
  flex: 1;
  min-width: 0;
  max-width: 34rem;
  margin-inline: auto;
  padding: max(3px, 0.4cqw) max(10px, 1.1cqw);
  background: #15181d;
  border-radius: 6px;
  font-size: max(11px, 1.05cqw);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser__screen { position: relative; aspect-ratio: 16 / 10; background: #000; }
.browser__screen > picture,
.browser__screen > picture img,
.browser__screen > img,
.browser__screen > video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Capture pleine page : l'image défile dans la fenêtre au survol ou au défilement (js/modules/scenes.js). */
.browser__screen--tall { overflow: hidden; aspect-ratio: 16 / 11; }
.browser__screen--tall picture,
.browser__screen--tall img {
  height: auto !important;
  object-fit: initial !important;
  transform: translate3d(0, var(--scroll-y, 0%), 0);
  transition: transform 4.5s var(--ease-in-out);
}

/* --- MacBook --- */
.macbook {
  container-type: inline-size;
  width: var(--w, 100%);
  perspective: 2200px;
  perspective-origin: 50% 0%;
}
.macbook__lid {
  position: relative;
  margin-inline: 6.5cqw;
  padding: 1.75cqw 1.55cqw 2.6cqw;
  border-radius: 2.6cqw 2.6cqw 0.6cqw 0.6cqw;
  background: #0a0b0d;
  box-shadow: inset 0 0 0 0.28cqw #2c2f35, inset 0 0 0 0.5cqw #0a0b0d; /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
  transform-origin: 50% 100%;
  transform: rotateX(var(--lid, 0deg));
  transform-style: preserve-3d;
}
.macbook__lid::before { /* caméra */
  content: "";
  position: absolute;
  top: 0.65cqw;
  left: 50%;
  width: 0.55cqw; height: 0.55cqw;
  margin-left: -0.275cqw;
  border-radius: 50%;
  background: #1d2a3a;
  box-shadow: 0 0 0 0.12cqw #050607; /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
}
.macbook__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border-radius: 0.35cqw; }
.macbook__screen > * { position: absolute; inset: 0; }
.macbook__screen picture,
.macbook__screen img,
.macbook__screen video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.macbook__base {
  position: relative;
  height: 2.5cqw;
  border-radius: 0 0 1.6cqw 1.6cqw / 0 0 1.25cqw 1.25cqw;
  background: #c4c7cc;
  box-shadow: inset 0 0.25cqw 0 #e6e8eb, inset 0 -0.55cqw 0.4cqw -0.2cqw #7c8088; /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
}
.macbook__base::before { /* encoche d'ouverture */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15cqw; height: 0.85cqw;
  margin-left: -7.5cqw;
  border-radius: 0 0 1cqw 1cqw;
  background: #a4a8ae;
}
.macbook__shadow {
  height: 2.6cqw;
  margin: -0.4cqw 2cqw 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0)); /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
  filter: blur(0.6cqw);
}
/* Ouverture du capot à l'arrivée dans l'écran. */
@media (prefers-reduced-motion: no-preference) {
  .js .macbook[data-lid] .macbook__lid { --lid: -62deg; transition: transform 1600ms var(--ease-in-out); }
  .js .macbook[data-lid] { opacity: 0; transform: translate3d(0, 3rem, 0); transition: opacity 900ms var(--ease-out), transform 1300ms var(--ease-out); }
  .js .macbook[data-lid].is-in { opacity: 1; transform: none; }
  .js .macbook[data-lid].is-in .macbook__lid { --lid: 0deg; }
}

/* --- iPhone --- */
.iphone {
  --screen-bg: #000;
  --screen-ink: #111;
  container-type: inline-size;
  position: relative;
  width: var(--w, 300px);
  aspect-ratio: 100 / 209.3;
  flex: none;
}
.iphone__frame {
  position: absolute;
  inset: 0;
  padding: 3.2cqw;
  border-radius: 16.5cqw;
  background: #121316;
  box-shadow: /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
    inset 0 0 0 0.55cqw #4a4e56,
    inset 0 0 0 0.95cqw #16181c,
    inset 0 0 0 1.25cqw #2a2d33,
    0 3cqw 6cqw -1cqw rgb(0 0 0 / 0.42),
    0 14cqw 26cqw -8cqw rgb(0 0 0 / 0.6);
}
.iphone::before,
.iphone::after { /* boutons latéraux */
  content: "";
  position: absolute;
  width: 0.9cqw;
  border-radius: 0.6cqw;
  background: #34373e;
}
.iphone::before { left: -0.75cqw; top: 25cqw; height: 13cqw; box-shadow: 0 19cqw 0 #34373e, 0 37cqw 0 #34373e; } /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
.iphone::after { right: -0.75cqw; top: 40cqw; height: 21cqw; }
.iphone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 13.3cqw;
  background: var(--screen-bg);
  isolation: isolate;
}
.iphone__island {
  position: absolute;
  top: 2.55cqw;
  left: 50%;
  z-index: 3;
  width: 29.5cqw;
  height: 8.6cqw;
  margin-left: -14.75cqw;
  border-radius: 99px;
  background: #000;
}
/* Barre d'état dessinée : pour les captures faites en émulation (sans barre d'état native). */
.iphone__status {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 11.4cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2cqw 8.5cqw 0 9.5cqw;
  color: var(--screen-ink);
  font-size: 3.9cqw;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.iphone__status svg { height: 3.1cqw; width: auto; }
.iphone__content { position: absolute; inset: 0; }
.iphone__content--below-status { top: 11.4cqw; }
.iphone__content > picture,
.iphone__content > picture img,
.iphone__content > img,
.iphone__content > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.iphone__content--below-status > picture img,
.iphone__content--below-status > img,
.iphone__content--below-status > video { object-fit: contain; object-position: top center; }
.iphone__home { /* indicateur d'accueil */
  position: absolute;
  bottom: 2.2cqw;
  left: 50%;
  z-index: 3;
  width: 36cqw; height: 1.35cqw;
  margin-left: -18cqw;
  border-radius: 99px;
  background: var(--screen-ink);
  opacity: 0.85;
}

/* --- iPad (portrait) --- */
.ipad {
  container-type: inline-size;
  position: relative;
  width: var(--w, 420px);
  aspect-ratio: 100 / 139.6;
}
.ipad__frame {
  position: absolute;
  inset: 0;
  padding: 5cqw;
  border-radius: 7.5cqw;
  background: #121316;
  box-shadow: inset 0 0 0 0.45cqw #4a4e56, inset 0 0 0 0.8cqw #16181c, 0 2cqw 4cqw -1cqw rgb(0 0 0 / 0.4), 0 10cqw 20cqw -6cqw rgb(0 0 0 / 0.55); /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
}
.ipad__frame::before { /* caméra */
  content: "";
  position: absolute;
  top: 2.2cqw;
  left: 50%;
  width: 1.1cqw; height: 1.1cqw;
  margin-left: -0.55cqw;
  border-radius: 50%;
  background: #1d2a3a;
}
.ipad__screen { position: relative; height: 100%; overflow: hidden; border-radius: 2.4cqw; background: #000; }
.ipad__screen picture,
.ipad__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }