/* ==========================================================================
   ETICZEN Motion — styles communs des animations
   Couleurs et typographies reprises de eticzen-design-system.css (site en ligne)
   ========================================================================== */

.ezm{
  --ezm-red:#C81E2C;
  --ezm-red-light:#FBD3D6;
  --ezm-ink:#1A1A1A;
  --ezm-bg:#F4F4F4;
  --ezm-paper:#FFFFFF;
  --ezm-gray:#6B6B6B;
  --ezm-border:#E4E4E4;
  --ezm-font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ezm-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  container-type:inline-size;
  position:relative;
  width:100%;
  font-family:var(--ezm-font);
  color:var(--ezm-ink);
  -webkit-font-smoothing:antialiased;
}
.ezm *,.ezm *::before,.ezm *::after{box-sizing:border-box;}

/* ---- Scène ---- */
.ezm-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ezm-bg);
  isolation:isolate;
}
.ezm[data-layout="tall"] .ezm-stage{aspect-ratio:4/5;}
.ezm[data-layout="hero"] .ezm-stage{aspect-ratio:4/3;}
.ezm[data-layout="hero"] .ezm-title.is-m{font-size:clamp(17px,4.4cqw,30px);}
.ezm-svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.ezm-caps{position:absolute;inset:0;pointer-events:none;z-index:2;}

/* ---- Textes ---- */
.ezm-cap{position:absolute;visibility:hidden;}
.ezm-cap[data-pos="side"]{left:5.5%;top:50%;width:31%;transform:translateY(-50%);}
.ezm-cap[data-pos="top"]{left:5.5%;top:8.5%;width:84%;}
.ezm-cap[data-pos="center"]{left:8%;right:8%;top:47%;text-align:center;}
.ezm-cap[data-pos="corner"]{left:5.5%;top:8.5%;width:40%;}
.ezm-cap[data-pos="bottom"]{left:8%;right:8%;bottom:7%;text-align:center;}
.ezm[data-layout="tall"] .ezm-cap[data-pos="bottom"]{left:6%;right:6%;bottom:5.5%;}
.ezm[data-layout="tall"] .ezm-cap[data-pos="side"],
.ezm[data-layout="tall"] .ezm-cap[data-pos="top"],
.ezm[data-layout="tall"] .ezm-cap[data-pos="corner"]{left:7%;right:7%;top:6.5%;width:auto;transform:none;}
.ezm[data-layout="tall"] .ezm-cap[data-pos="center"]{left:7%;right:7%;top:41%;}

.ezm-line{display:block;overflow:hidden;padding:.16em 0 .12em;margin:-.16em 0 -.12em;}
.ezm-line > span{display:block;will-change:transform;}
.ezm-eyebrow{
  font-family:var(--ezm-mono);font-weight:500;
  font-size:clamp(10px,1.05cqw,14px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ezm-red);
}
.ezm-rule{display:block;width:44px;height:2px;background:var(--ezm-red);transform-origin:0 50%;margin:.75em 0 .85em;}
.ezm-cap[data-pos="center"] .ezm-rule{margin-left:auto;margin-right:auto;transform-origin:50% 50%;}
.ezm-title{
  font-weight:600;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(26px,4.3cqw,62px);
}
.ezm-title.is-m{font-size:clamp(22px,3.1cqw,44px);line-height:1.12;}
.ezm-title em{font-style:normal;color:var(--ezm-red);}
.ezm-legend{
  font-size:clamp(14px,1.5cqw,21px);line-height:1.4;color:#3a3a3a;margin-top:.7em;
}
.ezm-legend.is-mono{font-family:var(--ezm-mono);font-size:clamp(12px,1.25cqw,17px);letter-spacing:.02em;}
.ezm-cta{
  display:inline-block;margin-top:1.2em;
  background:var(--ezm-ink);color:#fff;text-decoration:none;
  font-size:clamp(12px,1.15cqw,15px);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:.95em 1.5em;
}
.ezm-cta span{color:#fff;}
a.ezm-cta{pointer-events:auto;}
a.ezm-cta:hover,a.ezm-cta:focus-visible{background:var(--ezm-red);color:#fff;}

.ezm[data-layout="tall"] .ezm-eyebrow{font-size:clamp(10px,3cqw,13px);}
.ezm[data-layout="tall"] .ezm-title{font-size:clamp(26px,8.2cqw,46px);}
.ezm[data-layout="tall"] .ezm-title.is-m{font-size:clamp(21px,6.4cqw,36px);}
.ezm[data-layout="tall"] .ezm-legend{font-size:clamp(14px,4.1cqw,19px);}
.ezm[data-layout="tall"] .ezm-legend.is-mono{font-size:clamp(12px,3.5cqw,16px);}
.ezm[data-layout="tall"] .ezm-cta{font-size:clamp(12px,3.4cqw,15px);}

/* ---- Étiquettes techniques (SVG, taille écran constante) ---- */
.ezm-co-text{
  font-family:var(--ezm-mono);font-weight:500;font-size:13px;letter-spacing:.05em;
  fill:var(--ezm-ink);paint-order:stroke;stroke:var(--ezm-bg);stroke-width:5px;stroke-linejoin:round;
}
.ezm[data-layout="tall"] .ezm-co-text{font-size:11.5px;}
.ezm-svg-text{font-family:var(--ezm-font);}
.ezm-svg-mono{font-family:var(--ezm-mono);}

/* ---- Contrôles ---- */
.ezm-controls{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--ezm-paper);
  border:1px solid var(--ezm-border);border-top:0;
}
.ezm-btn{
  flex:0 0 auto;width:38px;height:38px;padding:0;margin:0;
  display:inline-grid;place-items:center;
  background:var(--ezm-paper);color:var(--ezm-ink);
  border:1px solid var(--ezm-ink);border-radius:0;cursor:pointer;
}
.ezm-btn svg{width:16px;height:16px;display:block;}
.ezm-btn:hover{background:var(--ezm-ink);color:#fff;}
.ezm-btn:focus-visible,.ezm-progress:focus-visible{outline:2px solid var(--ezm-red);outline-offset:2px;}
.ezm-progress{flex:1 1 auto;min-width:60px;margin:0;accent-color:var(--ezm-red);cursor:pointer;}
.ezm-time{flex:0 0 auto;font-family:var(--ezm-mono);font-size:12px;color:var(--ezm-gray);min-width:84px;text-align:right;}
.ezm-flag{
  flex:0 0 auto;font-family:var(--ezm-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ezm-red);border:1px solid var(--ezm-red-light);background:#fff7f8;padding:3px 7px;
}
.ezm-flag[hidden]{display:none;}

/* Contrôle minimal (intégration site) : un seul bouton lecture/pause en surimpression */
.ezm[data-controls="minimal"] .ezm-controls{
  position:absolute;right:10px;bottom:10px;z-index:3;padding:0;border:0;background:transparent;
}
.ezm[data-controls="minimal"] .ezm-restart,
.ezm[data-controls="minimal"] .ezm-progress,
.ezm[data-controls="minimal"] .ezm-time,
.ezm[data-controls="minimal"] .ezm-flag{display:none;}
.ezm[data-controls="minimal"] .ezm-btn{width:34px;height:34px;background:rgba(255,255,255,.92);border-color:rgba(26,26,26,.5);}
.ezm[data-controls="none"] .ezm-controls{display:none;}
.ezm[data-controls="minimal"][data-controls-pos="top"] .ezm-controls{top:10px;bottom:auto;}

/* ---- Chargement / erreur ---- */
.ezm-msg{
  position:absolute;inset:auto 0 0 0;padding:12px 16px;font-family:var(--ezm-mono);font-size:12px;color:var(--ezm-gray);
}