/* ==========================================================================
   COM'X — Page Applications & logiciels sur mesure (Créatix)
   Complète audit-3d.css : étoile orange, cartes de réalisations, mise en page
   « titre à gauche, héros à droite ».
   ========================================================================== */

body.aud-3d--orange .aud-fly-star{background:linear-gradient(150deg,#ffc15a,#e07b00)}

.aud-split--row-r{grid-template-columns:1.2fr .8fr;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.aud-split--row-r .section-head{margin-bottom:0}
.aud-split--row-r .aud-slot{width:min(100%,46vh,320px)}

.crea-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.crea-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:3px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-hard);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.crea-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--line)}

/* ---------- visuels des cartes : une scène colorée + des maquettes d'écran ---------- */
.crea-visual{
  position:relative;aspect-ratio:16/10;overflow:hidden;isolation:isolate;
  border-bottom:3px solid var(--line);
  background:var(--bg);
  --bg:linear-gradient(135deg,#1c3f91,#0a1f44);
}
.crea-visual::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.18;
  background-image:radial-gradient(#fff 1.3px, transparent 1.3px);background-size:14px 14px;
  -webkit-mask:radial-gradient(80% 90% at 50% 40%, #000, transparent);mask:radial-gradient(80% 90% at 50% 40%, #000, transparent);
}
.crea-visual::after{
  content:"";position:absolute;left:50%;top:48%;width:80%;aspect-ratio:1;translate:-50% -50%;z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,.28), transparent 62%);
}
.crea-visual--navy{--bg:linear-gradient(135deg,#2a4fc4,#0c1d52)}
.crea-visual--orange{--bg:linear-gradient(135deg,#f5a623,#8a4a06)}
.crea-visual--teal{--bg:linear-gradient(135deg,#2cc1b0,#0b5a63)}
.crea-visual--blue{--bg:linear-gradient(135deg,#1d6bff,#0a1f66)}

.crea-browser,.crea-phone,.crea-window{
  position:absolute;z-index:1;background:var(--white);
  border:3px solid #0a0a12;box-shadow:0 18px 30px rgba(0,0,0,.35);
  transition:transform .5s var(--ease);
}
.crea-browser img,.crea-phone img,.crea-window img{display:block;width:100%;height:auto}

/* fenêtre de navigateur */
.crea-browser{left:6%;right:6%;top:11%;border-radius:12px 12px 0 0;overflow:hidden;transform:perspective(1200px) rotateY(-5deg) rotateX(2deg)}
.crea-bar{display:flex;gap:5px;align-items:center;height:20px;padding:0 9px;background:#f0ecf8;border-bottom:3px solid #0a0a12}
.crea-bar i{width:8px;height:8px;border-radius:50%;background:#c9c2dd}
.crea-bar i:first-child{background:#ff6b76}
.crea-bar i:nth-child(2){background:#ffcf3f}
.crea-bar i:nth-child(3){background:#6fbf3f}
.crea-browser--dark{background:#0d1020}

/* téléphones : ils sortent du bas du cadre */
.crea-phone{width:27%;border-radius:20px;overflow:hidden;background:#0a0a12}
.crea-phone--r{right:5%;top:42%;transform:rotate(5deg)}
.crea-phone--a{left:21%;top:13%;transform:rotate(-5deg)}
.crea-phone--b{left:52%;top:25%;transform:rotate(4deg)}

/* panneau latéral d'extension */
.crea-window{width:46%;left:27%;top:10%;border-radius:12px 12px 0 0;overflow:hidden;background:#fff}

.crea-card:hover .crea-browser{transform:perspective(1200px) rotateY(-2deg) rotateX(0deg) translateY(-6px)}
.crea-card:hover .crea-phone--r{transform:rotate(3deg) translateY(-8px)}
.crea-card:hover .crea-phone--a{transform:rotate(-3deg) translateY(-8px)}
.crea-card:hover .crea-phone--b{transform:rotate(2deg) translateY(-12px)}
.crea-card:hover .crea-window{transform:translateY(-8px)}
.crea-card-body{display:flex;flex-direction:column;gap:.45rem;padding:1.2rem 1.3rem 1.3rem;flex:1}
.crea-tag{
  align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange-dark);background:#fff3dc;border:2px solid var(--orange-dark);border-radius:999px;padding:.2em .8em;
}
.crea-card h3{font-family:var(--font-body);font-weight:800;font-size:1.25rem}
.crea-card p{font-size:.93rem;color:#3c3a4a}
.crea-link{margin-top:auto;padding-top:.4rem;font-weight:800;color:var(--purple-dark);text-decoration:underline}
.crea-link:hover{color:var(--purple)}

@media (max-width:899px){
  .aud-split--row-r{grid-template-columns:1fr}
  .aud-split--row-r .aud-slot{width:min(62vw,260px);justify-self:center}
}
@media (max-width:720px){
  .crea-grid{grid-template-columns:1fr}
}