Init commit

alfred/app.backup/static/css/alfred-controls.css

@@ -0,0 +1,30 @@
+/* Contrôles indépendants de la feuille alfred.css existante */
+body > main { position: relative; min-height: 100dvh; padding-bottom: 82px; box-sizing: border-box; }
+.alfred-controls {
+  position: absolute; left: 16px; right: 16px; bottom: 12px;
+  display: flex; align-items: center; gap: 14px; min-height: 56px;
+  padding: 8px 18px; box-sizing: border-box;
+  border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
+  background: rgba(35,37,41,.92); color: #f4f4f5;
+  box-shadow: 0 8px 28px rgba(0,0,0,.14);
+  font: 14px/1.3 system-ui, sans-serif;
+}
+.alfred-controls .audio-toggle { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; font-size: 23px; cursor: pointer; }
+.alfred-controls .audio-toggle:hover, .alfred-controls .audio-toggle:focus-visible { background: rgba(255,255,255,.10); outline-offset: 2px; }
+.alfred-controls .audio-toggle[aria-pressed="true"] { background: rgba(225,100,100,.14); border-color: rgba(225,100,100,.28); }
+.alfred-controls .volume-label { white-space: nowrap; color: #c8c8ce; }
+.alfred-controls input[type="range"] { min-width: 60px; flex: 1; accent-color: #d1d5db; cursor: pointer; }
+.alfred-controls output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
+.alfred-controls .controls-separator { height: 25px; width: 1px; background: rgba(255,255,255,.16); }
+@media (max-width: 480px) { .alfred-controls { gap: 8px; padding: 6px 9px; left: 8px; right: 8px; } .alfred-controls .volume-label { display: none; } }
+
+/* Deux curseurs dans la barre inférieure */
+.alfred-controls { gap: 10px; }
+.alfred-controls input[type="range"] { min-width: 55px; }
+.alfred-controls output { min-width: 48px; }
+@media (max-width: 700px) {
+  body > main { padding-bottom: 126px; }
+  .alfred-controls { flex-wrap: wrap; justify-content: center; }
+  .alfred-controls input[type="range"] { flex: 1 1 80px; }
+  .alfred-controls .controls-separator { display: none; }
+}

alfred/app.backup/static/css/alfred-mode-icons.css

@@ -0,0 +1,13 @@
+.alfred-mode-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  min-height: 36px;
+  font-size: 26px;
+  line-height: 1;
+  transition: transform .25s ease, opacity .25s ease;
+}
+.alfred-mode-icon[data-mode="thinking"] { animation: alfred-thinking 1.8s ease-in-out infinite; }
+@keyframes alfred-thinking { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
+@media (prefers-reduced-motion: reduce) { .alfred-mode-icon { animation: none !important; } }

alfred/app.backup/static/css/alfred.css

@@ -0,0 +1 @@
+:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#f5f5f5;background:#242628}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 30%,#303336,#202224 65%);min-height:100vh;color:#fff}main{min-height:100vh;display:grid;grid-template-rows:auto 1fr 120px;padding:28px 42px;gap:18px}header{display:flex;justify-content:space-between;opacity:.72;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}#stage{display:flex;align-items:center;justify-content:center;overflow:hidden}#content{width:min(1100px,92vw);text-align:center;transition:opacity .45s ease,transform .45s ease;animation:appear .55s ease}#content.swap{opacity:0;transform:translateY(12px) scale(.99)}h1{font-size:clamp(2rem,5vw,5rem);font-weight:350;margin:.2em}p{font-size:clamp(1rem,2vw,1.5rem);color:#d4d4d4}.hero{max-width:min(100%,900px);max-height:62vh;border-radius:18px;box-shadow:0 25px 70px #0008;animation:imageIn .9s cubic-bezier(.2,.8,.2,1)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;text-align:left}.card{padding:18px;border:1px solid #ffffff1c;background:#ffffff0a;border-radius:16px;backdrop-filter:blur(8px)}#wave{display:flex;align-items:center}canvas{width:100%;height:100%}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes imageIn{from{opacity:0;filter:blur(14px);transform:scale(.965)}to{opacity:1;filter:blur(0);transform:scale(1)}}