/* Compress-Image.net — Modern V2 UI layer Loaded after legacy todos-css.css so the application logic can remain untouched. */ :root{--ci-blue:#2563eb;--ci-blue2:#3b82f6;--ci-cyan:#06b6d4;--ci-ink:#0f172a;--ci-muted:#64748b;--ci-line:#dbe7f3;--ci-soft:#f6faff;--ci-card:#fff;--ci-green:#10b981;--ci-shadow:0 18px 55px rgba(30,64,175,.10);--ci-radius:22px} *{box-sizing:border-box}html{scroll-behavior:smooth}body.adaptetoi{margin:0;background:#fff;color:var(--ci-ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{transition:color .2s,background .2s,border-color .2s,transform .2s,box-shadow .2s}.container{width:min(1180px,calc(100% - 40px));max-width:1180px} /* Header */ #fh5co-header-section{position:relative;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid #e9f0f7;box-shadow:0 4px 20px rgba(15,23,42,.035);min-height:72px}#fh5co-header-section .container{display:flex;align-items:center;min-height:72px;gap:28px}#fh5co-logo{margin:0!important;float:none!important;white-space:nowrap}#fh5co-logo a.linkyte{font-size:20px!important;line-height:1;font-weight:800!important;letter-spacing:-.6px;color:var(--ci-ink)!important;text-decoration:none}#fh5co-logo a.linkyte span{color:var(--ci-blue)!important}#fh5co-menu-wrap{visibility:visible!important;margin-left:auto}#fh5co-primary-menu{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}#fh5co-primary-menu>li{float:none!important;margin:0!important}#fh5co-primary-menu>li>a{display:flex!important;align-items:center;min-height:42px;padding:10px 13px!important;border-radius:10px;color:#334155!important;font-size:14px!important;font-weight:700!important;text-decoration:none}#fh5co-primary-menu>li>a:hover,#fh5co-primary-menu>li.active>a{background:#eff6ff!important;color:var(--ci-blue)!important}.fh5co-special>a{background:var(--ci-blue)!important;color:#fff!important;padding:10px 18px!important;box-shadow:0 7px 18px rgba(37,99,235,.22)}.fh5co-special>a:hover{background:#1d4ed8!important;color:#fff!important;transform:translateY(-1px)}.fh5co-special2{display:none!important}.fh5co-special3>a{border:1px solid var(--ci-line)}.fh5co-sub-menu{border:1px solid var(--ci-line)!important;border-radius:14px!important;box-shadow:0 18px 50px rgba(15,23,42,.12)!important;overflow:hidden;background:#fff!important}.fh5co-sub-menu a{color:#334155!important;background:#fff!important}.fh5co-sub-menu a:hover{background:#eff6ff!important;color:var(--ci-blue)!important} /* Hero */ #fh5co-hero{position:relative!important;height:auto!important;min-height:0!important;padding:76px 0 42px!important;background:radial-gradient(circle at 16% 15%,rgba(56,189,248,.13),transparent 31%),radial-gradient(circle at 84% 10%,rgba(99,102,241,.10),transparent 29%),linear-gradient(180deg,#f8fbff 0%,#fff 100%)!important;overflow:hidden}#fh5co-hero:after{content:"";position:absolute;inset:auto -10% -180px;width:120%;height:250px;background:radial-gradient(ellipse,rgba(37,99,235,.06),transparent 67%);pointer-events:none}#fh5co-hero .container{position:relative;z-index:2}#fh5co-hero .col-md-8{width:100%!important;margin-left:0!important;float:none!important}.fh5co-hero-wrap{display:block!important;height:auto!important;min-height:0!important}.fh5co-hero-intro{display:block!important;text-align:center!important;max-width:860px;margin:0 auto}.fh5co-hero-intro #notreiconak{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;margin:0 auto 18px!important;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(37,99,235,.12);color:var(--ci-blue)}.fh5co-hero-intro #notreiconak svg{width:32px!important;height:32px!important;fill:currentColor}.fh5co-hero-intro h1{margin:0 auto 14px!important;max-width:900px;color:var(--ci-ink)!important;font-size:clamp(36px,5vw,62px)!important;line-height:1.05!important;font-weight:800!important;letter-spacing:-2px!important;text-shadow:none!important}.fh5co-hero-intro h2{max-width:760px;margin:0 auto!important;color:var(--ci-muted)!important;font-size:clamp(17px,2vw,21px)!important;line-height:1.6!important;font-weight:400!important;text-shadow:none!important}#thebuttoncprss{max-width:780px;margin:32px auto 0!important;padding:28px!important;border:2px dashed #a8c8f7;border-radius:24px;background:rgba(255,255,255,.9);box-shadow:var(--ci-shadow);position:relative}#thebuttoncprss:before{content:"↓";display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:#eff6ff;color:var(--ci-blue);font-size:26px;font-weight:800}#thebuttoncprss .btn{margin:0!important;padding:14px 26px!important;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,var(--ci-blue),var(--ci-blue2))!important;color:#fff!important;font-size:16px!important;font-weight:800!important;box-shadow:0 10px 25px rgba(37,99,235,.25)!important;text-transform:none!important}#thebuttoncprss .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,99,235,.30)!important}#adsencen1{position:static!important;display:flex;justify-content:center;margin:24px auto 0!important;float:none!important}.buymecoffe{border-radius:10px!important} /* Main cards */ #fh5co-main{background:#fff!important;padding-top:22px!important}#fh5co-main>.container{padding-top:0!important}#fh5co-features{display:flex;flex-wrap:wrap;align-items:stretch;margin-left:-10px!important;margin-right:-10px!important}.fh5co-feature.feature-box{float:none!important;width:calc(33.333% - 20px)!important;margin:10px!important;padding:26px 22px!important;border:1px solid #e5edf6!important;border-radius:18px!important;background:var(--ci-card)!important;box-shadow:0 7px 25px rgba(15,23,42,.045)!important;transition:transform .2s,box-shadow .2s,border-color .2s}.fh5co-feature.feature-box:hover{transform:translateY(-4px);border-color:#bfdbfe!important;box-shadow:0 16px 38px rgba(37,99,235,.10)!important}.fh5co-feature-icon{display:flex!important;align-items:center;justify-content:center;width:58px!important;height:58px!important;margin:0 auto 18px!important;border-radius:16px;background:#eff6ff!important;color:var(--ci-blue)!important}.fh5co-feature-icon svg,.fh5co-feature-icon .iconok{width:30px!important;height:30px!important;max-width:30px!important;fill:currentColor!important}.fh5co-feature .heading{margin:0 0 9px!important;color:var(--ci-ink)!important;font-size:19px!important;font-weight:800!important}.fh5co-feature .decricri{min-height:48px;color:var(--ci-muted)!important;font-size:14px!important;line-height:1.6!important}.fh5co-feature .btn{border:0!important;background:#eff6ff!important;color:var(--ci-blue)!important;border-radius:10px!important;font-weight:800!important;font-size:13px!important;padding:9px 14px!important;text-transform:none!important}.fh5co-feature .btn:hover{background:var(--ci-blue)!important;color:#fff!important}#golobish{width:100%;text-align:center;margin:16px 0}#golobish button{border:0;background:transparent} /* SEO/editorial sections */ #fh5co-works,.specialiter[id^="fh5co-works"],#fh5co-works1,#fh5co-works2,#fh5co-works3,#fh5co-works4{max-width:960px;margin:36px auto!important;padding:34px!important;border:1px solid #e7eef6;border-radius:20px;background:#fff;box-shadow:0 8px 28px rgba(15,23,42,.04)}#fh5co-works h2,#fh5co-works h3,.specialiter[id^="fh5co-works"] h2,.specialiter[id^="fh5co-works"] h3{color:var(--ci-ink);font-weight:800;letter-spacing:-.3px}#fh5co-works p,#fh5co-works li,.specialiter[id^="fh5co-works"] p,.specialiter[id^="fh5co-works"] li{color:#475569;line-height:1.75} /* Compressor application */ body.specialiter #fh5co-hero{padding-bottom:34px!important}body.specialiter #fh5co-hero .fh5co-hero-intro h1{font-size:clamp(34px,4.5vw,54px)!important}body.specialiter #fh5co-main{padding-top:30px!important}body.specialiter #fh5co-features{display:block!important;max-width:980px;margin:0 auto!important;padding:28px!important;border:1px solid #dfe9f5;border-radius:24px;background:#fff;box-shadow:var(--ci-shadow)}#preformpara{color:var(--ci-muted);text-align:center;margin-bottom:20px}#blockdebtn,#blockdecompression{display:flex!important;flex-wrap:wrap;align-items:end;gap:12px!important;padding:14px!important;margin:0 0 14px!important;border:1px solid #e5edf6;border-radius:15px;background:#f8fbff}#blockdebtn button,#blockdecompression button,.downlimagall{min-height:44px!important;border:0!important;border-radius:11px!important;padding:10px 16px!important;font-weight:800!important;box-shadow:none!important}.alddfiles,#btn-refresh,.downlimagall{background:var(--ci-blue)!important;color:#fff!important}.remove-allfiles{background:#fff!important;color:#ef4444!important;border:1px solid #fecaca!important}button:disabled{opacity:.45!important;cursor:not-allowed!important}#englobblockcompress,#englobblockcompress1{display:flex;flex-direction:column;gap:6px;min-width:190px}#blockdecompression label{color:#334155;font-size:12px;font-weight:800}#blockdecompression select,#blockdecompression input{height:44px!important;border:1px solid #cbd5e1!important;border-radius:10px!important;background:#fff!important;color:#0f172a!important;padding:0 12px!important;outline:none!important}.dropzone#myGreatDropzone{min-height:260px!important;margin:18px 0!important;border:2px dashed #9fc2f5!important;border-radius:20px!important;background:linear-gradient(180deg,#fbfdff,#f5f9ff)!important;box-shadow:none!important;display:flex!important;align-items:center;justify-content:center;flex-wrap:wrap;padding:24px!important;transition:border-color .2s,background .2s}.dropzone#myGreatDropzone:hover{border-color:var(--ci-blue)!important;background:#f0f7ff!important}.dropzone#myGreatDropzone:empty:before,.dropzone#myGreatDropzone #ecranchage:empty:before{content:"＋";display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--ci-blue);box-shadow:0 8px 24px rgba(37,99,235,.14);font-size:34px}.dz-message{color:#475569!important;font-weight:700!important}.dz-preview{border-radius:14px!important;background:#fff!important;box-shadow:0 8px 25px rgba(15,23,42,.08)!important}.downlimagall{display:block!important;margin:14px auto 0!important;padding:13px 22px!important} /* Reserved ad layout classes: add real ad unit markup only when configured */ .ci-ad-slot{box-sizing:border-box;width:100%;min-height:100px;margin:34px auto;contain:layout paint;border:0;border-radius:14px;background:#eef1f4}.ci-ad-slot--leaderboard{max-width:970px;min-height:110px}.ci-ad-slot--incontent{max-width:760px;min-height:250px}.ci-ad-slot--rectangle{max-width:336px;min-height:280px} /* Footer */ #fh5co-footer{margin-top:60px!important;padding:52px 0 20px!important;background:#0b1220!important;color:#94a3b8!important}#fh5co-footer .fh5co-footer-heading{color:#fff!important;font-weight:800!important}#fh5co-footer a,#fh5co-footer button{color:#cbd5e1!important}#fh5co-footer a:hover,#fh5co-footer button:hover{color:#fff!important}.fh5co-social-icons a{background:rgba(255,255,255,.08)!important;border-radius:10px!important} /* Accessibility & motion */ a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid rgba(37,99,235,.32)!important;outline-offset:3px!important}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* Tablet */ @media(max-width:991px){.container{width:min(100% - 28px,900px)}#fh5co-header-section .container{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}#fh5co-menu-wrap{width:100%;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch}#fh5co-primary-menu{width:max-content;min-width:100%;justify-content:center}#fh5co-primary-menu .fh5co-sub-menu{display:none!important}.fh5co-feature.feature-box{width:calc(50% - 20px)!important}#fh5co-hero{padding-top:58px!important}.fh5co-hero-intro h1{letter-spacing:-1.3px!important}body.specialiter #fh5co-features{padding:20px!important}} /* Mobile */ @media(max-width:640px){.container{width:calc(100% - 22px)}#fh5co-header-section{min-height:62px}#fh5co-header-section .container{min-height:62px;gap:8px}#fh5co-logo{width:100%;text-align:center}#fh5co-logo a.linkyte{font-size:18px!important}#fh5co-menu-wrap{margin-top:3px}#fh5co-primary-menu{justify-content:flex-start;gap:2px}#fh5co-primary-menu>li>a{min-height:38px;padding:8px 10px!important;font-size:12px!important}.fh5co-special3{display:none!important}#fh5co-hero{padding:44px 0 28px!important}.fh5co-hero-intro #notreiconak{width:52px;height:52px;border-radius:15px}.fh5co-hero-intro h1{font-size:34px!important;letter-spacing:-1px!important}.fh5co-hero-intro h2{font-size:16px!important;line-height:1.55!important}#thebuttoncprss{margin-top:24px!important;padding:20px 14px!important;border-radius:18px}#thebuttoncprss .btn{width:100%;font-size:15px!important}.fh5co-feature.feature-box{width:calc(100% - 12px)!important;margin:6px!important;padding:22px 18px!important}.fh5co-feature .decricri{min-height:0}#fh5co-works,.specialiter[id^="fh5co-works"],#fh5co-works1,#fh5co-works2,#fh5co-works3,#fh5co-works4{padding:22px 18px!important;margin:22px 0!important;border-radius:16px}body.specialiter #fh5co-features{padding:14px!important;border-radius:18px}#blockdebtn,#blockdecompression{padding:10px!important;gap:8px!important}#blockdebtn button,#blockdecompression button{width:100%!important}#englobblockcompress,#englobblockcompress1{width:100%;min-width:0}#blockdecompression select,#blockdecompression input{width:100%!important}.dropzone#myGreatDropzone{min-height:220px!important;padding:14px!important}.ci-ad-slot--leaderboard{min-height:100px}#fh5co-footer{margin-top:36px!important;padding-top:38px!important}} @media(max-width:991px){.ci-ad-slot{margin:28px auto}.ci-ad-slot--leaderboard{max-width:728px;min-height:110px}.ci-ad-slot--incontent{max-width:100%;min-height:250px}} @media(max-width:640px){.ci-ad-slot{margin:24px auto;border-radius:12px}.ci-ad-slot--leaderboard{min-height:100px}.ci-ad-slot--incontent{min-height:250px}} @media(min-width:1440px){body{overflow-x:hidden}.container{max-width:1180px}.fh5co-hero-intro h1{max-width:1000px}body.specialiter #fh5co-features{max-width:1080px}} /* V2.1 — format pages aligned with the approved “Après” visual */ body.specialiter #fh5co-hero{padding:44px 0 54px!important;background:radial-gradient(circle at 8% 24%,rgba(56,189,248,.16),transparent 25%),radial-gradient(circle at 91% 18%,rgba(99,102,241,.12),transparent 27%),linear-gradient(180deg,#f7fbff 0%,#fff 100%)!important} body.specialiter #fh5co-hero .container{max-width:1180px} body.specialiter .fh5co-hero-intro{max-width:920px} .ci-hero-eyebrow{display:inline-flex!important;align-items:center;justify-content:center;margin:0 auto 18px!important;padding:7px 14px;border-radius:999px;background:#eaf4ff;color:#2563eb!important;font-size:12px!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important} body.specialiter .fh5co-hero-intro #notreiconak{width:54px;height:54px;margin-bottom:14px!important;border:1px solid #d9e9fb;border-radius:15px} body.specialiter #fh5co-hero .fh5co-hero-intro h1{font-size:clamp(38px,4.8vw,60px)!important;line-height:1.04!important;letter-spacing:-2px!important} body.specialiter #fh5co-hero .fh5co-hero-intro h2{max-width:800px!important;font-size:18px!important;line-height:1.55!important;letter-spacing:0!important;text-transform:none!important} body.specialiter #adsencen1{display:none!important} #ci-compressor-mount{max-width:980px;margin:30px auto 0} #ci-compressor-mount #fh5co-features{visibility:visible!important;display:flex!important;flex-direction:column!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} body.specialiter #fh5co-main #fh5co-features:not(.ci-mounted){visibility:hidden} #ci-compressor-mount #preformpara{display:none!important} #ci-compressor-mount #myGreatDropzone{order:1;position:relative;min-height:300px!important;margin:0!important;padding:30px!important;border:2px dashed #72b3ff!important;border-radius:22px!important;background:rgba(255,255,255,.86)!important;box-shadow:0 18px 55px rgba(30,64,175,.09)!important;cursor:pointer;overflow:hidden} #ci-compressor-mount #myGreatDropzone:hover{border-color:#1685ff!important;background:#fff!important} #ci-compressor-mount #myGreatDropzone:empty:before,#ci-compressor-mount #myGreatDropzone #ecranchage:empty:before{display:none!important;content:none!important} .ci-dropzone-copy{width:100%;min-height:235px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;color:#64748b;pointer-events:none} .ci-dropzone-copy .ci-upload-cloud{display:flex;align-items:center;justify-content:center;width:64px;height:54px;margin-bottom:4px;color:#1685ff;font-size:54px;line-height:1;filter:drop-shadow(0 7px 10px rgba(37,99,235,.18))} .ci-dropzone-copy strong{color:#0f172a;font-size:21px;line-height:1.2;font-weight:850} .ci-dropzone-copy>span:not(.ci-upload-cloud):not(.ci-upload-cta){font-size:14px} .ci-dropzone-copy .ci-upload-cta{display:inline-flex;margin-top:12px;padding:13px 28px;border-radius:11px;background:linear-gradient(135deg,#1677ff,#0797f6);color:#fff;font-size:15px;font-weight:800;box-shadow:0 10px 24px rgba(22,119,255,.24)} .ci-dropzone-copy small{margin-top:6px;color:#64748b;font-size:11px;font-weight:700} #ci-compressor-mount .dz-preview~.ci-dropzone-copy,#ci-compressor-mount #myGreatDropzone.dz-started .ci-dropzone-copy{display:none} #ci-compressor-mount .ci-trust-strip{order:2;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 0;padding:0 10px} #ci-compressor-mount .ci-trust-strip span{display:flex;align-items:center;justify-content:center;min-height:44px;color:#475569;font-size:12px;font-weight:750;text-align:center} #ci-compressor-mount .ci-trust-strip span::first-letter{color:#1685ff} #ci-compressor-mount #blockdebtn{order:3;margin:14px 0 0!important} #ci-compressor-mount #blockdecompression{order:4;margin:0!important} #ci-compressor-mount .clear{order:5;margin:0!important;height:0!important} #ci-compressor-mount #download-all{order:6} body.specialiter #fh5co-main{padding-top:24px!important} body.specialiter #fh5co-main>.container:first-child{padding-top:0!important} body.specialiter #fh5co-main .fh5co-spacer-md:first-of-type{height:16px!important} body.specialiter .ci-ad-slot--leaderboard{margin:28px auto!important;min-height:90px!important;background:#f1f4f7!important} @media(max-width:640px){body.specialiter #fh5co-hero{padding:28px 0 36px!important}.ci-hero-eyebrow{font-size:10px!important;padding:6px 10px}.ci-dropzone-copy{min-height:200px}.ci-dropzone-copy strong{font-size:18px}#ci-compressor-mount #myGreatDropzone{min-height:240px!important;padding:18px!important}.ci-dropzone-copy .ci-upload-cta{width:100%;justify-content:center;padding:13px 18px}#ci-compressor-mount .ci-trust-strip{grid-template-columns:1fr;gap:2px;margin-top:10px}#ci-compressor-mount .ci-trust-strip span{min-height:30px}body.specialiter #fh5co-hero .fh5co-hero-intro h1{font-size:34px!important;letter-spacing:-1px!important}} #fh5co-logo a.linkyte{text-transform:lowercase!important;display:flex!important;align-items:center;gap:0} #fh5co-logo a.linkyte:before{content:"▣";display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#1677ff,#08a6f6);color:#fff;font-size:15px;box-shadow:0 6px 16px rgba(22,119,255,.22)} /* V2.2 — faithful implementation of the approved “Après” reference */ body.specialiter #fh5co-header-section{height:72px;min-height:72px;background:#fff!important;box-shadow:0 1px 0 #e8eef7!important} body.specialiter #fh5co-hero{padding:34px 0 28px!important;background:radial-gradient(circle at 4% 40%,rgba(50,150,255,.11),transparent 20%),radial-gradient(circle at 96% 26%,rgba(57,231,188,.10),transparent 19%),linear-gradient(180deg,#f8fcff 0%,#fff 100%)!important} body.specialiter #fh5co-hero .container{width:min(1120px,calc(100% - 36px));max-width:1120px} body.specialiter .fh5co-hero-intro{max-width:1000px!important} body.specialiter .fh5co-hero-intro #notreiconak{display:none!important} body.specialiter .ci-hero-eyebrow{margin-bottom:14px!important;background:#e3f2ff!important;color:#1677d9!important;padding:6px 16px!important;font-size:11px!important} body.specialiter #fh5co-hero .fh5co-hero-intro h1{max-width:820px!important;font-size:clamp(40px,4.4vw,58px)!important;line-height:1.02!important;font-weight:900!important;letter-spacing:-2.4px!important;color:#081b4b!important} body.specialiter #fh5co-hero .fh5co-hero-intro h2{max-width:760px!important;margin-top:14px!important;font-size:17px!important;line-height:1.45!important;color:#43536f!important} .ci-float{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:11px;color:#fff;font-size:20px;font-weight:900;transform:rotate(9deg);opacity:.55;box-shadow:0 12px 25px rgba(15,23,42,.08);pointer-events:none}.ci-float-jpg{left:20px;top:58px;background:#8fdcff}.ci-float-png{left:12px;top:205px;background:#ffd39d;transform:rotate(-12deg)}.ci-float-webp{right:16px;top:62px;background:#9ef0d6;transform:rotate(-10deg)}.ci-float-pdf{right:5px;top:200px;background:#ff9caf;transform:rotate(13deg)} #ci-compressor-mount{max-width:1040px!important;margin:24px auto 0!important} #ci-compressor-mount #myGreatDropzone{min-height:278px!important;padding:22px!important;border:2px dashed #62adff!important;border-radius:18px!important;background:rgba(255,255,255,.72)!important;box-shadow:none!important} .ci-dropzone-copy{min-height:230px!important}.ci-dropzone-copy .ci-upload-cloud{width:72px!important;height:58px!important;font-size:62px!important;color:#1687f8!important}.ci-dropzone-copy strong{font-size:20px!important;color:#0b1d4b!important}.ci-dropzone-copy .ci-upload-cta{min-width:310px;justify-content:center;margin-top:10px!important;padding:14px 28px!important;background:linear-gradient(90deg,#0875f9,#079af4)!important;border-radius:10px!important}.ci-dropzone-copy small{font-size:11px!important} #ci-compressor-mount .ci-trust-strip{grid-template-columns:repeat(4,1fr)!important;margin:15px 0 0!important;padding:0!important;gap:0!important;border-top:1px solid #edf3fa} #ci-compressor-mount .ci-trust-strip span{justify-content:flex-start!important;gap:10px;min-height:66px!important;padding:10px 18px!important;border-right:1px solid #e9eff7;text-align:left!important}#ci-compressor-mount .ci-trust-strip span:last-child{border-right:0}#ci-compressor-mount .ci-trust-strip b{display:flex;width:32px;height:32px;align-items:center;justify-content:center;flex:0 0 32px;border-radius:50%;background:#dff2ff;color:#1687f8;font-style:normal}#ci-compressor-mount .ci-trust-strip i{display:flex;flex-direction:column;color:#10234e;font-size:11px;font-style:normal;font-weight:800}#ci-compressor-mount .ci-trust-strip small{margin-top:2px;color:#71809b;font-size:9px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px} #ci-compressor-mount #blockdebtn,#ci-compressor-mount #blockdecompression{border-radius:12px!important} body.specialiter #fh5co-main{padding-top:0!important}.ci-ad-slot--leaderboard{max-width:970px!important;min-height:90px!important;margin:28px auto!important;background:#f4f6f8!important} .ci-tools-section{max-width:1040px;margin:32px auto 12px;padding:0}.ci-tools-section>h2{margin:0 0 4px;color:#081b4b;font-size:28px;font-weight:900;letter-spacing:-.7px}.ci-tools-section>p{margin:0 0 22px;color:#6780a2;font-size:14px}.ci-tools-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.ci-tool-card{position:relative;display:grid;grid-template-columns:36px 1fr 18px;grid-template-rows:auto auto;gap:1px 9px;align-items:center;min-height:82px;padding:13px;border:1px solid #dce9f6;border-radius:13px;background:#fff;color:#0d204b;text-decoration:none!important;box-shadow:0 4px 15px rgba(31,74,125,.035)}.ci-tool-card:hover{transform:translateY(-2px);border-color:#9ecfff;box-shadow:0 10px 24px rgba(31,100,190,.09)}.ci-tool-icon{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:#1687f8;color:#fff;font-size:8px;font-weight:900}.ci-tool-card:nth-child(4n+2) .ci-tool-icon{background:#35b8f4}.ci-tool-card:nth-child(4n+3) .ci-tool-icon{background:#43cfa9}.ci-tool-card:nth-child(4n+4) .ci-tool-icon{background:#9a55ef}.ci-tool-card strong{font-size:12px;line-height:1.1}.ci-tool-card small{color:#6f809d;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ci-tool-card em{grid-column:3;grid-row:1/3;font-size:17px;font-style:normal;color:#294d7b}.ci-multi-cta{display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:18px;margin-top:18px;padding:17px 24px;border-radius:13px;background:linear-gradient(100deg,#eaf6ff,#ddecff);color:#0c2455}.ci-stack-icon{display:flex;align-items:center;justify-content:center;width:64px;height:54px;border:4px solid #fff;border-radius:12px;background:#8acbff;color:#fff;font-size:38px;transform:rotate(-8deg);box-shadow:0 8px 18px rgba(37,99,235,.14)}.ci-multi-cta div{display:flex;flex-direction:column}.ci-multi-cta strong{font-size:13px}.ci-multi-cta small{margin-top:4px;color:#557092;font-size:10px}.ci-multi-cta a{padding:12px 22px;border-radius:10px;background:#fff;color:#0879ed;font-size:11px;font-weight:800;text-decoration:none!important;box-shadow:0 3px 10px rgba(30,64,175,.06)} @media(max-width:900px){.ci-tools-grid{grid-template-columns:repeat(3,1fr)}.ci-float{display:none}.ci-multi-cta{grid-template-columns:60px 1fr}.ci-multi-cta a{grid-column:1/-1;text-align:center}#ci-compressor-mount .ci-trust-strip{grid-template-columns:repeat(2,1fr)!important}#ci-compressor-mount .ci-trust-strip span:nth-child(2){border-right:0}} @media(max-width:640px){body.specialiter #fh5co-header-section{height:auto}.ci-tools-grid{grid-template-columns:repeat(2,1fr);gap:8px}.ci-tools-section>h2{font-size:24px}.ci-tool-card{grid-template-columns:32px 1fr 14px;padding:10px}.ci-tool-icon{width:30px;height:30px}.ci-multi-cta{grid-template-columns:1fr;text-align:center}.ci-stack-icon{margin:auto}.ci-dropzone-copy .ci-upload-cta{min-width:0;width:100%}#ci-compressor-mount .ci-trust-strip{grid-template-columns:1fr!important}#ci-compressor-mount .ci-trust-strip span{border-right:0;border-bottom:1px solid #e9eff7}body.specialiter #fh5co-hero .fh5co-hero-intro h1{font-size:36px!important}} /* ========================================================= V2.2 - FIX LISIBILITE MENUS DEROULANTS ========================================================= */ header .dropdown-menu, .navbar .dropdown-menu, .dropdown-menu { background: #ffffff !important; opacity: 1 !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16) !important; padding: 8px !important; min-width: 190px !important; z-index: 99999 !important; } header .dropdown-menu a, .navbar .dropdown-menu a, .dropdown-menu a, .dropdown-menu .dropdown-item { color: #172554 !important; opacity: 1 !important; text-shadow: none !important; background: transparent !important; font-weight: 500 !important; } header .dropdown-menu a:hover, header .dropdown-menu a:focus, .navbar .dropdown-menu a:hover, .navbar .dropdown-menu a:focus, .dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { color: #087cf0 !important; background: #eff6ff !important; border-radius: 7px !important; } header, .navbar, .dropdown, .nav-item { overflow: visible !important; } header, .navbar { position: relative !important; z-index: 10000 !important; } .dropdown-menu { position: absolute !important; } /* ========================================================= V2.2.1 - CORRECTIONS UI Menu + langues + Dropzone + panneau après upload ========================================================= */ /* ---------- 1. MENUS DEROULANTS ---------- */ /* Le conteneur du menu doit passer devant le hero */ header, nav, .fh5co-nav, #fh5co-header, #fh5co-header .container, #fh5co-header .row { position: relative; z-index: 10000; } /* Tous les sous-menus */ header ul ul, nav ul ul, .fh5co-nav ul ul, #fh5co-header ul ul, .dropdown-menu { background: #ffffff !important; opacity: 1 !important; z-index: 99999 !important; border: 1px solid #dbe7f5 !important; border-radius: 14px !important; box-shadow: 0 18px 45px rgba(16, 42, 82, .14) !important; } /* Texte des sous-menus */ header ul ul a, header ul ul a:link, header ul ul a:visited, nav ul ul a, nav ul ul a:link, nav ul ul a:visited, .fh5co-nav ul ul a, .fh5co-nav ul ul a:link, .fh5co-nav ul ul a:visited, #fh5co-header ul ul a, #fh5co-header ul ul a:link, #fh5co-header ul ul a:visited, .dropdown-menu a, .dropdown-menu a:link, .dropdown-menu a:visited { color: #14284b !important; opacity: 1 !important; text-shadow: none !important; } /* Hover */ header ul ul a:hover, nav ul ul a:hover, .fh5co-nav ul ul a:hover, #fh5co-header ul ul a:hover, .dropdown-menu a:hover { color: #087cf0 !important; background: #f1f7ff !important; } /* ---------- 2. SUPPRESSION DU DOUBLE MESSAGE DROPZONE ---------- */ /* * Dropzone.js génère son propre .dz-message. * Nous avons déjà .ci-dropzone-copy. */ #myGreatDropzone > .dz-message { display: none !important; } #myGreatDropzone .ci-dropzone-copy { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-height: 300px !important; margin: 0 !important; padding: 34px 25px !important; text-align: center !important; } #myGreatDropzone .ci-upload-cloud { display: block !important; font-size: 52px !important; line-height: 1 !important; color: #1389f7 !important; margin-bottom: 4px !important; } #myGreatDropzone .ci-dropzone-copy strong { color: #081b47 !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1.25 !important; } #myGreatDropzone .ci-dropzone-copy > span:not(.ci-upload-cloud):not(.ci-upload-cta) { color: #6c7e9c !important; font-size: 14px !important; } #myGreatDropzone .ci-upload-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 290px !important; min-height: 52px !important; margin-top: 7px !important; padding: 0 30px !important; border-radius: 11px !important; background: linear-gradient(135deg,#087cf0,#11a8ed) !important; color: #fff !important; font-size: 16px !important; font-weight: 800 !important; box-shadow: 0 10px 25px rgba(8,124,240,.20) !important; } #myGreatDropzone .ci-dropzone-copy small { color: #637493 !important; font-size: 12px !important; margin-top: 4px !important; } /* ---------- 3. DROPZONE PLUS COMPACTE ---------- */ #myGreatDropzone { min-height: 300px !important; padding: 0 !important; overflow: hidden !important; } /* ---------- 4. BARRE AJOUTER / SUPPRIMER ---------- */ #blockdebtn { display: flex !important; align-items: center !important; gap: 14px !important; padding: 12px !important; margin-top: 14px !important; background: #f8fbff !important; border: 1px solid #dce8f5 !important; border-radius: 14px !important; } #add-files-btn, #remove-all-files { min-height: 46px !important; padding: 0 18px !important; border: 0 !important; border-radius: 10px !important; font-weight: 800 !important; } #add-files-btn { background: #176cf0 !important; color: #fff !important; } #remove-all-files { background: #fff2f2 !important; color: #e35656 !important; } #add-files-btn:disabled, #remove-all-files:disabled { opacity: .48 !important; } /* ---------- 5. REGLAGES COMPRESSION ---------- */ #blockdecompression { margin-top: 2px !important; padding: 16px !important; background: #f8fbff !important; border: 1px solid #dce8f5 !important; border-radius: 14px !important; } #blockdecompression select { min-height: 44px !important; border: 1px solid #cad9ea !important; border-radius: 10px !important; background-color: #fff !important; color: #172a4c !important; } /* ---------- 6. TELECHARGEMENT ---------- */ #download-all { min-height: 48px !important; padding: 0 24px !important; margin: 14px auto 0 !important; border: 0 !important; border-radius: 11px !important; background: #087cf0 !important; color: #fff !important; font-weight: 800 !important; box-shadow: 0 8px 22px rgba(8,124,240,.18) !important; } #download-all:disabled { opacity: .45 !important; box-shadow: none !important; } /* ---------- 7. MOBILE ---------- */ @media (max-width: 640px) { #myGreatDropzone .ci-dropzone-copy { min-height: 260px !important; padding: 25px 15px !important; } #myGreatDropzone .ci-upload-cta { width: 100% !important; min-width: 0 !important; } #blockdebtn { flex-direction: column !important; align-items: stretch !important; } #add-files-btn, #remove-all-files { width: 100% !important; } #download-all { width: 100% !important; } } /* ========================================================== V2.2.1 - CORRECTIFS UI Menus + Dropzone legacy + espacements ========================================================== */ /* ---------- MENUS DEROULANTS ---------- */ #fh5co-primary-menu > li { position: relative; } #fh5co-primary-menu .fh5co-sub-menu { background: #ffffff !important; border: 1px solid #dce7f5 !important; border-radius: 14px !important; padding: 8px !important; min-width: 190px !important; box-shadow: 0 18px 45px rgba(15, 39, 85, .14) !important; } #fh5co-primary-menu .fh5co-sub-menu li { background: transparent !important; border: 0 !important; } #fh5co-primary-menu .fh5co-sub-menu li a { display: block !important; color: #263750 !important; background: transparent !important; opacity: 1 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.25 !important; padding: 9px 12px !important; border-radius: 8px !important; text-shadow: none !important; } #fh5co-primary-menu .fh5co-sub-menu li a:hover, #fh5co-primary-menu .fh5co-sub-menu li a:focus { color: #087cf0 !important; background: #eef6ff !important; } /* flèches éventuelles du vieux thème */ #fh5co-primary-menu .fh5co-sub-menu li a:after { color: #70839e !important; } /* ---------- DROPZONE ---------- */ #myGreatDropzone { position: relative !important; overflow: hidden !important; } /* La nouvelle interface doit être le seul message affiché au centre de la Dropzone. */ #myGreatDropzone .ci-dropzone-copy { position: relative !important; z-index: 10 !important; } /* neutralisation du message Dropzone historique */ #myGreatDropzone .dz-default, #myGreatDropzone .dz-message, #myGreatDropzone > .dz-message { display: none !important; } /* Le vieux thème utilise également ecranchage. Il ne doit pas créer une seconde zone vide/message lorsqu'aucun fichier n'est chargé. */ #myGreatDropzone #ecranchage:empty { display: none !important; } /* Neutralisation des pseudo-elements historiques */ #myGreatDropzone:before, #myGreatDropzone:after, #myGreatDropzone #ecranchage:before, #myGreatDropzone #ecranchage:after { content: none !important; } /* ---------- PANNEAU DE REGLAGES ---------- */ #blockdebtn, #blockdecompression { box-shadow: none !important; } #blockdebtn { margin-top: 14px !important; } #blockdecompression { margin-top: 2px !important; } /* téléchargement */ #download-all { margin-top: 14px !important; margin-bottom: 0 !important; } /* ---------- SUPPRESSION DU GRAND TROU ---------- */ /* Le spacer historique est placé immédiatement après la nouvelle section Tous nos outils. */ .ci-tools-section + .fh5co-spacer, .ci-tools-section + .fh5co-spacer-md { height: 24px !important; min-height: 24px !important; margin: 0 !important; padding: 0 !important; } /* ---------- MOBILE ---------- */ @media (max-width: 767px) { #fh5co-primary-menu .fh5co-sub-menu { min-width: 170px !important; } #blockdebtn, #blockdecompression { border-radius: 14px !important; } #download-all { max-width: calc(100% - 24px) !important; } } /* ========================================================== V2.2.2 - HERO ACCUEIL ========================================================== */ #pageindexas #fh5co-hero { background: radial-gradient(circle at 15% 30%, rgba(38, 132, 255, .10), transparent 30%), radial-gradient(circle at 85% 20%, rgba(79, 172, 254, .12), transparent 32%), linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important; } #pageindexas #indexarer { text-align: center !important; } #pageindexas .ci-home-eyebrow { display: inline-flex !important; align-items: center; justify-content: center; gap: 9px; margin: 0 0 22px !important; padding: 8px 16px; border: 1px solid #d9e9fb; border-radius: 999px; background: rgba(255,255,255,.85); color: #53657d !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: 0 5px 20px rgba(30,80,140,.05); } #pageindexas .ci-home-eyebrow span { color: #1683f3; } #pageindexas .ci-home-title { max-width: 850px; margin: 0 auto 20px !important; padding: 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size: clamp(40px, 5vw, 64px) !important; font-weight: 750 !important; line-height: 1.06 !important; letter-spacing: -2.3px !important; text-transform: none !important; color: #142a46 !important; } #pageindexas .ci-home-title span, #pageindexas .ci-home-title strong { display: block; } #pageindexas .ci-home-title span { color: #142a46 !important; font-weight: 750 !important; } #pageindexas .ci-home-title strong { color: #087cf0 !important; font-weight: 750 !important; } #pageindexas .ci-home-subtitle { max-width: 690px; margin: 0 auto 28px !important; color: #63758c !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: 0 !important; text-transform: none !important; } #pageindexas .ci-home-cta { margin: 0 !important; } #pageindexas .ci-home-cta .btn { border: 0 !important; border-radius: 12px !important; padding: 15px 27px !important; background: #087cf0 !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: 0 10px 25px rgba(8,124,240,.22) !important; } #pageindexas .ci-home-cta .btn:hover { background: #066dd2 !important; transform: translateY(-1px); } @media (max-width: 767px) { #pageindexas .ci-home-title { font-size: 38px !important; letter-spacing: -1.5px !important; } #pageindexas .ci-home-subtitle { font-size: 16px !important; } #pageindexas .ci-home-eyebrow { font-size: 11px !important; gap: 6px; padding: 7px 11px; } } #fh5co-hero h1 > strong{color:#087cf0;font-weight:inherit} .ci-tool-card{min-height:112px;padding:18px 16px} .ci-tool-icon{width:44px;height:44px;border-radius:10px;font-size:10px} .ci-tool-card{display:grid;grid-template-columns:44px 1fr 18px;grid-template-rows:44px auto auto;column-gap:10px;align-items:center}.ci-tool-icon{grid-column:1;grid-row:1}.ci-tool-card em{grid-column:3;grid-row:1}.ci-tool-card strong{grid-column:1/4;grid-row:2;font-size:13px;margin-top:8px}.ci-tool-card small{grid-column:1/4;grid-row:3;font-size:10px} .ci-tool-card{min-height:100px;padding:15px 16px} .ci-tool-card{min-height:100px;padding:15px 16px} .ci-tool-icon{width:38px;height:46px;border-radius:6px 10px 6px 6px;font-size:8px;position:relative;box-shadow:0 5px 10px rgba(30,80,140,.12)} .ci-tool-icon:after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 10px 10px 0;border-color:transparent #fff transparent transparent;border-radius:0 4px 0 0} .ci-tool-jpg .ci-tool-icon{background:#1687f8}.ci-tool-png .ci-tool-icon{background:#35b8f4}.ci-tool-gif .ci-tool-icon{background:#43cfa9}.ci-tool-webp .ci-tool-icon{background:#39c99b}.ci-tool-ico .ci-tool-icon{background:#7c5cf0}.ci-tool-bmp .ci-tool-icon{background:#49aef2}.ci-tool-tiff .ci-tool-icon{background:#ef4f91}.ci-tool-avif .ci-tool-icon{background:#9655ef}.ci-tool-raw .ci-tool-icon{background:#54749d}.ci-tool-heic .ci-tool-icon{background:#db5ae8}.ci-tool-psd .ci-tool-icon{background:#5279e8}.ci-tool-eps .ci-tool-icon{background:#ff8b35}.ci-tool-ai .ci-tool-icon{background:#ff6b24}.ci-tool-pdf .ci-tool-icon{background:#f05268}.ci-tool-svg .ci-tool-icon{background:#f5a33b} .ci-tool-card em{position:absolute;top:17px;right:16px;font-size:18px;font-weight:700;color:#173f70;line-height:1;transition:transform .2s ease}.ci-tool-card:hover em{transform:translateX(3px);color:#087cf0} /* ===== LOGO BICOLORE ===== */ #fh5co-logo .ci-logo-main{color:#087cf0;font-weight:800} #fh5co-logo .ci-logo-dot{color:#087cf0;font-weight:800} #fh5co-logo .ci-logo-net{color:#172b4d;font-weight:800} /* ===== LOGO BICOLORE FINAL ===== */ #fh5co-logo a .ci-logo-main{ color:#087cf0 !important; font-weight:800 !important; } #fh5co-logo a .ci-logo-dot{ color:#087cf0 !important; font-weight:800 !important; } #fh5co-logo a .ci-logo-net{ color:#172b4d !important; font-weight:800 !important; } /* ===== COULEURS DES FORMATS ===== */ .ci-tool-jpg .ci-tool-icon{background:#087cf0 !important} .ci-tool-png .ci-tool-icon{background:#00a8e8 !important} .ci-tool-gif .ci-tool-icon{background:#00b894 !important} .ci-tool-webp .ci-tool-icon{background:#00c2a8 !important} .ci-tool-ico .ci-tool-icon{background:#6c4ce8 !important} .ci-tool-bmp .ci-tool-icon{background:#2196f3 !important} .ci-tool-tiff .ci-tool-icon{background:#e83e8c !important} .ci-tool-avif .ci-tool-icon{background:#8e44e9 !important} .ci-tool-raw .ci-tool-icon{background:#34495e !important} .ci-tool-heic .ci-tool-icon{background:#d633d6 !important} .ci-tool-psd .ci-tool-icon{background:#536dfe !important} .ci-tool-eps .ci-tool-icon{background:#ff9800 !important} .ci-tool-ai .ci-tool-icon{background:#ff5722 !important} .ci-tool-pdf .ci-tool-icon{background:#e53935 !important} .ci-tool-svg .ci-tool-icon{background:#20b486 !important} /* ===== FLECHES DES CARTES ===== */ .ci-tool-card{ position:relative !important; } .ci-tool-card em{ position:absolute !important; top:17px !important; right:16px !important; display:block !important; font-size:19px !important; font-weight:700 !important; color:#173f70 !important; line-height:1 !important; font-style:normal !important; transition:all .2s ease !important; } .ci-tool-card:hover em{ transform:translateX(4px) !important; color:#087cf0 !important; } /* ===== LOGO : MÊME BICOLORE QUE LES TITRES ===== */ #fh5co-logo a .ci-logo-main{ color:#172b4d !important; font-weight:800 !important; } #fh5co-logo a .ci-logo-dot{ color:#087cf0 !important; font-weight:800 !important; } #fh5co-logo a .ci-logo-net{ color:#087cf0 !important; font-weight:800 !important; } /* ===== LOGO : BICOLORE IDENTIQUE AUX TITRES ===== */ #fh5co-logo a.linkyte .ci-logo-main{ color:#172b4d !important; } #fh5co-logo a.linkyte .ci-logo-dot{ color:#087cf0 !important; } #fh5co-logo a.linkyte .ci-logo-net{ color:#087cf0 !important; } /* ===== TITRE : MÊME BICOLORE QUE LA MAQUETTE ===== */ #fh5co-hero h1{ color:#172b4d !important; } #fh5co-hero h1 > strong{ color:#087cf0 !important; font-weight:inherit !important; } /* ===== TITRE BICOLORE FINAL ===== */ #fh5co-hero h1{ color:#172b4d !important; } #fh5co-hero h1 .ci-title-blue{ color:#087cf0 !important; font-weight:inherit !important; } /* ===== TITRE BICOLORE FINAL ===== */ #fh5co-hero h1 { color: #172b4d !important; } #fh5co-hero h1 .ci-title-blue { color: #087cf0 !important; font-weight: inherit !important; } /* ============================================================ MOBILE FINAL — uniquement <= 767px Ne modifie PAS le desktop ============================================================ */ @media (max-width:767px){ /* ---------- HEADER ---------- */ #fh5co-header{ background:#ffffff !important; height:62px !important; min-height:62px !important; border-bottom:1px solid #e8eef5 !important; box-shadow:0 1px 8px rgba(20,50,90,.05) !important; } #fh5co-header .container{ height:62px !important; } #fh5co-header .row{ height:62px !important; } #fh5co-logo{ margin:0 !important; padding:0 !important; height:62px !important; line-height:62px !important; } #fh5co-logo a{ font-size:20px !important; line-height:62px !important; letter-spacing:-.5px !important; text-transform:none !important; color:#172b4d !important; font-weight:800 !important; } #fh5co-logo a .ci-logo-main{ color:#172b4d !important; font-weight:800 !important; } #fh5co-logo a .ci-logo-dot, #fh5co-logo a .ci-logo-net{ color:#087cf0 !important; font-weight:800 !important; } /* ---------- HAMBURGER ---------- */ .fh5co-nav-toggle{ top:14px !important; right:14px !important; width:38px !important; height:34px !important; border-radius:8px !important; background:#087cf0 !important; color:#fff !important; box-shadow:0 4px 12px rgba(8,124,240,.20) !important; } .fh5co-nav-toggle span, .fh5co-nav-toggle span:before, .fh5co-nav-toggle span:after{ background:#ffffff !important; } /* ---------- HERO ---------- */ #fh5co-hero{ min-height:auto !important; padding:34px 18px 30px !important; background:linear-gradient( 180deg, #f4fbff 0%, #ffffff 100% ) !important; } #fh5co-hero .container{ width:100% !important; max-width:100% !important; padding:0 !important; } #fh5co-hero .row{ margin:0 !important; } /* Badge au-dessus du titre */ #fh5co-hero .hero-badge, #fh5co-hero .badge{ font-size:10px !important; line-height:14px !important; padding:7px 12px !important; margin-bottom:18px !important; border-radius:20px !important; } /* ---------- TITRE ---------- */ #fh5co-hero h1{ max-width:340px !important; margin:0 auto 14px !important; padding:0 !important; font-size:34px !important; line-height:1.08 !important; letter-spacing:-1.4px !important; text-align:center !important; color:#172b4d !important; font-weight:800 !important; } #fh5co-hero h1 .ci-title-blue{ color:#087cf0 !important; } /* Si le titre utilise directement */ #fh5co-hero h1 > strong{ color:#087cf0 !important; font-weight:800 !important; } /* ---------- SOUS-TITRE ---------- */ #fh5co-hero h2{ max-width:315px !important; margin:0 auto 25px !important; font-size:14px !important; line-height:1.55 !important; text-align:center !important; color:#607a98 !important; } /* ---------- ZONE UPLOAD ---------- */ #fh5co-hero .dropzone, #fh5co-hero #dropzone{ width:100% !important; max-width:330px !important; min-height:150px !important; margin:0 auto !important; border-radius:16px !important; } /* ---------- BOUTON ---------- */ #fh5co-hero button{ border-radius:10px !important; } } /* Très petits téléphones */ @media (max-width:380px){ #fh5co-logo a{ font-size:18px !important; } #fh5co-hero{ padding-left:14px !important; padding-right:14px !important; } #fh5co-hero h1{ max-width:315px !important; font-size:31px !important; letter-spacing:-1.2px !important; } } /* ============================================================ COMPRESSEUR DIRECT PAGE ACCUEIL ============================================================ */ #pageindexas .ci-home-dropzone{ position:relative!important; width:min(760px,calc(100% - 30px))!important; min-height:230px!important; margin:28px auto!important; padding:30px!important; border:2px dashed #b9d4ef!important; border-radius:22px!important; background:#fff!important; box-shadow:0 16px 45px rgba(30,80,140,.10)!important; cursor:pointer!important; display:flex!important; align-items:center!important; justify-content:center!important; } #pageindexas .ci-home-dropzone:hover{ border-color:#087cf0!important; background:#fbfdff!important; } #pageindexas .ci-home-dropzone .ci-dropzone-copy{ position:relative!important; z-index:5!important; width:100%!important; min-height:160px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:8px!important; text-align:center!important; pointer-events:none!important; } #pageindexas .ci-home-dropzone .ci-upload-cloud{ display:flex!important; align-items:center!important; justify-content:center!important; width:62px!important; height:62px!important; border-radius:17px!important; background:#eef6ff!important; color:#087cf0!important; font-size:34px!important; line-height:1!important; } #pageindexas .ci-home-dropzone .ci-dropzone-copy strong{ color:#172b4d!important; font-size:21px!important; font-weight:800!important; } #pageindexas .ci-home-dropzone .ci-dropzone-copy>span:not(.ci-upload-cloud):not(.ci-upload-cta){ color:#71849d!important; font-size:14px!important; } #pageindexas .ci-home-dropzone .ci-upload-cta{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:220px!important; min-height:46px!important; margin-top:7px!important; padding:11px 22px!important; border-radius:11px!important; background:#087cf0!important; color:#fff!important; font-size:14px!important; font-weight:800!important; } #pageindexas .ci-home-dropzone .ci-dropzone-copy small{ margin-top:4px!important; color:#8b9bb0!important; font-size:11px!important; } #pageindexas #home-compressor-controls{ display:none!important; } #pageindexas #myGreatDropzone .dz-message{ display:none!important; } @media(max-width:640px){ #pageindexas .ci-home-dropzone{ width:calc(100% - 22px)!important; min-height:220px!important; padding:20px!important; border-radius:18px!important; } #pageindexas .ci-home-dropzone .ci-upload-cta{ width:100%!important; min-width:0!important; } #pageindexas .ci-home-dropzone .ci-dropzone-copy strong{ font-size:18px!important; } } /* ========================================================= ACCUEIL — COMPRESSEUR CONTROLES SOUS LA ZONE D'UPLOAD ========================================================= */ #pageindexas #home-compressor-controls{ display:flex !important; visibility:visible !important; position:relative !important; width:100% !important; height:auto !important; overflow:visible !important; opacity:1 !important; pointer-events:auto !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; gap:12px !important; margin:18px auto 0 !important; padding:14px 16px !important; box-sizing:border-box !important; } /* Chaque contrôle */ #pageindexas #home-compressor-controls select, #pageindexas #home-compressor-controls input, #pageindexas #home-compressor-controls button{ box-sizing:border-box !important; } /* Qualité */ #pageindexas #home-compressor-controls #comprechoix{ min-width:190px !important; height:44px !important; padding:0 14px !important; border:1px solid #dbe5f2 !important; border-radius:10px !important; background:#fff !important; color:#172b4d !important; font-size:14px !important; font-weight:600 !important; outline:none !important; } /* Taux */ #pageindexas #home-compressor-controls #precicompres{ width:72px !important; height:44px !important; padding:0 10px !important; border:1px solid #dbe5f2 !important; border-radius:10px !important; background:#fff !important; color:#172b4d !important; text-align:center !important; font-size:15px !important; font-weight:700 !important; } /* Format */ #pageindexas #home-compressor-controls #extoutput{ min-width:150px !important; height:44px !important; padding:0 14px !important; border:1px solid #dbe5f2 !important; border-radius:10px !important; background:#fff !important; color:#172b4d !important; font-size:14px !important; font-weight:600 !important; outline:none !important; } /* Boutons */ #pageindexas #home-compressor-controls button{ min-height:44px !important; padding:0 18px !important; border:0 !important; border-radius:10px !important; background:#087cf0 !important; color:#fff !important; font-size:14px !important; font-weight:700 !important; cursor:pointer !important; } /* Boutons désactivés */ #pageindexas #home-compressor-controls button:disabled{ opacity:.45 !important; cursor:default !important; } /* Télécharger */ #pageindexas #home-compressor-controls #download-all{ background:#172b4d !important; } /* Compteur */ #pageindexas #home-compressor-controls #comptmo{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:22px !important; height:22px !important; margin-left:5px !important; border-radius:50% !important; background:#087cf0 !important; color:#fff !important; font-size:12px !important; } /* Erreurs */ #pageindexas #home-compressor-controls #error-container{ width:100% !important; flex-basis:100% !important; text-align:center !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:700px){ #pageindexas #home-compressor-controls{ flex-direction:column !important; align-items:stretch !important; gap:0 !important; padding:12px !important; } #pageindexas #home-compressor-controls select, #pageindexas #home-compressor-controls input, #pageindexas #home-compressor-controls button{ width:100% !important; max-width:none !important; } #pageindexas #home-compressor-controls #precicompres{ width:100% !important; } } /* ========================================================= ACCUEIL — CONTROLES COMPRESSEUR RENDU COMPACT ET DISCRET ========================================================= */ /* * Le conteneur reste fonctionnel pour upload-min.js. * On lui retire simplement son apparence de gros formulaire. */ #pageindexas #home-compressor-controls{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; width:min(760px, calc(100% - 30px)) !important; max-width:760px !important; margin:14px auto 0 !important; padding:0 !important; gap:8px !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* --------------------------------------------------------- SELECTS --------------------------------------------------------- */ #pageindexas #home-compressor-controls #comprechoix{ width:205px !important; min-width:205px !important; height:38px !important; margin:0 !important; padding:0 11px !important; border:1px solid #d8e3f0 !important; border-radius:8px !important; background:#fff !important; color:#172b4d !important; font-size:13px !important; font-weight:600 !important; box-shadow:0 1px 4px rgba(23,43,77,.05) !important; } /* Format */ #pageindexas #home-compressor-controls #extoutput{ width:130px !important; min-width:130px !important; height:38px !important; margin:0 !important; padding:0 11px !important; border:1px solid #d8e3f0 !important; border-radius:8px !important; background:#fff !important; color:#172b4d !important; font-size:13px !important; font-weight:600 !important; box-shadow:0 1px 4px rgba(23,43,77,.05) !important; } /* --------------------------------------------------------- TAUX DE COMPRESSION --------------------------------------------------------- */ #pageindexas #home-compressor-controls #precicompres{ width:58px !important; min-width:58px !important; height:38px !important; margin:0 !important; padding:0 6px !important; border:1px solid #d8e3f0 !important; border-radius:8px !important; background:#fff !important; color:#172b4d !important; font-size:13px !important; font-weight:700 !important; text-align:center !important; box-shadow:0 1px 4px rgba(23,43,77,.05) !important; } /* --------------------------------------------------------- BOUTONS INTERNES --------------------------------------------------------- */ #pageindexas #home-compressor-controls button{ width:auto !important; min-width:38px !important; height:38px !important; min-height:38px !important; margin:0 !important; padding:0 13px !important; border:0 !important; border-radius:8px !important; background:#087cf0 !important; color:#fff !important; font-size:12px !important; font-weight:700 !important; box-shadow:none !important; } /* Télécharger */ #pageindexas #home-compressor-controls #download-all{ min-width:105px !important; background:#172b4d !important; } /* Boutons désactivés */ #pageindexas #home-compressor-controls button:disabled{ opacity:.45 !important; } /* --------------------------------------------------------- COMPTEUR --------------------------------------------------------- */ #pageindexas #home-compressor-controls #comptmo{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:19px !important; width:19px !important; height:19px !important; margin-left:4px !important; border-radius:50% !important; background:#087cf0 !important; color:#fff !important; font-size:10px !important; line-height:19px !important; } /* --------------------------------------------------------- ERREURS --------------------------------------------------------- */ #pageindexas #home-compressor-controls #error-container{ flex-basis:100% !important; width:100% !important; margin:2px 0 0 !important; text-align:center !important; } /* --------------------------------------------------------- ESPACEMENT AVEC LA SUITE DE LA PAGE --------------------------------------------------------- */ #pageindexas #home-compressor-controls + *{ margin-top:8px !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width:700px){ #pageindexas #home-compressor-controls{ width:calc(100% - 24px) !important; max-width:500px !important; gap:7px !important; margin-top:12px !important; } #pageindexas #home-compressor-controls #comprechoix{ width:100% !important; min-width:0 !important; flex:1 1 100% !important; } #pageindexas #home-compressor-controls #extoutput{ width:calc(100% - 66px) !important; min-width:0 !important; flex:1 1 auto !important; } #pageindexas #home-compressor-controls #precicompres{ width:58px !important; min-width:58px !important; } #pageindexas #home-compressor-controls button{ flex:0 0 auto !important; } #pageindexas #home-compressor-controls #download-all{ min-width:105px !important; } } /* ========================================================= POLISH V2 — HEADER + HERO ACCUEIL ========================================================= */ /* ---------- Menu : espace propre avant les chevrons ---------- */ #fh5co-header nav ul li.has-sub > a, #fh5co-header nav ul li.fh5co-has-sub > a, #fh5co-header nav ul li.has-dropdown > a { display: inline-flex !important; align-items: center !important; gap: 7px !important; } /* Si le thème dessine la flèche avec ::after */ #fh5co-header nav ul li.has-sub > a::after, #fh5co-header nav ul li.fh5co-has-sub > a::after, #fh5co-header nav ul li.has-dropdown > a::after { position: static !important; margin: 0 !important; vertical-align: middle !important; transform: none !important; } /* Évite qu'une flèche soit collée au texte */ #fh5co-header nav ul li > a .caret, #fh5co-header nav ul li > a .arrow, #fh5co-header nav ul li > a i { margin-left: 7px !important; position: static !important; vertical-align: middle !important; } /* ---------- Navigation ---------- */ #fh5co-header nav ul li > a { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .4px !important; } /* ---------- Hero accueil ---------- */ #pageindexas .ci-home-title { font-size: clamp(44px, 4.2vw, 58px) !important; line-height: 1.05 !important; letter-spacing: -2px !important; font-weight: 800 !important; } #pageindexas .ci-home-subtitle { font-size: 17px !important; line-height: 1.65 !important; } #pageindexas .ci-home-eyebrow { font-size: 12px !important; } /* Dropzone */ #pageindexas .ci-home-dropzone .ci-dropzone-copy strong { font-size: 19px !important; line-height: 1.3 !important; } #pageindexas .ci-home-dropzone .ci-upload-cta { font-size: 15px !important; } /* ---------- Suppression de la petite flèche parasite ---------- */ /* Flèche isolée située entre le sous-titre et l'upload */ #pageindexas .ci-home-cta { display: none !important; } /* ---------- Mobile ---------- */ @media (max-width: 767px) { #pageindexas .ci-home-title { font-size: clamp(34px, 10vw, 43px) !important; line-height: 1.04 !important; letter-spacing: -1.4px !important; } #pageindexas .ci-home-subtitle { font-size: 15px !important; line-height: 1.55 !important; padding-left: 14px !important; padding-right: 14px !important; } #pageindexas .ci-home-eyebrow { font-size: 11px !important; } #pageindexas .ci-home-dropzone .ci-dropzone-copy strong { font-size: 17px !important; } } /* ===== FIX CHEVRONS MENU ===== */ /* Le thème place son chevron via pseudo-élément */ #fh5co-header .fh5co-sub-ddown { display: inline-flex !important; align-items: center !important; position: relative !important; padding-right: 15px !important; } #fh5co-header .fh5co-sub-ddown::after { position: absolute !important; right: 0 !important; top: 50% !important; margin: 0 !important; transform: translateY(-50%) !important; } /* Au cas où le thème utilise :before */ #fh5co-header .fh5co-sub-ddown::before { margin-right: 0 !important; } /* ========================================================= MENU DESKTOP — CHEVRON APRÈS LE TEXTE ========================================================= */ @media (min-width: 769px) { #fh5co-primary-menu > li > a.sf-with-ul { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } #fh5co-primary-menu > li > a.sf-with-ul:after { position: static !important; display: inline-block !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; margin: 1px 0 0 0 !important; width: auto !important; height: auto !important; border: 0 !important; font-family: 'themify' !important; font-size: 9px !important; line-height: 1 !important; content: "\e64b" !important; color: #438192 !important; transform: none !important; vertical-align: middle !important; } } /* FIX LOGO BICOLORE SANS ESPACEMENT */ #fh5co-logo a.linkyte .ci-logo-main,#fh5co-logo a.linkyte .ci-logo-dot,#fh5co-logo a.linkyte .ci-logo-net{font-size:inherit!important;letter-spacing:inherit!important;margin:0!important;padding:0!important;display:inline!important} #fh5co-logo a.linkyte .ci-logo-dot{margin-left:-1px!important;margin-right:-1px!important} /* FIX LOGO FINAL */ #fh5co-logo a.linkyte{font-size:24px!important;font-weight:800!important;letter-spacing:-0.5px!important;white-space:nowrap!important} #fh5co-logo a.linkyte .ci-logo-main,#fh5co-logo a.linkyte .ci-logo-dot,#fh5co-logo a.linkyte .ci-logo-net{font-size:1em!important;letter-spacing:inherit!important;margin:0!important;padding:0!important;display:inline!important} #fh5co-logo a.linkyte .ci-logo-dot{margin:0!important} /* AJUSTEMENT OPTIQUE LOGO */ #fh5co-logo a.linkyte .ci-logo-dot{margin-left:3px!important;margin-right:0!important}