/* illus.css : mini-interfaces animées (accueil, comment ça marche) */

/* Étapes illustrées : pastilles en couleur (bleu clair, bleu pour l'IA, orange pour l'agence), pas en noir */
.steps-illu .step-num { background: var(--c-ia-soft); color: var(--c-ia-strong); }
.steps-illu .step-ia .step-num { background: var(--c-ia); color: var(--c-on-dark); }
.steps-illu .step-agence .step-num { background: var(--c-agence); color: var(--c-ink); }
.steps-illu .mk-h { background: var(--c-ink-3); }

/* Illustrations des étapes (CSS, décoratives) : mini-interfaces du configurateur, du site créé et de la relecture */
.illu { position: relative; min-height: 200px; margin-top: auto; border-radius: var(--r-md); background: var(--c-ph); overflow: hidden; padding: var(--s-2); display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); font-size: var(--fs-12); }
/* 1. Formulaire */
.mk-card { display: flex; flex-direction: column; gap: var(--s-05); padding: var(--s-1h); border-radius: var(--r-sm); background: var(--c-bg); box-shadow: var(--shadow-soft); }
.mk-lbl { font-weight: 700; color: var(--c-ink-2); }
.mk-input { position: relative; overflow: hidden; display: flex; align-items: center; height: 26px; padding: 0 var(--s-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-ink); font-size: var(--fs-14); margin-bottom: var(--s-05); }
.mk-typed { display: inline-block; white-space: nowrap; overflow: hidden; }
.mk-caret { display: inline-block; width: 1px; height: 14px; margin-left: 1px; background: var(--c-ia); opacity: 0; }
.mk-chips { display: flex; gap: var(--s-05); }
.mk-chips span { padding: 2px var(--s-1); border: 1px solid var(--c-line); border-radius: var(--r-pill); color: var(--c-ink-2); }
.mk-chips span:first-child { background: var(--c-ia); border-color: var(--c-ia); color: var(--c-on-dark); }
/* 2. Site créé par l'IA */
.illu-ia { background: var(--c-ia-soft); }
.mk-win { position: relative; border-radius: var(--r-sm); background: var(--c-bg); box-shadow: var(--shadow-soft); overflow: hidden; }
.mk-top { display: flex; align-items: center; gap: 4px; padding: 6px var(--s-1); background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line); }
.mk-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-line); }
.mk-top span { margin-left: var(--s-1); padding: 1px var(--s-1); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-ink-3); font-size: var(--fs-12); }
.mk-site { padding: var(--s-1); }
.mk-nav { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s-1); }
.mk-nav b { width: 14px; height: 14px; border-radius: 4px; background: var(--c-agence); margin-right: auto; }
.mk-nav span { width: 22px; height: 4px; border-radius: 2px; background: var(--c-line); }
.mk-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-1); align-items: center; }
.mk-copy { display: flex; flex-direction: column; gap: 5px; }
.mk-copy span { display: block; border-radius: 2px; transform-origin: left; }
.mk-h { height: 8px; width: 95%; background: var(--c-ink); }
.mk-h2 { width: 70%; }
.mk-p { height: 4px; width: 100%; background: var(--c-line); margin-top: 2px; }
.mk-p2 { width: 80%; margin-top: 0; }
.mk-copy .mk-btn { width: 44%; height: 12px; border-radius: var(--r-pill); background: var(--c-ia); margin-top: 4px; }
.mk-img { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--c-ia-soft); }
.mk-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-ai { position: absolute; right: var(--s-1); top: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--s-1); border-radius: var(--r-pill); background: var(--c-ia); color: var(--c-on-dark); font-weight: 700; opacity: 0; }
.mk-ai .ic { width: 12px; height: 12px; }
/* 3. Relecture de l'agence */
.illu-agence { background: var(--c-agence-pale); align-items: center; }
.mk-checks { display: flex; flex-direction: column; gap: var(--s-05); width: 100%; max-width: 240px; padding: var(--s-1h); border-radius: var(--r-sm); background: var(--c-bg); box-shadow: var(--shadow-soft); font-size: var(--fs-14); color: var(--c-ink); }
.mk-checks li { display: flex; align-items: center; gap: var(--s-1); }
.mk-ck { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--c-agence); color: var(--c-ink); }
.mk-ck .ic { width: 12px; height: 12px; }
.illu-agence .valid { box-shadow: var(--shadow-soft); }
.illu-agence .valid-dot .ic { stroke-dasharray: 24; }

/* Animation (cycle de 9 s : étape 1, puis 2, puis 3), lancée par main.js quand l'élément [data-anim] est visible.
   --d0 décale tout le cycle (illustration seule : elle démarre aussitôt).
   Sans JS ou avec « réduire les animations », les illustrations restent dans leur état final. */
@media (prefers-reduced-motion: no-preference) {
  .anim .illu * { animation-delay: var(--d0, 0s); animation-duration: 9s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease-out; }
  /* 1. Les champs se remplissent, la version se choisit */
  .anim .mk-typed { animation-name: mk-type; }
  .anim .mk-t2 { animation-delay: calc(.9s + var(--d0, 0s)); }
  .anim .mk-caret { animation-name: mk-caret; }
  .anim .mk-chips span:first-child { animation-name: mk-pick; }
  /* 2. La page se construit pendant que l'IA rédige (décalage de 3 s) */
  .anim .mk-copy span, .anim .mk-nav span { animation-name: mk-write; animation-delay: calc(3.2s + var(--d0, 0s)); }
  .anim .mk-h2 { animation-delay: calc(3.45s + var(--d0, 0s)); }
  .anim .mk-p { animation-delay: calc(3.7s + var(--d0, 0s)); }
  .anim .mk-p2 { animation-delay: calc(3.9s + var(--d0, 0s)); }
  .anim .mk-btn { animation-delay: calc(4.1s + var(--d0, 0s)); }
  .anim .mk-img { animation-name: mk-fade; animation-delay: calc(3.3s + var(--d0, 0s)); }
  .anim .mk-ai { animation-name: mk-ai; animation-delay: calc(3s + var(--d0, 0s)); }
  /* 3. Les contrôles se cochent, puis le badge apparaît (décalage de 6 s) */
  .anim .mk-checks li { animation-name: mk-check; animation-delay: calc(6s + var(--d0, 0s)); }
  .anim .mk-checks li:nth-child(2) { animation-delay: calc(6.35s + var(--d0, 0s)); }
  .anim .mk-checks li:nth-child(3) { animation-delay: calc(6.7s + var(--d0, 0s)); }
  .anim .illu-agence .valid { animation-name: mk-pop; animation-delay: calc(7.1s + var(--d0, 0s)); }
  .anim .illu-agence .valid-dot .ic { animation-name: mk-draw; animation-delay: calc(7.1s + var(--d0, 0s)); }
}
@keyframes mk-type { 0% { max-width: 0; } 12%, 90% { max-width: 260px; } 100% { max-width: 0; } }
@keyframes mk-caret { 0%, 22% { opacity: 1; } 6%, 12%, 18% { opacity: 0; } 23%, 100% { opacity: 0; } }
@keyframes mk-pick { 0%, 24% { background: var(--c-bg); border-color: var(--c-line); color: var(--c-ink-2); } 28%, 90% { background: var(--c-ia); border-color: var(--c-ia); color: var(--c-on-dark); } 100% { background: var(--c-bg); border-color: var(--c-line); color: var(--c-ink-2); } }
@keyframes mk-write { 0% { transform: scaleX(0); } 8%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes mk-fade { 0% { opacity: 0; transform: scale(.96); } 10%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes mk-ai { 0% { opacity: 0; } 4%, 10%, 16% { opacity: 1; } 7%, 13% { opacity: .55; } 20%, 100% { opacity: 0; } }
@keyframes mk-check { 0% { opacity: 0; transform: translateX(-6px); } 5%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mk-pop { 0% { opacity: 0; transform: scale(.85); } 5% { opacity: 1; transform: scale(1.05); } 8%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes mk-draw { 0%, 3% { stroke-dashoffset: 24; } 10%, 100% { stroke-dashoffset: 0; } }