/* ============================================================= CONVERTISLOWED – Focus mobile "parfait" ------------------------------------------------------------- Objectifs: - Garde-corps latéraux dynamiques (gutter) + safe area iOS - Rythme vertical clair (espaces homogènes entre blocs) - Contrôles confortables (touch 44px+, padding interne accru) - Lisibilité: tailles fluides + line-height - Sans casser le desktop existant ============================================================= */ :root { /* Garde-corps & paddings */ --page-gutter: clamp(16px, 5vw, 24px); --container-pad: clamp(14px, 4.8vw, 22px); /* Couleurs & autres vars existantes */ --col1: #ff00cc; --col1-hover: #ff66d3; --col2: #00f0ff; --bg1: #0f0c29; --bg2: #302b63; --bg3: #24243e; --panel-bg: rgba(30,20,50,.96); --footer-bg-top: #121127; --footer-bg-bottom: #231243; --content-max: 700px; --loader-lock-padding: 0px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 15px; --radius-xl: 18px; --space-1: .25rem; --space-2: .5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --step--1: clamp(.78rem, .72rem + .2vw, .9rem); --step-0: clamp(.95rem, .85rem + .5vw, 1.05rem); --step-1: clamp(1.05rem, .95rem + .8vw, 1.3rem); --step-2: clamp(1.3rem, 1.05rem + 1.4vw, 1.8rem); --step-3: clamp(1.5rem, 1.25rem + 2vw, 2.25rem); } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 0.001ms !important; } } html, body { margin:0; padding:0; min-height:100%; background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3)); font-family: 'Orbitron', sans-serif; color:#fff; -webkit-text-size-adjust:100%; scrollbar-gutter: stable both-edges; } html{ overflow-y: scroll; } body { display:flex; flex-direction:column; align-items:center; padding-block-start: calc(env(safe-area-inset-top) + var(--space-4)); padding-block-end: calc(env(safe-area-inset-bottom) + var(--space-4) + 90px); -webkit-tap-highlight-color: transparent; } h1 { font-size: var(--step-2); margin-block: var(--space-3); text-align: center; letter-spacing: .04em; } /* Intro & main largeur lisible */ main { width: 100%; } #introText { font-size: var(--step-0); max-width: 640px; margin-inline:auto; margin-block-end: var(--space-4); text-align:center; line-height:1.55; padding-inline: var(--page-gutter); } #helpText { display:none; text-align:center; background:#222; border:1px solid var(--col1); border-radius:var(--radius-md); padding:1rem; margin-block-start:1rem; font-size:var(--step-0); } input, select, button { font-family: inherit; font-size: var(--step-0); border: none; border-radius: var(--radius-md); width: 100%; box-sizing: border-box; } /* Padding horizontal accru pour tous les champs (sauf range) */ input:not([type="range"]), select, textarea { padding: .85rem 1rem; color: #fff; background: rgba(255,255,255,.08); outline: none; line-height: 1.2; } input:focus-visible, select:focus-visible { box-shadow: 0 0 0 2px var(--col2); } #fileInput { background: rgba(255,255,255,.08); color:#fff; } button { padding: .9rem 1rem; font-weight:bold; background:var(--col1); color:#fff; cursor:pointer; transition: background .2s, transform .13s; min-height:44px; touch-action: manipulation; } button:hover:not(:disabled), button:focus-visible:not(:disabled) { background: var(--col1-hover); transform: translateY(-1px); outline:none; } button:disabled { opacity:.55; cursor:not-allowed; transform:none; } .preset-btn { background: linear-gradient(90deg, var(--col1) 70%, var(--col2) 100%); box-shadow: 0 0 7px #ff00cc99; font-size: 1rem; } .preset-btn:hover:not(:disabled), .preset-btn:focus-visible:not(:disabled) { background: linear-gradient(90deg, var(--col2) 70%, var(--col1) 100%); box-shadow: 0 0 16px #00f0ffcc, 0 0 12px #ff00cc88; transform: translateY(-1px) scale(1.02); } #downloadMainBtn { background: linear-gradient(90deg, var(--col1) 70%, var(--col2) 100%); box-shadow: 0 0 16px #ff00cc99; font-size: 1.08rem; padding-block: 1rem; border-radius: 12px; width: 240px; margin-inline:auto; } #downloadMainBtn:hover:not(:disabled) { background: linear-gradient(90deg, var(--col2) 70%, var(--col1) 100%); } #downloadMainBtn:disabled { opacity:.6; cursor:wait; transform:none; } .format-btn { background:none; color:#fff; padding:.65rem 1rem; width:100%; text-align:center; font-weight:600; border-radius:var(--radius-md); } .format-btn:hover, .format-btn:focus-visible { background: rgba(255,255,255,.15); } #mainToggleBtn.playing { background: var(--col2); color:#000; } #mainToggleBtn.stopped { background: var(--col1); color:#fff; } /* Conteneur principal avec garde-corps internes */ .container { margin-top: 30px; margin-inline:auto; background: rgba(0,0,0,.5); padding: var(--container-pad); border-radius: var(--radius-lg); box-shadow: 0 0 20px var(--col1); max-width: var(--content-max); width: min(100% - (var(--page-gutter) * 2), var(--content-max)); } /* Rythme vertical doux dans le container */ .container > * + * { margin-top: var(--space-3); } .mode-toggle { display:flex; flex-wrap:wrap; gap: var(--space-2); justify-content:center; } .mode-toggle button { flex: 1 1 140px; max-width: 240px; } .mode-toggle button.is-active{ border:1.5px solid var(--col2); box-shadow: 0 0 12px #00f0ff88, 0 0 8px #ff00cc55; } #youtube-mode, #local-mode, #waveform, #progressSlider, #timeDisplay, #speed, #bass, #reverb, label, #mainToggleBtn { display:none; } .waveform { width:100%; height: clamp(26px, 10vw, 100px); border:2px solid var(--col1); border-radius: var(--radius-md); margin-block: var(--space-3); overflow:hidden; } #visualizer { width:100%; height: clamp(26px, 10vw, 100px); background:#111; margin-block-start: var(--space-2); border-radius: var(--radius-md); } #progressSlider, #speed, #bass, #reverb { accent-color: var(--col1); } #progressSlider { -webkit-appearance:none; appearance:none; height:14px; background: rgba(34,193,195,.13); border-radius: 10px; border:1.5px solid #ff00cc55; box-shadow: 0 0 8px #00f0ff88, 0 0 16px #ff00cc44; padding:0; } #progressSlider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%; background: radial-gradient(circle, var(--col1) 60%, var(--col2) 100%); box-shadow: 0 0 15px var(--col1), 0 0 5px var(--col2); border:2.5px solid #fff; cursor:pointer; position:relative; } #progressSlider::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background: radial-gradient(circle, var(--col1) 60%, var(--col2) 100%); box-shadow: 0 0 15px var(--col1), 0 0 5px var(--col2); border:2.5px solid #fff; cursor:pointer; position:relative; } #timeDisplay { text-align:center; margin-bottom: .25rem; font-size:var(--step-0); } label { display:block; margin-top: var(--space-2); font-size: var(--step-0); } .preset-panel { display:flex; flex-wrap:wrap; gap: var(--space-2); justify-content:center; max-width:100%; margin-inline:auto; margin-block-start: var(--space-4); padding: var(--page-gutter); background:transparent; border:none; box-shadow:none; width:min(100% - (var(--page-gutter) * 2), var(--content-max)); } .preset-panel h3 { width:100%; text-align:center; margin:0; color:var(--col2); font-size:var(--step-1); } .preset-panel .preset-btn { flex:1 1 120px; min-width:0; } #download { position: relative; z-index: 20000; } .download-menu { display:flex; gap:.6rem; align-items:center; position:relative; margin-block-start: var(--space-4); justify-content:center; padding-inline: var(--page-gutter); z-index: 5; } #downloadDropdown { display:none; position:absolute; inset-inline:0; top:105%; margin:0; padding:.5rem 0; background: rgba(34,22,44,0.98); border-radius:12px; box-shadow: 0 0 14px #00f0ff99,0 0 4px #ff00cc88; list-style:none; z-index: 20050; min-width:252px; } #downloadDropdown li { margin:0; padding:0; } footer { width:100%; margin-block-start: var(--space-4); padding-block: var(--space-2); padding-inline: calc(var(--page-gutter) + env(safe-area-inset-left)); background: linear-gradient(0deg, var(--footer-bg-top) 86%, var(--footer-bg-bottom) 100%); text-align:center; font-size: var(--step--1); display:flex; flex-wrap:wrap; justify-content:center; position:relative; gap: var(--space-2); letter-spacing:.03em; border-top:2px solid #23264d; box-shadow: 0 -2px 36px #191a2f88; z-index:1; } footer #copyright { position:absolute; left:1em; top:50%; transform:translateY(-50%); font-weight:bold; opacity:.95; color:#626262; letter-spacing:.02em; font-size:.8em; min-width:13em; text-align:left; pointer-events:none; user-select:text; } footer a { color:#33eaff; text-decoration:none; font-weight:600; padding:0 .23rem; border-radius:8px; text-shadow: 0 0 4px #2ee4ff88; } footer a:hover { color:#ff6be6; text-shadow: 0 0 18px #ff00cc, 0 0 5px #fff6; background: rgba(255,0,204,0.11); } footer span { color:#383c6d; font-weight:600; font-size:1.18em; opacity:.5; user-select:none; } /* Affichage contrôles ≥700px pour conserver ta logique */ @media (min-width:700px) { body { padding-block-start: var(--space-5); } #youtube-mode, #local-mode, #waveform, #progressSlider, #timeDisplay, #speed, #bass, #reverb, label, #mainToggleBtn { display:block; } .preset-panel { margin-block-start: var(--space-4); } #downloadMainBtn { width: 320px; } } /* Panneau presets latéral + footer fixé sur desktop large */ @media (min-width:1024px) { .preset-panel { position:fixed; top:50%; right:2.5rem; transform:translateY(-50%); width:170px; flex-direction:column; flex-wrap:nowrap; gap: var(--space-2); background: var(--panel-bg); border:2.5px solid var(--col1); box-shadow: 0 0 30px #ff00cc33, 0 0 7px #00f0ff33; border-radius: var(--radius-xl); padding:1.3rem 1.2rem; min-width:170px; z-index:99; } .preset-panel h3 { margin-bottom:1rem; } .preset-panel .preset-btn { flex:none; width:100%; } footer { z-index:2; position:fixed; inset-block-end:0; inset-inline:0; border-top-left-radius:16px; border-top-right-radius:16px; } } @media (min-width:1440px) { :root { --content-max: 900px; } #downloadMainBtn { width: 360px; } h1 { font-size: var(--step-3); } } .fade-in { opacity:0; transform: translateY(20px); animation: fadeIn .4s forwards ease-out; } @keyframes fadeIn { to { opacity:1; transform: translateY(0); } } button img, label img, h3 img, a img { vertical-align: middle; margin-right:.3em; display:inline-block; } .sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } footer a:focus-visible { outline: 2.5px solid #00f0ff; outline-offset:2px; box-shadow: 0 0 6px #00f0ff80; background: rgba(0,240,255,.08); } #copyright { display:none; } @media (min-width:1024px) { #copyright { display:block; } } #downloadMainBtn { flex:1; min-width:180px; height:48px; font-family:'Orbitron', sans-serif; font-weight:bold; font-size:1.08rem; color:#fff; border:none; border-radius:12px; box-shadow:0 0 16px #ff00cc99; cursor:pointer; transition: background .22s, transform .13s; display:inline-flex; align-items:center; justify-content:center; } #downloadFormatBtn { width:42px; height:48px; background: linear-gradient(90deg, var(--col2) 50%, var(--col1) 100%); color:#fff; border:none; border-radius:10px; vertical-align:middle; font-size:1.3em; box-shadow:0 0 12px #00f0ff77; transition: background .22s, transform .13s; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } #downloadMainBtn span#formatLabel::before { content:" "; } #downloadMainBtn span#formatLabel { margin-left:.25em; } /* ===== LOADER (refonte) ===== */ #loaderOverlay { position:fixed; inset:0; display:grid; place-items:center; background: radial-gradient(circle at 18% 20%, #25163d 0%, #0e0b29 42%, #070618 80%); color:#fff; z-index:99999; overflow:hidden; isolation:isolate; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); transition: opacity .45s ease, transform .45s ease; min-height:100vh; min-height:100dvh; max-height:100svh; height: calc(var(--vh, 1vh) * 100); } #loaderOverlay[hidden]{ display:none !important; } #loaderOverlay[data-state="hidden"]{ opacity:0; pointer-events:none; transform: translateY(10px); } #loaderOverlay[data-state="visible"]{ opacity:1; transform: translateY(0); } #loaderOverlay[data-state="leaving"]{ opacity:0; pointer-events:none; transform: translateY(14px); transition-duration:.6s; filter: blur(2px); } .loader-mesh{ position:absolute; inset:-20%; background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, #ffffff08 0 1px, transparent 1px 34px); mask: radial-gradient(circle at 50% 45%, #fff 0%, transparent 72%); opacity:.6; animation: meshDrift 28s linear infinite; pointer-events:none; } .loader-accent{ position:absolute; width:80vmax; height:80vmax; filter:blur(70px); opacity:.5; mix-blend-mode:screen; pointer-events:none; } .loader-accent.a{ background: radial-gradient(circle at 30% 30%, #ff00cc55 0%, transparent 55%); } .loader-accent.b{ background: radial-gradient(circle at 70% 65%, #00f0ff55 0%, transparent 55%); animation: floatAccent 9s ease-in-out infinite alternate; } .loader-card{ position:relative; width:min(720px, calc(100% - 2.4rem)); background: linear-gradient(145deg, rgba(16,12,28,.76), rgba(10,9,24,.88)); border:1.5px solid #ffffff1e; box-shadow: 0 20px 80px #000c, 0 0 40px #ff00cc33, 0 0 24px #00f0ff22 inset; border-radius:22px; padding:1.8rem clamp(1.2rem, 4vw, 2.4rem); display:grid; gap:1.2rem; overflow:hidden; } .loader-card::after{ content:""; position:absolute; inset:12px; border:1px solid #ffffff0f; border-radius:16px; pointer-events:none; opacity:.8; } .loader-chip-row{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; position:relative; z-index:1; } .loader-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; border-radius:999px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; background: linear-gradient(120deg, #ff00cc33, #00f0ff33); border:1px solid #ffffff20; box-shadow: 0 0 14px #ff00cc44; } .loader-chip.ghost{ background: rgba(255,255,255,.05); box-shadow:none; border-color:#ffffff18; font-weight:600; } .loader-title-block{ position:relative; z-index:1; } .loader-kicker{ margin:0 0 .3rem; text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; opacity:.7; } .loader-title{ font-family:'Syne','Orbitron',sans-serif; font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem); margin:0; letter-spacing:.04em; display:flex; align-items:center; gap:.4rem; } .loader-sub{ margin:.25rem 0 0; color:#d6eaff; opacity:.8; letter-spacing:.04em; } .loader-meter{ position:relative; z-index:1; display:flex; flex-direction:column; gap:.4rem; } .loader-meter-track{ position:relative; height:14px; border-radius:999px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); overflow:hidden; border:1px solid #ffffff12; } .loader-meter-track::after{ content:""; position:absolute; inset:-14%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.35) 60%, transparent 100%); transform:translateX(-100%); opacity:0; } .loader-meter-track.is-indeterminate::after{ opacity:.72; animation: slideSheen 1.4s linear infinite; } .loader-meter-bar{ position:absolute; inset:0; width:0%; background: linear-gradient(90deg, #00f0ff, #ff00cc); box-shadow: 0 0 18px #00f0ff66, 0 0 28px #ff00cc55; transition: width .28s ease, filter .3s ease, opacity .25s ease; opacity:1; } .loader-meter-bar.is-indeterminate{ width:26%; animation: breathe 1.8s ease-in-out infinite; opacity:.9; } .loader-meter-sheen{ position:absolute; inset:-40% -60%; background: radial-gradient(circle at 20% 50%, #ffffff55 0%, transparent 35%); animation: sheen 2.2s linear infinite; mix-blend-mode:screen; opacity:.65; } .loader-meter-meta{ display:flex; align-items:center; justify-content:space-between; font-size:.96rem; letter-spacing:.03em; } .loader-meter-value{ font-family:'Orbitron',sans-serif; font-weight:700; } .loader-pills{ display:flex; flex-wrap:wrap; gap:.5rem; z-index:1; } .loader-pill{ padding:.4rem .75rem; border-radius:12px; background: rgba(255,255,255,.08); border:1px solid #ffffff12; font-weight:600; letter-spacing:.02em; } .loader-pill.ghost{ background: rgba(255,255,255,.04); color:#d9e6ff; } .loader-dots{ position:absolute; inset:12px; display:flex; gap:6px; pointer-events:none; opacity:.4; justify-content:flex-end; align-items:flex-start; } .loader-dots span{ width:8px; height:8px; border-radius:50%; background:#fff; animation: blink 1.4s ease-in-out infinite; } .loader-dots span:nth-child(2){ animation-delay:.22s; } .loader-dots span:nth-child(3){ animation-delay:.44s; } .loader-rail{ position:absolute; inset:0; margin:auto; width:84%; height:70%; border:1px dashed #ffffff14; border-radius:18px; pointer-events:none; z-index:0; } @keyframes meshDrift{ 0%{transform:translate3d(0,0,0);} 50%{transform:translate3d(-18px,14px,0) scale(1.02);} 100%{transform:translate3d(0,0,0);} } @keyframes floatAccent{ from{transform:translateY(-10px) scale(1);} to{transform:translateY(16px) scale(1.04);} } @keyframes sheen{ from{transform:translateX(-20%);} to{transform:translateX(40%);} } @keyframes slideSheen{ from{transform:translateX(-110%);} to{transform:translateX(120%);} } @keyframes breathe{ 0%,100%{opacity:.85; transform:scaleX(1);} 50%{opacity:1; transform:scaleX(1.05);} } @keyframes blink{ 0%,100%{opacity:.4;} 50%{opacity:.95;} } @media (max-width:720px){ .loader-card{ padding:1.35rem 1.2rem; gap:.9rem; } .loader-title{ font-size: clamp(1.1rem, 4vw, 1.5rem); } .loader-chip-row{ flex-direction:column; align-items:flex-start; } .loader-meter-track{ height:12px; } .loader-pill{ font-size:.92rem; } } @media (prefers-reduced-motion: reduce){ #loaderOverlay, .loader-mesh, .loader-accent.b, .loader-meter-sheen, .loader-dots span{ animation:none !important; transition:none !important; } } /* Mobile+ : parfaits garde-corps et header ajusté */ @media (max-width:700px){ body{ padding-left: calc(var(--page-gutter) + env(safe-area-inset-left)); padding-right: calc(var(--page-gutter) + env(safe-area-inset-right)); } } /* Header & nav */ .cs-header{ position:sticky; top:calc(env(safe-area-inset-top, 0px) + 6px); z-index:10050; display:grid; grid-template-columns: 1fr auto; align-items:center; gap:.75rem; width:min(calc(100% - (var(--page-gutter) * 2)), var(--content-max)); margin:0 auto .5rem; padding:.65rem .85rem; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.18)); border:1px solid #ffffff1c; border-radius:14px; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); box-shadow: 0 6px 22px #00000033, 0 0 18px #ff00cc22 inset; } .cs-actions{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; width:100%; } .cs-title{ margin:0; text-align:center; font-family:'Orbitron', sans-serif; letter-spacing:.04em; font-weight:700; font-size: clamp(1rem, 0.6rem + 2.5vw, 0.4rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:white; -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 8px #ff00cc55, 0 0 10px #00f0ff44; } #langSelector{ -webkit-appearance: menulist; appearance: menulist; background: rgba(255,255,255,.08); color:#fff; border:1px solid #ffffff26; border-radius:12px; padding:.5rem .7rem; line-height:1.2; font:inherit; min-width:150px; cursor:pointer; position:relative; z-index:10060; touch-action:manipulation; } #langSelector:focus-visible{ outline:2px solid var(--col2); outline-offset:2px; box-shadow:0 0 0 3px rgba(0,240,255,.18); } .cs-burger{ display:inline-flex; align-items:center; gap:.55rem; background: rgba(255,255,255,.05); border:1.5px solid #ffffff26; padding:.5rem .7rem; border-radius:12px; cursor:pointer; min-height:40px; transition: transform .15s ease, background .2s, border-color .2s; } .cs-burger:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); } .cs-burger:active{ transform: translateY(0); } .cs-burger:focus-visible{ outline:2px solid var(--col2); outline-offset:2px; box-shadow:0 0 0 3px rgba(0,240,255,.18); } .cs-burger-box{ width:22px; height:18px; position:relative; display:inline-block; } .cs-burger-inner, .cs-burger-inner::before, .cs-burger-inner::after{ position:absolute; left:0; width:22px; height:2px; background:#fff; border-radius:3px; content:""; transition: transform .2s ease, opacity .2s ease; } .cs-burger-inner{ top:8px; } .cs-burger-inner::before{ top:-7px; } .cs-burger-inner::after{ top:7px; } .cs-burger[aria-expanded="true"] .cs-burger-inner{ transform: rotate(45deg); } .cs-burger[aria-expanded="true"] .cs-burger-inner::before{ transform: translateY(7px) rotate(90deg); } .cs-burger[aria-expanded="true"] .cs-burger-inner::after{ transform: translateY(-7px) rotate(90deg); } .cs-burger-text{ font-size:.92rem; } @media (max-width:380px){ .cs-burger-text{ display:none; } .cs-header{ padding-inline:.6rem; } #langSelector{ min-width:120px; } } @media (max-width:480px){ .cs-actions{ grid-template-columns:minmax(52px,auto) 1fr minmax(48px,auto); gap:.32rem; } .cs-actions>*{ min-width:0; } .cs-title{ font-size: clamp(.78rem, 3.2vw, 1rem); justify-self:center; text-align:center; padding:0 4px; margin:0; letter-spacing:.005em; white-space:nowrap; max-width: 100%; overflow:visible; text-overflow:unset; } #langSelector{ min-width:unset!important; min-width:0!important; width:2.8rem; max-width:2.8rem; text-align:center; font-size:.95rem; -webkit-appearance:none!important; appearance:none!important; background-image:none!important; } .cs-burger{ gap:0; padding:.35rem .55rem; border-radius:10px; justify-content:center; } .cs-burger-box{ width:18px; height:14px; } .cs-burger-inner, .cs-burger-inner::before, .cs-burger-inner::after{ height:2px; } .cs-burger-inner{ top:6px; } .cs-burger-inner::before{ top:-6px; } .cs-burger-inner::after{ top:6px; } } .cs-nav{ position:fixed; inset:0 0 0 25%; background: linear-gradient(135deg,#1a1433 0%, #0f0c29 60%, #0b0820 100%); border-left:2px solid #ff00cc66; box-shadow:-12px 0 40px #0008, inset 0 0 40px #ff00cc22; transform: translateX(100%); transition: transform .28s ease; z-index:10001; color:#fff; display:flex; flex-direction:column; } @media (max-width:900px){ .cs-nav{ inset:0; } } .cs-nav[data-open="true"]{ transform: translateX(0); } .cs-nav[aria-hidden="true"]{ visibility:hidden; } .cs-nav[aria-hidden="false"]{ visibility:visible; } .cs-nav-scroll{ overflow-y:auto; padding:1.2rem 1.1rem 5rem; overscroll-behavior: contain; } .cs-block{ background: rgba(255,255,255,.04); border:1px solid #ffffff14; border-radius:14px; padding:1rem 1rem; margin:.8rem 0; box-shadow:0 0 22px #ff00cc22; } .cs-block h2{ font-size:var(--step-1); margin:.2rem 0 .6rem; color:var(--col2); } .cs-block p{ font-size:var(--step-0); line-height:1.6; } .cs-list{ margin:.4rem 0 0 1.2rem; padding:0; } .cs-list li{ margin:.28rem 0; } .cs-grid{ display:grid; grid-template-columns:1fr; gap:.45rem; margin:0; padding-left:1.1rem; } @media (min-width:700px){ .cs-grid{ grid-template-columns:1fr 1fr; } } .cs-steps{ margin:.4rem 0 0 1.2rem; } .cs-note{ opacity:.85; font-style:italic; margin-top:.5rem; } .cs-links{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:.6rem 0 0; padding:0; } .cs-links a{ color:#33eaff; text-decoration:none; font-weight:600; } .cs-links a:hover{ color:#ff6be6; } .cs-smallprint{ opacity:.75; font-size:.9em; text-align:center; } .cs-nav-close{ position:sticky; bottom:0; margin:.7rem auto 0; align-self:center; padding:.6rem 1rem; border-radius:12px; border:1.5px solid #ffffff2a; background:#00000055; color:#fff; cursor:pointer; } .cs-nav-close:hover{ background:#00000088; } .cs-overlay{ position:fixed; inset:0; background:#000a; z-index:10000; backdrop-filter: blur(2px); } .cs-nav-open .cs-header{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .cs-header{ transition: opacity .18s ease, transform .18s ease; } html.is-loading, body.is-loading{ height:100%; overflow:hidden; } html.is-loading, body.is-loading{ padding-inline-end: var(--loader-lock-padding, 0px); } /* === Mobile tweak: burger-only (hide label) === */ @media (max-width: 700px){ .cs-burger-text{ display:none !important; } } /* Mobile : décale légèrement le burger vers la droite */ @media (max-width: 700px) { .cs-header{ padding:.6rem .7rem; gap:.45rem; } .cs-actions{ grid-template-columns: minmax(48px,auto) 1fr minmax(52px,auto); gap:.35rem; } .cs-title{ max-width: 100%; padding: 0 6px 0 2px; font-size: clamp(.8rem, 3.2vw, 1.05rem); letter-spacing:.02em; white-space:nowrap; overflow:visible; text-overflow:unset; } #csBurger { justify-self: end; /* reste bien à droite dans la grille */ margin-inline-end: -15px; /* place le bouton sans le coller au bord */ justify-content: center; /* icône centré dans le bouton */ gap:0; padding: .35rem .55rem; min-width:46px; /* largeur fixe pour centrer l’icône */ } #csBurger .cs-burger-box{ margin:0 auto; width:20px; height:16px; } } /* Option mini-écrans : décale un peu plus si tu veux */ @media (max-width: 380px) { #csBurger { margin-inline-end: 6px; } } /* Mobile & touch: place download bar BELOW presets (static) */ @media (max-width:1024px), (hover:none) and (pointer:coarse){ #download{ position: static !important; left:auto; transform:none; bottom:auto; z-index:auto; padding:0; background: transparent; border:none; border-radius:0; box-shadow:none; width:100%; margin: 1rem auto 0 auto; } body{ padding-block-end: 0; } } /* ============================================= ConvertiSlowed – Refresh UI 2025 (Overrides) - Respecte le fond synthwave et la police Orbitron - Aère l'interface, symétrise, modernise - Responsiveness + accessibilité renforcées ============================================= */ :root{ /* Nouvelles variables de profondeur/contours */ --surface: rgba(20,16,36,.55); --surface-strong: rgba(16,12,28,.72); --stroke: #ffffff20; --stroke-strong: #ffffff2e; --shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 24px #ff00cc22 inset; --ring: 0 0 0 2px rgba(0,240,255,.24); --radius-2xl: 22px; } /* Lien d'accès direct au contenu */ .skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ left:50%; top:.75rem; transform:translateX(-50%); width:auto; height:auto; padding:.6rem .9rem; border-radius:12px; background:#000; color:#fff; z-index:20001; box-shadow:0 6px 22px #0008; } /* Header : micro-ajustements d'alignement & souffle */ .cs-header{ border-radius:16px; gap:.9rem; } .cs-title{ letter-spacing:.06em; } #langSelector,.cs-burger{ border-radius:12px; border:1px solid var(--stroke); background: rgba(255,255,255,.06); } /* Carte principale plus chic & aérée */ .container{ background: var(--surface); border:1px solid var(--stroke); box-shadow: var(--shadow); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border-radius: var(--radius-xl); container-type:inline-size; } .container > * + *{ margin-top: var(--space-4); } /* Boutons mode : grille symétrique et confort tactile */ .mode-toggle{ display:grid; grid-template-columns: repeat(2,minmax(140px,1fr)); gap: var(--space-2); } .mode-toggle button{ border:1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-radius:14px; box-shadow: 0 2px 14px #0006; } /* Ensure mode buttons fill grid columns & touch container edges */ .mode-toggle{ grid-template-columns: 1fr 1fr; justify-items: stretch; } .mode-toggle button{ width: 100%; max-width: none; justify-self: stretch; } /* Waveform & visualizer : bords nets, hauteur adaptative */ .waveform{ border:1.5px solid var(--stroke-strong); box-shadow: 0 0 18px #0006 inset, 0 0 10px #ff00cc22; border-radius:14px; height: clamp(56px, 10vw, 100px); } #visualizer{ border:1px solid var(--stroke); box-shadow: inset 0 0 18px #0008; } /* Range sliders 2025 : track plus épais, thumb net, focus visible */ input[type="range"]{ height:16px; border-radius:999px; background: linear-gradient(90deg, #ffffff12, #ffffff08); border:1px solid #ffffff22; box-shadow: inset 0 0 10px #0006; } input[type="range"]::-webkit-slider-thumb{ border:2px solid #fff; box-shadow: 0 0 10px #ff00cc99, 0 0 6px #00f0ff88; } input[type="range"]:focus-visible{ outline:none; box-shadow: 0 0 0 3px #00f0ff55; } label{ font-weight:600; opacity:.95; } /* Bouton Play/Pause principal */ #mainToggleBtn{ border:1px solid var(--stroke); border-radius:14px; box-shadow: 0 4px 16px #0008; } #mainToggleBtn.playing{ background:linear-gradient(90deg, var(--col2), #a8ffff); } /* Presets : rangée scrollable sur mobile, panneau fixe raffiné sur desktop */ .preset-panel{ gap:.6rem; background: transparent; border:none; box-shadow:none; padding: .5rem var(--page-gutter) 0; overflow:auto; scroll-snap-type:x mandatory; } .preset-panel h3{ color:var(--col2); text-shadow:none; } .preset-panel .preset-btn{ scroll-snap-align:center; border:1px solid var(--stroke); border-radius:12px; min-width:160px; } @media (min-width:1024px){ .preset-panel{ position:fixed; right:2.2rem; top:50%; transform: translateY(-50%); width:190px; background: var(--surface-strong); border:1px solid var(--stroke-strong); box-shadow: var(--shadow); border-radius: var(--radius-2xl); padding:1.1rem; } } /* Zone de téléchargement : dock flottant mobile + menu plus net */ #download{ width:100%; max-width:var(--content-max); } .download-menu{ gap:.5rem; } #downloadMainBtn{ border:1px solid var(--stroke-strong); border-radius:14px; box-shadow: 0 8px 26px #ff00cc55, 0 4px 16px #0008; } #downloadFormatBtn{ border:1px solid var(--stroke); border-radius:12px; box-shadow:0 2px 12px #0006; } #downloadDropdown{ border:1px solid var(--stroke-strong); background: rgba(24,18,40,.98); box-shadow: 0 18px 38px #000c, 0 0 22px #00f0ff33; border-radius:14px; z-index:20050; } @media (max-width:700px){ #download{ position: static !important; left:auto; transform:none; bottom:auto; z-index:auto; padding:0; background:transparent; border:none; border-radius:0; box-shadow:none; width:100%; margin: 1rem auto 0 auto; } body{ padding-block-end: 0; } .download-menu{ position:relative; z-index:30000; } #downloadDropdown{ position: fixed; left: clamp(10px, 6vw, 32px); right: clamp(10px, 6vw, 32px); top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); max-width: 520px; margin-inline:auto; z-index: 50000; } } /* Intro texte : plus lisible et aéré */ #introText{ background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.06)); border:1px solid var(--stroke); border-radius:16px; padding:1rem 1.25rem; box-shadow: 0 6px 22px #0006, 0 0 18px #ff00cc22 inset; } /* Footer : lisible, respirant, plus équilibré */ footer{ border-top:1px solid var(--stroke); box-shadow: 0 -2px 30px #191a2f88; } footer a{ padding:.08rem .35rem; } /* Off-canvas : contraste + lisibilité */ .cs-nav{ border-left:1px solid var(--stroke-strong); background: linear-gradient(135deg,#181133 0%, #0f0c29 60%, #0b0820 100%); } .cs-block{ background: rgba(255,255,255,.05); border:1px solid var(--stroke); } /* Loader : micro-ajustements responsive */ @media (max-width:600px){ #loaderOverlay .loader-chip{ font-size:.7rem; } #loaderOverlay .loader-meter-meta{ font-size:.9rem; } } /* Accessibilité & focus visibles uniformes */ :where(button, [role="button"], a, select, input):focus-visible{ outline:2px solid var(--col2); outline-offset:2px; box-shadow: var(--ring); } /* Micro-typography */ body{ letter-spacing:.01em; } /* Conteneur large : augmente la lisibilité au-delà de 1440px */ @media (min-width:1600px){ :root{ --content-max: 1000px; } } /* Sections éditoriales principales */ .content-section{ width:100%; max-width:var(--content-max); margin:2.5rem auto 0 auto; padding:1.4rem 1.3rem 1.5rem; background: var(--surface); border:1px solid var(--stroke); border-radius:16px; box-shadow: var(--shadow); backdrop-filter: blur(7px) saturate(120%); -webkit-backdrop-filter: blur(7px) saturate(120%); font-size:var(--step-0); line-height:1.7; } .content-section h2{ margin:0 0 .75rem 0; font-size:var(--step-1); color:var(--col2); letter-spacing:.03em; } .content-section h3{ margin:1.1rem 0 .45rem 0; font-size:var(--step-0); color:#ffffffdd; } .content-section p{ margin:.25rem 0 .7rem 0; } .content-section ul, .content-section ol{ margin:.25rem 0 .8rem 1.4rem; padding:0; } .content-section, footer{ position: relative; z-index: 1; } .content-section li{ margin:.18rem 0; } .content-section strong{ color:#ffffff; } .content-section a{ color:#33eaff; text-decoration:none; font-weight:600; } .content-section a:hover{ color:#ff6be6; } /* Sur mobile, garde la même largeur que la carte principale */ @media (max-width:700px){ .content-section{ padding:1.2rem 1.1rem 1.35rem; margin-top:2rem; } } /* Spacing tweaks: URL input ↔ Convert button; Slider ↔ Play/Pause */ #youtube-mode input#url{ margin-bottom: var(--space-3); } #progressSlider{ margin-block-end: var(--space-3); } /* Force block flow + spacing between URL input and Convert button */ #youtube-mode input#url{ display:block; margin: 0 0 var(--space-4) 0; } #youtube-mode #convertBtn{ display:block; margin-top: var(--space-4); } /* ============================================================= ConvertiSlowed — Buttons Refresh 2025 - Uniformise tous les boutons (presets, lire, télécharger, bg play, menu) - Esthétique glass/neon, micro-interactions, focus ring accessible - S'appuie sur les variables existantes (col1/col2, stroke, etc.) ============================================================= */ :root{ --btn-h: 48px; --btn-radius: 14px; --btn-radius-lg: 16px; --btn-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 22px #ff00cc26 inset; --btn-glow: 0 0 16px #ff00cc55, 0 0 12px #00f0ff44; --btn-sheen: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.45) 32%, rgba(255,255,255,.9) 36%, rgba(255,255,255,.45) 40%, rgba(255,255,255,0) 52%, transparent 65%); --btn-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); --btn-grad: linear-gradient(90deg, var(--col1) 0%, var(--col2) 100%); } /* Base commune : tous les