/* ============================================================
   Carp Enduro Live — Composant « démo animée » (#11)
   Injecté par demo-live.js dans <div id="cel-demo">.
   Réutilisable : page /decouvrir + en-tête de /pourquoi.html.
   Charte : sombre + or (variables de theme.css).
   ============================================================ */

.dl-stage{position:relative;overflow:hidden;background:var(--fond,#0f1115);
  border:1px solid rgba(201,162,75,.30);border-radius:16px;min-height:560px;
  color:var(--texte,#e9e9ee);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
@media (min-width:680px){.dl-stage{min-height:486px;}}

.dl-layer{position:absolute;inset:0;transition:opacity .7s ease;}
.dl-pf{font-family:var(--titre,'Playfair Display',Georgia,serif);}

.dl-row{position:absolute;left:0;right:0;height:42px;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:0 10px;
  transition:top .65s cubic-bezier(.2,.8,.2,1),background .45s,border-color .45s;}
.dl-card{background:#15171d;border:1px solid rgba(201,162,75,.45);border-radius:10px;padding:8px 11px;
  margin-bottom:8px;opacity:0;transform:translateX(22px);transition:opacity .45s,transform .45s;}

.dl-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rouge,#ff5b5a);animation:dlpulse 1.3s infinite;}
@keyframes dlpulse{0%,100%{opacity:1}50%{opacity:.25}}

.dl-btn{background:var(--or,#C9A24B);color:#1a1205;font-weight:700;border:none;border-radius:10px;
  padding:12px 22px;font-size:15px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .15s;}
.dl-btn:hover{background:var(--or-clair,#E6C56E);}

.dl-mini{position:absolute;bottom:11px;right:13px;display:flex;align-items:center;gap:6px;font-size:12px;
  color:var(--texte-doux,#9a9aa5);background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:5px 11px;cursor:pointer;z-index:5;}
.dl-mini svg{width:14px;height:14px;}

/* ---- Mode « vue smartphone » ---- */
.cd-phone-wrap{display:flex;justify-content:center;padding:6px 0 2px;}
.cd-phone{position:relative;width:300px;height:610px;background:#05060a;border-radius:42px;
  border:2px solid #23252b;padding:12px;box-shadow:0 0 0 2px #0a0b0f inset;}
.cd-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:104px;height:20px;
  background:#05060a;border-radius:0 0 14px 14px;z-index:9;display:flex;align-items:center;justify-content:center;gap:8px;}
.cd-notch i{width:34px;height:4px;border-radius:3px;background:#1b1d22;}
.cd-notch .cam{width:6px;height:6px;border-radius:50%;background:#13202a;}
.cd-scr{position:relative;width:100%;height:100%;background:var(--fond,#0f1115);border-radius:32px;overflow:hidden;}
.cd-prow{position:absolute;left:12px;right:12px;height:40px;display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:0 9px;
  transition:top .6s cubic-bezier(.2,.8,.2,1),background .4s,border-color .4s;}
.cd-ptoast{position:absolute;top:54px;left:12px;right:12px;background:#15171d;border:1px solid rgba(201,162,75,.5);
  border-radius:11px;padding:9px 11px;opacity:0;transform:translateY(-14px);transition:opacity .4s,transform .4s;z-index:6;}