/*
Theme Name: Hostinger AI theme
Theme URI: https://electrocovers.com/
Description: Electrocovers LLC, international sourcing brokers. 5 languages (EN, DE, FR, ZH, IT). Base styles shared with WebPro 360.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: electrocovers
Update URI: false
WPVibe: yes
*/

/* Couleurs du logo : bleu marine des panneaux + soleil orange / corail / jaune */
:root{
  --cobalt:#0E2275;      /* bleu marine */
  --violet:#1F3BA8;      /* bleu intermediaire */
  --rose:#E2552F;        /* corail */
  --ambre:#F39A1E;       /* orange soleil */
  --menthe:#0E9F8E;      /* accent sarcelle (etats positifs) */
  --ink:#F8F8FB; --ink-2:#FFFFFF; --ink-3:#EEF0F8; --line:#E3E6F1;
  --fg:#0A1440; --muted:#545B7C;
  --wheel:conic-gradient(from 0deg,#0E2275,#E2552F,#F39A1E,#F7C744,#0E2275);
  --sweep:linear-gradient(100deg,#0E2275 0%,#B93A2A 58%,#F39A1E 100%);
  --sun:linear-gradient(100deg,#E2552F,#F39A1E 60%,#F7C744);
  --shadow:0 24px 60px -28px rgba(14,34,117,.25);
  --shadow-hi:0 34px 80px -30px rgba(14,34,117,.38);
}
body.ec::after{background:radial-gradient(38vmax 30vmax at 12% 8%,color-mix(in srgb,var(--ambre) 14%,transparent),transparent 70%),
  radial-gradient(34vmax 28vmax at 88% 18%,color-mix(in srgb,var(--cobalt) 12%,transparent),transparent 70%),
  radial-gradient(40vmax 30vmax at 70% 92%,color-mix(in srgb,var(--rose) 10%,transparent),transparent 70%)}
.halo{background:radial-gradient(circle,color-mix(in srgb,var(--ambre) 16%,transparent),transparent 65%)}
::selection{background:var(--cobalt);color:#fff}
.btn-main{background:var(--sweep);color:#fff;box-shadow:0 14px 34px -14px rgba(14,34,117,.6)}
.btn-main:hover{box-shadow:0 18px 44px -12px rgba(226,85,47,.55)}
.btn-ghost:hover{border-color:var(--cobalt);color:var(--cobalt)}
.eyebrow{color:var(--rose)}
.spot{background:linear-gradient(135deg,#fff,#FFF6EC)}
.console{background:#0A1440;color:#EEF1FF}
.console .keep{background:rgba(20,200,170,.18);color:#5FE3CC}
.console .boost{background:rgba(243,154,30,.2);color:#FFC46B}
.console .cut{background:rgba(226,85,47,.22);color:#FF9A80}
footer{background:#071447;--ink-2:#0E1C5A;--line:#22306B;--muted:#AAB3D8}
.mcta{box-shadow:0 18px 40px -12px rgba(14,34,117,.55)}
@keyframes mpulse{0%,100%{box-shadow:0 18px 40px -12px rgba(14,34,117,.55)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--ambre) 30%,transparent),0 18px 40px -12px rgba(14,34,117,.55)}}
.wp-progress{background:var(--sun);box-shadow:0 0 12px color-mix(in srgb,var(--ambre) 60%,transparent)}
.fx-tilt::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(243,154,30,.13),rgba(14,34,117,.05) 40%,transparent 70%)}
.plan.hot,.callback .formcard{--c1:#0E2275}

/* logo : icone soleil + mot-symbole ELECTRO / COVERS */
.logo{gap:10px}
.logo i{width:42px;height:42px;border-radius:0;background:url(../../uploads/2026/10/electrocovers-icon.png) center/contain no-repeat;-webkit-mask:none;mask:none;animation:none;flex:none}
.logo .wm{display:grid;line-height:1}
.logo .wm b{font-family:var(--f-display);font-weight:900;font-stretch:112%;font-size:21px;letter-spacing:.01em;color:var(--cobalt)}
.logo .wm small{font-family:var(--f-body);font-weight:600;font-size:10.5px;letter-spacing:.62em;color:#C98A4E;margin-top:5px;padding-left:2px}
footer .logo i{background-image:url(../../uploads/2026/10/electrocovers-icon-light.png)}
footer .logo .wm b{color:#fff}
footer .logo .wm small{color:#F3B37A}
.flogo{display:inline-flex}

/* hero : globe et routes de sourcing */
.globe-wrap{position:relative}
.globe{position:relative;max-width:500px;width:100%;margin-inline:auto;aspect-ratio:1;transition:transform .2s ease-out}
.globe svg{width:100%;height:100%;display:block;overflow:visible}
.globe .g-halo{fill:none;stroke:url(#garc);stroke-width:1.5;stroke-dasharray:3 9;opacity:.6;transform-origin:220px 220px;animation:spin 60s linear infinite}
.globe .g-sphere{stroke:var(--line);stroke-width:1.5;filter:drop-shadow(0 30px 50px rgba(14,34,117,.18))}
.globe .g-grid ellipse,.globe .g-grid line{fill:none;stroke:color-mix(in srgb,var(--cobalt) 16%,transparent);stroke-width:1}
.globe .g-arc{fill:none;stroke:url(#garc);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:6 8}
.globe .g-arc2{stroke-width:1.6;opacity:.55}
.globe .p-us,.globe .p-eu{fill:var(--cobalt)}
.globe .p-as{fill:var(--ambre)}
.globe .p-sm{fill:var(--rose)}
.globe .p-us-r,.globe .p-eu-r{fill:none;stroke:var(--cobalt);opacity:.45}
.globe .p-as-r{fill:none;stroke:var(--ambre);opacity:.55}
.globe text{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;fill:var(--muted);font-weight:700}
.globe .g-logo{position:absolute;left:50%;top:50%;width:19%;height:auto;transform:translate(-50%,-50%);opacity:.95;filter:drop-shadow(0 10px 18px rgba(243,154,30,.35));animation:float 6s ease-in-out infinite}
.globe .chip{animation:float 6s ease-in-out infinite}
.globe .chip.c1 .dot{background:var(--cobalt)}
.globe .chip.c2 .dot{background:var(--ambre)}
.globe .chip.c3 .dot{background:var(--rose)}
@media (max-width:900px){.globe{max-width:380px;margin-top:10px}}

/* secteurs */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sector{border:1px solid var(--line);border-radius:22px;padding:26px;background:var(--ink-2);box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;min-width:0}
.sector:hover{transform:translateY(-6px);box-shadow:var(--shadow-hi);border-color:color-mix(in srgb,var(--ambre) 45%,var(--line))}
.sector .ic{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border-radius:13px;background:var(--sun);color:#fff;font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.04em}
.sector h3{font-size:19px;margin:18px 0 8px}
.sector p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:1000px){.sectors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sectors{grid-template-columns:1fr}}

/* tuile principale : trajet */
.route{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--f-mono);font-size:12.5px;font-weight:700;letter-spacing:.08em}
.route span{border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--ink)}
.route i{flex:1 1 30px;min-width:24px;height:2px;background:repeating-linear-gradient(90deg,var(--ambre) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:routeflow 1.2s linear infinite}
@keyframes routeflow{to{background-position:24px 0}}

/* engagements sur 3 colonnes */
.guar3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.guar3{grid-template-columns:1fr}}

/* bureaux */
.offices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.office{border:1px solid var(--line);border-radius:22px;padding:28px;background:var(--ink-2);box-shadow:var(--shadow)}
.office .flag{display:inline-block;font-family:var(--f-mono);font-size:12px;font-weight:700;border-radius:8px;padding:4px 9px;background:var(--ink-3);color:var(--cobalt)}
.office h3{font-size:20px;margin:16px 0 10px}
.office p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media (max-width:860px){.offices-grid{grid-template-columns:1fr}}

/* WhatsApp */
.wa-float{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 14px 30px -8px rgba(0,0,0,.45);transition:transform .2s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:32px;height:32px;fill:#fff}
@media (max-width:700px){.wa-float{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:14px;width:54px;height:54px}}

/* chinois : pas de capitales, police adaptee */
.ec-zh{font-family:"Noto Sans SC","Hanken Grotesk","PingFang SC","Microsoft YaHei",sans-serif}
.ec-zh h1,.ec-zh h2,.ec-zh h3,.ec-zh .marquee span,.ec-zh .usch-pts b{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-stretch:100%;text-transform:none;letter-spacing:0;line-height:1.15}
.ec-zh h1 em,.ec-zh h2 em,.ec-zh .rot>span,.ec-zh .marquee span:nth-child(even){font-family:"Noto Sans SC","PingFang SC",sans-serif;font-style:normal;font-weight:700}
.ec-zh .hero h1{font-size:clamp(34px,5vw,72px)}
.ec-zh .eyebrow{letter-spacing:.06em}