/* ════════════════════════════════════════════════════════════════════
   RÉALISATIONS — capture du site dans un cadre de navigateur incliné en 3D
   Utilisé par les cartes de la section #realisations (index.html).
   Le cadre se redresse au survol ; pas d'inclinaison si le visiteur a
   demandé moins d'animations. Retirable d'un bloc.
   ════════════════════════════════════════════════════════════════════ */

.rea-cadre {
  perspective: 1600px;
  perspective-origin: 30% 40%;
  margin: 0 0 34px;
  padding: 14px 18px 26px 4px;
}

.rea-ecran {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0b1410;
  border: 1px solid rgba(11, 20, 16, 0.18);
  transform: rotateY(-16deg) rotateX(7deg) rotateZ(1.2deg);
  transform-origin: 40% 50%;
  box-shadow:
    26px 34px 60px -22px rgba(11, 20, 16, 0.45),
    8px 10px 22px -10px rgba(11, 20, 16, 0.3);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.7s ease;
}
.rea-cadre--droite .rea-ecran {
  transform: rotateY(16deg) rotateX(7deg) rotateZ(-1.2deg);
  transform-origin: 60% 50%;
  box-shadow:
    -26px 34px 60px -22px rgba(11, 20, 16, 0.45),
    -8px 10px 22px -10px rgba(11, 20, 16, 0.3);
}
.rea-cadre:hover .rea-ecran {
  transform: rotateY(0) rotateX(0) rotateZ(0);
  box-shadow: 0 30px 60px -28px rgba(11, 20, 16, 0.45);
}

/* reflet de verre sur l'écran */
.rea-ecran::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 38%);
}

/* barre de navigateur */
.rea-barre {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  background: #16211c;
}
.rea-barre i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}
.rea-barre i:first-child { background: #2fc46a; }
.rea-barre span {
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 3px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rea-ecran img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 760px) {
  .rea-cadre { padding: 8px 10px 18px 2px; }
  .rea-ecran,
  .rea-cadre--droite .rea-ecran { transform: rotateY(-10deg) rotateX(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rea-ecran,
  .rea-cadre--droite .rea-ecran { transform: none; transition: none; }
}

/* piloté par assets/realisations.js : le script calcule l'inclinaison à chaque image */
.rea-actif .rea-ecran { transition: none; will-change: transform; }

/* Troisième réalisation (Électis, 2026-10-02) : la grille « bento » attend des paires 7/5 ;
   seule sur sa ligne, elle prend toute la largeur, capture à gauche et texte à droite. */
@media (min-width: 1021px) {
  .realisations-plus .svc:nth-child(3):last-child {
    grid-column: 1 / -1;
    border-right: none;
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: 42px;
    align-content: start;
  }
  .realisations-plus .svc:nth-child(3):last-child > .rea-cadre { grid-row: 1 / span 5; margin: 0; }
  .realisations-plus .svc:nth-child(3):last-child > :not(.rea-cadre) { grid-column: 2; }
  .realisations-plus .svc:nth-child(3):last-child > .idx { margin-top: 8px; }
}