/* ==========================================================================
   COM'X — Page Automatisation (Conecto)
   Complète audit-3d.css et solution-creatix.css : étoile cyan, illustrations des cartes.
   ========================================================================== */

body.aud-3d--cyan .aud-fly-star{background:linear-gradient(150deg,#a6efff,#14a5d9)}
body.aud-3d--cyan .crea-tag{color:#0b5f85;background:#e3f7ff;border-color:#0b5f85}

.crea-visual--cyan{--bg:linear-gradient(135deg,#14b8ee,#0b3f66)}
.crea-visual--ink{--bg:linear-gradient(135deg,#2a2a44,#0a0a12)}

/* feuille commune aux quatre illustrations */
.crea-card .cnx-sheet{
  position:absolute;z-index:1;left:12%;right:12%;top:11%;bottom:11%;
  display:flex;flex-direction:column;gap:.5rem;padding:5% 6%;
  background:#fff;border:3px solid #0a0a12;border-radius:8px;
  box-shadow:0 18px 30px rgba(0,0,0,.35);
  transform:rotate(-2deg);transition:transform .5s var(--ease);
  color:#0a0a12;
}
.crea-card:hover .cnx-sheet{transform:rotate(0deg) translateY(-6px)}
.crea-card .cnx-sheet .opt-title{margin:0;font-family:var(--font-stamp);font-size:clamp(1rem,2.4vw,1.25rem);letter-spacing:.03em}
.crea-card .cnx-sheet i{display:block;height:6px;border-radius:99px;background:#d9d6e6}
.crea-card .cnx-sheet i.short{width:60%}

/* 1. relance de paiement */
.crea-card .cnx-steps{display:flex;gap:.4rem}
.crea-card .cnx-steps span{flex:1;text-align:center;padding:.2rem .1rem;font-size:clamp(.55rem,1.4vw,.7rem);font-weight:800;border:2px solid #0a0a12;border-radius:99px;background:#f6f2e9}
.crea-card .cnx-steps span.is-done{background:#6fbf3f;color:#fff}
.crea-card .cnx-letter{flex:1;min-height:0;display:flex;flex-direction:column;gap:.4rem;padding:.55rem .65rem;border:2px solid #0a0a12;border-radius:6px;background:#f8f6ff}
.crea-card .cnx-subject{margin:0 0 .1rem;font-size:clamp(.65rem,1.6vw,.82rem);font-weight:800}
.crea-card .cnx-letter b{margin-top:auto;align-self:flex-start;padding:.2rem .6rem;border:2px solid #0a0a12;border-radius:99px;background:#ffcf3f;font-size:clamp(.55rem,1.4vw,.7rem)}

/* 2. génération d'un devis */
.crea-card .cnx-doc{flex-direction:row;align-items:center;gap:.6rem}
.crea-card .cnx-form{flex:1;display:flex;flex-direction:column;gap:.3rem}
.crea-card .cnx-form p{margin:0;font-size:clamp(.55rem,1.4vw,.7rem);font-weight:800}
.crea-card .cnx-form i{height:12px;border:2px solid #0a0a12;border-radius:4px;background:#f6f2e9}
.crea-card .cnx-arrow{flex:none;font-size:clamp(1rem,2.6vw,1.5rem);color:#2a5fe0}
.crea-card .cnx-page{flex:1;align-self:stretch;display:flex;flex-direction:column;gap:.4rem;padding:.55rem;border:2px solid #0a0a12;border-radius:4px;background:#fff6d6}
.crea-card .cnx-page p{margin:0;font-family:var(--font-display);font-size:clamp(.8rem,2vw,1.05rem);letter-spacing:.06em}
.crea-card .cnx-page b{margin-top:auto;align-self:flex-end;width:40%;height:10px;border-radius:99px;background:#0a0a12}

/* 3. notifications */
.crea-card .cnx-toasts{justify-content:center;gap:.6rem}
.crea-card .cnx-toast{margin:0;display:flex;align-items:center;gap:.5rem;padding:.45rem .65rem;border:2px solid #0a0a12;border-radius:99px;background:#f6f2e9;font-size:clamp(.6rem,1.5vw,.78rem);font-weight:800;box-shadow:3px 3px 0 #0a0a12}
.crea-card .cnx-toast i{flex:none;width:.75em;height:.75em;border-radius:50%;background:var(--c);border:2px solid #0a0a12}
.crea-card .cnx-toast:nth-child(2){margin-left:8%}
.crea-card .cnx-toast:nth-child(3){margin-left:3%}

/* 4. suivi d'un dossier */
.crea-card .cnx-track ol{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.crea-card .cnx-track li{display:flex;align-items:center;gap:.5rem;font-size:clamp(.65rem,1.6vw,.82rem);font-weight:800;color:#6d6a7d}
.crea-card .cnx-track li i{flex:none;display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;border:2px solid #0a0a12;background:#fff;font-style:normal;font-size:.8em;color:#fff}
.crea-card .cnx-track li.is-done{color:#0a0a12}
.crea-card .cnx-track li.is-done i{background:#6fbf3f}
.crea-card .cnx-track li.is-now{color:#0a0a12}
.crea-card .cnx-track li.is-now i{background:#ffcf3f}
.crea-card .cnx-progress{margin-top:auto;height:10px;border:2px solid #0a0a12;border-radius:99px;background:#f6f2e9;overflow:hidden}
.crea-card .cnx-progress b{display:block;width:72%;height:100%;background:linear-gradient(90deg,#14b8ee,#2a5fe0)}

@media (prefers-reduced-motion:reduce){.cnx-sheet{transition:none}}